91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<script>
|
|
export default {
|
|
name: "MenuItem",
|
|
functional: true,
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
render(h, context) {
|
|
const { icon, title } = context.props;
|
|
const vnodes = [];
|
|
|
|
if (icon) {
|
|
if (icon.includes("el-icon")) {
|
|
vnodes.push(<i class={[icon, "sub-el-icon"]} />);
|
|
// icon_menu_statistical
|
|
} else {
|
|
vnodes.push(
|
|
// <div
|
|
// class="menuIcon"
|
|
// style="width:53px;height:53px;background:#9cbeff;border-radius:22px;display:flex;align-items: center;justify-content: center;"
|
|
// >
|
|
// <svg-icon icon-class={icon} />
|
|
// </div>
|
|
<i class={["icon_menu_" + icon, "icon_menu"]}></i>
|
|
);
|
|
// vnodes.push(<svg-icon icon-class={icon}/>)
|
|
}
|
|
}
|
|
|
|
if (title) {
|
|
vnodes.push(<span slot="title">{title}</span>);
|
|
}
|
|
return vnodes;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon_menu {
|
|
display: inline-block;
|
|
width: 53px;
|
|
height: 53px;
|
|
/* background: url('./img/icon_home.png')no-repeat; */
|
|
background-size: cover !important;
|
|
}
|
|
.icon_menu_statistical {
|
|
background: url("./img/icon_statistical.png") no-repeat;
|
|
}
|
|
.icon_menu_convenience {
|
|
background: url("./img/icon_convenience.png") no-repeat;
|
|
}
|
|
.icon_menu_workBook {
|
|
background: url("./img/icon_workBook.png") no-repeat;
|
|
}
|
|
.icon_menu_dxdb {
|
|
background: url("./img/icon_dxdb.png") no-repeat;
|
|
}
|
|
.icon_menu_jmInfo {
|
|
background: url("./img/icon_jmInfo.png") no-repeat;
|
|
}
|
|
.icon_menu_townRanking {
|
|
background: url("./img/icon_twonRanking.png") no-repeat;
|
|
}
|
|
.sub-el-icon {
|
|
color: currentColor;
|
|
width: 1em;
|
|
height: 1em;
|
|
/* width: 53px; */
|
|
/* height: 53px; */
|
|
}
|
|
#app .sidebar-container .svg-icon {
|
|
margin-right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
/* .el-menu-item {
|
|
height: 153px;
|
|
justify-content: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
} */
|
|
</style>
|