Merge branch 'dev' of http://gogs.gzzzyd.com/xiaowenhua/vueDataV into dev

src/components/bgBox/index.vue

@@ -190,6 +190,7 @@ export default {
     position: absolute;
     display: flex;
     width: 100%;
+    z-index: 10;
     .line {
       width: 0px;
       height: 41px;
@@ -271,11 +272,16 @@ export default {
     pointer-events: none;
   }
   & > .box {
+    transform-origin: 0 0 0;
     position: absolute;
     top: 90px;
     width: 100%;
     box-sizing: border-box;
     padding: 40px;
+    left: 0;
+    top: 0;
+    padding: 0;
+    z-index: 9;
   }
 }
 </style>

src/components/boxTop/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="containerBox">
+    <div class="sn-title title">
+      <div class="titleZn">{{ title }}</div>
+      <div class="titleEn">{{ titleEn }}</div>
+    </div>
+    <div class="line"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    title: {
+      type: String,
+      default: `区域排行`,
+    },
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
+    },
+  },
+  mounted() {},
+  methods: {
+    getEchart() {},
+  },
+  beforeDestroy() {},
+}
+</script>
+
+<style lang="less" scoped>
+.containerBox {
+  .title {
+    background-image: url('~@/assets/img2/综合总览/编组_1.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+    display: flex;
+    justify-content: space-between;
+    .titleZn {
+      font-size: 20px;
+      text-indent: 28px;
+    }
+    .titleEn {
+      width: 130px;
+      color: rgba(255, 255, 255, 0.63);
+      font-size: 8px;
+      text-align: right;
+      word-break: break-all;
+      line-height: 1.2em;
+    }
+  }
+  .line {
+    height: 1px;
+    background: rgba(255, 255, 255, 0.3);
+    margin-bottom: 12px;
+    margin-top: 2px;
+    position: relative;
+    &::before,
+    &::after {
+      background-color: #fff;
+      height: 1px;
+      width: 4px;
+      right: 0;
+      top: 0;
+      position: absolute;
+      content: ' ';
+      display: block;
+    }
+    &::before {
+      left: 0;
+    }
+  }
+}
+</style>

src/views/page1/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <bgBox :tabChange="tabChange" :tabIndex="0">
+  <bgBox :tabChange="tabChange" class="bgBox" :tabIndex="0">
     <cylindricalHistogram
       style="left: 50px; top: 345px"
       v-if="isGetData"
@@ -294,36 +294,4 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-.home-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  .wrap {
-    transform-origin: 0px 0px 0px;
-    background: url(../../assets/img/bj.jpg) no-repeat;
-    background-size: contain;
-    background-position: 50% 0;
-    background-color: rgb(0, 0, 0);
-    min-width: auto;
-    width: 1920px;
-    min-height: auto;
-    height: 1080px;
-    overflow: auto;
-    .top {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 80px;
-      background-color: transparent;
-      background: url(../../assets/img/top_nav.png) no-repeat;
-      background-position: 65% 0;
-      border: none;
-      overflow: hidden;
-    }
-  }
-}
-</style>
+<style lang="less" scoped></style>

src/views/page2/cmap.vue

@@ -148,8 +148,8 @@ export default {
   position: absolute;
   padding: 0px;
   margin: 0px;
-  width: 100vw;
-  height: 100vh;
+  width: 1920px;
+  height: 1080px;
   z-index: 8;
 
   &::after {

src/views/page2/index.vue

@@ -49,15 +49,6 @@ export default {
     top: 120px;
   }
   ::v-deep {
-    .top {
-      z-index: 10;
-    }
-    .box {
-      left: 0;
-      top: 0;
-      padding: 0;
-      z-index: 9;
-    }
     .bg {
       position: absolute;
       z-index: 9;

src/views/page2/item.vue

@@ -38,7 +38,7 @@ export default {
   overflow: auto;
   .containerBox {
     cursor: pointer;
-    margin-top: 15px;
+    margin-bottom: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/views/page2/leftBox.vue

@@ -1,24 +1,28 @@
 <template>
-  <div class="leftBox">
-    <div class="search-bar">
-      <input
-        v-model="leftBox.input"
-        type="text"
-        placeholder="输入关键字进行搜索"
-        @keyup.enter="searchFn"
-      />
-      <div class="icons">
-        <span class="icon i-mdi-search" @click="searchFn"></span>
-        <span class="icon i-mdi-delete" @click="clearFn"></span>
-        <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
+  <div>
+    <boxTop />
+    <div class="leftBox">
+      <div class="search-bar">
+        <input
+          v-model="leftBox.input"
+          type="text"
+          placeholder="输入关键字进行搜索"
+          @keyup.enter="searchFn"
+        />
+        <div class="icons">
+          <span class="icon i-mdi-search" @click="searchFn"></span>
+          <span class="icon i-mdi-delete" @click="clearFn"></span>
+          <span class="icon i-mdi-swap-horizontal" @click="sortFn"></span>
+        </div>
       </div>
+      <item :list="leftBox.list" />
     </div>
-    <item :list="leftBox.list" />
   </div>
 </template>
 
 <script>
 import item from './item.vue'
+import boxTop from '@/components/boxTop/index.vue'
 
 export default {
   data() {
@@ -32,6 +36,7 @@ export default {
     }
   },
   components: {
+    boxTop,
     item,
   },
   async created() {