优化将项目中的px单位转换为rem和em单位以提高响应式设计的一致性

2025-11-03 18:29:26 +08:00
parent cb9488ec05
commit 80caa0712d
11 changed files with 969 additions and 1288 deletions
--- a/src/components/SettingGroup.vue
+++ b/src/components/SettingGroup.vue
@@ -1,75 +1,75 @@
-<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 0px 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>
+<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>