feat:头部和主容器改造

src/App.vue

@@ -18,4 +18,5 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
 </script>
 <style lang="scss">
 @import './styles/style';
+@import './assets/fonts/font.css';
 </style>

src/assets/fonts/font.css

@@ -0,0 +1,15 @@
+@font-face {
+    font-family: 'JinBuTi';
+    /* 自定义字体名称 */
+    src: url('./DingTalk JinBuTi.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Sans';
+    /* 自定义字体名称 */
+    src: url('./DingTalk Sans.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

src/components/baseBg.vue

@@ -3,55 +3,7 @@
   <div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
     <div class="chart-content">
       <div class="top">
-        <slot v-if="$slots.top" name="top"></slot>
-        <!--: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">
-            <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="title txt-ellipsis clamp1">{{ '农业产业政务云平台' }}</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>
+        <custom-scroll-title :titles="titles" @change-title="handleChangeTitle" />
       </div>
       <div class="content">
         <slot name="center"></slot>
@@ -60,10 +12,9 @@
   </div>
 </template>
 <script setup>
-import { isEmpty, getAssetsFile } from '@/utils';
-import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
+import { getAssetsFile } from '@/utils';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { useApp } from '@/hooks';
 const router = useRouter();
 const props = defineProps({
   nameVal: {
@@ -76,34 +27,19 @@ const props = defineProps({
   },
 });
 
-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' },
+const titles = ref([
+  { label: '首页', value: 'home' },
+  { label: '土地资源', value: 'land' },
+  { label: '投入品', value: 'inputs' },
+  { label: '生产经营主体', value: 'entities' },
+  // { label: '智慧种植监测', value: 'plant' },
+  // { label: '智慧养殖监测', value: 'breed' },
+  { label: '全流程溯源', value: 'trace' },
+  { label: '产业预警决策', value: 'early' },
 ]);
-
-let currentName = ref('home');
-
-watch(
-  () => props.nameVal,
-  () => {
-    currentName.value = props.nameVal;
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
-
-const itemAct = (name) => {
-  currentName.value = name;
+function handleChangeTitle(name) {
   router.push({ name: name });
-};
+}
 </script>
 <style lang="scss" scoped>
 div {
@@ -121,7 +57,6 @@ div {
     position: absolute;
     left: 0;
     top: 0;
-    .top,
     .content,
     .bottom {
       width: 100%;
@@ -132,7 +67,7 @@ div {
       justify-content: center;
     }
     .top {
-      height: 55px;
+      height: 60px;
       .top-content-warp {
         width: 100%;
         height: 100%;
@@ -260,7 +195,7 @@ div {
       }
     }
     .content {
-      height: calc(100% - 60px);
+      height: calc(100% - 70px);
     }
   }
 }

src/components/custom-scroll-title/index.vue

@@ -1,7 +1,9 @@
 <template>
   <section class="header_title" :style="{ '--titleContentW': titleContentW + 'px', '--itemW': itemW + 'px', '--gap': gap + 'px' }">
-    <el-button icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)"></el-button>
-    <el-button icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"></el-button>
+    <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)">
+      <ArrowLeftBold />
+    </el-icon>
+    <el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"><ArrowRightBold /></el-icon>
     <section class="left_titles_container">
       <section class="title_content" :style="{ left: `-${position}px` }">
         <section
@@ -14,6 +16,7 @@
         </section>
       </section>
     </section>
+    <section class="sys_name">政务云数字农业智慧大屏</section>
     <section class="right_titles_container">
       <section class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
         <section
@@ -78,6 +81,7 @@ watch(
   () => props.titles,
   (val) => {
     if (val && val.length) {
+      activeTitle.value = val[0].value;
       let l = val.length;
       if (l > 6) {
         leftTitles.value = val.slice(0, l - 3);
@@ -130,17 +134,27 @@ function handleTitleClick(val) {
   display: flex;
   justify-content: space-between;
   width: 100vw;
-  height: 60px;
-  //   background: url('./headerBG.png') no-repeat center/cover;
-  background-color: skyblue;
+  height: 100%;
+  background: url('../../assets/images/basic/headerBG.png') no-repeat;
+  background-size: 100% 100%;
+  .sys_name {
+    padding-bottom: 8px;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: #fff;
+    font-family: 'JinBuTi';
+  }
   .left_btn,
   .right_btn {
     position: absolute;
-    top: 15px;
+    top: 25px;
     padding: 6px 6px;
     width: 30px;
     height: 30px;
-    background-color: rgb(39, 172, 255);
+    background-color: rgb(6, 155, 118, 0.5);
     border-radius: 8px;
     cursor: pointer;
     z-index: 1;
@@ -158,8 +172,9 @@ function handleTitleClick(val) {
   .right_titles_container {
     position: relative;
     width: 30%;
-    height: 60px;
+    height: 100%;
     overflow: hidden;
+    line-height: 60px;
     .title_content {
       position: absolute;
       top: 10px;
@@ -168,10 +183,10 @@ function handleTitleClick(val) {
       transition: all 0.4s ease;
       font-size: 20px;
       font-weight: bold;
-      color: #f5f5f5;
       .active {
         color: #fff;
-        text-shadow: 1px 1px 2px red;
+        opacity: 1 !important;
+        text-shadow: 0px 4px 10px #fff;
       }
       .title_item {
         margin-right: var(--gap);
@@ -180,12 +195,23 @@ function handleTitleClick(val) {
         height: 40px;
         line-height: 40px;
         text-align: center;
-        // background: url('./titleBG.png') no-repeat center/cover;
-        background-color: aquamarine;
+        color: #f5fffe;
         cursor: pointer;
         user-select: none;
+        background-size: 100% 100%;
+        opacity: 0.6;
       }
     }
   }
+  .left_titles_container {
+    .title_item {
+      background: url('../../assets/images/basic/leftTitleBG.png') no-repeat;
+    }
+  }
+  .right_titles_container {
+    .title_item {
+      background: url('../../assets/images/basic/rightTitleBG.png') no-repeat;
+    }
+  }
 }
 </style>