更新

src/router/index.js

@@ -76,6 +76,12 @@ const routes = [
     meta: { title: '创新服务', isleftarrow: true },
     component: () => import('../views/service/index.vue'),
   },
+  {
+    path: '/service/detail',
+    name: 'service_detail',
+    meta: { title: '创新服务', isleftarrow: true },
+    component: () => import('../views/service/detail.vue'),
+  },
   // 用户-我的发布
   {
     path: '/userCenter/myProduct/index',

src/views/service/detail.vue

@@ -0,0 +1,83 @@
+<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="main">
+          <span v-if="column_name == '智慧推荐'">智慧推荐</span>
+          <span v-else-if="column_name == '展会管理'"><twoInfo :column_name="column_name"></twoInfo></span>
+          <span v-else-if="column_name == '科技评估'">科技评估</span>
+          <span v-else-if="column_name == '合同在线'">合同在线</span>
+          <span v-else-if="column_name == '信用认证'">信用认证</span>
+          <span v-else-if="column_name == '绩效评价'">绩效评价</span>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import twoInfo from './parts/twoInfo.vue';
+
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    footInfo,
+    twoInfo, //展会管理
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    column_name() {
+      return this.$route.query.column_name;
+    },
+  },
+  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;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/views/service/index.vue

@@ -7,37 +7,37 @@
         </el-col>
         <el-col :span="24" class="main">
           <el-col :span="12" class="btn">
-            <el-link :underline="false" @click="oneBtn" disabled>
+            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '智慧推荐' } })" disabled>
               <el-image :src="onePic"></el-image>
               <p>智慧推荐</p>
             </el-link>
           </el-col>
           <el-col :span="12" class="btn">
-            <el-link :underline="false" @click="twoBtn">
+            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '展会管理' } })">
               <el-image :src="twoPic"></el-image>
               <p>展会管理</p>
             </el-link>
           </el-col>
           <el-col :span="12" class="btn">
-            <el-link :underline="false" @click="threeBtn" disabled>
+            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '科技评估' } })" disabled>
               <el-image :src="threePic"></el-image>
               <p>科技评估</p>
             </el-link>
           </el-col>
           <el-col :span="12" class="btn">
-            <el-link :underline="false" @click="fourBtn" disabled>
+            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '合同在线' } })" disabled>
               <el-image :src="fourPic"></el-image>
               <p>合同在线</p>
             </el-link>
           </el-col>
           <el-col :span="12" class="btn">
-            <el-link :underline="false" @click="fiveBtn" disabled>
+            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '信用认证' } })" disabled>
               <el-image :src="fivePic"></el-image>
               <p>信用认证</p>
             </el-link>
           </el-col>
           <el-col :span="12" class="btn">
-            <el-link :underline="false" @click="sixBtn" disabled>
+            <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '绩效评价' } })" disabled>
               <el-image :src="sixPic"></el-image>
               <p>绩效评价</p>
             </el-link>
@@ -81,9 +81,7 @@ export default {
   created() {},
   methods: {
     // 智慧推荐
-    oneBtn() {
-      console.log('智慧推荐');
-    },
+    oneBtn() {},
     // 展会管理
     twoBtn() {
       console.log('智慧推荐');

src/views/service/parts/twoInfo.vue

@@ -0,0 +1,83 @@
+<template>
+  <div id="twoInfo">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          {{ column_name }}
+        </el-col>
+        <el-col :span="24" class="describe">
+          <h3>服务描述</h3>
+          <p>
+            展会众多业内人士齐聚直播大厅现场进行业务洽谈、产品展示、以及行业经验的交流。展会邀请各种行业的企业进行参加,促进行业交流，内外交流，横向交流，促进商业发展
+          </p>
+        </el-col>
+        <el-col :span="24" class="process">
+          <h3>服务流程</h3>
+          <el-col :span="24">
+            <div>
+              <el-button>注册登录</el-button>
+              <i data-v-f4ffaafc="" class="el-icon-right"></i>
+            </div>
+            <div>
+              <el-button>提交申请办展资料</el-button>
+              <i data-v-f4ffaafc="" class="el-icon-right"></i>
+            </div>
+            <div>
+              <el-button>确认需求</el-button>
+              <i data-v-f4ffaafc="" class="el-icon-right"></i>
+            </div>
+            <div>
+              <el-button>展会宣传</el-button>
+              <i data-v-f4ffaafc="" class="el-icon-right"></i>
+            </div>
+          </el-col>
+        </el-col>
+        <el-button type="primary" class="btn">申请办理</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'twoInfo',
+  props: {
+    column_name: 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 {
+  padding: 0 15px;
+  .top {
+    text-align: center;
+    font-size: 25px;
+    font-weight: bold;
+    color: #22529a;
+    padding: 20px 0;
+  }
+  .describe {
+  }
+  .process {
+  }
+  .btn {
+  }
+}
+</style>