update lunbo

src/components/NavMenu.vue

@@ -5,7 +5,7 @@ import IconAlert from "../assets/menu_icon/IconAlert.vue";
 import IconChart from "../assets/menu_icon/IconChart.vue";
 import IconRealtime from "../assets/menu_icon/IconRealtime.vue";
 import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue";
-
+const props = defineProps(['value'])
 const emit = defineEmits(["change"]);
 const handleClick = (page) => {
   emit("change", page);
@@ -17,27 +17,32 @@ const handleClick = (page) => {
     <ul class="flex-list">
       <li>
         <button type="button" @click="(e) => handleClick('3d')">
-          <span style="">三维界面</span><Icon3D class="nav-icon" />
+          <span :style="{color: value == '3d' ? '#b1daff': '#339dff' }">三维界面</span>
+          <Icon3D class="nav-icon" :color="value == '3d' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('data')">
-          <span style="">数据界面</span><IconChart class="nav-icon" />
+          <span :style="{color: value == 'data' ? '#b1daff': '#339dff' }">数据界面</span>
+          <IconChart class="nav-icon" :color="value == 'data' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('realtime')">
-          <span style="">实时数据</span><IconRealtime class="nav-icon" />
+          <span :style="{color: value == 'realtime' ? '#b1daff': '#339dff' }">实时数据</span>
+          <IconRealtime class="nav-icon" :color="value == 'realtime' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('alert')">
-          <span style="">报警列表</span><IconAlert class="nav-icon" />
+          <span :style="{color: value == 'alert' ? '#b1daff': '#339dff' }">报警列表</span>
+          <IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('announcement')">
-          <span style="">公告页面</span><IconAnnounce class="nav-icon" />
+          <span style="">公告页面</span>
+          <IconAnnounce class="nav-icon" />
         </button>
       </li>
     </ul>
@@ -54,6 +59,7 @@ const handleClick = (page) => {
   position: relative;
   top: 72px;
   left: 0;
+  z-index: 10;
 }
 
 .flex-list {
@@ -84,7 +90,7 @@ li {
   gap: 8px;
 }
 
-.nav-menu button > span {
+.nav-menu button>span {
   font-size: 32px;
   letter-spacing: 3px;
   line-height: 45px;
@@ -92,18 +98,18 @@ li {
   text-shadow: 0 5px 1px #001124;
   /* text-shadow: 0 5px 1px #004969; */
 }
-.nav-menu button:hover > span {
-  color: #b1daff;
+
+.nav-menu button:hover>span {
+  color: #b1daff !important;
 }
 </style>
 
 <style>
-.nav-menu button:hover > .nav-icon #icon3d-g,
-.nav-menu button:hover > .nav-icon #alert-rect,
-.nav-menu button:hover > .nav-icon #alert-dot,
-.nav-menu button:hover > .nav-icon #realtime-main,
-.nav-menu button:hover > .nav-icon #announce-main,
-.nav-menu button:hover > .nav-icon #chart-main {
+.nav-menu button:hover>.nav-icon #icon3d-g,
+.nav-menu button:hover>.nav-icon #alert-rect,
+.nav-menu button:hover>.nav-icon #alert-dot,
+.nav-menu button:hover>.nav-icon #realtime-main,
+.nav-menu button:hover>.nav-icon #announce-main,
+.nav-menu button:hover>.nav-icon #chart-main {
   fill: #b1daff !important;
-}
-</style>
+}</style>

src/components/Tools.vue

@@ -3,25 +3,36 @@ import { ref, watch, onMounted } from "vue";
 import IconBack from "../assets/menu_icon/IconBack.vue";
 import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
-
 import SettingDialogVue from "./SettingDialog.vue";
+import { useSettings } from '../store/settings';
+
+const { settings } = useSettings();
 
 const visible = ref(false);
 function toHome() {
   document.location.href = '/1-1'
 }
-function showDialog(){
+function showDialog() {
   visible.value = true;
 }
+function toggleLunbo() {
+  settings.carousel = !settings.carousel;
+}
 </script>
 
 <template>
   <div class="tools">
-    <button @click="toHome"><IconBack /></button>
-    <button @click="showDialog"><IconSetting /></button>
-    <button><IconExchange /></button>
+    <button @click="toHome">
+      <IconBack />
+    </button>
+    <button @click="showDialog">
+      <IconSetting />
+    </button>
+    <button @click="toggleLunbo">
+      <IconExchange />
+    </button>
   </div>
-  <SettingDialogVue v-if="visible" @close="visible = false;"/>
+  <SettingDialogVue v-if="visible" @close="visible = false;" />
 </template>
 
 <style scoped>
@@ -67,5 +78,4 @@ button:hover svg #back-btn,
 button:hover svg #setting-btn,
 button:hover svg #switch-btn {
   fill: #b1daff !important;
-}
-</style>
+}</style>