chore: setting页面拆分

2026-05-11 11:28:59 +08:00
parent f76c9ed828
commit 93813f7b56
10 changed files with 1169 additions and 849 deletions
--- a/src/views/setting/components/SettingsSection.vue
+++ b/src/views/setting/components/SettingsSection.vue
@@ -0,0 +1,52 @@
+<template>
+  <section class="setting-section">
+    <div class="label-container">
+      <div class="label">{{ title }}</div>
+      <div class="label-desc">{{ description }}</div>
+    </div>
+
+    <div :class="['context-container', contentClass]">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description: string
+  contentClass?: string
+}>()
+</script>
+
+<style lang="less" scoped>
+.setting-section {
+  display: flex;
+  column-gap: 21.4rem;
+  justify-content: center;
+}
+
+.label-container {
+  width: 27.6rem;
+  font-family: 'KaiseiOpti-Medium';
+}
+
+.label {
+  font-size: 2.8rem;
+  line-height: 3.6rem;
+  color: #232323;
+}
+
+.label-desc {
+  width: 24rem;
+  margin-top: 2rem;
+  font-size: 1.6rem;
+  line-height: 2.2rem;
+  color: #666666;
+}
+
+.context-container {
+  width: 58rem;
+  padding-top: 0.2rem;
+}
+</style>