Browse Source

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

pull/19/head
zyronon 4 years ago
parent
commit
e82502a61e
  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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 253 B

128
src/assets/scss/utils.scss

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

195
src/components/Video.vue

@ -11,8 +11,17 @@
<div class="float"> <div class="float">
<div :style="{opacity:isMove?0:1}" class="normal"> <div :style="{opacity:isMove?0:1}" class="normal">
<div class="toolbar mb10p"> <div class="toolbar mb10p">
<img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image mb15p" <div class="avatar-ctn mb15p">
@click.stop="$emit('goUserInfo')"> <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 class="love mb15p" @click.stop="loved($event)">
<div> <div>
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!video.isLoved"> <img src="../assets/img/icon/love.svg" class="love-image" v-if="!video.isLoved">
@ -22,17 +31,23 @@
<!-- <transition name="loved">--> <!-- <transition name="loved">-->
<!-- </transition>--> <!-- </transition>-->
</div> </div>
<span class="f14">{{ video.loves }}</span> <span>{{ video.loves }}</span>
</div> </div>
<div class="message mb15p" @click.stop="$emit('showComments')"> <div class="message mb15p" @click.stop="$emit('showComments')">
<img src="../assets/img/icon/message.svg" alt="" class="message-image"> <img src="../assets/img/icon/message.svg" alt="" class="message-image">
<span class="f14">{{ video.comments }}</span> <span>{{ video.comments }}</span>
</div> </div>
<div class="share mb35p" @click.stop="$emit('showShare')"> <div class="share mb35p" @click.stop="$emit('showShare')">
<img src="../assets/img/icon/share.svg" alt="" class="share-image"> <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> </div>
<img src="../assets/img/icon/head-image.jpeg" alt="" class="music" @click.stop="$nav('/music')">
</div> </div>
<div class="content ml10p mb10p" @click.stop="goUserInfo()"> <div class="content ml10p mb10p" @click.stop="goUserInfo()">
<div class="name mb10p">@TTentau</div> <div class="name mb10p">@TTentau</div>
@ -134,6 +149,7 @@ export default {
width: 0, width: 0,
isPlaying: !this.disabled, isPlaying: !this.disabled,
isCommenting: false, isCommenting: false,
isAttention: false,
isSharing: false, isSharing: false,
line: null, line: null,
point: null, point: null,
@ -154,10 +170,14 @@ export default {
v.isMove ? this.move(v.e) : this.end(v.e) v.isMove ? this.move(v.e) : this.end(v.e)
}) })
}, },
unmounted() {
console.log('unmounted')
},
methods: { methods: {
attention() {
let option = this.$refs['attention-option']
option.classList.add('attention')
setTimeout(() => {
this.isAttention = true
}, 1000)
},
// //
swipingVideo() { swipingVideo() {
let videos = this.$refs.video let videos = this.$refs.video
@ -224,9 +244,9 @@ export default {
this.$stopPropagation(e) this.$stopPropagation(e)
}, },
end(e) { end(e) {
setTimeout(()=>{ setTimeout(() => {
this.isMove = false this.isMove = false
},1000) }, 1000)
let video = this.$refs.video let video = this.$refs.video
video.currentTime = this.currentTime video.currentTime = this.currentTime
video.play() video.play()
@ -238,6 +258,15 @@ export default {
</script> </script>
<style scoped lang="scss"> <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 { .bg-video {
position: relative; position: relative;
background: black; background: black;
@ -282,30 +311,78 @@ export default {
position: relative; position: relative;
.toolbar { .toolbar {
width: 40px; //width: 40px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 20px; right: 5px;
color: #fff; color: #fff;
div { .avatar-ctn {
text-align: center; position: relative;
}
img { .avatar {
width: 90%; width: 55px;
height: 90%; 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 { .no {
width: 100%; opacity: 0;
height: 100%; transform: rotate(180deg);
border-radius: 50%; }
.yes {
opacity: 1;
transform: rotate(0deg);
}
}
}
} }
.love { .love, .message, .share {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img { img {
width: 40px;
height: 40px;
}
span {
font-size: 11px;
} }
} }
@ -313,8 +390,46 @@ export default {
background: red; background: red;
} }
.music { .music-ctn {
animation: animations 4s linear forwards infinite; 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 { @keyframes animations {
@ -325,6 +440,32 @@ export default {
transform: rotate(360deg); 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 { .content {

519
src/pages/home/Attention.vue

@ -1,218 +1,337 @@
<template> <template>
<div id="attention" > <div id="attention">
<div class="items p10p"> <header>
<div class="item mb20p pb20p" v-for="(item,index) of items" :key="index" > <span>双流</span>
<div class="header mb10p"> <div class="arrow"></div>
<img src="../../assets/img/icon/head-image.jpeg" alt=""> </header>
<span class="ml5p">TTentau</span> <div class="ad">
</div> <div class="title">超值卖场 次日达</div>
<div class="my-comment mb10p"> <div class="good-ctn">
最靠近北极有个不生不来之地北极熊比人还多对中国免签 <span class="tag">#带他去旅行</span> <div class="left">
</div> <div class="left-title">
<div class="other-comment p10p"> <span>限量秒杀</span>
<span class="user-name">@super-man:</span> <div>低至0.99</div>
<span class="tag">#购物车里是什么</span> </div>
<span>无敌浩克</span> <div class="goods">
</div> <div class="good">
<div class="video-container mb10p "> <img class="good-img" src="../../assets/img/poster/1.jpg"/>
<video src="../../assets/video/1.mp4" poster="../../assets/img/poster/src1-bg.png"></video> <div class="name">每日坚果5包</div>
<div class="music"> <div class="price">0.99</div>
<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>
<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> </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> </div>
<Footer v-bind:init-tab="2" style="position: fixed;"/>
</div>
</template> </template>
<script> <script>
import Footer from '../../components/Footer.vue'; //TODO item
import Footer from '../../components/Footer.vue';
export default {
name: "Attention", export default {
components: { name: "Attention",
Footer components: {
}, Footer
data(){ },
return { data() {
items:[ return {
{},{},{} items: [],
], height: 0,
height:0, width: 0,
width:0, footerHeight: 0
footerHeight:0 }
} },
}, created() {
created() { this.height = document.body.clientHeight;
this.height = document.body.clientHeight; this.width = document.body.clientWidth;
this.width = document.body.clientWidth; },
}, computed: {
mounted() { 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
#attention { #attention {
position: fixed; /*background: rgb(22,24,34);*/
/*background: rgb(22,24,34);*/ /*background: #161822;*/
/*background: #161822;*/ //
// $douyin-bg: #2e3244;
background: #2e3244; background: $douyin-bg;
color: #b8b9c1; color: #b8b9c1;
.items {
>.item { header {
border-bottom: 1px solid #494950; font-size: 1.5rem;
.header { height: 50px;
display: flex; display: flex;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
img {
width: 40px; $arrow-width: 5px;
height: 40px;
border-radius: 50%; .arrow {
} position: relative;
} top: 3px;
.other-comment { left: 5px;
display: none; width: 0;
background: #15161b; height: 0;
border-radius: 10px 10px 0 0; border-top: $arrow-width solid white;
} border-right: $arrow-width solid transparent;
.video-container { border-bottom: $arrow-width solid transparent;
position: relative; border-left: $arrow-width solid transparent;
width: 80%; }
video { }
border-radius: 10px 10px 10px 10px;
width: 100%; .ad {
} padding: 10px;
.music { color: white;
position: absolute;
bottom: 15px; .title {
right: 15px; margin-bottom: 15px;
left: 15px; font-size: 1.8rem;
.music-image { font-weight: bold;
width: 20px; }
height: 20px;
margin-top: 3px; .good-ctn {
position: absolute; display: flex;
} justify-content: space-between;
marquee {
width: 50%; .left, .right {
margin-left: 30px; width: calc(50% - 3px);
color: white; }
}
.play, .pause {
width: 20px; .left {
height: 20px; padding: 10px;
margin-top: 3px; box-sizing: border-box;
position: absolute; border-radius: 5px;
right: 0; background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
}
} .left-title {
} font-weight: bold;
.location { font-size: 1.7rem;
display: flex; display: flex;
justify-content: flex-start; align-items: center;
align-items: center; margin-bottom: 10px;
height: 20px;
img { div {
height: 100%; background: linear-gradient(to top right, #e37c7c, #bd5959);
} padding: 0 4px 2px 4px;
} border-radius: 3px;
.toolbar{ font-size: 1rem;
width: 90%; font-weight: lighter;
height: 25px; margin-left: 5px;
text-align: center; }
.item { }
height: 100%;
display: flex; .goods {
width: 25%; display: flex;
justify-content: flex-start; justify-content: space-between;
align-items: center;
float: left; .good {
img{ width: calc(50% - 5px);
height: 100%;
} .good-img {
.count{ width: 100%;
margin-left: 5px; height: 50px;
} border-radius: 5px;
} }
}
.hot-comment { .name {
.content { margin-top: 5px;
float: left; }
width: 85%;
.head-image { .price {
width: 40px; font-size: 1rem;
border-radius: 50%; }
float: left; }
} }
.comment-container { }
width: 85%;
.time { .right {
color: gray; .goods {
} height: 100%;
} display: flex;
flex-direction: column;
} justify-content: space-between;
.love {
text-align: center; .good {
.love-image { height: calc(50% - 3px);
width: 30px; border-radius: 5px;
border-radius: 50%; 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; .notice {
margin: 0 3px; 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> </style>

266
src/pages/home/我的动态.vue

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

@ -5,53 +5,25 @@
<title>Title</title> <title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
html, body { .test {
padding: 0; width: 400px;
margin: 0; height: 600px;
width: 100%;
height: 100%;
}
.Me{ }
position: fixed;
font-size: 1.6rem;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper{ img{
position: relative; display: block;
display: flex; width: 400px;
width: 100%; height: 600px;
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> </style>
</head> </head>
<body> <body>
<div class="Me"> <div class="test">
<div class="wrapper"> <img class="poster" src="./assets/img/poster/1.jpg"/>
<div class="left"></div> <div>
<div class="right"></div> 123
</div> </div>
</div> </div>
</body> </body>

Loading…
Cancel
Save