科学普及

src/views/universal/index.vue

@@ -2,37 +2,142 @@
   <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-col :span="12" class="one_1">
+              <el-col :span="24" class="top">
+                <component :is="cTop" zTxt="科普场馆" eTxt="Venues" @toMore="toMore('0')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="kpcgList" @toView="toView"></component>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="one_1">
+              <el-col :span="24" class="top">
+                <component :is="cTop" zTxt="科普体验" eTxt="Experience" @toMore="toMore('1')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="kptyList" @toView="toView"></component>
+              </el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-image :src="centerImg"></el-image>
+          </el-col>
+          <el-col :span="24" class="one">
+            <el-col :span="12" class="one_1">
+              <el-col :span="24" class="top">
+                <component :is="cTop" zTxt="科学解读" eTxt="Read" @toMore="toMore('2')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="kxjdList" @toView="toView"></component>
+              </el-col>
+            </el-col>
+            <el-col :span="12" class="one_1">
+              <el-col :span="24" class="top">
+                <component :is="cTop" zTxt="“黑”科技" eTxt="Science" @toMore="toMore('3')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="hkjList" @toView="toView"></component>
+              </el-col>
+            </el-col>
+          </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup lang="ts">
+import cTop from '@/components/common/top.vue';
+import cInterflow from '@/components/common/interflow-1.vue';
 // 基础
 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 { NewsColumnStore } from '@common/src/stores/allAdmin/newsColumn';
+import { NewsMessStore } from '@common/src/stores/allAdmin/newsMess';
+import type { IQueryResult } from '@/util/types.util';
+const newsColumn = NewsColumnStore();
+const newsMess = NewsMessStore();
 // 加载中
 const loading: Ref<any> = ref(false);
-// 分页数据
-//  const skip = 0;
-//  const limit = proxy.limit;;
+const centerImg: Ref<any> = ref('/src/assets/universal-1.png');
+const kpcgList: Ref<any> = ref([]);
+const kptyList: Ref<any> = ref([]);
+const kxjdList: Ref<any> = ref([]);
+const hkjList: Ref<any> = ref([]);
+const columnList: Ref<any> = ref([{ site: 'kpcg' }, { site: 'kpty' }, { site: 'kxjd' }, { site: 'hkj' }]);
 // 请求
 onMounted(async () => {
   loading.value = true;
-  //  await search({ skip, limit });
+  await 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 () => {
+  for (const val of columnList.value) {
+    const res: IQueryResult = await newsColumn.query({ place: val.site });
+    if (res.errcode == 0) {
+      let columns: any = res.data[0];
+      if (columns) {
+        const arr: IQueryResult = await newsMess.query({ skip: 0, limit: 11, column_id: columns._id });
+        if (arr.errcode == 0) {
+          if (val.site == 'kpcg') kpcgList.value = arr.data;
+          if (val.site == 'kpty') kptyList.value = arr.data;
+          if (val.site == 'kxjd') kxjdList.value = arr.data;
+          if (val.site == 'hkj') hkjList.value = arr.data;
+        }
+      }
+    }
+  }
+};
+const toMore = (e) => {};
+const toView = (e) => {};
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.w_1200 {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.main {
+  margin: 10px 0 0 0;
+  background-image: linear-gradient(rgb(255, 255, 255), rgb(163, 213, 246), rgb(255, 255, 255));
+  .one {
+    margin: 0 0 10px 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .one_1 {
+      max-width: 49.3%;
+      min-height: 530px;
+      overflow: hidden;
+      background: #fff;
+      box-shadow: 0 0 5px #409eff;
+      border-radius: 20px;
+      padding: 15px;
+      margin: 0 20px 0 0;
+    }
+    .one_1:last-child {
+      max-width: 49%;
+      margin: 0;
+    }
+  }
+  .two {
+    .el-image {
+      width: 100%;
+      height: 126px;
+      overflow: hidden;
+    }
+  }
+}
+// 头部公共样式
+.top {
+  height: 50px;
+  overflow: hidden;
+}
+.down {
+  height: 450px;
+  overflow: hidden;
+}
+</style>