gx

src/components/header.vue

@@ -1,27 +1,33 @@
 <template>
   <div class="header">
     <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
-    <div class="time">
+    <!-- <div class="time">
       <div id="date-display"></div>
-      <div id="clock" style="margin-top: 4px;">加载中...</div>
+      <div id="clock" style="margin-top: 4px">加载中...</div>
-    </div>
+    </div> -->
 
     <div class="header-menu">
       <div class="header-menu-item header-menu-left">
-        <div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 3)"
+        <div
-          :key="item.name">
+          :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'"
+          v-for="item in data.urlLeft.slice(0, 4)"
+          :key="item.name"
+        >
           <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
         </div>
       </div>
       <div class="header-menu-item header-menu-right">
-        <div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(3, 6)"
+        <div
-          :key="item.name">
+          :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'"
+          v-for="item in data.urlLeft.slice(4, 8)"
+          :key="item.name"
+        >
           <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
         </div>
       </div>
     </div>
-     <img src="../assets/RightLine.gif" class="rightLineClass">
+    <img src="../assets/RightLine.gif" class="rightLineClass" />
-     <img src="../assets/RightLine.gif" class="leftLineClass">
+    <img src="../assets/RightLine.gif" class="leftLineClass" />
   </div>
 </template>
 
@@ -47,44 +53,52 @@ const updateClock = () => {
   const formattedDate = year + "/" + month + "/" + day;
 
   // 更新页面上的时钟显示
-  document.getElementById("clock").textContent = timeString;
+  // document.getElementById("clock").textContent = timeString;
   // 将格式化后的日期更新到 div 中
-  document.getElementById("date-display").innerText = formattedDate;
+  // document.getElementById("date-display").innerText = formattedDate;
 };
 const to = (url) => {
   router.push({
     path: `${url}`,
   });
-  data.nowTab = url
+  data.nowTab = url;
-}
+};
 const router = useRouter();
 const routers = useRoute();
 let menuIf = ref(true);
 const data = reactive({
   urlLeft: [
     {
-      name: "主页",
+      name: "要素一张图",
-      url: '/home/index',
+      url: "/home/index/map",
+    },
+    {
+      name: "指标模型模块",
+      url: "/home/index/table",
+    },
+    {
+      name: "总体概览",
+      url: "/home/index",
     },
     {
       name: "养老",
-      url: '/home/yl',
+      url: "/home/yl",
     },
     {
       name: "卫生",
-      url: '/home/hygiene',
+      url: "/home/hygiene",
     },
     {
       name: "教育",
-      url: '/home/education',
+      url: "/home/education",
     },
     {
       name: "救助",
-      url: '/home/work',
+      url: "/home/work",
     },
     {
       name: "智能分析",
-      url: '/home/analyze',
+      url: "/home/analyze",
     },
   ],
   nowTab: "/home/index",
@@ -94,13 +108,13 @@ onMounted(() => {
   // 初始调用 updateClock 以立即显示时间
   updateClock();
 
-  data.nowTab = router.currentRoute.value.fullPath
+  data.nowTab = router.currentRoute.value.fullPath;
 
   // 每隔一秒钟调用一次 updateClock 以更新时钟显示
   setInterval(updateClock, 1000);
 });
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .header {
   background-image: url(../assets/headerBg.png);
   background-size: 100% 100%;
@@ -168,11 +182,11 @@ onMounted(() => {
     }
 
     &-left {
-      left: 8%;
+      left: 2%;
     }
 
     &-right {
-      right: 8%;
+      right: 2%;
     }
 
     .leftItem {
@@ -222,16 +236,16 @@ onMounted(() => {
     }
   }
 
-  .rightLineClass{
+  .rightLineClass {
     position: absolute;
     right: -70px;
     bottom: -50px;
   }
-  .leftLineClass{
+  .leftLineClass {
     position: absolute;
     transform: scaleX(-1);
     left: -70px;
     bottom: -50px;
   }
 }
-</style>
+</style>

src/view/guide.vue

@@ -1,11 +1,6 @@
 <template>
   <!-- mousedown事件放在页面最外层，确保鼠标在页面任意点按下都会旋转照片墙 -->
-  <div
+  <div id="m" class="page" ref="draggable" @mousedown="startDrag">
-    id="m"
-    class="page"
-    ref="draggable"
-    @mousedown="startDrag"
-  >
     <div id="container">
       <div class="header">
         <div class="rightLineClass"></div>
@@ -20,25 +15,27 @@
           <!-- 旋转ring的dom元素实现整个照片墙的偏转 -->
           <div
             class="ring"
-            :style="{ transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,transition: `transform ${transTime}s ease 0s` }"
+            :style="{
+              transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
+              transition: `transform ${transTime}s ease 0s`,
+            }"
           >
             <!-- 照片墙的图片，使用transform实现立体的环形照片墙 -->
             <!-- translateZ属性控制每一面的距离，也会把image-wall等比例放大 -->
             <div
-              v-for="(itemP,indexP) in tabData.scenList"
+              v-for="(itemP, indexP) in tabData.scenList"
               class="image-wall"
-              style="transition: transform 1s ease 0.5s;"
+              style="transition: transform 1s ease 0.5s"
-              :style="{ transform: `rotateY(${60 * indexP}deg) translateZ(400px)` }"
+              :style="{
+                transform: `rotateY(${80 * indexP}deg) translateZ(450px)`,
+              }"
               @click="toPage(itemP.url)"
             >
               <div class="animate-border">
                 <i></i>
                 <i></i>
               </div>
-              <img
+              <img :src="itemP.img" alt="" />
-                :src="itemP.img"
-                alt=""
-              >
             </div>
           </div>
         </div>
@@ -46,31 +43,23 @@
       <div class="foot">
         <div
           class="fItems"
-          v-for="(item,index) in tabData.tabList"
+          v-for="(item, index) in tabData.tabList"
           @click="changeTab(index)"
         >
           <div :class="tabData.tabNum == index ? 'fiTopC' : 'fiTop'">
-            <img
+            <img :src="item.img" alt="" />
-              :src="item.img"
-              alt=""
-            >
           </div>
-          <div
+          <div class="tabGif" v-if="tabData.tabNum == index"></div>
-            class="tabGif"
-            v-if="tabData.tabNum == index"
-          ></div>
           <div :class="tabData.tabNum == index ? 'fiCenC' : 'fiCen'"></div>
-          <div class="fiText"> {{ item.name }} </div>
+          <div class="fiText">{{ item.name }}</div>
         </div>
       </div>
     </div>
-
   </div>
-
 </template>
- 
+
 <script setup>
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import { ref, onMounted, onUnmounted, reactive } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import tab1 from "@/assets/guide/tab1.png";
 import tab2 from "@/assets/guide/tab2.png";
@@ -78,6 +67,9 @@ import tab3 from "@/assets/guide/tab3.png";
 import tab4 from "@/assets/guide/tab4.png";
 import tab5 from "@/assets/guide/tab5.png";
 import tab6 from "@/assets/guide/tab6.png";
+import tab7 from "@/assets/guide/tab7.png";
+import tab8 from "@/assets/guide/tab8.png";
+
 import png1 from "@/assets/guide/Dp/1.png";
 import png2 from "@/assets/guide/Dp/2.png";
 import png3 from "@/assets/guide/Dp/3.png";
@@ -88,21 +80,20 @@ const router = useRouter();
 const routers = useRoute();
 
 const draggable = ref(null);
-const transTime = ref(0) // 参考系动画时长
+const transTime = ref(0); // 参考系动画时长
-const rotateY = ref(0)  // 参考系偏转角度，动态赋值
+const rotateY = ref(0); // 参考系偏转角度，动态赋值
-const rotateX = ref(0)
+const rotateX = ref(0);
-const startX = ref(0)  // 鼠标按下时开始的坐标
+const startX = ref(0); // 鼠标按下时开始的坐标
-const startY = ref(0)
+const startY = ref(0);
-let dragging = false;  // 是否监听鼠标移动
+let dragging = false; // 是否监听鼠标移动
 
 // 鼠标按下时触发
 const startDrag = (event) => {
-  dragging = true;  // 开始偏转
+  dragging = true; // 开始偏转
   startX.value = event.clientX; //记录按下时的坐标
   startY.value = event.clientY;
-  document.addEventListener('mousemove', doDrag); // 开始监听鼠标移动和鼠标放开事件
+  document.addEventListener("mousemove", doDrag); // 开始监听鼠标移动和鼠标放开事件
-  document.addEventListener('mouseup', stopDrag);
+  document.addEventListener("mouseup", stopDrag);
-
 };
 
 // 鼠标移动事件
@@ -116,16 +107,16 @@ const doDrag = (event) => {
     startX.value = event.clientX;
     startY.value = event.clientY;
     // 偏转角度赋值
-    rotateX.value += dx
+    rotateX.value += dx;
-    rotateY.value += dy
+    rotateY.value += dy;
   }
 };
 
 // 鼠标放开事件
 const stopDrag = () => {
   dragging = false; // 不可改变偏转角度
-  document.removeEventListener('mousemove', doDrag);  // 销毁监听器
+  document.removeEventListener("mousemove", doDrag); // 销毁监听器
-  document.removeEventListener('mouseup', stopDrag);
+  document.removeEventListener("mouseup", stopDrag);
 };
 
 onUnmounted(() => {
@@ -154,76 +145,94 @@ const tabData = reactive({
   tabNum: 0,
   tabList: [
     {
-      name: '概况',
+      name: "要素一张图",
+      img: tab7,
+    },
+    {
+      name: "指标模型模块",
+      img: tab8,
+    },
+    {
+      name: "总体概况",
       img: tab1,
     },
     {
-      name: '养老体系',
+      name: "养老体系",
       img: tab2,
     },
     {
-      name: '卫生体系',
+      name: "卫生体系",
       img: tab3,
     },
     {
-      name: '教育体系',
+      name: "教育体系",
       img: tab4,
     },
     {
-      name: '救助体系',
+      name: "救助体系",
       img: tab5,
     },
     {
-      name: '智能分析',
+      name: "智能分析",
       img: tab6,
     },
   ],
   scenList: [
     {
-      img: png1,
+      img: png6,
-      url: '/home/index',
+      url: "/home/index/map",
-    },
-    {
-      img: png2,
-      url: '/home/yl',
-    },
-    {
-      img: png3,
-      url: '/home/hygiene',
-    },
-    {
-      img: png4,
-      url: '/home/education',
-    },
-    {
-      img: png5,
-      url: '/home/work',
     },
     {
       img: png6,
-      url: '/home/analyze',
+      url: "/home/index/table",
     },
-  ]
+    {
-})
+      img: png1,
+      url: "/home/index",
+    },
+    {
+      img: png2,
+      url: "/home/yl",
+    },
+    {
+      img: png3,
+      url: "/home/hygiene",
+    },
+    {
+      img: png4,
+      url: "/home/education",
+    },
+    {
+      img: png5,
+      url: "/home/work",
+    },
+    {
+      img: png6,
+      url: "/home/analyze",
+    },
+  ],
+});
 
 const changeTab = (val) => {
-  transTime.value = 0.8
+  console.log(val);
-  tabData.tabNum = val
+  transTime.value = 0.8;
-  rotateY.value = 360 - (60 * val)
+  tabData.tabNum = val;
-  rotateX.value = 0
+  rotateY.value = 360 - 40 * val;
+  rotateX.value = 0;
   setTimeout(() => {
-    transTime.value = 0
+    transTime.value = 0;
   }, 800);
-}
+};
 
 const toPage = (val) => {
+  console.log(val);
   router.push({
     path: `${val}`,
   });
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .page {
   /* 所有元素不可选中，避免影响mousemove的监听 */
   user-select: none;
@@ -563,4 +572,4 @@ body {
     }
   }
 }
-</style>
+</style>