305 lines
9.5 KiB
Vue
305 lines
9.5 KiB
Vue
<template>
|
||
<div class="course-detail" v-if="data">
|
||
<div class="topbar" ref="topbar">
|
||
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||
</div>
|
||
<div class="course-container">
|
||
<div class="practice">
|
||
<h1 class="title">{{data.name}}</h1>
|
||
<div class="accumulation">
|
||
<p>
|
||
<span>今日计数 / 今日目标（遍）：</span>
|
||
<span>
|
||
<b>{{data.now_count}}</b>
|
||
<i>/</i>
|
||
<b>{{data.now_target}}</b>
|
||
<i class="iconfont icon-bianjisekuai"></i>
|
||
</span>
|
||
</p>
|
||
<div class="progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-inline"></div>
|
||
</div>
|
||
<span class="progress-text">{{data.progress || 0}}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="accumulation">
|
||
<p>
|
||
<span>总计数 / 总目标（遍）：</span>
|
||
<span>
|
||
<b>{{data.count}}</b>
|
||
<i>/</i>
|
||
<b>{{data.target}}</b>
|
||
<i class="iconfont icon-bianjisekuai"></i>
|
||
</span>
|
||
</p>
|
||
<div class="progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-inline"></div>
|
||
</div>
|
||
<span class="progress-text">50%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="buddhist-scriptures">
|
||
<div class="scriptures">
|
||
<h3 class="title">功德利益</h3>
|
||
<content-expand>
|
||
<span v-html="data.profit"></span>
|
||
</content-expand>
|
||
</div>
|
||
<div class="scriptures">
|
||
<h3 class="title">经文内容</h3>
|
||
<content-expand>
|
||
<span v-html="data.content"></span>
|
||
</content-expand>
|
||
</div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<a href="#">
|
||
<img src="" alt="">
|
||
</a>
|
||
<div class="merit-rank-container">
|
||
<div class="head">
|
||
<span class="title">排行榜</span>
|
||
<div class="list">
|
||
<span class="current">实时</span>
|
||
<span>月榜</span>
|
||
<span>总榜</span>
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div class="user-merit-course border-bottom" v-for="i in 10" :key="i">
|
||
<img
|
||
src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
|
||
alt=""
|
||
/>
|
||
<div class="profile">
|
||
<div>
|
||
<div class="name">
|
||
<span>李晓华</span>
|
||
<span>湖南长沙</span>
|
||
</div>
|
||
<p>3</p>
|
||
</div>
|
||
</div>
|
||
<div class="result">
|
||
<p class="money">23 遍</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="button-buff">
|
||
<button class="button">恭请法师加持</button>
|
||
</div>
|
||
<!-- 计数 -->
|
||
<div class="on-count" @click="onToCount">
|
||
计数
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCourseDetail } from "@/api"
|
||
|
||
export default {
|
||
data(){
|
||
const { query } = this.$route;
|
||
return {
|
||
query,
|
||
data: null,
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getCourseDetail();
|
||
},
|
||
methods: {
|
||
async getCourseDetail(){
|
||
const res = await getCourseDetail(this.query.id);
|
||
this.data = res;
|
||
},
|
||
onToCount(){
|
||
this.$router.push({
|
||
name: 'user-course-count',
|
||
query: { id: this.data.id }
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.course-detail{
|
||
background: url('~@/assets/img/background.jpeg') top center no-repeat;
|
||
background-size: 100%;
|
||
.on-count{
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 4rem;
|
||
padding: 0 .7rem;
|
||
border-top-left-radius: 1rem;
|
||
border-bottom-left-radius: 1rem;
|
||
background: $primary-color;
|
||
opacity: 0.8;
|
||
height: 1.07rem;
|
||
line-height: 1.07rem;
|
||
font-size: .4rem;
|
||
color: white;
|
||
}
|
||
.course-container{
|
||
padding: .4rem;
|
||
.practice{
|
||
.title{
|
||
font-size: .5rem;
|
||
color: white;
|
||
padding-top: .4rem;
|
||
margin-bottom: 1.33rem;
|
||
}
|
||
.accumulation{
|
||
font-size: .35rem;
|
||
margin-bottom: .8rem;
|
||
p{
|
||
color: white;
|
||
font-size: .4rem;
|
||
.iconfont{
|
||
margin-left: .4rem;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.progress{
|
||
display: flex;
|
||
margin-top: .2rem;
|
||
align-items: center;
|
||
color: white;
|
||
.progress-bar{
|
||
flex: 1;
|
||
border-radius: 8px;
|
||
margin-right: .27rem;
|
||
height: .3rem;
|
||
background: #ddd;
|
||
position: relative;
|
||
.progress-inline{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: .3rem;
|
||
width: 50%;
|
||
background: #188fff;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
.progress-text{
|
||
width: .7rem;
|
||
display: inline-block;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.buddhist-scriptures{
|
||
padding: .4rem;
|
||
margin-top: .9rem;
|
||
.scriptures{
|
||
margin-bottom: .4rem;
|
||
.title{
|
||
font-size: .4rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.merit-rank-container{
|
||
.head{
|
||
padding: .53rem .4rem;
|
||
padding-bottom: .13rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.title{
|
||
font-size: .43rem;
|
||
color: #222222;
|
||
}
|
||
.list{
|
||
display: flex;
|
||
span{
|
||
font-size: .37rem;
|
||
color: #999999;
|
||
display: inline-block;
|
||
margin-left: .4rem;
|
||
border-bottom: .03rem solid transparent;
|
||
padding-bottom: .13rem;
|
||
}
|
||
span.current{
|
||
color: #222;
|
||
border-bottom-color: rgb(168, 28, 28);
|
||
}
|
||
}
|
||
}
|
||
.body{
|
||
.user-merit-course{
|
||
display: flex;
|
||
padding: .27rem 0.4rem;
|
||
img {
|
||
width: 1.17rem;
|
||
height: 1.17rem;
|
||
border-radius: 1.17rem;
|
||
margin-right: 0.4rem;
|
||
}
|
||
.profile {
|
||
flex: 1;
|
||
padding-top: .13rem;
|
||
.name {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-bottom: .27rem;
|
||
span:first-child {
|
||
font-size: 0.4rem;
|
||
color: #777;
|
||
vertical-align: top;
|
||
display: inline-block;
|
||
margin-right: .4rem;
|
||
}
|
||
span:last-child {
|
||
font-size: 0.32rem;
|
||
color: #666;
|
||
vertical-align: text-bottom;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
p {
|
||
font-size: 0.32rem;
|
||
}
|
||
}
|
||
.result {
|
||
font-size: 0.32rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
padding: .13rem 0;
|
||
text-align: right;
|
||
.money {
|
||
font-size: 0.35rem;
|
||
color: #777;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.button-buff{
|
||
text-align: center;
|
||
padding: .4rem;
|
||
.button{
|
||
background: $primary-color;
|
||
border: 1px solid $primary-color;
|
||
font-size: .4rem;
|
||
color: white;
|
||
border-radius: .13rem;
|
||
padding: .27rem .4rem;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |