From 6b29a9e7412ae8b9271745c5852ffa99f51f53a5 Mon Sep 17 00:00:00 2001
From: lx <826276471@qq.com>
Date: Thu, 24 Apr 2025 11:07:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A4=B4=E9=83=A8=E5=92=8C=E4=B8=BB?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../containerBG.png}                          | Bin
 src/components/custom-scroll-title/index.vue  |  31 +--
 src/layouts/index.vue                         |  22 +-
 src/router/index.js                           |   2 +-
 src/views/home/index.vue                      | 188 +++++-------------
 5 files changed, 85 insertions(+), 158 deletions(-)
 rename src/assets/images/{land/底纹_upscayl_5x_upscayl-standard-4x.png => basic/containerBG.png} (100%)

diff --git a/src/assets/images/land/底纹_upscayl_5x_upscayl-standard-4x.png b/src/assets/images/basic/containerBG.png
similarity index 100%
rename from src/assets/images/land/底纹_upscayl_5x_upscayl-standard-4x.png
rename to src/assets/images/basic/containerBG.png
diff --git a/src/components/custom-scroll-title/index.vue b/src/components/custom-scroll-title/index.vue
index c23b67c..bf8bc49 100644
--- a/src/components/custom-scroll-title/index.vue
+++ b/src/components/custom-scroll-title/index.vue
@@ -34,7 +34,8 @@
 
 <script setup>
 import { ref, watch, onMounted } from 'vue';
-
+import { useRouter } from 'vue-router';
+const router = useRouter();
 onMounted(() => {
   handleWidth();
 });
@@ -44,25 +45,14 @@ const props = defineProps({
     type: Array,
     default() {
       return [
-        { label: '标题1', value: '1' },
-        { label: '标题2', value: '2' },
-        { label: '标题3', value: '3' },
-        { label: '标题4', value: '4' },
-        { label: '标题5', value: '5' },
-        { label: '标题6', value: '6' },
-        { label: '标题7', value: '7' },
-        { label: '标题8', value: '8' },
-        { label: '标题9', value: '9' },
-        { label: '标题10', value: '10' },
-        { label: '标题11', value: '11' },
-        { label: '标题12', value: '12' },
-        { label: '标题13', value: '13' },
-        { label: '标题14', value: '14' },
-        { label: '标题15', value: '15' },
-        { label: '标题16', value: '16' },
-        { label: '标题17', value: '17' },
-        { label: '标题18', value: '18' },
-        { label: '标题19', value: '19' },
+        { label: '首页', value: 'home' },
+        { label: '土地资源', value: 'land' },
+        { label: '投入品', value: 'inputs' },
+        { label: '生产经营主体', value: 'entities' },
+        // { label: '智慧种植监测', value: 'plant' },
+        // { label: '智慧养殖监测', value: 'breed' },
+        { label: '全流程溯源', value: 'trace' },
+        { label: '产业预警决策', value: 'early' },
       ];
     },
   },
@@ -120,6 +110,7 @@ function handleTitleBtn(t = -1) {
 function handleTitleClick(val) {
   activeTitle.value = val;
   emit('changeTitle', val);
+  router.push({ name: val });
 }
 </script>
 
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 98240ae..ff9280a 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,3 +1,23 @@
 <template>
-  <router-view />
+  <section class="_contaioner">
+    <custom-scroll-title class="header_titles" @change-title="handleChangeTitle" />
+    <section class="_content">
+      <router-view />
+    </section>
+  </section>
 </template>
+<style lang="scss" scoped>
+._contaioner {
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  background: url('../assets/images/basic/containerBG.png') no-repeat center;
+  background-size: 100% 100%;
+  .header_titles {
+    height: 60px;
+  }
+  ._content {
+    height: calc(100vh - 60px);
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index c644a7a..a776199 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,7 +20,7 @@ export const constantRoutes = [
     path: '/',
     name: 'layout',
     component: Layout,
-    redirect: '/home',
+    // redirect: '/home',
     meta: { title: '首页', icon: 'House' },
     children: [
       {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3cd8fa7..6b6e071 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,77 +1,56 @@
 <template>
   <div class="data-home-index">
-    <baseBg ref="homebase" :name-val="'home'" top-title=" ">
-      <!-- <template #top> </template> -->
-      <template #center>
-        <el-row style="width: 100%; height: 100%">
-          <el-col :span="6" class="left-charts">
-            <div class="left-charts-item">
-              <customBack top-title="综合数据统计" :top-postion="'left'">
-                <template #back>
-                  <comprehensive></comprehensive>
-                </template>
-              </customBack>
-            </div>
-            <div class="left-charts-item">
-              <customBack top-title="土地分布数据统计" :top-postion="'left'">
-                <template #back>
-                  <rolllist :items="rollDataList"></rolllist>
-                </template>
-              </customBack>
-            </div>
-            <div class="left-charts-item">
-              <customBack top-title="种养殖数据统计" :top-postion="'left'">
-                <template #back>
-                  <plantBreedCharts></plantBreedCharts>
-                </template>
-              </customBack>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <centerMap></centerMap>
-          </el-col>
-          <el-col :span="6" class="right-charts">
-            <div class="right-charts-item">
-              <customBack top-title="使用投入品数据统计" :top-postion="'left'">
-                <template #back>
-                  <inputs></inputs>
-                </template>
-              </customBack>
-            </div>
-            <div class="right-charts-item">
-              <customBack top-title="经营主体数据统计" :top-postion="'left'">
-                <template #back>
-                  <entitiesCharts></entitiesCharts>
-                </template>
-              </customBack>
-            </div>
-            <div class="right-charts-item">
-              <customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
-                <template #back>
-                  <traceCharts></traceCharts>
-                </template>
-              </customBack>
-            </div>
-          </el-col>
-        </el-row>
-      </template>
-    </baseBg>
-
-    <div class="home-index-top-warp">
-      <div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
-        <div class="home-data-p">
-          <!-- <h3 class="home-title">耿马县农产品销售情况</h3> -->
-          <div class="home-data-top">￥1284.624万</div>
-          <div class="home-data-contrast">
-            <span class="tips">同比去年</span>
-            <span class="value">￥4684.629</span>
-            <el-icon style="vertical-align: middle" class="contrast-icon" color="#6beff9">
-              <TopRight />
-            </el-icon>
-          </div>
+    <el-row style="width: 100%; height: 100%">
+      <el-col :span="6" class="left-charts">
+        <div class="left-charts-item">
+          <customBack top-title="综合数据统计" :top-postion="'left'">
+            <template #back>
+              <comprehensive></comprehensive>
+            </template>
+          </customBack>
         </div>
-      </div>
-    </div>
+        <div class="left-charts-item">
+          <customBack top-title="土地分布数据统计" :top-postion="'left'">
+            <template #back>
+              <rolllist :items="rollDataList"></rolllist>
+            </template>
+          </customBack>
+        </div>
+        <div class="left-charts-item">
+          <customBack top-title="种养殖数据统计" :top-postion="'left'">
+            <template #back>
+              <plantBreedCharts></plantBreedCharts>
+            </template>
+          </customBack>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <centerMap></centerMap>
+      </el-col>
+      <el-col :span="6" class="right-charts">
+        <div class="right-charts-item">
+          <customBack top-title="使用投入品数据统计" :top-postion="'left'">
+            <template #back>
+              <inputs></inputs>
+            </template>
+          </customBack>
+        </div>
+        <div class="right-charts-item">
+          <customBack top-title="经营主体数据统计" :top-postion="'left'">
+            <template #back>
+              <entitiesCharts></entitiesCharts>
+            </template>
+          </customBack>
+        </div>
+        <div class="right-charts-item">
+          <customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
+            <template #back>
+              <traceCharts></traceCharts>
+            </template>
+          </customBack>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script setup>
@@ -95,89 +74,26 @@ let rollDataList = reactive([
   // 更多项...
 ]);
 
-// const homebase = ref(null);
-
-// onMounted(() => {
-//   homebase.value && homebase.value.startTime();
-// });
-
-// onUnmounted(() => {
-//   homebase.value && homebase.value.chearTime();
 // });
 </script>
 <style lang="scss" scoped>
 .data-home-index {
-  .home-index-top-warp {
-    position: fixed;
-    top: 48px;
-    left: 0;
-    width: 100%;
-    height: 120px;
-    text-align: center;
-    padding-top: 24px;
-    .home-index-top {
-      margin: auto;
-      width: calc(100% - 400px);
-      height: 100%;
-      background-repeat: no-repeat;
-      background-position: center bottom;
-      background-size: contain;
-      position: relative;
-      .home-data-p {
-        position: absolute;
-        left: 0;
-        top: 13px;
-        width: 100%;
-      }
-      .home-title {
-        display: inline-block;
-        font-size: 18px;
-        font-weight: bold;
-        transform: skewX(-10deg);
-        background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-        -webkit-background-clip: text;
-        color: #fff;
-        letter-spacing: 4px;
-        text-shadow: -2px 0 0 1px #add8f1;
-      }
-      .home-data-top {
-        font-size: 18px;
-        font-weight: bold;
-        color: #fff;
-        letter-spacing: 8px;
-        margin-bottom: 10px;
-      }
-      .home-data-contrast {
-        .tips {
-          font-size: 10px;
-          color: #6beff9;
-        }
-        .value {
-          padding: 0 8px;
-          font-size: 12px;
-          font-weight: bold;
-          color: #fff;
-        }
-      }
-    }
-  }
+  height: 100%;
+  width: 100%;
   .left-charts {
     display: flex;
     justify-content: space-around;
-    width: 100%;
     height: 100%;
     flex-direction: column;
   }
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: transparent;
   }
 
   .right-charts {
     display: flex;
     justify-content: space-around;
-    width: 100%;
     height: 100%;
     flex-direction: column;
   }