zyronon
7 years ago
14 changed files with 607 additions and 164 deletions
|
After Width: | Height: | Size: 606 KiB |
@ -1,13 +1,264 @@
@@ -1,13 +1,264 @@
|
||||
<template> |
||||
$END$ |
||||
<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"></video> |
||||
<div class="love"> |
||||
<img src="../../assets/img/icon/love.svg" alt=""> |
||||
<span class="ml5p">72.3w</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Footer from '../common/Footer'; |
||||
|
||||
export default { |
||||
name: "Other" |
||||
name: "Other", |
||||
components: { |
||||
Footer |
||||
}, |
||||
data() { |
||||
return { |
||||
height: 0, |
||||
width: 0, |
||||
videos: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}], |
||||
} |
||||
}, |
||||
created() { |
||||
this.height = window.screen.height; |
||||
this.width = window.screen.width; |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
<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> |
||||
|
||||
Loading…
Reference in new issue