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

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

Browse Source
This commit is contained in:
zyronon 2021-06-27 02:38:14 +08:00
parent c06484e0cd
commit e82502a61e
6 changed files with 831 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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
View File

@ -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
*/
$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
$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;
}

197
src/components/Video.vue
View File

@ -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 @@
<!-- <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 {
width: 0,
isPlaying: !this.disabled,
isCommenting: false,
isAttention: false,
isSharing: false,
line: null,
point: null,
@ -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 {
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 {
</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 {
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;
.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;
.no {
opacity: 0;
transform: rotate(180deg);
}
.yes {
opacity: 1;
transform: rotate(0deg);
}
}
}
}
img {
width: 90%;
height: 90%;
}
.love, .message, .share {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.head-image, .music {
width: 100%;
height: 100%;
border-radius: 50%;
}
.love {
img {
width: 40px;
height: 40px;
}
span {
font-size: 11px;
}
}
@ -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 {
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
View File

@ -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>
<Footer v-bind:init-tab="2" style="position: fixed;" />
<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>
</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';
//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;
},
mounted() {
}
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;
}
#attention {
/*background: rgb(22，24，34);*/
/*background: #161822;*/
//抖音原色，感觉很暗
$douyin-bg: #2e3244;
background: $douyin-bg;
color: #b8b9c1;
}
}
.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;
}
}
header {
font-size: 1.5rem;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.love {
text-align: center;
.love-image {
width: 30px;
border-radius: 50%;
}
}
}
}
.tag {
color: #E6C346;
margin: 0 3px;
}
}
$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%);
}
.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 Normal file
View File

@ -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
View File

@ -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;
}
img{
display: block;
width: 400px;
height: 600px;
}
.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;
}
.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>