更新色调

src/assets/less/color.less

@@ -1,20 +1,25 @@
-@main-bg: rgb(22, 23, 38);
+@main-bg: rgb(21, 23, 36);
 @active-main-bg: rgb(31, 37, 52);
 @second-text-color: rgb(143, 143, 158);
 @second-btn-color: rgb(58, 58, 70);
 @second-btn-color-tran: rgba(58, 58, 70, .4);
 @line-color: rgb(37, 45, 66);
 @line-color2: rgb(56, 54, 67);
-@footer-color:#020202;
+@footer-color: black;
 
 @primary-btn-color: rgb(252, 47, 86);
 @disable-primary-btn-color: rgba(252, 47, 86, .5);
 
 @mask-dark: #000000bb;
-@mask-light:transparent;
-@mask-white:transparent;
-@mask-lightgray:rgba(0, 0, 0, 0.25);
+@mask-light: transparent;
+@mask-white: transparent;
+@mask-lightgray: rgba(0, 0, 0, 0.25);
 
 .second-text-color {
   color: @second-text-color;
 }
+
+//消息页面
+@msg-bg: rgb(22,22,22);
+@msg-subpage-card-bg: rgb(28, 30, 43); //二级页面，卡片背景
+

src/assets/less/custom.less

@@ -76,20 +76,20 @@
 
 
 .not-read {
-  @width: .7rem;
+  @width: 7rem;
   width: @width;
   height: @width;
   border-radius: 50%;
-  background: yellow;
+  background: @primary-btn-color;
 }
 
 .badge {
   font-size: 12rem;
   display: block;
-  color: black;
+  color: white;
   padding: 1rem 6rem;
   border-radius: 10rem;
-  background: yellow;
+  background: @primary-btn-color;
 }
 
 .badge2 {

src/components/BaseHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id='BaseHeader' :class="[mode,isFixed?'fixed':'']">
+  <div id='BaseHeader' :class="[isFixed?'fixed':'']">
     <div class="header">
       <dy-back
           :mode="backMode"
@@ -18,10 +18,6 @@ export default {
   name: "BaseHeader",
   components: {},
   props: {
-    mode: {
-      type: String,
-      default: 'dark'
-    },
     backMode: {
       type: String,
       default: 'gray'
@@ -62,6 +58,7 @@ export default {
 
 #BaseHeader {
   width: 100%;
+  color: white;
 
   &.fixed {
     z-index: 2;
@@ -69,16 +66,6 @@ export default {
     position: fixed;
   }
 
-  &.light {
-    background: white;
-    color: black;
-  }
-
-  &.dark {
-    background: @main-bg;
-    color: white;
-  }
-
   .header {
     display: flex;
     justify-content: center;

src/components/Footer.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="l-button" @click="tab(4)">
       <span :class="{active:currentTab===4}">消息</span>
-      <div class="badge2 ">2</div>
+      <div class="badge">2</div>
     </div>
     <div class="l-button" @click="tab(5)">
       <span :class="{active:currentTab===5}">我</span>
@@ -148,15 +148,9 @@ export default {
       }
     }
 
-    .badge2 {
-      right: 7rem;
-      top: 7rem;
-      position: absolute;
-    }
-
     .badge {
-      right: 7rem;
-      top: 7rem;
+      right: 12rem;
+      top: 9rem;
       position: absolute;
     }
   }

src/pages/home/Attention.vue

@@ -7,7 +7,11 @@
       <img class="center" src="@/assets/img/icon/add-light.png" alt="">
       <img class='right' src="@/assets/img/icon/search-light.png" alt="" @click="nav('/home/search')">
     </header>
-    <InfiniteList id="InfiniteList"/>
+    <SlideList
+        style="background:#000;"
+        :active="true"
+        :api="api.videos.recommended"
+    />
     <Footer v-bind:init-tab="2" style="position: fixed;"/>
   </div>
 </template>
@@ -17,6 +21,8 @@
 import {reactive} from "vue";
 import {useNav} from "@/utils/hooks/useNav";
 import InfiniteList from "@/pages/slideHooks/InfiniteList.vue";
+import api from "@/api";
+import SlideList from "@/pages/home/slide/SlideList.vue";
 
 const nav = useNav()
 

src/pages/home/index.vue

@@ -114,8 +114,8 @@ import ConfirmDialog from "../../components/dialog/ConfirmDialog.vue";
 import FollowSetting2 from "@/pages/home/components/FollowSetting2.vue";
 import ShareToFriend from "@/pages/home/components/ShareToFriend.vue";
 import UserPanel from "@/components/UserPanel.vue";
-import Community from "@/pages/home/components/Community.vue";
-import Shop from "@/pages/home/components/Shop.vue";
+import Community from "@/pages/home/slide/Community.vue";
+import Shop from "@/pages/home/slide/Shop.vue";
 import Slide0 from "@/pages/home/slide/Slide0.vue";
 import Slide2 from "@/pages/home/slide/Slide2.vue";
 import Slide4 from "@/pages/home/slide/Slide4.vue";

src/pages/home/slide/SlideList.vue

@@ -31,7 +31,7 @@ const props = defineProps({
       return {}
     }
   },
-  active: {
+   active: {
     type: Boolean,
     default: false
   },

src/pages/message/Message.vue

@@ -36,7 +36,7 @@
             <div class="content">
               <div class="left">
                 <div class="name">
-                  <span>粉丝</span>
+                  <span>新朋友</span>
                 </div>
                 <div class="detail">
                   xxx 关注了你
@@ -357,7 +357,6 @@
         </div>
       </transition>
       <Footer v-bind:init-tab="4"/>
-
     </div>
 
     <div class="searching" v-show="searching">
@@ -400,7 +399,6 @@
         </template>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -508,7 +506,7 @@ export default {
   left: 0;
   right: 0;
   font-size: 14rem;
-  background: @main-bg;
+  background: @msg-bg;
   color: white;
 
   .no-search {
@@ -830,7 +828,7 @@ export default {
         }
 
         &:active {
-          background: @active-main-bg;
+          background: rgb(57, 57, 57);
         }
 
         .avatar {
@@ -858,14 +856,12 @@ export default {
           }
         }
 
-
         .content {
           flex: 1;
           display: flex;
           justify-content: space-between;
           @padding: 14rem;
           padding: @padding 0 @padding 0;
-          border-bottom: 1px solid @line-color2;
 
           .left {
             .name {
@@ -909,7 +905,7 @@ export default {
           }
 
           .right {
-            margin-right: 30rem;
+            margin-right: 20rem;
             display: flex;
             align-items: center;
 
@@ -922,6 +918,10 @@ export default {
               width: 20rem;
               height: 20rem;
             }
+
+            .not-read {
+              margin-right: 5rem;
+            }
           }
         }
       }

src/pages/message/chat/Chat.vue

@@ -19,27 +19,16 @@
         <ChatMessage @itemClick="clickItem" v-longpress="showTooltip" :message="item"
                      v-for="(item,index) in messages" :key="item"></ChatMessage>
       </div>
-      <div class="footer" :class="isTyping ? 'typing' : ''">
+      <div class="footer">
         <div class="toolbar" v-if="!recording">
           <img src="../../../assets/img/icon/message/camera.png" alt="" class="camera">
           <input @click="typing = true"
                  @blur="typing = false"
                  type="text" placeholder="发送信息...">
-          <template v-if="!isTyping">
-            <img @click="recording = true;showOption = false" src="../../../assets/img/icon/message/voice-white.png"
-                 alt="">
-            <img src="../../../assets/img/icon/message/emoji-white.png" alt="">
-            <img @click="showOption = !showOption" src="../../../assets/img/icon/message/add-white.png" alt="">
-          </template>
-          <template v-else>
-            <img @click="recording = true;showOption = false" src="../../../assets/img/icon/message/voice-black.png"
-                 alt="">
-            <img src="../../../assets/img/icon/message/emoji-black.png" alt="">
-            <img v-if="showOption" @click="showOption = !showOption"
-                 src="../../../assets/img/icon/message/close-black.png"
-                 alt="">
-            <img v-else @click="showOption = !showOption" src="../../../assets/img/icon/message/add-black.png" alt="">
-          </template>
+          <img @click="recording = true;showOption = false" src="../../../assets/img/icon/message/voice-white.png"
+               alt="">
+          <img src="../../../assets/img/icon/message/emoji-white.png" alt="">
+          <img @click="showOption = !showOption" src="../../../assets/img/icon/message/add-white.png" alt="">
         </div>
         <div class="record" v-else>
           <span>按住 说话</span>
@@ -551,11 +540,11 @@ export default {
   overflow: auto;
   color: white;
   font-size: 14rem;
+  background: @msg-bg;
 
   .chat-content {
     > .header {
       z-index: 2;
-      background: @main-bg;
       width: 100%;
       box-sizing: border-box;
       height: @header-height;
@@ -587,7 +576,7 @@ export default {
         }
       }
 
-      .right{
+      .right {
         display: flex;
       }
     }
@@ -603,23 +592,8 @@ export default {
 
     .footer {
       @chat-bg-color: rgb(105, 143, 244);
-      @typing-bg-color: whitesmoke;
-      background: @main-bg;
-      @normal-bg-color: rgb(35, 38, 47);
+      @normal-bg-color: rgb(57, 57, 57);
       padding: 10rem 0;
-      border-top: 1px solid @second-btn-color-tran;
-
-      &.typing {
-        background: white;
-
-        .toolbar {
-          background: @typing-bg-color;
-        }
-
-        input {
-          background: @typing-bg-color !important;
-        }
-      }
 
       .toolbar {
         box-sizing: border-box;
@@ -686,7 +660,7 @@ export default {
         .option-wrapper {
           box-sizing: border-box;
           @grid-width: calc((100vw - 30rem) / 4);
-          color: black;
+          color: gray;
           display: grid;
           grid-template-columns:@grid-width @grid-width @grid-width @grid-width;
 
@@ -699,7 +673,7 @@ export default {
 
             img {
               border-radius: 4rem;
-              background: whitesmoke;
+              background: @normal-bg-color;
               padding: 10rem;
               width: 30rem;
               margin-bottom: 10rem;

src/pages/message/notice/DouyinHelper.vue

@@ -128,7 +128,7 @@ export default {
 
       .item {
         padding: @padding-page;
-        background: @second-btn-color-tran;
+        background: @msg-subpage-card-bg;
         border-radius: 5rem;
         margin-bottom: 20rem;
 

src/pages/message/notice/LiveNotice.vue

@@ -105,7 +105,7 @@ export default {
 
       .item {
         padding: @padding-page;
-        background: @second-btn-color-tran;
+        background: @msg-subpage-card-bg;
         border-radius: 5rem;
         margin-bottom: 20rem;
 

src/pages/message/notice/MoneyNotice.vue

@@ -151,7 +151,7 @@ export default {
 
       .item {
         padding: @padding-page;
-        background: @second-btn-color-tran;
+        background: @msg-subpage-card-bg;
         border-radius: 5rem;
         margin-bottom: 20rem;
 

src/pages/message/notice/SystemNotice.vue

@@ -175,7 +175,7 @@ export default {
     .list {
       .item {
         padding: @padding-page;
-        background: @second-btn-color-tran;
+        background: @msg-subpage-card-bg;
         border-radius: 5rem;
         margin-bottom: 20rem;
 

src/pages/message/notice/TaskNotice.vue

@@ -158,7 +158,7 @@ export default {
 
       .item {
         padding: @padding-page;
-        background: @second-btn-color-tran;
+        background: @msg-subpage-card-bg;
         border-radius: 5rem;
         margin-bottom: 20rem;
 

src/pages/test/Test.vue

@@ -25,8 +25,8 @@ import slideHooks from '../home/index.vue'
 import TestSwiperJs from "./TestSwiperJs";
 import {mat4} from "gl-matrix";
 import UserPanel from "@/components/UserPanel.vue";
-import Shop from "@/pages/home/components/Shop.vue";
-import Community from "@/pages/home/components/Community.vue";
+import Shop from "@/pages/home/slide/Shop.vue";
+import Community from "@/pages/home/slide/Community.vue";
 
 export default {
   name: "Test",