From 1534aee0339dee8000cdd26c21797cf3ad391f7a Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 06 五月 2024 17:33:23 +0800
Subject: [PATCH] 新增折线图模块功能
---
src/components/core/CoreMenu.vue | 63 ++++++++++++++++++++++++++++++-
1 files changed, 60 insertions(+), 3 deletions(-)
diff --git a/src/components/core/CoreMenu.vue b/src/components/core/CoreMenu.vue
index f11b751..920f38f 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">
+ <div class="map-mode-change p-events-auto">
<template v-for="(item, index) in menu" :key="index">
<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