合并代码

src/views/MyProfile.vue

@@ -81,9 +81,11 @@
     <!-- 设置选项区域 -->
     <div class="settings-section">
       <div class="setting-item" v-for="(item, index) in settings" :key="index">
-        <router-link :to=item.path>
-          <span class="setting-text">{{ item.text }}</span>
-          <span class="setting-arrow">></span>
+        <router-link :to="item.path" class="setting-link"> <!-- 添加 class 便于样式控制 -->
+          <div class="setting-content"> <!-- 添加 class 便于样式控制 -->
+            <span class="setting-text">{{ item.text }}</span>
+            <span class="setting-arrow">></span>
+          </div>
         </router-link>
       </div>
     </div>
@@ -535,15 +537,31 @@ export default {
 }
 
 .setting-item {
-  display: flex;
+  display: block;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: 0px;
   border-bottom: 1px solid #f0f0f0;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
+.setting-link {
+  display: block; /* 转为块级元素，占满父容器宽度 */
+  width: 100%;
+  height: 100%;
+  padding: 15px; /* 将原有的 padding 移到这里，确保点击区域完整 */
+  text-decoration: none; /* 去除链接默认下划线 */
+}
+
+.setting-content {
+  display: flex; /* 使用 flex 布局，方便内容左右对齐 */
+  justify-content: space-between; /* 文字左对齐，箭头右对齐 */
+  align-items: center; /* 垂直居中 */
+  width: 100%; /* 占满父容器宽度 */
+  height: 100%; /* 占满父容器高度 */
+}
+
 .setting-item:last-child {
   border-bottom: none;
 }