样式修改

src/App.vue

@@ -40,6 +40,9 @@ const fontColor = computed(() => {
     ? "rgba(255, 255, 255, .15)"
     : "rgba(0, 0, 0, .15)";
 });
+onMounted(() => {
+  settingsStore.changeTheme(ThemeEnum.DARK);
+});
 </script>
 
 <style lang="scss" scoped>

src/layout/components/AppMain/index.vue

@@ -30,7 +30,8 @@ const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页
   width: 100%;
   min-height: calc(100vh - $navbar-height);
   overflow: hidden;
-  background-color: var(--el-bg-color-page);
+  background-color: black !important;
+  color: white;
 }
 
 .hasTagsView .app-main {

src/main.ts

@@ -4,7 +4,7 @@ import router from "@/router";
 import { setupStore } from "@/store";
 import { setupDirective } from "@/directive";
 import { setupElIcons, setupI18n, setupPermission } from "@/plugins";
-
+import "element-plus/theme-chalk/dark/css-vars.css";
 // 本地SVG图标
 import "virtual:svg-icons-register";
 

src/styles/index.scss

@@ -35,6 +35,8 @@
   height: calc(100vh - 48px);
   padding: 10px;
   overflow: auto;
+  background-color: black;
+  color: white;
 }
 
 //二级页面公共样式，上下结构，上面是childHeader

src/styles/variables.scss

@@ -1,7 +1,7 @@
 /** 全局SCSS变量 */
 
 :root {
-  --menu-background: #304156;
+  --menu-background: #000;
   --menu-text: #fff;
   --menu-active-text: var(--el-menu-active-color);
   --menu-hover: #263445;
@@ -16,7 +16,6 @@
   --hj-purple-3: #531dab;
   --hj-white-3: #d9d9d9;
 
-
   --hj-red-2: #ff7a7a;
   --hj-orange-2: #faa31a;
   --hj-yellow-2: #ffe518;
@@ -40,26 +39,25 @@
   --hj-black-1: #1a1a1a;
   --hj-black-2: #303030;
   --hj-black-3: #404040;
-  --hj-black-4:#505050;
-
+  --hj-black-4: #505050;
 
   --hj-bg: #fff;
   --hj-bg1: #3b7cff;
-  --hj-bg2: #F83C64;
+  --hj-bg2: #f83c64;
 
   //字体颜色
   --fc-color-default: #000000;
   --fc-color-1: #00000090;
   --fc-color-2: #00000060;
-  --fc-color-3: #AFB9D0;
-  --fc-color-4: #A6ABB1;
+  --fc-color-3: #afb9d0;
+  --fc-color-4: #a6abb1;
   --fc-color-5: #333333;
   --fc-color-6: #666666;
   --fc-color-7: #3b7cff;
-  --fc-color-8: #EDEDED;
+  --fc-color-8: #ededed;
   --fc-color-9: #202020;
 
-  --gray-bg-1: #F1F3F5;
+  --gray-bg-1: #f1f3f5;
 
   --hj-fs-12: 12px;
   --hj-fs-14: 14px;
@@ -76,10 +74,15 @@
   --hj-fs-36: 36px;
   --hj-fs-38: 38px;
 
+  --ohos-bg: #000;
+  --ohos-text: #ffffff;
+  --ohos-area-bg: #191919;
+  --ohos-box-bg: #ffffff40;
+  --ohos-box-active-bg: #64bb5c80;
+  --ohos-area-active-bg: #e5e5e5;
+  --ohos-text-green: #3d0158;
 }
 
-
-
 $menu-background: var(--menu-background); // 菜单背景色
 $menu-text: var(--menu-text); // 菜单文字颜色
 $menu-active-text: var(--menu-active-text); // 菜单激活文字颜色

src/views/main/components/header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main-header">
     <div class="main-logo">
-      <span style="font-size: 30px; color: white">维修检测平台</span>
+      <span style="font-size: 30px; color: white">自动测试</span>
     </div>
     <div class="main-user" ref="buttonRef">
       <div

src/views/main/components/menu.vue

@@ -119,7 +119,7 @@ const isCurrentMenu = (menu: MenuItem) => {
 .menu {
   height: calc(100vh - $main-header-height);
   width: 79px;
-
+  border-right: 1px solid white;
   display: flex;
   flex-direction: column;
   justify-content: start;
@@ -134,7 +134,7 @@ const isCurrentMenu = (menu: MenuItem) => {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-
+    border-bottom: 1px solid white;
     margin-bottom: 12px;
 
     .name {

src/views/main/main.vue

@@ -10,10 +10,10 @@ defineOptions({
 
 <template>
   <div class="main">
-    <Header></Header>
+    <Header />
     <div class="content">
       <Menu />
-      <Layout> </Layout>
+      <Layout />
     </div>
   </div>
 </template>
@@ -22,7 +22,7 @@ defineOptions({
 .main {
   width: 100%;
   height: 100%;
-  background: $hj-bg;
+  background: black;
   .content {
     display: flex;
     justify-content: start;

src/views/modules/home/home.vue

@@ -7,8 +7,7 @@
             v-model="checkAll"
             :indeterminate="isIndeterminate"
             @change="handleCheckAllChange"
-          >
-          </el-checkbox>
+          />
           <span>显示全部</span>
         </div>
         <div class="box-num">{{ checkedCities.length }}</div>
@@ -28,7 +27,7 @@
               v-for="type in typeList"
               :key="type.engineeringType"
             >
-              <el-checkbox label="" :value="type.engineeringType"></el-checkbox>
+              <el-checkbox label="" :value="type.engineeringType" />
               <div class="name">{{ type.engineeringType }}</div>
               <div class="num">{{ type.typeCount }}</div>
             </div>
@@ -333,21 +332,27 @@ const gotoExecuteTest = (project) => {
   width: 100%;
 
   .content-head {
+    border: 1px solid white;
+    border-left: 0px;
     color: var(--hj-white-1);
     // display: flex;
     height: 100px;
-    background: $hj-white-1;
+    box-sizing: border-box;
+    border-radius: 10px;
+    background: var(--ohos-area-bg);
     // width: 100%;
     // overflow: hidden;
     // min-width: 0;
 
     .head-box-all {
+      margin-left: -2px;
       display: inline-block;
       padding: 6px;
       box-sizing: border-box;
       border-radius: 4px 0 0 4px;
       width: 90px;
-      height: 100px;
+      margin-top: -1px;
+      height: 101px;
       background: linear-gradient(270deg, #3b7cff 0%, #8aa9ec 100%);
       color: var(--hj-white-1);
       font-size: var(--hj-fs-12);
@@ -391,7 +396,7 @@ const gotoExecuteTest = (project) => {
           height: 67px;
           border: 1px solid #afb9d0;
           border-radius: 4px 4px 4px 4px;
-
+          background-color: rgb(25, 25, 25);
           text-align: center;
           .el-checkbox {
             position: absolute;
@@ -403,7 +408,7 @@ const gotoExecuteTest = (project) => {
             line-height: 16px;
             margin-top: 12px;
             font-size: var(--hj-fs-14);
-            color: var(--fc-color-5);
+            color: white;
           }
 
           .num {
@@ -486,7 +491,8 @@ const gotoExecuteTest = (project) => {
       box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
       border-radius: 4px 4px 4px 4px;
       padding-top: 12px;
-      background-color: $hj-white-1;
+      background-color: var(--ohos-area-bg);
+      color: white;
     }
 
     .list-item-flex {
@@ -496,7 +502,7 @@ const gotoExecuteTest = (project) => {
       justify-content: space-between;
       align-items: center;
       font-size: var(--hj-fs-12);
-      color: var(--fc-color-5);
+      color: white;
 
       .list-itme-tit {
         font-size: var(--hj-fs-14);

src/views/modules/report-template/com/templateList.vue

@@ -38,8 +38,8 @@ defineExpose({
     <el-table :data="dataList" style="width: 100%">
       <el-table-column label="序号" type="index" width="80" />
 
-      <el-table-column label="表格名称" prop="formName"> </el-table-column>
-      <el-table-column label="产品名称" prop="productName"> </el-table-column>
+      <el-table-column label="表格名称" prop="formName" />
+      <el-table-column label="产品名称" prop="productName" />
       <el-table-column label="产品编码" prop="productCode" />
 
       <el-table-column label="操作" prop="操作" fixed="right">
@@ -87,16 +87,15 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: $hj-white-1;
+  background-color: black;
   padding: 0 20px;
   border-bottom: 1px solid $hj-white-3;
 
   .left-text {
     height: 18px;
-
     font-weight: bold;
     font-size: 14px;
-    color: $hj-black-1;
+    color: white;
     line-height: 16px;
     text-align: left;
   }