From 137db1d01bc30a6136ddae569965f2d3a3274139 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Tue, 11 Mar 2025 16:32:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(coach):=20=E6=95=99=E7=BB=83=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加用户信息和统计数据显示模块
- 新增课程预告和最近课程列表
- 增加作业批改功能和相关数据展示
- 优化页面布局和样式，增加底部导航组件
---
 pages/coach/home/index.vue | 334 +++++++++++++++++++++++++++++++++++--
 1 file changed, 322 insertions(+), 12 deletions(-)

diff --git a/pages/coach/home/index.vue b/pages/coach/home/index.vue
index 4c5d854..8350663 100644
--- a/pages/coach/home/index.vue
+++ b/pages/coach/home/index.vue
@@ -1,6 +1,25 @@
 <template>
-  <view>
+  <view class="main_section">
     <view class="section_1">
+     <view class="top">
+       <view class="user">
+         <view class="pic">
+           <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
+         </view>
+         <view class="name">包子皮</view>
+       </view>
+       <view class="right">
+         <view>
+           <text class="title">到课率统计</text>
+           <text>28%</text>
+         </view>
+         <view>
+           <text class="title">发布作业</text>
+           <text>28%</text>
+         </view>
+       </view>
+     </view>
+     <view class="bottom"></view>
       <view class="text_box">
         <text>月授课数</text>
         <text>12</text>
@@ -9,19 +28,152 @@
         <text>名</text>
       </view>
     </view>
-    <view class="section_2"></view>
-    <view class="section_3"></view>
-    <view class="section_3"></view>
+
+    <view class="section_2">
+      <view class="left_box">
+        <view>
+          <text>课程</text>
+          <text>预告</text>
+        </view>
+        <view>
+          <text>5/28周五 15:30~17:30</text>
+          <text>301室篮球少儿课程</text>
+        </view>
+      </view>
+      <view class="rigth_box">
+        <view>详情</view>
+      </view>
+    </view>
+
+    <view class="section_3">
+      <view class="title_box">
+        <view class="top_box">
+          <text>最近课程</text>
+          <view></view>
+        </view>
+        <view class="line"></view>
+      </view>
+      <view class="ul">
+        <view class="li">
+          <view class="left_box">
+            <view class="date_box">
+              <text>12</text>
+              <text>/</text>
+              <text>24</text>
+            </view>
+            <view class="ratio">
+              到课率：80%
+            </view>
+          </view>
+          <view class="center_box">
+            <view>班级：少年班</view>
+            <view>时间：2020-05-25 15:30 - 17:30</view>
+            <view>课室：302室
+            </view>
+            <view>课程：篮球少儿课
+            </view>
+          </view>
+          <view class="right_box">
+            <view class="tag" style="background:#fad24e;">上课中</view>
+<!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
+          </view>
+        </view>
+        <view class="li">
+          <view class="left_box">
+            <view class="date_box">
+              <text>12</text>
+              <text>/</text>
+              <text>24</text>
+            </view>
+            <view class="ratio">
+              到课率：80%
+            </view>
+          </view>
+          <view class="center_box">
+            <view>班级：少年班</view>
+            <view>时间：2020-05-25 15:30 - 17:30</view>
+            <view>课室：302室
+            </view>
+            <view>课程：篮球少儿课
+            </view>
+          </view>
+          <view class="right_box">
+            <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
+            <view class="tag" style="background:#1cd188;">待上课</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="section_3">
+      <view class="title_box">
+        <view class="top_box">
+          <text>作业批改</text>
+          <view>全部</view>
+        </view>
+        <view class="line"></view>
+      </view>
+      <view class="ul">
+        <view class="li">
+          <view class="left_box">
+            <view class="date_box">
+              <text>12</text>
+              <text>/</text>
+              <text>24</text>
+            </view>
+            <view class="ratio">
+              完成率：80%
+            </view>
+          </view>
+          <view class="center_box">
+            <view>班级：少年班</view>
+            <view>时间：2020-05-25 15:30 - 17:30</view>
+            <view>课程：篮球少儿课
+            </view>
+          </view>
+          <view class="right_box">
+<!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
+                        <view class="tag" style="background:#1cd188;">待批改</view>
+          </view>
+        </view>
+        <view class="li">
+          <view class="left_box">
+            <view class="date_box">
+              <text>12</text>
+              <text>/</text>
+              <text>24</text>
+            </view>
+            <view class="ratio">
+              完成率：80%
+            </view>
+          </view>
+          <view class="center_box">
+            <view>班级：少年班</view>
+            <view>时间：2020-05-25 15:30 - 17:30</view>
+            <view>课程：篮球少儿课
+            </view>
+          </view>
+          <view class="right_box">
+            <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
+            <view class="tag" style="background:#1cd188;">待批改</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+<!--    底部导航-->
+    <AQTabber/>
   </view>
 </template>
 
 <script>
 import user from '@/api/user.js';
-import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
+import AQTabber from "@/components/AQ/AQTabber.vue"
+
 
 export default {
   components: {
-    fuiIcon
+    AQTabber,
   },
   data() {
     return {
@@ -135,14 +287,172 @@ export default {
 
 <style lang="less" scoped>
 
-.section_1{
-  border: 1px solid red;
-  width: 700rpx;
-  height: 264rpx;
-  border-radius: 14rpx;
-  .text_box{
+.main_section{
+  min-height: 100vh;
+  background: #292929 100%;
+  padding: 0 24rpx;
+  padding-top: 20rpx;
+  padding-bottom: 150rpx;
+  font-size: 28rpx;
+  .section_1{
+    background: #FFFFFF 100%;
+    height: 264rpx;
+    border-radius: 14rpx;
+    margin: 28rpx auto;
+    padding: 28rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 28rpx;
+    .top{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .user{
+        display: flex;
+        align-items: center;
+        gap: 20rpx;
+        .pic{
+          width: 144rpx;
+          height: 144rpx;
+          border-radius: 50%;
+          image{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .right{
+        display: flex;
+        flex-direction: column;
+        gap: 20rpx;
+        view{
+          display: flex;
+          gap: 10rpx;
+          .title{
+            width: 148rpx;
+            text-align: right;
+          }
+        }
+      }
+    }
+    .bottom{
+      padding: 0 44rpx;
+    }
+  }
 
+  .section_2{
+    border-radius: 60rpx;
+    padding: 28rpx 36rpx;
+    background: #29D3B4 100%;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left_box{
+      display: flex;
+      view{
+        display: flex;
+        flex-direction: column;
+        text{}
+      }
+      view:nth-child(1){
+        padding-right: 10rpx;
+        border-right: 2px solid #fff;
+      }
+      view:nth-child(2){
+        padding-left: 10rpx;
+      }
+    }
+    .rigth_box{
+      view{
+        width: 106rpx;
+        height: 50rpx;
+        line-height: 50rpx;
+        text-align: center;
+        border-radius: 25rpx;
+        background: #32baa1;
+        font-size: 24rpx;
+      }
+    }
   }
+
+  .section_3{
+    margin-top: 36rpx;
+    color: #fff;
+    font-size: 24rpx;
+    .title_box{
+      display: flex;
+      flex-direction: column;
+      .top_box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        text{
+          font-size: 30rpx;
+        }
+      }
+      .line{
+        width: 90rpx;
+        height: 2px;
+        background: #29D3B4;
+      }
+    }
+    .ul{
+      margin-top: 30rpx;
+      display: flex;
+      flex-direction: column;
+      gap: 20rpx;
+      .li{
+        position: relative;
+        border-radius: 22rpx;
+        background: #434544 100%;
+        padding: 14rpx 0;
+        display: flex;
+        align-items: center;
+        .left_box{
+          margin-left: 28rpx;
+          width: 146rpx;
+          display: flex;
+          flex-direction: column;
+          gap: 10rpx;
+          .date_box{
+            display: flex;
+            font-size: 48rpx;
+            text:nth-child(1){
+              color: #29D3B4;
+            }
+          }
+          .ratio{
+            color: #AAAAAA;
+          }
+        }
+        .center_box{
+          margin-left: 52rpx;
+          display: flex;
+          flex-direction: column;
+          gap: 10rpx;
+        }
+        .right_box{
+          .tag{
+            position:absolute;
+            top: 0rpx;
+            right: 0rpx;
+            padding: 10rpx;
+            width: 102rpx;
+            text-align: center;
+            font-size: 24rpx;
+            border-bottom-left-radius: 20rpx;
+            border-top-right-radius: 20rpx;
+          }
+
+        }
+      }
+
+    }
+  }
+
 }
 
+
 </style>
\ No newline at end of file