From aab9630324f5d3326a9574dbc8fba9d2a407ad11 Mon Sep 17 00:00:00 2001
From: bai <1643359946@qq.com>
Date: Thu, 6 Apr 2023 00:45:01 +0800
Subject: [PATCH] =?UTF-8?q?2023=E5=B9=B44=E6=9C=886=E6=97=A5=20=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/site/common/header.vue        |  45 ++++++-
 src/views/site/lunBo/index.vue          |  53 +++++---
 src/views/site/renKeJiaoCheng/index.vue |   2 +-
 src/views/site/tingKeZuJi/index.vue     |  52 ++++++--
 src/views/site/tongJi/index.vue         | 162 +++++++++++++++++-------
 src/views/site/tongZhiGongGao/index.vue |  57 +++++++--
 src/views/site/utils/index.ts           |   3 +
 src/views/site/yuYueKeCheng/index.vue   | 156 +++++++++++++++++++----
 8 files changed, 426 insertions(+), 104 deletions(-)
 create mode 100644 src/views/site/utils/index.ts

diff --git a/src/views/site/common/header.vue b/src/views/site/common/header.vue
index fa99353..961fde1 100644
--- a/src/views/site/common/header.vue
+++ b/src/views/site/common/header.vue
@@ -1,11 +1,11 @@
 <template>
   <a-layout-header>
     <!-- <BackTop/> -->
-    <div style="position: absolute;right: 1rem;top: 5rem;">
-      <div style="background: #c2c2c2;margin-bottom: 2rem;padding: 0.5rem;width: 4rem;font-size:3rem;">
+    <div id="topDiv">
+      <div class="topButton" @click="toTop">
         <ArrowUpOutlined/>
       </div>
-      <div style="background: #1c84c6;color:#FFF;font-size:1.5rem;padding: 0.5rem;width: 4rem;line-height: 2.1rem;">
+      <div class="topYiJianFanKui">
         意见反馈
       </div>
     </div>
@@ -38,6 +38,21 @@
   //用户相关
   const userStore = useUserStore();
 
+  function smoothScroll(topNum){
+    setTimeout(() => {
+      if(topNum > 0){
+        topNum = topNum - 50;
+        document.body.scrollTop = topNum;
+        smoothScroll(topNum);
+      }
+    },1);
+  }
+
+  function toTop(){
+    let topNum = document.body.scrollTop;
+    smoothScroll(topNum);
+  }
+
 </script>
 <style lang="less" scoped>
 #siteMain {
@@ -56,4 +71,28 @@
     }
   }
 }
+#topDiv {
+  position: absolute;
+  right: 1rem;
+  top: 5rem;
+  z-index: 1;
+  .topButton {
+    background: #c2c2c2;
+    margin-bottom: 2rem;
+    padding: 0.5rem;
+    width: 4rem;
+    font-size:3rem;
+  }
+  .topYiJianFanKui {
+    background: #1c84c6;
+    color:#FFF;
+    font-size:1.5rem;
+    padding: 0.5rem;
+    width: 4rem;
+    line-height: 2.1rem;
+  }
+}
+
+
+
 </style>
\ No newline at end of file
diff --git a/src/views/site/lunBo/index.vue b/src/views/site/lunBo/index.vue
index 6bda59b..ba7155e 100644
--- a/src/views/site/lunBo/index.vue
+++ b/src/views/site/lunBo/index.vue
@@ -1,28 +1,51 @@
 <template>
   <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>
+    <!-- --{{ list }}-- -->
+    <a-carousel autoplay>
+      <div v-for="(item,index) in list" :key="index">
+        <AImage style="marginRight: 5px" :src="getFileAccessHttpUrl(item.picPath)" :width="'100%'"/>
+        <!-- <h3>{{ item.title }}-{{ item.picPath }}</h3> -->
+      </div>
     </a-carousel>
   </div>
 </template>
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { Image as AImage } from 'ant-design-vue';
+import { defHttp } from '/@/utils/http/axios';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+// import { useMessage } from "/@/hooks/web/useMessage";
+// const { createConfirm } = useMessage();
+enum Api {
+  list = '/kcTplb/kcTplb/list',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+const listApi = (params) => defHttp.get({ url: Api.list, params });
+
+const list = ref<any>([]);
+onMounted(() => {
+  listApi({ pageSize: 5 }).then(res => {
+    list.value = (res?.records) ?? [];
+  });
+});
 
 </script>
 <style lang="less" scoped>
 /* For demo */
-.ant-carousel :deep(.slick-slide) {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
+// .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;
-}
+// .ant-carousel :deep(.slick-slide h3) {
+//   color: #fff;
+// }
 
 </style>
\ No newline at end of file
diff --git a/src/views/site/renKeJiaoCheng/index.vue b/src/views/site/renKeJiaoCheng/index.vue
index e0012b2..de4db46 100644
--- a/src/views/site/renKeJiaoCheng/index.vue
+++ b/src/views/site/renKeJiaoCheng/index.vue
@@ -2,7 +2,7 @@
   <a-card class="rowGutter">
     <template #title><span style="font-size: 24px;font-weight: bold;">任课教程</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
     <!-- <template #extra></template> -->
-    xxxx
+    <div></div>
   </a-card>
 </template>
 <script setup lang="ts">
diff --git a/src/views/site/tingKeZuJi/index.vue b/src/views/site/tingKeZuJi/index.vue
index df62184..833a17b 100644
--- a/src/views/site/tingKeZuJi/index.vue
+++ b/src/views/site/tingKeZuJi/index.vue
@@ -1,22 +1,30 @@
 <template>
   <a-card class="rowGutter">
-    <template #title> <span style="font-size: 24px;font-weight: bold;">听课足迹</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
+    <template #title>
+      <span style="font-size: 24px;font-weight: bold;">听课足迹</span>
+      <!-- <span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span> -->
+    </template>
     <template #extra><a href="javascript:void(0);">查看更多</a></template>
-    <a-list item-layout="horizontal" :data-source="[{ title: '听了 计算机公共教研室 曹毅 主讲的《信息技术2（数据管理与分析）》', },{ title: 'Ant Design Title 2', }]">
+    <a-list item-layout="horizontal" :data-source="list">
       <template #renderItem="{ item }">
         <a-list-item>
           <a-list-item-meta>
             <template #title>
-              <!-- <a href="https://www.antdv.com/">{{ item.title }}</a> -->
-              {{ item.title }}
+              <div class="wenZiJiaCu">
+                听了&nbsp;&nbsp;&nbsp;&nbsp;{{ item.kkdw }}&nbsp;&nbsp;&nbsp;&nbsp;{{item.skjs}}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.kcmc }}
+              </div>
             </template>
             <template #description>
-              <span style="color: #337ab7;">已评分n分</span>
+              <span style="color: #337ab7;">已评分：5分</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>
+              <div class="wenZiJuZhong">
+                <!-- <a-avatar style="marginRight: 5px" :src="getFileAccessHttpUrl(item.picPath)" shape="square" :size="25"/> -->
+                <!-- <a-avatar src="https://joeschmoe.io/api/v1/random" /> -->
+                <TeamOutlined/>
+                <div>08:32:49 {{ item.hhks }} - {{ item.hhjs }}</div>
+                <div style="color: #1ab394;">{{ item.skrq }}</div>
+              </div>
             </template>
           </a-list-item-meta>
         </a-list-item>
@@ -25,8 +33,36 @@
   </a-card>
 </template>
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { TeamOutlined } from '@ant-design/icons-vue';
+// import { dateUtil, formatToDate } from '/@/utils/dateUtil';
+import { getUserId } from '/@/views/site/utils/index';
+
+import { defHttp } from '/@/utils/http/axios';
+enum Api {
+  list = '/kcYuyue/kcYuyue/findTingkeZuJiByPage'
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+const listApi = (params) => defHttp.get({ url: Api.list, params });
+
+const list = ref<any>([]);
+onMounted(() => {
+  listApi({ pageSize: 4, isdeleted:0, userid: getUserId(), isOrderByNow: true }).then(res => {
+    list.value = (res?.records) ?? [];
+  });
+});
 
 </script>
 <style lang="less" scoped>
+.wenZiJuZhong {
+  text-align: center;
+}
+.wenZiJiaCu {
+  font-weight: 700;
+}
 
 </style>
\ No newline at end of file
diff --git a/src/views/site/tongJi/index.vue b/src/views/site/tongJi/index.vue
index 5137002..a3c4f37 100644
--- a/src/views/site/tongJi/index.vue
+++ b/src/views/site/tongJi/index.vue
@@ -1,72 +1,104 @@
 <template>
-  <a-row class="rowGutter" :gutter="[16,16]">
-    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
-      <a-card title="今日课堂数">
-        --
-        <a-row class="" :gutter="[16,16]">
-          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-            <Statistic title="总数" :value="tjData?.jinRiKeTang?.num"/>
+  <a-row class="rowGutter maxRow" :gutter="gutter">
+    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 5 }">
+      <a-card class="cardDiv" title="今日课堂数">
+        <a-row class="" :gutter="gutter">
+          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <div class="numberBlob">
+              <div class="numSpan">{{ tjData?.jinRiKeTang?.num }}</div>
+              <div>总数</div>
+            </div>
           </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-            <Statistic title="已下课" :value="tjData?.jinRiKeTang?.xkktnum"/>
+          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <div class="numberBlob">
+              <div class="numSpan green">{{ tjData?.jinRiKeTang?.xkktnum }}</div>
+              <div class="numberName"><FallOutlined class="green"/>已下课</div>
+            </div>
           </a-col>
         </a-row>
-        腾讯:{{ tjData?.jinRiKeTang?.txktnum }}
-        钉钉:{{ tjData?.jinRiKeTang?.ddktnum }}
-        其他:{{ tjData?.jinRiKeTang?.qtktnum }}
+        <a-divider class="divider"/>
+        <div class="buttomDiv wenZiJiaCu">
+          <FallOutlined class="green"/>
+          腾讯:{{ tjData?.jinRiKeTang?.txktnum }}
+          钉钉:{{ tjData?.jinRiKeTang?.ddktnum }}
+          其他:{{ tjData?.jinRiKeTang?.qtktnum }}
+        </div>
       </a-card>
     </a-col>
     <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
-      <a-card title="上课中">
-        <a-row class="" :gutter="[16,16]">
-          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-            <Statistic title="&nbsp;" :value="tjData?.jinRiKeTang?.zzsknum"/>
+      <a-card class="cardDiv" title="上课中">
+        <a-row class="" :gutter="gutter">
+          <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }">
+            <div class="numberBlob">
+              <div class="numSpan orange">{{ tjData?.jinRiKeTang?.zzsknum }}</div>
+              <div class="numberName">&nbsp;</div>
+            </div>
           </a-col>
         </a-row>
+        <a-divider />
+        <div class="buttomDiv"></div>
       </a-card>
     </a-col>
-    <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
-      <a-card title="已开课堂数">
-        <a-row class="" :gutter="[16,16]">
-          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-            <Statistic title="总数" :value="tjData?.jinRiTingKe?.jcktnum"/>
+    <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 9 }">
+      <a-card class="cardDiv" title="已开课堂数">
+        <a-row class="" :gutter="gutter">
+          <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
+            <div class="numberBlob">
+              <div class="numSpan">{{ tjData?.jinRiTingKe?.jcktnum }}</div>
+              <div class="numberName">总数</div>
+            </div>
           </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-            <Statistic title="听课课堂" :value="tjData?.jinRiTingKe?.btkktnum"/>
+          <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
+            <div class="numberBlob">
+              <div class="numSpan blue">{{ tjData?.jinRiTingKe?.btkktnum }}</div>
+              <div class="numberName"><StockOutlined class="blue"/>听课课堂</div>
+            </div>
           </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-            <Statistic title="听课人次" :value="tjData?.jinRiTingKe?.tkrcnum"/>
+          <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
+            <div class="numberBlob">
+              <div class="numSpan orange">{{ tjData?.jinRiTingKe?.tkrcnum }}</div>
+              <div class="numberName"><RiseOutlined class="orange"/>听课人次</div>
+            </div>
           </a-col>
         </a-row>
+        <a-divider />
+        <div class="buttomDiv"></div>
       </a-card>
     </a-col>
     <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
-      <a-card title="今日听课">
-        <a-row class="" :gutter="[16,16]">
-          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-            <Statistic title="课堂数" :value="tjData?.yiKaiKeTang?.num"/>
+      <a-card class="cardDiv" title="今日听课">
+        <a-row class="" :gutter="gutter">
+          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <div class="numberBlob">
+              <div class="numSpan blue">{{ tjData?.yiKaiKeTang?.num }}</div>
+              <div class="numberName"><StockOutlined class="blue"/>课堂数</div>
+            </div>
           </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-            <Statistic title="听课人次" :value="tjData?.yiKaiKeTang?.zzsknum"/>
+          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <div class="numberBlob">
+              <div class="numSpan orange">{{ tjData?.yiKaiKeTang?.zzsknum }}</div>
+              <div class="numberName"><RiseOutlined class="orange"/>听课人次</div>
+            </div>
           </a-col>
         </a-row>
+        <a-divider />
+        <div class="buttomDiv"></div>
       </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;">
-        <!-- <a href="/dashboard/analysis"><PlusOutlined/></a> -->
-        <RouterLink class="plusButton" to="/dashboard/analysis"><PlusOutlined/></RouterLink>
-
+      <div style="margin: 0 auto;width: fit-content;font-size: 6rem;font-weight: 700;color: #cccccc8c;padding: 29px 0;">
+        <!-- <RouterLink class="plusButton" to="/dashboard/analysis"><PlusOutlined/></RouterLink> -->
+        <RouterLink class="plusButton" to="/dashboard/analysis">+</RouterLink>
       </div>
     </a-col>
   </a-row>
 </template>
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from 'vue';
-import { Statistic } from 'ant-design-vue';
-import { PlusOutlined } from '@ant-design/icons-vue';
+import { PlusOutlined, FallOutlined, RiseOutlined, StockOutlined } from '@ant-design/icons-vue';
 import { dateUtil, formatToDate } from '/@/utils/dateUtil';
 
+
 import { defHttp } from '/@/utils/http/axios';
 // import { useMessage } from "/@/hooks/web/useMessage";
 
@@ -75,14 +107,14 @@ enum Api {
   list = '/ktgl/kcKetangbiao/getCountList',
 }
 
-interface Data {
-  num: Number,//【今日课堂数：总数】
-  txktnum: Number,//【今日课堂数：腾讯】
-  ddktnum: Number,//【今日课堂数：钉钉】
-  qtktnum: Number,//【今日课堂数：其他】
-  xkktnum: Number,//【今日课堂数：已下课】
-  zzsknum: Number,//【上课中】
-}
+// interface Data {
+//   num: Number,//【今日课堂数：总数】
+//   txktnum: Number,//【今日课堂数：腾讯】
+//   ddktnum: Number,//【今日课堂数：钉钉】
+//   qtktnum: Number,//【今日课堂数：其他】
+//   xkktnum: Number,//【今日课堂数：已下课】
+//   zzsknum: Number,//【上课中】
+// }
 
 /**
  * 列表接口
@@ -90,7 +122,9 @@ interface Data {
  */
 const list = (params) => defHttp.get({ url: Api.list, params });
 
-const tjData = ref<Data | any>({});
+const gutter = ref([16,16]);
+
+const tjData = ref<any>({});
 onMounted(() => {
   let skrq = formatToDate(new Date());
   list({ skrq }).then(res => {
@@ -103,6 +137,42 @@ onMounted(() => {
 
 </script>
 <style lang="less" scoped>
+.numberBlob {
+  text-align: center;
+  // height: 100px;
+  height: 4rem;
+  .numSpan {
+    font-size: 2rem;
+  }
+  .numberName {
+    font-size: .5rem;
+  }
+}
+.green {
+  color: #1ab394;
+}
+.orange {
+  color: #ed9535;
+}
+.blue {
+  color: #1c84c6;
+}
+
+.cardDiv :deep(.ant-divider-horizontal) {
+  margin: 12px 0;
+}
+.maxRow :deep(.ant-card-body) {
+  padding: 0 24px 24px;
+}
+
+.buttomDiv {
+  font-size: .4rem;
+  height: 1rem;
+}
+.wenZiJiaCu {
+  font-weight: 700;
+}
+
 .plusButton{
   & :hover,& :active{
     color: #cccccc8c;
diff --git a/src/views/site/tongZhiGongGao/index.vue b/src/views/site/tongZhiGongGao/index.vue
index c744a2f..8b2f318 100644
--- a/src/views/site/tongZhiGongGao/index.vue
+++ b/src/views/site/tongZhiGongGao/index.vue
@@ -1,19 +1,60 @@
 <template>
   <a-card class="rowGutter">
-    <a-row>
-      <a-col :span="12">
-        [图标][名称]<span style="color:#1ab394">[日期]</span>
-      </a-col>
-      <a-col :span="12">
-        [图标][名称]<span style="color:#1ab394">[日期]</span>
+    <br/>
+    <a-row :gutter="[16,16]" class="rowSpan">
+      <a-col :span="12" v-for="(item,index) in list" :key="index">
+        <a :href="item.nlink" target="_blank">
+          <span class="">
+            <WifiOutlined :rotate="45" class="greenTxt"/>
+          </span>
+          <span class="title spanWord">
+            {{ item.ntitle }}
+          </span>
+          <span class="greenTxt spanWord">[{{ formatToDate(item.ndate) }}]</span>
+        </a>
       </a-col>
     </a-row>
-    <span style="color:red">[今日调课]</span>
+    <div style="color:red">[今日调课]</div>
   </a-card>
 </template>
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { WifiOutlined } from '@ant-design/icons-vue';
+
+import { defHttp } from '/@/utils/http/axios';
+import { formatToDate } from '/@/utils/dateUtil';
+// import { useMessage } from "/@/hooks/web/useMessage";
+// const { createConfirm } = useMessage();
+enum Api {
+  list = '/kcNotice/kcNotice/list',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+const listApi = (params) => defHttp.get({ url: Api.list, params });
+
+const list = ref<any>([]);
+onMounted(() => {
+  //ontop,修改时间，新增时间
+  listApi({ pageSize: 6, nstatus: 1 }).then(res => {
+    list.value = (res?.records) ?? [];
+  });
+});
 
 </script>
 <style lang="less" scoped>
-
+.rowSpan {
+  padding: 0 0 15px 0;
+}
+.spanWord {
+  padding: 0 15px;
+}
+.greenTxt {
+  color: #1ab394;
+}
+.title {
+  color: black;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/site/utils/index.ts b/src/views/site/utils/index.ts
new file mode 100644
index 0000000..c8e4ea4
--- /dev/null
+++ b/src/views/site/utils/index.ts
@@ -0,0 +1,3 @@
+export const getUserId = () => {
+  return '2016900057';
+}
\ No newline at end of file
diff --git a/src/views/site/yuYueKeCheng/index.vue b/src/views/site/yuYueKeCheng/index.vue
index adc1a06..5828608 100644
--- a/src/views/site/yuYueKeCheng/index.vue
+++ b/src/views/site/yuYueKeCheng/index.vue
@@ -1,43 +1,41 @@
 <template>
   <a-card class="rowGutter">
     <template #title>
-      <span style="font-size: 24px;font-weight: bold;">预约课程</span>
-      <span style="padding: 15px;"><a href="javascript:void(0);">线上课堂评价表</a></span>
-      <span style="padding: 15px;"><a href="javascript:void(0);">听课记录</a></span>
-      <span style="padding: 15px;"><a href="javascript:void(0);">同行评价表</a></span>
+      <span class="titleName">预约课程</span>
+      <span class="titleDownload"><a href="javascript:void(0);">线上课堂评价表</a></span>
+      <span class="titleDownload"><a href="javascript:void(0);">听课记录</a></span>
+      <span class="titleDownload"><a href="javascript:void(0);">同行评价表</a></span>
     </template>
     <template #extra><a href="javascript:void(0);">查看更多</a></template>
     <a-row class="rowGutter" :gutter="[16,16]">
-      <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in 4" :key="index" style="margin-bottom: 40px;">
-        <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
-          时间{{ item }}
+      <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in list" :key="index" class="itemBigBox">
+        <div class="itemDate">
+          {{ item.skrq }} {{ formatTime(item.hhks) }}-{{ formatTime(item.hhjs) }}
         </div>
-        <div style="border: 2px #eef1f2 solid;">
+        <div class="itemBox">
           <div>
-            <div style="width: 100%;height: 20px;background-color: #1c84c6;"></div>
-            <div style="width:100%;white-space:normal; word-break:break-all;overflow:hidden;padding: 10px;height: 70px;font-weight: 600;font-size: 16px;">
-              地理教育专业文献阅读与指导{{index}}
-            </div>
+            <div class="itemTitle"></div>
+            <div class="itemTtleName">{{ item.kcmc }}</div>
           </div>
-          <a-divider style="margin: 0px;color: #eef1f2;"/>
-          <div style="padding: 20px;font-weight: 600;">
+          <a-divider class="itemDivider"/>
+          <div class="itemInteriorBox">
             <a-row>
               <a-col :span="16">
-                <div style="height: 30px;font-size: 16px;">张继权</div>
-                <div style="height: 30px;font-size: 14px;">环境学院环境</div>
+                <div class="itemSkSj">{{ item.skjs }}</div>
+                <div class="itemKkDw">{{ item.kkdw }}</div>
               </a-col>
-              <a-col :span="8" style="text-align: center;height: 70px;">
-                <div style="color: #1c84c6;font-size: 24px;font-weight: 600;">30</div>
-                <div style="font-size: 14px;">选课人数</div>
+              <a-col :span="8" class="itemInteriorRow">
+                <div class="itemXkrsNum">{{ item.xkrs }}</div>
+                <div class="itemXkrs">选课人数</div>
               </a-col>
               <a-col :span="24">
-                <div style="height: 60px;">
-                  环境学院107室
+                <div>
+                  {{ item.skdd }}
                 </div>
               </a-col>
               <a-col :span="24">
-                <a-button type="primary" style="background-color: #1c84c6;float: left;font-weight: 600;">预约</a-button>
-                <a-button type="primary" style="background-color: #1c84c6;float: right;font-weight: 600;">报错</a-button>
+                <a-button type="primary" class="itemYyButton">预约</a-button>
+                <a-button type="primary" class="itemBaoCuoButton">报错</a-button>
               </a-col>
             </a-row>
           </div>
@@ -47,8 +45,120 @@
   </a-card>
 </template>
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { TeamOutlined } from '@ant-design/icons-vue';
+// import { dateUtil, formatToDate } from '/@/utils/dateUtil';
+import { getUserId } from '/@/views/site/utils/index';
+
+import { defHttp } from '/@/utils/http/axios';
+enum Api {
+  list = '/kcYuyue/kcYuyue/findTingkeZuJiByPage',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+const listApi = (params) => defHttp.get({ url: Api.list, params });
+
+const list = ref<any>([]);
+onMounted(() => {
+  listApi({ pageSize: 4, isdeleted:0, userid: getUserId(), isOrderByNow: true }).then(res => {
+    list.value = (res?.records) ?? [];
+  });
+});
+
+/**
+ * 转换时间由【0012】转成【00:12】
+ * @param time 四个字符，时分，无分隔
+ */
+function formatTime(time: string) {
+  if(!time) return '';
+  let t_i_m_e = time.split('');
+  return [t_i_m_e[0],t_i_m_e[1],':',t_i_m_e[2],t_i_m_e[3]].join('');
+}
 
 </script>
 <style lang="less" scoped>
+.titleName {
+  font-size: 24px;
+  font-weight: bold;
+}
+.titleDownload {
+  padding: 15px;
+}
+.itemBigBox {
+  margin-bottom: 40px;
+}
+.itemDate {
+  border-radius: 25px;
+  background: #cccccc8c;
+  width: 70%;
+  margin-bottom: 0.5rem;
+  text-align: center;
+  margin: 0 auto .5rem;
+  padding: 0.5rem;
+}
+.itemBox {
+  border: 2px #eef1f2 solid;
+}
+.itemTitle {
+  width: 100%;
+  height: 20px;
+  background-color: #1c84c6;
+}
+.itemTtleName {
+  width:100%;
+  white-space:normal;
+  word-break:break-all;
+  overflow:hidden;
+  padding: 10px;
+  height: 70px;
+  font-weight: 600;
+  font-size: 16px;
+}
+.itemDivider {
+  margin: 0px;
+  color: #eef1f2;
+}
+.itemInteriorBox {
+  padding: 20px;
+  font-weight: 600;
+}
+.itemSkSj {
+  height: 30px;
+  font-size: 16px;
+}
+.itemKkDw {
+  height: 30px;
+  font-size: 14px;
+}
+.itemInteriorRow {
+  text-align: center;
+  height: 70px;
+}
+.itemXkrsNum {
+  color: #1c84c6;
+  font-size: 24px;
+  font-weight: 600;
+}
+.itemXkrs {
+  font-size: 14px;
+}
+.itemSkdd {
+  height: 60px;
+}
+.itemYyButton {
+  background-color: #1c84c6;
+  float: left;
+  font-weight: 600;
+}
+.itemBaoCuoButton {
+  background-color: #1c84c6;
+  float: right;
+  font-weight: 600;
+}
+
+
 
 </style>
\ No newline at end of file