更新

src/views/service/index.vue

@@ -1,30 +1,152 @@
 <template>
   <div id="index">
-    <p>创新服务</p>
+    <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">
+          <el-col :span="12" class="btn">
+            <el-link :underline="false" @click="oneBtn" 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-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-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-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-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-image :src="sixPic"></el-image>
+              <p>绩效评价</p>
+            </el-link>
+          </el-col>
+        </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';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    NavBar,
+    footInfo,
+  },
   data: function() {
-    return {};
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      onePic: require('@/assets/bendi1.png'),
+      twoPic: require('@/assets/bendi2.png'),
+      threePic: require('@/assets/bendi3.png'),
+      fourPic: require('@/assets/bendi4.png'),
+      fivePic: require('@/assets/bendi5.png'),
+      sixPic: require('@/assets/bendi6.png'),
+    };
   },
   created() {},
-  methods: {},
+  methods: {
+    // 智慧推荐
+    oneBtn() {
+      console.log('智慧推荐');
+    },
+    // 展会管理
+    twoBtn() {
+      console.log('智慧推荐');
+    },
+    // 科技评估
+    threeBtn() {
+      console.log('智慧推荐');
+    },
+    // 合同在线
+    fourBtn() {
+      console.log('智慧推荐');
+    },
+    // 信用认证
+    fiveBtn() {
+      console.log('智慧推荐');
+    },
+    // 绩效评价
+    sixBtn() {
+      console.log('智慧推荐');
+    },
+  },
   computed: {
     ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
   },
-  metaInfo() {
-    return { title: this.$route.meta.title };
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<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;
+  .btn {
+    text-align: center;
+    background: #fff;
+    margin: 10px 10px 0 10px;
+    width: 44%;
+    border-radius: 5px;
+    padding: 15px 0;
+    p {
+      font-size: 17px;
+      font-family: 楷体;
+      padding: 5px 0 0 0;
+      font-weight: bold;
+    }
+  }
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>