From 95a27fe55990ca151cbe08f99cbeb669b4cb9dd8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 20 六月 2024 17:07:16 +0800
Subject: [PATCH] fix:修改在线培训

---
 src/views/train/data-list/index.vue |   98 +++++++++++++++++++++++++++++++++---------------
 1 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/src/views/train/data-list/index.vue b/src/views/train/data-list/index.vue
index 965749d..a3e3a16 100644
--- a/src/views/train/data-list/index.vue
+++ b/src/views/train/data-list/index.vue
@@ -1,38 +1,40 @@
 <template>
   <div class="list-container w-full h-full">
-      <div class="list-content w-full overflow-x-hidden">
-        <el-row :gutter="20">
-          <el-col :span="6" v-for="item in dataList" class="mb-5">
-            <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }">
-              <div class="img-container w-full">
-                <img src="@/assets/list-card-bg.jpg" class="w-full">
+    <div class="list-content w-full overflow-x-hidden">
+      <el-row :gutter="20">
+        <el-col :span="6" v-for="item in dataList" class="margin-col">
+          <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }">
+            <div class="img-container w-full">
+              <img src="@/assets/list-card-bg.jpg" class="width-img">
+            </div>
+            <div class="item-info p-3">
+              <div class="info-title">{{ item.title }}</div>
+              <div class="info-teacher">
+                <div class="info-label">涓昏:</div>
+                <div class="info-text">{{ item.teacher }}</div>
               </div>
-              <div class="item-info p-3">
-                <div class="info-title font-bold">{{ item.title }}</div>
-                <div class="info-teacher flex text-sm text-gray-500">
-                  <div class="info-label">涓昏:</div>
-                  <div class="info-text">{{ item.teacher }}</div>
-                </div>
-                <div class="info-time flex text-sm text-gray-500">
-                  <div class="info-label">寮�濮嬫椂闂�:</div>
-                  <div class="info-text">{{ item.startTime }}</div>
-                </div>
-                <div class="info-time flex text-sm text-gray-500">
-                  <div class="info-label">缁撴潫鏃堕棿:</div>
-                  <div class="info-text">{{ item.endTime }}</div>
-                </div>
+              <div class="info-time">
+                <div class="info-label">寮�濮嬫椂闂�:</div>
+                <div class="info-text">{{ item.startTime }}</div>
               </div>
-              <el-button size="mini" @click="start" >寮�濮嬩笂璇�</el-button>
-            </el-card>
-          </el-col>
-        </el-row>
-      </div>
+              <div class="info-time">
+                <div class="info-label">缁撴潫鏃堕棿:</div>
+                <div class="info-text">{{ item.endTime }}</div>
+              </div>
+              <div class="button-container">
+                <el-button @click="start">寮�濮嬩笂璇�</el-button>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       dataList: [
         {
@@ -71,15 +73,18 @@
           roomName: 'test'
         }
       ]
-    }
+    };
   },
   methods: {
-    start(){
-      // this.$router.push({path:'/train/meet/index'})
-      window.open('https://ycl.easyblog.vip:8443/test');
+    start () {
+      let routeUrl = this.$router.resolve({
+        path: "/meet",
+      })
+      window.open(routeUrl.href, '_blank')
+      // window.open('https://ycl.easyblog.vip:8443/test');
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -103,4 +108,35 @@
 .list-card {
   border-radius: 10px;
 }
+
+.item-info {
+  padding: 12px;
+  color: #8a8a8a;
+}
+
+.info-title {
+  font-weight: bold;
+}
+
+.info-teacher {
+  display: flex;
+  font-size: 14px;
+}
+
+.info-time {
+  display: flex;
+}
+
+.margin-col {
+  margin-bottom: 20px;
+}
+
+.width-img {
+  width: 100%;
+}
+
+.button-container {
+  display: flex;
+  margin-top: 10px;
+}
 </style>

--
Gitblit v1.8.0