feat: 添加 boxTop 组件

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/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() {