11

src/router/index.js

@@ -52,18 +52,18 @@ const routes = [
     meta: { title: '科技超市', isleftarrow: false },
     component: () => import('../views/market/index.vue'),
   },
-  {
-    path: '/market/productDetail',
-    name: 'market_productDetail',
-    meta: { title: '科技超市详情', isleftarrow: true },
-    component: () => import('../views/market/productDetail.vue'),
-  },
-  {
-    path: '/market/exportDetail',
-    name: 'market_exportDetail',
-    meta: { title: '专家详情', isleftarrow: true },
-    component: () => import('../views/market/exportDetail.vue'),
-  },
+  // {
+  //   path: '/market/productDetail',
+  //   name: 'market_productDetail',
+  //   meta: { title: '科技超市详情', isleftarrow: true },
+  //   component: () => import('../views/market/productDetail.vue'),
+  // },
+  // {
+  //   path: '/market/exportDetail',
+  //   name: 'market_exportDetail',
+  //   meta: { title: '专家详情', isleftarrow: true },
+  //   component: () => import('../views/market/exportDetail.vue'),
+  // },
   // 技术交流
   {
     path: '/service/index',

src/views/market copy/index.vue

@@ -0,0 +1,226 @@
+<template>
+  <div id="index">
+    <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="down">
+          <el-col :span="24" class="search">
+            <el-col :span="6" class="type">
+              <el-select v-model="type" placeholder="请选择" clearable @change="typeChange">
+                <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.type"> </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="18" class="input">
+              <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="data">
+            <van-tabs v-model="active">
+              <van-tab title="技术成果">
+                <achieve :list="achieveList" @detailBtn="detailBtn"></achieve>
+              </van-tab>
+              <van-tab title="科技需求">
+                <technology :list="technologyList" @detailBtn="detailBtn"></technology>
+              </van-tab>
+              <van-tab title="商务服务">
+                <business :list="businessList" @detailBtn="detailBtn"></business>
+              </van-tab>
+              <van-tab title="专家智库">
+                <expert :list="expertList" @detailBtn="expertBtn"></expert>
+              </van-tab>
+            </van-tabs>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import achieve from './newparts/achieve.vue';
+import technology from './newparts/technology.vue';
+import business from './newparts/business.vue';
+import expert from './newparts/expert.vue';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: product } = createNamespacedHelpers('product');
+const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    // footInfo,
+    // 技术成果
+    achieve,
+    // 科技需求
+    technology,
+    // 商务服务
+    business,
+    // 专家智库
+    expert,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      // 显示菜单
+      active: 0,
+      // 技术成果
+      achieveList: [],
+      // 科技需求
+      technologyList: [],
+      // 商务服务
+      businessList: [],
+      // 专家智库
+      expertList: [],
+      // 查询
+      typeList: [
+        { name: '技术成果', type: '0' },
+        { name: '科技需求', type: '1' },
+        { name: '商务服务', type: '2' },
+        { name: '专家智库', type: '3' },
+      ],
+      type: '',
+      name: '',
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...product(['query']),
+    ...exportuser({ expertquery: 'query' }),
+    async search() {
+      let res = await this.query({ skip: 0, type: '1', status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
+      res = await this.query({ skip: 0, type: '0', status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
+      res = await this.query({ skip: 0, type: '2', status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
+      res = await this.expertquery({ skip: 0, status: '1' });
+      if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
+    },
+    // 成果,需求，商务详情
+    detailBtn(data) {
+      this.$router.push({ path: '/market/productDetail', query: { id: data.id, type: data.type } });
+    },
+    // 专家
+    expertBtn(data) {
+      this.$router.push({ path: '/market/exportDetail', query: { id: data.id } });
+    },
+    // 查询
+    async searchList({ ...info } = {}) {
+      let type = this.type;
+      if (this.name) {
+        info.name = this.name;
+        if (type == 0) {
+          let res = await this.query({ skip: 0, type: '1', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
+        } else if (type == 1) {
+          let res = await this.query({ skip: 0, type: '0', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
+        } else if (type == 2) {
+          let res = await this.query({ skip: 0, type: '2', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
+        } else if (type == 3) {
+          let res = await this.expertquery({ skip: 0, status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
+        }
+      } else this.search();
+    },
+    // 选择类型
+    typeChange(value) {
+      if (value) {
+        this.active = '';
+        this.$set(this, `type`, value);
+        let index = this.typeList.findIndex(i => i.type == value);
+        if (index) {
+          this.$set(this, `active`, index);
+        }
+      }
+    },
+    // 输入框查询
+    onSearch(data) {
+      this.$set(this, `name`, data);
+      if (this.type) {
+        this.searchList();
+      } else {
+        this.$notify({
+          message: '请选择信息类型',
+          type: 'danger',
+        });
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+  .down {
+    position: relative;
+    .search {
+      position: fixed;
+      width: 100%;
+      z-index: 999;
+      border-bottom: 1px solid #ccc;
+      background-color: #fff;
+      .type {
+        /deep/.el-input__inner {
+          border: none;
+          padding: 0;
+          height: 30px;
+          line-height: 30px;
+        }
+        .el-select {
+          padding: 10px 0px 0px 5px;
+        }
+        /deep/.el-input__icon {
+          line-height: 30px;
+        }
+      }
+      .input {
+        .van-search {
+          padding: 10px 12px 10px 0;
+        }
+      }
+    }
+    .data {
+      position: absolute;
+      width: 100%;
+      top: 54px;
+      background: #f9fafc;
+    }
+  }
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/views/market/index.vue

@@ -1,34 +1,37 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="style">
+      <el-col :span="24" class="con">
         <el-col :span="24" class="top">
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
-        <el-col :span="24" class="down">
+        <el-col :span="24" class="box">
           <el-col :span="24" class="search">
-            <el-col :span="6" class="type">
-              <el-select v-model="type" placeholder="请选择" clearable @change="typeChange">
+            <el-col :span="8" class="select">
+              <el-select v-model="typeValue" placeholder="请选择" @change="selectChange">
                 <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.type"> </el-option>
               </el-select>
             </el-col>
-            <el-col :span="18" class="input">
-              <van-search v-model="name" @search="onSearch" placeholder="请输入信息标题" />
+            <el-col :span="16" class="inputSearch">
+              <van-search v-model="SearchValue" placeholder="请输入信息标题" @search="onSearch" />
             </el-col>
           </el-col>
-          <el-col :span="24" class="data">
+          <el-col :span="24" class="main">
             <van-tabs v-model="active">
               <van-tab title="技术成果">
-                <achieve :list="achieveList" @detailBtn="detailBtn"></achieve>
+                <tec :tecList="tecList"></tec>
               </van-tab>
-              <van-tab title="科技需求">
-                <technology :list="technologyList" @detailBtn="detailBtn"></technology>
+              <van-tab title="e专利">
+                <pantent :pantentList="pantentList"></pantent>
               </van-tab>
-              <van-tab title="商务服务">
-                <business :list="businessList" @detailBtn="detailBtn"></business>
+              <van-tab title="科技需求">
+                <demand :demandList="demandList"></demand>
               </van-tab>
               <van-tab title="专家智库">
-                <expert :list="expertList" @detailBtn="expertBtn"></expert>
+                <expert :expertList="expertList"></expert>
+              </van-tab>
+              <van-tab title="在线服务">
+                <serve :serveList="serveList"></serve>
               </van-tab>
             </van-tabs>
           </el-col>
@@ -39,29 +42,39 @@
 </template>
 
 <script>
-import achieve from './newparts/achieve.vue';
-import technology from './newparts/technology.vue';
-import business from './newparts/business.vue';
-import expert from './newparts/expert.vue';
-import NavBar from '@/layout/common/topInfo.vue';
-import footInfo from '@/layout/common/footInfo.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: product } = createNamespacedHelpers('product');
 const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
+import NavBar from '@/layout/common/topInfo.vue';
+//技术成果
+import tec from './parts/tec.vue';
+//e专利
+import pantent from './parts/pantent.vue';
+//科技需求
+import demand from './parts/demand.vue';
+//专家智库
+import expert from './parts/expert.vue';
+//在线服务
+import serve from './parts/serve.vue';
 export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   name: 'index',
   props: {},
   components: {
+    //顶部
     NavBar,
-    // footInfo,
-    // 技术成果
-    achieve,
-    // 科技需求
-    technology,
-    // 商务服务
-    business,
-    // 专家智库
+    //技术成果
+    tec,
+    //e专利
+    pantent,
+    //科技需求
+    demand,
+    //专家智库
     expert,
+    //在线服务
+    serve,
   },
   data: function() {
     return {
@@ -71,94 +84,118 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
-      // 显示菜单
-      active: 0,
-      // 技术成果
-      achieveList: [],
-      // 科技需求
-      technologyList: [],
-      // 商务服务
-      businessList: [],
-      // 专家智库
-      expertList: [],
-      // 查询
+      //类型列表
       typeList: [
         { name: '技术成果', type: '0' },
+        { name: 'e专利', type: '4' },
         { name: '科技需求', type: '1' },
-        { name: '商务服务', type: '2' },
         { name: '专家智库', type: '3' },
+        { name: '在线服务', type: '2' },
+      ],
+      //选择的类型
+      typeValue: '',
+      //搜索
+      SearchValue: '',
+      //tab默认选中索引值
+      active: 0,
+      //科技成果列表
+      tecList: [],
+      //专利列表
+      pantentList: [
+        {
+          title: '标题',
+          time: '2021-09-19',
+          type: '类型',
+        },
+        {
+          title: '标题',
+          time: '2021-09-19',
+          type: '类型',
+        },
+        {
+          title: '标题',
+          time: '2021-09-19',
+          type: '类型',
+        },
       ],
-      type: '',
-      name: '',
+      //科技需求列表
+      demandList: [],
+      //专家智库列表
+      expertList: [],
+      //在线服务列表
+      serveList: [],
     };
   },
-  async created() {
-    await this.search();
+  created() {
+    this.search();
   },
   methods: {
     ...product(['query']),
     ...exportuser({ expertquery: 'query' }),
     async search() {
-      let res = await this.query({ skip: 0, type: '1', status: '1' });
-      if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
-      res = await this.query({ skip: 0, type: '0', status: '1' });
-      if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
-      res = await this.query({ skip: 0, type: '2', status: '1' });
-      if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
-      res = await this.expertquery({ skip: 0, status: '1' });
-      if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
-    },
-    // 成果,需求，商务详情
-    detailBtn(data) {
-      this.$router.push({ path: '/market/productDetail', query: { id: data.id, type: data.type } });
-    },
-    // 专家
-    expertBtn(data) {
-      this.$router.push({ path: '/market/exportDetail', query: { id: data.id } });
-    },
-    // 查询
-    async searchList({ ...info } = {}) {
-      let type = this.type;
-      if (this.name) {
-        info.name = this.name;
-        if (type == 0) {
-          let res = await this.query({ skip: 0, type: '1', status: '1', ...info });
-          if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
-        } else if (type == 1) {
-          let res = await this.query({ skip: 0, type: '0', status: '1', ...info });
-          if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
-        } else if (type == 2) {
-          let res = await this.query({ skip: 0, type: '2', status: '1', ...info });
-          if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
-        } else if (type == 3) {
-          let res = await this.expertquery({ skip: 0, status: '1', ...info });
-          if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
-        }
-      } else this.search();
+      const res1 = await this.query({ skip: 0, type: '1', status: '1' });
+      if (this.$checkRes(res1)) {
+        this.$set(this, `tecList`, res1.data);
+        // console.log(this.tecList);
+      }
+      const res2 = await this.query({ skip: 0, type: '0', status: '1' });
+      if (this.$checkRes(res2)) {
+        this.$set(this, `demandList`, res2.data);
+        // console.log(this.demandList);
+      }
+      const res3 = await this.query({ skip: 0, type: '2', status: '1' });
+      if (this.$checkRes(res3)) {
+        this.$set(this, `serveList`, res3.data);
+        // console.log(this.serveList);
+      }
+      const res4 = await this.expertquery({ skip: 0, status: '1' });
+      if (this.$checkRes(res4)) {
+        this.$set(this, `expertList`, res4.data);
+        // console.log(this.expertList);
+      }
     },
-    // 选择类型
-    typeChange(value) {
-      if (value) {
-        this.active = '';
-        this.$set(this, `type`, value);
-        let index = this.typeList.findIndex(i => i.type == value);
-        if (index) {
-          this.$set(this, `active`, index);
-        }
+    //下拉选择
+    selectChange(type) {
+      const index = this.typeList.findIndex(i => i.type == type);
+      if (index || index == 0) {
+        this.$set(this, `active`, index);
       }
     },
-    // 输入框查询
-    onSearch(data) {
-      this.$set(this, `name`, data);
-      if (this.type) {
-        this.searchList();
+    //搜索
+    onSearch(name) {
+      if (this.typeValue) {
+        this.searchText();
       } else {
         this.$notify({
-          message: '请选择信息类型',
+          message: '请选择分类',
           type: 'danger',
         });
       }
     },
+    //根据title查询
+    async searchText({ ...info } = {}) {
+      if (this.SearchValue) {
+        info.name = this.SearchValue;
+        if (this.typeValue == 0) {
+          const res = await this.query({ skip: 0, type: '1', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `tecList`, res.data);
+        } else if (this.typeValue == 1) {
+          const res = await this.query({ skip: 0, type: '0', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `demandList`, res.data);
+        } else if (this.typeValue == 2) {
+          const res = await this.query({ skip: 0, type: '2', status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `serveList`, res.data);
+        } else if (this.typeValue == 3) {
+          const res = await this.expertquery({ skip: 0, status: '1', ...info });
+          if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
+        }
+        // else{
+        //专利的根据name查询
+        // }
+      } else {
+        this.search();
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -174,12 +211,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.style {
+.con {
   width: 100%;
   min-height: 667px;
   position: relative;
   background-color: #f9fafc;
-  .down {
+  .box {
     position: relative;
     .search {
       position: fixed;
@@ -187,7 +224,7 @@ export default {
       z-index: 999;
       border-bottom: 1px solid #ccc;
       background-color: #fff;
-      .type {
+      .select {
         /deep/.el-input__inner {
           border: none;
           padding: 0;
@@ -201,13 +238,13 @@ export default {
           line-height: 30px;
         }
       }
-      .input {
+      .inputSearch {
         .van-search {
           padding: 10px 12px 10px 0;
         }
       }
     }
-    .data {
+    .main {
       position: absolute;
       width: 100%;
       top: 54px;
@@ -219,8 +256,4 @@ export default {
   height: 46px;
   overflow: hidden;
 }
-.foot {
-  position: absolute;
-  bottom: 0;
-}
 </style>

src/views/market/parts/demand.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="demand">
+    <el-row>
+      <el-col :span="24" class="demand">
+        <el-col :span="24" class="list" v-for="(item, index) in demandList" :key="index">
+          <el-col :span="24" class="name textOver">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="24" class="company textOver"> 需求单位：{{ item.company || '暂无' }} </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">所属领域：{{ item.field || '暂无' }}</span>
+            <span class="textOver">合作方式：{{ item.cooperation || '暂无' }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'demand',
+  props: {
+    demandList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.demand {
+  padding: 0px 10px;
+  .list {
+    padding: 10px 0px;
+    border-bottom: 1px dashed #ccc;
+    .name {
+      font-weight: bold;
+      font-size: 18px;
+    }
+    .company {
+      font-size: 16px;
+      color: #666;
+      padding-top: 5px;
+    }
+    .other {
+      padding-top: 5px;
+      color: #666;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+      span:nth-child(2) {
+        padding-left: 5px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>

src/views/market/parts/expert.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="expert">
+    <el-row>
+      <el-col :span="24" class="expert">
+        <el-col :span="24" class="list" v-for="(item, index) in expertList" :key="index">
+          <el-col :span="6" class="image">
+            <el-image v-if="item.expertimage != null || undefined" :src="item.expertimage"></el-image>
+            <el-image :src="expertimage" v-else></el-image>
+          </el-col>
+          <el-col :span="18" class="name">
+            <p class="textOver">{{ item.name || '暂无' }}</p>
+            <p class="textOver">{{ item.zwzc || '暂无' }}</p>
+            <p class="textOver">{{ item.company || '暂无' }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'expert',
+  props: {
+    expertList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {
+      expertimage: require('@/assets/222.png'),
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.expert {
+  padding: 10px 0px 0px 0px;
+  .list {
+    padding: 10px 0px;
+    border-bottom: 1px dashed #ccc;
+    .image {
+      .el-image {
+        border-radius: 50%;
+        height: 88px;
+      }
+    }
+    .name {
+      padding-left: 10px;
+      p {
+        color: #666;
+        font-size: 16px;
+        padding-top: 5px;
+      }
+      p:nth-child(1) {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/views/market/parts/pantent.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="pantent">
+    <el-row>
+      <el-col :span="24" class="pantent">
+        <el-col :span="24" class="list" v-for="(item, index) in pantentList" :key="index">
+          <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
+          <el-col :span="12" class="time textOver">时间：{{ item.time }}</el-col>
+          <el-col :span="12" class="type textOver">类型：{{ item.type }}</el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'pantent',
+  props: {
+    pantentList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.pantent {
+  padding: 0 10px;
+  .list {
+    padding: 10px 0px;
+    border-bottom: 1px dashed #ccc;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .time,
+    .type {
+      color: #666;
+      font-size: 16px;
+      padding-top: 5px;
+    }
+  }
+}
+</style>

src/views/market/parts/serve.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="serve">
+    <el-row>
+      <el-col :span="24" class="serve">
+        <el-col :span="24" class="list" v-for="(item, index) in serveList" :key="index">
+          <el-col :span="24" class="name textOver">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="24" class="company textOver"> 服务单位：{{ item.company || '暂无' }} </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">信息属性：{{ item.messattribute || '暂无' }}</span>
+            <span class="textOver">联系人：{{ item.qqwx || '暂无' }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'serve',
+  props: { serveList: { type: Array } },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.serve {
+  padding: 0px 10px;
+  .list {
+    padding: 10px 0px;
+    border-bottom: 1px dashed #ccc;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .company,
+    .other {
+      font-size: 16px;
+      color: #666;
+      padding-top: 5px;
+    }
+    .other {
+      span {
+        width: 50%;
+        display: inline-block;
+      }
+      span:nth-child(1) {
+        padding-right: 5px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>

src/views/market/parts/tec.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="tec">
+    <el-row>
+      <el-col :span="24" class="tec">
+        <el-col :span="24" class="list" v-for="(item, index) in tecList" :key="index">
+          <el-col :span="24" class="name textOver">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="24" class="company textOver"> 成果单位：{{ item.company || '暂无' }} </el-col>
+          <el-col :span="24" class="other">
+            <span class="textOver">领域：{{ item.field || '暂无' }}</span>
+            <span class="textOver">联系人：{{ item.contacts || '暂无' }}</span>
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-backtop :bottom="50" :right="10"> </el-backtop>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'tec',
+  props: {
+    tecList: { type: Array },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tec {
+  padding: 0 10px;
+  .list {
+    border-bottom: 1px dashed #ccc;
+    padding: 10px 0;
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .company {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+    }
+    .other {
+      font-size: 16px;
+      color: #666;
+      padding: 5px 0 0 0;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+  }
+}
+</style>