2022-04-14 10:05:57 +08:00

56 lines
994 B
Vue

<template>
<div class="go-config-item-box">
<n-text class="item-left" depth="2">
{{ name }}
<n-space :size="5">
<slot name="name"></slot>
</n-space>
</n-text>
<div
class="item-right"
justify="space-between"
:style="{
gridTemplateColumns: alone ? '1fr' : '1fr 1fr'
}"
>
<slot></slot>
</div>
</div>
</template>
<script setup lang="ts">
defineProps({
name: {
type: String,
required: false
},
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>