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

update

Browse Source
This commit is contained in:
wenfp
2025-05-21 15:48:27 +08:00
parent 553cc38b67
commit b3862ac356
33 changed files with 35390 additions and 16882 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/user/course/index.vue
+78 -73
View File
@@ -1,150 +1,155 @@
<template>
<div class="course" 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}" />
<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="my-course border-bottom">
<h3 class="title">我的功课</h3>
<p class="progress">已修行<span>{{data.practise_day}}</span>天 功课总计<span>{{data.practise_total}}</span>遍</p>
</div>
<div class="course-container">
<div class="my-course border-bottom">
<h3 class="title">我的功课</h3>
<p class="progress">
已修行<span>{{ data.practise_day }}</span
>天 功课总计<span>{{ data.practise_total }}</span
>遍
</p>
</div>
<div class="course-wrapper">
<div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({name: 'user-course-detail', query: { id: course.id}})">
<img :src="course.cover" alt="">
<div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({ name: 'user-course-detail', query: { id: course.id } })">
<img :src="course.cover" alt="" />
<div class="course-info">
<h3 class="title">{{course.name}}</h3>
<h3 class="title">{{ course.name }}</h3>
<p class="summary">
<span>
<i class="iconfont icon-shuben-"></i>
<b>总{{course.target}}遍</b>
<b>总{{ course.target }}遍</b>
</span>
<span>
<i class="iconfont icon-shuben-"></i>
<b>今日{{course.now_target}}遍</b>
<b>今日{{ course.now_target }}遍</b>
</span>
</p>
<div class="progress-group">
<label for="">今日进度 <span>{{course.progress}}%</span></label>
<label for=""
>今日进度 <span>{{ course.progress }}%</span></label
>
<div class="progress-bar">
<div class="progress" :style="{width: course.progress + '%'}"></div>
<div class="progress" :style="{ width: course.progress + '%' }"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getCourseList } from '@/api';
import { getCourseList } from "@/api";
export default {
data(){
data() {
return {
data: null,
courseList: []
}
courseList: [],
};
},
mounted(){
this.getCourseList()
mounted() {
this.getCourseList();
},
methods: {
async getCourseList(){
async getCourseList() {
const res = await getCourseList();
console.log(res)
this.data = res;
}
}
}
},
},
};
</script>
<style lang="scss">
.course{
.course-container{
.my-course{
padding: .4rem;
margin-bottom: .4rem;
.title{
font-size: .4rem;
.course {
.course-container {
.my-course {
padding: 0.4rem;
margin-bottom: 0.4rem;
.title {
font-size: 0.4rem;
}
.progress{
font-size: .35rem;
.progress {
font-size: 0.35rem;
color: #999;
padding-top: .2rem;
span{
padding-top: 0.2rem;
span {
color: $primary-color;
padding: 0 .13rem;
padding: 0 0.13rem;
font-weight: bold;
}
}
}
}
.course-wrapper{
padding: 0 .4rem;
.course-item{
.course-wrapper {
padding: 0 0.4rem;
.course-item {
display: flex;
padding: .4rem;
box-shadow: 0 0 .13rem rgba(0,0,0,0.1);
border-radius: .13rem;
& ~ .course-item{
margin-top: .53rem;
padding: 0.4rem;
box-shadow: 0 0 0.13rem rgba(0, 0, 0, 0.1);
border-radius: 0.13rem;
& ~ .course-item {
margin-top: 0.53rem;
}
img{
img {
width: 2.67rem;
height: 2.67rem;
vertical-align: top;
border-radius: .08rem;
border-radius: 0.08rem;
}
.course-info{
.course-info {
flex: 1;
margin-left: .53rem;
.title{
font-size: .4rem;
padding-top: .13rem;
margin-left: 0.53rem;
.title {
font-size: 0.4rem;
padding-top: 0.13rem;
}
.summary{
font-size: .30rem;
padding: .1rem 0;
margin-top: .2rem;
span{
.summary {
font-size: 0.3rem;
padding: 0.1rem 0;
margin-top: 0.2rem;
span {
vertical-align: middle;
display: inline-block;
margin-right: .67rem;
margin-right: 0.67rem;
color: #666;
i{
i {
vertical-align: text-bottom;
}
b{
b {
vertical-align: middle;
padding-left: .11rem;
padding-left: 0.11rem;
line-height: 1.3;
}
}
}
.progress-group{
font-size: .35rem;
padding-top: .6rem;
label{
font-size: .3rem;
.progress-group {
font-size: 0.35rem;
padding-top: 0.6rem;
label {
font-size: 0.3rem;
color: #666;
span{
span {
color: $primary-color;
font-weight: bold;
}
}
.progress-bar{
.progress-bar {
background: #f5f5f5;
margin-top: .2rem;
height: .11rem;
margin-top: 0.2rem;
height: 0.11rem;
position: relative;
border-radius: 4px;
overflow: hidden;
.progress{
.progress {
position: absolute;
left: 0;
top: 0;
height: .11rem;
height: 0.11rem;
width: 50%;
background: $primary-color;
border-radius: 4px;
@@ -155,4 +160,4 @@ export default {
}
}
}
</style>
</style>