From 5addd16d46bc7a48fa15f91f1e4c1409f3bfe6be Mon Sep 17 00:00:00 2001
From: bai <1643359946@qq.com>
Date: Sun, 2 Apr 2023 14:50:56 +0800
Subject: [PATCH] =?UTF-8?q?2023=E5=B9=B44=E6=9C=882=E6=97=A5=20=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E9=97=A8=E6=88=B7=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/site/index.vue | 206 +++++++++++++++++++++++++++++++--------
 1 file changed, 168 insertions(+), 38 deletions(-)

diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index 2ce24c5..a0477de 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="siteMain">
+    <div id="maxSite">
     <!-- <a-card>
       <div>
         <h1>首页</h1>
@@ -24,6 +25,7 @@
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
     <a-layout>
       <a-layout-header>
+        <BackTop :visibilityHeight="1"/>
         <span class="topTitle">管理系统</span>
         <span class="topRight">
           <a-dropdown>
@@ -46,19 +48,123 @@
         </span>
       </a-layout-header>
       <a-layout-content>
-        内容流区域
-      </a-layout-content>
+        <a-row class="rowGutter" :gutter="[16,16]">
+          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
+            <a-card title="今日课堂数">
+              <Statistic title="总数" :value="112893"/>
+              <Statistic title="已下课" :value="112893"/>
+            </a-card>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
+            <a-card title="上课中">
+              ..............
+            </a-card>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
+            <a-card title="已开课堂数">
+              ..............
+            </a-card>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
+            <a-card title="今日听课">
+              ..............
+            </a-card>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
+            <div style="margin: 0 auto;width: fit-content;font-size: 3.5rem;color: #cccccc8c;">
+              <PlusOutlined/>
+            </div>
+          </a-col>
+        </a-row>
+        <div class="rowGutter">
+          <a-carousel>
+            <div><h3>1</h3></div>
+            <div><h3>2</h3></div>
+            <div><h3>3</h3></div>
+            <div><h3>4</h3></div>
+          </a-carousel>
+        </div>
+        <a-card class="rowGutter">
+          <a-row>
+            <a-col :span="12">
+              [图标][名称][日期]
+            </a-col>
+            <a-col :span="12">
+              [图标][名称][日期]
+            </a-col>
+          </a-row>
+          <span style="color:red">[今日调课]</span>
+        </a-card>
+        <a-card class="rowGutter">
+          <template #title>任课教程 <a href="javascript:void(0);">修改课程提醒</a></template>
+          <!-- <template #extra></template> -->
+          xxxx
+        </a-card>
+        <a-card class="rowGutter">
+          <template #title>听课足迹 <a href="javascript:void(0);">修改课程提醒</a></template>
+          <template #extra><a href="javascript:void(0);">查看更多</a></template>
+          <a-list item-layout="horizontal" :data-source="[{ title: '听了 计算机公共教研室 曹毅 主讲的《信息技术2（数据管理与分析）》', },{ title: 'Ant Design Title 2', }]">
+            <template #renderItem="{ item }">
+              <a-list-item>
+                <a-list-item-meta>
+                  <template #title>
+                    <!-- <a href="https://www.antdv.com/">{{ item.title }}</a> -->
+                    {{ item.title }}
+                  </template>
+                  <template #description>
+                    <span style="color: #337ab7;">已评分n分</span>
+                  </template>
+                  <template #avatar>
+                    <a-avatar src="https://joeschmoe.io/api/v1/random" />
+                    <div>08:32:49</div>
+                    <div style="color: #1ab394;">2023-03-15</div>
+                  </template>
+                </a-list-item-meta>
+              </a-list-item>
+            </template>
+          </a-list>
+        </a-card>
+        <a-card class="rowGutter" title="预约课程">
+          <template #title>
+            预约课程
+            <a href="javascript:void(0);">线上课堂评价表</a>
+            <a href="javascript:void(0);">听课记录</a>
+            <a href="javascript:void(0);">同行评价表</a>
+          </template>
+          <template #extra><a href="javascript:void(0);">查看更多</a></template>
+          <a-row :gutter="[16,16]">
+            <a-col v-for="(item,index) in 10" :key="index" :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }">
+              <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;">
+                时间{{ item }}
+              </div>
+              <a-card>
+                子card
+              </a-card>
+            </a-col>
+          </a-row>
+        </a-card>
+        <a-card class="rowGutter" title="精彩公开课">
+          ccccc
+        </a-card>
+        <a-card class="rowGutter" title="今日课程列表">
+          ccccc
+        </a-card>
+        </a-layout-content>
       <a-layout-footer>
         <span class="footerLeft">TEL：0431-85099971</span>
         <span class="footerRight">Copyright 东北师范大学教务处 2023</span>
       </a-layout-footer>
     </a-layout>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ref, reactive, computed, onMounted } from 'vue';
-  import { DownOutlined } from '@ant-design/icons-vue';
+
+  import { DownOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { BackTop, Statistic } from 'ant-design-vue';
+
   import { useUserStore } from '/@/store/modules/user';
 
   //用户相关
@@ -90,46 +196,70 @@
     // list.list.push({ key: i.value });
   }
 </script>
-<style lang="less">
+<style lang="less" scoped>
 #siteMain {
-  //最大宽度
-  max-width: 1100px;
-  //居中
-  margin: 0 auto;
-  .topTitle {
-    font-size: 1.5rem;
-  }
-  .topRight {
-    float: right;
-    .topRightMenu {
-      font-size: 1.1rem;
+  // height: 100%;
+  background: #f3f3f4;
+  #maxSite {
+    //最大宽度
+    max-width: 1170px;
+    //居中
+    margin: 0 auto;
+    .topTitle {
+      font-size: 1.5rem;
+    }
+    .topRight {
+      float: right;
+      .topRightMenu {
+        font-size: 1.1rem;
+      }
+    }
+    .footerRight {
+      float: right;
+    }
+    .rowGutter{
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    .ant-layout-header {
+      color: #fff;
+      background: #1ab394;
+    }
+    .ant-layout-footer {
+      line-height: 1.5;
+      background: #FFF;
+    }
+    .ant-layout-sider {
+      color: #fff;
+      line-height: 120px;
+      background: #3ba0e9;
+    }
+    .ant-layout-content {
+      min-height: 120px;
+      color: #000;
+      line-height: 120px;
+      background: #f3f3f4;
+    }
+
+
+}
+    /* For demo */
+    .ant-carousel :deep(.slick-slide) {
+      text-align: center;
+      height: 160px;
+      line-height: 160px;
+      background: #364d79;
+      overflow: hidden;
+    }
+
+    .ant-carousel :deep(.slick-slide h3) {
+      color: #fff;
     }
-  }
-  .footerRight {
-    float: right;
-  }
 
-  .ant-layout-header {
-    color: #fff;
-    background: #1ab394;
-  }
-  .ant-layout-footer {
-    line-height: 1.5;
-  }
-  .ant-layout-sider {
-    color: #fff;
-    line-height: 120px;
-    background: #3ba0e9;
-  }
-  .ant-layout-content {
-    min-height: 120px;
-    color: #000;
-    line-height: 120px;
-    background: #FFF
-  }
 }
 /**暗黑模式特殊配色*/
-[data-theme='dark'] #siteMain {
+[data-theme='dark'] #siteMain #maxSite {
   .ant-layout-header, .ant-layout-footer {
     background: #6aa0c7;
   }