签到完成
This commit is contained in:
aixianling
@@ -17,13 +17,12 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
/**
|
||||
常用内外边距样式
|
||||
*/
|
||||
@each $padMar, $pm in (mar:margin, pad:padding) {
|
||||
@each $v in (8, 10, 16, 20, 32, 48, 56, 64, 80) {
|
||||
@each $pos, $p in (l:left, r:right, t:top, b:bottom) {
|
||||
.#{$padMar}-#{$pos+$v} {
|
||||
#{$pm}-#{$p}: #{$v}px
|
||||
}
|
||||
}
|
||||
@each $v in (8, 10, 16, 20, 32, 48, 56, 64, 80) {
|
||||
//gap
|
||||
.gap-#{$v} {
|
||||
gap: #{$v}px
|
||||
}
|
||||
@each $padMar, $pm in (mar:margin, pad:padding) {
|
||||
.#{$padMar}-#{$v} {
|
||||
#{$pm}: #{$v}px
|
||||
}
|
||||
@@ -37,6 +36,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
#{$pm}-left: #{$v}px;
|
||||
#{$pm}-right: #{$v}px;
|
||||
}
|
||||
@each $pos, $p in (l:left, r:right, t:top, b:bottom) {
|
||||
.#{$padMar}-#{$pos+$v} {
|
||||
#{$pm}-#{$p}: #{$v}px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,117 +1,113 @@
|
||||
<template>
|
||||
<div class="aibar" :style="{ marginBottom: marginBottom }" :class="[titlePosition === 'center' ? 'aibar-center' : '']">
|
||||
<div v-if="titlePosition === 'center'"></div>
|
||||
<div class="aibar" :style="{ marginBottom }" :class="{'aibar-cente':titlePosition === 'center',card}">
|
||||
<div v-if="titlePosition === 'center'"/>
|
||||
<div class="aibar-left" :class="[titlePosition === 'center' ? 'aibar-left__center' : '']">
|
||||
<template v-if="!isHasTitleSlot">{{ title }}</template>
|
||||
<template v-if="!$scopedSlots.title">{{ title }}</template>
|
||||
<slot name="title" v-else></slot>
|
||||
</div>
|
||||
<div class="aibar-right">
|
||||
<slot name="right"></slot>
|
||||
<slot v-if="$scopedSlots.right" name="right"/>
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AiBar',
|
||||
export default {
|
||||
name: 'AiBar',
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
|
||||
customCliker: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
marginBottom: {
|
||||
type: String,
|
||||
default: '16px'
|
||||
},
|
||||
|
||||
titlePosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
}
|
||||
props: {
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
isHasTitleSlot () {
|
||||
return this.$slots.title
|
||||
}
|
||||
customCliker: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
marginBottom: {
|
||||
type: String,
|
||||
default: '16px'
|
||||
},
|
||||
|
||||
titlePosition: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
card: Boolean
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.aibar {
|
||||
display: flex;
|
||||
.aibar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||
|
||||
&.card {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.aibar-left {
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aibar-left__center {
|
||||
position: relative;
|
||||
width: 556px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.aibar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
color: #5088FF;
|
||||
font-size: 12px;
|
||||
|
||||
.aibar-left {
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
i {
|
||||
line-height: 1;
|
||||
color: #5088FF;
|
||||
}
|
||||
|
||||
.aibar-left__center {
|
||||
position: relative;
|
||||
width: 556px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
line-height: 24px;
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.aibar-right {
|
||||
& > div, & > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #5088FF;
|
||||
font-size: 12px;
|
||||
margin-right: 20px;
|
||||
|
||||
i {
|
||||
line-height: 1;
|
||||
color: #5088FF;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
& > div, & > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aibar-center {
|
||||
height: auto;
|
||||
padding: 10px 0;
|
||||
.aibar-center {
|
||||
height: auto;
|
||||
padding: 10px 0;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
}
|
||||
h2 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,163 +1,165 @@
|
||||
<template>
|
||||
<section class="ai-dialog__wrapper">
|
||||
<el-dialog
|
||||
custom-class="ai-dialog"
|
||||
v-on="$listeners"
|
||||
v-if="isEmpty"
|
||||
:close-on-click-modal="closeOnClickModal"
|
||||
v-bind="$attrs"
|
||||
:destroy-on-close="destroyOnClose"
|
||||
:visible.sync="dialogVisible">
|
||||
<div class="ai-dialog__header" slot="title">
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="ai-dialog__content" :style="{'max-height': isScrool ? '500px' : 'auto'}">
|
||||
<div class="ai-dialog__content--wrapper" :style="{'padding-right': isScrool ? '8px' : '0'}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="customFooter" slot="footer">
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
<div v-else class="dialog-footer" slot="footer">
|
||||
<el-button @click="onCancel">取消</el-button>
|
||||
<el-button @click="onConfirm" type="primary" style="width: 92px;">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
custom-class="ai-dialog"
|
||||
v-on="$listeners"
|
||||
v-if="isEmpty"
|
||||
:close-on-click-modal="closeOnClickModal"
|
||||
v-bind="$attrs"
|
||||
:destroy-on-close="destroyOnClose"
|
||||
:visible.sync="dialogVisible">
|
||||
<div class="ai-dialog__header" slot="title">
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="ai-dialog__content" :style="{'max-height': isScrool ? '500px' : 'auto'}">
|
||||
<div class="ai-dialog__content--wrapper" :style="{'padding-right': isScrool ? '8px' : '0'}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="customFooter" slot="footer">
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
<div v-else class="dialog-footer" slot="footer">
|
||||
<el-button @click="onCancel">取消</el-button>
|
||||
<el-button @click="onConfirm" type="primary" style="width: 92px;">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AiDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
customFooter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
'close-on-click-modal': {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
destroyOnClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
export default {
|
||||
name: 'AiDialog',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
customFooter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
'close-on-click-modal': {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
destroyOnClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
isScrool: true,
|
||||
isEmpty: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
isScrool: true,
|
||||
isEmpty: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
visible: {
|
||||
handler (val) {
|
||||
this.dialogVisible = val
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val) {
|
||||
this.dialogVisible = val
|
||||
|
||||
// if (val) {
|
||||
// this.$nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// this.isScrool = document.querySelector('.ai-dialog__content') && document.querySelector('.ai-dialog__content').clientHeight >= 500
|
||||
// }, 100)
|
||||
// })
|
||||
// }
|
||||
// if (val) {
|
||||
// this.$nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// this.isScrool = document.querySelector('.ai-dialog__content') && document.querySelector('.ai-dialog__content').clientHeight >= 500
|
||||
// }, 100)
|
||||
// })
|
||||
// }
|
||||
|
||||
if (this.destroyOnClose && !val) {
|
||||
setTimeout(() => {
|
||||
this.isEmpty = false
|
||||
if (this.destroyOnClose && !val) {
|
||||
setTimeout(() => {
|
||||
this.isEmpty = false
|
||||
|
||||
setTimeout(() => {
|
||||
this.isEmpty = true
|
||||
}, 50)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setTimeout(() => {
|
||||
this.isEmpty = true
|
||||
}, 50)
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onCancel () {
|
||||
this.$emit('update:visible', false)
|
||||
this.$emit('onCancel')
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.$emit('update:visible', false)
|
||||
this.$emit('onCancel')
|
||||
this.$emit('cancel')
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
this.$emit('onConfirm')
|
||||
}
|
||||
}
|
||||
}
|
||||
onConfirm() {
|
||||
this.$emit('onConfirm')
|
||||
this.$emit('confirm')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.ai-dialog {
|
||||
margin: 0!important;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.ai-dialog {
|
||||
margin: 0 !important;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 40px 20px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 20px 40px 20px;
|
||||
}
|
||||
|
||||
.ai-dialog__content {
|
||||
overflow-y: auto;
|
||||
padding-bottom: 4px;
|
||||
.ai-dialog__content {
|
||||
overflow-y: auto;
|
||||
padding-bottom: 4px;
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
}
|
||||
.ai-dialog__content--wrapper {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
}
|
||||
|
||||
.ai-dialog__header {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
.ai-dialog__header {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
background: #F3F6F9;
|
||||
text-align: center;
|
||||
.el-dialog__footer {
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
background: #F3F6F9;
|
||||
text-align: center;
|
||||
|
||||
& + .el-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
& + .el-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 92px!important;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
width: 92px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 24px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.el-dialog__headerbtn {
|
||||
top: 24px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="ai-card">
|
||||
<ai-bar v-if="!hideTitle" :title="title" v-bind="$attrs">
|
||||
<section class="ai-card" :class="{panel}">
|
||||
<ai-bar v-if="!hideHeader" :title="title" v-bind="$attrs">
|
||||
<template #title>
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
@@ -9,7 +9,8 @@
|
||||
</template>
|
||||
</ai-bar>
|
||||
<div class="ai-card__body">
|
||||
<slot name="content"></slot>
|
||||
<slot v-if="$scopedSlots.content" name="content"/>
|
||||
<slot v-else/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -21,7 +22,11 @@ export default {
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
hideTitle: Boolean
|
||||
hideTitle: Boolean,
|
||||
panel: Boolean
|
||||
},
|
||||
computed: {
|
||||
hideHeader: v => v.hideTitle || v.panel
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -37,5 +42,15 @@ export default {
|
||||
.ai-card__body {
|
||||
padding: 12px 40px 22px;
|
||||
}
|
||||
|
||||
&.panel {
|
||||
margin-bottom: 0;
|
||||
|
||||
.ai-card__body {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<slot v-if="$scopedSlots.btn" name="btn"/>
|
||||
<el-button v-else type="text">{{ text }}</el-button>
|
||||
</div>
|
||||
<ai-dialog :visible.sync="dialog" :title="dialogTitle" :width="width" :customFooter="customFooter" v-on="$listeners"
|
||||
@onConfirm="dialog=false,$emit('onConfirm')" v-bind="$attrs">
|
||||
<ai-dialog :visible.sync="dialog" :title="dialogTitle" :width="width" :customFooter="needFooter" v-on="$listeners"
|
||||
@onConfirm="handleConfirm" v-bind="$attrs">
|
||||
<slot/>
|
||||
<template #footer>
|
||||
<el-button @click="dialog=false">关闭</el-button>
|
||||
@@ -21,12 +21,26 @@ export default {
|
||||
text: {default: "点击弹窗"},
|
||||
dialogTitle: {default: "展示信息"},
|
||||
customFooter: {default: true},
|
||||
width: {default: "1200px"}
|
||||
width: {default: "1200px"},
|
||||
submit: {default: null}
|
||||
},
|
||||
computed: {
|
||||
needFooter: v => v.customFooter && !v.submit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleConfirm() {
|
||||
if (!this.submit) {
|
||||
this.dialog = false
|
||||
this.$emit('onConfirm')
|
||||
} else {
|
||||
this.submit?.()?.then(() => this.dialog = false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -6,9 +6,14 @@
|
||||
<div class="ai-list__tabs" v-if="$slots.tabs">
|
||||
<slot name="tabs"></slot>
|
||||
</div>
|
||||
<div class="ai-list__blank" v-else-if="$slots.blank">
|
||||
<slot name="blank"/>
|
||||
</div>
|
||||
<el-row type="flex" class="ai-list__blank" v-else-if="$scopedSlots.blank" :class="{hasLeft:$scopedSlots.left}">
|
||||
<div class="ai-list__content--left" v-if="$scopedSlots.left">
|
||||
<slot name="left"/>
|
||||
</div>
|
||||
<div class="fill">
|
||||
<slot name="blank"/>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="ai-list__content" v-else :class="contentClass">
|
||||
<div class="ai-list__content--wrapper">
|
||||
<slot name="custom" v-if="!!$slots.custom"/>
|
||||
@@ -68,7 +73,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//全局tab css
|
||||
:deep( .ai-list__tabs ){
|
||||
:deep( .ai-list__tabs ) {
|
||||
margin-top: 0 !important;
|
||||
|
||||
.el-tabs__item {
|
||||
@@ -148,7 +153,7 @@ export default {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
:deep( .el-tabs__item ){
|
||||
:deep( .el-tabs__item ) {
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
@@ -158,15 +163,15 @@ export default {
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header ){
|
||||
:deep(.el-tabs__header ) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs ){
|
||||
:deep(.el-tabs ) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__content ){
|
||||
:deep(.el-tabs__content ) {
|
||||
height: calc(100% - 32px);
|
||||
background: #f3f6f9;
|
||||
|
||||
@@ -222,7 +227,17 @@ export default {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
height: calc(100% - 50px);
|
||||
|
||||
|
||||
&.hasLeft {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
& > .fill {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user