From 42f42dc88214f283b43c422f37e10ab45c5c5578 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 12 三月 2025 17:32:13 +0800
Subject: [PATCH] 1. 新增绘图模式的切换 2. 新增行政区划的切换展示
---
src/components/core/CoreMenu.vue | 87 ++++++++++++++++++++++++++++++++++++++++---
1 files changed, 80 insertions(+), 7 deletions(-)
diff --git a/src/components/core/CoreMenu.vue b/src/components/core/CoreMenu.vue
index f11b751..8dd635c 100644
--- a/src/components/core/CoreMenu.vue
+++ b/src/components/core/CoreMenu.vue
@@ -1,9 +1,12 @@
<template>
- <div class="map-mode-change flexbox flex-space-between fy-container">
- <template v-for="(item, index) in menu" :key="index">
+ <div v-show="status == 0" class="map-mode-change p-events-auto">
+ <template v-for="(item, index) in menu" :key="item.path">
<a :class="btnClz(item.selected)" @click="navTo(index)">
<div>{{ item.name }}</div>
</a>
+ <!-- <a class="btn-selected mode-btn m-r-8" @click="navTo(index)">
+ <div>{{ item.name }}</div>
+ </a> -->
</template>
<!-- <a class="mode-btn btn-selected">
<div>姹℃煋婧簮</div>
@@ -38,6 +41,9 @@
</template>
<script>
+import { mapState } from 'pinia';
+import { useMapAnimationStore } from '@/stores/map-animation';
+
export default {
data() {
return {
@@ -52,9 +58,17 @@
path: 'rmode'
},
{
- name: '缃戞牸鍖栫洃娴�',
- path: 'gridmonitor'
+ name: '璧拌埅铻嶅悎',
+ path: 'underwaymix'
}
+ // {
+ // name: '姹℃煋婧簮2',
+ // path: 'hmode2'
+ // }
+ // {
+ // name: '缃戞牸鍖栫洃娴�',
+ // path: 'gridmonitor'
+ // }
// {
// name: '鐢ㄧ數閲忕洃娴�',
// path: 'emode'
@@ -66,10 +80,14 @@
]
};
},
- computed: {},
+ computed: {
+ ...mapState(useMapAnimationStore, ['status'])
+ },
methods: {
btnClz(selected) {
- return 'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8';
+ return (
+ 'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8'
+ );
},
navTo(index) {
const m = this.menu;
@@ -79,7 +97,62 @@
m[index].selected = true;
this.$router.push(m[index].path);
}
+ },
+ mounted() {
+ this.navTo(0);
}
};
</script>
-<style scoped></style>
+<style scoped>
+.map-mode-change {
+ display: inline-flex;
+ position: relative;
+ /* left: 10px; */
+ /* top: 104px; */
+ padding: 0 10px;
+ font-size: 1rem;
+ font-weight: 900;
+ /* background-color: #ffffffad; */
+}
+
+.map-mode-change a:hover {
+ color: antiquewhite;
+}
+
+.mode-btn {
+ white-space: nowrap;
+ background-color: green;
+}
+
+.map-mode-change .btn-selected {
+ color: #ffffff;
+ padding: 4px 16px;
+ cursor: pointer;
+ border: 2px solid var(--border-color);
+ background-color: #23dad1;
+ transform: skew(-30deg);
+ text-decoration: none;
+ /* -moz-border-radius: 6px; Old Firefox */
+ /* box-shadow: 5px 0px 2.5px #888888; */
+}
+
+.map-mode-change .btn-selected div {
+ transform: skew(30deg);
+}
+
+.map-mode-change .btn-unselected {
+ color: #5555557e;
+ padding: 4px 16px;
+ cursor: pointer;
+ background-color: #ffffff;
+ border: 2px solid #00000015;
+ transform: skew(-30deg);
+ text-decoration: none;
+ /* -moz-border-radius: 6px; Old Firefox */
+ /* box-shadow: 5px 0px 2.5px #888888; */
+}
+
+.map-mode-change .btn-unselected div {
+ transform: skew(30deg);
+}
+</style>
--
Gitblit v1.9.3