This commit is contained in:
duanxiaohai
parent
2f55dfc192
commit
1781db47c1
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue