科技超市

src/layout/live/head.vue

@@ -39,7 +39,7 @@
                 <a @click="zhibo()" target="_blank">直播大厅</a>
               </li>
               <li :class="isTab('market') ? 'active' : ''">
-                <a @click="('market')" target="">科技超市</a>
+                <a @click="turnTo('market')" target="">科技超市</a>
               </li>
               <li :class="isTab('service') ? 'active' : ''">
                 <a @click="turnTo('service')" target="">创新服务</a>

src/views/direct.vue

@@ -801,7 +801,7 @@ p {
 .fangtan .chat {
   float: left;
   width: 30%;
-    height: 624px;
+  height: 624px;
   border-radius: 5px;
   box-shadow: 0 0 5px #c20808;
   padding: 0 10px 0px 10px;

src/views/market/index.vue

@@ -3,10 +3,15 @@
     <el-col :span="24" class="main">
       <el-col :span="12" class="left">
         <el-col :span="1" class="leftTitle">
-          <p>科<br /><br />成<br />果</p>
+          <p>科<br />技<br />产<br />品</p>
           <p></p>
         </el-col>
-        <el-col :span="23" class="infoLeft"> </el-col>
+        <el-col :span="23" class="infoLeft">
+          <el-col :span="12" class="productList" v-for="(item, index) in productList" :key="index" @click.native="detail(item)">
+            <el-image :src="item.image[0].url"></el-image>
+            <p>{{ item.name }}</p>
+          </el-col>
+        </el-col>
         <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
       </el-col>
       <el-col :span="12" class="right">
@@ -14,24 +19,11 @@
         <el-col :span="23" class="infoRight"> </el-col>
         <el-col :span="1" class="rightTitle">
           <p></p>
-          <p>达<br />成<br />意<br />愿</p>
+          <p>技<br />术<br />供<br />求</p>
         </el-col>
       </el-col>
-      <el-col :span="12" class="left">
-        <el-col :span="1" class="leftTitle">
-          <p>洽<br />谈<br />合<br />作</p>
-          <p></p>
-        </el-col>
-        <el-col :span="23" class="infoRight"> </el-col>
-        <el-col :span="24" class="leftListDown"><span></span><span>MORE</span></el-col>
-      </el-col>
-      <el-col :span="12" class="right">
-        <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
-        <el-col :span="23" class="infoLeft"> </el-col>
-        <el-col :span="1" class="rightTitle">
-          <p></p>
-          <p>发<br />布<br />需<br />求</p>
-        </el-col>
+      <el-col :span="24">
+        <el-image :src="gongqiuImage" class="gongqiuImage"></el-image>
       </el-col>
     </el-col>
   </div>
@@ -42,7 +34,15 @@ export default {
   name: 'index',
   props: {},
   components: {},
-  data: () => ({}),
+  data: () => ({
+    gongqiuImage: require('@/assets/live/main2.png'),
+    productList: [
+      { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
+      { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
+      { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
+      { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
+    ],
+  }),
   created() {},
   computed: {},
   methods: {},
@@ -50,6 +50,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.gongqiuImage {
+  width: 100%;
+  height: 100%;
+}
 .main {
   width: 80%;
   margin: 5px auto;
@@ -83,6 +87,31 @@ export default {
   height: 480px;
   padding: 0 10px;
 }
+.productList {
+  position: relative;
+  margin: 0 10px 10px 0;
+  width: 48%;
+  height: 220px;
+}
+.productList:nth-child(2n) {
+  margin: 0 0 10px 0;
+}
+.productList .el-image {
+  width: 100%;
+  height: 220px;
+}
+.productList p {
+  position: absolute;
+  text-align: center;
+  bottom: 0;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 10px;
+  background: #044b799f;
+  color: #fff;
+  width: 91%;
+  font-size: 18px;
+}
 .leftListDown {
   position: relative;
 }