From 2d398b4fa805ba43a89311d955fbb6e47c540e6c Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期五, 12 三月 2021 20:57:16 +0800
Subject: [PATCH] 修改了界面自适应
---
src/components/panel/RightSearchPanel.vue | 58 +++++++--
src/assets/css/map/_map-variable.less | 2
public/index.html | 14 ++
src/assets/css/map/map-popup.less | 13 +-
src/views/MapTemplate.vue | 6
src/components/panel/LegendPanel.vue | 223 ++++++++++++++++--------------------
src/App.vue | 6
7 files changed, 173 insertions(+), 149 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6c18cb7..396d79c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,5 +15,19 @@
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
+ <script type="text/javascript">
+ /* 杩欓噷鎴戜滑鍒╃敤浜嗕竴涓嚜鎵ц鍑芥暟 */
+ (function(){
+ change();
+ function change(){
+ console.log( document.documentElement.clientWidth*12/640 +'px')
+ //html鐨� font-size 鐨勫ぇ灏忓昂瀵�
+ //杩欓噷鐨刪tml瀛椾綋澶у皬鍒╃敤浜嗕竴涓畝鍗曠殑鏁板鍏紡锛屽綋鎴戜滑榛樿璁剧疆浠ュ睆骞�320px浣嶅熀鍑嗘鏃剁殑瀛椾綋澶у皬涓�20px(320 20px),閭ｄ箞娴忚鍣ㄧ獥鍙ｅぇ灏忔敼鍙樼殑鏃跺�欐柊鐨刪tml鐨刦ontSize锛坈lientWidth 鏂扮殑鍊硷級灏辨槸clientWidth*20/320
+ document.documentElement.style.fontSize = document.documentElement.clientWidth/12 +'px';
+ }
+ /* 鐩戝惉绐楀彛澶у皬鍙戠敓鏀瑰彉鏃�*/
+ window.addEventListener('resize',change,false);
+ })();
+ </script>
</body>
</html>
diff --git a/src/App.vue b/src/App.vue
index 6cd8911..24ecc4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,9 +13,10 @@
}
</script>
-<style>
+<style lang="less">
+@import '@assets/css/map/_map-variable';
html, body, #app{
- color: #2c3e50;
+ color: @color;
height: 100vh;
width: 100vw;
margin: 0;
@@ -27,6 +28,7 @@
}
body{
-ms-overflow-style: none;
+ font-size: 12px;
}
</style>
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
index aad5b7b..cc114db 100644
--- a/src/assets/css/map/_map-variable.less
+++ b/src/assets/css/map/_map-variable.less
@@ -1,4 +1,6 @@
@color:#00fff6;
@color-highlight:#fff700;
+@color-title:white;
@background-color:rgba(0,16,30,.8);
@background-color-light:rgba(40,50,100,.4);
+@background-color-split:rgba(0,255,246,.14);
diff --git a/src/assets/css/map/map-popup.less b/src/assets/css/map/map-popup.less
index 9384d92..d451294 100644
--- a/src/assets/css/map/map-popup.less
+++ b/src/assets/css/map/map-popup.less
@@ -6,12 +6,13 @@
background-color: @background-color;
/*background-color: transparent;*/
border: .00521rem solid @color;
- padding: .10417rem;
+ padding: .05rem;
//-webkit-box-shadow: 0 0 0.03125rem 0 @color;
//box-shadow: 0 0 0.03125rem 0 @color;
-webkit-box-shadow: 0 0 10px 0 @color;
- box-shadow: 0 0 10px @color;
- border-radius: 1rem;
+ box-shadow: 0 0 .03rem @color;
+ //border-radius: .03rem;
+ border-radius: 10px;
}
.leaflet-popup-tip-container {
@@ -22,15 +23,15 @@
content: "";
position: absolute;
left: 50%;
- bottom: -.3rem;
+ bottom: -.03rem;
-webkit-transform: translateX(-50%) rotate(
45deg
);
transform: translateX(-50%) rotate(
45deg
);
- width: .6rem;
- height: .6rem;
+ width: .06rem;
+ height: .06rem;
background-color: @background-color;
border-right: .00521rem solid @color;
border-bottom: .00521rem solid @color;
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index a70ef75..ed870b4 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -1,25 +1,28 @@
<template>
<div class="legend-panel">
+
+ <transition name="fade">
+ <div class="legend-content" v-show="legendControl">
+ <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
+ <p><span>{{ item.title }}</span></p>
+ <div :class="index === 5 ? '':'under-line'"></div>
+ <ul >
+ <!-- <div >-->
+ <li v-for="(ite,inde) in item.items" :key="inde">
+ <img :src='ite.legendImage' alt=''>
+ <span>{{ ite.legendContent }}</span>
+ </li>
+
+ <!-- </div>-->
+ </ul>
+
+ </div>
+ </div>
+ </transition>
<div class="legend-icon unactive" @click="legendChange()">
<i class="el-icon-more-outline"></i>
<span>鍥句緥</span>
</div>
- <transition name="fade">
- <div class="legend-content" v-show="legendControl">
- <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
- <p>{{ item.title }}</p>
- <ul>
- <div v-for="(ite,inde) in item.items" :key="inde">
- <li>
- <img :src='ite.legendImage' alt=''>
- <span>{{ ite.legendContent }}</span>
- </li>
- </div>
- </ul>
- <div :class="index === 5 ? '':'under-line'"></div>
- </div>
- </div>
- </transition>
</div>
</template>
@@ -32,75 +35,6 @@
legendControl: false,
// 鍥鹃噷瀛樺偍鏁版嵁
legendContents: [
- {
- title: '棰勮',
- items: [
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦姗欒壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦榛勮壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮洦钃濊壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- },
- {
- legendImage: '../.././assets/images/map-pages/setting.png',
- legendContent: '鏆撮绾㈣壊棰勮'
- }
- ]
- },
{
title: '浼佷笟',
items: [
@@ -215,6 +149,7 @@
</script>
<style lang="less" scoped>
+@import '@assets/css/map/_map-variable';
.legend-panel {
position: absolute;
z-index: 502;
@@ -225,14 +160,34 @@
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
- align-items: flex-end;
-
+ //align-items: flex-end;
+ transition: all .5s;
.legend-icon {
- width: 3.4rem;
- height: 1.6rem;
- border-radius: 0.3rem;
- background: white;
+ width: .29167rem;
+ height: .31771rem;
+ //font-size: .08333rem;
+ border: .00521rem solid rgba(0,255,246,.15);
+ border-radius: .03125rem;
text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ background: @background-color;
+ margin-top: .04167rem;
+ cursor: pointer;
+ color: @color;
+ margin-left: auto;
+ font-size: 0.08333rem;
}
@keyframes bounce-in {
@@ -248,69 +203,93 @@
.fade-enter-active {
transform-origin: right bottom;
- animation: bounce-in .5s;
+ animation: bounce-in .2s;
}
.fade-leave-active {
transform-origin: right bottom;
- animation: bounce-in .5s reverse;
+ animation: bounce-in .2s reverse;
}
.legend-content {
- position: absolute;
- right: 0.3rem;
- bottom: 3rem;
- width: 30rem;
- border-radius: 1rem;
- background: #3c7699;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+ background: rgba(0,16,30,.9);
+ border-radius: .05208rem;
+ width: -webkit-max-content;
+ width: -moz-max-content;
+ width: max-content;
+ border: .00521rem solid @color;
+ box-shadow: 0 0 .03rem @color;
+ overflow: hidden;
+ min-height: 1.28646rem;
.legend-content-box {
+ font-size: 0.07292rem;
+ padding: .10417rem;
+ border-left: .00521rem solid @background-color-split;
p {
text-align: center;
- color: #ffffff;
- font-size: 14px;
+ margin: 0 !important;
+ //padding: 0;
+ //color: @color-title;
+ -webkit-margin-before: 0.3rem;
margin-block-start: 0.3rem;
+ -webkit-margin-after: 0.2rem;
margin-block-end: 0.2rem;
+ margin-bottom: 0.05208rem !important;
+ span {
+ color: @color-title;
+ font-size: .08333rem;
+ font-weight: 600;
+ }
}
ul {
list-style: none;
- display: flex;
+ //display: flex;
flex-wrap: wrap;
- padding: 0;
+ margin: 0 !important;
+ padding: 0 !important;;
padding-inline: 0;
-
- div {
- width: 25%;
- display: flex;
- justify-content: center;
- margin: 0.1rem 0;
+ //color: #00fff6;
+ //font-size: .07292rem;
+ font-size: .08333rem;
li {
- width: 100%;
+ //width: 100%;
+ //display: flex;
+ //justify-content: space-around;
+ //margin-left: 15px;
+ //margin-right: 15px;
+ list-style: none;
display: flex;
- justify-content: space-around;
- margin-left: 15px;
- margin-right: 15px;
-
+ -webkit-box-align: center;
+ align-items: center;
+ margin: 0.05208rem 0;
img {
- height: 18px;
- width: 18px;
+ width: .08333rem;
+ height: .08333rem;
+ margin-right: .01042rem;
}
span {
- width: 80px;
- font-size: 12px;
- color: white;
+ //width: 80px;
+ //font-size: 12px;
+ color: @color;
}
}
- }
}
}
.under-line {
- height: 2px;
- background: #7bc5ef;
+ height: 1px;
+ background: @background-color-split;
margin-block-start: 0;
margin-block-end: 0;
}
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 650c599..13b6e48 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,10 +1,19 @@
<template>
- <div id="right-panel">
+ <div class="panel-right">
<div class="panel-tab">
- <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
+ <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"
+ :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
<img :src="item.icon" style="width: 24px;height: 24px;"></div>
-<!-- <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
-<!-- <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
+ <div class="container">
+ <ul class="module-wrap"
+ style="padding-top: 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
+ <li class="active module-wrap__box">
+ <div class="module-wrap__box-item">
+ <!----><img src="../../assets/images/map-pages/icon/dd.png" class="icon">
+ </div><!---->
+ </li>
+ </ul><!----><!---->
+ </div>
</div>
<!-- <div class="panel-fold-btn" >-->
<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
@@ -90,8 +99,8 @@
// const el = document.getElementsByClassName('.btn-stretch')
// const el2 = document.getElementsByClassName('.panel-fold-btn')
// let = 'btn-stretch-active'
- // var rightControl = $('#right-panel')
- // var rightControl = document.getElementById('#right-panel')
+ // var rightControl = $('#panel-right')
+ // var rightControl = document.getElementById('#panel-right')
// const right = rightControl.css('right')
// const rightit = rightControl.ownerDocument.defaultView
// const right = rightit.getComputedStyle(rightit, null).right
@@ -131,13 +140,23 @@
<style lang="less">
@import '@assets/css/map/_map-variable';
-#right-panel {
+.panel-right {
width: 322px;
- //height: 573px;
- height: 100%;
+ //height: 100%;
+ //position: absolute;
+ //right: 10px;
+ //top: 10px;
+ height: 0;
position: absolute;
- right: 10px;
- top: 10px;
+ top: .60417rem;
+ right: .15625rem;
+ z-index: 501;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
.el-card__body {
padding: 7px;
@@ -302,6 +321,13 @@
width: 32px;
z-index: 500;
background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
+ .container{
+ max-height: 3.125rem;
+ overflow: hidden;
+ position: relative;
+ position: relative;
+ }
+
}
.right-control {
@@ -309,11 +335,11 @@
//height: 573px;
height: 100%;
position: relative;
- top: 0;
- right: 0;
- z-index: 999;
- background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
- background-size: 100% 98%;
+ //top: 0;
+ //right: 0;
+ z-index: 500;
+ //background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
+ //background-size: 100% 98%;
}
.a{
transform: translateX(328px);
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 36d66bf..363515c 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -11,7 +11,7 @@
<monitor-panel></monitor-panel>
<!-- <top-enterprise-panel></top-enterprise-panel>-->
<tool-box-panel ref="toolBox"></tool-box-panel>
- <menu-special></menu-special>
+<!-- <menu-special></menu-special>-->
<legend-panel></legend-panel>
</div>
</template>
@@ -27,14 +27,14 @@
// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
-import MenuSpecial from '@components/panel/MenuTopic'
+// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
export default {
name: 'MapTemplate',
components: {
LegendPanel,
- MenuSpecial,
+ // MenuSpecial,
ToolBoxPanel,
// TopEnterprisePanel,
SgisLayerController,
--
Gitblit v1.8.0