xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
姚宇浩 2024-07-23 16:01:38 +08:00
parent d1b9e2fd6a fe7a9adcf4
commit f8b75b05b1
4 changed files with 128 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/guide/tab7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/guide/tab8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

66
src/components/header.vue
View File

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

161
src/view/guide.vue
View File

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