2022-03-09 17:37:32 +08:00

47 lines
870 B
Vue

<template>
<div class="go-config-item-box">
<n-text class="item-left" depth="2">{{ name }}</n-text>
<div class="item-right" justify="space-between" :style="{
gridTemplateColumns: alone? '1fr': '1fr 1fr'
}">
<slot />
</div>
</div>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
required: true
},
alone: {
type: Boolean,
default: false,
required: false
}
})
</script>
<style lang="scss" scoped>
$leftWidth: 60px;
@include go('config-item-box') {
position: relative;
display: flex;
margin: 20px 0;
.item-left {
width: $leftWidth;
text-align: left;
margin-top: 4px;
margin-left: 10px;
font-size: 12px;
}
.item-right {
display: grid;
grid-column-gap: 10px;
grid-template-columns: 1fr 1fr;
width: calc(100% - #{$leftWidth});
}
}
</style>