科技超市专家

src/views/market/index.vue

@@ -100,21 +100,25 @@
             <el-col :span="24" class="downLeftTop">
               <el-image :src="downLeftTopImage"></el-image>
               <span class="topText">
-                <span>金融供求</span>
+                <span>专家供求</span>
                 <span
-                  ><p>B</p>
-                  <p>anking</p></span
+                  ><p>E</p>
+                  <p>xpert</p></span
                 >
                 <span>更多</span>
               </span>
             </el-col>
-            <el-col :span="24" class="downRightImage">
-              <el-image :src="serviceImage"></el-image>
-            </el-col>
             <el-col :span="24">
-              <el-col :span="24" class="downRightList" v-for="(item, index) in bankingList" :key="index">
-                <span></span>
-                <span>{{ item.title }}</span>
+              <el-col :span="24" class="downRightList" v-for="(item, index) in expertsList" :key="index">
+                <el-col :span="10"><el-image :src="item.imgpath"></el-image></el-col>
+                <el-col :span="14"
+                  ><p>{{ item.name }}</p>
+                  <p>从事领域：</p>
+                  <p>{{ item.field }}</p></el-col
+                >
+                <el-col :span="24"
+                  ><p>{{ item.job_profile }}</p></el-col
+                >
               </el-col>
             </el-col>
           </el-col>
@@ -144,7 +148,7 @@
           </el-col>
         </el-col>
       </el-col>
-      <el-col :span="4" class="marketPublish">我要发布</el-col>
+      <el-col :span="24" class="marketPublish">我要发布</el-col>
     </el-col>
   </div>
 </template>
@@ -162,39 +166,9 @@ export default {
   data: () => ({
     gongqiuImage: require('@/assets/live/main2.png'),
     downLeftTopImage: require('@/assets/live/square_big.png'),
-    serviceImage: require('@/assets/live/service_picture_one.jpg'),
     productList: [],
     tecList: [],
-    bankingList: [
-      {
-        image:
-          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588061253920&di=18e7a68061c9debd24a2db64967b891c&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F51%2F81%2F1257923ada49020.jpg',
-        title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-        content:
-          '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-      },
-      {
-        image:
-          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588061253920&di=18e7a68061c9debd24a2db64967b891c&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F51%2F81%2F1257923ada49020.jpg',
-        title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-        content:
-          '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-      },
-      {
-        image:
-          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588061253920&di=18e7a68061c9debd24a2db64967b891c&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F51%2F81%2F1257923ada49020.jpg',
-        title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-        content:
-          '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-      },
-      {
-        image:
-          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588061253920&di=18e7a68061c9debd24a2db64967b891c&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F51%2F81%2F1257923ada49020.jpg',
-        title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-        content:
-          '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
-      },
-    ],
+    expertsList: [],
     serviceList: [],
     newList: [],
   }),
@@ -231,8 +205,9 @@ export default {
       if (this.$checkRes(res)) this.$set(this, `newList`, res.data);
       res = await this.query({ skip: 0, limit: 4, totaltype: '2' });
       if (this.$checkRes(res)) this.$set(this, `serviceList`, res.data);
-      // res = await this.expertQuery({ skip: 0, limit: 4 });
-      // if (this.$checkRes(res)) this.$set(this, `expertsList`, res.data);
+      res = await this.expertQuery({ skip: 0, limit: 4 });
+      if (this.$checkRes(res)) this.$set(this, `expertsList`, res.data);
+      console.log(res.data);
     },
     toProductList() {
       // window.location.href = 'http://free.liaoningdoupo.com/platweb/supermaket/supermarketlist?totaltype=1';
@@ -605,39 +580,38 @@ export default {
   line-height: 25px;
   font-weight: 400;
 }
-
-.downRightImage {
-  float: none;
-  width: 85%;
-  margin: 0 auto;
-}
-.downRightImage .el-image {
+.downRightList {
+  width: 49%;
+  margin: 10px 0;
   height: 200px;
+  font-size: 16px;
+  display: inline-block;
+  cursor: pointer;
+}
+.downRightList .el-image {
   width: 100%;
+  height: 100px;
+  border-radius: 100%;
 }
-.downRightList {
-  float: none;
-  width: 85%;
-  margin: 10px auto;
-  height: 50px;
-  font-size: 16px;
-  line-height: 35px;
+.downRightList p {
+  padding-left: 10px;
 }
-.downRightList span:first-child {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  background: #2188c6;
-  border-radius: 90px;
-  margin: 10px;
+.downRightList p:first-child {
+  font-size: 20px;
+  height: 40px;
 }
-.downRightList span:last-child {
-  width: 80%;
+.downRightList p:last-child {
+  width: 90%;
+  font-size: 16px;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
-  display: inline-block;
+  -webkit-line-clamp: 5;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  height: auto;
 }
+
 .marketNew {
   float: none;
   width: 80%;