273 lines
10 KiB
Vue
273 lines
10 KiB
Vue
<template>
|
||
<div class="me">
|
||
<div class="container">
|
||
<!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
|
||
<div class="header">
|
||
<div class="top pt20p pl10p pr10p">
|
||
<img src="../../assets/img/icon/next.svg" alt="">
|
||
<img src="../../assets/img/icon/more.svg" alt="">
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="container pr10p pl10p pt10p">
|
||
<div class="head">
|
||
<img src="../../assets/img/icon/head-image.jpeg" class="head-image ml20p">
|
||
<div class="other-buttons" v-if="false">
|
||
<div class="attention">
|
||
关注
|
||
</div>
|
||
<div class="more-attention">
|
||
-
|
||
</div>
|
||
</div>
|
||
<div class="my-buttons ">
|
||
<div class="collect">
|
||
<img src="../../assets/img/icon/collect-white.svg" alt="">
|
||
<span class="mr5p">收藏</span>
|
||
</div>
|
||
<div class="add-friend">
|
||
<img src="../../assets/img/icon/add-friend-white.svg" alt="">
|
||
</div>
|
||
<div class="qr-code">
|
||
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="description">
|
||
<p class="name f22 mt5p mb5p">ttentau</p>
|
||
<div class="number mb10p">
|
||
<span>抖音号：605128307</span>
|
||
<div class="jrtt">
|
||
<img src="../../assets/img/icon/sina.svg" alt="">
|
||
<span>头条主页</span>
|
||
<img src="../../assets/img/icon/next.svg" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="signature f12 mb10p">
|
||
<span>填写个性签名更容易获得别人关注哦</span>
|
||
</div>
|
||
<div class="info f10 mb10p">
|
||
<div class="age">
|
||
<img src="../../assets/img/icon/person.svg" alt="">
|
||
<span>22岁</span>
|
||
</div>
|
||
<div class="location">
|
||
<span>上海</span>
|
||
</div>
|
||
<div class="school">
|
||
四川理工大学
|
||
</div>
|
||
</div>
|
||
<div class="heat mb10p">
|
||
<span>8获赞</span>
|
||
<span>38关注</span>
|
||
<span>42粉丝</span>
|
||
</div>
|
||
</div>
|
||
<div class="tabset">
|
||
<div class="tab active">
|
||
<span>作品1</span>
|
||
</div>
|
||
<div class="tab">
|
||
<span>动态6</span>
|
||
</div>
|
||
<div class="tab">
|
||
<span>喜欢6</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content oh">
|
||
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}">
|
||
<video src="../../assets/video/吴三二的光年之外.mp4" poster="../../assets/img/poster/src1-bg.png"></video>
|
||
<div class="love">
|
||
<img src="../../assets/img/icon/love.svg" alt="">
|
||
<span class="ml5p">72.3w</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Footer v-bind:init-tab="5" ref="footer" :style="{'top':height-footerHeight+'px'}"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Footer from '../common/Footer';
|
||
|
||
export default {
|
||
name: "Me",
|
||
components: {
|
||
Footer
|
||
},
|
||
data() {
|
||
return {
|
||
videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
|
||
height:0,
|
||
width:0,
|
||
footerHeight:0
|
||
}
|
||
},
|
||
created() {
|
||
self = this;
|
||
this.height = document.body.clientHeight;
|
||
this.width = document.body.clientWidth;
|
||
},
|
||
mounted() {
|
||
let footer = this.$refs.footer.$el;
|
||
this.footerHeight = footer.offsetHeight;
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.me {
|
||
color: white;
|
||
.header {
|
||
background: gray;
|
||
.top {
|
||
/*height: 30%;*/
|
||
height: 100px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: url("../../assets/img/icon/top-bg.jpg");
|
||
img {
|
||
border-radius: 50%;
|
||
padding: 5px;
|
||
background: #524a4a;
|
||
height: 20px;
|
||
width: 20px;
|
||
&:nth-child(1) {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
background-image: url("../../assets/img/icon/head-image.jpeg");
|
||
background-position: center;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
/*height: 60%;*/
|
||
.container {
|
||
height: 100%;
|
||
background-color: #2e3244ed;
|
||
position: relative;
|
||
.head {
|
||
width: 100%;
|
||
right: 10px;
|
||
position: absolute;
|
||
top: -8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.head-image {
|
||
background: black;
|
||
padding: 5px;
|
||
border-radius: 50%;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.my-buttons {
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
float: left;
|
||
border-radius: 2px;
|
||
background: #676767;
|
||
margin-right: 5px;
|
||
img {
|
||
padding: 6px;
|
||
height: 20px;
|
||
}
|
||
span {
|
||
color: #cdcdcd;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.description {
|
||
margin-top: 60px;
|
||
color: white;
|
||
.number {
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid gray;
|
||
.jrtt {
|
||
float: right;
|
||
img {
|
||
height: 10px;
|
||
width: 10px;
|
||
}
|
||
span {
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
}
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
float: left;
|
||
border-radius: 2px;
|
||
background: #676767;
|
||
margin-right: 5px;
|
||
padding: 2px 4px;
|
||
img {
|
||
height: 10px;
|
||
margin-right: 3px;
|
||
}
|
||
span {
|
||
color: #cdcdcd;
|
||
}
|
||
}
|
||
}
|
||
.heat {
|
||
span {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.tabset {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.tab {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
text-align: center;
|
||
width: 30%;
|
||
}
|
||
.active {
|
||
border-bottom: 2px solid gold;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.content {
|
||
.video-container {
|
||
width: 33%;
|
||
float: left;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: .5px solid black;
|
||
video {
|
||
width: 100%;
|
||
}
|
||
.love {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|