Merge branch 'main' of git.zdool.com:xs/ggfwjsc

2024-07-23 16:01:38 +08:00 · 2024-07-23 16:01:38 +08:00 · f8b75b05b1
parent d1b9e2fd6a fe7a9adcf4
commit f8b75b05b1
4 changed files with 128 additions and 105 deletions
--- a/src/assets/guide/tab7.png
+++ b/src/assets/guide/tab7.png
--- a/src/assets/guide/tab8.png
+++ b/src/assets/guide/tab8.png
--- a/src/components/header.vue
+++ b/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>
+      <div id="clock" style="margin-top: 4px">加载中...</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)"
-          :key="item.name">
+        <div
+          :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)"
-          :key="item.name">
+        <div
+          :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="leftLineClass">
+    <img src="../assets/RightLine.gif" class="rightLineClass" />
+    <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: "主页",
-      url: '/home/index',
+      name: "要素一张图",
+      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,12 +236,12 @@ onMounted(() => {
    }
  }

-  .rightLineClass{
+  .rightLineClass {
    position: absolute;
    right: -70px;
    bottom: -50px;
  }
-  .leftLineClass{
+  .leftLineClass {
    position: absolute;
    transform: scaleX(-1);
    left: -70px;
--- a/src/view/guide.vue
+++ b/src/view/guide.vue
@ -1,11 +1,6 @@
 <template>
  <!-- mousedown事件放在页面最外层，确保鼠标在页面任意点按下都会旋转照片墙 -->
-  <div
-    id="m"
-    class="page"
-    ref="draggable"
-    @mousedown="startDrag"
-  >
+  <div 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="{ transform: `rotateY(${60 * indexP}deg) translateZ(400px)` }"
+              style="transition: transform 1s ease 0.5s"
+              :style="{
+                transform: `rotateY(${80 * indexP}deg) translateZ(450px)`,
+              }"
              @click="toPage(itemP.url)"
            >
              <div class="animate-border">
                <i></i>
                <i></i>
              </div>
-              <img
-                :src="itemP.img"
-                alt=""
-              >
+              <img :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
-              :src="item.img"
-              alt=""
-            >
+            <img :src="item.img" alt="" />
          </div>
-          <div
-            class="tabGif"
-            v-if="tabData.tabNum == index"
-          ></div>
+          <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 rotateY = ref(0)  // 参考系偏转角度，动态赋值
-const rotateX = ref(0)
-const startX = ref(0)  // 鼠标按下时开始的坐标
-const startY = ref(0)
-let dragging = false;  // 是否监听鼠标移动
+const transTime = ref(0); // 参考系动画时长
+const rotateY = ref(0); // 参考系偏转角度，动态赋值
+const rotateX = ref(0);
+const startX = ref(0); // 鼠标按下时开始的坐标
+const startY = ref(0);
+let dragging = false; // 是否监听鼠标移动

 // 鼠标按下时触发
 const startDrag = (event) => {
-  dragging = true;  // 开始偏转
+  dragging = true; // 开始偏转
  startX.value = event.clientX; //记录按下时的坐标
  startY.value = event.clientY;
-  document.addEventListener('mousemove', doDrag); // 开始监听鼠标移动和鼠标放开事件
-  document.addEventListener('mouseup', stopDrag);
-
+  document.addEventListener("mousemove", doDrag); // 开始监听鼠标移动和鼠标放开事件
+  document.addEventListener("mouseup", stopDrag);
 };

 // 鼠标移动事件
@ -116,16 +107,16 @@ const doDrag = (event) => {
    startX.value = event.clientX;
    startY.value = event.clientY;
    // 偏转角度赋值
-    rotateX.value += dx
-    rotateY.value += dy
+    rotateX.value += dx;
+    rotateY.value += dy;
  }
 };

 // 鼠标放开事件
 const stopDrag = () => {
  dragging = false; // 不可改变偏转角度
-  document.removeEventListener('mousemove', doDrag);  // 销毁监听器
-  document.removeEventListener('mouseup', stopDrag);
+  document.removeEventListener("mousemove", doDrag); // 销毁监听器
+  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,
-      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/index/map",
    },
    {
      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
-  tabData.tabNum = val
-  rotateY.value = 360 - (60 * val)
-  rotateX.value = 0
+  console.log(val);
+  transTime.value = 0.8;
+  tabData.tabNum = val;
+  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;