From 487caf9dbea4c4746537d4c59988313d7b4b3954 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 16 Jul 2026 21:09:22 +0800
Subject: [PATCH] feat(shared-work): update page ui and navigation

add dynamic template name to top nav bar
set top nav background to white
adjust media container styles and image display mode
remove redundant is-video CSS class and gradient backgrounds
update action button to pill shape with white text
remove scroll-y prop from scroll container
fix scroll container layout and padding
---
 src/pages-aigc/sharedWork/sharedWork.vue    |  9 +++++----
 src/pages-aigc/sharedWork/styles/index.scss | 14 +++++---------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/pages-aigc/sharedWork/sharedWork.vue b/src/pages-aigc/sharedWork/sharedWork.vue
index d2bf062..3d1cc5f 100644
--- a/src/pages-aigc/sharedWork/sharedWork.vue
+++ b/src/pages-aigc/sharedWork/sharedWork.vue
@@ -1,15 +1,16 @@
 <template>
   <view class="shared-work-page">
     <view class="shared-work-nav">
-      <TopNavBar title="旅行作品" background="transparent" title-color="#173a5f" back-icon-color="#173a5f"
-        :align-with-menu-button="true" :z-index="3" @back="handleBack" />
+      <TopNavBar :title="shareDetail.templateName || '旅行作品'" background="#fff" title-color="#173a5f"
+        back-icon-color="#173a5f" :align-with-menu-button="true" :z-index="3" @back="handleBack" />
     </view>
 
-    <view class="shared-work-scroll" scroll-y>
+    <view class="shared-work-scroll">
       <template v-if="shareDetail">
         <video v-if="isVideo" class="shared-work-media is-video" :src="shareDetail.videoUrl"
           :poster="shareDetail.imageUrl" controls object-fit="cover" />
-        <image v-else-if="shareDetail.imageUrl" class="shared-work-media" :src="shareDetail.imageUrl" mode="widthFix" />
+        <image v-else-if="shareDetail.imageUrl" class="shared-work-media" :src="shareDetail.imageUrl"
+          mode="aspectFill" />
 
         <view class="shared-work-meta">
           <text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text>
diff --git a/src/pages-aigc/sharedWork/styles/index.scss b/src/pages-aigc/sharedWork/styles/index.scss
index 23b2f06..799d928 100644
--- a/src/pages-aigc/sharedWork/styles/index.scss
+++ b/src/pages-aigc/sharedWork/styles/index.scss
@@ -6,7 +6,6 @@
   height: 100vh;
   overflow: hidden;
   color: #173a5f;
-  background: #c5e5f8;
   box-sizing: border-box;
 }
 
@@ -32,21 +31,19 @@
   flex: 1 1 0;
   width: 100%;
   height: 0;
-  min-height: 0;
+  padding-top: 10px;
   padding-bottom: 104px;
+  background-color: #fff;
   box-sizing: border-box;
 }
 
 .shared-work-media {
   width: 100%;
+  height: 500px;
   display: block;
   background: #b8dced;
 }
 
-.shared-work-media.is-video {
-  height: min(500px, 66vh);
-}
-
 .shared-work-meta {
   padding: 18px 18px 118px;
 }
@@ -88,7 +85,6 @@
   bottom: 0;
   left: 0;
   padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
-  background: linear-gradient(180deg, rgba(197, 229, 248, 0) 0%, #c5e5f8 34%);
   box-sizing: border-box;
 }
 
@@ -98,9 +94,9 @@
   margin: 0;
   padding: 0;
   border: 0;
-  border-radius: 8px;
+  border-radius: 999px;
   background: #20c99a;
-  color: #173a5f;
+  color: #ffffff;
   font-size: 16px;
   line-height: 54px;
   font-weight: 900;