23 changed files with 2568 additions and 881 deletions
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<!--标题按钮部分开始--> |
|||
<div class="tab-header webtop"> |
|||
<!--标题--> |
|||
<div>{{ viewTitle }}</div> |
|||
<!--start 按钮部分开始 :icon="item.icon"--> |
|||
<div> |
|||
<el-button v-for="item in btnList" :key="item.btnKey" :type="item.type" :size="item.size" :disabled="btndisabled" @click="btnHandle(item.btnKey)"> |
|||
<svg-icon v-if="item.icon" :iconClass="item.icon"/>{{ item.btnLabel }} |
|||
</el-button> |
|||
</div> |
|||
<!--end 按钮部分结束--> |
|||
</div> |
|||
<!--标题按钮部分结束--> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ButtonBar', |
|||
props: { |
|||
viewTitle: String, |
|||
btndisabled: { type: Boolean, default: false } |
|||
}, |
|||
data() { |
|||
return { |
|||
currentPath: this.$route.path, |
|||
userSid: this.$store.getters.userInfo ? this.$store.getters.userInfo.userSid : '', |
|||
btnList: [ |
|||
{ |
|||
type: 'primary', |
|||
size: 'small', |
|||
icon: 'plus', |
|||
btnKey: 'toAdd', |
|||
btnLabel: '新增' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
size: 'small', |
|||
icon: 'edit', |
|||
btnKey: 'toEdit', |
|||
btnLabel: '编辑' |
|||
}, |
|||
{ |
|||
type: 'primary', |
|||
size: 'small', |
|||
icon: 'submit', |
|||
btnKey: 'doSubmit', |
|||
btnLabel: '提交' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
size: 'small', |
|||
icon: 'del', |
|||
btnKey: 'doDel', |
|||
btnLabel: '删除' |
|||
}, |
|||
{ |
|||
type: 'success', |
|||
size: 'small', |
|||
icon: 'Import', |
|||
btnKey: 'doImport', |
|||
btnLabel: '导入' |
|||
}, |
|||
{ |
|||
type: 'success', |
|||
size: 'small', |
|||
icon: 'export', |
|||
btnKey: 'build', |
|||
btnLabel: '导出' |
|||
}, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
created: function() { |
|||
this.initPermission() |
|||
}, |
|||
methods: { |
|||
initPermission() { |
|||
console.log('*******************当前路径 ' + this.currentPath) |
|||
console.log('*******************当前用户 ' + this.userSid) |
|||
const params = { |
|||
currentPath: this.currentPath, |
|||
userSid: this.userSid |
|||
} |
|||
// req |
|||
// .buttonPermission(params) |
|||
// .then(resp => { |
|||
// if (resp.success) { |
|||
// this.btnList = resp.data |
|||
// } |
|||
// }) |
|||
// .catch(e => { |
|||
// console.log('请求权限按钮组出错：' + e) |
|||
// }) |
|||
}, |
|||
btnHandle(btnKey) { |
|||
this.$emit('btnhandle', btnKey) |
|||
}, |
|||
setButtonList(value) { |
|||
this.btnList = value |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon { |
|||
width: 1em; |
|||
height: 1em; |
|||
vertical-align: -0.16em; |
|||
fill: currentColor; |
|||
overflow: hidden; |
|||
margin-right: 3px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<div class="tab-header"> |
|||
<div class="tab-btn clearfix"> |
|||
<div class="search-from"> |
|||
<slot name="from" /> |
|||
</div> |
|||
<div class="search-bth"> |
|||
<slot name="btn" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
search: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
form: {}, |
|||
showsearch: false |
|||
} |
|||
}, |
|||
mounted() {}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/style/variables.scss"; |
|||
|
|||
.tab-header { |
|||
background-color: $search-bg; |
|||
padding: 5px 20px; |
|||
|
|||
.tab-search { |
|||
padding: 9px 0; |
|||
} |
|||
|
|||
.tab-btn { |
|||
.search-from { |
|||
float: left; |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
.search-bth { |
|||
float: right; |
|||
|
|||
} |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0px; |
|||
|
|||
.el-input__icon, |
|||
.el-form-item__content { |
|||
line-height: 32px; |
|||
} |
|||
|
|||
.el-input__inner, |
|||
.el-form-item__label { |
|||
height: 36px; |
|||
line-height: 36px; |
|||
color: $text-color; |
|||
} |
|||
|
|||
.el-select .el-input.is-focus .el-input__inner { |
|||
border-color: $border-color; |
|||
} |
|||
} |
|||
|
|||
.el-button{ |
|||
padding: 8px 20px; |
|||
background-color: $color-primary; |
|||
color: $text-color-inverse; |
|||
} |
|||
.el-select { |
|||
width: 150px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
//finginvoiceapply添加部分 |
|||
.invoiceform { |
|||
.topline { |
|||
margin-bottom: 16px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0 !important; |
|||
|
|||
.el-form-item__content { |
|||
margin-left: 0 !important; |
|||
|
|||
.el-input { |
|||
width: 120% !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-input__inner { |
|||
border-style: none; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
//第一行 |
|||
.lineone { |
|||
border-bottom: 2px solid #e0e3eb; |
|||
} |
|||
|
|||
.invoiceadd { |
|||
margin: 22px 28px; |
|||
border-top: 2px solid #e0e3eb; |
|||
|
|||
.el-form-item__label { |
|||
width: auto !important; |
|||
} |
|||
|
|||
.el-row { |
|||
height: 40px; |
|||
border-left: 2px solid #e0e3eb; |
|||
|
|||
.addlabel { |
|||
height: 100%; |
|||
border-right: 2px solid #e0e3eb; |
|||
border-bottom: 2px solid #e0e3eb; |
|||
|
|||
.el-form-item { |
|||
height: 100%; |
|||
margin-bottom: 0; |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
} |
|||
} |
|||
|
|||
.addinput { |
|||
height: 100%; |
|||
padding: 0 40px 0 10px; |
|||
border-right: 2px solid #e0e3eb !important; |
|||
border-bottom: 2px solid #e0e3eb !important; |
|||
|
|||
.el-form-item { |
|||
height: 100%; |
|||
margin-bottom: 0; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
line-height: 38px; |
|||
margin: 0 !important; |
|||
|
|||
.el-input { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.el-input__inner { |
|||
height: 33px; |
|||
} |
|||
} |
|||
|
|||
.el-select { |
|||
width: 100% !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.addlabelTwo { |
|||
height: 100%; |
|||
border-right: 2px solid #e0e3eb; |
|||
|
|||
.el-form-item { |
|||
height: 100%; |
|||
margin-bottom: 0; |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
} |
|||
} |
|||
|
|||
.addlabelThree { |
|||
height: 100%; |
|||
border-right: 2px solid #e0e3eb; |
|||
border-bottom: 2px solid #e0e3eb; |
|||
text-align: center; |
|||
line-height: 40px; |
|||
|
|||
.el-form-item { |
|||
height: 100%; |
|||
margin-bottom: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.el-form-item__label { |
|||
padding: 0 !important; |
|||
} |
|||
} |
|||
|
|||
.addlabelFour { |
|||
height: 100%; |
|||
border-right: 2px solid #e0e3eb; |
|||
border-bottom: 2px solid #e0e3eb; |
|||
line-height: 40px; |
|||
padding: 0 10px; |
|||
|
|||
.el-form-item { |
|||
height: 100%; |
|||
margin-bottom: 0; |
|||
|
|||
.el-form-item__content { |
|||
margin-left: 5px !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.addinputRadio { |
|||
height: 100%; |
|||
border-right: 2px solid #e0e3eb; |
|||
border-bottom: 2px solid #e0e3eb; |
|||
line-height: 40px; |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.lastchild { |
|||
border-bottom: 2px solid #e0e3eb; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.tabletitle { |
|||
height: 40px; |
|||
width: 100%; |
|||
padding: 0 10px; |
|||
background: #018ad2; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: white; |
|||
|
|||
.el-button--primary { |
|||
background: #0476aa; |
|||
} |
|||
|
|||
} |
|||
|
|||
//finreceipt添加部分 |
|||
.receiptadd { |
|||
|
|||
.topline { |
|||
margin-bottom: 16px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0 !important; |
|||
|
|||
.el-form-item__content { |
|||
margin-left: 0 !important; |
|||
|
|||
.el-input { |
|||
width: 120% !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-input__inner { |
|||
border-style: none; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
//第一行 |
|||
.lineone { |
|||
border-bottom: 2px solid #e0e3eb; |
|||
} |
|||
|
|||
//中间的部分 |
|||
.linetwo, .linethree { |
|||
.el-col-24 { |
|||
border-bottom: 2px solid #e0e3eb; |
|||
} |
|||
|
|||
.grid-content { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
} |
|||
} |
|||
|
|||
.linetwo { |
|||
.el-col { |
|||
padding: 0 32px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tabletitle .addbtn { |
|||
width: 84px; |
|||
background: #0476aa; |
|||
border: 0; |
|||
outline: none; |
|||
padding: 9px 12px; |
|||
color: #ffffff; |
|||
font-size: 14px; |
|||
border-radius: 3px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.tabletitle .addbtn:hover { |
|||
border-color: #0476aa; |
|||
background-color: #34a1db; |
|||
} |
|||
|
|||
.tableTotal { |
|||
padding: 20px 0; |
|||
font-weight: bold; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.tableinput .el-input__inner { |
|||
border-style: none; |
|||
text-align: center; |
|||
} |
|||
|
|||
.inforow { |
|||
height: 120px !important; |
|||
|
|||
.el-form-item { |
|||
height: 100%; |
|||
margin-bottom: 0; |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
align-items: center; |
|||
} |
|||
|
|||
.infocol { |
|||
height: 100%; |
|||
border-right: 2px solid #e0e3eb; |
|||
border-bottom: 2px solid #e0e3eb; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
|
|||
.collineone, .collinetwo { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.collineone, .collinetwo { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blockone, .blocktwo, .blockfour, .blockfive { |
|||
min-width: 142px; |
|||
} |
|||
|
|||
.blockthree, .blocksix { |
|||
min-width: 266px; |
|||
} |
|||
@ -0,0 +1,40 @@ |
|||
.e-table { |
|||
width: 100%; |
|||
padding: 0 30px; |
|||
|
|||
tr:first-child th { |
|||
background-color: #c1f4cd; |
|||
} |
|||
|
|||
tr { |
|||
td { |
|||
border: 1px solid #e6e9f0; |
|||
border-right: 0; |
|||
border-bottom: 0; |
|||
padding: 10px 20px; |
|||
} |
|||
|
|||
td:last-child { |
|||
border-right: 1px solid #e6e9f0; |
|||
} |
|||
} |
|||
|
|||
tr:last-child { |
|||
td { |
|||
border-bottom: 1px solid #e6e9f0; |
|||
} |
|||
} |
|||
|
|||
td:nth-child(2n-1) { |
|||
text-align: right; |
|||
} |
|||
|
|||
td:nth-child(2n) { |
|||
text-align: left; |
|||
} |
|||
} |
|||
|
|||
.tableinput .el-input__inner { |
|||
border-style: none; |
|||
text-align: center; |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
.listconadd .title { |
|||
text-align: center; |
|||
font-size: 28px; |
|||
//line-height: 90px; |
|||
} |
|||
|
|||
.listaddtop { |
|||
padding: 0 212px; |
|||
border-bottom: 2px solid #e0e3eb; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
line-height: 34px; |
|||
|
|||
span { |
|||
padding: 0 15px; |
|||
} |
|||
} |
|||
|
|||
.listconadd .demo-ruleForm { |
|||
padding: 22px 28px; |
|||
} |
|||
|
|||
.el-collapse-item__header { |
|||
.el-icon-arrow-right:before { |
|||
content: ""; |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
|
|||
.demo-ruleForm table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
border: 2px solid #e0e3eb; |
|||
border-spacing: 0; |
|||
//text-align: right; |
|||
td { |
|||
border-right: 2px solid #e0e3eb; |
|||
border-bottom: 2px solid #e0e3eb; |
|||
border-top: 2px solid #e0e3eb; |
|||
} |
|||
|
|||
tr { |
|||
height: 40px; |
|||
} |
|||
|
|||
.el-form-item { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.el-input { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
.tleftb { |
|||
text-align: right; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 40px !important; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.icon { |
|||
color: #e84026; |
|||
margin-right: 4px; |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
//finginvoiceapply页面个别按钮 |
|||
.applyseaech { |
|||
padding: 0 34px !important; |
|||
margin-right: 0 !important; |
|||
} |
|||
|
|||
//finreceipt页面个别按钮 |
|||
.recpicker { |
|||
width: 154px !important; |
|||
} |
|||
|
|||
.recselect { |
|||
padding: 0 34px !important; |
|||
} |
|||
|
|||
// |
|||
.iteminput { |
|||
padding: 0 49px !important; |
|||
} |
|||
|
|||
@ -0,0 +1,38 @@ |
|||
.el-table { |
|||
.el-table__header { |
|||
tr th { |
|||
background: #edf1f7; |
|||
color: #333333; |
|||
padding: 8px 0; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-table { |
|||
.el-table__row { |
|||
.cell { |
|||
line-height:15px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-table { |
|||
.el-table__body { |
|||
tr td { |
|||
padding: 6px 0 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table-describe { |
|||
border: 1px solid #dfe4ed; |
|||
border-bottom: 0 solid #dfe4ed; |
|||
|
|||
h4 { |
|||
float: left; |
|||
margin: 0; |
|||
line-height: 34px; |
|||
padding: 0 15px; |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
.el-tabs--card{ |
|||
.el-tabs__header{ |
|||
.el-tabs__nav-scroll{ |
|||
padding-left: 3px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #018ad2; |
|||
.el-tabs__nav { |
|||
border: none; |
|||
} |
|||
.el-tabs__item { |
|||
border: 1px solid #dfe4ed; |
|||
margin-right: 12px; |
|||
margin-left: 2px; |
|||
} |
|||
.el-tabs__item:first-child { |
|||
border-left: 1px solid #dfe4ed; |
|||
} |
|||
.el-tabs__item.is-active{ |
|||
border-bottom-color: #018ad2; |
|||
background-color: #018ad2; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
.el-image .el-image__inner--center{ |
|||
top: 0; |
|||
left: 0; |
|||
transform: none; |
|||
} |
|||
|
|||
.tablerow-click{ |
|||
color: #007FFF; |
|||
cursor: pointer; |
|||
} |
|||
// cover some element-ui styles |
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
|
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block |
|||
} |
|||
} |
|||
|
|||
// to fix el-date-picker css style |
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,435 @@ |
|||
@import './variables.scss'; |
|||
@import './mixin.scss'; |
|||
@import './transition.scss'; |
|||
@import './element-ui.scss'; |
|||
@import './sidebar.scss'; |
|||
@import './table.scss'; |
|||
@import './el-form.scss'; |
|||
@import './el-search.scss'; |
|||
@import './e-row.scss'; |
|||
@import './e-table.scss'; |
|||
@import './element-table.scss'; |
|||
@import './element-tabs.scss'; |
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
.bg-primary{ |
|||
background-color: $color-primary !important; |
|||
} |
|||
// main-container global css |
|||
.container{ |
|||
min-height: 100%; |
|||
height: 100%; |
|||
background-color: #FFFFFF; |
|||
box-sizing: border-box; |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.fl{ |
|||
float: left; |
|||
} |
|||
.fr{ |
|||
float: right; |
|||
} |
|||
.text-center{ |
|||
text-align: center; |
|||
} |
|||
.color-red{ |
|||
color: red !important; |
|||
} |
|||
|
|||
.pd-b10{ |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
.pd-y40 { |
|||
padding: 40px 0; |
|||
} |
|||
|
|||
.pd-y20 { |
|||
padding: 20px 0; |
|||
} |
|||
|
|||
.fs20 { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
// 页面上的button按钮 |
|||
.app-container { |
|||
.el-button--medium { |
|||
padding: 10px 14px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.el-button--small { |
|||
padding: 8px 12px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
// 添加样式 |
|||
.app-container { |
|||
margin: 5px 0 5px 0; |
|||
background-color: #fff; |
|||
} |
|||
// 设置了滚动区域 |
|||
.main-content{ overflow-x: hidden;overflow-y: auto;height: calc(100vh - 200px);padding: 0 20px;} |
|||
.listcon{height: calc(100vh - 425px);overflow-y: auto;overflow-x: hidden;} |
|||
.listconadd{height: calc(100vh - 200px);overflow-y: auto;overflow-x: hidden;} |
|||
.listconadd{ |
|||
.titwu { |
|||
font-size: 28px; |
|||
text-align: center; |
|||
padding: 30px 0 20px 0; |
|||
} |
|||
} |
|||
.listconsub { |
|||
height: calc(100vh - 310px); |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.listconsubjxs { |
|||
height: calc(100vh - 300px); |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
// 搜索的 |
|||
.webtop { |
|||
// position: fixed;top: 110px;width: calc(100% - 240px);z-index: 6000; |
|||
background-color: #fff; |
|||
display: flex !important; |
|||
flex-direction: row; |
|||
justify-content: space-between !important; |
|||
align-items: center; |
|||
margin-bottom: 0px !important; |
|||
font-size: 20px; |
|||
} |
|||
|
|||
// 设置了页面头部的内边距和背景色 |
|||
.tab-header { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
// 设置了搜索条件里的样式 |
|||
.search { |
|||
.tab-header { |
|||
.el-form-item { |
|||
margin-right: 16px; |
|||
.el-form-item__label { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.filter-item { |
|||
padding: 0 10px; |
|||
width: 220px; |
|||
display: inline-block; |
|||
} |
|||
|
|||
// 设置列表页面内容布局 |
|||
.listtop { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 0 0 15px; |
|||
margin-top: 0; |
|||
border: 1px solid #dfe4ed; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
} |
|||
|
|||
.listtop .tit { |
|||
font-weight: bold; |
|||
font-size: 16px |
|||
} |
|||
|
|||
.listtop .pagination { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.pages { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: flex-end; |
|||
padding: 0 0 15px 15px; |
|||
} |
|||
.pages .tit{font-weight: bold;} |
|||
.pages .pagination{margin: 0;} |
|||
// .formadd{padding: 20px ;} |
|||
// .listeltable{overflow-y: auto;height: calc(100vh - 420px);} |
|||
|
|||
.formadd { |
|||
padding: 10px 40px 0 40px; |
|||
font-size: 16px; |
|||
// height: calc(100vh - 200px);overflow-y: auto; |
|||
.title { |
|||
padding: 12px; |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
background-color: $header-bg; |
|||
text-align: left; |
|||
color: #ffffff; |
|||
} |
|||
.first_row{ |
|||
border-top: 1px solid $table-border-color; |
|||
} |
|||
.el-row { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
border-left: 1px solid $table-border-color; |
|||
.el-col { |
|||
border-right: 1px solid $table-border-color; |
|||
border-bottom: 1px solid $table-border-color; |
|||
padding: 0 15px; |
|||
min-height: 42px; |
|||
line-height: 1; |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0; |
|||
line-height: 42px; |
|||
// .addinputw{width: 400px;} |
|||
.addinputw { |
|||
width: 80%; |
|||
line-height: 42px; |
|||
} |
|||
.el-input__inner { |
|||
height: 36px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.footer{margin: 20px;} |
|||
} |
|||
|
|||
|
|||
.formaddcopy02 { |
|||
padding: 10px 40px 0 40px; |
|||
.title { |
|||
padding: 12px; |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
background-color: #0294d7; |
|||
color: #ffffff; |
|||
text-align: left; |
|||
} |
|||
|
|||
.el-row { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
border-left: 1px solid $table-border-color; |
|||
|
|||
.el-col { |
|||
border-right: 1px solid $table-border-color; |
|||
border-bottom: 1px solid $table-border-color; |
|||
min-height: 42px; |
|||
padding: 0 15px; |
|||
line-height: 42px; |
|||
position: relative; |
|||
.span-sty { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
line-height: 42px; |
|||
text-align: right; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
font-weight: 600; |
|||
width: 70px; |
|||
padding-right: 5px; |
|||
border-right: 1px solid #e0e3eb; |
|||
} |
|||
|
|||
.el-form-item { |
|||
margin-bottom: 0; |
|||
line-height: 42px; |
|||
.addinputw { |
|||
//padding: 5px 0; |
|||
width: 65%; |
|||
margin-left: 80px; |
|||
line-height: 42px; |
|||
} |
|||
|
|||
.addinputInfo { |
|||
margin-left: 80px; |
|||
line-height: 42px; |
|||
} |
|||
|
|||
.el-input__inner { |
|||
height: 36px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.footer { |
|||
margin: 20px; |
|||
} |
|||
} |
|||
|
|||
.forminfo { |
|||
padding: 10px 40px 0 40px; |
|||
font-size: 16px; |
|||
.title { |
|||
padding: 12px; |
|||
font-weight: bold; |
|||
font-size: 16px; |
|||
background-color: $header-bg; |
|||
text-align: left; |
|||
color: #ffffff; |
|||
} |
|||
.el-row { |
|||
display:flex; |
|||
flex-wrap: wrap; |
|||
border-left: 1px solid $table-border-color; |
|||
.trightb{ text-align: right;font-weight: bold;color: #606266; } |
|||
.tleft{ text-align: left; } |
|||
.el-col{ |
|||
border-right: 1px solid $table-border-color; |
|||
border-bottom: 1px solid $table-border-color; |
|||
padding: 0 15px 0 15px !important; |
|||
min-height: 50px; |
|||
line-height: 50px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
} |
|||
.footer{margin: 20px;} |
|||
} |
|||
|
|||
.el-form-item__error { |
|||
z-index: 100; |
|||
} |
|||
.bluezi{color: $header-bg; cursor: pointer} |
|||
// 经销商添加样式 |
|||
.titcon{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
background-color: #0294d7; |
|||
flex: 3; |
|||
} |
|||
|
|||
.titcon .title { |
|||
padding: 10px; |
|||
font-weight: bold; |
|||
font-size: 20px; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.titcon .baocun { |
|||
text-align: right; |
|||
flex: 2; |
|||
padding: 5px 20px; |
|||
} |
|||
|
|||
.addinputwda { |
|||
width: 600px; |
|||
} |
|||
|
|||
//.searchcon{margin: 0px 0 10px 0;} |
|||
//.searchcon .searchbtn{margin: 10px 0;border: #2cab69 1px solid;color: #2cab69;} |
|||
// 隐藏显示按钮 |
|||
.main-content { |
|||
.searchcon { |
|||
.searchbtn { |
|||
margin: 5px 0; |
|||
border: #2cab69 1px solid; |
|||
color: #2cab69; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.search .btn { |
|||
padding: 5px 0; |
|||
border: 1px solid #e0e3eb; |
|||
text-align: center; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
|
|||
// 弹出窗口按钮 |
|||
.btnCancel{ |
|||
background: #e84026 !important;outline: none;border: none;color: #fff !important; |
|||
} |
|||
.btnCancel:hover{ |
|||
background: #ed6651 !important; |
|||
} |
|||
.btnFalses{ |
|||
background: #2cab69 !important;outline: none;border: none; |
|||
} |
|||
.btnFalses:hover{ |
|||
background: #3dc47e !important; |
|||
} |
|||
.btntopblueline{background-color: #066bc9 !important;} |
|||
.btntopblueline:hover{background-color: #34a1db !important;} |
|||
.btntophui{background-color: #cccccc !important;} |
|||
.btntophui:hover{background-color: #d6d6d6 !important;} |
|||
.bordertopline{ border-top: 1px solid $table-border-color;} |
|||
.lookimg img{width: 250px;margin: 10px;} |
|||
.listimg{width: 80px;} |
|||
@ -0,0 +1,28 @@ |
|||
@mixin clearfix { |
|||
&:after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
|
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
|
|||
@mixin relative { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
@ -0,0 +1,262 @@ |
|||
#app { |
|||
background-color: #f7f9fc; |
|||
|
|||
.main-container { |
|||
height: 100vh; |
|||
transition: margin-left .28s; |
|||
padding-left: $sideBarWidth; |
|||
padding-top: 60px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
//.TagsView{ |
|||
// height: 50px; |
|||
//} |
|||
.home-box{ |
|||
position: fixed; |
|||
top: 60px; |
|||
left: 0; |
|||
background-color: $menuBg; |
|||
border: 1px solid $menuHover; |
|||
line-height: 40px; |
|||
width: 210px; |
|||
z-index: 1000; |
|||
a{ |
|||
display: inline-block; |
|||
line-height: 40px; |
|||
box-sizing: border-box; |
|||
width: 50%; |
|||
text-align: center; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
a:last-child{ |
|||
border:0; |
|||
background-color: $menuHover; |
|||
} |
|||
} |
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: $sideBarWidth !important; |
|||
background-color: $menuBg; |
|||
height: calc(100% - 60px) ; |
|||
position: absolute; |
|||
font-size: 0px; |
|||
top: 60px; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 8; |
|||
overflow: hidden; |
|||
padding-top: 40px; |
|||
|
|||
// reset element-ui css |
|||
.horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
|
|||
.scrollbar-wrapper { |
|||
height: calc(100% - 40px) ; //此高度是100%减去页面底部的栏高 |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
.el-scrollbar__bar.is-vertical { |
|||
right: 0px; |
|||
} |
|||
|
|||
.el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
|
|||
&.has-logo { |
|||
.el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
|
|||
.is-horizontal { |
|||
display: none; |
|||
} |
|||
|
|||
a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
.sub-el-icon { |
|||
margin-right: 12px; |
|||
margin-left: -2px; |
|||
} |
|||
|
|||
.el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
// menu hover |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
.el-submenu__title i{ |
|||
color: #FFFFFF; |
|||
} |
|||
.is-active>.el-submenu__title { |
|||
color: $subMenuActiveText !important; |
|||
} |
|||
|
|||
& .nest-menu .el-submenu>.el-submenu__title, |
|||
& .el-submenu .el-menu-item { |
|||
min-width: $sideBarWidth !important; |
|||
background-color: $subMenuBg !important; |
|||
|
|||
&:hover { |
|||
background-color: $subMenuHover !important; |
|||
} |
|||
} |
|||
& .el-menu-item.is-active { |
|||
background-color: $subMenuHover !important; |
|||
} |
|||
} |
|||
|
|||
// .hideSidebar { |
|||
// .sidebar-container { |
|||
// width: 54px !important; |
|||
// } |
|||
|
|||
// .main-container { |
|||
// margin-left: 54px; |
|||
// } |
|||
|
|||
// .submenu-title-noDropdown { |
|||
// padding: 0 !important; |
|||
// position: relative; |
|||
|
|||
// .el-tooltip { |
|||
// padding: 0 !important; |
|||
|
|||
// .svg-icon { |
|||
// margin-left: 20px; |
|||
// } |
|||
|
|||
// .sub-el-icon { |
|||
// margin-left: 19px; |
|||
// } |
|||
// } |
|||
// } |
|||
|
|||
// .el-submenu { |
|||
// overflow: hidden; |
|||
|
|||
// &>.el-submenu__title { |
|||
// padding: 0 !important; |
|||
|
|||
// .svg-icon { |
|||
// margin-left: 20px; |
|||
// } |
|||
|
|||
// .sub-el-icon { |
|||
// margin-left: 19px; |
|||
// } |
|||
|
|||
// .el-submenu__icon-arrow { |
|||
// display: none; |
|||
// } |
|||
// } |
|||
// } |
|||
|
|||
// .el-menu--collapse { |
|||
// .el-submenu { |
|||
// &>.el-submenu__title { |
|||
// &>span { |
|||
// height: 0; |
|||
// width: 0; |
|||
// overflow: hidden; |
|||
// visibility: hidden; |
|||
// display: inline-block; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
|
|||
.el-menu--collapse .el-menu .el-submenu { |
|||
min-width: $sideBarWidth !important; |
|||
} |
|||
|
|||
// mobile responsive |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0px; |
|||
} |
|||
|
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: $sideBarWidth !important; |
|||
} |
|||
|
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-$sideBarWidth, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.withoutAnimation { |
|||
|
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// when menu collapsed |
|||
.el-menu--vertical { |
|||
&>.el-menu { |
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
.sub-el-icon { |
|||
margin-right: 12px; |
|||
margin-left: -2px; |
|||
} |
|||
} |
|||
|
|||
.nest-menu .el-submenu>.el-submenu__title, |
|||
.el-menu-item { |
|||
&:hover { |
|||
// you can use $subMenuHover |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
// the scroll bar appears when the subMenu is too long |
|||
>.el-menu--popup { |
|||
max-height: 100vh; |
|||
overflow-y: auto; |
|||
|
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
.container{ |
|||
/* 头 */ |
|||
.el-table thead{ |
|||
color: $text-color; |
|||
} |
|||
.el-table .cell{ |
|||
a{ |
|||
display: block; |
|||
color: $table-a-color; |
|||
} |
|||
.el-button--text{ |
|||
color: $table-a-color; |
|||
} |
|||
} |
|||
.el-table td, .el-table th{ |
|||
padding: 8px 0; |
|||
} |
|||
.el-table.is-group th{ |
|||
background-color: $table-bg-color; |
|||
} |
|||
.el-table--enable-row-hover .el-table__body tr:hover>td { |
|||
background-color: $table-bg-color !important; |
|||
} |
|||
.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { |
|||
border-right: 1px solid $table-border-color; |
|||
} |
|||
.el-table td, .el-table th.is-leaf{ |
|||
border-bottom: 1px solid $table-border-color; |
|||
} |
|||
.table-fixed { |
|||
.el-table__fixed-right { |
|||
height: 100% !important; //设置高优先，以覆盖内联样式 |
|||
} |
|||
} |
|||
} |
|||
|
|||
.children-box { |
|||
padding: 10px; |
|||
.table-header { |
|||
padding: 0 20px 5px 20px; |
|||
border-bottom: 2px solid $border-color; |
|||
.el-page-header { |
|||
line-height: 40px; |
|||
font-weight: 500; |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
// global transition css |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
// 行为色 |
|||
$color-primary: #018ad2; |
|||
$color-success: #4cd964; |
|||
$color-warning: #f0ad4e; |
|||
$color-error: #dd524d; |
|||
// header |
|||
$header-bg:#0294d7; |
|||
// sidebar |
|||
$menuText: rgba($color: #FFFFFF, $alpha: 0.9); |
|||
$menuActiveText:#ffffff; |
|||
$subMenuActiveText:#ffffff; //https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg:#0294d7; |
|||
$menuHover:#087dba; |
|||
|
|||
$subMenuBg:#0294d7; |
|||
$subMenuHover:#087dba; |
|||
|
|||
$sideBarWidth: 210px; |
|||
|
|||
/* 表格的相关样式 */ |
|||
$search-bg:#edf1f7; // 表格搜索景色 |
|||
$table-bg-color:#edf1f7; // 表格背景 |
|||
$table-border-color:#e0e3eb; // 表格边框色 |
|||
// 文字 |
|||
$table-a-color:#018ad2; |
|||
/* 表格的相关样式 */ |
|||
|
|||
/* 边框颜色 */ |
|||
$border-color:#018ad2; |
|||
/* 文字基本颜色 */ |
|||
$text-color:#333;//基本色 |
|||
$text-color-inverse:#fff;//反色 |
|||
$text-color-grey:#999;//辅助灰色，如加载更多的提示信息 |
|||
$text-color-placeholder: #808080; |
|||
$text-color-disable:#c0c0c0; |
|||
$text-red: #d00000; |
|||
|
|||
$a-color:#018ad2; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
} |
|||
@ -1,4 +1,4 @@ |
|||
//sidebar |
|||
$menuBg:#304156; |
|||
$subMenuBg:#1f2d3d; |
|||
$menuHover:#001528; |
|||
$menuBg:#0294D7; |
|||
$subMenuBg:#0294D7; |
|||
$menuHover:#0294D7; |
|||
|
|||
Loading…
Reference in new issue