样式调整

This commit is contained in:
licuizhu 2023-11-11 23:09:48 +08:00
parent df9ecd70d7
commit 6cb51b5b7e
4 changed files with 73 additions and 12 deletions

View File

@ -3,14 +3,19 @@
margin: 0 auto;
font-weight: 200;
}
.homepageCircleWrap {
height: 100vh;
overflow: hidden;
}
.homepageCircleOut {
// margin-top: 20px;
position: absolute;
top: -12vh;
display: flex;
justify-content: center;
align-items: center;
width: 95%;
height: 100vh;
width: 91%;
height: 140vh;
border-radius: 100%;
background-color: #fff;
}
@ -18,14 +23,14 @@
display: flex;
justify-content: center;
align-items: center;
width: 86%;
height: 86%;
width: 96%;
height: 95%;
border-radius: 100%;
border: 8px #F3F6FA dashed;
overflow: hidden;
}
.map {
width: 90%;
width: 94%;
height: 90%;
position: relative;
border-radius: 100%;

View File

@ -27,9 +27,10 @@ const Guide: React.FC<Props> = (props) => {
id: 'map',
map: new GaodeMap({
// pitch: 20,
doubleClickZoom: false,
style: 'light',
center: [ 110, 34 ],
zoom: 3
zoom: 3,
})
});
scene.on('loaded', () => {
@ -181,11 +182,14 @@ const Guide: React.FC<Props> = (props) => {
{/* 地图 */}
<div className={styles.homepageCircleOut}>
<div className={styles.homepageCircleIn}>
<div id='map' className={styles.map}></div>
<div className={styles.homepageCircleWrap}>
<div className={styles.homepageCircleOut}>
<div className={styles.homepageCircleIn}>
<div id='map' className={styles.map}></div>
</div>
</div>
</div>
</Layout>
);
};

View File

@ -84,10 +84,52 @@ body {
margin-bottom: 45px;
}
// 左侧导航栏
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-pro-layout .ant-pro-sider-actions {
display: none;
}
:where(.css-dev-only-do-not-override-1u016qe).ant-menu-light .ant-menu-item a:hover,
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-proLayout .ant-pro-sider .ant-menu .ant-menu-item:hover,
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-pro-layout .ant-pro-sider .ant-menu .ant-menu-item:hover {
color: #FFFFFF;
background-color: #2F66F2;
}
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-pro-layout .ant-pro-sider-logo >a {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 22px;
font-size: 22px;
flex-direction: column;
}
:where(.css-dev-only-do-not-override-9ntgx0).ant-layout .ant-layout-sider-light {
background-image: url(./assets/images/nav-bg.png) !important;
background-size: cover !important;
}
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-pro-layout .ant-pro-sider-logo >a >img {
margin-top: 48px;
width: 50px;
height: 50px;
}
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-pro-layout .ant-pro-sider-logo >a >h1 {
width: 96px;
height: 35px;
font-size: 24px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #2F66F2;
line-height: 35px;
margin-top: 10px;
}
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-pro-layout .ant-pro-sider-logo {
border: none;
height: 234px;
}
:where(.css-dev-only-do-not-override-1u016qe).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: #2F66F2;
color: #FFFFFF;
}
// 右侧
:where(.css-dev-only-do-not-override-1iwlhoc).ant-pro .ant-pro-layout .ant-pro-layout-content {
padding-block: 0;

View File

@ -151,9 +151,16 @@ class BaseMap extends React.Component{
}
// 点击点显示详细信息
markerEdit = (e) => {
console.log(111);
console.log('edit');
}
markderDel = (e) => {debugger
console.log('del');
return (function () {
console.log('del2')
})
}
// 在地图上设置点位 【经度,纬度】
setMarkers = (data, layerId) => {
let self = this;
@ -175,7 +182,10 @@ class BaseMap extends React.Component{
<div class="popup-name">名称${LabelsData[i].pointName}</div>
<div class="popup-address">地址${LabelsData[i].address || ''}</div>
<div class="popup-memo">备注${LabelsData[i].memo || ''}</div>
<div class="popup-btn-wrap"><span class="popup-edit">编辑</span><span class="popup-del"></span></div>
<div class="popup-btn-wrap">
<span class="popup-edit">编辑</span>
<span class="popup-del" onclick="${self.markderDel(LabelsData[i].pointId)}">删除</span>
</div>
</div>`);
marker = new Marker({
element: el