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

重写关注页，现在应该是同城页了

pull/19/head
zyronon 4 years ago
parent
c06484e0cd
commit
e82502a61e
6 changed files with 830 additions and 332 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/icon/c8_.png
  2. 128
      src/assets/scss/utils.scss
  3. 195
      src/components/Video.vue
  4. 519
      src/pages/home/Attention.vue
  5. 266
      src/pages/home/我的动态.vue
  6. 54
      src/test.html

BIN
src/assets/img/icon/c8_.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 253 B

128
src/assets/scss/utils.scss
Unescape View File

@ -1,50 +1,50 @@ @@ -1,50 +1,50 @@
@use "sass:math";
/*
width
*/
$width: 500;
@while $width >= 0 {
.w#{$width}p {
width: #{$width}px !important;
}
$width: $width - 10;
}
$width: 100;
@while $width >= 0 {
.w#{$width} {
//width: math.percentage($width / 100) !important;
}
$width: $width - 1;
}
/*
$height
*/
$height: 500;
@while $height >= 0 {
.h#{$height}p {
height: #{$height}px !important;
}
$height: $height - 10;
}
$height: 100;
@while $height >= 0 {
.h#{$height} {
//height: math.percentage($height / 100) !important;
}
$height: $height - 1;
}
///*
//
//width
//
//*/
//$width: 500;
//@while $width >= 0 {
// .w#{$width}p {
// width: #{$width}px !important;
// }
// $width: $width - 10;
//}
//
//
//$width: 100;
//@while $width >= 0 {
// .w#{$width} {
// //width: math.percentage($width / 100) !important;
// }
// $width: $width - 1;
//}
//
///*
//
//$height
//
//*/
//$height: 500;
//@while $height >= 0 {
// .h#{$height}p {
// height: #{$height}px !important;
// }
// $height: $height - 10;
//}
//
//
//$height: 100;
//@while $height >= 0 {
// .h#{$height} {
// //height: math.percentage($height / 100) !important;
// }
// $height: $height - 1;
//}
//
/*
@ -53,43 +53,43 @@ margin @@ -53,43 +53,43 @@ margin
*/
$margin: 50;
@while $margin >= 0 {
@while $margin >= 5 {
.ml#{$margin}p {
margin-left: #{$margin}px !important;
}
$margin: $margin - 1;
$margin: $margin - 5;
}
$margin: 50;
@while $margin >= 0 {
@while $margin >= 5 {
.mr#{$margin}p {
margin-right: #{$margin}px !important;
}
$margin: $margin - 1;
$margin: $margin - 5;
}
$margin: 50;
@while $margin >=0 {
@while $margin >=5 {
.mt#{$margin}p {
margin-top: #{$margin}px !important;
}
$margin: $margin - 1;
$margin: $margin - 5;
}
$margin: 50;
@while $margin >= 0 {
@while $margin >= 5 {
.mb#{$margin}p {
margin-bottom: #{$margin}px !important;
}
$margin: $margin - 1;
$margin: $margin - 5;
}
$margin: 50;
@while $margin >= 0 {
@while $margin >= 5 {
.m#{$margin}p {
margin: #{$margin}px !important;
}
$margin: $margin - 1;
$margin: $margin - 5;
}
@ -101,43 +101,43 @@ padding @@ -101,43 +101,43 @@ padding
$padding: 50;
@while $padding >= 0 {
@while $padding >= 5 {
.pl#{$padding}p {
padding-left: #{$padding}px !important;
}
$padding: $padding - 1;
$padding: $padding - 5;
}
$padding: 50;
@while $padding >= 0 {
@while $padding >= 5 {
.pr#{$padding}p {
padding-right: #{$padding}px !important;
}
$padding: $padding - 1;
$padding: $padding - 5;
}
$padding: 50;
@while $padding >= 0 {
@while $padding >= 5 {
.pt#{$padding}p {
padding-top: #{$padding}px !important;
}
$padding: $padding - 1;
$padding: $padding - 5;
}
$padding: 50;
@while $padding >= 0 {
@while $padding >= 5 {
.pb#{$padding}p {
padding-bottom: #{$padding}px !important;
}
$padding: $padding - 1;
$padding: $padding - 5;
}
$padding: 50;
@while $padding >= 0 {
@while $padding >= 5 {
.p#{$padding}p {
padding: #{$padding}px !important;
}
$padding: $padding - 1;
$padding: $padding - 5;
}

195
src/components/Video.vue
Unescape View File

@ -11,8 +11,17 @@ @@ -11,8 +11,17 @@
<div class="float">
<div :style="{opacity:isMove?0:1}" class="normal">
<div class="toolbar mb10p">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p"
@click.stop="$emit('goUserInfo')">
<div class="avatar-ctn mb15p">
<img class="avatar" src="../assets/img/icon/head-image.jpeg" alt=""
@click.stop="$emit('goUserInfo')">
<transition name="fade">
<div v-if="!isAttention" @click.stop="attention" class="options" ref="attention-option">
<img class="no" src="../assets/img/icon/add.png" alt="">
<img class="yes" src="../assets/img/icon/ok-red.png" alt="">
</div>
</transition>
</div>
<div class="love mb15p" @click.stop="loved($event)">
<div>
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!video.isLoved">
@ -22,17 +31,23 @@ @@ -22,17 +31,23 @@
<!-- <transition name="loved">-->
<!-- </transition>-->
</div>
<span class="f14">{{ video.loves }}</span>
<span>{{ video.loves }}</span>
</div>
<div class="message mb15p" @click.stop="$emit('showComments')">
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
<span class="f14">{{ video.comments }}</span>
<span>{{ video.comments }}</span>
</div>
<div class="share mb35p" @click.stop="$emit('showShare')">
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
<span class="f14">{{ video.shared }}</span>
<span>{{ video.shared }}</span>
</div>
<div class="music-ctn">
<img class="music1" src="../assets/img/icon/home/music1.png" alt="">
<img class="music2" src="../assets/img/icon/home/music2.png" alt="">
<div class="music-bg">
<img class="music" src="../assets/img/icon/head-image.jpeg" alt="" @click.stop="$nav('/music')">
</div>
</div>
<img src="../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="$nav('/music')">
</div>
<div class="content ml10p mb10p" @click.stop="goUserInfo()">
<div class="name mb10p">@TTentau</div>
@ -134,6 +149,7 @@ export default { @@ -134,6 +149,7 @@ export default {
width: 0,
isPlaying: !this.disabled,
isCommenting: false,
isAttention: false,
isSharing: false,
line: null,
point: null,
@ -154,10 +170,14 @@ export default { @@ -154,10 +170,14 @@ export default {
v.isMove ? this.move(v.e) : this.end(v.e)
})
},
unmounted() {
console.log('unmounted')
},
methods: {
attention() {
let option = this.$refs['attention-option']
option.classList.add('attention')
setTimeout(() => {
this.isAttention = true
}, 1000)
},
//划动到下一个视频
swipingVideo() {
let videos = this.$refs.video
@ -224,9 +244,9 @@ export default { @@ -224,9 +244,9 @@ export default {
this.$stopPropagation(e)
},
end(e) {
setTimeout(()=>{
setTimeout(() => {
this.isMove = false
},1000)
}, 1000)
let video = this.$refs.video
video.currentTime = this.currentTime
video.play()
@ -238,6 +258,15 @@ export default { @@ -238,6 +258,15 @@ export default {
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
transition: transform 0.1s linear;
}
.fade-enter-from,
.fade-leave-to {
transform: scale(0);
}
.bg-video {
position: relative;
background: black;
@ -282,30 +311,78 @@ export default { @@ -282,30 +311,78 @@ export default {
position: relative;
.toolbar {
width: 40px;
//width: 40px;
position: absolute;
bottom: 0;
right: 20px;
right: 5px;
color: #fff;
div {
text-align: center;
}
.avatar-ctn {
position: relative;
img {
width: 90%;
height: 90%;
}
.avatar {
width: 55px;
height: 55px;
border-radius: 50%;
}
.options {
position: absolute;
border-radius: 50%;
margin: auto;
left: 0;
right: 0;
bottom: -5px;
background: red;
//background: black;
width: 18px;
height: 18px;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s;
img {
position: absolute;
width: 12px;
height: 12px;
transition: all 1s;
}
.yes {
opacity: 0;
transform: rotate(-180deg);
}
&.attention {
background: white;
.head-image, .music {
width: 100%;
height: 100%;
border-radius: 50%;
.no {
opacity: 0;
transform: rotate(180deg);
}
.yes {
opacity: 1;
transform: rotate(0deg);
}
}
}
}
.love {
.love, .message, .share {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
width: 40px;
height: 40px;
}
span {
font-size: 11px;
}
}
@ -313,8 +390,46 @@ export default { @@ -313,8 +390,46 @@ export default {
background: red;
}
.music {
animation: animations 4s linear forwards infinite;
.music-ctn {
position: relative;
.music-bg {
background-image: linear-gradient(black, #424242, black);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
animation: animations 5s linear forwards infinite;
//display: none;
.music {
//display: none;
width: 25px;
height: 25px;
border-radius: 50%;
}
}
.music1, .music2 {
//display: none;
position: absolute;
width: 18px;
height: 18px;
top: 10px;
}
.music1 {
animation: anim-music1 2s linear forwards infinite;
}
.music2 {
animation: anim-music1 2s linear forwards infinite;
animation-delay: 1s;
}
}
@keyframes animations {
@ -325,6 +440,32 @@ export default { @@ -325,6 +440,32 @@ export default {
transform: rotate(360deg);
}
}
@keyframes anim-music1 {
0% {
transform: translate3d(0, 0, 0);
opacity: 0;
}
20% {
transform: translate3d(-8px, 0px, 0) rotate(30deg);
opacity: .3;
}
40% {
transform: translate3d(-16px, -5px, 0) rotate(15deg);
opacity: .5;
}
60% {
transform: translate3d(-24px, -15px, 0) rotate(0deg);
opacity: 1;
}
80% {
transform: translate3d(-32px, -30px, 0) rotate(-15deg);
opacity: 1;
}
100% {
transform: translate3d(-32px, -50px, 0) rotate(-30deg);
opacity: 0;
}
}
}
.content {

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

@ -1,218 +1,337 @@ @@ -1,218 +1,337 @@
<template>
<div id="attention" >
<div class="items p10p">
<div class="item mb20p pb20p" v-for="(item,index) of items" :key="index" >
<div class="header mb10p">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span class="ml5p">TTentau</span>
</div>
<div class="my-comment mb10p">
最靠近北极有个不生不来之地，北极熊比人还多，对中国免签 <span class="tag">#带他去旅行</span>
</div>
<div class="other-comment p10p">
<span class="user-name">@super-man:</span>
<span class="tag">#购物车里是什么</span>
<span>无敌浩克</span>
</div>
<div class="video-container mb10p ">
<video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
<div class="music">
<img src="../../assets/img/icon/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
<img src="../../assets/img/icon/play.svg" alt="" class="play">
<img src="../../assets/img/icon/pause.svg" alt="" class="pause" v-if="false">
</div>
</div>
<div class="location mb10p">
<img src="../../assets/img/icon/location.svg" alt="">
<span class="ml5p">东方明珠</span>
</div>
<div class="toolbar mb10p">
<div class="item">
<img src="../../assets/img/icon/love.svg" alt="">
<img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/icon/message.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/icon/love.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/icon/love.svg" alt="">
<span class="count">555</span>
</div>
</div>
<div class="hot-comment pr15p mb5p oh">
<div class="content pull-left ">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/icon/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
<span class="f14 block">3453</span>
</div>
</div>
<span class="time">11小时前</span>
<div id="attention">
<header>
<span>双流</span>
<div class="arrow"></div>
</header>
<div class="ad">
<div class="title">超值卖场 次日达</div>
<div class="good-ctn">
<div class="left">
<div class="left-title">
<span>限量秒杀</span>
<div>低至0.99元</div>
</div>
<div class="goods">
<div class="good">
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
<div class="name">每日坚果5包</div>
<div class="price">￥0.99</div>
</div>
<div class="good">
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
<div class="name">每日坚果5包</div>
<div class="price">￥0.99</div>
</div>
</div>
</div>
<div class="right">
<div class="goods">
<div class="good">
<div class="notice">
<div class="ad-name">低价疯抢</div>
<div class="ad-desc">统一方便面</div>
</div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
</div>
<div class="good">
<div class="notice">
<div class="ad-name">低价疯抢</div>
<div class="ad-desc">统一方便面</div>
</div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="left">
<div class="item" v-for="item in left">
<img class="poster" :src="item.src"/>
<div class="location">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">电子科技大学沙河校区</div>
</div>
<div class="bottom">
<div class="type">大学</div>
<div class="line"></div>
<div class="other">1399人想去</div>
</div>
</div>
</div>
<Footer v-bind:init-tab="2" style="position: fixed;" />
</div>
<div class="right">
<div class="item" v-for="item in right">
<img class="poster" :src="item.src"/>
<div class="location">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">电子科技大学沙河校区</div>
</div>
<div class="bottom">
<div class="type">大学</div>
<div class="line"></div>
<div class="other">1399人想去</div>
</div>
</div>
</div>
</div>
</div>
<Footer v-bind:init-tab="2" style="position: fixed;"/>
</div>
</template>
<script>
import Footer from '../../components/Footer.vue';
export default {
name: "Attention",
components: {
Footer
},
data(){
return {
items:[
{},{},{}
],
height:0,
width:0,
footerHeight:0
}
},
created() {
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
mounted() {
}
//TODO 还差个点击，返回后，定位到当前item最高点
import Footer from '../../components/Footer.vue';
export default {
name: "Attention",
components: {
Footer
},
data() {
return {
items: [],
height: 0,
width: 0,
footerHeight: 0
}
},
created() {
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
computed: {
left() {
return this.items.filter((v, i) => {
return i % 2 === 0
})
},
right() {
return this.items.filter((v, i) => {
return i % 2 !== 0
})
}
},
mounted() {
for (let i = 1; i < 12; i++) {
this.items.push({
src: require(`../../assets/img/poster/${i}.jpg`)
})
}
}
}
</script>
<style scoped lang="scss">
#attention {
position: fixed;
/*background: rgb(22，24，34);*/
/*background: #161822;*/
//抖音原色，感觉很暗
background: #2e3244;
color: #b8b9c1;
.items {
>.item {
border-bottom: 1px solid #494950;
.header {
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.other-comment {
display: none;
background: #15161b;
border-radius: 10px 10px 0 0;
}
.video-container {
position: relative;
width: 80%;
video {
border-radius: 10px 10px 10px 10px;
width: 100%;
}
.music {
position: absolute;
bottom: 15px;
right: 15px;
left: 15px;
.music-image {
width: 20px;
height: 20px;
margin-top: 3px;
position: absolute;
}
marquee {
width: 50%;
margin-left: 30px;
color: white;
}
.play, .pause {
width: 20px;
height: 20px;
margin-top: 3px;
position: absolute;
right: 0;
}
}
}
.location {
display: flex;
justify-content: flex-start;
align-items: center;
height: 20px;
img {
height: 100%;
}
}
.toolbar{
width: 90%;
height: 25px;
text-align: center;
.item {
height: 100%;
display: flex;
width: 25%;
justify-content: flex-start;
align-items: center;
float: left;
img{
height: 100%;
}
.count{
margin-left: 5px;
}
}
}
.hot-comment {
.content {
float: left;
width: 85%;
.head-image {
width: 40px;
border-radius: 50%;
float: left;
}
.comment-container {
width: 85%;
.time {
color: gray;
}
}
}
.love {
text-align: center;
.love-image {
width: 30px;
border-radius: 50%;
}
}
}
#attention {
/*background: rgb(22，24，34);*/
/*background: #161822;*/
//抖音原色，感觉很暗
$douyin-bg: #2e3244;
background: $douyin-bg;
color: #b8b9c1;
header {
font-size: 1.5rem;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
$arrow-width: 5px;
.arrow {
position: relative;
top: 3px;
left: 5px;
width: 0;
height: 0;
border-top: $arrow-width solid white;
border-right: $arrow-width solid transparent;
border-bottom: $arrow-width solid transparent;
border-left: $arrow-width solid transparent;
}
}
.ad {
padding: 10px;
color: white;
.title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
}
.good-ctn {
display: flex;
justify-content: space-between;
.left, .right {
width: calc(50% - 3px);
}
.left {
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
.left-title {
font-weight: bold;
font-size: 1.7rem;
display: flex;
align-items: center;
margin-bottom: 10px;
div {
background: linear-gradient(to top right, #e37c7c, #bd5959);
padding: 0 4px 2px 4px;
border-radius: 3px;
font-size: 1rem;
font-weight: lighter;
margin-left: 5px;
}
}
.goods {
display: flex;
justify-content: space-between;
.good {
width: calc(50% - 5px);
.good-img {
width: 100%;
height: 50px;
border-radius: 5px;
}
.name {
margin-top: 5px;
}
.price {
font-size: 1rem;
}
}
}
}
.right {
.goods {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.good {
height: calc(50% - 3px);
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
width: 100%;
display: flex;
justify-content: space-between;
background: linear-gradient(to bottom right, #6b267d 10%, #3f445c 50%);
&:nth-child(2){
background: linear-gradient(to bottom right, #283b53 5%, #3f445c 50%);
}
.tag {
color: #E6C346;
margin: 0 3px;
.notice {
display: flex;
justify-content: center;
flex-direction: column;
.ad-name {
font-weight: bold;
}
.ad-desc {
font-size: 1rem;
color: darkgray;
}
}
.good-img {
width: 50px;
height: 50px;
border-radius: 5px;
}
}
}
}
}
}
.content {
display: flex;
justify-content: space-between;
flex-direction: row;
overflow: auto;
background: black;
box-sizing: border-box;
padding: 0 3px;
.left, .right {
width: calc(50% - 1.5px);
}
.item {
width: 100%;
box-sizing: border-box;
margin-bottom: 3px;
.poster {
width: 100%;
max-height: 50vh;
display: block;
}
.location {
padding: 8px 10px 10px 10px;
background: $douyin-bg;
.top, .bottom {
font-size: 1.4rem;
display: flex;
align-items: center;
.logo {
height: 12px;
width: 12px;
margin-right: 8px;
}
.name {
color: white;
}
.line {
margin: 0 4px;
width: 1px;
height: .8rem;
background: gray;
}
}
.bottom {
margin-top: 2px;
font-size: 1rem;
}
}
}
}
}
</style>

266
src/pages/home/我的动态.vue
Unescape View File

@ -0,0 +1,266 @@ @@ -0,0 +1,266 @@
<template>
<div id="attention">
<header>
<span>双流</span>
<div class="arrow"></div>
</header>
<div class="items p10p">
<div class="item mb20p pb20p" v-for="(item,index) of items" :key="index">
<div class="header mb10p">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
<span class="ml5p">TTentau</span>
</div>
<div class="my-comment mb10p">
最靠近北极有个不生不来之地，北极熊比人还多，对中国免签 <span class="tag">#带他去旅行</span>
</div>
<div class="other-comment p10p">
<span class="user-name">@super-man:</span>
<span class="tag">#购物车里是什么</span>
<span>无敌浩克</span>
</div>
<div class="video-container mb10p ">
<video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
<div class="music">
<img src="../../assets/img/icon/music.svg" alt="" class="music-image">
<marquee behavior=scroll direction=left align=middle scrollamount=4> 吴三二 - 光年之外</marquee>
<img src="../../assets/img/icon/play.svg" alt="" class="play">
<img src="../../assets/img/icon/pause.svg" alt="" class="pause" v-if="false">
</div>
</div>
<div class="location mb10p">
<img src="../../assets/img/icon/location.svg" alt="">
<span class="ml5p">东方明珠</span>
</div>
<div class="toolbar mb10p">
<div class="item">
<img src="../../assets/img/icon/love.svg" alt="">
<img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/icon/message.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/icon/love.svg" alt="">
<span class="count">555</span>
</div>
<div class="item">
<img src="../../assets/img/icon/love.svg" alt="">
<span class="count">555</span>
</div>
</div>
<div class="hot-comment pr15p mb5p oh">
<div class="content pull-left ">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">@ttentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
</div>
</div>
<div class="love pull-right">
<img src="../../assets/img/icon/love-gray.svg" alt="" class="love-image">
<img src="../../assets/img/icon/loved.svg" alt="" class="love-image" v-if="false">
<span class="f14 block">3453</span>
</div>
</div>
<span class="time">11小时前</span>
</div>
</div>
<Footer v-bind:init-tab="2" style="position: fixed;"/>
</div>
</template>
<script>
import Footer from '../../components/Footer.vue';
export default {
name: "Attention",
components: {
Footer
},
data() {
return {
items: [
{}, {}, {}
],
height: 0,
width: 0,
footerHeight: 0
}
},
created() {
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
mounted() {
}
}
</script>
<style scoped lang="scss">
#attention {
/*background: rgb(22，24，34);*/
/*background: #161822;*/
//抖音原色，感觉很暗
background: #2e3244;
color: #b8b9c1;
header {
font-size: 1.5rem;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
$arrow-width: 5px;
.arrow {
position: relative;
top: 3px;
left: 5px;
width: 0;
height: 0;
border-top: $arrow-width solid white;
border-right: $arrow-width solid transparent;
border-bottom: $arrow-width solid transparent;
border-left: $arrow-width solid transparent;
}
}
.items {
> .item {
border-bottom: 1px solid #494950;
.header {
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.other-comment {
display: none;
background: #15161b;
border-radius: 10px 10px 0 0;
}
.video-container {
position: relative;
width: 80%;
video {
border-radius: 10px 10px 10px 10px;
width: 100%;
}
.music {
position: absolute;
bottom: 15px;
right: 15px;
left: 15px;
.music-image {
width: 20px;
height: 20px;
margin-top: 3px;
position: absolute;
}
marquee {
width: 50%;
margin-left: 30px;
color: white;
}
.play, .pause {
width: 20px;
height: 20px;
margin-top: 3px;
position: absolute;
right: 0;
}
}
}
.location {
display: flex;
justify-content: flex-start;
align-items: center;
height: 20px;
img {
height: 100%;
}
}
.toolbar {
width: 90%;
height: 25px;
text-align: center;
.item {
height: 100%;
display: flex;
width: 25%;
justify-content: flex-start;
align-items: center;
float: left;
img {
height: 100%;
}
.count {
margin-left: 5px;
}
}
}
.hot-comment {
.content {
float: left;
width: 85%;
.head-image {
width: 40px;
border-radius: 50%;
float: left;
}
.comment-container {
width: 85%;
.time {
color: gray;
}
}
}
.love {
text-align: center;
.love-image {
width: 30px;
border-radius: 50%;
}
}
}
}
.tag {
color: #E6C346;
margin: 0 3px;
}
}
}
</style>

54
src/test.html
Unescape View File

@ -5,53 +5,25 @@ @@ -5,53 +5,25 @@
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.test {
width: 400px;
height: 600px;
.Me{
position: fixed;
font-size: 1.6rem;
width: 100%;
height: 100%;
overflow: hidden;
}
}
.wrapper{
position: relative;
display: flex;
width: 100%;
height: 100%;
}
.left{
left: 0;
top: 0;
position: absolute;
height: 100%;
width: 100%;
background: #333;
overflow-y: scroll;
}
img{
display: block;
width: 400px;
height: 600px;
}
.right{
top: 0;
left: 100%;
position: absolute;
height: 100%;
width: 70%;
color: white;
background: #2e3244;
}
</style>
</head>
<body>
<div class="Me">
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="test">
<img class="poster" src="./assets/img/poster/1.jpg"/>
<div>
123
</div>
</div>
</body>

Write Preview
Loading…
Cancel
Save