对接接口

2021-11-03 21:02:22 +08:00
parent 411ecf4c05
commit c5c2f661a0
71 changed files with 5436 additions and 145 deletions
@@ -0,0 +1,141 @@
+<template>
+    <div class="course">
+        <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="my-course border-bottom">
+               <h3 class="title">我的功课</h3>
+               <p class="progress">已修行<span>0</span>天 功课总计<span>0</span>遍</p>
+           </div>
+            <div class="course-wrapper">
+                <div class="course-item" v-for="i in 10" :key="i">
+                    <img src="https://img1.baidu.com/it/u=3055253142,1855499744&fm=26&fmt=auto" alt="">
+                    <div class="course-info">
+                        <h3 class="title">阿弥陀佛圣号</h3>
+                        <p class="summary">
+                            <span>
+                                <i class="iconfont icon-shuben-"></i>
+                                <b>总58遍</b>
+                            </span>
+                            <span>
+                                <i class="iconfont icon-shuben-"></i>
+                                <b>今日58遍</b>
+                            </span>
+                        </p>
+                        <div class="progress-group">
+                            <label for="">今日进度 <span>60%</span></label>
+                            <div class="progress-bar">
+                                <div class="progress"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+       </div>
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    
+}
+</script>
+
+<style lang="scss">
+.course{
+    .course-container{
+        .my-course{
+            padding: .4rem;
+            margin-bottom: .4rem;
+            .title{
+                font-size: .4rem;
+            }
+            .progress{
+                font-size: .35rem;
+                color: #999;
+                padding-top: .2rem;
+                span{
+                    color: $primary-color;
+                    padding: 0 .13rem;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .course-wrapper{
+        padding: 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;
+            }
+            img{
+                width: 2.67rem;
+                height: 2.67rem;
+                vertical-align: top;
+                border-radius: .08rem;
+            }
+            .course-info{
+                flex: 1;
+                margin-left: .53rem;
+                .title{
+                    font-size: .4rem;
+                    padding-top: .13rem;
+                }
+                .summary{
+                    font-size: .30rem;
+                    padding: .1rem 0;
+                    span{
+                        vertical-align: middle;
+                        display: inline-block;
+                        margin-right: .67rem;
+                        color: #666;
+                        i{
+                            vertical-align: text-bottom;
+                        }
+                        b{
+                            vertical-align: middle;
+                            padding-left: .11rem;
+                            line-height: 1.3;
+                        }
+                    }
+                }
+                .progress-group{
+                    font-size: .35rem;
+                    padding-top: .8rem;
+                    label{
+                        font-size: .35rem;
+                        color: #333;
+                        span{
+                            color: red;
+                        }
+                    }
+                    .progress-bar{
+                        background: #f5f5f5;
+                        margin-top: .2rem;
+                        height: .11rem;
+                        position: relative;
+                        border-radius: 4px;
+                        overflow: hidden;
+                        .progress{
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            height: .11rem;
+                            width: 50%;
+                            background: $primary-color;
+                            border-radius: 4px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>