样式调整
This commit is contained in:
parent
df9ecd70d7
commit
6cb51b5b7e
@ -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%;
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user