Review changes batch 6 of 6

components/PageHeader.vue

@@ -2,25 +2,58 @@
 <template>
   <view class="page-header" :class="{ 'page-header--root': root }">
     <!-- 根页头部使用不透明朱砂底图与透明祠堂线稿两层完整资产。 -->
-    <image v-if="root" class="header-texture" src="/static/assets/foundation/opaque/root-header-cinnabar.jpg" mode="scaleToFill" />
-    <image v-if="root" class="header-hall" src="/static/assets/foundation/transparent/root-header-hall.png" mode="aspectFit" />
+    <image
+      v-if="root"
+      class="header-texture"
+      src="/static/assets/foundation/opaque/root-header-cinnabar.jpg"
+      mode="scaleToFill"
+    />
+    <image
+      v-if="root"
+      class="header-hall"
+      src="/static/assets/foundation/transparent/root-header-hall.png"
+      mode="aspectFit"
+    />
     <view class="header-side header-side--left">
       <view v-if="root" class="header-icon-button" @click="$emit('brand')">
-        <image class="header-logo" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
+        <image
+          class="header-logo"
+          src="/static/assets/foundation/transparent/brand-seal.png"
+          mode="aspectFit"
+        />
       </view>
-      <view v-else class="header-back" hover-class="header-back--pressed" @click="goBack">
-        <image class="header-back__icon" src="/static/assets/foundation/transparent/chevron-right.png" mode="aspectFit" />
+      <view
+        v-else
+        class="header-back"
+        hover-class="header-back--pressed"
+        @click="goBack"
+      >
+        <image
+          class="header-back__icon"
+          src="/static/assets/foundation/transparent/chevron-right.png"
+          mode="aspectFit"
+        />
       </view>
     </view>
 
     <text class="header-title">{{ title }}</text>
 
     <view class="header-side header-side--right">
-      <view v-if="root" class="header-icon-button header-notice" @click="$emit('notice')">
-        <image class="header-notice-icon" src="/static/assets/foundation/transparent/notice.png" mode="aspectFit" />
+      <view
+        v-if="root"
+        class="header-icon-button header-notice"
+        @click="$emit('notice')"
+      >
+        <image
+          class="header-notice-icon"
+          src="/static/assets/foundation/transparent/notice.png"
+          mode="aspectFit"
+        />
         <view v-if="unreadCount > 0" class="notice-dot"></view>
       </view>
-      <view v-else class="header-action" @click="$emit('action')">{{ action }}</view>
+      <view v-else class="header-action" @click="$emit('action')">{{
+        action
+      }}</view>
     </view>
   </view>
 </template>
@@ -28,12 +61,12 @@
 <script setup>
 const props = defineProps({
   title: { type: String, required: true },
-  action: { type: String, default: '' },
+  action: { type: String, default: "" },
   root: { type: Boolean, default: false },
-  unreadCount: { type: Number, default: 0 }
-})
+  unreadCount: { type: Number, default: 0 },
+});
 
-const goBack = () => uni.navigateBack()
+const goBack = () => uni.navigateBack();
 </script>
 
 <style scoped lang="scss">
@@ -75,12 +108,15 @@ const goBack = () => uni.navigateBack()
   z-index: 1;
   width: 476rpx;
   height: 166rpx;
-  opacity: .29;
+  opacity: 0.29;
   pointer-events: none;
 }
 
 .page-header--root .header-side,
-.page-header--root .header-title { position: relative; z-index: 2; }
+.page-header--root .header-title {
+  position: relative;
+  z-index: 2;
+}
 
 .header-side {
   display: flex;
@@ -89,8 +125,12 @@ const goBack = () => uni.navigateBack()
   align-items: center;
 }
 
-.header-side--left { justify-content: flex-start; }
-.header-side--right { justify-content: flex-end; }
+.header-side--left {
+  justify-content: flex-start;
+}
+.header-side--right {
+  justify-content: flex-end;
+}
 
 .header-icon-button {
   position: relative;
@@ -101,8 +141,14 @@ const goBack = () => uni.navigateBack()
   justify-content: center;
 }
 
-.header-logo { width: 66rpx; height: 66rpx; }
-.header-notice-icon { width: 48rpx; height: 48rpx; }
+.header-logo {
+  width: 66rpx;
+  height: 66rpx;
+}
+.header-notice-icon {
+  width: 48rpx;
+  height: 48rpx;
+}
 
 .notice-dot {
   position: absolute;
@@ -120,10 +166,26 @@ const goBack = () => uni.navigateBack()
   font-size: 27rpx;
 }
 
-.header-back { display: flex; width: 88rpx; height: 88rpx; align-items: center; justify-content: flex-start; }
-.header-back__icon { width: 42rpx; height: 42rpx; filter: brightness(0) invert(1); transform: scaleX(-1); }
-.header-back--pressed { opacity: .62; }
-.header-action { color: #ffe3a7; text-align: right; }
+.header-back {
+  display: flex;
+  width: 88rpx;
+  height: 88rpx;
+  align-items: center;
+  justify-content: flex-start;
+}
+.header-back__icon {
+  width: 42rpx;
+  height: 42rpx;
+  filter: brightness(0) invert(1);
+  transform: scaleX(-1);
+}
+.header-back--pressed {
+  opacity: 0.62;
+}
+.header-action {
+  color: #ffe3a7;
+  text-align: right;
+}
 
 .header-title {
   flex: 1;
@@ -140,7 +202,7 @@ const goBack = () => uni.navigateBack()
 
 .page-header--root .header-title {
   color: #ffe3a7;
-  font-family: 'STKaiti', 'KaiTi', serif;
+  font-family: "STKaiti", "KaiTi", serif;
   font-size: 48rpx;
   letter-spacing: 5rpx;
   transform: translateY(2rpx);
@@ -152,5 +214,7 @@ const goBack = () => uni.navigateBack()
   transform: translate(-6rpx, -6rpx);
 }
 
-.page-header--root .header-notice { transform: translateY(4rpx); }
+.page-header--root .header-notice {
+  transform: translateY(4rpx);
+}
 </style>