修改菜单主题变色

src/views/monitor/LogList.vue

@@ -81,13 +81,19 @@ const rowClassName = ({ row }: { row: any }) => {
 
 <template>
   <el-container>
-    <el-aside width="200px" class="logAside">
-      <el-menu default-active="2" class="el-menu-vertical-demo">
+    <el-aside width="200px" class="log-aside">
+      <el-menu
+        default-active="2"
+        class="el-menu-vertical-demo"
+        active-text-color="#409EFF"
+        background-color="#ffffff"
+        text-color="#303133"
+      >
         <el-menu-item index="2">
           <el-icon>
             <InfoFilled color="#409eff" />
           </el-icon>
-          <span>登陆日志</span>
+          <span>登录日志</span>
         </el-menu-item>
         <el-menu-item index="3">
           <el-icon>
@@ -103,7 +109,7 @@ const rowClassName = ({ row }: { row: any }) => {
         </el-menu-item>
       </el-menu>
     </el-aside>
-    <el-main class="logMain">
+    <el-main class="log-main">
       <pro-table :crud="CRUD" :formConfig="logtFormConfig" :row-class-name="rowClassName" @cell-click="handleRowClick">
         <vxe-column field="description" title="访问功能"></vxe-column>
         <vxe-column field="type" title=""></vxe-column>
@@ -113,7 +119,7 @@ const rowClassName = ({ row }: { row: any }) => {
 </template>
 
 <style lang="scss" scoped>
-.logAside {
+.log-aside {
   background-color: #fff;
 
   .el-menu {
@@ -121,7 +127,7 @@ const rowClassName = ({ row }: { row: any }) => {
   }
 }
 
-.logMain {
+.log-main {
   padding: 0 0 0 var(--main-padding);
 }
 </style>

src/views/user/UserInfo.vue

@@ -214,7 +214,7 @@ const rowClassName = ({ row }: { row: any }) => {
         <template #header>
           <div class="card-header">
             <span>
-              <div class="personBg">
+              <div class="person-bg">
                 <el-icon :size="14">
                   <UserFilled />
                 </el-icon>
@@ -223,8 +223,8 @@ const rowClassName = ({ row }: { row: any }) => {
             </span>
           </div>
         </template>
-        <div class="infoWrap">
-          <div class="basicInfo">
+        <div class="info-wrap">
+          <div class="basic-info">
             <el-avatar :size="80" />
             <div class="info">
               <h2>管理员</h2>
@@ -232,38 +232,38 @@ const rowClassName = ({ row }: { row: any }) => {
               <el-button type="primary" icon="CollectionTag" round>admin</el-button>
             </div>
           </div>
-          <div class="infoList">
-            <div class="infoItem">
+          <div class="info-list">
+            <div class="info-item">
               <el-icon :size="20">
                 <Phone />
               </el-icon>
               <span>18951655371</span>
             </div>
-            <div class="infoItem">
+            <div class="info-item">
               <el-icon :size="20">
                 <Iphone />
               </el-icon>
               <span>025-83672322</span>
             </div>
-            <div class="infoItem">
+            <div class="info-item">
               <el-icon :size="20">
                 <Message />
               </el-icon>
               <span>117575171@qq.com</span>
             </div>
-            <div class="infoItem">
+            <div class="info-item">
               <el-icon :size="20">
                 <Location />
               </el-icon>
               <span>方是科技</span>
             </div>
-            <div class="infoItem">
+            <div class="info-item">
               <el-icon :size="20">
                 <OfficeBuilding />
               </el-icon>
               <span>行政部</span>
             </div>
-            <div class="infoItem">
+            <div class="info-item">
               <el-icon :size="20">
                 <Coin />
               </el-icon>
@@ -273,12 +273,12 @@ const rowClassName = ({ row }: { row: any }) => {
         </div>
       </el-card>
     </el-aside>
-    <el-main class="logMain">
+    <el-main class="logo-main">
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
             <span>
-              <div class="personBg">
+              <div class="person-bg">
                 <el-icon :size="14">
                   <EditPen />
                 </el-icon>
@@ -298,7 +298,7 @@ const rowClassName = ({ row }: { row: any }) => {
                 :create="create"
               >
               </pro-form>
-              <div class="btnLabel">
+              <div class="btn-label">
                 <el-button type="primary" @click="handleSave">保存</el-button>
               </div>
             </el-tab-pane>
@@ -313,7 +313,7 @@ const rowClassName = ({ row }: { row: any }) => {
             <el-tab-pane label="联系方式" name="phone">
               <pro-form :formConfig="telConfig" :formData="formData" ref="telFormRef" :update="update" :create="create">
               </pro-form>
-              <div class="btnLabel">
+              <div class="btn-label">
                 <el-button type="primary" @click="handleSave">保存</el-button>
               </div>
             </el-tab-pane>
@@ -326,11 +326,11 @@ const rowClassName = ({ row }: { row: any }) => {
                 :create="create"
               >
               </pro-form>
-              <div class="btnLabel">
+              <div class="btn-label">
                 <el-button type="primary" @click="savePass">保存</el-button>
               </div>
             </el-tab-pane>
-            <el-tab-pane label="我的日志" name="log" class="resetTable">
+            <el-tab-pane label="我的日志" name="log" class="reset-table">
               <el-tabs v-model="activeName1" type="card" class="demo-tabs">
                 <el-tab-pane label="登录日志" name="login"></el-tab-pane>
                 <el-tab-pane label="访问日志" name="fw"></el-tab-pane>
@@ -366,10 +366,10 @@ const rowClassName = ({ row }: { row: any }) => {
 <style lang="scss" scoped>
 .wrap {
   height: 100%;
-  .logMain {
+  .log-main {
     padding: 0 0 0 var(--main-padding);
   }
-  .resetTable {
+  .reset-table {
     :deep(.el-card__body) {
       padding: 0 !important;
     }
@@ -391,7 +391,7 @@ const rowClassName = ({ row }: { row: any }) => {
       }
     }
   }
-  .personBg {
+  .person-bg {
     color: #1890ff;
     background-color: #e6f7ff;
     width: 24px;
@@ -402,13 +402,13 @@ const rowClassName = ({ row }: { row: any }) => {
     display: inline-block;
   }
 
-  .infoWrap {
+  .info-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
-  .basicInfo {
+  .basic-info {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -425,11 +425,11 @@ const rowClassName = ({ row }: { row: any }) => {
     }
   }
 
-  .infoList {
+  .info-list {
     width: 380px;
     margin-top: 10px;
 
-    .infoItem {
+    .info-item {
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -442,7 +442,7 @@ const rowClassName = ({ row }: { row: any }) => {
     }
   }
 
-  .btnLabel {
+  .btn-label {
     margin-left: 100px;
   }
 }