科技超市小主页更新

src/components/supermarket.vue

@@ -6,7 +6,7 @@
       </el-col>
       <el-col :span="24" class="logo">
         <div class="w_1200">
-          <logo></logo>
+          <logo :info="info"></logo>
         </div>
       </el-col>
       <el-col :span="24" class="menu">
@@ -20,19 +20,19 @@
             <fenlei></fenlei>
           </el-col>
           <el-col :span="19" class="rightcont">
-            <rightcont></rightcont>
+            <rightcont :jishuList="jishuList" :chanpinList="chanpinList" :serviceList="serviceList"></rightcont>
           </el-col>
           <el-col :span="24" class="fabu">
-            <fabu></fabu>
+            <fabu :fabuList="fabuList"></fabu>
           </el-col>
           <el-col :span="24" class="jiaoyi">
-            产品
+            <jiaoyi :tableData="tableData"></jiaoyi>
           </el-col>
         </div>
       </el-col>
       <el-col :span="24" class="foot">
         <div class="w_1200">
-          <foot></foot>
+          <foot :info="info"></foot>
         </div>
       </el-col>
     </el-row>
@@ -43,14 +43,22 @@
 import top from '@/layout/index/top.vue';
 import logo from '@/layout/index/logo.vue';
 import menuInfo from '@/layout/index/menuInfo.vue';
-import fabu from '@/layout/supermarket/fabu.vue';
 import fenlei from '@/layout/supermarket/fenlei.vue';
 import rightcont from '@/layout/supermarket/rightcont.vue';
+import fabu from '@/layout/supermarket/fabu.vue';
+import jiaoyi from '@/layout/supermarket/jiaoyi.vue';
 import foot from '@/layout/index/foot.vue';
 
 export default {
   name: 'supermarket',
-  props: {},
+  props: {
+    info: null, //站点信息
+    jishuList: null, //技术供求
+    chanpinList: null, //产品供求
+    serviceList: null, //服务供求
+    fabuList: null, //最新发布
+    tableData: null, //交易展示
+  },
   components: {
     top, //头部
     logo, //logo
@@ -58,6 +66,7 @@ export default {
     fenlei, //商务分类
     rightcont, //商务分类右侧信息列表
     fabu, //发布信息列表
+    jiaoyi, //交易展示
     foot, //底部
   },
   data: () => ({}),

src/layout/index/top.vue

@@ -6,7 +6,7 @@
           <el-col :span="22" class="date">
             {{ gettime }}
           </el-col>
-          <el-col :span="2" class="btn"> <el-link :underline="false">登录</el-link>|<el-link :underline="false">注册</el-link> </el-col>
+          <el-col :span="2" class="btn"> <el-link :underline="false">注册</el-link>|<el-link :underline="false">登录</el-link> </el-col>
         </div>
       </el-col>
     </el-row>

src/layout/supermarket/fabu.vue

@@ -1,151 +1,142 @@
 <template>
   <div id="fabu">
-    <el-col class="fabu">
-      <el-col span="22">最新发布</el-col><el-col :span="1" class="gengduo">更多npmNPM</el-col>
-      <el-col :span="1" class="more"><i class="el-icon-more"></i> </el-col>
-    </el-col>
-    <el-col class="big_content">
-      <el-image style="width:100px;height:100px;" :src="src" class="tupian"></el-image>
-      <el-col class="content">
-        <el-col class="first_content">最新发布3 <span class="first_span">供</span></el-col>
-        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
-        <el-col class="third_content">类别：LS <span class="third_span">上架时间：2018-11-03</span> </el-col>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="21" class="left">{{ title }}</el-col>
+          <el-col :span="2" class="btn"><el-link :underline="false">我要发布</el-link></el-col>
+          <el-col :span="1" class="more">
+            <el-link :underline="false"><el-image :src="more"></el-image></el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <el-col :span="12" class="fabuList" v-for="(item, index) in fabuList" :key="index">
+            <el-link :underline="false">
+              <el-col :span="5" class="image">
+                <el-image style="width:100px;height:97px;" :src="item.pic"></el-image>
+              </el-col>
+              <el-col :span="19" class="fabuListInfo">
+                <el-col :span="23" class="title">
+                  <span class="textOver">{{ item.title }}</span>
+                </el-col>
+                <el-col :span="1" class="num">
+                  {{ item.num }}
+                </el-col>
+                <el-col :span="16" class="company">
+                  <span class="textOver">所属企业：{{ item.company }}</span>
+                </el-col>
+                <el-col :span="8" class="status"> 认证状态：{{ item.status }}</el-col>
+                <el-col :span="14" class="type">类别：{{ item.type }}</el-col>
+                <el-col :span="10" class="date">上架时间：{{ item.date }}</el-col>
+              </el-col>
+            </el-link>
+          </el-col>
+        </el-col>
       </el-col>
-      <el-image style="width:100px;height:100px;" :src="src" class="tupian_1"></el-image>
-      <el-col class="content_1">
-        <el-col class="first_content">最新发布1 <span class="first_span">供</span></el-col>
-        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
-        <el-col class="third_content">类别：YS <span class="third_span">上架时间：2018-11-03</span> </el-col>
-      </el-col>
-    </el-col>
-    <el-col class="big_content">
-      <el-image style="width:100px;height:100px;" :src="src" class="tupian"></el-image>
-      <el-col class="content">
-        <el-col class="first_content">最新发布3 <span class="first_span">供</span></el-col>
-        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
-        <el-col class="third_content">类别：LS <span class="third_span">上架时间：2018-11-03</span> </el-col>
-      </el-col>
-      <el-image style="width:100px;height:100px;" :src="src" class="tupian_1"></el-image>
-      <el-col class="content_1">
-        <el-col class="first_content">最新发布1 <span class="first_span">供</span></el-col>
-        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
-        <el-col class="third_content">类别：YS <span class="third_span">上架时间：2018-11-03</span> </el-col>
-      </el-col>
-    </el-col>
-    <el-col>
-      <el-image style="width:100px;height:100px;" :src="src" class="tupian"></el-image>
-      <el-col class="content">
-        <el-col class="first_content">最新发布3 <span class="first_span">供</span></el-col>
-        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
-        <el-col class="third_content">类别：LS <span class="third_span">上架时间：2018-11-03</span> </el-col>
-      </el-col>
-      <el-image style="width:100px;height:100px;" :src="src" class="tupian_1"></el-image>
-      <el-col class="content_1">
-        <el-col class="first_content">家用空气净化剂<span class="first_span">供</span></el-col>
-        <el-col class="second_content">所属企业:硅藻土企业 <span class="second_span">认证状态：已认证</span></el-col>
-        <el-col class="third_content">类别：YS <span class="third_span">上架时间：2018-11-03</span> </el-col>
-      </el-col>
-    </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 export default {
   name: 'fenlei',
-  props: {},
+  props: {
+    fabuList: null,
+  },
   components: {},
   data: () => ({
-    src: require('@/assets/fabu.jpg'),
+    title: '最新发布',
+    more: require('@/assets/更多.png'),
   }),
   created() {},
   computed: {},
-  methods: {
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    handleClose(key, keyPath) {
-      console.log(key, keyPath);
-    },
-  },
+  methods: {},
 };
 </script>
 
 <style lang="less" scoped>
-.fabu {
-  width: 1200px;
-  height: 60px;
-  background-color: aqua;
-  font-size: 23px;
+.info {
+  padding: 20px;
+}
+.topInfo {
+  height: 30px;
+  line-height: 30px;
+  margin: 0 0 10px 0;
+}
+.topInfo .left {
+  font-size: 22px;
   color: #22529a;
-  height: 60px;
-  line-height: 60px;
-  padding-left: 20px;
-  padding-right: 20px;
   font-weight: bold;
 }
-.tupian {
-  padding-left: 20px;
-  float: left;
+.topInfo .btn {
+  text-align: right;
+  width: 125px;
+  padding: 0 20px 0 0px;
 }
-.content {
-  text-indent: 20px;
-  height: 100px;
-  width: 475px;
-  color: #6d6d6d;
+/deep/.topInfo .btn .el-link {
+  font-size: 14px;
+  color: #22529a;
+  font-weight: bold;
+}
+.topInfo .more {
+  width: 20px;
+  height: 30px;
+  text-align: right;
+  padding: 10px 0;
+}
+.fabuList {
   background-color: #f3f3f3;
+  height: 97px;
+  overflow: hidden;
+  margin: 0 10px 10px 0;
+  width: 575px;
+}
+.fabuList:nth-child(2n) {
+  margin: 0 0 10px 0;
 }
-.tupian_1 {
-  padding-left: 10px;
-  float: left;
+.fabuList .image {
+  width: 100px;
+  height: 97px;
 }
-.content_1 {
-  text-indent: 20px;
-  height: 100px;
+.fabuListInfo {
+  padding: 0 20px;
   width: 475px;
-  color: #6d6d6d;
-  background-color: #f3f3f3;
+  height: 97px;
 }
-.first_content {
-  font-size: 14px;
-  height: 45px;
-  line-height: 45px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: rgb(96, 99, 109);
-  font-size: 14px;
-  overflow: hidden;
+.fabuListInfo .title {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 10px 0 0;
 }
-
-.second_content {
-  height: 25px;
-  width: 454px;
-  color: rgb(96, 99, 109);
+.fabuListInfo .title span {
+  display: inline-block;
   font-size: 14px;
+  color: #60636d;
+  width: 100%;
 }
-.third_content {
-  height: 25px;
-  width: 454px;
-  color: rgb(96, 99, 109);
+.fabuListInfo .num {
+  height: 40px;
+  line-height: 40px;
   font-size: 14px;
+  color: #60636d;
 }
-.first_span {
-  width: 14px;
-  height: 45px;
-  padding: 0 0 0 350px;
+.fabuListInfo .status {
+  font-size: 14px;
+  color: #60636d;
 }
-
-.second_span {
-  padding: 0 0 0 150px;
-  width: 170px;
-  height: 25px;
+.fabuListInfo .company span {
+  display: inline-block;
+  width: 290px;
+  font-size: 14px;
+  color: #60636d;
 }
-
-.third_span {
-  padding: 0px 0 0 220px;
-  width: 170px;
-  height: 25px;
+.fabuListInfo .type {
+  font-size: 14px;
+  color: #60636d;
 }
-.big_content {
-  margin: 0 0 10px 0;
+.fabuListInfo .date {
+  text-align: right;
+  font-size: 14px;
+  color: #60636d;
 }
 </style>

src/layout/supermarket/fenlei.vue

@@ -1,27 +1,20 @@
 <template>
   <div id="fenlei">
-    <el-col class="swfl"> <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image><span>商务分类</span> </el-col>
+    <el-col class="swfl">
+      <el-image style="width:22px;height:22px;margin:0 5px -5px 0;" :src="src"></el-image>
+      <span>商务分类</span>
+    </el-col>
     <el-col>
-      <el-menu
-        default-active="2"
-        class="el-menu-vertical-demo"
-        @open="handleOpen"
-        @close="handleClose"
-        background-color=" #ffffff"
-        text-color="#215299"
-        active-text-color="#215299"
-      >
-        <el-menu-item-group>
-          <el-menu-item index="1-1" class="fenlei_title">高校院所</el-menu-item>
-          <el-menu-item index="1-2" class="fenlei_title">科研院所</el-menu-item>
-          <el-menu-item index="1-3" class="fenlei_title">科技企业</el-menu-item>
-          <el-menu-item index="1-4" class="fenlei_title">机构团体</el-menu-item>
-          <el-menu-item index="1-5" class="fenlei_title">研发服务</el-menu-item>
-          <el-menu-item index="1-6" class="fenlei_title">技术成果</el-menu-item>
-          <el-menu-item index="1-7" class="fenlei_title">创新产品</el-menu-item>
-          <el-menu-item index="1-8" class="fenlei_title">咨询服务</el-menu-item>
-          <el-menu-item index="1-9" class="fenlei_titlelast">创新人才</el-menu-item>
-        </el-menu-item-group>
+      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#215299" active-text-color="#215299">
+        <el-menu-item index="1"><span slot="title">高校院所</span></el-menu-item>
+        <el-menu-item index="2"><span slot="title">科研院所</span></el-menu-item>
+        <el-menu-item index="3"><span slot="title">科技企业</span></el-menu-item>
+        <el-menu-item index="4"><span slot="title">机构团体</span></el-menu-item>
+        <el-menu-item index="5"><span slot="title">研发服务</span></el-menu-item>
+        <el-menu-item index="6"><span slot="title">技术成果</span></el-menu-item>
+        <el-menu-item index="7"><span slot="title">创新产品</span></el-menu-item>
+        <el-menu-item index="8"><span slot="title">咨询服务</span></el-menu-item>
+        <el-menu-item index="9"><span slot="title">创新人才</span></el-menu-item>
       </el-menu>
     </el-col>
   </div>
@@ -60,36 +53,14 @@ export default {
   font-size: 22px;
   color: #ffffff;
 }
-// .ziti {
-//   color: #ffffff;
-//   margin: 0 0 0 5px;
-//   // line-height: 50px;
-//   font-size: 18px;
-// }
-// .image {
-//   line-height: 50px;
-// }
-.fenlei_title {
+/deep/.el-menu-item {
   height: 60px;
-  width: 240px;
-  // background-color: salmon;
   text-align: center;
-  line-height: 50px;
+  line-height: 60px;
   border-bottom: 1px dashed;
   font-size: 22px;
 }
-.fenlei_titlelast {
-  height: 60px;
-  width: 240px;
-  // background-color: salmon;
-  text-align: center;
-  line-height: 50px;
-  font-size: 22px;
-}
-/deep/.el-menu-item-group__title {
-  padding: 0 0 0 0;
-  line-height: normal;
-  font-size: 12px;
-  color: #ffffff;
+/deep/.el-menu-item:last-child {
+  border-bottom: none;
 }
 </style>

src/layout/supermarket/jiaoyi.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="jiaoyi">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="topInfo">
+          <el-col :span="23" class="left">{{ title }}</el-col>
+          <el-col :span="1" class="more">
+            <el-link :underline="false"><el-image :src="more"></el-image></el-link>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="list">
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="market" label="营销单位" align="center"> </el-table-column>
+            <el-table-column prop="make" label="采购单位" align="center"> </el-table-column>
+            <el-table-column prop="product" label="产品交易" align="center"> </el-table-column>
+            <el-table-column prop="deal" label="交易状态" align="center"> </el-table-column>
+          </el-table>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'jiaoyi',
+  props: {
+    tableData: null,
+  },
+  components: {},
+  data: () => ({
+    title: '交易展示',
+    more: require('@/assets/更多.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 20px;
+}
+.topInfo {
+  height: 30px;
+  line-height: 30px;
+  margin: 0 0 10px 0;
+}
+.topInfo .left {
+  font-size: 22px;
+  color: #22529a;
+  font-weight: bold;
+}
+.topInfo .more {
+  height: 30px;
+  text-align: right;
+  padding: 10px 0;
+}
+/deep/.el-table td {
+  padding: 2px 0;
+}
+/deep/.el-table th {
+  padding: 2px 0;
+  background-color: #f3f3f3;
+}
+/deep/.el-table__row:nth-child(2n) {
+  background-color: #f3f3f3;
+}
+/deep/.el-table .cell {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>

src/layout/supermarket/rightcont.vue

@@ -1,4 +1,4 @@
-npm<template>
+<template>
   <div id="rightcont">
     <el-col :span="24" class="search">
       <el-col :span="12" class="left">
@@ -9,10 +9,10 @@ npm<template>
         </el-col>
       </el-col>
       <el-col :span="12" class="left">
-        <el-col :span="19" class="input"><el-input v-model="input" placeholder="输入产品关键字"></el-input></el-col>
+        <el-col :span="19" class="input"><el-input v-model="inputs" placeholder="输入供求关键字"></el-input></el-col>
         <el-col :span="5" class="btn">
           <i class="el-icon-search"></i>
-          <span>产品</span>
+          <span>供求</span>
         </el-col>
       </el-col>
     </el-col>
@@ -20,72 +20,73 @@ npm<template>
       <el-tabs type="border-card">
         <el-tab-pane>
           <span slot="label">技术供求</span>
-          <el-col :span="12" class="gongqiuList">
-            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
-            <el-col :span="12"><span>技术类型：技术类</span></el-col>
-            <el-col :span="12">日期：2019-07-06</el-col>
-            <el-col :span="24">价格：￥元/公斤</el-col>
-          </el-col>
-          <el-col :span="12" class="gongqiuList">
-            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
-            <el-col :span="12"><span>技术类型：技术类</span></el-col>
-            <el-col :span="12">日期：2019-07-06</el-col>
-            <el-col :span="24">价格：￥元/公斤</el-col>
-          </el-col>
-          <el-col :span="12" class="gongqiuList">
-            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
-            <el-col :span="12"><span>技术类型：技术类</span></el-col>
-            <el-col :span="12">日期：2019-07-06</el-col>
-            <el-col :span="24">价格：￥元/公斤</el-col>
-          </el-col>
-          <el-col :span="12" class="gongqiuList">
-            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
-            <el-col :span="12"><span>技术类型：技术类</span></el-col>
-            <el-col :span="12">日期：2019-07-06</el-col>
-            <el-col :span="24">价格：￥元/公斤</el-col>
-          </el-col>
-          <el-col :span="12" class="gongqiuList">
-            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
-            <el-col :span="12"><span>技术类型：技术类</span></el-col>
-            <el-col :span="12">日期：2019-07-06</el-col>
-            <el-col :span="24">价格：￥元/公斤</el-col>
-          </el-col>
-          <el-col :span="12" class="gongqiuList">
-            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
-            <el-col :span="12"><span>技术类型：技术类</span></el-col>
-            <el-col :span="12">日期：2019-07-06</el-col>
-            <el-col :span="24">价格：￥元/公斤</el-col>
-          </el-col>
-          <el-col :span="12" class="gongqiuList">
-            <el-col :span="24" class="title"><span class="textOver">缩短贝类暂养吐沙净化时间</span></el-col>
-            <el-col :span="12"><span>技术类型：技术类</span></el-col>
-            <el-col :span="12">日期：2019-07-06</el-col>
-            <el-col :span="24">价格：￥元/公斤</el-col>
+          <el-col :span="12" class="jishuList" v-for="(item, index) in jishuList" :key="index">
+            <el-link :underline="false">
+              <el-col :span="24" class="title">
+                <span class="textOver">{{ item.title }}</span>
+              </el-col>
+              <el-col :span="15" class="type">
+                <span>技术类型：{{ item.type }}</span>
+              </el-col>
+              <el-col :span="9" class="date">日期：{{ item.date }}</el-col>
+              <el-col :span="24" class="yen">价格：￥{{ item.yen }}元/公斤</el-col>
+            </el-link>
           </el-col>
         </el-tab-pane>
         <el-tab-pane>
-          <span slot="label">我的行程</span>
-          我的行程
+          <span slot="label">产品供求</span>
+          <el-col :span="6" class="chanpinList" v-for="(item, index) in chanpinList" :key="index">
+            <el-link :underline="false">
+              <el-col :span="24" class="images">
+                <el-image style="width:220px;height:160px;" :src="item.pic"></el-image>
+              </el-col>
+              <el-col :span="24" class="title">
+                <span class="textOver">{{ item.title }}</span>
+              </el-col>
+              <el-col :span="15" class="yen"> ￥{{ item.yen }} </el-col>
+              <el-col :span="9" class="type">
+                {{ item.type }}
+              </el-col>
+            </el-link>
+          </el-col>
         </el-tab-pane>
         <el-tab-pane>
-          <span slot="label">我的行程</span>
-          我的行程
+          <span slot="label">服务供求</span>
+          <el-col :span="24" class="serviceList" v-for="(item, index) in serviceList" :key="index">
+            <el-col :span="10" class="title">
+              <span class="textOver">{{ item.title }}</span>
+            </el-col>
+            <el-col :span="6" class="type"> 服务类型：{{ item.type }} </el-col>
+            <el-col :span="5" class="yen"> ￥{{ item.yen }} </el-col>
+            <el-col :span="3" class="date">
+              {{ item.date }}
+            </el-col>
+          </el-col>
         </el-tab-pane>
         <el-tab-pane>
-          <span slot="label">我的行程</span>
-          我的行程
+          <span slot="label">人才供求</span>
+          人才供求
         </el-tab-pane>
       </el-tabs>
+      <el-link class="more" :underline="false">
+        <el-image :src="more"></el-image>
+      </el-link>
     </el-col>
   </div>
 </template>
 <script>
 export default {
   name: 'rightcont',
-  props: {},
+  props: {
+    jishuList: null,
+    chanpinList: null,
+    serviceList: null,
+  },
   components: {},
   data: () => ({
     input: '',
+    inputs: '',
+    more: require('@/assets/更多.png'),
   }),
   created() {},
   computed: {},
@@ -111,7 +112,6 @@ export default {
   padding: 10px;
   width: 470px;
   margin: 0 10px 0 0;
-
   border-radius: 0px;
 }
 .search .left:last-child {
@@ -137,40 +137,126 @@ export default {
 .info {
   height: 530px;
   background: #fff;
-  padding: 20px;
+  padding: 0 20px;
+  overflow: hidden;
+  position: relative;
 }
 /deep/.el-tabs--border-card > .el-tabs__content {
   padding: 0;
 }
-.gongqiuList {
-  width: 450px;
-  height: 110px;
-  margin: 0 5px 5px 0;
-  background-color: #f3f3f3;
-  text-indent: 20px;
-}
-
-.gongqiuList:nth-child(2n) {
-  margin: 0;
-}
 /deep/.el-tabs--border-card > .el-tabs__header {
   background-color: transparent;
   border-bottom: none;
 }
 /deep/.el-tabs--border-card {
-  //   border: none;
+  border: none;
   box-shadow: none;
-  border: 1px solid #ffffff;
 }
 /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
   border-right-color: transparent;
   border-left-color: transparent;
 }
-.title {
-  padding-top: 20px;
+/deep/.el-tabs__item {
+  font-size: 22px;
+  font-weight: bold;
+  height: 60px;
+  line-height: 60px;
 }
-.title span {
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #22529a;
+}
+.jishuList {
   width: 450px;
-  display: block;
+  height: 110px;
+  margin: 0 5px 5px 0;
+  background-color: #f3f3f3;
+  padding: 20px;
+}
+.jishuList:nth-child(2n) {
+  margin: 0 0 5px 0;
+}
+.jishuList .title span {
+  display: inline-block;
+  width: 100%;
+  font-size: 16px;
+  color: #6d6d77;
+}
+.jishuList .type span {
+  display: inline-block;
+  width: 100%;
+  font-size: 16px;
+  color: #6d6d77;
+}
+.jishuList .date {
+  font-size: 16px;
+  color: #6d6d77;
+  text-align: right;
+}
+.jishuList .yen {
+  color: #e91311;
+  font-size: 16px;
+  margin: 2px 0 0 0;
+}
+.info .more {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  right: 25px;
+  height: 58px;
+}
+.chanpinList {
+  margin-right: 10px;
+  margin-bottom: 10px;
+  width: 220px;
+  height: 220px;
+  background-color: #f3f3f3;
+}
+.chanpinList:nth-child(4n) {
+  margin-right: 0;
+}
+.chanpinList .title span {
+  display: inline-block;
+  width: 90%;
+  font-size: 16px;
+  color: #556572;
+  padding: 0 10px;
+}
+.chanpinList .yen {
+  padding: 0 0 0 10px;
+  color: #e91311;
+  font-size: 16px;
+}
+.chanpinList .type {
+  padding: 0 10px 0 0;
+  color: #556572;
+  font-size: 16px;
+  text-align: right;
+}
+.serviceList {
+  background-color: #f3f3f3;
+  height: 55px;
+  line-height: 55px;
+}
+.serviceList:nth-child(2n) {
+  background-color: #fff;
+}
+.serviceList .title span {
+  display: inline-block;
+  padding: 0 10px;
+  width: 94%;
+  font-size: 16px;
+  color: #556572;
+}
+.serviceList .type {
+  font-size: 16px;
+  color: #556572;
+}
+.serviceList .yen {
+  font-size: 16px;
+  color: #556572;
+}
+.serviceList .date {
+  font-size: 16px;
+  color: #556572;
 }
 </style>

src/views/supermarket.vue

@@ -1,6 +1,13 @@
 <template>
   <div id="supermarket">
-    <supermarket-detail></supermarket-detail>
+    <supermarket-detail
+      :info="info"
+      :jishuList="jishuList"
+      :chanpinList="chanpinList"
+      :serviceList="serviceList"
+      :fabuList="fabuList"
+      :tableData="tableData"
+    ></supermarket-detail>
   </div>
 </template>
 
@@ -9,8 +16,97 @@ import supermarketDetail from '@/components/supermarket.vue';
 export default {
   name: 'supermarket',
   props: {},
-  components: { supermarketDetail },
-  data: () => ({}),
+  components: {
+    supermarketDetail,
+  },
+  data: () => ({
+    info: {
+      logo: require('@/assets/logo.png'),
+      banquan: '版权所有：吉林省计算中心',
+      jishu: '技术支持：长春市福瑞科技有限公司',
+      youbian: '邮编：130000',
+      chuanzhen: '传真：239823982',
+      address: '地址：吉林省长春市朝阳区前进大街1244号',
+      phone: '电话：0431-1234567',
+      email: '邮箱：123456@163.com',
+    },
+    jishuList: [
+      {
+        title: '缩短贝类暂养吐沙净化时间',
+        type: '技术类',
+        date: '2019-12-26',
+        yen: '1000',
+      },
+      {
+        title: '八条数据',
+        type: '技术类',
+        date: '2019-12-26',
+        yen: '1000',
+      },
+    ],
+    chanpinList: [
+      {
+        pic: require('@/assets/chanpin1.jpg'),
+        title: '保护性耕作机械免耕精量播种机',
+        yen: '1000元/台',
+        type: '产品供求',
+      },
+      {
+        pic: require('@/assets/chanpin1.jpg'),
+        title: '八条数据',
+        yen: '1000元/台',
+        type: '产品供求',
+      },
+    ],
+    serviceList: [
+      {
+        title: '标题',
+        type: '服务供求',
+        yen: '1000元/台',
+        date: '2019-12-26',
+      },
+      {
+        title: '八条数据',
+        type: '服务供求',
+        yen: '1000元/台',
+        date: '2019-12-26',
+      },
+    ],
+    fabuList: [
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '标题',
+        num: '供',
+        company: '福瑞科技',
+        status: '已认证',
+        type: 'LS',
+        date: '2019-12-26',
+      },
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '六条数据',
+        num: '供',
+        company: '福瑞科技',
+        status: '已认证',
+        type: 'LS',
+        date: '2019-12-26',
+      },
+    ],
+    tableData: [
+      {
+        market: '系统管理员',
+        make: '硅藻土联盟',
+        product: '纳米融金',
+        deal: '交易完成',
+      },
+      {
+        market: '四条数据',
+        make: '硅藻土联盟',
+        product: '纳米融金',
+        deal: '交易完成',
+      },
+    ],
+  }),
   created() {},
   computed: {},
   methods: {},