更新

src/layout/market/prodDetail.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="prodDetails">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <el-carousel trigger="click" class="carousel">
+            <template v-if="productInfo.image && productInfo.image.length > 0">
+              <el-carousel-item v-for="(item, index) in productInfo.image" :key="index">
+                <el-image :src="item.url" style="width:100%"> </el-image>
+              </el-carousel-item>
+            </template>
+          </el-carousel>
+          <p class="textOver">{{ productInfo.name }}</p>
+        </el-col>
+        <el-col :span="24" class="message">
+          <p>
+            <span>产品类型</span>
+            <span>{{ productInfo.totaltype === '0' ? '技术' : productInfo.totaltype === '1' ? '产品' : productInfo.totaltype === '2' ? '服务' : '暂无' }}</span>
+          </p>
+          <p>
+            <span>类型</span>
+            <span>{{ productInfo.product_type_name || '暂无' }}</span>
+          </p>
+          <p>
+            <span>研发阶段</span>
+            <span>{{ productInfo.phase == 1 ? '阶段成果' : productInfo.phase == 2 ? '最终成果' : '暂无' }}</span>
+          </p>
+          <p>
+            <span>交易方式</span>
+            <span>{{ productInfo.business === '0' ? '公用' : productInfo.business === '1' ? '转让' : productInfo.business === '2' ? '竞价' : '暂无' }}</span>
+          </p>
+          <p>
+            <span>应用领域</span>
+            <span>{{ productInfo.field || '暂无' }}</span>
+          </p>
+          <p>
+            <span>服务范围</span>
+            <span>{{ productInfo.scope || '暂无' }}</span>
+          </p>
+          <p>
+            <span>产品单价</span>
+            <span>{{ productInfo.price }}/{{ productInfo.priceunit }}</span>
+          </p>
+          <p>
+            <span>联系人</span>
+            <span>{{ productInfo.contact_user }}</span>
+          </p>
+          <p>
+            <span>联系电话</span>
+            <span>{{ productInfo.contact_tel }}</span>
+          </p>
+          <div class="introduction">
+            <p>产品简介</p>
+            <p>{{ productInfo.introduction }}</p>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'prodDetails',
+  props: {
+    productInfo: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  .top {
+    background: #fff;
+    min-height: 250px;
+    padding: 0 15px;
+    margin: 0 0 10px 0;
+    .carousel {
+      height: 200px !important;
+      padding: 10px 0;
+    }
+    .el-image {
+      width: 100%;
+      height: 200px;
+    }
+    p {
+      font-size: 18px;
+      color: #000;
+      padding: 0 0 10px 0;
+    }
+  }
+  .message {
+    background: #fff;
+    padding: 0 15px;
+    min-height: 50px;
+    p {
+      min-height: 50px;
+      line-height: 50px;
+      border-bottom: 1px solid #ccc;
+    }
+    span:first-child {
+      display: inline-block;
+      width: 80px;
+      color: #ccc;
+    }
+    span:last-child {
+      color: #000;
+    }
+    div {
+      p {
+        border-bottom: none;
+      }
+    }
+  }
+}
+/deep/.el-carousel__container {
+  height: 200px !important;
+}
+</style>

src/router/index.js

@@ -18,6 +18,13 @@ const routes = [
     meta: { title: '科技超市', isleftarrow: true },
     component: () => import('../views/market/index.vue'),
   },
+  // 科技超市-技术-产品-服务详情
+  {
+    path: '/market/prodDetail',
+    name: 'market_prodDetail',
+    meta: { title: '产品详情', isleftarrow: true },
+    component: () => import('../views/market/prodDetail.vue'),
+  },
   // 科技超市-发布产品
   {
     path: '/market/detail',

src/views/index.vue

@@ -76,6 +76,8 @@ export default {
 .top {
   height: 46px;
   overflow: hidden;
+  position: relative;
+  z-index: 999;
 }
 .main {
   min-height: 570px;

src/views/market/detail.vue

@@ -57,6 +57,8 @@ export default {
 .top {
   height: 46px;
   overflow: hidden;
+  position: relative;
+  z-index: 999;
 }
 .main {
   min-height: 570px;

src/views/market/index.vue

@@ -98,6 +98,8 @@ export default {
 .top {
   height: 46px;
   overflow: hidden;
+  position: relative;
+  z-index: 999;
 }
 .main {
   min-height: 570px;

src/views/market/parts/productList.vue

@@ -2,7 +2,7 @@
   <div id="productList">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+        <el-col :span="24" class="list" @click.native="$router.push({ path: '/market/prodDetail' })" v-for="(item, index) in list" :key="index">
           <p class="textOver">{{ item.name }}</p>
           <p>
             <span class="ptwo"><span>产品类型:</span>{{ item.product_type_name || '暂无' }}</span>

src/views/market/parts/serviceList.vue

@@ -2,7 +2,7 @@
   <div id="serviceList">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+        <el-col :span="24" class="list" @click.native="$router.push({ path: '/market/prodDetail' })" v-for="(item, index) in list" :key="index">
           <p class="textOver">{{ item.name }}</p>
           <p>
             <span class="ptwo"><span>产品类型:</span>{{ item.product_type_name || '暂无' }}</span>

src/views/market/parts/technologyList.vue

@@ -2,7 +2,7 @@
   <div id="technologyList">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+        <el-col :span="24" class="list" @click.native="$router.push({ path: '/market/prodDetail' })" v-for="(item, index) in list" :key="index">
           <p class="textOver">{{ item.name }}</p>
           <p>
             <span class="ptwo"><span>产品类型:</span>{{ item.product_type_name || '暂无' }}</span>

src/views/market/prodDetail.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <prodDetails :productInfo="productInfo"></prodDetails>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/layout/common/topInfo.vue';
+import prodDetails from '@/layout/market/prodDetail.vue';
+export default {
+  name: 'prodDetail',
+  props: {},
+  components: {
+    NavBar,
+    prodDetails, //详情
+  },
+  data: () => ({
+    // 头部标题
+    title: '',
+    // meta为true
+    isleftarrow: '',
+    // 返回
+    navShow: true,
+    // 产品名称
+    productInfo: {
+      image: [
+        {
+          url: require('@/assets/test.jpg'),
+        },
+      ],
+      name: '产品名称',
+      totaltype: '0',
+      product_type_name: '科研',
+      phase: '1', //研发阶段
+      business: '0', //交易方式
+      field: '应用领域',
+      scope: '服务范围',
+      price: '100', //单价
+      priceunit: '公斤', //单位
+      contact_user: '联系人',
+      contact_tel: '17319450324',
+      introduction: '产品简介',
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+</style>

src/views/user/index.vue

@@ -70,6 +70,8 @@ export default {
 .top {
   height: 46px;
   overflow: hidden;
+  position: relative;
+  z-index: 999;
 }
 .main {
   padding: 0 0 50px 0;

src/views/user/personal.vue

@@ -56,6 +56,8 @@ export default {
 .top {
   height: 46px;
   overflow: hidden;
+  position: relative;
+  z-index: 999;
 }
 .main {
   min-height: 570px;