This commit is contained in:
姚宇浩 2024-08-02 10:57:40 +08:00
commit ab4c144919
6 changed files with 131 additions and 31 deletions

BIN
dist.zip

Binary file not shown.

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="headerGo" @click="to('/guide')"></div>
<!-- <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>
<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, 4)"
v-for="item in data.urlLeft.slice(0, 2)"
:key="item.name"
>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
@ -25,13 +24,31 @@
<div class="header-menu-item header-menu-right">
<div
: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"
>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
</div>
</div>
</div>
<div class="cd">
<img
class="title"
src="../assets/cd.png"
alt=""
@click="data.menushow = !data.menushow"
/>
<div class="menuBox" v-if="data.menushow">
<div
v-for="item in data.urlLeft1"
class="menuTitle"
:class="item.zt ? 'menuTitle1' : ''"
@click="onMenu(item)"
>
{{ item.name }}
</div>
</div>
</div>
<img src="../assets/RightLine.gif" class="rightLineClass" />
<img src="../assets/RightLine.gif" class="leftLineClass" />
</div>
@ -61,9 +78,9 @@ 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({
@ -71,10 +88,46 @@ const to = (url) => {
});
data.nowTab = url;
};
const onMenu = (val) => {
console.log(val);
data.urlLeft1.forEach((parent, index) => {
parent.zt = false;
if (parent.name === val.name) {
parent.zt = !parent.zt;
}
});
router.push({
path: `${val.url}`,
});
data.menushow = false;
};
const router = useRouter();
const routers = useRoute();
let menuIf = ref(true);
const data = reactive({
menushow: false,
urlLeft1: [
{
name: "养老",
url: "/home/yl",
zt: true,
},
{
name: "卫生",
url: "/home/hygiene",
zt: false,
},
{
name: "教育",
url: "/home/education",
zt: false,
},
{
name: "救助",
url: "/home/work",
zt: false,
},
],
urlLeft: [
{
name: "评估模型",
@ -88,22 +141,22 @@ const data = reactive({
name: "总体概览",
url: "/home/index",
},
{
name: "养老",
url: "/home/yl",
},
{
name: "卫生",
url: "/home/hygiene",
},
{
name: "教育",
url: "/home/education",
},
{
name: "救助",
url: "/home/work",
},
// {
// name: "",
// url: "/home/yl",
// },
// {
// name: "",
// url: "/home/hygiene",
// },
// {
// name: "",
// url: "/home/education",
// },
// {
// name: "",
// url: "/home/work",
// },
{
name: "智能分析",
url: "/home/analyze",
@ -149,6 +202,54 @@ onMounted(() => {
width: 146px;
height: 55px;
}
.cd {
position: absolute;
right: 50px;
top: 35px;
cursor: pointer;
img {
width: 22px;
height: 22px;
}
.menuBox {
position: absolute;
right: 0px;
top: 25px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #ffffff;
width: 120px;
height: 184px;
background: rgba(8, 65, 131, 0.18);
box-shadow: inset 0px 0px 26px 0px rgba(181, 216, 255, 0.63);
border-radius: 4px;
border: 1px solid rgba(3, 136, 255, 0.34);
// opacity: 0; /* */
// transition: opacity 0.3s ease-in-out; /* */
// .menuBox.show {
// opacity: 1; /* */
// }
.menuTitle {
width: 100%;
height: 25%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.menuTitle1 {
width: 100%;
height: 25%;
display: flex;
justify-content: center;
text-align: center;
background: rgba(20, 130, 242, 0.29);
box-shadow: inset 0px 0px 23px 0px #3e9dff;
filter: blur(0px);
}
}
}
.time {
width: 200px;
@ -199,11 +300,11 @@ onMounted(() => {
}
&-left {
left: 2%;
left: 10%;
}
&-right {
right: 2%;
right: 10%;
}
.leftItem {

View File

@ -1,6 +1,6 @@
<template>
<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 class="digital front number0"></div>
<div class="digital back number1"></div>

View File

@ -1812,7 +1812,7 @@ const addggfwq = () => {
data.fwqCoordinates2.push(item.point[1]);
createCustomOverlay(item, index);
});
console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2);
// console.log("", data.fwqCoordinates1, data.fwqCoordinates2);
function calculateAverage(coordinates) {
// const numericCoordinates = coordinates.map(Number); //
const numericCoordinates = coordinates.map((coord) => {
@ -1825,7 +1825,6 @@ const addggfwq = () => {
return parseFloat(average.toFixed(5)); // 5
}
data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
drawACircle();
} else {

View File

@ -173,7 +173,7 @@ const router = useRouter();
const routers = useRoute();
//
const goto = (url, val) => {
console.log(val);
// console.log(val);
if (val.name == "最低生活保障") {
router.push({
path: `${url}`,