数据大屏导航位置修改

sub-government-screen-service/components.d.ts

@@ -8,8 +8,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BaseBg: typeof import('./src/components/baseBg.vue')['default']
+    'BaseBg copy': typeof import('./src/components/baseBg copy.vue')['default']
     CenterMap: typeof import('./src/components/centerMap.vue')['default']
     CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
+    copy: typeof import('./src/components/baseBg copy.vue')['default']
     CurrentTime: typeof import('./src/components/currentTime.vue')['default']
     CustomBack: typeof import('./src/components/customBack.vue')['default']
     CustomProgress: typeof import('./src/components/customProgress.vue')['default']

sub-government-screen-service/src/components/baseBg copy.vue

@@ -0,0 +1,170 @@
+<template>
+  <!-- :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }" -->
+  <div class="data-warp">
+    <div class="chart-content">
+      <div class="top">
+        <slot v-if="$slots.top" name="top"></slot>
+        <div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
+          <div class="top-left"></div>
+          <div class="top-content">
+            {{ topTitle }}
+          </div>
+          <!-- <div class="top-right">{{ currentTime }}</div> -->
+        </div>
+      </div>
+      <div class="content">
+        <slot name="center"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+const router = useRouter();
+const props = defineProps({
+  nameVal: {
+    type: String,
+    default: 'home',
+  },
+  topTitle: {
+    type: String,
+    default: '系统',
+  },
+});
+
+const navlist = ref([
+  { title: '首页', name: 'home' },
+  { title: '土地资源', name: 'land' },
+  { title: '投入品', name: 'inputs' },
+  { title: '生产经营主体', name: 'entities' },
+  { title: '智慧种植检测', name: 'plant' },
+  { title: '智慧养殖检测', name: 'breed' },
+  { title: '全流程溯源', name: 'trace' },
+  { title: '产业预警决策', name: 'early' },
+]);
+
+let currentName = ref('home');
+
+watch(
+  () => props.nameVal,
+  () => {
+    currentName.value = props.nameVal;
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+const itemAct = (name) => {
+  currentName.value = name;
+  router.push({ name: name });
+};
+</script>
+<style lang="scss" scoped>
+div {
+  box-sizing: border-box;
+}
+.data-warp {
+  width: 100%;
+  height: 100vh;
+  background-size: 100% 100%;
+
+  .chart-content {
+    width: 100%;
+    height: 100vh;
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    .top,
+    .content,
+    .bottom {
+      width: 100%;
+      padding: 0 16px;
+      background-size: cover;
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .top {
+      height: 55px;
+      .top-content-warp {
+        width: 100%;
+        height: 100%;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        .top-left,
+        .top-content,
+        .top-right {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .top-content {
+          width: calc(100% - 400px);
+          line-height: 42px;
+          text-align: center;
+          font-size: 18px;
+          font-weight: bold;
+          transform: skewX(-8deg);
+          background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+          -webkit-background-clip: text;
+          color: #fff;
+          letter-spacing: 8px;
+          text-shadow: -6px 0 0 1px #add8f1;
+        }
+        .top-left {
+          width: 200px;
+        }
+        .top-right {
+          text-align: right;
+          width: 200px;
+          color: #add8f1;
+        }
+      }
+    }
+    .bottom {
+      height: 80px;
+      text-align: center;
+
+      .b-nav {
+        margin: auto;
+        display: inline-flex;
+        gap: 20px;
+        .b-nav-item {
+          display: inline-block;
+          cursor: pointer;
+          min-width: 132px;
+          height: 42px;
+          text-align: center;
+          line-height: 38px;
+          span {
+            font-size: 14px;
+            font-weight: bold;
+            display: inline-flex;
+            transform: skewX(-8deg);
+            background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+            -webkit-background-clip: text;
+
+            letter-spacing: 4px;
+            text-shadow: -2px 0 0 1px #add8f1;
+          }
+
+          &.nav-act {
+            color: rgba(255, 255, 255, 1);
+          }
+          &.nav-normal {
+            color: rgba(255, 255, 255, 0.6);
+          }
+        }
+      }
+    }
+    .content {
+      height: calc(100% - 138px);
+    }
+  }
+}
+</style>

sub-government-screen-service/src/components/baseBg.vue

@@ -4,10 +4,50 @@
     <div class="chart-content">
       <div class="top">
         <slot v-if="$slots.top" name="top"></slot>
-        <div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
+        <!--:style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }" -->
+        <div v-else class="top-content-warp">
           <div class="top-left"></div>
           <div class="top-content">
-            {{ topTitle }}
+            <div class="top-content-p">
+              <div class="b-nav-l">
+                <template v-for="(n, indexn) in navlist" :key="n.name">
+                  <div
+                    v-if="indexn <= 3"
+                    class="b-nav-item"
+                    :style="{
+                      'background-image':
+                        'url(' +
+                        (currentName == n.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
+                        ')',
+                    }"
+                    :class="currentName == n.name ? 'nav-act' : 'nav-normal'"
+                    @click="itemAct(n.name)"
+                  >
+                    <span>{{ n.title }}</span>
+                  </div>
+                </template>
+              </div>
+
+              <div class="title txt-ellipsis clamp1">{{ topTitle }}</div>
+              <div class="b-nav-r">
+                <template v-for="(m, indexm) in navlist" :key="m.name">
+                  <div
+                    v-if="indexm > 3"
+                    class="b-nav-item"
+                    :style="{
+                      'background-image':
+                        'url(' +
+                        (currentName == m.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
+                        ')',
+                    }"
+                    :class="currentName == m.name ? 'nav-act' : 'nav-normal'"
+                    @click="itemAct(m.name)"
+                  >
+                    <span>{{ m.title }}</span>
+                  </div>
+                </template>
+              </div>
+            </div>
           </div>
           <!-- <div class="top-right">{{ currentTime }}</div> -->
         </div>
@@ -105,16 +145,72 @@ div {
         }
         .top-content {
           width: calc(100% - 400px);
-          line-height: 42px;
+          height: 100%;
-          text-align: center;
+          display: inline-flex;
-          font-size: 18px;
+          justify-content: center;
-          font-weight: bold;
+          flex-direction: column;
-          transform: skewX(-8deg);
+          .top-content-p {
-          background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+            width: 100%;
-          -webkit-background-clip: text;
+          }
-          color: #fff;
+          .title,
-          letter-spacing: 8px;
+          .b-nav-l,
-          text-shadow: -6px 0 0 1px #add8f1;
+          .b-nav-r {
+            display: inline-block;
+            vertical-align: middle;
+          }
+          .b-nav-l,
+          .b-nav-r {
+            width: calc((100% - 300px) / 2);
+          }
+          .b-nav-r {
+            text-align: right;
+          }
+          .title {
+            width: 300px;
+            line-height: 38px;
+            text-align: center;
+            font-size: 18px;
+            font-weight: bold;
+            transform: skewX(-8deg);
+            background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+            -webkit-background-clip: text;
+            color: #fff;
+            letter-spacing: 8px;
+            text-shadow: -6px 0 0 1px #add8f1;
+            max-height: unset !important;
+          }
+        }
+        .b-nav-l,
+        .b-nav-r {
+          margin: auto;
+          display: inline-flex;
+          gap: 20px;
+          .b-nav-item {
+            display: inline-block;
+            cursor: pointer;
+            min-width: 132px;
+            height: 38px;
+            text-align: center;
+            line-height: 38px;
+            span {
+              font-size: 14px;
+              font-weight: bold;
+              display: inline-flex;
+              transform: skewX(-8deg);
+              background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+              -webkit-background-clip: text;
+
+              letter-spacing: 4px;
+              text-shadow: -2px 0 0 1px #add8f1;
+            }
+
+            &.nav-act {
+              color: rgba(255, 255, 255, 1);
+            }
+            &.nav-normal {
+              color: rgba(255, 255, 255, 0.6);
+            }
+          }
         }
         .top-left {
           width: 200px;
@@ -163,7 +259,7 @@ div {
       }
     }
     .content {
-      height: calc(100% - 138px);
+      height: calc(100% - 60px);
     }
   }
 }

sub-government-screen-service/src/layouts/index.vue

@@ -9,7 +9,7 @@
   <div class="basic-layout" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
     <div class="basic-layout-container">
       <Main />
-      <Bottom :name-val="route.name"></Bottom>
+      <!-- <Bottom :name-val="route.name"></Bottom> -->
     </div>
   </div>
 </template>

sub-government-screen-service/src/styles/style.scss

@@ -15,3 +15,24 @@
   height: auto;
   max-height: calc(100vh - 130px);
 }
+.txt-ellipsis {
+  display: -webkit-inline-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: normal;
+}
+.clamp1 {
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  line-height: 1.5;
+  max-height: calc(1.5em * 1);
+}
+
+.clamp2 {
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  line-height: 1.5;
+  max-height: calc(1.5em * 2);
+}

sub-government-screen-service/src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="data-home-index">
-    <baseBg ref="homebase" :name-val="'home'">
+    <baseBg ref="homebase" :name-val="'home'" top-title=" ">
-      <template #top> </template>
+      <!-- <template #top> </template> -->
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
@@ -59,14 +59,16 @@
 
     <div class="home-index-top-warp">
       <div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
-        <h3 class="home-title">耿马县农产品销售情况</h3>
+        <div class="home-data-p">
-        <div class="home-data-top">￥1284.624万</div>
+          <h3 class="home-title">耿马县农产品销售情况</h3>
-        <div class="home-data-contrast">
+          <div class="home-data-top">￥1284.624万</div>
-          <span class="tips">同比去年</span>
+          <div class="home-data-contrast">
-          <span class="value">￥4684.629</span>
+            <span class="tips">同比去年</span>
-          <el-icon style="vertical-align: middle" class="contrast-icon" color="#6beff9">
+            <span class="value">￥4684.629</span>
-            <TopRight />
+            <el-icon style="vertical-align: middle" class="contrast-icon" color="#6beff9">
-          </el-icon>
+              <TopRight />
+            </el-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -110,13 +112,23 @@ let rollDataList = reactive([
     top: 0;
     left: 0;
     width: 100%;
-    padding-top: 24px;
+    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 28px;
+      background-position: center bottom;
       background-size: contain;
+      position: relative;
+      .home-data-p {
+        position: absolute;
+        left: 0;
+        top: -12px;
+        width: 100%;
+      }
       .home-title {
         display: inline-block;
         font-size: 18px;
@@ -133,7 +145,7 @@ let rollDataList = reactive([
         font-weight: bold;
         color: #fff;
         letter-spacing: 8px;
-        margin: 26px 0 0 0;
+        margin-top: 9px;
       }
       .home-data-contrast {
         .tips {