写一个类似腾讯视频我的主页的wxml和wxss代码
时间: 2024-05-24 13:12:24 浏览: 20
WXML代码:
```
<view class="container">
<view class="header">
<image class="avatar" src="https://example.com/avatar.png"></image>
<view class="info">
<view class="nickname">小明</view>
<view class="level">LV.8</view>
<view class="follow">
<view class="count">100</view>
<view class="label">关注</view>
</view>
<view class="fans">
<view class="count">50</view>
<view class="label">粉丝</view>
</view>
</view>
</view>
<view class="list">
<view class="item">
<image class="cover" src="https://example.com/cover1.png"></image>
<view class="title">视频标题1</view>
</view>
<view class="item">
<image class="cover" src="https://example.com/cover2.png"></image>
<view class="title">视频标题2</view>
</view>
<view class="item">
<image class="cover" src="https://example.com/cover3.png"></image>
<view class="title">视频标题3</view>
</view>
</view>
</view>
```
WXSS代码:
```
.container {
padding: 20rpx;
}
.header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.avatar {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.info {
display: flex;
flex-direction: column;
}
.nickname {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.level {
font-size: 28rpx;
color: #999;
margin-bottom: 10rpx;
}
.follow, .fans {
display: flex;
align-items: center;
margin-right: 20rpx;
}
.count {
font-size: 28rpx;
font-weight: bold;
margin-right: 10rpx;
}
.label {
font-size: 28rpx;
color: #999;
}
.list {
display: flex;
flex-wrap: wrap;
}
.item {
position: relative;
width: 30%;
margin-right: 5%;
margin-bottom: 20rpx;
}
.cover {
width: 100%;
height: 0;
padding-bottom: 56.25%;
background-size: cover;
border-radius: 10rpx;
}
.title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10rpx;
font-size: 28rpx;
color: #fff;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 0 0 10rpx 10rpx;
}
```