更新

src/views/service/list.vue

@@ -6,8 +6,24 @@
           <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">
+            <!-- <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 :span="24">
+              <el-collapse v-model="activeNames" accordion>
+                <el-collapse-item name="1">
+                  <template slot="title">本地服务</template>
+                  <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-collapse-item>
+                <el-collapse-item name="2">
+                  <template slot="title">合作服务</template>
+                  <el-col class="menuList" :span="24" v-for="(item, index) in menuLists" :key="index">
+                    <p @click="changeMenus(item.name, index)" :style="`color:${menuIndexs == index ? menuColor : ''}`">{{ item.name }}</p>
+                  </el-col>
+                </el-collapse-item>
+              </el-collapse>
             </el-col>
           </el-col>
           <el-col :span="19" class="info">
@@ -61,9 +77,21 @@ export default {
   },
   data: () => ({
     squareImage: require('@/assets/live/square_big.png'),
+    activeNames: ['1'],
     menuList: [{ name: '智慧推荐' }, { name: '展会管理' }, { name: '科技评估' }, { name: '合同在线' }, { name: '信用认证' }, { name: '绩效评价' }],
+    menuLists: [
+      { name: '知识产权' },
+      { name: '科技文献' },
+      { name: '项目申报' },
+      { name: '科技金融' },
+      { name: '科技孵化' },
+      { name: '成果登记' },
+      { name: '技术合同' },
+      { name: '高企认证' },
+    ],
     menuColor: 'rgb(254, 149, 14)',
     menuIndex: '0',
+    menuIndexs: '0',
     columnName: '',
   }),
   created() {
@@ -88,6 +116,11 @@ export default {
       this.columnName = name;
       this.menuColor = 'rgb(254, 149, 14)';
     },
+    changeMenus(name, index) {
+      this.menuIndexs = index;
+      this.columnName = name;
+      this.menuColor = 'rgb(254, 149, 14)';
+    },
   },
 };
 </script>
@@ -98,12 +131,12 @@ export default {
   margin: 0 auto;
 }
 .main {
-  min-height: 600px;
+  min-height: 900px;
   margin: 20px 0;
 }
 .menu {
   float: left;
-  min-height: 600px;
+  min-height: 900px;
   background: no-repeat bottom right;
   background-image: url(/img/menu_back.81f4b7e7.jpg);
   padding: 10px 0 0 10px;
@@ -134,7 +167,7 @@ export default {
 .info {
   float: right;
   width: 77%;
-  min-height: 600px;
+  min-height: 900px;
   padding: 20px;
   box-shadow: 0 0 10px #2d64b3;
   .infoTop {
@@ -149,4 +182,8 @@ export default {
     margin: 15px 0 0 0;
   }
 }
+/deep/.el-collapse-item__header {
+  font-size: 18px;
+  font-weight: bold;
+}
 </style>