parent
b5ce42dd75
commit
0a9fcf47f3
14 changed files with 844 additions and 447 deletions
@ -1,35 +1,38 @@ |
||||
<template> |
||||
<div> |
||||
<template v-for="item in this.menuList"> |
||||
<el-submenu :key="item.id" :index="item.id" v-if="item.children && item.children.length"> |
||||
<template slot="title"> |
||||
<span slot="title">{{item.name}}</span> |
||||
</template> |
||||
<menuTree :menuList="item.children"></menuTree> |
||||
</el-submenu> |
||||
<el-menu-item :key="item.id" :index="item.id" v-else> |
||||
<span slot="title">{{item.name}}</span> |
||||
</el-menu-item> |
||||
<div> |
||||
<template v-for="(item, i) in this.menuList"> |
||||
<el-submenu :key="item.id" |
||||
:index="item.id" |
||||
v-if="item.children && item.children.length"> |
||||
<template slot="title"> |
||||
<span slot="title">{{item.name}}</span> |
||||
</template> |
||||
</div> |
||||
<menuTree :menuList="item.children"></menuTree> |
||||
</el-submenu> |
||||
<el-menu-item :key="i" |
||||
:index="item.id" |
||||
v-else> |
||||
<span slot="title">{{item.name}}</span> |
||||
</el-menu-item> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'menuTree', |
||||
props: { |
||||
menuList: { |
||||
type: Array, |
||||
default: [] |
||||
} |
||||
}, |
||||
data () { |
||||
return {} |
||||
}, |
||||
mounted () {}, |
||||
methods: {} |
||||
export default { |
||||
name: 'menuTree', |
||||
props: { |
||||
menuList: { |
||||
type: Array, |
||||
default: [] |
||||
} |
||||
}, |
||||
data () { |
||||
return {} |
||||
}, |
||||
mounted () { }, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
|
||||
@ -1,18 +1,39 @@ |
||||
// rem等比适配配置文件
|
||||
|
||||
import store from '@/store' |
||||
|
||||
// 基准大小
|
||||
const baseSize = 16; |
||||
|
||||
// 设置 rem 函数
|
||||
function setRem() { |
||||
const setRem = () => { |
||||
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
|
||||
const scale = document.documentElement.clientWidth / 1920; |
||||
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
|
||||
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px"; |
||||
} |
||||
|
||||
const throttle = (func, delay) => { |
||||
var prev = Date.now() |
||||
return function () { |
||||
var context = this; |
||||
var args = arguments; |
||||
var now = Date.now(); |
||||
if (now - prev >= delay) { |
||||
func.apply(context, args); |
||||
prev = Date.now(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
const isMobile = () => { |
||||
store.commit('layout/setMobile', /Mobi|Android|iPhone/i.test(navigator.userAgent) || window.innerWidth <= 640) |
||||
} |
||||
|
||||
// 初始化
|
||||
setRem(); |
||||
isMobile() |
||||
// 改变窗口大小时重新设置 rem
|
||||
window.onresize = function() { |
||||
window.onresize = throttle(() => { |
||||
setRem(); |
||||
}; |
||||
isMobile() |
||||
}, 500) |
||||
@ -1,395 +1,398 @@ |
||||
@import "./default/index.scss"; |
||||
@import "./var.scss"; |
||||
@import './default/index.scss'; |
||||
@import './var.scss'; |
||||
|
||||
@font-face { |
||||
font-family: youshe; |
||||
src: url('font/YouSheBiaoTiHei.ttf'); |
||||
font-family: youshe; |
||||
src: url('font/YouSheBiaoTiHei.ttf'); |
||||
} |
||||
@font-face { |
||||
font-family: din; |
||||
src: url('font/din.otf'); |
||||
font-family: din; |
||||
src: url('font/din.otf'); |
||||
} |
||||
@font-face { |
||||
font-family: yjsz; |
||||
src: url('font/yjsz.TTF'); |
||||
font-family: yjsz; |
||||
src: url('font/yjsz.TTF'); |
||||
} |
||||
|
||||
[v-cloak] { |
||||
display: none; |
||||
display: none; |
||||
} |
||||
|
||||
.flex-between { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.l-title { |
||||
margin-bottom: 0; |
||||
} |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.l-title { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
|
||||
::-webkit-scrollbar-thumb { |
||||
width: 5px; |
||||
border-radius: 6px; |
||||
background: #d7d7d7; |
||||
width: 5px; |
||||
border-radius: 6px; |
||||
background: #d7d7d7; |
||||
} |
||||
.main { |
||||
.view { |
||||
min-width: $min-width; |
||||
min-height: calc(100vh - 107px); |
||||
padding: 12px 200px 20px; |
||||
margin: 0 auto; |
||||
background-color: #F3F6FA; |
||||
&.no-pd { |
||||
padding-top: 0; |
||||
} |
||||
&.pb { |
||||
padding-bottom: 20px; |
||||
} |
||||
} |
||||
.wrap-inner { |
||||
min-width: $min-width; |
||||
width: 100%; |
||||
padding: 0 200px 20px; |
||||
margin: 0 auto; |
||||
} |
||||
.center-wrap { |
||||
width: 1000px; |
||||
padding-bottom: 20px; |
||||
margin: 40px auto 0; |
||||
} |
||||
.view { |
||||
min-height: calc(100vh - 107px); |
||||
padding: 12px 200px 20px; |
||||
margin: 0 auto; |
||||
background-color: #f3f6fa; |
||||
&.no-pd { |
||||
padding-top: 0; |
||||
} |
||||
&.pb { |
||||
padding-bottom: 20px; |
||||
} |
||||
} |
||||
.wrap-inner { |
||||
min-width: $min-width; |
||||
width: 100%; |
||||
padding: 0 200px 20px; |
||||
margin: 0 auto; |
||||
} |
||||
.center-wrap { |
||||
width: 1000px; |
||||
padding-bottom: 20px; |
||||
margin: 40px auto 0; |
||||
} |
||||
} |
||||
.l-title{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 12px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
img{ |
||||
margin-right: 5px; |
||||
} |
||||
.l-title { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 12px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
img { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
.p-title { |
||||
padding-left: 5px; |
||||
margin-bottom: 24px; |
||||
line-height: 1; |
||||
font-size: 14px; |
||||
color: #585858; |
||||
border-left: 3px solid $--color-primary; |
||||
padding-left: 5px; |
||||
margin-bottom: 24px; |
||||
line-height: 1; |
||||
font-size: 14px; |
||||
color: #585858; |
||||
border-left: 3px solid $--color-primary; |
||||
} |
||||
|
||||
.el-input { |
||||
.el-input__inner { |
||||
border-color: rgba(0, 0, 0, 0.15); |
||||
} |
||||
.el-input__inner { |
||||
border-color: rgba(0, 0, 0, 0.15); |
||||
} |
||||
} |
||||
|
||||
.filter { |
||||
width: 100vw; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
flex: 1; |
||||
|
||||
li { |
||||
width: 100vw; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin-right: 30px; |
||||
flex: 1; |
||||
|
||||
label { |
||||
margin-right: 6px; |
||||
font-size: 14px; |
||||
line-height: 14px; |
||||
color: rgba(0, 0, 0, .65); |
||||
white-space: nowrap; |
||||
} |
||||
li { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin-right: 30px; |
||||
|
||||
.el-radio { |
||||
margin-right: 10px !important; |
||||
label { |
||||
margin-right: 6px; |
||||
font-size: 14px; |
||||
line-height: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.el-radio__input { |
||||
display: none !important; |
||||
} |
||||
.el-radio { |
||||
margin-right: 10px !important; |
||||
|
||||
.el-radio__input { |
||||
display: none !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.page { |
||||
position: relative; |
||||
padding: 24px 16px; |
||||
background-color: #fff; |
||||
position: relative; |
||||
padding: 24px 16px; |
||||
background-color: #fff; |
||||
|
||||
.tool { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-bottom: 24px; |
||||
|
||||
.single-choice { |
||||
dl { |
||||
.tool { |
||||
display: flex; |
||||
line-height: 30px; |
||||
|
||||
dt { |
||||
color: rgba(0, 0, 0, .65); |
||||
font-size: 14px; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
dd { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
span { |
||||
padding: 0 10px; |
||||
margin: 0 10px; |
||||
color: #333; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
white-space: nowrap; |
||||
|
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
color: $--color-primary; |
||||
justify-content: space-between; |
||||
margin-bottom: 24px; |
||||
|
||||
.single-choice { |
||||
dl { |
||||
display: flex; |
||||
line-height: 30px; |
||||
|
||||
dt { |
||||
color: rgba(0, 0, 0, 0.65); |
||||
font-size: 14px; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
dd { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
span { |
||||
padding: 0 10px; |
||||
margin: 0 10px; |
||||
color: #333; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
white-space: nowrap; |
||||
|
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
color: $--color-primary; |
||||
} |
||||
|
||||
&.active { |
||||
border-radius: 4px; |
||||
color: #fff; |
||||
background-color: $--color-primary; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.active { |
||||
border-radius: 4px; |
||||
color: #fff; |
||||
background-color: $--color-primary; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pagination { |
||||
margin-top: 20px; |
||||
text-align: center; |
||||
button,.number,.more,.el-input__inner{ |
||||
min-width: 32px !important; |
||||
height: 32px !important; |
||||
line-height: 32px; |
||||
color: #333 !important; |
||||
background-color: transparent !important; |
||||
border: 1px solid #ccc !important; |
||||
border-radius: 2px !important; |
||||
} |
||||
button i{ |
||||
color: #333; |
||||
} |
||||
.active{ |
||||
color: #fff !important; |
||||
background-color: $--color-primary !important; |
||||
} |
||||
margin-top: 20px; |
||||
text-align: center; |
||||
button, |
||||
.number, |
||||
.more, |
||||
.el-input__inner { |
||||
min-width: 32px !important; |
||||
height: 32px !important; |
||||
line-height: 32px; |
||||
color: #333 !important; |
||||
background-color: transparent !important; |
||||
border: 1px solid #ccc !important; |
||||
border-radius: 2px !important; |
||||
} |
||||
button i { |
||||
color: #333; |
||||
} |
||||
.active { |
||||
color: #fff !important; |
||||
background-color: $--color-primary !important; |
||||
} |
||||
} |
||||
|
||||
.el-table{ |
||||
border-radius: 4px; |
||||
th{ |
||||
background: #E8F0FF !important; |
||||
.cell{ |
||||
color: #222326; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
.el-checkbox{ |
||||
&:before{ |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
th, td{ |
||||
padding: 10px 0; |
||||
border-bottom-color: #E1E6F2; |
||||
} |
||||
&.el-table--striped .el-table__body tr.el-table__row--striped td{ |
||||
background-color: #FAFBFF; |
||||
} |
||||
.el-checkbox__inner{ |
||||
border-radius: 4px; |
||||
transition: none !important; |
||||
} |
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner{ |
||||
background-color: #FFFFFF; |
||||
border-color: #DCDFE6; |
||||
} |
||||
.el-switch__core{ |
||||
background-color: #bfbfbf; |
||||
} |
||||
.el-switch__label--right{ |
||||
z-index: 2; |
||||
position: absolute; |
||||
right: 8px; |
||||
margin-left: 0; |
||||
color: #fff !important; |
||||
} |
||||
.el-switch__label--right.is-active{ |
||||
left: 8px; |
||||
right: auto; |
||||
} |
||||
.el-switch__label--right span{ |
||||
font-size: 12px; |
||||
} |
||||
.el-button--text{ |
||||
padding: 0; |
||||
} |
||||
.el-table { |
||||
border-radius: 4px; |
||||
th { |
||||
background: #e8f0ff !important; |
||||
.cell { |
||||
color: #222326; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
.el-checkbox { |
||||
&:before { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
th, |
||||
td { |
||||
padding: 10px 0; |
||||
border-bottom-color: #e1e6f2; |
||||
} |
||||
&.el-table--striped .el-table__body tr.el-table__row--striped td { |
||||
background-color: #fafbff; |
||||
} |
||||
.el-checkbox__inner { |
||||
border-radius: 4px; |
||||
transition: none !important; |
||||
} |
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner { |
||||
background-color: #ffffff; |
||||
border-color: #dcdfe6; |
||||
} |
||||
.el-switch__core { |
||||
background-color: #bfbfbf; |
||||
} |
||||
.el-switch__label--right { |
||||
z-index: 2; |
||||
position: absolute; |
||||
right: 8px; |
||||
margin-left: 0; |
||||
color: #fff !important; |
||||
} |
||||
.el-switch__label--right.is-active { |
||||
left: 8px; |
||||
right: auto; |
||||
} |
||||
.el-switch__label--right span { |
||||
font-size: 12px; |
||||
} |
||||
.el-button--text { |
||||
padding: 0; |
||||
} |
||||
} |
||||
|
||||
.el-message { |
||||
padding: 11px 20px; |
||||
padding: 11px 20px; |
||||
|
||||
.el-message__icon { |
||||
font-size: 16px; |
||||
} |
||||
.el-message__icon { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.el-message__content { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
} |
||||
.el-message__content { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
} |
||||
|
||||
.el-icon-close { |
||||
font-size: 14px; |
||||
color: #92998d; |
||||
} |
||||
.el-icon-close { |
||||
font-size: 14px; |
||||
color: #92998d; |
||||
} |
||||
|
||||
.el-message--success { |
||||
border: 1px solid #B7EB8F; |
||||
background: #F6FFED; |
||||
.el-message--success { |
||||
border: 1px solid #b7eb8f; |
||||
background: #f6ffed; |
||||
|
||||
.el-message__icon { |
||||
color: #00c700; |
||||
.el-message__icon { |
||||
color: #00c700; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-message--warning { |
||||
border: 1px solid #FFE58F; |
||||
background: #FFFBE6; |
||||
.el-message--warning { |
||||
border: 1px solid #ffe58f; |
||||
background: #fffbe6; |
||||
|
||||
.el-message__icon { |
||||
color: #ffa900; |
||||
.el-message__icon { |
||||
color: #ffa900; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-message-box { |
||||
padding-bottom: 24px; |
||||
padding-bottom: 24px; |
||||
|
||||
.el-message-box__header { |
||||
padding: 32px 32px 12px 50px; |
||||
.el-message-box__header { |
||||
padding: 32px 32px 12px 50px; |
||||
|
||||
span { |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
font-weight: 500; |
||||
span { |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-message-box__status { |
||||
top: -30px; |
||||
} |
||||
.el-message-box__status { |
||||
top: -30px; |
||||
} |
||||
|
||||
.el-message-box__status + .el-message-box__message { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
} |
||||
.el-message-box__status + .el-message-box__message { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
} |
||||
|
||||
.el-message-box__btns { |
||||
padding-right: 32px; |
||||
.el-message-box__btns { |
||||
padding-right: 32px; |
||||
|
||||
&.el-icon-warning { |
||||
color: #ffa900; |
||||
&.el-icon-warning { |
||||
color: #ffa900; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:not(.normal) { |
||||
.el-button--primary { |
||||
color: #606266; |
||||
background: #fff; |
||||
border-color: #DCDFE6; |
||||
&:not(.normal) { |
||||
.el-button--primary { |
||||
color: #606266; |
||||
background: #fff; |
||||
border-color: #dcdfe6; |
||||
|
||||
&:hover { |
||||
color: $--color-primary; |
||||
border-color: #efbdbb; |
||||
background-color: #fae9e8; |
||||
} |
||||
&:hover { |
||||
color: $--color-primary; |
||||
border-color: #efbdbb; |
||||
background-color: #fae9e8; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-dialog__wrapper { |
||||
.el-dialog { |
||||
border-radius: 4px; |
||||
.el-dialog { |
||||
border-radius: 4px; |
||||
|
||||
.el-dialog__header { |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
||||
.el-dialog__header { |
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
||||
.el-dialog__title { |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
} |
||||
} |
||||
.el-dialog__title { |
||||
font-size: 16px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
} |
||||
} |
||||
|
||||
.el-dialog__footer { |
||||
padding: 10px 16px; |
||||
border-top: 1px solid rgba(0, 0, 0, 0.06); |
||||
.el-dialog__footer { |
||||
padding: 10px 16px; |
||||
border-top: 1px solid rgba(0, 0, 0, 0.06); |
||||
|
||||
.el-button { |
||||
font-size: 14px; |
||||
border-radius: 4px; |
||||
border-color: rgba(0, 0, 0, 0.15); |
||||
} |
||||
.el-button { |
||||
font-size: 14px; |
||||
border-radius: 4px; |
||||
border-color: rgba(0, 0, 0, 0.15); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-tooltip__popper { |
||||
width: 300px; |
||||
width: 300px; |
||||
} |
||||
.el-tooltip__popper.is-dark { |
||||
padding: 18px 20px; |
||||
color: #606266; |
||||
line-height: 1.8; |
||||
background-color: #fff; |
||||
border: .0625rem solid #ebeef5; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 4px; |
||||
padding: 18px 20px; |
||||
color: #606266; |
||||
line-height: 1.8; |
||||
background-color: #fff; |
||||
border: 0.0625rem solid #ebeef5; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 4px; |
||||
} |
||||
.el-tooltip__popper[x-placement^="top"] { |
||||
.popper__arrow { |
||||
border-top-color: #fff; |
||||
&:after { |
||||
border-top-color: #fff; |
||||
.el-tooltip__popper[x-placement^='top'] { |
||||
.popper__arrow { |
||||
border-top-color: #fff; |
||||
&:after { |
||||
border-top-color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media(max-width: 1600px) { |
||||
.el-table { |
||||
.el-switch__label--right.is-active { |
||||
left: 8px; |
||||
@media (max-width: 1600px) { |
||||
.el-table { |
||||
.el-switch__label--right.is-active { |
||||
left: 8px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.empty{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 50px 0; |
||||
text-align: center; |
||||
img{ |
||||
width: 471px; |
||||
} |
||||
p{ |
||||
margin-top: 40px; |
||||
font-size: 18px; |
||||
color: rgba(0, 0, 0, 0.25); |
||||
} |
||||
} |
||||
.empty { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 50px 0; |
||||
text-align: center; |
||||
img { |
||||
width: 471px; |
||||
} |
||||
p { |
||||
margin-top: 40px; |
||||
font-size: 18px; |
||||
color: rgba(0, 0, 0, 0.25); |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue