This commit is contained in:
hzz 2023-08-07 17:09:03 +08:00
parent c4d68a6771
commit c9d4807c75

View File

@ -11,6 +11,8 @@
<template> <template>
<div :class="$style['container']" ref="appRef"> <div :class="$style['container']" ref="appRef">
<div class="navbar"> <div class="navbar">
<h2 class="title">大屏管理系统</h2>
<div class="dropdown">
<el-dropdown @command="changelang"> <el-dropdown @command="changelang">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<!-- <img src="../assets/svg/gateway.svg" alt="" class="langimg" height="20px" width="20px"> --> <!-- <img src="../assets/svg/gateway.svg" alt="" class="langimg" height="20px" width="20px"> -->
@ -19,31 +21,17 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item :class="'简体中文' == lang ? 'select' : ''" command="简体中文">简体中文</el-dropdown-item> <el-dropdown-item :class="'简体中文' == lang ? 'select' : ''" command="简体中文">简体中文</el-dropdown-item>
<el-dropdown-item :class="'English/USD' == lang?'select':'' " command="English/USD">English</el-dropdown-item> <el-dropdown-item :class="'English/USD' == lang ? 'select' : ''"
command="English/USD">English</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<!-- <el-select class="m-2" v-model="lang" placeholder="Select" size="large" @change="changelang"> </div>
<el-option
:label="'简体中文'"
:value="'简体中文'"
/>
<el-option
:label="'English/USD'"
:value="'English/USD'"
/>
</el-select> -->
</div> </div>
<div class="itemlist"> <div class="itemlist">
<list <list v-for="res in routerList" :path="res.path" :is-link="res.isLink" :title="res.title" :key="res.id"
v-for="res in routerList" :url="res.url"></list>
:path="res.path"
:is-link="res.isLink"
:title="res.title"
:key="res.id"
:url="res.url"
></list>
</div> </div>
</div> </div>
</template> </template>
@ -317,12 +305,14 @@ onUnmounted(() => {});
</style> </style>
<style scoped> <style scoped>
@import '../assets/css/iconfont.css'; @import '../assets/css/iconfont.css';
.langimg { .langimg {
width: 50px; width: 50px;
height: 50px; height: 50px;
font-size: 50px; font-size: 50px;
color: #fff; color: #fff;
} }
.itemlist { .itemlist {
height: 1030px; height: 1030px;
width: 1920px; width: 1920px;
@ -334,16 +324,31 @@ onUnmounted(() => {});
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto !important; overflow: auto !important;
} }
.navbar { .navbar {
position: relative;
height: 50px; height: 50px;
font-size: 20px; font-size: 20px;
width: 100%; margin: 20px;
margin: 10px; margin-top: 40px;
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
align-items: center; align-items: center;
margin-left: -100px;
} }
.title {
font-size: 40px;
text-align: center;
font-weight: bold;
color: white;
}
.dropdown {
position: absolute;
top: 0;
right: 90px;
}
.el-dropdown-link { .el-dropdown-link {
font-size: 30px; font-size: 30px;
color: #fff; color: #fff;
@ -353,13 +358,16 @@ onUnmounted(() => {});
background-color: #303133 !important; background-color: #303133 !important;
color: #fff; color: #fff;
} }
.el-dropdown-menu__item { .el-dropdown-menu__item {
color: #fff !important; color: #fff !important;
} }
.el-popper.is-light .el-popper__arrow::before { .el-popper.is-light .el-popper__arrow::before {
background-color: #303133 !important; background-color: #303133 !important;
color: #fff; color: #fff;
} }
:deep(.select) { :deep(.select) {
background-color: #e4f5f5 !important; background-color: #e4f5f5 !important;
color: #409EFF !important; color: #409EFF !important;