This commit is contained in:
zmr900709
2020-06-02 12:01:13 +08:00
15 changed files with 913 additions and 96 deletions

View File

@@ -0,0 +1,25 @@
<template>
<swiper class="ad" indicator-dots="true" indicator-color="#fff" indicator-active-color="#634838">
<swiper-item></swiper-item>
<swiper-item></swiper-item>
<swiper-item></swiper-item>
</swiper>
</template>
<style lang="scss" scoped>
.ad{
width: 100%;
height: 294rpx;
border-radius: 20rpx;
background-color: #0f0;
}
</style>
<script>
export default {
name:"ad",
data(){
return {
}
}
}
</script>

View File

@@ -0,0 +1,54 @@
<template>
<view class="daren-item">
<image class="head"></image>
<text class="name">这是名字</text>
<text class="zhuangtai">直播状态</text>
<view class="guanzhu">关注</view>
</view>
</template>
<script>
export default {
name:"daren-item"
}
</script>
<style lang="scss" scoped>
.daren-item{
width: 215rpx;
height: 282rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 10rpx;
overflow: hidden;
.head{
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-top: 24rpx;
background-color: #0f0;
}
.name{
font-size: 26rpx;
color: #333;
font-weight: 400;
margin-top: 23rpx;
}
.zhuangtai{
font-size:22rpx;
color: #999;
margin-top: 19rpx;
}
.guanzhu{
width: 130rpx;
height: 50rpx;
background-color: #FF780F;
font-size: 26rpx;
line-height: 50rpx;
color: #fff;
text-align: center;
margin-top: 19rpx;
border-radius: 25rpx;
}
}
</style>

View File

@@ -0,0 +1,96 @@
<template>
<view class="video-item">
<image class="head">
</image>
<view class="title">这是标题这是标题这是标题</view>
<view class="jianjie">这是简介这是简介这是简介</view>
<view class="user">
<view>
<image></image>
<text>这是名字</text>
</view>
<image></image>
</view>
</view>
</template>
<style lang="scss" scoped>
.video-item{
margin-top: 20rpx;
width: 335rpx;
box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
padding-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden;
.head{
width: 100%;
height: 334rpx;
}
.title{
margin:0 auto;
margin-top: 20rpx;
font-size: 22rpx;
color: #333;
font-weight: 500;
line-height: 30rpx;
width: 307rpx;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.jianjie{
margin:0 auto;
margin-top: 20rpx;
font-size: 22rpx;
color: #666;
line-height: 30rpx;
width: 307rpx;
margin-left: 18rpx;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.user{
display: flex;
justify-content: space-between;
align-items: center;
margin:0 auto;
margin-top: 20rpx;
width: 307rpx;
>view{
display: flex;
align-items: center;
>image{
width: 38rpx;
height: 38rpx;
border-radius: 50%;
}
>text{
font-size: 20rpx;
color:#333;
margin-left: 9rpx;
}
}
>image{
width: 37rpx;
height: 8rpx;
}
}
}
</style>
<script>
export default {
name:"index-item",
data(){
return {
}
}
}
</script>

View File

@@ -0,0 +1,75 @@
<template>
<view class="zhibo">
<image class="head"></image>
<view class="user">
<view class="name">
<image></image>
<text>这是名字</text>
</view>
<view class="pingbi">
<image></image>
<text>屏蔽用户</text>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.zhibo{
width: 335rpx;
margin-top: 20rpx;
box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
padding-bottom: 20rpx;
border-radius: 20rpx;
overflow: hidden;
.head{
width: 100%;
height: 425rpx;
}
.user{
display: flex;
justify-content: space-between;
align-items: center;
margin:0 auto;
margin-top: 20rpx;
width: 307rpx;
.name{
display: flex;
align-items: center;
>image{
width: 38rpx;
height: 38rpx;
border-radius: 50%;
}
>text{
font-size: 20rpx;
color:#333;
margin-left: 9rpx;
}
}
.pingbi{
display: flex;
align-items: center;
>text{
font-size: 20rpx;
color: #333;
margin-left: 9rpx;
}
>image{
width: 24rpx;
height: 24rpx;
}
}
}
}
</style>
<script>
export default {
name:"zhibo-item",
data(){
return {
}
}
}
</script>