顶部标题居中显示

components/fy-header.vue

@@ -4,8 +4,8 @@
       <view class="left" @click="onLeft">
         <text v-if="leftLabel" class="leftlab">{{ leftLabel }}</text>
         <text v-else-if="back" class="back">‹</text>
-        <text class="title">{{ title }}</text>
       </view>
+      <text class="title">{{ title }}</text>
       <view class="right">
         <slot name="right" />
       </view>
@@ -58,19 +58,29 @@ export default {
   padding: 0 28rpx;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  position: relative;
 }
-.left { display: flex; align-items: center; min-width: 0; }
+.left, .right {
+  width: 160rpx;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  z-index: 1;
+}
+.right { margin-left: auto; justify-content: flex-end; gap: 4rpx; }
 .back {
   font-size: 52rpx;
   line-height: 1;
-  margin-right: 4rpx;
   color: #111827;
   width: 56rpx;
   font-weight: 300;
 }
-.leftlab { font-size: 28rpx; color: #1677FF; margin-right: 16rpx; }
+.leftlab { font-size: 28rpx; color: #1677FF; }
 .title {
+  position: absolute;
+  left: 180rpx;
+  right: 180rpx;
+  text-align: center;
   font-size: 34rpx;
   font-weight: 600;
   color: #111827;
@@ -78,7 +88,5 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 440rpx;
 }
-.right { display: flex; align-items: center; gap: 4rpx; }
 </style>