From d836f9914d8d838c5991157006682c3e39d22716 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期三, 22 五月 2024 10:20:04 +0800
Subject: [PATCH] css

---
 admin/src/assets/style/variables.scss        |   12 +
 admin/src/views/platform/index.vue           |  345 ++++++++++++++++++++++++++------------
 admin/src/components/common/CommonHeader.vue |    2 
 admin/src/assets/style/style.scss            |    4 
 admin/src/components/common/tagsview.vue     |  148 ++++++++-------
 5 files changed, 328 insertions(+), 183 deletions(-)

diff --git a/admin/src/assets/style/style.scss b/admin/src/assets/style/style.scss
index a442fd9..6d27706 100644
--- a/admin/src/assets/style/style.scss
+++ b/admin/src/assets/style/style.scss
@@ -214,10 +214,10 @@
   color: red !important;
 }
 .green{
-  color: #83cbb2;
+  color: #00BA67;
 }
 .primaryColor{
-  color: $primary-color;
+  color: $primary-color !important;
 }
 .placeholder9{
   color: #999999;
diff --git a/admin/src/assets/style/variables.scss b/admin/src/assets/style/variables.scss
index b7a84b0..441118e 100644
--- a/admin/src/assets/style/variables.scss
+++ b/admin/src/assets/style/variables.scss
@@ -1,10 +1,16 @@
 // 涓昏壊璋�
-$primary-color: #216EEE;
+$primary-color:  #279BAA;
 $primary-title-start-color: #3582ff;
 $primary-title-color: #216EcE;
-$primary-color-sel: #0046c6;
+$primary-color-sel: #2cbbd1;
 $primary-color-hover: #1562e2;
-$icon-background-color: #0d5ada;
+$icon-background-color: #1e7985;
+// $primary-color: #216EEE;
+// $primary-title-start-color: #3582ff;
+// $primary-title-color: #216EcE;
+// $primary-color-sel: #0046c6;
+// $primary-color-hover: #1562e2;
+// $icon-background-color: #0d5ada;
 //鑿滃崟鎮诞鑹诧細
 $menu-hover-color: rgba(33, 110, 238, 0.10);
 // 澶撮儴楂樺害
diff --git a/admin/src/components/common/CommonHeader.vue b/admin/src/components/common/CommonHeader.vue
index 10523a8..e3389e2 100644
--- a/admin/src/components/common/CommonHeader.vue
+++ b/admin/src/components/common/CommonHeader.vue
@@ -165,7 +165,7 @@
 <style scoped lang="scss">
 @import "@/assets/style/variables.scss";
 .common-header {
-  background-color: #1457C7;
+  background-color: #4d99a8;
 }
 .header {
   overflow: hidden;
diff --git a/admin/src/components/common/tagsview.vue b/admin/src/components/common/tagsview.vue
index c5afffa..67df70f 100644
--- a/admin/src/components/common/tagsview.vue
+++ b/admin/src/components/common/tagsview.vue
@@ -1,50 +1,64 @@
 <template>
-  <div class="tags-view-style" style="display:flex; overflow-x: scroll;">
-    <i class="el-icon-arrow-left btn" v-if="leftStatus" :class="leftStatus?'nor-btn':'ban-btn'" @click="scrollToStart()"></i>
+  <div class="tags-view-style" style="display: flex; overflow-x: scroll">
+    <i
+      class="el-icon-arrow-left btn"
+      v-if="leftStatus"
+      :class="leftStatus ? 'nor-btn' : 'ban-btn'"
+      @click="scrollToStart()"
+    ></i>
     <div id="tags-box" ref="tags">
       <div
         v-for="(item, index) in tags"
         :key="index"
         :id="'tags-box-' + index"
-        @contextmenu.prevent="openMenu(item,$event)"
-        :class="isActive(item.url,index)?'active':''"
+        @contextmenu.prevent="openMenu(item, $event)"
+        :class="isActive(item.url, index) ? 'active' : ''"
         class="tagsview"
         @click="tagsmenu(item, index)"
       >
         {{ item.label }}
         <!-- 杩欎釜鍦版柟涓�瀹氳click鍔犱釜stop闃绘锛屼笉鐒朵細鍥犱负浜嬩欢鍐掓场涓�鐩磋Е鍙戠埗鍏冪礌鐨勭偣鍑讳簨浠讹紝鏃犳硶璺宠浆鍙︿竴涓矾鐢� -->
-        <span v-if="tags.length > 1" class="el-icon-close tagsicon" @click.stop="handleClose(item,index)"></span>
+        <span
+          v-if="tags.length > 1"
+          class="el-icon-close tagsicon"
+          @click.stop="handleClose(item, index)"
+        ></span>
         <!-- <ul v-show="visible" class="contextmenu" :style="{left:left+'px',top:top+'px'}">
           <li @click.stop="rightClose()">鍏抽棴</li>
           <li @click.stop="cleartags($route.path)">鍏抽棴鍏朵粬</li>
         </ul> -->
       </div>
     </div>
-    <i class="el-icon-arrow-right btn" v-if="rightStatus"  :class="rightStatus?'nor-btn':'ban-btn'" @click="scrollToEnd()"></i>
+    <i
+      class="el-icon-arrow-right btn"
+      v-if="rightStatus"
+      :class="rightStatus ? 'nor-btn' : 'ban-btn'"
+      @click="scrollToEnd()"
+    ></i>
   </div>
 </template>
 
 <script>
-//杩欎釜灏辨槸瀵煎叆vuex鐨勬暟鎹紝閰嶅悎涓嬮潰...map鐢�
-import { mapState, mapMutations } from "vuex";
+// 杩欎釜灏辨槸瀵煎叆vuex鐨勬暟鎹紝閰嶅悎涓嬮潰...map鐢�
+import { mapState, mapMutations } from 'vuex'
 export default {
   data() {
     return {
-      //鍙抽敭鑿滃崟闅愯棌瀵瑰簲甯冨皵鍊�
+      // 鍙抽敭鑿滃崟闅愯棌瀵瑰簲甯冨皵鍊�
       visible: false,
-      //鍙抽敭鑿滃崟瀵瑰簲浣嶇疆
+      // 鍙抽敭鑿滃崟瀵瑰簲浣嶇疆
       top: 0,
       left: 0,
       leftStatus: false,
-      rightStatus: false,
+      rightStatus: false
     }
   },
   computed: {
-    //寮曞叆vuex涓璼tate涓殑tags鏁版嵁锛屼竴鏍穞his璋冪敤灏辫
-    ...mapState(["tags"]),
+    // 寮曞叆vuex涓璼tate涓殑tags鏁版嵁锛屼竴鏍穞his璋冪敤灏辫
+    ...mapState(['tags'])
   },
-  watch:{
-    //鐩戝惉鍙抽敭鑿滃崟鐨勫�兼槸鍚︿负true锛屽鏋滄槸灏卞垱寤哄叏灞�鐩戝惉鐐瑰嚮浜嬩欢锛岃Е鍙慶loseMenu浜嬩欢闅愯棌鑿滃崟锛屽鏋滄槸false灏卞垹闄ょ洃鍚�
+  watch: {
+    // 鐩戝惉鍙抽敭鑿滃崟鐨勫�兼槸鍚︿负true锛屽鏋滄槸灏卞垱寤哄叏灞�鐩戝惉鐐瑰嚮浜嬩欢锛岃Е鍙慶loseMenu浜嬩欢闅愯棌鑿滃崟锛屽鏋滄槸false灏卞垹闄ょ洃鍚�
     visible(value) {
       if (value) {
         document.body.addEventListener('click', this.closeMenu)
@@ -52,10 +66,10 @@
         document.body.removeEventListener('click', this.closeMenu)
       }
     },
-    $route(to,from){
+    $route(to, from) {
       this.tags.forEach((item, index) => {
         if (item.url === to.path) {
-          let tagsDiv = document.getElementById('tags-box')
+          const tagsDiv = document.getElementById('tags-box')
           if (index) {
             tagsDiv.scrollTo(index * 110, 0)
           } else {
@@ -68,109 +82,106 @@
   },
   mounted() {
     this.$refs.tags.addEventListener('scroll', e => {
-      
       if (this.$refs.tags.scrollLeft > 0) {
         this.leftStatus = true
       } else {
         this.leftStatus = false
       }
       if (this.$refs.tags.scrollLeft + this.$refs.tags.clientWidth < this.$refs.tags.scrollWidth) {
-       this.rightStatus = true
+        this.rightStatus = true
       } else {
         this.rightStatus = false
       }
-
     }, false)
   },
   methods: {
-    //寮曞叆vuex涓璵utation鏂规硶锛屽彲浠ョ洿鎺his.xxx璋冪敤浠�
-    ...mapMutations(["closeTab", "cleartagsview"]),
-    //鐐瑰嚮鍙夊弶鍒犻櫎鐨勪簨浠�
+    // 寮曞叆vuex涓璵utation鏂规硶锛屽彲浠ョ洿鎺his.xxx璋冪敤浠�
+    ...mapMutations(['closeTab', 'cleartagsview']),
+    // 鐐瑰嚮鍙夊弶鍒犻櫎鐨勪簨浠�
     rightClose() {
       this.visible = false
       if (this.tags.length == 1) {
         return
       }
-      let index = this.tags.indexOf(this.selectedTag)
+      const index = this.tags.indexOf(this.selectedTag)
       this.handleClose(this.selectedTag, index)
     },
     handleClose(item, index) {
       if (this.tags.length == 1) {
         return
       }
-      //鍏堟妸闀垮害淇濆瓨涓嬫潵鍚庨潰鐢ㄦ潵姣旇緝鍋氬垽鏂潯浠�
-      let length = this.tags.length - 1;
-      //vuex璋冩柟娉�,涓婇潰...map寮曞叆鐨剉uex鏂规硶锛屼笉浼氳繖绉嶆柟娉曠殑鐪媣ue瀹樼綉鏂囨。
-      this.closeTab(item);
+      // 鍏堟妸闀垮害淇濆瓨涓嬫潵鍚庨潰鐢ㄦ潵姣旇緝鍋氬垽鏂潯浠�
+      const length = this.tags.length - 1
+      // vuex璋冩柟娉�,涓婇潰...map寮曞叆鐨剉uex鏂规硶锛屼笉浼氳繖绉嶆柟娉曠殑鐪媣ue瀹樼綉鏂囨。
+      this.closeTab(item)
       // 濡傛灉鍏抽棴鐨勬爣绛句笉鏄綋鍓嶈矾鐢辩殑璇濓紝灏变笉璺宠浆
       if (item.url !== this.$route.path) {
-        return;
+        return
       }
       // 鍒ゆ柇锛氬鏋渋ndex鍜宭ength鏄竴鏍风殑锛岄偅灏变唬琛ㄩ兘鏄竴鏍风殑闀垮害锛屽氨鏄渶鍚庝竴浣嶏紝閭ｅ氨寰�宸﹁烦杞竴涓�
       if (index === length) {
-        //鍐嶅垽鏂細濡傛灉length=0锛屼篃灏辨槸璇翠綘鍒犲畬浜嗘墍鏈夋爣绛�
+        // 鍐嶅垽鏂細濡傛灉length=0锛屼篃灏辨槸璇翠綘鍒犲畬浜嗘墍鏈夋爣绛�
         if (length === 0) {
-          //閭ｄ箞鍐嶅垽鏂細濡傛灉褰撳墠璺敱涓嶇瓑浜巌ndex锛屼篃灏辨槸鎴戦椤电殑璺敱
-          if (this.$route.path !== "/index") {
-            //閭ｄ箞灏辫烦杞椤点�傝繖涓�姝ョ殑鎰忔�濇槸锛氬鏋滃垹闄ょ殑鏈�鍚庝竴涓爣绛句笉鏄椤靛氨缁熶竴璺宠浆棣栭〉锛屽鏋滀綘鍒犻櫎鐨勬渶鍚庝竴涓爣绛炬槸棣栭〉鏍囩锛屽凡缁忓湪杩欎釜棣栭〉璺敱涓婁簡锛屼綘杩樿烦涓粈涔堝憿銆傝繖涓嶉噸澶嶆搷浣滀簡鍚椼��
-            this.$router.push({ path: "/index" });
+          // 閭ｄ箞鍐嶅垽鏂細濡傛灉褰撳墠璺敱涓嶇瓑浜巌ndex锛屼篃灏辨槸鎴戦椤电殑璺敱
+          if (this.$route.path !== '/index') {
+            // 閭ｄ箞灏辫烦杞椤点�傝繖涓�姝ョ殑鎰忔�濇槸锛氬鏋滃垹闄ょ殑鏈�鍚庝竴涓爣绛句笉鏄椤靛氨缁熶竴璺宠浆棣栭〉锛屽鏋滀綘鍒犻櫎鐨勬渶鍚庝竴涓爣绛炬槸棣栭〉鏍囩锛屽凡缁忓湪杩欎釜棣栭〉璺敱涓婁簡锛屼綘杩樿烦涓粈涔堝憿銆傝繖涓嶉噸澶嶆搷浣滀簡鍚椼��
+            this.$router.push({ path: '/index' })
           }
         } else {
-          //閭ｄ箞锛屽鏋滀笂闈㈢殑鏉′欢閮戒笉鎴愮珛锛屾病鏈塴ength=0.涔熷氨鏄浣犺繕鏈夊ソ鍑犱釜鏍囩锛屽苟涓斾綘鍒犻櫎鐨勬槸鏈�鍚庝竴浣嶆爣绛撅紝閭ｄ箞灏卞線宸﹁竟鎸竴浣嶈烦杞矾鐢�
-          this.$router.push({ path: this.tags[index - 1].url });
+          // 閭ｄ箞锛屽鏋滀笂闈㈢殑鏉′欢閮戒笉鎴愮珛锛屾病鏈塴ength=0.涔熷氨鏄浣犺繕鏈夊ソ鍑犱釜鏍囩锛屽苟涓斾綘鍒犻櫎鐨勬槸鏈�鍚庝竴浣嶆爣绛撅紝閭ｄ箞灏卞線宸﹁竟鎸竴浣嶈烦杞矾鐢�
+          this.$router.push({ path: this.tags[index - 1].url })
         }
       } else {
         // 濡傛灉浣犵偣鍑讳笉鏄渶鍚庝竴浣嶆爣绛撅紝鐐圭殑鍓嶉潰鐨勶紝閭ｅ氨寰�鍙宠竟璺宠浆
-        this.$router.push({ path: this.tags[index].url });
+        this.$router.push({ path: this.tags[index].url })
       }
     },
-    //鐐瑰嚮璺宠浆璺敱
+    // 鐐瑰嚮璺宠浆璺敱
     tagsmenu(item, index) {
-      console.log('tagsmenu');
-      //鍒ゆ柇锛氬綋鍓嶈矾鐢变笉绛変簬褰撳墠閫変腑椤圭殑url锛屼篃灏变唬琛ㄤ綘鐐瑰嚮鐨勪笉鏄幇鍦ㄩ�変腑鐨勬爣绛撅紝鏄彟涓�涓爣绛惧氨璺宠浆杩囧幓锛屽鏋滀綘鐐瑰嚮鐨勬槸鐜板湪宸茬粡閫変腑鐨勬爣绛惧氨涓嶇敤璺宠浆浜嗭紝鍥犱负浣犲凡缁忓湪杩欎釜璺敱浜嗚繕璺充粈涔堝憿銆�
+      console.log('tagsmenu')
+      // 鍒ゆ柇锛氬綋鍓嶈矾鐢变笉绛変簬褰撳墠閫変腑椤圭殑url锛屼篃灏变唬琛ㄤ綘鐐瑰嚮鐨勪笉鏄幇鍦ㄩ�変腑鐨勬爣绛撅紝鏄彟涓�涓爣绛惧氨璺宠浆杩囧幓锛屽鏋滀綘鐐瑰嚮鐨勬槸鐜板湪宸茬粡閫変腑鐨勬爣绛惧氨涓嶇敤璺宠浆浜嗭紝鍥犱负浣犲凡缁忓湪杩欎釜璺敱浜嗚繕璺充粈涔堝憿銆�
       if (this.$route.path !== item.url) {
-        //鐢╬ath鐨勮烦杞柟娉曟妸褰撳墠椤圭殑url褰撲綔鍦板潃璺宠浆銆�
-        this.$router.push({ path: item.url });
-        let tagsDiv = document.getElementById('tags-box')
+        // 鐢╬ath鐨勮烦杞柟娉曟妸褰撳墠椤圭殑url褰撲綔鍦板潃璺宠浆銆�
+        this.$router.push({ path: item.url })
+        const tagsDiv = document.getElementById('tags-box')
         if (index) {
           tagsDiv.scrollTo(index * 110, 0)
         }
       }
     },
-    //閫氳繃鍒ゆ柇璺敱涓�鑷磋繑鍥炲竷灏斿�兼坊鍔燾lass锛屾坊鍔犻珮浜晥鏋�
+    // 閫氳繃鍒ゆ柇璺敱涓�鑷磋繑鍥炲竷灏斿�兼坊鍔燾lass锛屾坊鍔犻珮浜晥鏋�
     isActive(route, index) {
-      let res = route === this.$route.path
+      const res = route === this.$route.path
       return res
     },
     scrollToStart() {
-
-      let tagsDiv = document.getElementById('tags-box')
+      const tagsDiv = document.getElementById('tags-box')
       tagsDiv.scrollTo(0, 0)
-    }, 
+    },
     scrollToEnd() {
-      let tagsDiv = document.getElementById('tags-box')
+      const tagsDiv = document.getElementById('tags-box')
       tagsDiv.scrollTo(tagsDiv.scrollWidth, 0)
     },
-    //鍙抽敭浜嬩欢锛屾樉绀哄彸閿彍鍗曪紝骞跺浐瀹氬ソ浣嶇疆銆�
+    // 鍙抽敭浜嬩欢锛屾樉绀哄彸閿彍鍗曪紝骞跺浐瀹氬ソ浣嶇疆銆�
     openMenu(tag, e) {
       this.visible = true
       this.selectedTag = tag
       const offsetLeft = this.$el.getBoundingClientRect().left
-      console.log(tag, e);
-      this.left = e.clientX - offsetLeft + 60  //鍙抽敭鑿滃崟璺濈宸﹁竟鐨勮窛绂�
-      this.top = e.clientY +20  //鍙抽敭鑿滃崟璺濈涓婇潰鐨勮窛绂�           杩欎袱涓彲浠ユ洿鏀癸紝鐪嬬湅鑷繁鐨勫彸閿彍鍗曞湪浠�涔堜綅缃紝鑷繁璋�
+      console.log(tag, e)
+      this.left = e.clientX - offsetLeft + 60 // 鍙抽敭鑿滃崟璺濈宸﹁竟鐨勮窛绂�
+      this.top = e.clientY + 20 // 鍙抽敭鑿滃崟璺濈涓婇潰鐨勮窛绂�           杩欎袱涓彲浠ユ洿鏀癸紝鐪嬬湅鑷繁鐨勫彸閿彍鍗曞湪浠�涔堜綅缃紝鑷繁璋�
     },
-    //闅愯棌鍙抽敭鑿滃崟
+    // 闅愯棌鍙抽敭鑿滃崟
     closeMenu() {
       this.visible = false
     },
-    //鍙抽敭鑿滃崟鍏抽棴鎵�鏈夐�夐」锛岃Е鍙憊uex涓殑鏂规硶锛屾妸褰撳墠璺敱褰撳弬鏁颁紶杩囧幓鐢ㄤ簬鍒ゆ柇
-    cleartags(val){
+    // 鍙抽敭鑿滃崟鍏抽棴鎵�鏈夐�夐」锛岃Е鍙憊uex涓殑鏂规硶锛屾妸褰撳墠璺敱褰撳弬鏁颁紶杩囧幓鐢ㄤ簬鍒ゆ柇
+    cleartags(val) {
       this.visible = false
       this.cleartagsview(val)
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -183,13 +194,13 @@
   color: #666;
   cursor: pointer;
   &:hover {
-    color: #2E68EC;
+    color: #4d99a8;
   }
 }
 
 .ban-btn {
   color: #999;
-  cursor:not-allowed
+  cursor: not-allowed;
 }
 
 #tags-box {
@@ -200,11 +211,11 @@
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */
   &::-webkit-scrollbar {
-      display: none; /* Chrome Safari */
-    }
+    display: none; /* Chrome Safari */
+  }
 }
 #tags-box::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+  display: none; /* Chrome Safari */
 }
 //鏍囩瀵艰埅鏍峰紡
 .tagsview {
@@ -218,16 +229,15 @@
   color: #000;
   font-size: 14px;
   display: inline-block;
-
 }
 //鍙夊彿榧犳爣缁忚繃鏍峰紡
-.tagsicon:hover{
+.tagsicon:hover {
   color: #f56c6c;
 }
 //鏍囩楂樹寒
-.active{
-  color: #2E68EC;
-  border-bottom: 2px solid #2E68EC;
+.active {
+  color: #4d99a8;
+  border-bottom: 2px solid #4d99a8;
 }
 //鍙抽敭鑿滃崟鏍峰紡
 .contextmenu {
@@ -241,7 +251,7 @@
   font-size: 12px;
   font-weight: 400;
   color: #333;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
   li {
     margin: 0;
     padding: 7px 16px;
diff --git a/admin/src/views/platform/index.vue b/admin/src/views/platform/index.vue
index d25f751..7da33b8 100644
--- a/admin/src/views/platform/index.vue
+++ b/admin/src/views/platform/index.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="main_app">
-    <div class="df_ac mb20">
-      <el-select v-model="currentPlatform" class="w300">
-        <el-option v-for="item in platformList" :key="item.id"></el-option>
-      </el-select>
+    <div class="main_head mb20">
+      <el-tabs v-model="currentPlatform" class="tabs">
+        <!-- <el-tab-pane label="鐢ㄦ埛绠＄悊" name="first" v-for="item in platformList" :key="item.id"></el-tab-pane> -->
+        <el-tab-pane label="鐢ㄦ埛绠＄悊" name="first"></el-tab-pane>
+      </el-tabs>
       <el-button type="primary" class="ml20" @click="handleSet"
         >閰嶇疆鏈堝彴</el-button
       >
@@ -12,47 +13,68 @@
     <div class="platform_list">
       <div class="item" v-for="i in 2">
         <div class="head">
-          <div class="name">6鍙锋湀鍙�</div>
-          <div class="status">
-            <span class="green">浣滀笟涓�</span>
-            <span class="">浣滀笟锛�1</span>
-            <span>鍙彿锛�1</span>
-            <span>绛夊緟锛�1</span>
-            <span class="red">寮傚父锛�1</span>
+          <div class="left">
+            <div class="status mr10">浣滀笟涓�</div>
+            <div class="name">6鍙锋湀鍙�</div>
+            <div class="ite">
+              <span class="placeholder9">浣滀笟锛�</span><span>1</span>
+            </div>
+            <div class="ite">
+              <span class="placeholder9">浣滀笟锛�</span><span>1</span>
+            </div>
+            <div class="ite">
+              <span class="placeholder9">浣滀笟锛�</span><span class="red">1</span>
+            </div>
           </div>
           <el-button type="primary">鍙彿</el-button>
         </div>
-        <div class="info" v-for="j in 3">
-          <div class="line">
-            <div class="left">
-              <span class="plate mr20">鐨朅12122</span>
-              <span class="placeholder9">椹鹃┒鍛�</span>
-              <span>鐜嬫煇鏌�</span>
-              <span>18888888888</span>
-            </div>
-            <div class="right">
-              <span class="green">浣滀笟涓�</span>
-              <span class="placeholder9 ml20">浣滀笟鏃堕暱锛�23鍒嗛挓26绉�</span>
-            </div>
-          </div>
-          <div class="line">
-            <div class="left">
-              <div>
-                <span>杩愯緭鍗曞彿</span
-                ><span class="ml10 placeholder9">1231231</span>
+        <div class="list">
+          <div class="info" v-for="j in 3">
+            <div class="line">
+              <div class="left">
+                <span class="plate">鐨朅12122</span>
               </div>
-              <div>
-                <span>鎬昏繍杈撻噺</span
-                ><span class="ml10 placeholder9">3000涓囨敮</span
-                ><span class="primaryColor ml10 pointer" @click="isShowDetail = true">杩愬崟璇︽儏</span>
+              <div class="right">
+                <span class="green">浣滀笟涓�</span>
+                <span class="green ml20">23鍒嗛挓26绉�</span>
               </div>
             </div>
-            <div class="right">
-              <el-button type="primary" @click="handleFinish()"
-                >浣滀笟瀹屾垚</el-button
-              >
-              <el-button plain>杞Щ鏈堝彴</el-button>
-              <el-button plain>寮傚父鎸傝捣</el-button>
+            <div class="line">
+              <div class="ite">
+                <span>杩愯緭鍗曞彿锛�</span>
+                <span>202020</span>
+              </div>
+              <div class="ite">
+                <span>椹鹃┒鍛橈細</span>
+                <span>202020</span>
+              </div>
+              <div class="ite">
+                <span>鎵嬫満鍙凤細</span>
+                <span>202020</span>
+              </div>
+              <div class="ite">
+                <span>鎬昏繍杈撻噺锛�</span>
+                <span>202020</span>
+              </div>
+              <div class="ite" style="width: 66.6%">
+                <span>杩愯緭鍏徃锛�</span>
+                <span>20202dasd鐜╁効鐜╁効鐜╁効棰濆 棰濆0</span>
+              </div>
+              <div class="ite"></div>
+            </div>
+            <div class="line">
+              <div class="left">
+                <span class="primaryColor pointer" @click="isShowDetail = true"
+                  >杩愬崟璇︽儏</span
+                >
+              </div>
+              <div class="right">
+                <el-button type="primary" @click="handleFinish()"
+                  >浣滀笟瀹屾垚</el-button
+                >
+                <el-button plain>杞Щ鏈堝彴</el-button>
+                <el-button plain>寮傚父鎸傝捣</el-button>
+              </div>
             </div>
           </div>
         </div>
@@ -69,7 +91,7 @@
         <div class="mb20">
           <div class="title">鍏ュ簱鏈堝彴缁�</div>
           <div class="list">
-            <div class="item">1鍙锋湀鍙�</div>
+            <div class="item active">1鍙锋湀鍙�</div>
             <div class="item">2鍙锋湀鍙�</div>
             <div class="item">1鍙锋湀鍙�</div>
             <div class="item">2鍙锋湀鍙�</div>
@@ -93,42 +115,38 @@
     <!-- 杩愬崟璇︽儏 -->
     <el-dialog
       title="杩愬崟璇︽儏"
+      center
       :visible.sync="isShowDetail"
       width="420px"
     >
       <div class="detail_modal">
         <div class="head">
-          <div class="line">
-            <span class="ccc">杩愯緭鍗曞彿</span>
-            <span>28282</span>
-          </div>
-          <div class="line">
-            <span class="ccc">杩愯緭杞﹁締</span>
-            <span>鐨朅12122</span>
-          </div>
-          <div class="line">
-            <span class="ccc">椹鹃┒鍛�</span>
-            <span>鐜嬪痉鍙�</span>
-            <span>1888888</span>
-          </div>
-          <div class="line">
-            <span class="ccc">鎬昏繍杈撻噺</span>
-            <span>28282涓囨敮</span>
+          <div class="plate">鐨朅12122</div>
+          <div class="list">
+            <div class="item">
+              <span>杩愯緭鍗曞彿锛�</span>
+              <span>22222</span>
+            </div>
+            <div class="item">
+              <span>鎬昏繍杈撻噺锛�</span>
+              <span>22222</span>
+            </div>
+            <div class="item">
+              <span>椹鹃┒鍛橈細</span>
+              <span>22222</span>
+            </div>
           </div>
         </div>
+        <div class="title">鍚堝悓鍒楄〃</div>
         <div class="content">
           <div class="item">
-            <div class="line">
-              <div>鍚堝悓鍙凤細1292992</div>
-              <div class="address">鏀惰揣鍦帮細address</div>
-            </div>
-            <div class="line">
-              <div>鐗╂枡鍚嶇О锛氶粍灞�</div>
-              <div>鏁伴噺锛�700</div>
-            </div>
-            <div class="line">
-              <div>鐗╂枡鍚嶇О锛氶粍灞�</div>
-              <div>鏁伴噺锛�200</div>
+            <div class="contract">鍚堝悓鍙凤細1292992</div>
+            <div class="placeholder6">鏀惰揣鍦帮細address</div>
+            <div class="list">
+              <div class="line">
+                <div class="left"><span>鐗╂枡鍚嶇О锛�</span><span>榛勫北</span></div>
+                <div class="right"><span>鏁伴噺锛�</span><span>100</span></div>
+              </div>
             </div>
           </div>
         </div>
@@ -154,6 +172,7 @@
     }
   },
   methods: {
+
     handleFinish(item) {
       this.$confirm('楂樻灦搴�6鍙锋湀鍙� 鐨朅12345 浣滀笟缁撴潫', '娓╅Θ鎻愮ず', {
         confirmButtonText: '纭畾',
@@ -173,51 +192,97 @@
 <style lang="scss" scoped>
 .platform_list {
   .item {
-    padding: 16px 24px;
+    /* padding: 16px 24px; */
+    background: #ffffff;
     border-radius: 2px;
-    border: 2px solid #cccccc;
+    border: 1px solid #dfe2e8;
     margin-bottom: 12px;
     .head {
       display: flex;
       justify-content: space-between;
-      .name {
-        font-size: 16px;
-      }
-      .status {
+      align-items: center;
+      height: 50px;
+      background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%);
+      border-radius: 2px 2px 0px 0px;
+      padding: 0 28px;
+      .left {
         flex: 1;
-        margin-left: 50px;
-        span {
+        display: flex;
+        align-items: center;
+        .name {
+          font-size: 16px;
+          margin-right: 50px;
+        }
+        .status {
+          line-height: 25px;
+          height: 25px;
+          padding: 0 4px;
+          background: #00ba67;
+          border-radius: 2px;
+          color: #ffffff;
+        }
+        .ite {
           margin-right: 30px;
         }
       }
     }
-    .info {
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
       margin-top: 10px;
-      border: 1px solid #999999;
-      padding: 6px 8px;
-      border-radius: 2px;
-      margin-bottom: 10px;
-      .line {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 6px;
-        .left {
-          .plate {
-            border: 1px solid #4969f6;
-            border-radius: 2px;
-            padding: 0 5px;
-          }
-        }
-        .right {
+      padding: 16px;
+      .info {
+        background: #effbf5;
+        border-radius: 2px;
+        border: 1px solid #dfe2e8;
+        padding: 16px;
+        border-radius: 2px;
+        margin-bottom: 10px;
+        width: 30%;
+        .line {
           display: flex;
           align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          margin-bottom: 6px;
+          span {
+            &:nth-child(1) {
+              color: #999999;
+            }
+          }
+          .ite {
+            width: 33.3%;
+            margin-top: 8px;
+          }
+          .left {
+            .plate {
+              font-size: 15px;
+              color: #111111;
+              padding: 4px 5px;
+              font-weight: 700;
+              border: 1px solid #279baa;
+              background-color: #fff;
+            }
+          }
+          .right {
+            display: flex;
+            align-items: center;
+          }
         }
       }
     }
   }
 }
 
+.main_head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tabs {
+    flex: 1;
+  }
+}
 /*  */
 .set_modal {
   .title {
@@ -233,33 +298,97 @@
       cursor: pointer;
       width: 30%;
       height: 32px;
-      background-color: #d9d9d9;
-      border: 1px solid #4d99a7;
+      border: 1px solid #dfe2e8;
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: 6px;
+      border-radius: 2px;
       margin-bottom: 12px;
+    }
+    .active {
+      background: rgba(39, 155, 170, 0.06);
+      border: 1px solid #279baa;
+      color: #279baa;
     }
   }
 }
 /*  */
 .detail_modal {
   font-size: 12px;
+  color: #282828;
   .head {
-    border-bottom: 1px solid #999999;
-  }
-  .item {
-    border-bottom: 1px solid #999999;
-  }
-  .line {
-    display: flex;
-    justify-content: space-between;
-    .ccc{
-      color: #999999;
+    background: rgba(39, 155, 170, 0.05);
+    border-radius: 4px;
+    border: 1px solid #dfe2e8;
+    padding: 16px;
+    .plate {
+      width: 90px;
+      text-align: center;
+      font-size: 15px;
+      color: #111111;
+      padding: 4px 5px;
+      font-weight: 700;
+      border: 1px solid #279baa;
+      background-color: #fff;
     }
-    .address {
-      margin-right: 30px;
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 16px;
+      .item {
+        width: 50%;
+        margin-bottom: 8px;
+        span {
+          &:nth-child(1) {
+            color: #666666;
+          }
+        }
+      }
+    }
+  }
+  .title {
+    margin: 16px 0;
+    font-weight: 500;
+    font-size: 16px;
+    color: #222222;
+  }
+  .content {
+    .item {
+      border-radius: 4px;
+      border: 1px solid #dfe2e8;
+      padding: 16px;
+      .list {
+        background: #f7f7f7;
+        border-radius: 4px;
+        padding: 12px 16px;
+        margin-top: 10px;
+      }
+      .contract {
+        font-weight: 500;
+        font-size: 15px;
+        color: #279baa;
+        margin-bottom: 4px;
+      }
+      .line {
+        display: flex;
+        margin-bottom: 8px;
+        &:nth-last-child(1){
+          margin: 0;
+        }
+        div {
+          span {
+            &:nth-child(1) {
+              color: #666666;
+            }
+          }
+        }
+        .left {
+          flex: 6;
+        }
+        .right {
+          flex: 4;
+        }
+      }
     }
   }
 }

--
Gitblit v1.9.3