|
|
@@ -2,7 +2,60 @@
|
|
|
<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-col :span="24" class="one">
|
|
|
+ <el-collapse v-model="activeNames">
|
|
|
+ <el-collapse-item title="科技频道" name="1" disabled>
|
|
|
+ <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"><el-image class="image" :src="src"></el-image></el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="title textOver" :title="item.title">
|
|
|
+ <span>[{{ item.room_id }}]</span>{{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <el-col :span="12" class="textOver">信息来源：{{ item.origin }}</el-col>
|
|
|
+ <el-col :span="12" class="textOver">更新时间：{{ item.create_date }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="warning" size="mini" @click="toLogin(item, '1')">管理进入</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="toJump(item)" v-if="item.status == '1'">进入频道</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="培训问诊" name="2" disabled>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="course">
|
|
|
+ <el-col class="list" :span="8" :key="index" v-for="(item, index) in trainLiat">
|
|
|
+ <el-col :span="24"><el-image class="image" :src="url"></el-image></el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="title textOver" :title="item.title">
|
|
|
+ <span>[{{ item.room_id }}]</span>{{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <el-col :span="12" class="textOver">
|
|
|
+ <el-icon><LocationInformation /></el-icon>{{ item.province }}-{{ item.city }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="textOver" :title="item.time">
|
|
|
+ <el-icon><Clock /></el-icon>{{ item.time }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="warning" size="mini" @click="toLogin(item, '2')">管理进入</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="toJump1(item)" v-if="item.status == '1'">进入频道</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -12,27 +65,108 @@
|
|
|
// 基础
|
|
|
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 { TrainStore } from '@common/src/stores/allAdmin/train';
|
|
|
+import { ChannelStore } from '@common/src/stores/allAdmin/channel';
|
|
|
+import type { IQueryResult } from '@/util/types.util';
|
|
|
+const channel = ChannelStore();
|
|
|
+const train = TrainStore();
|
|
|
// 加载中
|
|
|
const loading: Ref<any> = ref(false);
|
|
|
-// 分页数据
|
|
|
-// const skip = 0;
|
|
|
-// const limit = proxy.limit;;
|
|
|
+const activeNames: Ref<any> = ref(['1', '2']);
|
|
|
+const science: Ref<any> = ref([]); // 科技频道
|
|
|
+const trainLiat: Ref<any> = ref([]); // 培训问诊
|
|
|
+const src: Ref<any> = ref('/src/assets/channel-1.jpg');
|
|
|
+const url: Ref<any> = ref('/src/assets/channel-3.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 channel.query();
|
|
|
+ if (res.errcode == 0) science.value = res.data as [];
|
|
|
+ // 培训问诊
|
|
|
+ res = await train.query();
|
|
|
+ if (res.errcode == 0) {
|
|
|
+ let data: any = res.data;
|
|
|
+ for (const p1 of data) {
|
|
|
+ if (!p1.start_time) p1.start_time = '暂无';
|
|
|
+ if (!p1.end_time) p1.end_time = '暂无';
|
|
|
+ p1.time = p1.start_time + '-' + p1.end_time;
|
|
|
+ }
|
|
|
+ trainLiat.value = data;
|
|
|
+ }
|
|
|
+};
|
|
|
+const toLogin = (e, value) => {
|
|
|
+ console.log(value);
|
|
|
+ console.log(e);
|
|
|
+};
|
|
|
+const toJump = (e) => {
|
|
|
+ console.log(e);
|
|
|
+};
|
|
|
+const toJump1 = (e) => {
|
|
|
+ console.log(e);
|
|
|
+};
|
|
|
</script>
|
|
|
-<style scoped lang="scss"></style>
|
|
|
+<style scoped lang="scss">
|
|
|
+.main {
|
|
|
+ min-height: 500px;
|
|
|
+}
|
|
|
+.w_1200 {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+::v-deep .el-collapse-item.is-disabled .el-collapse-item__header {
|
|
|
+ color: rgb(0, 0, 0);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 0px 10px;
|
|
|
+}
|
|
|
+.course {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.list {
|
|
|
+ max-width: 32.5%;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin: 0 15px 10px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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>
|
