1234

src/assets/base.css

@@ -83,7 +83,7 @@ body {
 
 .el-tabs {
   --el-tabs-header-height: 80px !important;
-  background-image: url('bg.png');
+  background-image: url('theme/bg.png');
   background-size: cover;
   color: #f8f8f8;
 }
@@ -98,8 +98,9 @@ body {
 }
 
 .el-card__header {
-  background-image: url('bg.png');
+  background-image: url('theme/bg.png');
   background-size: cover;
+  opacity: 0.7;
   color: #fff;
 }
 

src/views/ChannelSetting.vue

@@ -22,6 +22,18 @@
             <el-button round type="success" @click="getConfig">刷新</el-button>
             <el-button round type="primary" @click="saveConfig">保存</el-button>
             <el-button round type="primary" @click="syncGoods">同步物资</el-button>
+            <el-dropdown @command="handleCommand">
+              <span style="cursor: pointer; background: #409eff;margin-left: 12px;">
+                <img src="../assets/icons/主题.png" style="width: 32px;">
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="#223170">藏蓝风格</el-dropdown-item>
+                  <el-dropdown-item command="#025799">蓝色风格</el-dropdown-item>
+                  <el-dropdown-item command="#1f8a36">军绿风格</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </el-form-item>
         </el-form>
       </el-card>
@@ -236,6 +248,18 @@ export default defineComponent({
         getDevice()
       })
     }
+
+    function handleCommand() {
+      if (command === '#223170') { // 藏蓝
+        sessionStorage.setItem('loginbg', 'bg1')
+      }
+      if (command === '#025799') { // 蓝色
+        sessionStorage.setItem('loginbg', 'bg2')
+      }
+      if (command === '#1f8a36') { // 军绿
+        sessionStorage.setItem('loginbg', 'bg')
+      }
+    }
     
     return {
       ...toRefs(state),
@@ -252,7 +276,8 @@ export default defineComponent({
       removeDevice,
       loadData,
       getDevice,
-      syncGoods
+      syncGoods,
+      handleCommand
     }
   },
 })

src/views/HomeView.vue

@@ -9,7 +9,7 @@
       </template>
       <component :is="item.template" :ref="item.template" @refresh="handleRefresh" @logChange="handleLogChange"></component>
     </el-tab-pane>
-    <el-card style="background-image: url('bg.png');background-size: cover; opacity: 0.8;">
+    <el-card>
       <div v-html="log" class="log-scroll" style="display: flex;align-items: center;"></div>
     </el-card>
   </el-tabs>