You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
8.1 KiB
359 lines
8.1 KiB
<template> |
|
<view class="dabang-index"> |
|
<view class="top-box"> |
|
<view class="dabang-name">连续21天打榜站桩</view> |
|
<view class="desc">抱朴书院孕育自华夏优秀传统文化，以“博学致用，朴含虚”为院训，以“弘扬国粹，利益社会”为动力。</view> |
|
<view class="time-box"> |
|
<span>时间：2021年5月31日 - 2021年6月20日（共21天）</span> |
|
<view class="sanjiao"></view> |
|
</view> |
|
</view> |
|
<view class="join-num">参与人数：231人</view> |
|
<view class="my-progress-box"> |
|
<view class="t-word acea-row row-between-wrapper"> |
|
<text>我的进度</text> |
|
<view> |
|
<text class="to-more" @click="toMyBangdan">我的打榜日记</text> |
|
<text class="iconfont icon-jiantou"></text> |
|
</view> |
|
</view> |
|
<view class="progress-info-box acea-row-nowrap row-between"> |
|
<view class="acea-row"> |
|
<view class="user-headerimg"> |
|
<image src="../../static/img1.png" mode=""></image> |
|
</view> |
|
<view class="user-progress"> |
|
<view class="name">失宠的猫咪</view> |
|
<view class="progress"> |
|
<view class="pro-icon"><image src="../../static/course-icon2.png" mode=""></image></view> |
|
已坚持<text class="colO">7</text>/21 |
|
</view> |
|
<view class="progress"> |
|
<view class="pro-icon"><image src="../../static/course-icon4.png" mode=""></image></view> |
|
完成进度<text class="colO">33</text>% |
|
</view> |
|
<view class="progress"> |
|
<view class="pro-icon"><image src="../../static/course-icon3.png" mode=""></image></view> |
|
全榜排名<text class="colO">12</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="progress-r acea-row row-column row-center-wrapper"> |
|
<text>今日未打榜</text> |
|
<view class="dabang-btn" @click="toEdit">立即打卡</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="tab-box acea-row row-middle"> |
|
<view class="tab-item" :class="active == 0 ? 'tab-item-a' : ''" @click="tabClick(0)">打榜分享</view> |
|
<view class="tab-item" :class="active == 1 ? 'tab-item-a' : ''" @click="tabClick(1)">排行榜</view> |
|
</view> |
|
<!-- 排行榜 --> |
|
<view class="rank-list" v-if="active == 1"> |
|
<view class="rank-item acea-row row-between-wrapper" v-for="(item,index) in 6" :key="index"> |
|
<view class="acea-row row-middle"> |
|
<view class="ranking">{{index+1}}</view> |
|
<view class="header-img"><image src="../../static/img1.png" mode=""></image></view> |
|
<view class="name">失宠的猫咪</view> |
|
</view> |
|
<view class="acea-row row-column row-center-wrapper"> |
|
<view>完成打榜30项</view> |
|
<view class="jifen">3000积分</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 打榜分享 --> |
|
<view class="dabang-share-box" v-else> |
|
<view class="dabang-share-item" v-for="(item,index) in 6" :key="index"> |
|
<view class="user-info-box acea-row row-middle"> |
|
<view class="header-img"> |
|
<image src="../../static/img1.png" mode=""></image> |
|
</view> |
|
<view class="acea-row row-column row-center"> |
|
<view class="name">失宠的猫咪</view> |
|
<view class="create-time">5小时前</view> |
|
</view> |
|
</view> |
|
<view class="share-word"> |
|
抱朴书院孕育自华夏优秀传统文化，以“博学致用，朴含虚”为院训，以“弘扬国粹… |
|
</view> |
|
<view class="img-box acea-row row-around"> |
|
<image src="../../static/img1.png"></image> |
|
<image src="../../static/img1.png"></image> |
|
<image src="../../static/img1.png"></image> |
|
</view> |
|
<view class="zan-box acea-row row-middle row-right"> |
|
<image src="../../static/zan.png"></image> |
|
<text class="zan-conunt">55</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default{ |
|
data(){ |
|
return { |
|
active: 0 |
|
} |
|
}, |
|
methods:{ |
|
tabClick(idx){ |
|
this.active = idx; |
|
}, |
|
toMyBangdan(){ |
|
this.$yrouter.push({ |
|
path:'/pages/study/bangdanRecord' |
|
}) |
|
}, |
|
toEdit(){ |
|
this.$yrouter.push({ |
|
path:'/pages/study/editDabang' |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.dabang-index{ |
|
min-height: 100vh; |
|
background: #fff; |
|
padding-bottom: 100rpx; |
|
.top-box{ |
|
width: 100%; |
|
height: 396rpx; |
|
background: linear-gradient(135deg, #E5B964 0%, #CE9F45 100%); |
|
box-sizing: border-box; |
|
padding: 40rpx 0; |
|
color: #fff; |
|
position: relative; |
|
.dabang-name{ |
|
width: 80%; |
|
font-size: 50rpx; |
|
font-weight: 600; |
|
color: #FFFFFF; |
|
line-height: 72rpx; |
|
margin: 40rpx auto; |
|
} |
|
.desc{ |
|
width: 80%; |
|
margin: 0 auto; |
|
font-size: 24rpx; |
|
color: #FFFFFF; |
|
line-height: 36rpx; |
|
text-indent: 2em; |
|
} |
|
.time-box{ |
|
width: 100%; |
|
height: 78rpx; |
|
line-height: 78rpx; |
|
background: rgba(0,0,0,.1); |
|
font-size: 28rpx; |
|
position: absolute; |
|
bottom: 0; |
|
text-indent: 1em; |
|
} |
|
.sanjiao{ |
|
width:0; |
|
height:0; |
|
border-right:14rpx solid transparent; |
|
border-left:14rpx solid transparent; |
|
border-bottom:16rpx solid #fff; |
|
position: absolute; |
|
left: 50%; |
|
top: 64rpx; |
|
transform: translateX(-50%); |
|
} |
|
} |
|
.join-num{ |
|
width: 406rpx; |
|
height: 58rpx; |
|
background: #FFF2DA; |
|
border-radius: 46rpx; |
|
margin: 30rpx auto; |
|
text-align: center; |
|
line-height: 58rpx; |
|
color: #E49600; |
|
} |
|
.my-progress-box{ |
|
width: 100%; |
|
box-sizing: border-box; |
|
padding: 30rpx; |
|
font-size: 36rpx; |
|
color: #222; |
|
.t-word{ |
|
font-size: 36rpx; |
|
color: #222; |
|
font-weight: 600; |
|
.to-more{ |
|
font-size: 28rpx; |
|
color: #666; |
|
font-weight: normal; |
|
} |
|
.iconfont{ |
|
font-size: 30rpx; |
|
} |
|
} |
|
.progress-info-box{ |
|
margin-top: 30rpx; |
|
width: 690rpx; |
|
height: 280rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0px 4px 8px 0px rgba(239,239,239,0.5); |
|
border-radius: 10rpx; |
|
padding: 30rpx; |
|
.user-headerimg{ |
|
width: 130rpx; |
|
height: 130rpx; |
|
margin-right: 20rpx; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 50px; |
|
} |
|
} |
|
.user-progress{ |
|
font-size: 28rpx; |
|
.name{ |
|
font-size: 32rpx; |
|
font-weight: 500; |
|
color: #222222; |
|
line-height: 44rpx; |
|
} |
|
.colO{ |
|
font-size: 40rpx; |
|
color: #F36F5E; |
|
} |
|
.progress{ |
|
display: flex; |
|
align-items: center; |
|
.pro-icon{ |
|
width: 32rpx; |
|
height: 32rpx; |
|
margin-right: 10rpx; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
.progress-r{ |
|
font-size: 24rpx; |
|
color: #666; |
|
.dabang-btn{ |
|
width: 160rpx; |
|
height: 56rpx; |
|
background: linear-gradient(180deg, #F7D08E 0%, #E2B35D 100%); |
|
border-radius: 35rpx; |
|
text-align: center; |
|
line-height: 56rpx; |
|
color: #fff; |
|
font-size: 28rpx; |
|
margin-top: 10rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.tab-box{ |
|
width: 100%; |
|
padding: 0rpx 30rpx; |
|
font-size: 36rpx; |
|
color: #222; |
|
.tab-item{ |
|
width: 50%; |
|
text-align: center; |
|
border-bottom: 1px solid #ECECEC; |
|
padding: 20rpx 0; |
|
} |
|
.tab-item-a{ |
|
color: #EA533E; |
|
border-bottom: 1px solid #EA533E; |
|
} |
|
} |
|
|
|
.rank-list{ |
|
width: 100%; |
|
padding: 0rpx 30rpx; |
|
.rank-item{ |
|
width: 100%; |
|
padding: 32rpx 0; |
|
border-bottom: 1px solid #ececec; |
|
font-size: 28rpx; |
|
color: #222; |
|
.ranking{ |
|
width: 32rpx; |
|
height: 32rpx; |
|
border-radius: 50%; |
|
line-height: 32rpx; |
|
text-align: center; |
|
color: #fff; |
|
font-size: 24rpx; |
|
background: #EA533E; |
|
} |
|
.header-img{ |
|
width: 82rpx; |
|
height: 82rpx; |
|
border-radius: 50px; |
|
overflow: hidden; |
|
margin: 0 30rpx 0 22rpx; |
|
} |
|
.jifen{ |
|
color: #E5B764; |
|
} |
|
} |
|
} |
|
|
|
.dabang-share-box{ |
|
width: 100%; |
|
padding: 30rpx; |
|
.dabang-share-item{ |
|
color: #222; |
|
padding:20rpx 0; |
|
border-bottom: 1px solid #ececec; |
|
.header-img{ |
|
width: 76rpx; |
|
height: 76rpx; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
margin-right: 10rpx; |
|
} |
|
.name{ |
|
font-size: 28rpx; |
|
line-height: 40rpx; |
|
} |
|
.create-time{ |
|
font-size: 24rpx; |
|
color: #999; |
|
line-height: 34rpx; |
|
} |
|
.share-word{ |
|
font-size: 28rpx; |
|
line-height: 46rpx; |
|
margin: 22rpx 0 30rpx; |
|
} |
|
.img-box{ |
|
image{ |
|
width: 224rpx; |
|
height: 206rpx; |
|
} |
|
} |
|
.zan-box{ |
|
margin-top: 20rpx; |
|
image{ |
|
width: 30rpx; |
|
height: 32rpx; |
|
margin-right: 20rpx; |
|
} |
|
} |
|
} |
|
} |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
</style>
|
|
|