|
|
@@ -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>
|
