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

feat: add persistent gift toast and responsive aigc layouts

Browse Source 
update aigc page layouts to use viewport units and dynamic sizing instead of hardcoded 812px height for better device compatibility. replace fixed scss values with css custom properties for easier theming and responsive adjustments. refactor templatecarousel component to calculate dynamic card scale and layout based on screen dimensions. add local storage persistence for gift points toast so it stays closed after dismissal. update home page to respect the persisted toast state.
This commit is contained in:
duanshuwen
2026-07-07 09:25:50 +08:00
parent 90352e2981
commit 808ca48668
7 changed files with 135 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages-aigc/home/components/TemplateCard/styles/index.scss
View File

@@ -1,23 +1,23 @@
.template-card {
position: relative;
flex: 0 0 318px;
width: 318px;
height: 494px;
flex: 0 0 var(--template-card-width, 318px);
width: var(--template-card-width, 318px);
height: var(--template-card-height, 494px);
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 28px;
border-radius: var(--template-card-radius, 28px);
background: linear-gradient(180deg, #0f7069, #082226);
color: #ffffff;
text-align: left;
box-shadow: 0 18px 34px rgba(24, 37, 50, 0.18);
box-shadow: 0 3px 8px rgba(24, 37, 50, 0.12);
transform: scale(0.96);
transform-origin: center;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.template-card.is-active {
box-shadow: 0 22px 42px rgba(24, 37, 50, 0.2);
box-shadow: 0 5px 12px rgba(24, 37, 50, 0.16);
transform: scale(1);
}
@@ -33,8 +33,8 @@
.template-media {
position: relative;
flex: 0 0 358px;
height: 358px;
flex: 0 0 var(--template-card-media-height, 358px);
height: var(--template-card-media-height, 358px);
overflow: hidden;
background: var(--memory-accent);
}
@@ -58,7 +58,7 @@
.template-copy {
position: relative;
flex: 0 0 136px;
flex: 0 0 var(--template-card-copy-height, 136px);
display: flex;
flex-direction: column;
justify-content: flex-start;