810 lines
14 KiB
Plaintext
810 lines
14 KiB
Plaintext
page {
|
|
min-height: 100vh;
|
|
background: #f8faff;
|
|
color: #101522;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.home-page {
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
/* background:
|
|
radial-gradient(circle at 74% 11%, rgba(116, 114, 255, 0.13), transparent 18%),
|
|
linear-gradient(180deg, #ffffff 0%, #f7f9ff 56%, #ffffff 100%); */
|
|
}
|
|
|
|
.home-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
padding: 22rpx 28rpx 22rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.topbar {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 32rpx;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
color: #121521;
|
|
}
|
|
|
|
.coin-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
height: 52rpx;
|
|
margin-right: 160rpx;
|
|
margin-bottom: 10rpx;
|
|
padding: 0 22rpx 0 12rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
box-shadow: 0 6rpx 18rpx rgba(84, 91, 167, 0.14);
|
|
border: 1rpx solid rgba(222, 226, 255, 0.88);
|
|
}
|
|
|
|
.coin-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 18rpx;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #ffd875, #ff9f25);
|
|
}
|
|
|
|
.coin-label {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #25283a;
|
|
}
|
|
|
|
.coin-count {
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
color: #6763ff;
|
|
}
|
|
|
|
.hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 238rpx;
|
|
padding-top: 16rpx;
|
|
}
|
|
|
|
.hero-copy {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.hero-title-accent,
|
|
.hero-title-main {
|
|
display: block;
|
|
font-size: 44rpx;
|
|
line-height: 1.2;
|
|
font-weight: 900;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.hero-title-accent {
|
|
color: #6356ff;
|
|
text-shadow: 0 5rpx 0 rgba(99, 86, 255, 0.12);
|
|
}
|
|
|
|
.hero-title-main {
|
|
margin-top: 10rpx;
|
|
color: #070a16;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
margin-top: 32rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #4a4e5d;
|
|
}
|
|
|
|
.hero-visual {
|
|
width: 236rpx;
|
|
min-height: 202rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.visual-halo {
|
|
width: 162rpx;
|
|
height: 162rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, rgba(111, 107, 255, 0.18), rgba(92, 191, 255, 0.05));
|
|
margin-bottom: -138rpx;
|
|
transform: translateX(18rpx);
|
|
}
|
|
|
|
.visual-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: -16rpx;
|
|
}
|
|
|
|
.video-tile {
|
|
width: 110rpx;
|
|
height: 100rpx;
|
|
border-radius: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #7d6dff 0%, #358cf3 100%);
|
|
box-shadow: 22rpx 12rpx 0 rgba(81, 210, 255, 0.34), 0 16rpx 34rpx rgba(77, 83, 234, 0.34);
|
|
transform: translateY(-18rpx);
|
|
}
|
|
|
|
.play-mark {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 24rpx solid transparent;
|
|
border-bottom: 24rpx solid transparent;
|
|
border-left: 34rpx solid #ffffff;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.ai-chip {
|
|
width: 48rpx;
|
|
height: 50rpx;
|
|
border-radius: 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 23rpx;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #579dff, #8852ff);
|
|
box-shadow: 0 10rpx 22rpx rgba(109, 88, 255, 0.28);
|
|
margin-left: -4rpx;
|
|
transform: translateY(8rpx);
|
|
}
|
|
|
|
.orbital-base {
|
|
width: 178rpx;
|
|
height: 58rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(90deg, #6c55f8, #edf6ff 46%, #8873ff);
|
|
box-shadow: 0 12rpx 22rpx rgba(96, 116, 255, 0.22);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.base-center {
|
|
width: 110rpx;
|
|
height: 34rpx;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
box-shadow: inset 0 0 14rpx rgba(92, 115, 255, 0.2);
|
|
}
|
|
|
|
.card,
|
|
.sample-card,
|
|
.success-strip,
|
|
.tip-strip {
|
|
/* border: 1rpx solid rgba(215, 220, 249, 0.95); */
|
|
box-shadow: 0 8rpx 24rpx rgba(74, 88, 148, 0.06);
|
|
background: rgba(255, 255, 255, 0.94);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 18rpx;
|
|
padding: 26rpx 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
font-size: 26rpx;
|
|
line-height: 1.2;
|
|
font-weight: 800;
|
|
color: #141720;
|
|
}
|
|
|
|
.step-dot {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 20rpx;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #506bff, #8155ff);
|
|
}
|
|
|
|
.help-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
color: #8389a5;
|
|
font-size: 21rpx;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.help-dot {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 3rpx solid #a7add3;
|
|
font-size: 17rpx;
|
|
line-height: 1;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input-row {
|
|
margin-top: 26rpx;
|
|
height: 84rpx;
|
|
padding: 0 16rpx 0 22rpx;
|
|
border-radius: 14rpx;
|
|
border: 2rpx solid #d8d5ff;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.link-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 80rpx;
|
|
font-size: 25rpx;
|
|
color: #2a3041;
|
|
}
|
|
|
|
.input-placeholder {
|
|
color: #a9aec6;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.paste-btn {
|
|
width: 124rpx;
|
|
height: 50rpx;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
border-radius: 10rpx;
|
|
color: #ffffff;
|
|
font-size: 22rpx;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #528bff, #7b52ff);
|
|
}
|
|
|
|
.primary-action,
|
|
.polish-btn,
|
|
.generate-btn,
|
|
.sample-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, #4f85ff 0%, #8b3df0 100%);
|
|
box-shadow: 0 8rpx 18rpx rgba(84, 96, 255, 0.18);
|
|
}
|
|
|
|
.primary-action {
|
|
margin-top: 28rpx;
|
|
height: 74rpx;
|
|
border-radius: 14rpx;
|
|
gap: 18rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.plane-icon {
|
|
width: 28rpx;
|
|
height: 22rpx;
|
|
display: block;
|
|
border-top: 10rpx solid transparent;
|
|
border-bottom: 10rpx solid transparent;
|
|
border-left: 32rpx solid #ffffff;
|
|
box-sizing: border-box;
|
|
transform: rotate(-22deg);
|
|
}
|
|
|
|
.success-strip {
|
|
min-height: 70rpx;
|
|
border-radius: 18rpx;
|
|
padding: 12rpx 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14rpx;
|
|
background: linear-gradient(90deg, #e7fbf0 0%, #f6fffb 100%);
|
|
border-color: #c8f1dc;
|
|
}
|
|
|
|
.success-icon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
background: #24c878;
|
|
}
|
|
|
|
.check-mark {
|
|
width: 18rpx;
|
|
height: 10rpx;
|
|
display: block;
|
|
border-left: 5rpx solid #ffffff;
|
|
border-bottom: 5rpx solid #ffffff;
|
|
transform: rotate(-45deg) translateY(-2rpx);
|
|
}
|
|
|
|
.success-copy {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.success-title {
|
|
color: #131720;
|
|
font-size: 25rpx;
|
|
font-weight: 800;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.success-subtitle {
|
|
margin-top: 4rpx;
|
|
color: #747b8d;
|
|
font-size: 21rpx;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.outline-btn {
|
|
width: 118rpx;
|
|
height: 46rpx;
|
|
border-radius: 999rpx;
|
|
border: 2rpx solid #c4c4ff;
|
|
color: #7165ff;
|
|
text-align: center;
|
|
line-height: 46rpx;
|
|
font-size: 21rpx;
|
|
font-weight: 800;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.copy-card {
|
|
gap: 18rpx;
|
|
padding-bottom: 18rpx;
|
|
}
|
|
|
|
.copy-head {
|
|
min-height: 36rpx;
|
|
}
|
|
|
|
.copy-title {
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
color: #121722;
|
|
}
|
|
|
|
.copy-btn {
|
|
height: 38rpx;
|
|
padding: 0 12rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
border: 1rpx solid #e0ddff;
|
|
color: #665fff;
|
|
background: #ffffff;
|
|
font-size: 21rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.copy-icon {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
display: block;
|
|
border: 3rpx solid currentColor;
|
|
border-radius: 3rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 6rpx -5rpx 0 -2rpx #ffffff, 6rpx -5rpx 0 0 currentColor;
|
|
}
|
|
|
|
.copy-box {
|
|
min-height: 168rpx;
|
|
padding: 12rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
border: 2rpx solid #d7d5ff;
|
|
color: #232838;
|
|
font-size: 22rpx;
|
|
line-height: 1.55;
|
|
font-weight: 600;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.polish-btn {
|
|
height: 72rpx;
|
|
border-radius: 13rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.spark-icon {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
display: block;
|
|
margin-right: 10rpx;
|
|
background: #ffffff;
|
|
border-radius: 4rpx;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.polish-text {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
/* gap: 4rpx; */
|
|
}
|
|
|
|
.polish-title {
|
|
font-size: 28rpx;
|
|
line-height: 1;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.polish-subtitle {
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.tip-strip {
|
|
min-height: 44rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12rpx;
|
|
color: #6569ff;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
background: #f8faff;
|
|
}
|
|
|
|
.tip-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 3rpx solid #6867ff;
|
|
box-sizing: border-box;
|
|
font-size: 18rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.generate-btn {
|
|
height: 58rpx;
|
|
border-radius: 13rpx;
|
|
gap: 28rpx;
|
|
font-size: 27rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
display: block;
|
|
border-top: 5rpx solid #ffffff;
|
|
border-right: 5rpx solid #ffffff;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.flow-card {
|
|
/* padding-top: 28rpx;
|
|
padding-bottom: 30rpx;
|
|
*/
|
|
}
|
|
|
|
.flow-heading {
|
|
font-size: 27rpx;
|
|
font-weight: 800;
|
|
color: #161923;
|
|
}
|
|
|
|
.flow-list {
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flow-item {
|
|
width: 178rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.flow-icon {
|
|
width: 86rpx;
|
|
height: 82rpx;
|
|
border-radius: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6455ff;
|
|
font-weight: 900;
|
|
background: linear-gradient(145deg, #ffffff, #eef1ff);
|
|
box-shadow: inset 0 0 0 2rpx rgba(213, 218, 255, 0.9), 0 8rpx 16rpx rgba(85, 96, 160, 0.08);
|
|
}
|
|
|
|
.chain-icon text,
|
|
.chain-icon::after {
|
|
width: 34rpx;
|
|
height: 20rpx;
|
|
border: 6rpx solid currentColor;
|
|
border-radius: 999rpx;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
}
|
|
|
|
.chain-icon {
|
|
gap: 0;
|
|
transform: rotate(-36deg);
|
|
}
|
|
|
|
.chain-icon::after {
|
|
content: "";
|
|
margin-left: -10rpx;
|
|
}
|
|
|
|
.doc-icon {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.bot-icon text {
|
|
width: 48rpx;
|
|
height: 34rpx;
|
|
display: block;
|
|
border-radius: 16rpx;
|
|
background: currentColor;
|
|
}
|
|
|
|
.bot-icon text::before,
|
|
.bot-icon text::after {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
.flow-title {
|
|
margin-top: 18rpx;
|
|
color: #141720;
|
|
font-size: 22rpx;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.flow-desc {
|
|
margin-top: 10rpx;
|
|
color: #888fa5;
|
|
font-size: 19rpx;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.flow-arrow {
|
|
width: 28rpx;
|
|
height: 4rpx;
|
|
border-radius: 999rpx;
|
|
background: #c1c2ec;
|
|
align-self: center;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
.flow-arrow::after {
|
|
content: "";
|
|
display: block;
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-top: 4rpx solid #c1c2ec;
|
|
border-right: 4rpx solid #c1c2ec;
|
|
transform: rotate(45deg) translate(8rpx, -9rpx);
|
|
}
|
|
|
|
.sample-card {
|
|
/* min-height: 124rpx; */
|
|
border-radius: 18rpx;
|
|
/* padding: 18rpx 28rpx 18rpx 24rpx; */
|
|
display: flex;
|
|
align-items: center;
|
|
/* gap: 20rpx; */
|
|
background: linear-gradient(100deg, #f0f4ff 0%, #fbfcff 100%);
|
|
}
|
|
|
|
.gift-box {
|
|
width: 88rpx;
|
|
height: 86rpx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
filter: drop-shadow(0 8rpx 14rpx rgba(112, 111, 255, 0.22));
|
|
}
|
|
|
|
.gift-top {
|
|
width: 72rpx;
|
|
height: 18rpx;
|
|
border-radius: 7rpx 7rpx 3rpx 3rpx;
|
|
background: linear-gradient(90deg, #dfe8ff, #7874ff, #dfe8ff);
|
|
}
|
|
|
|
.gift-body {
|
|
width: 62rpx;
|
|
height: 54rpx;
|
|
border-radius: 4rpx 4rpx 9rpx 9rpx;
|
|
background: linear-gradient(90deg, #d7e3ff 0 35%, #8777ff 35% 52%, #c8d9ff 52% 100%);
|
|
}
|
|
|
|
.sample-copy {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.sample-title {
|
|
color: #141721;
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.sample-desc {
|
|
color: #7f859b;
|
|
font-size: 20rpx;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sample-btn {
|
|
width: 150rpx;
|
|
height: 62rpx;
|
|
border-radius: 999rpx;
|
|
flex-shrink: 0;
|
|
font-size: 23rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.tabbar {
|
|
height: 110rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border-top: 1rpx solid rgba(219, 224, 241, 0.86);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.tab-item {
|
|
width: 170rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
color: #626777;
|
|
font-size: 21rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #665cff;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.tab-icon {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
border-radius: 9rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22rpx;
|
|
line-height: 1;
|
|
color: currentColor;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tab-item.active .tab-icon {
|
|
color: #ffffff;
|
|
background: linear-gradient(135deg, #536dff, #7b55ff);
|
|
}
|
|
|
|
.record-icon {
|
|
border: 4rpx solid currentColor;
|
|
border-radius: 9rpx;
|
|
}
|
|
|
|
.record-icon text {
|
|
width: 0;
|
|
height: 0;
|
|
display: block;
|
|
border-top: 7rpx solid transparent;
|
|
border-bottom: 7rpx solid transparent;
|
|
border-left: 11rpx solid currentColor;
|
|
margin-left: 3rpx;
|
|
}
|
|
|
|
.mine-icon {
|
|
border: 4rpx solid currentColor;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.home-icon text {
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
display: block;
|
|
border-radius: 4rpx;
|
|
background: currentColor;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.icon-placeholder {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|