.startContainer{ padding: 24px 72px 32px; } .startCard{ position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 356px; border-radius: 16px; overflow: hidden; background-color: white; } .startIconChange{ position: absolute; right: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; gap: 10px; background-color: rgba(#000, .6); border-bottom-left-radius: 12px; } .startGenButton{ background: linear-gradient(276.8deg, #317CFA -11.65%, #FF2DF8 91.8%); } .pickContainer{ display: flex; justify-content: center; align-items: center; width: 343px; height: 533px; } .pickAvatarCard{ width: 300px; height: 533px; border-radius: 12px; } .pickGenCard{ display: flex; justify-content: center; align-items: center; background: linear-gradient(162.45deg, rgba(206, 49, 250, 0.1) 1.4%, rgba(49, 124, 250, 0.2) 100.04%); } .mySwiper{ width: 300px; height: 533px; overflow: hidden; border-radius: 12px; } .swiperItem{ position: relative; width: 300px; height: 533px; } /* 自定义指示点容器 */ .indicatorContainer { padding-top: 18px; display: flex; gap: 8px; justify-content: center; } /* 单个指示点 */ .indicator { width: 8px; height: 8px; transition: all .3s; border-radius: 100%; background-color: rgba(#000, .25); border-radius: 100%; } /* 当前选中的指示点 */ .indicatorActive{ background-color: #000; } .pickAvatarOriginal{ position: absolute; right: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 12px; line-height: 20px; width: 60px; height: 28px; color: white; border-bottom-left-radius: 12px; background: rgba(#000, .4); } .confirmContainer{ width: 343px; height: 511px; display: flex; flex-direction: column; align-items: center; } .confirmRoundedAvatarWrap{ width: 100px; height: 100px; margin-bottom: 24px; border-radius: 100%; } .confirmRoundedAvatar{ width: 100px; height: 100px; overflow: hidden; border-radius: 100%; } .confirmChatAvatarBg{ position: relative; width: 240px; height: 427px; margin-bottom: 16px; border-radius: 24px; } .confirmChatAvatarBgCover{ display: flex; flex-direction: column; justify-content: flex-end; position: absolute; left: 0; top: 0; right: 0; z-index: 1; width: 240px; height: 427px; box-sizing: border-box; padding: 0 24px 54px; border-radius: 24px; gap: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50.12%, #D6D6D6 100%); } .block{ background-color: white; border-radius: 8px; height: 30px; } .block1{ .block(); width: 135px; } .block2{ .block(); align-self: flex-end; width: 123px; background-color: rgba(#317CFA, .5); } .block3{ .block(); width: 192px; }