科技超市

src/views/market/index.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <el-col :span="24" class="main">
       <el-col :span="24" class="marketTop">
-        <el-col :span="12" class="left">
+        <!-- <el-col :span="12" class="left">
           <el-col :span="1" class="leftTitle">
             <p>科<br />技<br />产<br />品</p>
             <p></p>
@@ -14,8 +14,8 @@
             </el-col>
           </el-col>
           <el-col :span="24" class="leftListDown"><span></span><span @click="toProductList">MORE</span></el-col>
-        </el-col>
-        <el-col :span="12" class="right">
+        </el-col> -->
+        <!-- <el-col :span="12" class="right">
           <el-col :span="24" class="rightListTop"><span @click="toTecList">MORE</span><span></span></el-col>
           <el-col :span="23" class="infoRight">
             <el-col :span="24" class="tecList" v-for="(item, index) in tecList" :key="index">
@@ -29,6 +29,42 @@
             <p></p>
             <p>技<br />术<br />供<br />求</p>
           </el-col>
+        </el-col> -->
+        <el-col :span="12" class="left">
+          <el-col :span="24" class="downLeftTop">
+            <el-image :src="downLeftTopImage"></el-image>
+            <span class="topText">
+              <span>科技产品</span>
+              <span
+                ><p>P</p>
+                <p>roduct</p></span
+              >
+              <span @click="toProductList">更多</span>
+            </span>
+          </el-col>
+          <el-col :span="12" class="productList" v-for="(item, index) in productList" :key="index" @click.native="productDetail(item.id)">
+            <el-image :src="item.image[0].url"></el-image>
+            <p class="textOver">{{ item.name }}</p>
+          </el-col>
+        </el-col>
+        <el-col :span="12" class="right">
+          <el-col :span="24" class="downLeftTop">
+            <el-image :src="downLeftTopImage"></el-image>
+            <span class="topText">
+              <span>技术供求</span>
+              <span
+                ><p>T</p>
+                <p>echnology</p></span
+              >
+              <span @click="toTecList">更多</span>
+            </span>
+          </el-col>
+          <el-col :span="24" class="tecList" v-for="(item, index) in tecList" :key="index">
+            <span></span>
+            <span class="textOver" @click="tecDetail(item.id)">{{ item.name }}</span>
+            <span>对接</span>
+            <span>{{ item.meta | getDate }}</span>
+          </el-col>
         </el-col>
         <el-col :span="24">
           <el-image :src="gongqiuImage" class="gongqiuImage"></el-image>
@@ -108,6 +144,7 @@
           </el-col>
         </el-col>
       </el-col>
+      <el-col :span="4" class="marketPublish">我要发布</el-col>
     </el-col>
   </div>
 </template>
@@ -250,6 +287,9 @@ export default {
   height: 500px;
   margin: 10px 0 20px 0;
   overflow: hidden;
+  // box-shadow: 2px 2px 2px #888888;
+  border-right: 1px dashed #044b79;
+  width: 49.5%;
 }
 .leftTitle {
   text-align: center;
@@ -278,6 +318,7 @@ export default {
   margin: 0 10px 10px 0;
   width: 48%;
   height: 220px;
+  cursor: pointer;
 }
 .productList:nth-child(2n) {
   margin: 0 0 10px 0;
@@ -325,6 +366,7 @@ export default {
   height: 500px;
   overflow: hidden;
   margin: 10px 0 20px 0;
+  width: 49.5%;
 }
 .rightListTop {
   position: relative;
@@ -367,6 +409,7 @@ export default {
   width: 80%;
   font-size: 18px;
   padding: 0 15px;
+  cursor: pointer;
 }
 .tecList span:nth-child(3n) {
   display: inline-block;
@@ -376,6 +419,7 @@ export default {
   color: #ffffff;
   font-size: 16px;
   padding: 3px 0px;
+  cursor: pointer;
 }
 .tecList span:last-child {
   display: block;
@@ -498,6 +542,7 @@ export default {
 }
 .bankingLists {
   height: 152px;
+  cursor: pointer;
 }
 .bankingLists .el-image {
   width: 100%;
@@ -530,6 +575,7 @@ export default {
 
 .bankingList {
   height: 152px;
+  cursor: pointer;
 }
 .bankingList .el-image {
   width: 100%;
@@ -601,4 +647,24 @@ export default {
 .downLeftInfos {
   height: 330px;
 }
+.marketPublish {
+  position: fixed;
+  background: #0279d5;
+  width: 100px;
+  height: 100px;
+  z-index: 999;
+  left: 2%;
+  top: 80%;
+  border-radius: 20px;
+  box-shadow: 2px 2px 2px #055c9f;
+  text-align: center;
+  line-height: 100px;
+  font-size: 20px;
+  color: #fff;
+  font-weight: bold;
+}
+.marketPublish:hover {
+  background: #f60;
+  cursor: pointer;
+}
 </style>