更新

src/views/service/detail.vue

@@ -13,9 +13,9 @@
           <span v-else-if="column_name == '信用认证'">信用认证</span>
           <span v-else-if="column_name == '绩效评价'">绩效评价</span>
         </el-col>
-        <el-col :span="24" class="foot">
+        <!-- <el-col :span="24" class="foot">
           <footInfo></footInfo>
-        </el-col>
+        </el-col> -->
       </el-col>
     </el-row>
   </div>
@@ -32,7 +32,7 @@ export default {
   props: {},
   components: {
     NavBar,
-    footInfo,
+    // footInfo,
     twoInfo, //展会管理
   },
   data: function() {

src/views/service/index.vue

@@ -6,7 +6,7 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          <el-col :span="12" class="btn">
+          <!-- <el-col :span="12" class="btn">
             <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '智慧推荐' } })" disabled>
               <el-image :src="onePic"></el-image>
               <p>智慧推荐</p>
@@ -41,6 +41,47 @@
               <el-image :src="sixPic"></el-image>
               <p>绩效评价</p>
             </el-link>
+          </el-col> -->
+          <el-col :span="24" class="topImage">
+            <el-image :src="topImage"></el-image>
+          </el-col>
+          <el-col :span="24" class="info">
+            <el-col :span="8" class="btn">
+              <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="8" class="btn">
+              <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="8" class="btn">
+              <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="8" class="btn">
+              <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="8" class="btn">
+              <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="8" class="btn">
+              <el-link :underline="false" @click="$router.push({ path: '/service/detail', query: { column_name: '绩效评价' } })" disabled>
+                <el-image :src="sixPic"></el-image>
+                <p>绩效评价</p>
+              </el-link>
+            </el-col>
           </el-col>
         </el-col>
         <el-col :span="24" class="foot">
@@ -70,6 +111,7 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
+      topImage: require('@/assets/topImage.jpg'),
       onePic: require('@/assets/bendi1.png'),
       twoPic: require('@/assets/bendi2.png'),
       threePic: require('@/assets/bendi3.png'),
@@ -118,7 +160,7 @@ export default {
   width: 100%;
   min-height: 667px;
   position: relative;
-  background-color: #f9fafc;
+  background-color: #fff;
 }
 .top {
   height: 46px;
@@ -128,20 +170,48 @@ export default {
 }
 .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;
+  .topImage {
+    height: 170px;
+    .el-image {
+      width: 100%;
+      height: 170px;
+    }
+  }
+  .info {
+    .btn {
+      padding: 15px 0;
+      text-align: center;
+      border: 1px solid #f9f9f9;
+      .el-image {
+        width: 50px;
+        height: 50px;
+        overflow: hidden;
+      }
+      p {
+        font-size: 17px;
+        font-family: 楷体;
+        padding: 5px 0 0 0;
+        font-weight: bold;
+      }
+    }
+    .btn:nth-child(2) .el-image {
+      width: 55px;
     }
   }
+  // .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;