对接接口
This commit is contained in:
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="course-detail">
|
||||
<div class="topbar" ref="topbar">
|
||||
<van-nav-bar left-arrow :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>
|
||||
<div class="accumulation">
|
||||
<p>
|
||||
<span>今日计数 / 今日目标（遍）：</span>
|
||||
<span>
|
||||
<b>23</b>
|
||||
<i>/</i>
|
||||
<b>108</b>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</span>
|
||||
</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-inline"></div>
|
||||
</div>
|
||||
<span class="">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accumulation">
|
||||
<p>
|
||||
<span>总计数 / 总目标（遍）：</span>
|
||||
<span>
|
||||
<b>23</b>
|
||||
<i>/</i>
|
||||
<b>108</b>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</span>
|
||||
</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-inline"></div>
|
||||
</div>
|
||||
<span class="">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</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" 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.course-detail{
|
||||
.course-container{
|
||||
padding: .4rem;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #ddd;
|
||||
.practice{
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
margin-bottom: 1.33rem;
|
||||
}
|
||||
.accumulation{
|
||||
font-size: .35rem;
|
||||
margin-bottom: .8rem;
|
||||
p{
|
||||
.iconfont{
|
||||
margin-left: .4rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
display: flex;
|
||||
margin-top: .4rem;
|
||||
align-items: center;
|
||||
.progress-bar{
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
margin-right: .27rem;
|
||||
height: .13rem;
|
||||
background: #ddd;
|
||||
position: relative;
|
||||
.progress-inline{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: .13rem;
|
||||
width: 50%;
|
||||
background: #188fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.buddhist-scriptures{
|
||||
padding: .4rem;
|
||||
.scriptures{
|
||||
margin-bottom: .4rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.content{
|
||||
padding: .2rem 0;
|
||||
line-height: 1.2;
|
||||
font-size: .4rem;
|
||||
}
|
||||
.expand{
|
||||
text-align: center;
|
||||
display: block;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
border-bottom: 1px solid #ddd;
|
||||
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: #222;
|
||||
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.37rem;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user