提交 52a22ce6 作者: ZhangLingKun

修复:地图样式问题修复

上级 1049158e
...@@ -75,7 +75,9 @@ onMounted(() => { ...@@ -75,7 +75,9 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.network-list { .network-list {
.list-view { .list-view {
position: relative; position: fixed;
top: calc(100vh - 704rpx + 110rpx);
left: 0;
width: 100%; width: 100%;
//height: calc(100vh - 156rpx - 110rpx - (100vh - 504rpx)); //height: calc(100vh - 156rpx - 110rpx - (100vh - 504rpx));
height: calc(100vh - 156rpx - 110rpx - (100vh - 704rpx)); height: calc(100vh - 156rpx - 110rpx - (100vh - 704rpx));
......
...@@ -29,7 +29,9 @@ onMounted(() => { ...@@ -29,7 +29,9 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.network-select { .network-select {
position: relative; position: fixed;
top: calc(100vh - 704rpx);
left: 0;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
......
...@@ -36,10 +36,10 @@ ...@@ -36,10 +36,10 @@
</view> </view>
</template> </template>
<script> <script>
import { CommonAPI } from '@/api'
import NetworkSelect from './comp/network-select/index.vue' import NetworkSelect from './comp/network-select/index.vue'
import NetworkList from './comp/network-list/index.vue' import NetworkList from './comp/network-list/index.vue'
import NetworkFooter from './comp/network-footer/index.vue' import NetworkFooter from './comp/network-footer/index.vue'
import { CommonAPI } from '@/api'
export default { export default {
components: { components: {
...@@ -108,142 +108,6 @@ export default { ...@@ -108,142 +108,6 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
.network-map-warp {
height: 100%;
position: relative;
.map-content {
//height: calc(100vh - 504rpx);
height: calc(100vh - 704rpx);
width: 100%;
position: relative;
z-index: 10;
}
.network-total {
z-index: 20;
position: fixed;
top: 20rpx;
left: 16rpx;
//width: 244rpx;
width: 204rpx;
height: 46rpx;
background: #ffffff;
border-radius: 23rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 22rpx;
font-weight: 400;
color: #474747;
line-height: 46rpx;
box-shadow: 4rpx 8rpx 12rpx 0 rgba(135, 135, 135, 0.17);
.icon {
width: 20rpx;
height: 20rpx;
margin-right: 6rpx;
}
}
.network-location {
position: fixed;
bottom: 804rpx;
left: 24rpx;
width: 60rpx;
height: 60rpx;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
box-shadow: 4rpx 8rpx 12rpx 0 rgba(135, 135, 135, 0.17);
}
.network-location:active {
filter: brightness(0.86);
}
.network-type {
position: fixed;
bottom: 730rpx;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 20;
.type-item {
width: 160rpx;
height: 48rpx;
background: #ffffff;
border-radius: 16rpx;
text-align: center;
line-height: 48rpx;
font-size: 24rpx;
font-weight: 400;
color: #ff5b2d;
box-shadow: 4rpx 8rpx 12rpx 0 rgba(135, 135, 135, 0.17);
}
.item-active {
background: #ff5b2d;
color: #ffffff;
}
.type-item:active {
filter: brightness(0.86);
}
}
.network-none {
font-size: 22rpx;
font-weight: 400;
color: #28292b;
opacity: 0.68;
text-align: center;
margin: 150rpx auto;
}
}
::v-deep {
//高德地图-logo隐藏
.amap-logo {
display: none;
opacity: 0 !important;
}
//高德地图-版权隐藏
.amap-copyright {
opacity: 0;
}
.map-open-info {
width: 60vw;
position: relative;
.park-name {
font-size: 30rpx;
font-weight: bold;
}
.content,
.position,
.person,
.phone {
font-size: 28rpx;
line-height: 44rpx;
}
.button {
font-size: 26rpx;
font-weight: 500;
color: #1980ff;
padding: 15rpx 15rpx;
background: #f3faff;
border-radius: 8rpx;
position: absolute;
right: -15rpx;
bottom: 0rpx;
cursor: pointer;
}
}
}
</style>
<script module="ModuleInstance" lang="renderjs"> <script module="ModuleInstance" lang="renderjs">
/* eslint-disable */ /* eslint-disable */
export default { export default {
...@@ -391,3 +255,141 @@ export default { ...@@ -391,3 +255,141 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
.network-map-warp {
height: 100%;
position: relative;
.map-content {
//height: calc(100vh - 504rpx);
height: calc(100vh - 704rpx);
width: 100%;
z-index: 10;
position: fixed;
top: 0;
left: 0;
}
.network-total {
z-index: 20;
position: fixed;
top: 20rpx;
left: 16rpx;
//width: 244rpx;
width: 204rpx;
height: 46rpx;
background: #ffffff;
border-radius: 23rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 22rpx;
font-weight: 400;
color: #474747;
line-height: 46rpx;
box-shadow: 4rpx 8rpx 12rpx 0 rgba(135, 135, 135, 0.17);
.icon {
width: 20rpx;
height: 20rpx;
margin-right: 6rpx;
}
}
.network-location {
position: fixed;
bottom: 804rpx;
left: 24rpx;
width: 60rpx;
height: 60rpx;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
box-shadow: 4rpx 8rpx 12rpx 0 rgba(135, 135, 135, 0.17);
}
.network-location:active {
filter: brightness(0.86);
}
.network-type {
position: fixed;
bottom: 730rpx;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 20;
.type-item {
width: 160rpx;
height: 48rpx;
background: #ffffff;
border-radius: 16rpx;
text-align: center;
line-height: 48rpx;
font-size: 24rpx;
font-weight: 400;
color: #ff5b2d;
box-shadow: 4rpx 8rpx 12rpx 0 rgba(135, 135, 135, 0.17);
}
.item-active {
background: #ff5b2d;
color: #ffffff;
}
.type-item:active {
filter: brightness(0.86);
}
}
.network-none {
font-size: 22rpx;
font-weight: 400;
color: #28292b;
opacity: 0.68;
text-align: center;
margin: 150rpx auto;
}
}
::v-deep {
//高德地图-logo隐藏
.amap-logo {
display: none;
opacity: 0 !important;
}
//高德地图-版权隐藏
.amap-copyright {
opacity: 0;
}
.map-open-info {
width: 60vw;
position: relative;
.park-name {
font-size: 30rpx;
font-weight: bold;
}
.content,
.position,
.person,
.phone {
font-size: 28rpx;
line-height: 44rpx;
}
.button {
font-size: 26rpx;
font-weight: 500;
color: #1980ff;
padding: 15rpx 15rpx;
background: #f3faff;
border-radius: 8rpx;
position: absolute;
right: -15rpx;
bottom: 0rpx;
cursor: pointer;
}
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论