直播大厅

src/views/live/index.vue

@@ -2,7 +2,78 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">直播大厅</el-col>
+        <div class="w_1200">
+          <el-tabs class="tab" type="border-card">
+            <el-tab-pane label="科技成果在线">
+              <el-collapse v-model="activeNames" accordion>
+                <el-collapse-item title="正在直播" name="1">
+                  <el-row>
+                    <el-col :span="24" class="course">
+                      <el-col class="list" :span="8" :key="index" v-for="(item, index) in science">
+                        <el-col :span="24" class="image"><el-image :src="src"></el-image></el-col>
+                        <el-col :span="24" class="info">
+                          <el-col :span="24" class="title textOver">
+                            <span>[{{ item.room_id }}]</span>{{ item.title }}
+                          </el-col>
+                          <el-col :span="24" class="other">
+                            <el-col :span="10" class="textOver"><i class="el-icon-location-outline"></i>{{ item.province }}-{{ item.city }}</el-col>
+                            <el-col :span="14" class="textOver"><i class="iconfont iconshijian"></i>{{ item.start_time }}-{{ item.end_time }}</el-col>
+                          </el-col>
+                          <el-col :span="24" class="btn">
+                            <el-button type="primary" size="small" @click="toLogin(item)">管理进入</el-button>
+                            <el-button type="primary" size="small" @click="toJump(item)">进入对接会</el-button>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                </el-collapse-item>
+                <el-collapse-item title="下期预告" name="2">
+                  <el-row>
+                    <el-col :span="24" class="course">
+                      <el-col class="list" :span="8" :key="index" v-for="(item, index) in nextList">
+                        <el-col :span="24" class="image"><el-image :src="src"></el-image></el-col>
+                        <el-col :span="24" class="info">
+                          <el-col :span="24" class="title textOver">
+                            <span>[{{ item.room_id }}]</span>{{ item.title }}
+                          </el-col>
+                          <el-col :span="24" class="other">
+                            <el-col :span="10" class="textOver"><i class="el-icon-location-outline"></i>{{ item.province }}-{{ item.city }}</el-col>
+                            <el-col :span="14" class="textOver"><i class="iconfont iconshijian"></i>{{ item.start_time }}-{{ item.end_time }}</el-col>
+                          </el-col>
+                          <el-col :span="24" class="btn">
+                            <el-button type="primary" size="small" @click="toLogin(item)">管理进入</el-button>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                </el-collapse-item>
+                <el-collapse-item title="已往直播" name="3">
+                  <el-row>
+                    <el-col :span="24" class="course">
+                      <el-col class="list" :span="8" :key="index" v-for="(item, index) in endscience">
+                        <el-col :span="24" class="image"><el-image :src="src"></el-image></el-col>
+                        <el-col :span="24" class="info">
+                          <el-col :span="24" class="title textOver">
+                            <span>[{{ item.room_id }}]</span>{{ item.title }}
+                          </el-col>
+                          <el-col :span="24" class="other">
+                            <el-col :span="10" class="textOver"><i class="el-icon-location-outline"></i>{{ item.province }}-{{ item.city }}</el-col>
+                            <el-col :span="14" class="textOver"><i class="iconfont iconshijian"></i>{{ item.start_time }}-{{ item.end_time }}</el-col>
+                          </el-col>
+                          <el-col :span="24" class="btn">
+                            <el-button type="primary" size="small" @click="toLogin(item)">管理进入</el-button>
+                          </el-col>
+                        </el-col>
+                      </el-col>
+                    </el-col>
+                  </el-row>
+                </el-collapse-item>
+              </el-collapse>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -12,27 +83,98 @@
 // 基础
 import type { Ref } from 'vue';
 // reactive,
-import { onMounted, ref, getCurrentInstance } from 'vue';
+import { onMounted, ref } from 'vue';
 // 接口
-//import { TestStore } from '@common/src/stores/test';
-//import type { IQueryResult } from '@/util/types.util';
-//const testAxios = TestStore();
-const { proxy } = getCurrentInstance() as any;
+import { DockStore } from '@common/src/stores/allAdmin/dock';
+import type { IQueryResult } from '@/util/types.util';
+const dock = DockStore();
 // 加载中
 const loading: Ref<any> = ref(false);
-// 分页数据
-//  const skip = 0;
-//  const limit = proxy.limit;;
+const activeNames: Ref<any> = ref('1');
+const science: Ref<any> = ref([]);
+const endscience: Ref<any> = ref([]);
+const nextList: Ref<any> = ref([]);
+const src: Ref<any> = ref('/src/assets/live-1.jpg');
+
 // 请求
 onMounted(async () => {
   loading.value = true;
-  //  await search({ skip, limit });
+  search();
   loading.value = false;
 });
-//const search = async (e: { skip: number; limit: number }) => {
-//  const info = { skip: e.skip, limit: e.limit, ...searchInfo.value  };
-//  const res: IQueryResult = await testAxios.query(info);
-//  console.log(res);
-//};
+const search = async () => {
+  let res: IQueryResult;
+  res = await dock.query({ status: '1' });
+  if (res.errcode == 0) science.value = res.data as [];
+  res = await dock.query({ status: '0' });
+  if (res.errcode == 0) nextList.value = res.data as [];
+  res = await dock.query({ status: '2' });
+  if (res.errcode == 0) endscience.value = res.data as [];
+};
+const toLogin = (e) => {};
+const toJump = (e) => {};
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.main {
+  min-height: 557px;
+  padding: 10px 0;
+  .tab {
+    min-height: 530px;
+  }
+}
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.course {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.list {
+  max-width: 32.466%;
+  border: 1px solid #ccc;
+  margin: 0 15px 10px 0;
+  border-radius: 10px;
+  .image {
+    height: 260px;
+  }
+  .el-image {
+    height: 260px;
+    border-radius: 10px 10px 0px 0px;
+  }
+  .info {
+    padding: 5px 10px 10px 10px;
+    .title {
+      font-size: 16px;
+      font-weight: 700;
+      padding: 0 0 5px 0;
+    }
+    .other {
+      display: flex;
+      font-size: 14px;
+      padding: 0 0 5px 0;
+    }
+    .btn {
+      text-align: center;
+    }
+  }
+}
+:deep(.el-tabs__item) {
+  font-size: 18px;
+  font-weight: 700;
+  height: 50px;
+  line-height: 50px;
+}
+.list:nth-child(3n) {
+  margin: 0 0 10px 0;
+}
+.list .info .title span:first-child {
+  color: red;
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>