87 lines
1.5 KiB
Vue
87 lines
1.5 KiB
Vue
<template>
|
|
<div class="ai-wrapper">
|
|
<ai-title class="w100" v-if="title" :title="title"/>
|
|
<div class="ai-wrapper-content" :class="{border}">
|
|
<slot/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AiTitle from "./AiTitle";
|
|
|
|
export default {
|
|
name: 'AiWrapper',
|
|
components: {AiTitle},
|
|
componentName: 'AiWrapper',
|
|
|
|
provide() {
|
|
return {
|
|
AiWrapper: this
|
|
}
|
|
},
|
|
|
|
props: {
|
|
'label-width': {
|
|
type: String
|
|
},
|
|
|
|
columnsNumber: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
border: Boolean,
|
|
title: String
|
|
},
|
|
|
|
computed: {
|
|
autoWidth() {
|
|
return ((1 / this.columnsNumber) * 100).toFixed(2) + '%'
|
|
},
|
|
|
|
autoLableWidth() {
|
|
return this.labelWidth
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ai-wrapper {
|
|
.w100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.ai-wrapper-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
&.border {
|
|
border-left: 1px solid $borderColor;
|
|
border-top: 1px solid $borderColor;
|
|
|
|
.ai-info-item {
|
|
border-bottom: 1px solid $borderColor;
|
|
border-right: 1px solid $borderColor;
|
|
margin-bottom: 0;
|
|
line-height: 32px;
|
|
|
|
.ai-info-item__left {
|
|
background: rgba(0, 0, 0, .03);
|
|
padding-right: 16px;
|
|
border-right: 1px solid $borderColor;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.el-textarea__inner {
|
|
border: none;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|