From f16acb06ab278cdcb1d39a29680634010638326d Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 08 五月 2024 17:35:48 +0800
Subject: [PATCH] 1. 完成表格模块的功能迁移； 2. 完成表格、折线图、地图标记三者点击联动
---
src/components/core/CoreMenu.vue | 65 ++++++++++++++++++++++++++++++--
1 files changed, 61 insertions(+), 4 deletions(-)
diff --git a/src/components/core/CoreMenu.vue b/src/components/core/CoreMenu.vue
index f11b751..a88e8cc 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 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>
@@ -69,7 +72,9 @@
computed: {},
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;
@@ -82,4 +87,56 @@
}
};
</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