|
|
@@ -5,7 +5,7 @@
|
|
|
<el-col :span="24" class="main">
|
|
|
<el-col :span="4" class="menu">
|
|
|
<el-image :src="squareImage"></el-image>
|
|
|
- <span>Menu</span>
|
|
|
+ <span class="topMenu">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> -->
|
|
|
@@ -15,8 +15,8 @@
|
|
|
<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 : ''}`">
|
|
|
- <i class="el-icon-platform-eleme" style="padding:0 15px 0 0"></i>
|
|
|
- {{ item.name }}
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span :style="`color:${menuIndex == index ? menuColor : ''}`"> {{ item.name }}</span>
|
|
|
</p>
|
|
|
</el-col>
|
|
|
</el-collapse-item>
|
|
|
@@ -24,8 +24,8 @@
|
|
|
<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 : ''}`">
|
|
|
- <i class="el-icon-platform-eleme" style="padding:0 15px 0 0"></i>
|
|
|
- {{ item.name }}
|
|
|
+ <i :class="item.icon"></i>
|
|
|
+ <span :style="`color:${menuIndexs == index ? menuColor : ''}`">{{ item.name }}</span>
|
|
|
</p>
|
|
|
</el-col>
|
|
|
</el-collapse-item>
|
|
|
@@ -84,16 +84,23 @@ export default {
|
|
|
data: () => ({
|
|
|
squareImage: require('@/assets/live/square_big.png'),
|
|
|
activeNames: ['1'],
|
|
|
- menuList: [{ name: '智慧推荐' }, { name: '展会管理' }, { name: '科技评估' }, { name: '合同在线' }, { name: '信用认证' }, { name: '绩效评价' }],
|
|
|
+ menuList: [
|
|
|
+ { icon: 'el-icon-trophy-1', name: '智慧推荐' },
|
|
|
+ { icon: 'el-icon-pie-chart', name: '展会管理' },
|
|
|
+ { icon: 'el-icon-news', name: '科技评估' },
|
|
|
+ { icon: 'el-icon-guide', name: '合同在线' },
|
|
|
+ { icon: 'el-icon-notebook-2', name: '信用认证' },
|
|
|
+ { icon: 'el-icon-files', name: '绩效评价' },
|
|
|
+ ],
|
|
|
menuLists: [
|
|
|
- { name: '知识产权' },
|
|
|
- { name: '科技文献' },
|
|
|
- { name: '项目申报' },
|
|
|
- { name: '科技金融' },
|
|
|
- { name: '科技孵化' },
|
|
|
- { name: '成果登记' },
|
|
|
- { name: '技术合同' },
|
|
|
- { name: '高企认证' },
|
|
|
+ { icon: 'el-icon-trophy-1', name: '知识产权' },
|
|
|
+ { icon: 'el-icon-football', name: '科技文献' },
|
|
|
+ { icon: 'el-icon-bangzhu', name: '项目申报' },
|
|
|
+ { icon: 'el-icon-aim', name: '科技金融' },
|
|
|
+ { icon: 'el-icon-odometer', name: '科技孵化' },
|
|
|
+ { icon: 'el-icon-coin', name: '成果登记' },
|
|
|
+ { icon: 'el-icon-notebook-1', name: '技术合同' },
|
|
|
+ { icon: 'el-icon-office-building', name: '高企认证' },
|
|
|
],
|
|
|
menuColor: 'rgb(254, 149, 14)',
|
|
|
backColor: 'rgb(204,204,204)',
|
|
|
@@ -169,7 +176,7 @@ export default {
|
|
|
display: inline-table;
|
|
|
margin: 10px 5px;
|
|
|
}
|
|
|
-.menu span {
|
|
|
+.menu .topMenu {
|
|
|
font-size: 24px;
|
|
|
color: #92959a;
|
|
|
font-weight: 600;
|
|
|
@@ -178,15 +185,22 @@ export default {
|
|
|
top: 10px;
|
|
|
}
|
|
|
.menuList {
|
|
|
- text-align: center;
|
|
|
+ i {
|
|
|
+ padding: 0 15px 0 0;
|
|
|
+ font-size: 25px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
.menuList p {
|
|
|
- line-height: 60px;
|
|
|
+ line-height: 50px;
|
|
|
font-size: 16px;
|
|
|
cursor: pointer;
|
|
|
border-bottom: 1px solid #2d64b3;
|
|
|
color: #044b79;
|
|
|
font-weight: 600;
|
|
|
+ padding: 0 0 0 15px;
|
|
|
}
|
|
|
.info {
|
|
|
float: right;
|
