1

src/views/market/index.vue

@@ -4,12 +4,12 @@
       <el-col :span="24">
         <el-col :span="24" class="top">
           <div class="w_1200">
-            <el-col :span="24" class="left">
+            <el-col :span="12" class="left">
               <el-col :span="24" class="leftTop">
-                <el-col :span="1" class="image">
+                <el-col :span="2" class="image">
                   <el-image :src="iconImage"></el-image>
                 </el-col>
-                <el-col :span="23" class="txt">
+                <el-col :span="22" class="txt">
                   <span>技术成果</span>
                   <span>A</span>
                   <span>chieve</span>
@@ -19,7 +19,7 @@
               <el-col :span="24" class="leftDown">
                 <el-row :gutter="7">
                   <el-col
-                    :span="6"
+                    :span="8"
                     class="achieveList"
                     v-for="(item, index) in achieveList"
                     :key="index"
@@ -46,12 +46,12 @@
                 </el-row>
               </el-col>
             </el-col>
-            <el-col :span="24" class="right">
+            <el-col :span="12" class="right">
               <el-col :span="24" class="rightTop">
-                <el-col :span="1" class="image">
+                <el-col :span="2" class="image">
                   <el-image :src="iconImage"></el-image>
                 </el-col>
-                <el-col :span="23" class="txt">
+                <el-col :span="22" class="txt">
                   <span>科技需求</span>
                   <span>T</span>
                   <span>echnology</span>
@@ -60,21 +60,20 @@
               </el-col>
               <el-col :span="24" class="rightDown">
                 <el-col
-                  :span="6"
+                  :span="24"
                   class="technologyList"
                   v-for="(item, index) in technologyList"
                   :key="index"
                   @click.native="$router.push({ path: '/market/marketlists', query: { type: '0', column_name: '科技需求', id: item._id } })"
                 >
-                  <el-col :span="12" class="name textOver">
+                  <el-col :span="19" class="name textOver">
                     {{ item.name }}
                   </el-col>
-                  <el-col :span="12" class="date">
+                  <el-col :span="5" class="date">
                     {{ item.meta | getDate }}
                   </el-col>
-                  <!-- <el-col :span="12" class="field"> 所属领域：{{ item.requirementdesc }} </el-col>
-                  <el-col :span="12" class="field"> 合作方式：{{ item.cooperation }} </el-col> -->
-                  <el-col :span="24" class="demand">{{ item.requirementdesc }}</el-col>
+                  <el-col :span="12" class="field"> 所属领域：{{ item.field }} </el-col>
+                  <el-col :span="12" class="field"> 合作方式：{{ item.cooperation }} </el-col>
                 </el-col>
               </el-col>
             </el-col>
@@ -85,12 +84,12 @@
         </el-col>
         <el-col :span="24" class="down">
           <div class="w_1200">
-            <el-col :span="24" class="left">
+            <el-col :span="12" class="left">
               <el-col :span="24" class="leftTop">
-                <el-col :span="1" class="image">
+                <el-col :span="2" class="image">
                   <el-image :src="iconImage"></el-image>
                 </el-col>
-                <el-col :span="23" class="txt">
+                <el-col :span="22" class="txt">
                   <span>商务服务</span>
                   <span>B</span>
                   <span>usiness</span>
@@ -99,17 +98,17 @@
               </el-col>
               <el-col :span="24" class="leftDown">
                 <el-col
-                  :span="6"
+                  :span="24"
                   class="businessList"
                   v-for="(item, index) in businessList"
                   :key="index"
                   @click.native="$router.push({ path: '/market/marketlists', query: { type: '2', column_name: '商务服务', id: item._id } })"
                 >
-                  <el-col :span="12" class="name textOver">
+                  <el-col :span="10" class="name textOver">
                     {{ item.name }}
                   </el-col>
-                  <!-- <el-col :span="10" class="messbute"> 信息属性：{{ item.messattribute }} </el-col> -->
-                  <el-col :span="12" class="date">
+                  <el-col :span="10" class="messbute"> 信息属性：{{ item.messattribute }} </el-col>
+                  <el-col :span="4" class="date">
                     {{ item.meta | getDate }}
                   </el-col>
                   <el-col :span="24" class="info">
@@ -118,12 +117,12 @@
                 </el-col>
               </el-col>
             </el-col>
-            <el-col :span="24" class="right">
+            <el-col :span="12" class="right">
               <el-col :span="24" class="rightTop">
-                <el-col :span="1" class="image">
+                <el-col :span="2" class="image">
                   <el-image :src="iconImage"></el-image>
                 </el-col>
-                <el-col :span="23" class="txt">
+                <el-col :span="22" class="txt">
                   <span>专家智库</span>
                   <span>E</span>
                   <span>xpert</span>
@@ -132,17 +131,17 @@
               </el-col>
               <el-col :span="24" class="rightDown">
                 <el-col
-                  :span="6"
+                  :span="12"
                   class="expertList"
                   v-for="(item, index) in expertList"
                   :key="index"
                   @click.native="$router.push({ path: '/market/marketlists', query: { type: '3', column_name: '专家智库', id: item._id } })"
                 >
-                  <el-col :span="24" class="expertimage">
+                  <el-col :span="8" class="expertimage">
                     <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage"></el-image>
                     <el-image :src="expertimage" v-else></el-image>
                   </el-col>
-                  <el-col :span="24" class="rightInfo">
+                  <el-col :span="16" class="rightInfo">
                     <el-col :span="24" class="name textOver">
                       {{ item.name }}
                     </el-col>
@@ -617,14 +616,13 @@ export default {
     ...product({ newquery: 'newquery', productCreate: 'create', marketquery: 'marketquery' }),
     ...expertsuser({ expertQuery: 'query', expertquery: 'expertquery' }),
     async search() {
-      let res = await this.marketquery({ skip: 0, limit: 8, type: '1', status: '1' });
+      let res = await this.marketquery({ skip: 0, limit: 6, type: '1', status: '1' });
       if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
-      res = await this.marketquery({ skip: 0, limit: 8, type: '0', status: '1' });
+      res = await this.marketquery({ skip: 0, limit: 6, type: '0', status: '1' });
       if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
-      res = await this.marketquery({ skip: 0, limit: 4, type: '2', status: '1' });
+      res = await this.marketquery({ skip: 0, limit: 5, type: '2', status: '1' });
       if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
-      res = await this.expertquery({ skip: 0, limit: 8 });
-      console.log(res);
+      res = await this.expertquery({ skip: 0, limit: 6 });
       if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
     },
     // 未注册用户添加产品
@@ -715,18 +713,20 @@ export default {
   margin: 0 auto;
 }
 .top {
-  margin: 15px 0 30px 0;
+  margin: 15px 0;
+  height: 530px;
   overflow: hidden;
   .left {
-    // border-right: 1px dashed #ccc;
-    margin-bottom: 15px;
+    background: #f1f1f1f1;
+    padding: 15px;
+    border-radius: 20px;
+    margin: 0 15px 0 0;
     .leftTop {
       height: 50px;
       .txt {
         height: 47px;
         line-height: 47px;
         border-bottom: 3px solid #044b79;
-        padding-left: 10px;
         span:first-child {
           color: #000000;
           font-size: 24px;
@@ -756,21 +756,18 @@ export default {
       }
     }
     .leftDown {
-      // height: 450px;
-      margin-top: 15px;
+      height: 450px;
       .achieveList {
         // position: relative;
         overflow: hidden;
-        // height: 220px;
-        height: 315px;
+        height: 220px;
         margin-top: 5px;
         padding: 0px 8px;
         .achieveImage {
           position: relative;
           .el-image {
             width: 100%;
-            // height: 220px;
-            height: 310px;
+            height: 220px;
             overflow: hidden;
             border-radius: 5px;
             transition: all 0.4s linear;
@@ -778,25 +775,29 @@ export default {
           }
           .aName {
             position: absolute;
-            top: 33px;
+            top: 25px;
             left: 0px;
+            text-align: center;
             transform: scale(0.8);
             font-weight: bolder;
-            font-size: 15px;
+            // color: transparent;
+            // 文字边框宽度和颜色
             -webkit-text-stroke: 1px #f18d2c;
             font-style: oblique;
+            // 文字填充色
             -webkit-text-fill-color: transparent;
             letter-spacing: 3px;
           }
           .a-brief {
+            margin: 10px 0px;
             position: absolute;
-            top: 35px;
+            top: 31px;
             left: 0px;
             overflow: hidden;
-            font-size: 14px;
+            line-height: 20px;
             letter-spacing: 2px;
             text-overflow: ellipsis;
-            -webkit-line-clamp: 12;
+            -webkit-line-clamp: 7;
             word-break: break-all;
             display: -webkit-box;
             -webkit-box-orient: vertical;
@@ -804,7 +805,6 @@ export default {
           }
           .cont {
             position: absolute;
-            font-size: 14px;
             left: 0px;
             bottom: 10px;
             transform: scale(0.8);
@@ -816,8 +816,8 @@ export default {
           }
           .company {
             position: absolute;
-            top: 6px;
-            left: 30px;
+            top: 3px;
+            left: 20px;
             width: 86%;
             color: #ec6c2d;
             -webkit-text-stroke: 1px #f18d2c;
@@ -836,14 +836,16 @@ export default {
     }
   }
   .right {
-    margin-top: 15px;
+    width: 48%;
+    background: #f1f1f1f1;
+    border-radius: 20px;
+    padding: 15px;
     .rightTop {
       height: 50px;
       .txt {
         height: 47px;
         line-height: 47px;
         border-bottom: 3px solid #044b79;
-        padding-left: 10px;
         span:first-child {
           color: #000000;
           font-size: 24px;
@@ -873,38 +875,22 @@ export default {
       }
     }
     .rightDown {
-      // padding: 0 10px;
-      margin-top: 15px;
+      padding: 0 10px;
       .technologyList {
-        padding: 10px 15px 0px 15px;
-        // border-bottom: 1px dashed #ccc;
-        border: 1px dashed #ccc;
-        margin-right: 15px;
-        width: 288px;
-        margin-top: 15px;
+        padding: 10px 0;
+        border-bottom: 1px dashed #ccc;
         .name {
           font-size: 18px;
-          width: 65%;
         }
         .date {
-          text-align: right;
-          font-size: 15px;
-          width: 35%;
+          text-align: center;
+          font-size: 16px;
         }
-        .demand {
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 9;
-          overflow: hidden;
-          margin-top: 13px;
-          height: 280px;
-          line-height: 31px;
-          font-size: 13px;
+        .field {
+          padding: 10px 0 0 0;
+          font-size: 15px;
         }
       }
-      .technologyList:nth-child(4n) {
-        margin-right: 0px;
-      }
       .technologyList:hover {
         cursor: pointer;
         .name {
@@ -922,20 +908,18 @@ export default {
   }
 }
 .down {
-  // height: 550px;
-  padding: 50px 0 50px 0;
+  height: 550px;
+  padding: 50px 0 0 0;
   margin: 0 0 15px 0;
   background-color: #e9edf6;
   .left {
-    // border-right: 1px dashed #ccc;
-    margin-bottom: 30px;
+    border-right: 1px dashed #ccc;
     .leftTop {
       height: 50px;
       .txt {
         height: 47px;
         line-height: 47px;
         border-bottom: 3px solid #044b79;
-        padding-left: 10px;
         span:first-child {
           color: #000000;
           font-size: 24px;
@@ -965,42 +949,36 @@ export default {
       }
     }
     .leftDown {
-      // height: 450px;
+      height: 450px;
       padding: 0 10px;
-      margin-top: 15px;
       .businessList {
-        padding: 10px 15px 0px 15px;
-        // border-bottom: 1px dashed #ccc;
-        border: 1px dashed #0085d2;
-        margin-right: 15px;
-        width: 288px;
-        margin-top: 15px;
+        padding: 10px 0;
+        border-bottom: 1px dashed #044b79;
         .name {
           font-size: 18px;
-          width: 65%;
+        }
+        .messbute {
+          font-size: 16px;
         }
         .date {
-          text-align: right;
-          font-size: 15px;
-          width: 35%;
+          font-size: 16px;
+          text-align: center;
         }
         .info {
+          padding: 5px 0 0 0;
+          height: 45px;
+          font-size: 14px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
           display: -webkit-box;
           -webkit-box-orient: vertical;
-          -webkit-line-clamp: 9;
-          overflow: hidden;
-          margin-top: 13px;
-          height: 280px;
-          line-height: 31px;
-          font-size: 13px;
         }
       }
-      .businessList:nth-child(4n) {
-        margin-right: 0px;
+      .businessList:last-child {
+        border-bottom: none;
       }
-      // .businessList:last-child {
-      //   border-bottom: none;
-      // }
       .businessList:hover {
         cursor: pointer;
         .name {
@@ -1017,7 +995,6 @@ export default {
         height: 47px;
         line-height: 47px;
         border-bottom: 3px solid #044b79;
-        padding-left: 10px;
         span:first-child {
           color: #000000;
           font-size: 24px;
@@ -1047,52 +1024,45 @@ export default {
       }
     }
     .rightDown {
-      margin-top: 20px;
-      // height: 450px;
-      // padding: 0 10px;
+      height: 450px;
+      padding: 0 10px;
       .expertList {
-        margin: 0 16px 10px 0;
-        width: 24%;
-        border: 1px dashed #044b79;
-        padding: 10px;
-        height: 300px;
+        margin: 20px 0 10px 0;
+        padding: 10px 0;
+        border-bottom: 1px dashed #044b79;
         .expertimage {
-          text-align: center;
-          padding: 10px 0;
           .el-image {
-            width: 50%;
-            height: 125px;
+            width: 90px;
+            height: 90px;
             border-radius: 90px;
           }
         }
         .rightInfo {
+          padding: 0 10px;
           .name {
             font-size: 18px;
-            padding: 10px 0;
-            font-weight: bolder;
-            text-align: center;
+            padding: 7px 0 0 0;
           }
           .school {
             font-size: 16px;
-            padding: 10px 0;
-            text-align: center;
+            padding: 7px 0 0 0;
+          }
+          .edu {
+            font-size: 16px;
+            padding: 7px 0 0 0;
           }
           .company {
             font-size: 16px;
-            padding: 10px 0;
-            text-align: center;
+            padding: 7px 0 0 0;
           }
         }
       }
-      .expertList:nth-child(4n) {
-        margin-right: 0px;
+      .expertList:nth-child(5) {
+        border-bottom: none;
+      }
+      .expertList:nth-child(6) {
+        border-bottom: none;
       }
-      // .expertList:nth-child(5) {
-      //   border-bottom: none;
-      // }
-      // .expertList:nth-child(6) {
-      //   border-bottom: none;
-      // }
       .expertList:hover {
         cursor: pointer;
         .name {
@@ -1146,7 +1116,6 @@ export default {
           margin: 0 0 5px 0;
           border-bottom: 1px dashed #ccc;
           padding: 10px 0;
-          padding-left: 10px;
           .left {
             text-align: center;
             height: 40px;