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

This commit is contained in:
姚宇浩 2024-07-23 16:01:38 +08:00
commit f8b75b05b1
4 changed files with 128 additions and 105 deletions

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -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 {

View File

@ -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"
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>
@ -50,27 +47,19 @@
@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>
</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,11 +80,11 @@ 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)
const transTime = ref(0); //
const rotateY = ref(0); //
const rotateX = ref(0);
const startX = ref(0); //
const startY = ref(0);
let dragging = false; //
//
@ -100,9 +92,8 @@ const startDrag = (event) => {
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;