init: 初始化

packages/app/src/components/BrandBanner.vue

@@ -1,33 +1,42 @@
 <template>
-  <view class="brand-banner" :style="bannerStyle">
+  <view class="brand-banner">
+    <!-- Background image layer -->
+    <image
+      v-if="studioInfo?.bannerUrl"
+      class="banner-bg"
+      :src="studioInfo.bannerUrl"
+      mode="aspectFill"
+    />
+    <!-- Dark overlay for readability -->
+    <view class="banner-overlay" />
+
     <!-- Status bar spacer -->
     <view class="status-bar" :style="{ height: statusBarHeight + 'px' }" />
 
-    <!-- Nav area -->
-    <view class="nav-bar">
-      <view class="studio-name-row">
+    <!-- Centered content -->
+    <view class="banner-content">
+      <!-- Circular logo -->
+      <view class="logo-circle">
         <image
           v-if="studioInfo?.logo"
-          class="logo"
+          class="logo-img"
           :src="studioInfo.logo"
           mode="aspectFit"
         />
-        <text class="studio-name">{{ studioInfo?.name || '普拉提工作室' }}</text>
+        <text v-else class="logo-placeholder">FC</text>
       </view>
-      <text class="studio-slogan">专业 · 精致 · 健康</text>
-    </view>
 
-    <!-- Decorative circles -->
-    <view class="deco-circle deco-circle--1" />
-    <view class="deco-circle deco-circle--2" />
+      <!-- Studio name -->
+      <text class="studio-name">{{ studioInfo?.name || 'Focus Core' }}</text>
+    </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { StudioConfig } from '@mp-pilates/shared'
 
-const props = defineProps<{
+defineProps<{
   studioInfo: StudioConfig | null
 }>()
 
@@ -37,82 +46,79 @@ onMounted(() => {
   const sysInfo = uni.getSystemInfoSync()
   statusBarHeight.value = sysInfo.statusBarHeight ?? 20
 })
-
-const bannerStyle = computed(() => {
-  if (props.studioInfo?.bannerUrl) {
-    return {
-      backgroundImage: `url(${props.studioInfo.bannerUrl})`,
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-    }
-  }
-  return {}
-})
 </script>
 
 <style lang="scss" scoped>
 .brand-banner {
   position: relative;
   width: 100%;
-  min-height: 300rpx;
-  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 50%, #1a1a2e 100%);
+  height: 580rpx;
   overflow: hidden;
-  padding-bottom: 40rpx;
+  background: #2a2a2a;
 }
 
-.nav-bar {
+.banner-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.status-bar {
   position: relative;
   z-index: 2;
-  padding: 16rpx 40rpx 0;
 }
 
-.studio-name-row {
+.banner-content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 40rpx;
+}
+
+.logo-circle {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  background: #ffffff;
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.2);
 }
 
-.logo {
-  width: 64rpx;
-  height: 64rpx;
-  border-radius: 12rpx;
+.logo-img {
+  width: 160rpx;
+  height: 160rpx;
+}
+
+.logo-placeholder {
+  font-size: 64rpx;
+  font-weight: 800;
+  color: #333;
+  letter-spacing: 4rpx;
 }
 
 .studio-name {
-  font-size: 44rpx;
+  margin-top: 28rpx;
+  font-size: 40rpx;
   font-weight: 700;
   color: #ffffff;
-  letter-spacing: 2rpx;
-}
-
-.studio-slogan {
-  display: block;
-  margin-top: 10rpx;
-  font-size: 24rpx;
-  color: #c9a87c;
   letter-spacing: 6rpx;
-}
-
-/* Decorative blurred circles */
-.deco-circle {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0.12;
-  background: #c9a87c;
-}
-
-.deco-circle--1 {
-  width: 300rpx;
-  height: 300rpx;
-  top: -80rpx;
-  right: -60rpx;
-}
-
-.deco-circle--2 {
-  width: 180rpx;
-  height: 180rpx;
-  bottom: -40rpx;
-  right: 120rpx;
-  opacity: 0.08;
+  text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
 }
 </style>