From a40b4e47e510ded81430b54ba9954b76dd9b365f Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Thu, 9 Apr 2026 11:31:12 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/components/BrandBanner.vue   |  14 +-
 packages/app/src/components/CardShop.vue      |   5 +-
 .../app/src/components/FlashSaleSection.vue   |   5 +-
 packages/app/src/components/QuickEntry.vue    | 498 +++++-------------
 packages/app/src/components/StudioInfo.vue    |   4 +
 5 files changed, 145 insertions(+), 381 deletions(-)

diff --git a/packages/app/src/components/BrandBanner.vue b/packages/app/src/components/BrandBanner.vue
index 15d0bf8..551949f 100644
--- a/packages/app/src/components/BrandBanner.vue
+++ b/packages/app/src/components/BrandBanner.vue
@@ -14,16 +14,14 @@
       <!-- Circular logo -->
       <view class="logo-circle">
         <image
-          v-if="studioInfo?.logo"
           class="logo-img"
-          :src="studioInfo.logo"
-          mode="aspectFit"
+          :src="logoImage"
+          mode="aspectFill"
         />
-        <text v-else class="logo-placeholder">FC</text>
       </view>
 
       <!-- Studio name -->
-      <text class="studio-name">{{ studioInfo?.name || 'Focus Core' }}</text>
+      <text class="studio-name">Focus Core</text>
     </view>
   </view>
 </template>
@@ -36,6 +34,7 @@ defineProps<{
 }>()
 
 const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/bannerBg.jpg'
+const logoImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/logo.jpg'
 </script>
 
 <style lang="scss" scoped>
@@ -89,8 +88,9 @@ const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/
 }
 
 .logo-img {
-  width: 160rpx;
-  height: 160rpx;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
 }
 
 .logo-placeholder {
diff --git a/packages/app/src/components/CardShop.vue b/packages/app/src/components/CardShop.vue
index c7e134c..1ddb86e 100644
--- a/packages/app/src/components/CardShop.vue
+++ b/packages/app/src/components/CardShop.vue
@@ -111,8 +111,11 @@ function goToAllCards() {
 <style lang="scss" scoped>
 .card-shop {
   background: #ffffff;
-  margin-top: 16rpx;
+  margin: 16rpx 24rpx 0;
   padding-bottom: 20rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 }
 
 /* ── Section header ── */
diff --git a/packages/app/src/components/FlashSaleSection.vue b/packages/app/src/components/FlashSaleSection.vue
index 9914d39..57dbe8a 100644
--- a/packages/app/src/components/FlashSaleSection.vue
+++ b/packages/app/src/components/FlashSaleSection.vue
@@ -157,8 +157,11 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .flash-sale-section {
   background: #fff;
-  margin-top: 16rpx;
+  margin: 16rpx 24rpx 0;
   padding-bottom: 24rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 }
 
 /* ── Section header ── */
diff --git a/packages/app/src/components/QuickEntry.vue b/packages/app/src/components/QuickEntry.vue
index 5e43254..a55897e 100644
--- a/packages/app/src/components/QuickEntry.vue
+++ b/packages/app/src/components/QuickEntry.vue
@@ -1,98 +1,54 @@
 <template>
   <view class="quick-entry">
     <!-- ① Not logged in -->
-    <view v-if="!userStore.loggedIn" class="entry-card login-card" @tap="handleLogin">
-      <view class="entry-content">
-        <view class="entry-left">
-          <view class="entry-icon-wrap login-icon">
-            <view class="icon-user" />
-          </view>
-          <view class="entry-text">
-            <text class="entry-title">欢迎来到工作室</text>
-            <text class="entry-subtitle">登录后即可预约课程</text>
-          </view>
-        </view>
-        <view class="entry-btn login-btn">
-          <text class="entry-btn-text">微信登录</text>
-        </view>
+    <view v-if="!userStore.loggedIn" class="entry-pill pill-login" @tap="handleLogin">
+      <view class="pill-dot dot-login" />
+      <text class="pill-label">欢迎来到工作室</text>
+      <view class="pill-action action-login">
+        <text class="pill-action-text">微信登录</text>
       </view>
     </view>
 
-    <!-- ② Logged in, no memberships at all → new user -->
+    <!-- ② Logged in, no memberships → new user -->
     <view
       v-else-if="userStore.loggedIn && userStore.memberships.length === 0"
-      class="entry-card trial-card"
+      class="entry-pill pill-trial"
       @tap="handleTrialEntry"
     >
-      <view class="entry-content">
-        <view class="entry-left">
-          <view class="entry-icon-wrap trial-icon">
-            <view class="icon-star" />
-          </view>
-          <view class="entry-text">
-            <text class="entry-title">初次体验</text>
-            <text class="entry-subtitle">专属体验课，了解普拉提</text>
-          </view>
-        </view>
-        <view class="entry-btn trial-btn">
-          <text class="entry-btn-text">预约体验课</text>
-        </view>
+      <view class="pill-tag tag-trial">体验</view>
+      <text class="pill-label">首次体验专属课程</text>
+      <view class="pill-action action-trial">
+        <text class="pill-action-text">预约体验课</text>
       </view>
-      <view class="card-badge trial-badge">新会员专享</view>
     </view>
 
-    <!-- ③ Has valid active card + running low warning -->
+    <!-- ③ Has valid active card -->
     <template v-else-if="userStore.hasValidMembership">
-      <view class="entry-card active-card" @tap="handleBooking">
-        <view class="entry-content">
-          <view class="entry-left">
-            <view class="entry-icon-wrap active-icon">
-              <view class="icon-clock" />
-            </view>
-            <view class="entry-text">
-              <text class="entry-title">一键约课</text>
-              <text class="entry-subtitle">{{ activeMembershipLabel }}</text>
-            </view>
-          </view>
-          <view class="entry-btn book-btn">
-            <text class="entry-btn-text">立即预约</text>
-          </view>
-        </view>
-        <!-- Running low badge -->
-        <view v-if="isRunningLow" class="card-badge low-badge">
-          仅剩 {{ lowestRemainingTimes }} 次
+      <view class="entry-pill pill-active" @tap="handleBooking">
+        <view class="pill-dot dot-active" />
+        <text class="pill-label pill-label-active">{{ activeMembershipLabel }}</text>
+        <view class="pill-action action-book">
+          <text class="pill-action-text">约课</text>
         </view>
       </view>
 
-      <!-- Renew reminder if running low -->
-      <view v-if="isRunningLow" class="renew-tip" @tap="scrollToCardShop">
-        <view class="renew-tip-icon">
-          <view class="icon-warning" />
-        </view>
-        <text class="renew-tip-text">课次即将用完，点击续卡保持练习节奏</text>
-        <text class="renew-tip-action">续卡 ›</text>
+      <!-- Running low: thin accent strip -->
+      <view v-if="isRunningLow" class="renew-strip" @tap="scrollToCardShop">
+        <text class="renew-strip-text">仅剩 {{ lowestRemainingTimes }} 次 · 续卡保持节奏</text>
+        <text class="renew-strip-arrow">›</text>
       </view>
     </template>
 
     <!-- ④ Has memberships but none active → buy card -->
     <view
       v-else
-      class="entry-card expired-card"
+      class="entry-pill pill-expired"
       @tap="scrollToCardShop"
     >
-      <view class="entry-content">
-        <view class="entry-left">
-          <view class="entry-icon-wrap expired-icon">
-            <view class="icon-card" />
-          </view>
-          <view class="entry-text">
-            <text class="entry-title">续费会员卡</text>
-            <text class="entry-subtitle">您的卡已到期，续卡继续练习</text>
-          </view>
-        </view>
-        <view class="entry-btn renew-btn">
-          <text class="entry-btn-text">购买会员卡</text>
-        </view>
+      <view class="pill-dot dot-expired" />
+      <text class="pill-label">会员卡已到期</text>
+      <view class="pill-action action-renew">
+        <text class="pill-action-text">续卡</text>
       </view>
     </view>
   </view>
@@ -123,7 +79,6 @@ async function handleLogin() {
 }
 
 function handleTrialEntry() {
-  // Navigate to the first TRIAL card detail page
   uni.navigateTo({ url: '/pages/card/detail?trial=1' })
 }
 
@@ -135,22 +90,20 @@ function scrollToCardShop() {
   emit('scroll-to-card-shop')
 }
 
-// Computed: label for the active membership
 const activeMembershipLabel = computed(() => {
   const active = userStore.activeMemberships
   if (!active.length) return ''
   const m = active[0]
   const cardName = m.cardType.name
   if (m.cardType.type === CardTypeCategory.TIMES && m.remainingTimes !== null) {
-    return `${cardName}  ·  剩余 ${m.remainingTimes} 次`
+    return `${cardName} · 剩余 ${m.remainingTimes} 次`
   }
   const expire = new Date(m.expireDate)
   const today = new Date()
   const daysLeft = Math.ceil((expire.getTime() - today.getTime()) / 86400000)
-  return `${cardName}  ·  剩余 ${daysLeft} 天`
+  return `${cardName} · 剩余 ${daysLeft} 天`
 })
 
-// Check if any TIMES card has ≤ 2 remaining
 const isRunningLow = computed(() => {
   return userStore.activeMemberships.some(
     (m) =>
@@ -174,358 +127,159 @@ const lowestRemainingTimes = computed(() => {
 
 <style lang="scss" scoped>
 .quick-entry {
-  margin: 24rpx 24rpx 0;
+  padding: 20rpx 24rpx 0;
 }
 
-.entry-card {
-  position: relative;
-  border-radius: 16rpx;
-  padding: 36rpx 32rpx;
-  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
-  overflow: hidden;
+/* ── Pill base ── */
+.entry-pill {
+  display: flex;
+  align-items: center;
+  height: 80rpx;
+  border-radius: 40rpx;
+  padding: 0 8rpx 0 24rpx;
+  gap: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
 }
 
-.login-card {
-  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
+/* ── Pill variants ── */
+.pill-login {
+  background: #1a1a2e;
 }
 
-.trial-card {
+.pill-trial {
   background: linear-gradient(135deg, #2d2d5e 0%, #4a3f7a 100%);
 }
 
-.active-card {
-  background: linear-gradient(135deg, #2a3a4a 0%, #1a2a3a 100%);
+.pill-active {
+  background: #ffffff;
+  border: 1rpx solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
 }
 
-.expired-card {
-  background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
+.pill-expired {
+  background: #f5f5f5;
+  border: 1rpx solid rgba(0, 0, 0, 0.04);
+  box-shadow: none;
 }
 
-.entry-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24rpx;
-}
-
-.entry-left {
-  display: flex;
-  align-items: center;
-  gap: 28rpx;
-  flex: 1;
-}
-
-.entry-icon-wrap {
-  width: 88rpx;
-  height: 88rpx;
+/* ── Status dot ── */
+.pill-dot {
+  width: 14rpx;
+  height: 14rpx;
   border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  position: relative;
 }
 
-.login-icon {
-  background: rgba(255, 255, 255, 0.12);
+.dot-login {
+  background: $primary-color;
+  box-shadow: 0 0 8rpx rgba($primary-color, 0.6);
 }
 
-.trial-icon {
-  background: rgba(255, 215, 0, 0.2);
+.dot-active {
+  background: #34c759;
+  box-shadow: 0 0 8rpx rgba(52, 199, 89, 0.5);
 }
 
-.active-icon {
-  background: rgba(168, 196, 206, 0.25);
+.dot-expired {
+  background: #aaa;
 }
 
-.expired-icon {
-  background: rgba(255, 255, 255, 0.12);
-}
-
-/* ── Icon shapes (pure CSS) ── */
-
-/* User icon: head + shoulders */
-.icon-user {
-  position: relative;
-  width: 36rpx;
-  height: 36rpx;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 20rpx;
-    height: 20rpx;
-    border-radius: 50%;
-    background: #fff;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 28rpx;
-    height: 14rpx;
-    border-radius: 14rpx 14rpx 0 0;
-    background: #fff;
-  }
-}
-
-/* Star icon - diamond shape */
-.icon-star {
-  position: relative;
-  width: 32rpx;
-  height: 32rpx;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(45deg);
-    width: 24rpx;
-    height: 24rpx;
-    background: #ffd700;
-  }
-}
-
-/* Clock icon - circle with dot */
-.icon-clock {
-  position: relative;
-  width: 36rpx;
-  height: 36rpx;
-  border-radius: 50%;
-  border: 3rpx solid #fff;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 8rpx;
-    height: 8rpx;
-    border-radius: 50%;
-    background: #fff;
-  }
-}
-
-/* Card icon */
-.icon-card {
-  position: relative;
-  width: 36rpx;
-  height: 26rpx;
-  border-radius: 4rpx;
-  border: 3rpx solid #fff;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 12rpx;
-    height: 6rpx;
-    border-radius: 2rpx;
-    background: #fff;
-  }
-}
-
-/* 闪电 icon — 更有能量感 */
-.icon-warning {
-  position: relative;
-  width: 22rpx;
-  height: 22rpx;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%) rotate(-15deg);
-    width: 0;
-    height: 0;
-    border-left: 8rpx solid transparent;
-    border-right: 8rpx solid transparent;
-    border-bottom: 18rpx solid #ffffff;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 2rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 10rpx;
-    height: 3rpx;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 2rpx;
-  }
-}
-
-.entry-text {
-  flex: 1;
-  min-width: 0;
-}
-
-.entry-title {
-  display: block;
-  font-size: 34rpx;
-  font-weight: 600;
-  color: #ffffff;
-  margin-bottom: 8rpx;
+/* ── Tag (trial only) ── */
+.pill-tag {
+  font-size: 20rpx;
+  font-weight: 700;
+  padding: 4rpx 14rpx;
+  border-radius: 20rpx;
+  flex-shrink: 0;
   letter-spacing: 1rpx;
 }
 
-.entry-subtitle {
-  display: block;
-  font-size: 24rpx;
-  color: rgba(255, 255, 255, 0.6);
-  line-height: 1.4;
+.tag-trial {
+  background: rgba(255, 215, 0, 0.25);
+  color: #ffd700;
 }
 
-.entry-btn {
+/* ── Label text ── */
+.pill-label {
+  flex: 1;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.pill-label-active {
+  color: #333;
+}
+
+.pill-expired .pill-label {
+  color: #888;
+}
+
+/* ── Action button ── */
+.pill-action {
   flex-shrink: 0;
-  padding: 18rpx 36rpx;
-  border-radius: 40rpx;
+  height: 60rpx;
+  padding: 0 28rpx;
+  border-radius: 30rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
-    opacity: 0.5;
-  }
 }
 
-.entry-btn-text {
-  font-size: 28rpx;
+.pill-action-text {
+  font-size: 24rpx;
   font-weight: 600;
   white-space: nowrap;
-  position: relative;
-  z-index: 1;
+  line-height: 1;
 }
 
-.login-btn,
-.trial-btn,
-.book-btn {
+.action-login {
   background: $primary-color;
+  .pill-action-text { color: #1a1a2e; }
 }
 
-.renew-btn {
-  background: #666;
+.action-trial {
+  background: rgba(255, 215, 0, 0.2);
+  .pill-action-text { color: #ffd700; }
 }
 
-.login-btn .entry-btn-text,
-.trial-btn .entry-btn-text,
-.book-btn .entry-btn-text,
-.renew-btn .entry-btn-text {
-  color: #1a1a2e;
+.action-book {
+  background: #1a1a2e;
+  .pill-action-text { color: #fff; }
 }
 
-/* Corner badge */
-.card-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 8rpx 20rpx;
-  font-size: 20rpx;
-  font-weight: 600;
-  border-radius: 0 16rpx 0 16rpx;
+.action-renew {
+  background: #e0e0e0;
+  .pill-action-text { color: #555; }
 }
 
-.trial-badge {
-  background: linear-gradient(135deg, #ffd700, #ffaa00);
-  color: #1a1a2e;
-}
-
-.low-badge {
-  background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
-  color: #ffffff;
-  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
-}
-
-/* Renew tip bar — 充满能量的激励配色 */
-.renew-tip {
-  display: flex;
-  align-items: center;
-  gap: 16rpx;
-  margin-top: 16rpx;
-  padding: 22rpx 28rpx;
-  background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 60%, #FFAA5C 100%);
-  border-radius: 16rpx;
-  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
-  position: relative;
-  overflow: hidden;
-
-  /* 右上角光晕装饰 */
-  &::before {
-    content: '';
-    position: absolute;
-    top: -20rpx;
-    right: -20rpx;
-    width: 120rpx;
-    height: 120rpx;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
-    pointer-events: none;
-  }
-
-  /* 底部微光 */
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 40%;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
-    pointer-events: none;
-  }
-}
-
-.renew-tip-icon {
-  width: 52rpx;
-  height: 52rpx;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
+/* ── Renew strip (running low) ── */
+.renew-strip {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 1;
-  backdrop-filter: blur(4rpx);
+  gap: 8rpx;
+  margin-top: 12rpx;
+  padding: 14rpx 24rpx;
+  background: linear-gradient(135deg, #FF6B35, #FF8E53);
+  border-radius: 24rpx;
 }
 
-.renew-tip-text {
-  flex: 1;
-  font-size: 26rpx;
-  color: #ffffff;
-  line-height: 1.5;
+.renew-strip-text {
+  font-size: 22rpx;
   font-weight: 500;
-  position: relative;
-  z-index: 1;
-  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
+  color: #fff;
+  letter-spacing: 0.5rpx;
 }
 
-.renew-tip-action {
-  font-size: 26rpx;
-  color: #ffffff;
+.renew-strip-arrow {
+  font-size: 28rpx;
   font-weight: 700;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 1;
-  letter-spacing: 1rpx;
-  /* 箭头增强感 */
-  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.15);
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1;
 }
 </style>
diff --git a/packages/app/src/components/StudioInfo.vue b/packages/app/src/components/StudioInfo.vue
index 6528483..7d372fd 100644
--- a/packages/app/src/components/StudioInfo.vue
+++ b/packages/app/src/components/StudioInfo.vue
@@ -69,7 +69,11 @@ function copyAddress() {
 
 <style lang="scss" scoped>
 .studio-info {
+  margin: 16rpx 24rpx 0;
   background: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 }
 
 /* ── Photo strip ── */