更新

src/views/service/index.vue

@@ -9,7 +9,7 @@
                 <el-col class="lefttop" :span="24"><span class="title"> |</span> 本地服务</el-col>
                 <ul>
                   <li class="zhengwuList" v-for="(item, index) in zhengwuList" :key="index">
-                    <a @click="$router.push({ path: '/live/service/list', query: { name: item.title } })">
+                    <a @click="$router.push({ path: '/live/service/list', query: { column_name: item.title } })">
                       <el-image style="width:64px;height:64px;" :src="item.pic"></el-image>
                       <p>{{ item.title }}</p>
                     </a>

src/views/service/list.vue

@@ -3,11 +3,25 @@
     <el-row>
       <div class="w_1200">
         <el-col :span="24" class="main">
-          <el-col :span="4" class="menu">
-            左側
+          <el-col :span="5" class="menu">
+            <el-image :src="squareImage"></el-image>
+            <span>Menu</span>
+            <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
+              <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">{{ item.name }}</p>
+            </el-col>
           </el-col>
-          <el-col :span="20" class="info">
-            右側
+          <el-col :span="19" class="info">
+            <el-col :span="24" class="infoTop">
+              <span>|</span> <span>{{ columnName }}</span>
+            </el-col>
+            <el-col :span="24" class="infoDown">
+              <span v-if="columnName == '智慧推荐'">智慧推荐</span>
+              <span v-if="columnName == '展会管理'">展会管理</span>
+              <span v-if="columnName == '科技评估'">科技评估</span>
+              <span v-if="columnName == '合同在线'">合同在线</span>
+              <span v-if="columnName == '信用认证'">信用认证</span>
+              <span v-if="columnName == '绩效评价'">绩效评价</span>
+            </el-col>
           </el-col>
         </el-col>
       </div>
@@ -16,14 +30,41 @@
 </template>
 
 <script>
+import merge from 'webpack-merge';
 export default {
   name: 'list',
   props: {},
   components: {},
-  data: () => ({}),
-  created() {},
-  computed: {},
-  methods: {},
+  data: () => ({
+    squareImage: require('@/assets/live/square_big.png'),
+    menuList: [{ name: '智慧推荐' }, { name: '展会管理' }, { name: '科技评估' }, { name: '合同在线' }, { name: '信用认证' }, { name: '绩效评价' }],
+    menuColor: 'rgb(254, 149, 14)',
+    menuIndex: '0',
+    columnName: '',
+  }),
+  created() {
+    this.searchInfo();
+  },
+  computed: {
+    column_name() {
+      return this.$route.query.column_name;
+    },
+  },
+  methods: {
+    searchInfo() {
+      if (this.column_name == '智慧推荐') this.changeMenu(this.$route.query.column_name, 0);
+      if (this.column_name == '展会管理') this.changeMenu(this.$route.query.column_name, 1);
+      if (this.column_name == '科技评估') this.changeMenu(this.$route.query.column_name, 2);
+      if (this.column_name == '合同在线') this.changeMenu(this.$route.query.column_name, 3);
+      if (this.column_name == '信用认证') this.changeMenu(this.$route.query.column_name, 4);
+      if (this.column_name == '绩效评价') this.changeMenu(this.$route.query.column_name, 5);
+    },
+    changeMenu(name, index) {
+      this.menuIndex = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(254, 149, 14)';
+    },
+  },
 };
 </script>
 
@@ -34,6 +75,54 @@ export default {
 }
 .main {
   min-height: 600px;
-  margin: 30px 0;
+  margin: 20px 0;
+}
+.menu {
+  float: left;
+  min-height: 600px;
+  background: no-repeat bottom right;
+  background-image: url(/img/menu_back.81f4b7e7.jpg);
+  padding: 10px 0 0 10px;
+  box-sizing: border-box;
+  box-shadow: 0 0 10px #bbbaba;
+}
+.menu .el-image {
+  width: 30px;
+  display: inline-table;
+  margin: 10px 5px;
+}
+.menu span {
+  font-size: 24px;
+  color: #92959a;
+  font-weight: 600;
+  margin-left: 3px;
+  position: relative;
+  top: 10px;
+}
+.menuList p {
+  line-height: 60px;
+  font-size: 18px;
+  cursor: pointer;
+  border-bottom: 1px solid #2d64b3;
+  color: #044b79;
+  font-weight: 600;
+}
+.info {
+  float: right;
+  width: 77%;
+  min-height: 600px;
+  padding: 20px;
+  box-shadow: 0 0 10px #2d64b3;
+  .infoTop {
+    font-size: 18px;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #e5e5e5;
+    font-weight: bold;
+    color: #22529a;
+  }
+  .infoDown {
+    margin: 15px 0 0 0;
+  }
 }
 </style>