更新

src/views/trainStatistics/index.vue

@@ -2,6 +2,13 @@
     <div class="visitList">
         <van-sticky>
             <m-header v-if="headerStatus" :isFixed="false" />
+            <van-tabs v-model="active" title-active-color="#000000" title-inactive-color="#808080" color="#01C1B5" class="van-hairline--bottom">
+                <van-tab title="全部学员" name="all"></van-tab>
+                <van-tab title="待回访学员" name="visited" dot></van-tab>
+            </van-tabs>
+            <div class="visit-tips" v-show="active == 'visited'">
+                <span>学员上周训练时间不足80分钟或训练次数小于4次则需要回访</span>
+            </div>
             <search @onSearch="search" placeholder="学生姓名或手机号">
                 <template #left>
                     <van-dropdown-menu style="padding-right: .1rem" :close-on-click-outside="false" active-color="#01C1B5">
@@ -16,6 +23,36 @@
                     </van-dropdown-menu>
                 </template>
             </search>
+            <van-row class="searchArray">
+                <van-col span="6" class="title-style">
+                    训练时长
+                    <div>
+                        <i class="box box-up active" style="margin-bottom: .02rem;"></i>
+                        <i class="box box-down"></i>
+                    </div>
+                </van-col>
+                <van-col span="6" class="title-style">
+                    训练次数
+                    <div>
+                        <i class="box box-up active" style="margin-bottom: .02rem;"></i>
+                        <i class="box box-down"></i>
+                    </div>
+                </van-col>
+                <van-col span="6" class="title-style">
+                    训练天数
+                    <div>
+                        <i class="box box-up active" style="margin-bottom: .02rem;"></i>
+                        <i class="box box-down"></i>
+                    </div>
+                </van-col>
+                <van-col span="6" class="title-style">
+                    评测次数
+                    <div>
+                        <i class="box box-up active" style="margin-bottom: .02rem;"></i>
+                        <i class="box box-down"></i>
+                    </div>
+                </van-col>
+            </van-row>
         </van-sticky>
 
         <van-list
@@ -24,7 +61,6 @@
             :finished="finished"
             finished-text="- 没有更多了 -"
             :immediate-check="false"
-            style="padding-top: .12rem;"
             @load="getList"
         >
             <van-cell-group class="data-content" v-for="(item, index) in list" :key="index" @click="onHref(item)">
@@ -85,6 +121,7 @@ export default {
     data() {
         return {
             headerStatus: true,
+            active: 'all',
             dataForm: {
                 // 时间下拉框
                 type: null,
@@ -237,15 +274,70 @@ export default {
 
 .visitList {
     min-height: 100vh;
-    .visitTime {
-        .van-cell__right-icon{
-        // line-height: .36rem;
-        }
-    }
+    // .visitTime {
+    //     .van-cell__right-icon{
+    //     // line-height: .36rem;
+    //     }
+    // }
     /deep/.van-dropdown-menu__bar {
         box-shadow: none;
     }
 }
+.visit-tips {
+    background-color: #fff;
+    padding: 10px 10px 0;
+    span {
+        display: inline-block;
+        padding: 6px 12px;
+        background-color: #FFF6DE;
+        font-size: 12px;
+        color: #FF802C;
+    }
+}
+/deep/.van-tab {
+    font-size: .16rem;
+}
+/deep/.search .van-search {
+    margin: 10px 0 ;
+}
+.searchArray {
+    font-size: .14rem;
+    padding-top: .15rem;
+    padding-bottom: .12rem;
+    color: #1A1A1A;
+    background-color: #f5f5f5;
+}
+.title-style {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: .02rem;
+}
+.box-up {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 5px solid #ccc;
+    &.active {
+        border-bottom-color: #01C1B5;
+    }
+}
+.box-down {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid #ccc;
+    &.active {
+        border-top-color: #01C1B5;
+    }
+}
 .data-content {
     margin: .15rem .15rem 0;
     border-radius: .1rem;
@@ -288,25 +380,6 @@ export default {
         }
     }
 }
-// .cellGroup {
-//   display: flex;
-//   align-items: center;
-//   line-height: .61rem;
-//   .logo {
-//     width: 0.35rem;
-//     height: 0.35rem;
-//     // margin-right: 0.12rem;
-//     border-radius: 100%;
-//   }
-//   .type {
-//       line-height: 1.2;
-//   }
-// }
-// /deep/.van-cell__title {
-//   font-size: 0.14rem;
-//   color: @mFontColor;
-//   flex: 1 auto;
-// }
 .btnWrap {
   display: flex;
   flex-direction: row;
@@ -327,15 +400,5 @@ export default {
     text-align: center;
   }
 }
-// .van-cell{
-//     color: #1A1A1A;
-//     line-height: .36rem!important;
-//     font-size: .16rem;
-// }
-// /deep/.van-col--9 {
-//     display: flex;
-// }
-// /deep/.van-col--5 {
-//     text-align: center;
-// }
+
 </style>