pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新色调

pull/29/head
zyronon 2 years ago
parent
c75e329ef8
commit
8c273a3b68
17 changed files with 54 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/assets/less/color.less
  2. 8
      src/assets/less/custom.less
  3. 17
      src/components/BaseHeader.vue
  4. 12
      src/components/Footer.vue
  5. 8
      src/pages/home/Attention.vue
  6. 4
      src/pages/home/index.vue
  7. 0
      src/pages/home/slide/Community.vue
  8. 0
      src/pages/home/slide/Shop.vue
  9. 2
      src/pages/home/slide/SlideList.vue
  10. 16
      src/pages/message/Message.vue
  11. 46
      src/pages/message/chat/Chat.vue
  12. 2
      src/pages/message/notice/DouyinHelper.vue
  13. 2
      src/pages/message/notice/LiveNotice.vue
  14. 2
      src/pages/message/notice/MoneyNotice.vue
  15. 2
      src/pages/message/notice/SystemNotice.vue
  16. 2
      src/pages/message/notice/TaskNotice.vue
  17. 4
      src/pages/test/Test.vue

15
src/assets/less/color.less
Unescape 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); @active-main-bg: rgb(31, 37, 52);
@second-text-color: rgb(143, 143, 158); @second-text-color: rgb(143, 143, 158);
@second-btn-color: rgb(58, 58, 70); @second-btn-color: rgb(58, 58, 70);
@second-btn-color-tran: rgba(58, 58, 70, .4); @second-btn-color-tran: rgba(58, 58, 70, .4);
@line-color: rgb(37, 45, 66); @line-color: rgb(37, 45, 66);
@line-color2: rgb(56, 54, 67); @line-color2: rgb(56, 54, 67);
@footer-color:#020202; @footer-color: black;
@primary-btn-color: rgb(252, 47, 86); @primary-btn-color: rgb(252, 47, 86);
@disable-primary-btn-color: rgba(252, 47, 86, .5); @disable-primary-btn-color: rgba(252, 47, 86, .5);
@mask-dark: #000000bb; @mask-dark: #000000bb;
@mask-light:transparent; @mask-light: transparent;
@mask-white:transparent; @mask-white: transparent;
@mask-lightgray:rgba(0, 0, 0, 0.25); @mask-lightgray: rgba(0, 0, 0, 0.25);
.second-text-color { .second-text-color {
color: @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
Unescape View File

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

17
src/components/BaseHeader.vue
Unescape View File

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

12
src/components/Footer.vue
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save