115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 头像 -->
|
||
<view class="header">
|
||
<uni-row class="avatar-box">
|
||
<uni-col :span="6">
|
||
<image class="avatar" :src="userInfo.avatar"></image>
|
||
</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="user-info">
|
||
<uni-icons type="vip-filled" style="color:#eede6f"></uni-icons>
|
||
<text style="color:#eede6f"> 昵称 </text>
|
||
<uni-icons type="vip-filled" style="color:#eede6f"></uni-icons>
|
||
</view>
|
||
<view class="user-info">
|
||
<text>当前已下载：{{download}}</text>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<uni-section class="title" title="已下载" type="line"></uni-section>
|
||
<!-- 已下载列表 -->
|
||
<view class="video-container">
|
||
<view class="video-grid">
|
||
<view
|
||
v-for="(video, index) in list"
|
||
:key="index"
|
||
class="video-item"
|
||
>
|
||
<view class="video-card">
|
||
<video
|
||
:src="video.url"
|
||
:poster="video.poster"
|
||
class="video-player"
|
||
:controls="false"
|
||
:show-center-play-btn="true"
|
||
:autoplay="true"
|
||
:loop="true"
|
||
@play="handlePlay(index)"
|
||
></video>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo:{
|
||
avatar:'https://ts4.tc.mm.bing.net/th/id/OIP-C.-RXVvrUScB5pzqIpuROWNgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3'
|
||
},
|
||
download:0,
|
||
list:[]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
getUserInfo() {
|
||
// 获取用户信息
|
||
},
|
||
getUserDownload(){
|
||
// 获取用户已下载数据
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
/* @font-face {
|
||
font-family: CustomFont;
|
||
src: url('@/static/iconfont/iconfont.ttf');
|
||
} */
|
||
|
||
.header {
|
||
margin: 10rpx;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 10rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.avatar-box {
|
||
margin-top: 20rpx;
|
||
|
||
}
|
||
.avatar {
|
||
margin-left: 30rpx;
|
||
border-radius: 50%;
|
||
height: 150rpx;
|
||
width: 150rpx;
|
||
}
|
||
|
||
.user-info {
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.download-box {
|
||
margin-top: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
</style>
|