From 7b2f20f1299306f087d89aa202b52708df7ec4e6 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期三, 07 四月 2021 09:14:44 +0800
Subject: [PATCH] 统一样式修改部分完成。

---
 src/components/LayerController/LayerController.vue |  232 +++++++++++++++++++++++++++------------------------------
 1 files changed, 109 insertions(+), 123 deletions(-)

diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index b011d48..c826ec3 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -1,39 +1,28 @@
 <template>
-  <div class="floatPanel">
-    <!-- <i class="horn horn-tl"></i> -->
-    <!-- <i class="horn horn-tr"></i> -->
-    <i class="horn horn-br"></i>
-    <i class="horn horn-bl"></i>
-
-    <div class="head titleBorder">
-      <div class="titleTextBorder">
-        <div class="titleIcon"></div>
-        <div class="titleText">涓氬姟鐪嬫澘</div>
-        <div class="titleButton" :class="{switchHeadUp:true, switchHeadDown: !panelSwitch.main}" @click="switchPanel">
-          <!-- <i class="el-icon-arrow-down"></i> -->
-        </div>
-      </div>
+  <div :class='["float-panel",layerControllerVisible ? "active" : ""]' >
+    <div @click="showPanel" class="iconBtn transition" :class='layerControllerVisible ? "active-button" : ""' v-show="!layerControllerVisible" style="position: absolute;top:0;left: 0">
+      <img src="@assets/images/map-pages/icon/layer.png" alt="" class="icon">
+      <span class="icon-name">鍥惧眰</span>
     </div>
-    <div class="bodyBox" id="panelContent">
-      <div id="panelInnerContent" style="height: auto; overflow: hidden;">
-        <slot>鍥惧眰鏁版嵁鏆傛湭鍔犺浇......</slot>
+    <transition name="fade">
+      <div :class="'legend-content map-background'" v-show="layerControllerVisible" style=" transform-origin: top left;">
+        <lc-service-layer></lc-service-layer>
+        <buttom  @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></buttom>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
 <script>
-import api from './LayerControllerAPI'
-import { mapState, mapMutations } from 'vuex'
 import '@assets/css/map/magic.min.css'
 import presets from './layerControllerPresets'
-import $ from 'jquery'
 
 import iconSetting from '@/assets/images/map-pages/icon/setting.png'
+import LcServiceLayer from './modules/LcServiceLayer'
 
 export default {
   name: 'LayerController',
-  components: { },
+  components: { LcServiceLayer },
   props: {
     preset: {
       type: String,
@@ -41,74 +30,84 @@
     }
   },
   computed: {
-    ...mapState({
-      map: state => state.map,
-      L: state => state.L,
-      layerHelper: state => state.layerHelper,
-      layerControllerVisible: state => state.layerControllerVisible
-    })
+    map () {
+      return this.$store.state.map.map
+    },
+    L () {
+      return this.$store.state.map.L
+    },
+    layerHelper () {
+      return this.$store.state.map.layerHelper
+    }
   },
-  data() {
+  data () {
     return {
-      icons:{
-        setting:iconSetting
+      width: '250px',
+      isShow: true,
+      icons: {
+        setting: iconSetting
       },
+      layerControllerVisible: false,
       panelSwitch: {
         main: true // 涓荤獥鍙�
       }
     }
   },
-  mounted() {
-     this.$nextTick(function() {
-        this.init()
-        console.log(api)
-     })
+  mounted () {
+    this.$nextTick(function () {
+      this.init()
+    })
   },
   methods: {
-    ...mapMutations(['updateLayerControllerVisible']),
-    async init() {
+    showPanel () {
+      this.layerControllerVisible = !this.layerControllerVisible
+    },
+    init () {
       this.initPreset()
     },
-    initPreset() {
+    initPreset () {
       if (this.preset !== 'default') {
-        let prmPreset = presets[this.preset]
+        const prmPreset = presets[this.preset]
         Object.assign(this.layerControllerVisible, prmPreset) // 闃叉棰勮鍙傛暟涓庨粯璁ゅ弬鏁颁笉涓�鑷村鑷存姤閿欙紝濡傛灉娌℃湁鎸夌収鎮ㄧ殑閰嶇疆鍙戠敓鏀瑰彉锛岃妫�鏌ユ嫾鍐欐槸鍚︽纭�
         if (prmPreset === 'undefined') {
           console.log('璇ュ浘灞傛帶鍒堕潰鏉跨殑棰勮娌℃湁鎵惧埌锛岃妫�鏌ラ璁惧悕绉版槸鍚︽纭紒')
         } else {
-          this.updateLayerControllerVisible(this.layerControllerVisible)
+          this.$store.commit('updateLayerControllerVisible', this.layerControllerVisible)
         }
       }
     },
-    switchPanel() {
+    switchPanel () {
       this.panelSwitch.main = !this.panelSwitch.main
       if (this.panelSwitch.main) {
-        $('#panelInnerContent').animate({ height: '500px' }, 'fast', 'swing', () => {
-          $('#panelInnerContent').css('height', 'auto')
-          $('#panelContent').css('height', 'auto')
-        })
+        this.width = '250px'
+        this.isShow = true
       } else {
-        $('#panelInnerContent').animate({ height: '0px' }, 'fast', 'swing')
+        this.width = '0px'
+        this.isShow = false
       }
-    },
+    }
   }
 }
 </script>
 
 <style lang="less">
-
-.floatPanel{
+.float-panel {
   position: absolute;
-  left: 10px;
-  bottom: 10px;
-  width: 230px;
+  left: 0.14583rem;
+  top: 0.8rem;
   height: auto;
   font-size: 11px;
   z-index: 1000;
-  div{
-    color:#90c8e0;
+  display: flex;
+
+  div {
+    color: #00fff6;
   }
-  .titleBorder{
+
+  .iconBtn.active{
+    display: none;
+  }
+  .title-border {
     width: 100%;
     height: 28px;
     background: #10488c;
@@ -116,7 +115,8 @@
     clip-path: polygon(0px 0px, 0px 28px, 230px 28px, 230px 9px, 95px 9px, 86px 0px);
     position: relative;
   }
-  .titleBorder:before {
+
+  .title-border:before {
     content: "";
     display: block;
     position: absolute;
@@ -126,7 +126,8 @@
     left: 0;
     background-color: #38c8ef;
   }
-  .titleBorder:after {
+
+  .title-border:after {
     content: "";
     display: block;
     position: absolute;
@@ -138,34 +139,37 @@
     -webkit-clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
     clip-path: polygon(0px 0px, 0px 1px, 5px 1px, 5px 6px, 6px 6px, 6px 0px);
   }
-  .titleTextBorder {
-    width: 100%;
-    height: 28px;
+
+  .title-text-border {
+    width: 30px;
+    height: 120px;
+    float: left;
     background: #091331;
-    -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
-    clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
+    // -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
+    // clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
   }
-  .titleIcon{
+
+  .title-icon {
     float: left;
     width: 22px;
     height: 22px;
     margin-top: 4px;
     margin-left: 2px;
-    background-image: url(/assets/images/map-pages/icon/setting.png);
+    background-image: url(../../assets/images/map-pages/icon/setting.png);
   }
-  .titleText{
-    float: left;
-    width: 150px;
+
+  .title-text {
+    width: 25px;
     color: #00d0f9;
-    margin-left: 4px;
-    line-height: 20px;
     font-weight: bold;
     margin-top: 6px;
-    text-align: left;
+    text-align: center;
+    font-size: 14px;
     filter: brightness(100%);
     text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
   }
-  .titleline{
+
+  .title-line {
     display: inline-block;
     width: 120px;
     height: 1px;
@@ -175,7 +179,8 @@
     line-height: 5px;
     vertical-align: middle;
   }
-  .titlepoint{
+
+  .title-point {
     display: inline-block;
     width: 5px;
     height: 5px;
@@ -184,42 +189,32 @@
     line-height: 5px;
     vertical-align: middle;
   }
-  .titleButton{
+
+  .title-button {
     float: right;
     width: 28px;
     height: 28px;
     cursor: pointer;
-    :hover{
+
+    :hover {
       font-weight: bold;
       color: white;
     }
   }
 
-  .bodyBox{
-    background-color: rgba(0x04, 0x52, 0x7f, 0.6);
+  .body-box {
+    background-color: rgba(44, 62, 80, 0.6);
     border: 1px solid #10488c;
     margin-top: -1px;
+    margin-left: 30px;
     height: auto;
   }
-
-  .switchHeadUp{
-    width: 22px;
-    height: 16px;
-    float: right;
-    margin-top: 10px;
-    margin-right: 10px;
-    cursor: pointer;
-    background-image: url(/assets/images/map-pages/icon/xljt1.png);
-    transform: rotateX(0deg);
-    transform-origin: 50% 50%;
-    transition: transform 0.5s linear 0s;
-  }
-  .switchHeadDown{
+  .switch-head-down {
     transform: rotateX(180deg);
     transform-origin: 50% 50%;
-    transition: transform 0.5s linear 0s;
+    transition: transform 2s linear 0s;
   }
-  select{
+  select {
     background: transparent;
     margin: 6px;
     border: .5px solid #569EB7;
@@ -227,48 +222,39 @@
     color: #569EB7;
     padding: 0 16px;
   }
-  .horn{
-    width: 6px;
-    height: 6px;
-    float: left;
-    position: absolute;
-  }
-  .horn-tl{
-    background-image: url(/assets/images/map-pages/cosmetics/horn_tl.png) center center no-repeat;
-    left: -1px;
-    top: -1px;
-  }
-  .horn-tr{
-    background-image: url(/assets/images/map-pages/cosmetics/horn_tr.png) center center no-repeat;
-    right: -1px;
-    top: -1px;
-  }
-  .horn-bl{
-    background-image: url(/assets/images/map-pages/cosmetics/horn_bl.png) center center no-repeat;
-    left: -1px;
-    bottom: -1px;
-  }
-  .horn-br{
-    background-image: url(/assets/images/map-pages/cosmetics/horn_br.png) center center no-repeat;
-    right: -1px;
-    bottom: -1px;
-  }
-  ::-webkit-scrollbar{
+  ::-webkit-scrollbar {
     width: 7px;
     height: 5px !important;
   }
+
   ::-webkit-scrollbar-thumb {
     /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/
     border-radius: 10px;
-    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background   : #0661AE;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #0661AE;
     border: 1px solid transparent;
   }
+
   ::-webkit-scrollbar-track {
     /*婊氬姩鏉¢噷闈㈣建閬�*/
     // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
     border-radius: 0px;
-    background   : #0E3565;
+    background: #0E3565;
+  }
+  .el-button--default{
+   margin-left: 10px;
+    padding: 15px 3px;
+    background:@background-color;
+    color:@color-tool;
+    position: absolute;
+    top:0;
+    right: -26px;
+  }
+  .el-button--default:hover{
+    background:@background-color;
+  }
+  .legend-content{
+    width:  1.79167rem;
   }
 }
 

--
Gitblit v1.8.0