You've already forked SmartisanNote.Remake
76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
<template>
|
|
<div class="setting-group">
|
|
<div class="section-header">{{ title }}</div>
|
|
<div class="settings-section">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.setting-group {
|
|
.section-header {
|
|
font-size: 0.75rem;
|
|
color: rgb(95 95 95);
|
|
padding: 0.3125rem 0.5rem;
|
|
width: 95%;
|
|
margin: 0.75rem auto 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.settings-section {
|
|
width: 95%;
|
|
border-radius: 0.625rem;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
border: 1px solid var(--divider);
|
|
box-shadow: 0 1.25rem 3.125rem 0rem rgb(0 0 0 / 5%);
|
|
/* 确保不会阻止事件传播 */
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
:global(.settings-item) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: linear-gradient(to bottom, #fefdfe, #fcfbfb);
|
|
padding: 0.875rem 1rem;
|
|
}
|
|
|
|
:global(.settings-item-border) {
|
|
border-top: 1px solid var(--divider);
|
|
border-bottom: 1px solid var(--divider);
|
|
}
|
|
|
|
:global(.settings-item-border:first-child) {
|
|
border: none;
|
|
}
|
|
|
|
:global(.settings-item-border:last-child) {
|
|
border: none;
|
|
}
|
|
|
|
:global(.settings-item-clickable) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
:global(.settings-item-clickable .item-text-primary) {
|
|
flex: 1;
|
|
}
|
|
|
|
:global(.settings-item-clickable) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|