diff --git a/dist.zip b/dist.zip index 3daf3be..914a332 100644 Binary files a/dist.zip and b/dist.zip differ diff --git a/src/assets/cd.png b/src/assets/cd.png new file mode 100644 index 0000000..7dc23b4 Binary files /dev/null and b/src/assets/cd.png differ diff --git a/src/components/header.vue b/src/components/header.vue index e53d51c..c3f45511 100644 --- a/src/components/header.vue +++ b/src/components/header.vue @@ -7,16 +7,15 @@
- - +
+
+
加载中...
+
{{ item.name }}
@@ -25,13 +24,31 @@
{{ item.name }}
+
+ + +
@@ -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 { diff --git a/src/view/echart_analyze/FlipClock.vue b/src/view/echart_analyze/FlipClock.vue index 9aa7e16..b6c57c7 100644 --- a/src/view/echart_analyze/FlipClock.vue +++ b/src/view/echart_analyze/FlipClock.vue @@ -1,6 +1,6 @@