style update

src/assets/styles/theme.css

@@ -59,6 +59,10 @@
     --m-grey53: #2C3842;
     --m-grey54: #2C3842;
     --m-grey55: #435564;
+    /* zz */
+    --m-grey56: #516476;
+    --m-grey57: #869CA9;
+    --m-grey58: #3a454f;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -150,6 +154,8 @@
     --m-blue31-hover: rgba(38, 72, 124, .8);
     --m-blue32: #29538c;
     --m-blue32-hover: rgba(41, 83, 140, .8);
+    /* zz */
+    --m-blue33: #3a87f7;
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -175,6 +181,8 @@
     --m-yellow4: #3a2215;
     --m-yellow5: #fc9618;
     --m-yellow6: #FC9618;
+    /* zz */
+    --m-yellow7: #F39730;
     
     --m-nodata: url("../images/nodata.png");
 
@@ -248,6 +256,10 @@
     --m-grey53: #2C3842;
     --m-grey54: #2C3842;
     --m-grey55: #435564;
+    /* zz */
+    --m-grey56: #516476;
+    --m-grey57: #869CA9;
+    --m-grey58: #3a454f;
     /* --m-green1: #e8ffef; */
 
     --m-black0: #242a2e;
@@ -338,6 +350,8 @@
     --m-blue31-hover: rgba(38, 72, 124, .8);
     --m-blue32: #29538c;
     --m-blue32-hover: rgba(41, 83, 140, .8);
+    /* zz */
+    --m-blue33: #3a87f7;
 
     --body-bg: #e9eef3;
     --m-white0: #ffffff;
@@ -363,7 +377,8 @@
     --m-yellow4: #3a2215;
     --m-yellow5: #fc9618;
     --m-yellow6: #FC9618;
-
+    /* zz */
+    --m-yellow7: #F39730;
     --m-nodata: url("../images/nodata.png");
 
     --m-tabbg: url("../images/tabbg.png");
@@ -435,6 +450,10 @@
     --m-grey53: #F6F8FA;
     --m-grey54: #B9D2E0;
     --m-grey55: #ACBBC5;
+    /* zz */
+    --m-grey56: #5179E2;
+    --m-grey57: #7A8A94;
+    --m-grey58: #dbe7ef;
 
     --m-black0: #F8FBFF;
     --m-black1: #ECF2F5;
@@ -524,6 +543,8 @@
     --m-blue31-hover: rgba(81, 121, 226, .8);
     --m-blue32: #5179E2;
     --m-blue32-hover: rgba(81, 121, 226, .8);
+     /* zz */
+     --m-blue33: #ffffff;
 
     --body-bg: #FFFFFF;
     --m-white0: #ffffff;
@@ -549,6 +570,8 @@
     --m-yellow4: #FFE8DB;
     --m-yellow5: #FFC277;
     --m-yellow6: #FC9618;
+    /* zz */
+    --m-yellow7: #FFFFFF;
 
     --m-nodata: url("../images/nodata_white.png");
 

src/assets/styles/variables.less

@@ -68,6 +68,10 @@
 @m-grey53: var(--m-grey53);
 @m-grey54: var(--m-grey54);
 @m-grey55: var(--m-grey55);
+/* zz */
+@m-grey56: var(--m-grey56);
+@m-grey57: var(--m-grey57);
+@m-grey58: var(--m-grey58);
 
 @m-black: #000000;
 @m-black0: var(--m-black0);
@@ -160,6 +164,7 @@
 @m-blue31-hover: var(--m-blue31-hover);
 @m-blue32: var(--m-blue32);
 @m-blue32-hover: var(--m-blue32-hover);
+@m-blue33: var(--m-blue33);
 
 @body-bg: #e9eef3;
 @m-white0: var(--m-white0);
@@ -216,6 +221,7 @@
 @m-yellow4: var(--m-yellow4);
 @m-yellow5: var(--m-yellow5);
 @m-yellow6: var(--m-yellow6);
+@m-yellow7: var(--m-yellow7);
 
 @m-orange0: #F52929;
 

src/views/setting/friends/index.vue

@@ -135,9 +135,9 @@ export default defineComponent({
         width: 100%;
         height: 40px;
         line-height: 40px;
-        color: #869ca9;
+        color: @m-grey57;
         font-size: 14px;
-        border-bottom: 1px solid #3b4651;
+        border-bottom: 1px solid @m-grey58;
         .flex;
         justify-content: space-between;
         .left {
@@ -148,17 +148,20 @@ export default defineComponent({
         .right {
             padding-right: 10px;
             .icon {
-                color: #f39730;
+                color: @m-yellow7;
                 font-size: 16px;
+                height: 40px;
+                line-height: 40px;
+                display: none;
             }
             .addFriBtn {
                 display: inline-block;
                 cursor: pointer;
                 width: 80px;
                 height: 26px;
-                border: 1px solid #3a87f7;
+                border: 1px solid @m-blue0;
                 .rounded-corners(13px);
-                color: #3a87f7;
+                color: @m-blue0;
                 font-size: 14px;
                 line-height: 24px;
                 text-align: center;
@@ -166,9 +169,18 @@ export default defineComponent({
         }
     }
     .item:hover {
-        background: #516476;
+        background: @m-grey56;
         .rounded-corners(5px);
-        color: #ffffff;
+        color: @m-white0;
+        .addFriBtn {
+            border: 1px solid @m-blue33;
+            color: @m-blue33;
+        }
+        .right {
+            .icon {
+                display: block;
+            }
+        }
     }
 }
 </style