100 lines
1.5 KiB
Vue
100 lines
1.5 KiB
Vue
<template>
|
|
<section class="configItem" :class="{topLabel}">
|
|
<label v-text="label"/>
|
|
<div class="content fill">
|
|
<slot v-if="$slots.default"/>
|
|
<div v-else-if="value" v-html="value"/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "configItem",
|
|
props: {
|
|
label: String,
|
|
value: {default: null},
|
|
topLabel: Boolean
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.configItem {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& > label {
|
|
flex-shrink: 0;
|
|
width: 60px;
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
}
|
|
|
|
.el-select .el-tag {
|
|
color: #fff;
|
|
background: transparent;
|
|
}
|
|
|
|
.el-input__icon {
|
|
color: #fff;
|
|
}
|
|
|
|
.el-switch__label {
|
|
color: #fff;
|
|
}
|
|
|
|
.el-select, .ai-select {
|
|
width: 100%;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
input {
|
|
background: #262C33;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
border: 1px solid #030411;
|
|
}
|
|
|
|
.el-input__icon {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
:deep(.el-collapse) {
|
|
height: 18px;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
&.topLabel {
|
|
flex-direction: column;
|
|
align-items: normal;
|
|
|
|
& > label {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.content {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|