科技超市

src/views/dynamic/index.vue

@@ -117,13 +117,13 @@ export default {
 }
 .main {
   width: 80%;
-  margin: 15px auto;
+  margin: 0 auto;
   float: none;
 }
 .left {
   float: left;
   height: 500px;
-  margin: 15px 0 15px 0;
+  margin: 30px 0 30px 0;
   overflow: hidden;
 }
 .leftTitle {
@@ -173,7 +173,7 @@ export default {
   float: right;
   height: 500px;
   overflow: hidden;
-  margin: 15px 0 15px 0;
+  margin: 30px 0 30px 0;
 }
 .rightListTop {
   position: relative;

src/views/dynamic/list.vue

@@ -185,7 +185,7 @@ export default {
 <style lang="less" scoped>
 .main {
   width: 80%;
-  margin: 20px auto;
+  margin: 0 auto;
   float: none;
 }
 .menu {
@@ -194,7 +194,7 @@ export default {
   width: 20%;
   background: no-repeat bottom right;
   background-image: url(../../assets/live/menu_back.jpg);
-  margin: 10px 0;
+  margin: 30px 0;
   padding: 10px 0 0 10px;
   box-sizing: border-box;
   box-shadow: 0 0 10px #bbbaba;
@@ -223,7 +223,7 @@ export default {
 .info {
   width: 77%;
   float: right;
-  margin: 10px 0 20px 2px;
+  margin: 30px 0 30px 2px;
   height: 585px;
   box-shadow: 0 0 10px #2d64b3;
   overflow: hidden;

src/views/market/index.vue

@@ -1,29 +1,88 @@
 <template>
   <div id="index">
     <el-col :span="24" class="main">
-      <el-col :span="12" class="left">
-        <el-col :span="1" class="leftTitle">
-          <p>科<br />技<br />产<br />品</p>
-          <p></p>
+      <el-col :span="24" class="marketTop">
+        <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="infoLeft">
+            <el-col :span="12" class="productList" v-for="(item, index) in productList" :key="index">
+              <el-image :src="item.image[0].url"></el-image>
+              <p class="textOver">{{ 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="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 :span="12" class="right">
+          <el-col :span="24" class="rightListTop"><span>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">
+              <span></span>
+              <span class="textOver">{{ item.name }}</span>
+              <span>对接</span>
+              <span>{{ item.meta | getDate }}</span>
+            </el-col>
+          </el-col>
+          <el-col :span="1" class="rightTitle">
+            <p></p>
+            <p>技<br />术<br />供<br />求</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">
-        <el-col :span="24" class="rightListTop"><span>MORE</span><span></span></el-col>
-        <el-col :span="23" class="infoRight"> </el-col>
-        <el-col :span="1" class="rightTitle">
-          <p></p>
-          <p>技<br />术<br />供<br />求</p>
+        <el-col :span="24">
+          <el-image :src="gongqiuImage" class="gongqiuImage"></el-image>
         </el-col>
       </el-col>
-      <el-col :span="24">
-        <el-image :src="gongqiuImage" class="gongqiuImage"></el-image>
+      <el-col :span="24" class="marketDown">
+        <el-col :span="24" class="downMain">
+          <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>B</p>
+                  <p>anking</p></span
+                >
+                <span>更多</span>
+              </span>
+            </el-col>
+            <el-col :span="24" class="downLeftInfo">
+              <el-col :span="24" class="bankingList" v-for="(item, index) in bankingList" :key="index">
+                <el-col :span="10">
+                  <el-image :src="item.image"></el-image>
+                </el-col>
+                <el-col :span="14">
+                  <span class="textOver">{{ item.title }}</span>
+                  <span>{{ item.content }}</span>
+                </el-col>
+              </el-col>
+            </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>S</p>
+                  <p>ervice</p></span
+                >
+                <span>更多</span>
+              </span>
+            </el-col>
+            <el-col :span="24" class="downRightImage">
+              <el-image src="http://img2.imgtn.bdimg.com/it/u=1300722955,3173826431&fm=26&gp=0.jpg"></el-image>
+            </el-col>
+            <el-col :span="24">
+              <el-col :span="24" class="downRightList" v-for="(item, index) in serviceList" :key="index">
+                <span></span>
+                <span>{{ item.title }}</span>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
       </el-col>
     </el-col>
   </div>
@@ -36,14 +95,92 @@ export default {
   components: {},
   data: () => ({
     gongqiuImage: require('@/assets/live/main2.png'),
+    downLeftTopImage: require('@/assets/live/square_big.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' }] },
-      { name: '浮台式水质监测系统', image: [{ url: 'http://img4.imgtn.bdimg.com/it/u=401434628,1454377580&fm=26&gp=0.jpg' }] },
+    ],
+    tecList: [
+      {
+        name: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
+        meta: { state: 0, createdAt: '2020-03-20T07:45:47.673Z', updatedAt: '2020-03-20T07:46:15.585Z' },
+      },
+      {
+        name: '测试型数据测试型数测试型数测试型数据',
+        meta: { state: 0, createdAt: '2020-03-20T07:45:47.673Z', updatedAt: '2020-03-20T07:46:15.585Z' },
+      },
+      {
+        name: '测试型数据测试型数测试型数测试型数据',
+        meta: { state: 0, createdAt: '2020-03-20T07:45:47.673Z', updatedAt: '2020-03-20T07:46:15.585Z' },
+      },
+      {
+        name: '测试型数据测试型数测试型数测试型数据',
+        meta: { state: 0, createdAt: '2020-03-20T07:45:47.673Z', updatedAt: '2020-03-20T07:46:15.585Z' },
+      },
+      {
+        name: '测试型数据测试型数测试型数测试型数据',
+        meta: { state: 0, createdAt: '2020-03-20T07:45:47.673Z', updatedAt: '2020-03-20T07:46:15.585Z' },
+      },
+      {
+        name: '测试型数据测试型数测试型数测试型数据',
+        meta: { state: 0, createdAt: '2020-03-20T07:45:47.673Z', updatedAt: '2020-03-20T07:46:15.585Z' },
+      },
+      {
+        name: '测试型数据测试型数测试型数测试型数据',
+        meta: { state: 0, createdAt: '2020-03-20T07:45:47.673Z', updatedAt: '2020-03-20T07:46:15.585Z' },
+      },
+    ],
+    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:
+          '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据',
+      },
+    ],
+    serviceList: [
+      { title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据' },
+      { title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据' },
+      { title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据' },
+      { title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据' },
+      { title: '测试型数据测试型数测试型数测试型数据测试型数据测试型数测试型数测试型数据' },
     ],
   }),
   created() {},
+  filters: {
+    getDate(meta) {
+      let createdAt = _.get(meta, `createdAt`);
+      let date = new Date(createdAt)
+        .toLocaleDateString()
+        .replace('/', '-')
+        .replace('/', '-');
+      return date;
+    },
+  },
   computed: {},
   methods: {},
 };
@@ -55,14 +192,19 @@ export default {
   height: 100%;
 }
 .main {
+  width: 100%;
+  margin: 20px auto;
+  float: none;
+}
+.marketTop {
   width: 80%;
-  margin: 5px auto;
+  margin: 20px auto;
   float: none;
 }
 .left {
   float: left;
   height: 500px;
-  margin: 10px 0 10px 0;
+  margin: 10px 0 20px 0;
   overflow: hidden;
 }
 .leftTitle {
@@ -106,10 +248,11 @@ export default {
   bottom: 0;
   height: 50px;
   line-height: 50px;
-  padding: 0 10px;
+  text-indent: 5px;
+  // padding: 0 10px;
   background: #044b799f;
   color: #fff;
-  width: 91%;
+  width: 100%;
   font-size: 18px;
 }
 .leftListDown {
@@ -117,7 +260,7 @@ export default {
 }
 .leftListDown span:first-child {
   display: inline-block;
-  width: 400px;
+  width: 80%;
   height: 3px;
   background: rgba(4, 75, 121, 0.37);
   margin: 0 10px 0 0;
@@ -136,7 +279,7 @@ export default {
   float: right;
   height: 500px;
   overflow: hidden;
-  margin: 10px 0 10px 0;
+  margin: 10px 0 20px 0;
 }
 .rightListTop {
   position: relative;
@@ -150,7 +293,7 @@ export default {
 }
 .rightListTop span:last-child {
   display: inline-block;
-  width: 400px;
+  width: 80%;
   height: 3px;
   background: rgba(4, 75, 121, 0.37);
   margin: 0 10px 0 0;
@@ -162,6 +305,39 @@ export default {
   height: 480px;
   padding: 0 10px;
 }
+.tecList {
+  padding: 0 15px;
+  margin: 10px 0 10px 0;
+}
+.tecList span:first-child {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: #2188c6;
+  border-radius: 90px;
+}
+.tecList span:nth-child(2n) {
+  display: inline-block;
+  width: 80%;
+  font-size: 18px;
+  padding: 0 15px;
+}
+.tecList span:nth-child(3n) {
+  display: inline-block;
+  width: 10%;
+  text-align: center;
+  background-color: #044b79;
+  color: #ffffff;
+  font-size: 16px;
+  padding: 3px 0px;
+}
+.tecList span:last-child {
+  display: block;
+  width: 120px;
+  text-align: left;
+  padding: 5px 0 5px 25px;
+  font-size: 14px;
+}
 .rightTitle {
   text-align: center;
 }
@@ -178,4 +354,120 @@ export default {
   font-weight: bold;
   color: #044b79;
 }
+.marketDown {
+  height: 550px;
+  overflow: hidden;
+  margin: 20px 0 20px 0;
+  background: #e9edf6;
+  padding-top: 30px;
+}
+.downMain {
+  width: 80%;
+  float: none;
+  height: 550px;
+  margin: 0 auto;
+}
+.downLeftTop .el-image {
+  width: 40px;
+}
+.topText {
+  width: 89%;
+  border-bottom: 2.5px solid #044b79;
+  display: inline-block;
+  position: relative;
+  top: -10px;
+  margin: 0 0 0 5px;
+}
+.topText span:first-child {
+  font-size: 24px;
+  font-weight: 700;
+  color: #000000;
+  padding: 0 10px;
+  top: 4px;
+}
+.topText span p:first-child {
+  font-weight: 800;
+  font-size: 34px;
+
+  color: #92959a;
+
+  top: 11px;
+  display: inline-block;
+}
+.topText span p:last-child {
+  display: inline-block;
+  font-weight: 700;
+  font-size: 18px;
+  color: #92959a;
+}
+.topText span:last-child {
+  float: right;
+  font-size: 16px;
+  font-weight: 700;
+  color: #044b79;
+  position: relative;
+  top: 20px;
+}
+.bankingList {
+  height: 152px;
+}
+.bankingList .el-image {
+  width: 100%;
+  height: 130px;
+  display: inline-block;
+}
+.bankingList span {
+  margin: 0 5px 0 5px;
+  display: inline-block;
+  width: 80%;
+  font-size: 18px;
+  padding: 0 0 0 10px;
+  color: #044b79;
+  font-weight: 700;
+}
+.bankingList span:last-child {
+  margin: 10px 0 0 5px;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 4;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  padding: 0 0 0 10px;
+  color: #666;
+  line-height: 25px;
+  font-weight: 400;
+}
+.downRightImage {
+  float: none;
+  width: 85%;
+  margin: 0 auto;
+}
+.downRightImage .el-image {
+  height: 200px;
+}
+.downRightList {
+  float: none;
+  width: 85%;
+  margin: 10px auto;
+  height: 50px;
+  font-size: 16px;
+  line-height: 35px;
+}
+.downRightList span:first-child {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: #2188c6;
+  border-radius: 90px;
+  margin: 10px;
+}
+.downRightList span:last-child {
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
 </style>

src/views/technical/index.vue

@@ -145,13 +145,13 @@ export default {
 }
 .main {
   width: 80%;
-  margin: 15px auto;
+  margin: 0 auto;
   float: none;
 }
 .left {
   float: left;
   height: 500px;
-  margin: 15px 0 15px 0;
+  margin: 30px 0 30px 0;
   overflow: hidden;
 }
 .leftTitle {
@@ -263,7 +263,7 @@ export default {
   float: right;
   height: 500px;
   overflow: hidden;
-  margin: 15px 0 15px 0;
+  margin: 30px 0 30px 0;
 }
 .rightListTop {
   position: relative;

src/views/technical/list.vue

@@ -214,7 +214,7 @@ export default {
 <style lang="less" scoped>
 .main {
   width: 80%;
-  margin: 20px auto;
+  margin: 0 auto;
   float: none;
 }
 .menu {
@@ -223,7 +223,7 @@ export default {
   width: 20%;
   background: no-repeat bottom right;
   background-image: url(../../assets/live/menu_back.jpg);
-  margin: 10px 0;
+  margin: 30px 0;
   padding: 10px 0 0 10px;
   box-sizing: border-box;
   box-shadow: 0 0 10px #bbbaba;
@@ -252,7 +252,7 @@ export default {
 .info {
   width: 77%;
   float: right;
-  margin: 10px 0 20px 2px;
+  margin: 30px 0 30px 2px;
   height: 585px;
   box-shadow: 0 0 10px #2d64b3;
   overflow: hidden;
@@ -343,10 +343,11 @@ export default {
   padding: 0 0 17px 0;
 }
 .infoRightList:nth-child(7) {
-  padding: 11px 0 0 0;
+  padding: 15px 0 0 0;
 }
 .infoRightList:nth-child(11) {
   border-bottom: 1px solid #ccc;
+  padding: 0 0 15px 0;
 }
 .infoRightList:hover p span:first-child {
   -webkit-transform: translateY(-3px);