Просмотр исходного кода

style(mobile): 更新计划卡片样式以改进视觉效果

- 将边框颜色改为实色并增加边框宽度
- 将渐变背景改为纯色背景
- 调整价格行的对齐方式为居中对齐
- 更新分隔线颜色以提高对比度
- 移除多余的最小宽度属性
reaper 1 месяц назад
Родитель
Сommit
99bfa3e68e
1 измененных файлов с 5 добавлено и 6 удалено
  1. 5 6
      app/components/mobile/home/PlansSection.vue

+ 5 - 6
app/components/mobile/home/PlansSection.vue

@@ -41,8 +41,8 @@ import { plans } from '~/utils/plans'
 
 .mb-plan-card {
   border-radius: 20px;
-  border: 1px solid rgba(198, 186, 255, 0.3);
-  background: linear-gradient(180deg, rgba(165, 101, 255, 0.22) 0%, rgba(3, 0, 20, 0.55) 100%);
+  border: 2px solid #9579FF;
+  background: #1F1543;
   backdrop-filter: blur(20px);
   padding: 12px;
   box-sizing: border-box;
@@ -55,7 +55,6 @@ import { plans } from '~/utils/plans'
 }
 
 .head-text {
-  min-width: 0;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -81,8 +80,8 @@ import { plans } from '~/utils/plans'
 .price-row {
   margin-top: 12px;
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: center;
   gap: 12px;
 }
 
@@ -128,7 +127,7 @@ import { plans } from '~/utils/plans'
 .divider {
   height: 1px;
   width: 100%;
-  background: rgba(198, 186, 255, 0.22);
+  background: rgba(204, 213, 234, 0.50);
   margin: 12px 0 14px;
 }