科技超市

src/views/market/index.vue

@@ -8,7 +8,18 @@
               <el-col :span="24" class="top">
                 <component :is="cTop" zTxt="技术成果" eTxt="Achieve" @toMore="toMore('0')"></component>
               </el-col>
-              <el-col :span="24" class="down"> 列表 </el-col>
+              <el-col :span="24" class="down">
+                <el-col :span="8" class="list" :key="index" v-for="(item, index) in jscgList" @click="toLook(item, '0')">
+                  <el-col :span="24" class="text">
+                    <p class="name textOver" :title="item.name">{{ item.name }}</p>
+                    <p class="brief" :title="item.achievebrief">{{ item.achievebrief }}</p>
+                    <p class="other">
+                      <span class="textOver">领域：{{ getField(item.field) }}</span>
+                      <span class="textOver">联系人：{{ item.contact }}</span>
+                    </p>
+                  </el-col>
+                </el-col>
+              </el-col>
             </el-col>
             <el-col :span="12" class="one_1">
               <el-col :span="24" class="top">
@@ -31,7 +42,18 @@
               <el-col :span="24" class="top">
                 <component :is="cTop" zTxt="专家智库" eTxt="Expert" @toMore="toMore('3')"></component>
               </el-col>
-              <el-col :span="24" class="down"> 列表 </el-col>
+              <el-col :span="24" class="down">
+                <el-col :span="12" class="expertlist" :key="index" v-for="(item, index) in zjzkList" @click="toLook(item, '3')">
+                  <el-col :span="8" class="head">
+                    <el-image :src="item.icon && item.icon.length > 0 ? item.icon[0].url : experturl"></el-image>
+                  </el-col>
+                  <el-col :span="16" class="rightInfo">
+                    <el-col :span="24" class="name names textOver" :title="item.name">{{ item.name || '暂无' }}</el-col>
+                    <el-col :span="24" class="school textOver" :title="item.zwzc">{{ item.zwzc }}</el-col>
+                    <el-col :span="24" class="company textOver" :title="item.school">{{ item.school }}</el-col>
+                  </el-col>
+                </el-col>
+              </el-col>
             </el-col>
           </el-col>
         </el-col>
@@ -46,25 +68,54 @@ import cTop from '@/components/common/top.vue';
 import type { Ref } from 'vue';
 import { onMounted, ref } from 'vue';
 // 接口
-
+import { DictDataStore } from '@common/src/stores/system/dictData'; // 字典表
+import { ProductStore } from '@common/src/stores/allAdmin/product';
+import { ExpertStore } from '@common/src/stores/admins/expert';
+import type { IQueryResult } from '@/util/types.util';
+const product = ProductStore();
+const dictData = DictDataStore();
+const expert = ExpertStore();
 // 加载中
 const loading: Ref<any> = ref(false);
 // 中间图片
 const centerImg: Ref<any> = ref('/src/assets/market-4.png');
-
+const experturl: Ref<any> = ref('/src/assets/market-5.png');
+const jscgList: Ref<any> = ref([]); // 技术成果
+const zjzkList: Ref<any> = ref([]); // 专家智库
+const product_fieldList: Ref<any> = ref([]); // 所属领域
 // 请求
 onMounted(async () => {
   loading.value = true;
+  await searchOther();
   await search();
   loading.value = false;
 });
-const search = () => {
-  console.log('1');
+const search = async () => {
+  let res: IQueryResult;
+  res = await product.query({ status: '2', type: '1', limit: 6 });
+  if (res.errcode == 0) jscgList.value = res.data;
+  res = await expert.query({ status: '1', limit: 8 });
+  if (res.errcode == 0) zjzkList.value = res.data;
+};
+const getField = (type) => {
+  let data: any = product_fieldList.value.find((i: any) => i.value == type);
+  if (data) return data.label;
+  else return '暂无';
+};
+const toLook = (e, type) => {
+  console.log(e);
+  console.log(type);
 };
 // 查看更多
 const toMore = (e) => {
   console.log(e);
 };
+const searchOther = async () => {
+  let res: IQueryResult;
+  // 所属领域
+  res = await dictData.query({ type: 'product_field' });
+  if (res.errcode == 0) product_fieldList.value = res.data;
+};
 </script>
 <style scoped lang="scss">
 .main {
@@ -87,5 +138,181 @@ const toMore = (e) => {
       margin: 0;
     }
   }
+  .two {
+    .el-image {
+      width: 100%;
+      height: 126px;
+      overflow: hidden;
+    }
+  }
+}
+
+// 头部公共样式
+.top {
+  height: 50px;
+  overflow: hidden;
+}
+.down {
+  height: 450px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  .list {
+    position: relative;
+    overflow: hidden;
+    height: 220px;
+    margin: 0 8px 10px 0;
+    max-width: 31.9%;
+    cursor: pointer;
+    .text {
+      width: 100%;
+      height: 220px;
+      background: url('@/assets/market-2.png');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      padding: 25px 19px;
+      .name {
+        font-size: 16px;
+        font-weight: 700;
+        margin: 0 0 5px 0;
+      }
+      .brief {
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 7;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        padding: 0 5px;
+      }
+      .other {
+        padding: 5px 0 0 0;
+        position: absolute;
+        bottom: 10px;
+        width: 83%;
+        span {
+          padding: 3px 0 0 0;
+          float: left;
+          width: 100%;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+  .list:hover .text .name {
+    color: rgb(0, 149, 255);
+  }
+  .listzhuan {
+    width: 32%;
+    height: 220px;
+    margin: 1px 4px 5px 3px;
+    box-shadow: 0 0 5px #ccc;
+    border-radius: 5px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    .image {
+      width: 100%;
+      height: 175px;
+    }
+    .name {
+      font-size: 16px;
+      font-weight: 700;
+      text-align: center;
+    }
+  }
+  .listzhuan:hover .name {
+    color: rgb(0, 149, 255);
+  }
+  .projectlist {
+    border-bottom: 1px dashed #000;
+    padding: 12px 0;
+    cursor: pointer;
+    .date {
+      text-align: center;
+      span {
+        background: #044b79;
+        padding: 2px 5px 4px 5px;
+        font-size: 14px;
+        border-radius: 5px;
+        font-weight: 700;
+        color: #fff;
+      }
+    }
+    .subject {
+      font-size: 16px;
+      font-weight: 700;
+      padding: 0 0 0 5px;
+      color: #000;
+    }
+  }
+  .projectlist:hover .subject {
+    color: rgb(0, 149, 255);
+    .remarks {
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      padding: 5px 0 0 0;
+      height: 43px;
+    }
+  }
+  .projectlist:last-child {
+    border-bottom: none;
+  }
+  .expertlist {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    cursor: pointer;
+    padding: 10px 0;
+    border-bottom: 1px dashed #044b79;
+    .head {
+      width: 90px;
+      height: 90px;
+      border-radius: 90px;
+      :deep(.el-image) {
+        border-radius: 90px;
+        width: 90px;
+        height: 90px;
+      }
+    }
+    .rightInfo {
+      padding: 0 10px;
+      .name {
+        font-size: 18px;
+        padding: 7px 0 0 0;
+        font-weight: 700;
+        .names {
+          font-size: 18px;
+          font-weight: 700;
+          color: #000;
+        }
+      }
+      .names {
+        color: rgb(0, 149, 255);
+      }
+      .company {
+        font-size: 16px;
+        padding: 7px 0 0 0;
+      }
+      .school {
+        font-size: 16px;
+        padding: 7px 0 0 0;
+      }
+    }
+  }
+  .expertlist:nth-child(8) {
+    border-bottom: none;
+  }
+  .expertlist:nth-child(7) {
+    border-bottom: none;
+  }
 }
 </style>