wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
wenfp
2021-11-04 21:20:31 +08:00
parent c5c2f661a0
commit ec0724c873
38 changed files with 6870 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/user/course/detail/index.vue
+80 -48
View File
@@ -1,18 +1,18 @@
<template>
<div class="course-detail">
<div class="course-detail" v-if="data">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<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">阿弥陀佛圣号</h1>
<h1 class="title">{{data.name}}</h1>
<div class="accumulation">
<p>
<span>今日计数 / 今日目标（遍）：</span>
<span>
<b>23</b>
<b>{{data.now_count}}</b>
<i>/</i>
<b>108</b>
<b>{{data.now_target}}</b>
<i class="iconfont icon-bianjisekuai"></i>
</span>
</p>
@@ -20,16 +20,16 @@
<div class="progress-bar">
<div class="progress-inline"></div>
</div>
<span class="">50%</span>
<span class="progress-text">{{data.progress || 0}}%</span>
</div>
</div>
<div class="accumulation">
<p>
<span>总计数 / 总目标（遍）：</span>
<span>
<b>23</b>
<b>{{data.count}}</b>
<i>/</i>
<b>108</b>
<b>{{data.target}}</b>
<i class="iconfont icon-bianjisekuai"></i>
</span>
</p>
@@ -37,7 +37,7 @@
<div class="progress-bar">
<div class="progress-inline"></div>
</div>
<span class="">50%</span>
<span class="progress-text">50%</span>
</div>
</div>
</div>
@@ -45,23 +45,18 @@
<div class="buddhist-scriptures">
<div class="scriptures">
<h3 class="title">功德利益</h3>
<p class="content">
<span>功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益</span>
</p>
<span class="expand">
<i class="iconfont icon-arrow-down"></i>
</span>
<content-expand>
<span v-html="data.profit"></span>
</content-expand>
</div>
<div class="scriptures">
<h3 class="title">经文内容</h3>
<p class="content">
<span>功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益</span>
</p>
<span class="expand">
<i class="iconfont icon-arrow-down"></i>
</span>
<content-expand>
<span v-html="data.content"></span>
</content-expand>
</div>
</div>
<div class="divider"></div>
<a href="#">
<img src="" alt="">
</a>
@@ -75,7 +70,7 @@
</div>
</div>
<div class="body">
<div class="user-merit-course" v-for="i in 10" :key="i">
<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=""
@@ -98,32 +93,75 @@
<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;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
.practice{
.title{
font-size: .4rem;
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;
@@ -131,25 +169,31 @@ export default {
}
.progress{
display: flex;
margin-top: .4rem;
margin-top: .2rem;
align-items: center;
color: white;
.progress-bar{
flex: 1;
border-radius: 8px;
margin-right: .27rem;
height: .13rem;
height: .3rem;
background: #ddd;
position: relative;
.progress-inline{
position: absolute;
left: 0;
top: 0;
height: .13rem;
height: .3rem;
width: 50%;
background: #188fff;
border-radius: 8px;
}
}
.progress-text{
width: .7rem;
display: inline-block;
text-align: right;
}
}
}
@@ -157,22 +201,14 @@ export default {
}
.buddhist-scriptures{
padding: .4rem;
margin-top: .9rem;
.scriptures{
margin-bottom: .4rem;
.title{
font-size: .4rem;
font-weight: bold;
}
.content{
padding: .2rem 0;
line-height: 1.2;
font-size: .4rem;
}
.expand{
text-align: center;
display: block;
height: 1.07rem;
line-height: 1.07rem;
}
}
}
@@ -206,7 +242,6 @@ export default {
.user-merit-course{
display: flex;
padding: .27rem 0.4rem;
border-bottom: 1px solid #ddd;
img {
width: 1.17rem;
height: 1.17rem;
@@ -222,7 +257,7 @@ export default {
margin-bottom: .27rem;
span:first-child {
font-size: 0.4rem;
color: #222;
color: #777;
vertical-align: top;
display: inline-block;
margin-right: .4rem;
@@ -246,11 +281,8 @@ export default {
padding: .13rem 0;
text-align: right;
.money {
font-size: 0.37rem;
}
.date {
font-size: 0.32rem;
color: #666;
font-size: 0.35rem;
color: #777;
}
}
}