This commit is contained in:
duanxiaohai 2024-08-01 15:15:43 +08:00
parent c020728959
commit 7b8d062bd8
3 changed files with 40 additions and 29 deletions

BIN
src/assets/cd.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 543 B

View File

@ -7,16 +7,15 @@
<div class="header"> <div class="header">
<div class="headerGo" @click="to('/guide')"></div> <div class="headerGo" @click="to('/guide')"></div>
<!-- <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 <div
:class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'"
v-for="item in data.urlLeft.slice(0, 4)" v-for="item in data.urlLeft.slice(0, 2)"
:key="item.name" :key="item.name"
> >
<div class="itemText" @click="to(item.url)">{{ item.name }}</div> <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
@ -25,13 +24,16 @@
<div class="header-menu-item header-menu-right"> <div class="header-menu-item header-menu-right">
<div <div
:class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'"
v-for="item in data.urlLeft.slice(4, 8)" v-for="item in data.urlLeft.slice(2, 4)"
:key="item.name" :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>
<div class="cd">
<img class="title" src="../assets/cd.png" alt="" />
</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>
@ -61,9 +63,9 @@ 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({
@ -88,22 +90,22 @@ const data = reactive({
name: "总体概览", name: "总体概览",
url: "/home/index", 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",
@ -149,7 +151,16 @@ onMounted(() => {
width: 146px; width: 146px;
height: 55px; height: 55px;
} }
.cd {
position: absolute;
right: 50px;
top: 38px;
cursor: pointer;
img {
width: 22px;
height: 22px;
}
}
.time { .time {
width: 200px; width: 200px;
height: 70%; height: 70%;
@ -199,11 +210,11 @@ onMounted(() => {
} }
&-left { &-left {
left: 2%; left: 10%;
} }
&-right { &-right {
right: 2%; right: 10%;
} }
.leftItem { .leftItem {

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="flipbox"> <div class="flipbox">
<div class="clock" id="clock"> <div class="clock" id="clocks">
<div v-for="(digit, index) in data.digits" :key="index" class="flip down"> <div v-for="(digit, index) in data.digits" :key="index" class="flip down">
<div class="digital front number0"></div> <div class="digital front number0"></div>
<div class="digital back number1"></div> <div class="digital back number1"></div>