MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新色调

Browse Source
This commit is contained in:
zyronon 2023-02-24 00:21:28 +08:00
parent c75e329ef8
commit 8c273a3b68
17 changed files with 54 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/less/color.less
View File

@ -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); //二级页面，卡片背景

8
src/assets/less/custom.less
View File

@ -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 {

17
src/components/BaseHeader.vue
View File

@ -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;

12
src/components/Footer.vue
View File

@ -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;
}
}

8
src/pages/home/Attention.vue
View File

@ -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()

4
src/pages/home/index.vue
View File

@ -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";

0
src/pages/home/components/Community.vue → src/pages/home/slide/Community.vue
View File

0
src/pages/home/components/Shop.vue → src/pages/home/slide/Shop.vue
View File

2
src/pages/home/slide/SlideList.vue
View File

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

16
src/pages/message/Message.vue
View File

@ -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;
}
}
}
}

46
src/pages/message/chat/Chat.vue
View File

@ -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;

2
src/pages/message/notice/DouyinHelper.vue
View File

@ -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;

2
src/pages/message/notice/LiveNotice.vue
View File

@ -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;

2
src/pages/message/notice/MoneyNotice.vue
View File

@ -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;

2
src/pages/message/notice/SystemNotice.vue
View File

@ -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;

2
src/pages/message/notice/TaskNotice.vue
View File

@ -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;

4
src/pages/test/Test.vue
View File

@ -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",