交流合作

src/components/common/interflow-1.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="interflow-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="20" class="title textOver" :title="item.title" @click="toView(item)">
+            {{ item.title }}
+          </el-col>
+          <el-col :span="4" class="time">
+            {{ item.create_date }}
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { toRefs } from 'vue';
+const props = defineProps({
+  list: { type: Array<any>, default: () => [] }
+});
+const { list } = toRefs(props);
+const emit = defineEmits(['toView']);
+const toView = (e) => {
+  emit('toView', { data: e });
+};
+</script>
+
+<style lang="scss" scoped>
+.main {
+  .list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-bottom: 1px dashed #ccc;
+    padding: 9px 0;
+    .title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 16px;
+      font-weight: 700;
+      color: #333;
+    }
+    .title:hover {
+      cursor: pointer;
+      color: rgb(0, 149, 255);
+    }
+    .time {
+      text-align: center;
+    }
+  }
+}
+</style>

src/components/common/top.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="top">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="2" class="one_1">
+            <el-image :src="imgUrl"></el-image>
+          </el-col>
+          <el-col :span="22" class="one_2">
+            <span class="zTxt">{{ zTxt }}</span>
+            <span class="eTxt">{{ eTxt }}</span>
+            <el-link @click="toMore()">更多</el-link>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { toRefs, ref } from 'vue';
+const props = defineProps({
+  zTxt: { type: String, default: () => '' },
+  eTxt: { type: String, default: () => '' }
+});
+const { zTxt } = toRefs(props);
+const { eTxt } = toRefs(props);
+const imgUrl: Ref<any> = ref('/src/assets/market-1.png');
+const emit = defineEmits(['toMore']);
+const toMore = () => {
+  emit('toMore');
+};
+</script>
+
+<style lang="scss" scoped>
+.main {
+  .one {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .one_1 {
+      .el-image {
+        width: 45px;
+        height: 45px;
+        overflow: hidden;
+      }
+    }
+    .one_2 {
+      height: 45px;
+      border-bottom: 3px solid #044b79;
+      line-height: 45px;
+      padding: 0 5px;
+      .zTxt {
+        font-size: 24px;
+        font-weight: 700;
+      }
+      .eTxt {
+        padding: 0 10px;
+        text-transform: Capitalize;
+        font-size: 18px;
+        color: #92959a;
+        font-weight: 700;
+      }
+      .el-link {
+        float: right;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/views/interflow/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="Dynamic" @toMore="toMore('0')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="kydtList" @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="Learning" @toMore="toMore('1')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="xsjlList" @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="Cooperation" @toMore="toMore('2')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="ydhzList" @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="Industry" @toMore="toMore('3')"></component>
+              </el-col>
+              <el-col :span="24" class="down">
+                <component :is="cInterflow" :list="hyyjList" @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/interflow-1.png');
+const kydtList: Ref<any> = ref([]);
+const xsjlList: Ref<any> = ref([]);
+const ydhzList: Ref<any> = ref([]);
+const hyyjList: Ref<any> = ref([]);
+const columnList: Ref<any> = ref([{ site: 'kydt' }, { site: 'xsjl' }, { site: 'ydhz' }, { site: 'hyyj' }]);
 // 请求
 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 == 'kydt') kydtList.value = arr.data;
+          if (val.site == 'xsjl') xsjlList.value = arr.data;
+          if (val.site == 'ydhz') ydhzList.value = arr.data;
+          if (val.site == 'hyyj') hyyjList.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>