zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(shared-work): update page ui and navigation

Browse Source 
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
This commit is contained in:
duanshuwen
2026-07-16 21:09:22 +08:00
parent 99151bca58
commit 487caf9dbe
2 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages-aigc/sharedWork/sharedWork.vue
View File

@@ -1,15 +1,16 @@
<template> <template>
<view class="shared-work-page"> <view class="shared-work-page">
<view class="shared-work-nav"> <view class="shared-work-nav">
<TopNavBar title="旅行作品" background="transparent" title-color="#173a5f" back-icon-color="#173a5f" <TopNavBar :title="shareDetail.templateName || '旅行作品'" background="#fff" title-color="#173a5f"
:align-with-menu-button="true" :z-index="3" @back="handleBack" /> back-icon-color="#173a5f" :align-with-menu-button="true" :z-index="3" @back="handleBack" />
</view> </view>
<view class="shared-work-scroll" scroll-y> <view class="shared-work-scroll">
<template v-if="shareDetail"> <template v-if="shareDetail">
<video v-if="isVideo" class="shared-work-media is-video" :src="shareDetail.videoUrl" <video v-if="isVideo" class="shared-work-media is-video" :src="shareDetail.videoUrl"
:poster="shareDetail.imageUrl" controls object-fit="cover" /> :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"> <view class="shared-work-meta">
<text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text> <text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text>

14
src/pages-aigc/sharedWork/styles/index.scss
View File

@@ -6,7 +6,6 @@
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
color: #173a5f; color: #173a5f;
background: #c5e5f8;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -32,21 +31,19 @@
flex: 1 1 0; flex: 1 1 0;
width: 100%; width: 100%;
height: 0; height: 0;
min-height: 0; padding-top: 10px;
padding-bottom: 104px; padding-bottom: 104px;
background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
.shared-work-media { .shared-work-media {
width: 100%; width: 100%;
height: 500px;
display: block; display: block;
background: #b8dced; background: #b8dced;
} }
.shared-work-media.is-video {
height: min(500px, 66vh);
}
.shared-work-meta { .shared-work-meta {
padding: 18px 18px 118px; padding: 18px 18px 118px;
} }
@@ -88,7 +85,6 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); 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; box-sizing: border-box;
} }
@@ -98,9 +94,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
border-radius: 8px; border-radius: 999px;
background: #20c99a; background: #20c99a;
color: #173a5f; color: #ffffff;
font-size: 16px; font-size: 16px;
line-height: 54px; line-height: 54px;
font-weight: 900; font-weight: 900;