科技超市更新完成

src/components/supermaket/supermarket.vue

@@ -52,22 +52,22 @@
           </span>
           <span v-else-if="display === 'sixth'">
             <el-col :span="19" class="second">
-              研发服务
+              <serve :serveList="serveList" :serveTotal="serveTotal"></serve>
             </el-col>
           </span>
           <span v-else-if="display === 'seventh'">
             <el-col :span="19" class="second">
-              技术成果
+              <technology :serveList="serveList" :serveTotal="serveTotal"></technology>
             </el-col>
           </span>
           <span v-else-if="display === 'eighth'">
             <el-col :span="19" class="second">
-              创新产品
+              <product :serveList="serveList" :serveTotal="serveTotal"></product>
             </el-col>
           </span>
           <span v-else-if="display === 'nineth'">
             <el-col :span="19" class="second">
-              咨询服务
+              <infomate :serveList="serveList" :serveTotal="serveTotal"></infomate>
             </el-col>
           </span>
         </div>
@@ -91,7 +91,10 @@ import schoolInfo from '@/layout/supermarket/schoolInfo.vue';
 import scientific from '@/layout/supermarket/scientific.vue';
 import company from '@/layout/supermarket/company.vue';
 import mechanism from '@/layout/supermarket/mechanism.vue';
-
+import serve from '@/layout/supermarket/serve.vue';
+import technology from '@/layout/supermarket/technology.vue';
+import product from '@/layout/supermarket/product.vue';
+import infomate from '@/layout/supermarket/infomate.vue';
 import fabu from '@/layout/supermarket/fabu.vue';
 import jiaoyi from '@/layout/supermarket/jiaoyi.vue';
 import foot from '@/layout/index/foot.vue';
@@ -115,6 +118,8 @@ export default {
     companyTotal: null, //分页
     mechanismList: null, //机构团体
     mechanismTotal: null, //分页
+    serveList: null, //资讯服务
+    serveTotal: null, //分页
   },
   components: {
     top, //头部
@@ -126,6 +131,10 @@ export default {
     scientific, //科研院所
     mechanism, //机构团体
     company, //科技企业
+    serve, //资讯服务
+    technology, //技术成果
+    product, //创新产品
+    infomate, //资讯服务
     fabu, //发布信息列表
     jiaoyi, //交易展示
     foot, //底部

src/layout/supermarket/infomate.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="infomate">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          资讯服务
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="schoolList" v-for="(item, index) in serveList" :key="index">
+              <el-col :span="24" class="image">
+                <el-image style="width:219px;height:170px;" :src="item.url"></el-image>
+              </el-col>
+              <el-col :span="24" class="title textOver">
+                {{ item.name }}
+              </el-col>
+              <el-col :span="12" class="yen textOver"> ¥{{ item.price }}/{{ item.priceunit }}</el-col>
+              <el-col :span="12" class="type"> {{ item.product_type_name }}</el-col>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="serveTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'infomate',
+  props: {
+    serveList: null,
+    serveTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.list {
+  margin: 20px 0 0 0;
+}
+.schoolList {
+  float: left;
+  width: 219px;
+  height: 219px;
+  margin: 0 10px 10px 0;
+  border: 1px solid #ccc;
+  background-color: #f3f3f3;
+  overflow: hidden;
+}
+.schoolList:nth-child(4n) {
+  width: 215px;
+  margin: 0 0 10px 0;
+}
+.schoolList .image {
+  height: 170px;
+}
+.schoolList .title {
+  padding: 3px 10px;
+  font-size: 14px;
+  color: #63636d;
+}
+.schoolList .yen {
+  font-size: 14px;
+  padding: 0 0 0 10px;
+  color: red;
+}
+.schoolList .type {
+  font-size: 14px;
+  text-align: right;
+  padding: 0 10px 0 0;
+  color: #63636d;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/layout/supermarket/product.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="product">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          创新产品
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="schoolList" v-for="(item, index) in serveList" :key="index">
+              <el-col :span="24" class="image">
+                <el-image style="width:219px;height:170px;" :src="item.url"></el-image>
+              </el-col>
+              <el-col :span="24" class="title textOver">
+                {{ item.name }}
+              </el-col>
+              <el-col :span="12" class="yen textOver"> ¥{{ item.price }}/{{ item.priceunit }}</el-col>
+              <el-col :span="12" class="type"> {{ item.product_type_name }}</el-col>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="serveTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'product',
+  props: {
+    serveList: null,
+    serveTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.list {
+  margin: 20px 0 0 0;
+}
+.schoolList {
+  float: left;
+  width: 219px;
+  height: 219px;
+  margin: 0 10px 10px 0;
+  border: 1px solid #ccc;
+  background-color: #f3f3f3;
+  overflow: hidden;
+}
+.schoolList:nth-child(4n) {
+  width: 215px;
+  margin: 0 0 10px 0;
+}
+.schoolList .image {
+  height: 170px;
+}
+.schoolList .title {
+  padding: 3px 10px;
+  font-size: 14px;
+  color: #63636d;
+}
+.schoolList .yen {
+  font-size: 14px;
+  padding: 0 0 0 10px;
+  color: red;
+}
+.schoolList .type {
+  font-size: 14px;
+  text-align: right;
+  padding: 0 10px 0 0;
+  color: #63636d;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/layout/supermarket/serve.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="serve">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          研发服务
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="schoolList" v-for="(item, index) in serveList" :key="index">
+              <el-col :span="24" class="image">
+                <el-image style="width:219px;height:170px;" :src="item.url"></el-image>
+              </el-col>
+              <el-col :span="24" class="title textOver">
+                {{ item.name }}
+              </el-col>
+              <el-col :span="12" class="yen textOver"> ¥{{ item.price }}/{{ item.priceunit }}</el-col>
+              <el-col :span="12" class="type"> {{ item.product_type_name }}</el-col>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="serveTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'company',
+  props: {
+    serveList: null,
+    serveTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.list {
+  margin: 20px 0 0 0;
+}
+.schoolList {
+  float: left;
+  width: 219px;
+  height: 219px;
+  margin: 0 10px 10px 0;
+  border: 1px solid #ccc;
+  background-color: #f3f3f3;
+  overflow: hidden;
+}
+.schoolList:nth-child(4n) {
+  width: 215px;
+  margin: 0 0 10px 0;
+}
+.schoolList .image {
+  height: 170px;
+}
+.schoolList .title {
+  padding: 3px 10px;
+  font-size: 14px;
+  color: #63636d;
+}
+.schoolList .yen {
+  font-size: 14px;
+  padding: 0 0 0 10px;
+  color: red;
+}
+.schoolList .type {
+  font-size: 14px;
+  text-align: right;
+  padding: 0 10px 0 0;
+  color: #63636d;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/layout/supermarket/technology.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="technology">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          技术成果
+        </el-col>
+        <el-col :span="24" class="list">
+          <ul>
+            <li class="schoolList" v-for="(item, index) in serveList" :key="index">
+              <el-col :span="24" class="image">
+                <el-image style="width:219px;height:170px;" :src="item.url"></el-image>
+              </el-col>
+              <el-col :span="24" class="title textOver">
+                {{ item.name }}
+              </el-col>
+              <el-col :span="12" class="yen textOver"> ¥{{ item.price }}/{{ item.priceunit }}</el-col>
+              <el-col :span="12" class="type"> {{ item.product_type_name }}</el-col>
+            </li>
+          </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              layout="total, prev, pager, next, jumper"
+              :total="serveTotal"
+            >
+            </el-pagination>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'technology',
+  props: {
+    serveList: null,
+    serveTotal: null,
+  },
+  components: {},
+  data: () => ({
+    currentPage: 1,
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul {
+  padding: 0;
+  margin: 0;
+}
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+p {
+  padding: 0;
+  margin: 0;
+}
+.info {
+  padding: 0 20px 20px 20px;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px dashed #ccc;
+  color: #215299;
+  font-size: 18px;
+}
+.list {
+  margin: 20px 0 0 0;
+}
+.schoolList {
+  float: left;
+  width: 219px;
+  height: 219px;
+  margin: 0 10px 10px 0;
+  border: 1px solid #ccc;
+  background-color: #f3f3f3;
+  overflow: hidden;
+}
+.schoolList:nth-child(4n) {
+  width: 215px;
+  margin: 0 0 10px 0;
+}
+.schoolList .image {
+  height: 170px;
+}
+.schoolList .title {
+  padding: 3px 10px;
+  font-size: 14px;
+  color: #63636d;
+}
+.schoolList .yen {
+  font-size: 14px;
+  padding: 0 0 0 10px;
+  color: red;
+}
+.schoolList .type {
+  font-size: 14px;
+  text-align: right;
+  padding: 0 10px 0 0;
+  color: #63636d;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
+</style>

src/views/supermaket/supermarket.vue

@@ -18,6 +18,8 @@
       :companyTotal="companyTotal"
       :mechanismList="mechanismList"
       :mechanismTotal="mechanismTotal"
+      :serveList="serveList"
+      :serveTotal="serveTotal"
     ></supermarket-detail>
   </div>
 </template>
@@ -168,6 +170,9 @@ export default {
       },
     ],
     mechanismTotal: 1,
+    // 研发服务
+    serveList: [],
+    serveTotal: 1,
   }),
   created() {
     this.searchSite();
@@ -194,6 +199,8 @@ export default {
       this.$set(this, `jishuList`, res.data);
       this.$set(this, `chanpinList`, res.data);
       this.$set(this, `serviceList`, res.data);
+      this.$set(this, `serveList`, res.data);
+      this.$set(this, `serveTotal`, res.total);
     },
     async nativeClick({ name }) {
       if (name === '高校院所') {