ea
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { taskinfo } from "../../../utils/request"
|
||||
|
||||
function createTaskId() {
|
||||
return `task_${Date.now()}`
|
||||
}
|
||||
|
||||
Page({
|
||||
|
||||
data: {
|
||||
taskinfo: null as any,
|
||||
userinfo: null,
|
||||
price: 40,
|
||||
start: false
|
||||
},
|
||||
|
||||
onLoad(ops: { taskId: string }) {
|
||||
this.setData({ userinfo: wx.getStorageSync('userInfo') })
|
||||
taskinfo(ops.taskId).then((res: any) => {
|
||||
console.log(res);
|
||||
if (!res.code) {
|
||||
this.setData({ taskinfo: res.data });
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.navigateBack({
|
||||
fail: () => wx.navigateTo({ url: '/pages/aiPackage/bg/index' }),
|
||||
})
|
||||
},
|
||||
|
||||
handleViewScript() {
|
||||
wx.showToast({ title: '展示完整文案', icon: 'none' })
|
||||
},
|
||||
|
||||
handleGenerate() {
|
||||
if (!this.data.taskinfo) {
|
||||
return;
|
||||
}
|
||||
let task_no = this.data.taskinfo.task_no || '';
|
||||
const detailUrl = `/pages/historyPackage/historyDetail/index?status=processing&taskId=${encodeURIComponent(task_no)}`
|
||||
|
||||
let userinfo = wx.getStorageSync('userinfo');
|
||||
if (userinfo.diamond < this.data.price) {
|
||||
wx.showModal({ title: '温馨提示', content: '余额不足' })
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({ start: true })
|
||||
|
||||
// wx.redirectTo({ url: detailUrl })
|
||||
},
|
||||
|
||||
handleDownload() {
|
||||
// wx.showToast({ title: '开始下载', icon: 'none' })
|
||||
wx.downloadFile({
|
||||
url: '',
|
||||
success(res) {
|
||||
wx.showModal({ title: '温馨提示', content: '下载成功' })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleRegenerate() {
|
||||
// wx.showToast({ title: '重新生成', icon: 'none' })
|
||||
},
|
||||
|
||||
handleHome() {
|
||||
wx.switchTab({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<view class="gen-page">
|
||||
<custom-nav content-height="62" padding-x="34">
|
||||
<view class="gen-nav">
|
||||
<view class="nav-back" bindtap="handleBack"><text></text></view>
|
||||
<text class="nav-title">生成视频</text>
|
||||
<view class="coin-pill">
|
||||
<!-- <image class="coin-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>金币</text>
|
||||
<text class="coin-count">128</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="gen-content">
|
||||
<view class="confirm-card">
|
||||
<text class="card-title">生成确认</text>
|
||||
<view class="info-list">
|
||||
<view class="info-row avatar-row">
|
||||
<text class="info-label">数字人形象</text>
|
||||
<image class="small-avatar icon-placeholder" src="{{ taskinfo.avatar.image_url }}" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">背景模板</text>
|
||||
<text class="info-value">清新直播间</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">音色</text>
|
||||
<view class="voice-value">
|
||||
<image class="voice-icon icon-placeholder" src="/static/images/yinse.png" mode="aspectFit"></image>
|
||||
<text>已上传专属音色</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-row script-row">
|
||||
<text class="info-label">文案摘要</text>
|
||||
<view class="script-summary">
|
||||
<text>{{ taskinfo.script_text }}</text>
|
||||
<view class="view-script" bindtap="handleViewScript">
|
||||
<text>查看完整文案</text>
|
||||
<text class="right-arrow"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cost-card" wx:if="{{!start}}">
|
||||
<view class="cost-row">
|
||||
<text>本次生成消耗</text>
|
||||
<view class="amount"><text>{{price}}</text><text>金币</text></view>
|
||||
</view>
|
||||
<view class="cost-row">
|
||||
<text>当前余额</text>
|
||||
<view class="balance-line">
|
||||
<view class="amount"><text>{{userinfo.diamond}}</text><text>金币</text></view>
|
||||
<view class="{{ userinfo.diamond < price ?'enough-waring': 'enough'}}">
|
||||
<text></text><text>{{userinfo.diamond < price? '余额不足' : '余额充足'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="generate-action" bindtap="handleGenerate">
|
||||
<image class="sparkle icon-placeholder" src="/static/images/filter-3-filled.png" mode="aspectFit"></image>
|
||||
<text>一键生成数字人视频</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{start}}" style="display:flex;flex-direction: column;gap: 30rpx;">
|
||||
<view class="result-title">
|
||||
<image class="result-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>生成结果</text>
|
||||
</view>
|
||||
|
||||
<view class="video-preview">
|
||||
<view class="preview-bg">
|
||||
<image class="preview-plant plant-left icon-placeholder" src="/static/images/my/image.png" mode="aspectFit">
|
||||
</image>
|
||||
<image class="preview-plant plant-right icon-placeholder" src="/static/images/my/image.png" mode="aspectFit">
|
||||
</image>
|
||||
<image class="preview-avatar icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<image class="play-btn icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-actions">
|
||||
<view class="action-primary" bindtap="handleDownload">
|
||||
<image class="download-icon icon-placeholder" src="/static/images/download.png" mode="aspectFit"></image>
|
||||
<text>下载视频</text>
|
||||
</view>
|
||||
<view class="action-outline" bindtap="handleRegenerate">
|
||||
<image class="refresh-icon icon-placeholder" src="/static/images/currency-exchange.png" mode="aspectFit">
|
||||
</image>
|
||||
<text>重新生成</text>
|
||||
</view>
|
||||
<view class="action-outline" bindtap="handleHome">
|
||||
<image class="home-icon icon-placeholder" src="/static/images/to_index.png" mode="aspectFit"></image>
|
||||
<text>返回首页</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="save-tip">
|
||||
<image class="tip-icon icon-placeholder" src="/static/images/info-circle.png" mode="aspectFit"></image>
|
||||
<text>视频已为你自动保存到【创作记录】</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,590 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #f8faff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.gen-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(104, 126, 255, 0.08), transparent 34%),
|
||||
radial-gradient(circle at 88% 8%, rgba(130, 86, 255, 0.08), transparent 30%),
|
||||
linear-gradient(180deg, #fbfcff 0%, #f6f8ff 46%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.gen-nav {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 60rpx;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #111827;
|
||||
font-size: 34rpx;
|
||||
line-height: 42rpx;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.coin-pill {
|
||||
height: 50rpx;
|
||||
padding: 0 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
/* border: 2rpx solid #eef0fb; */
|
||||
border-radius: 28rpx;
|
||||
/* background: rgba(255, 255, 255, 0.88); */
|
||||
/* box-shadow: 0 8rpx 18rpx rgba(93, 102, 158, 0.12); */
|
||||
color: #111827;
|
||||
font-size: 22rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 800;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #ffd45d 0%, #ffa51f 100%);
|
||||
font-size: 17rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.coin-count {
|
||||
color: #6657ff;
|
||||
}
|
||||
|
||||
.gen-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.confirm-card,
|
||||
.cost-card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 2rpx solid #e6e9ff;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 14rpx 34rpx rgba(80, 92, 170, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
padding: 22rpx 28rpx 10rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #111827;
|
||||
font-size: 27rpx;
|
||||
line-height: 34rpx;
|
||||
font-weight: 900;
|
||||
padding-bottom: 18rpx;
|
||||
border-bottom: 2rpx solid #edf0f8;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
min-height: 62rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
border-bottom: 2rpx solid #edf0f8;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
min-height: 72rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
flex: 0 0 160rpx;
|
||||
color: #303748;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.info-value,
|
||||
.voice-value,
|
||||
.script-summary {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #41495b;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.small-avatar {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 10rpx;
|
||||
background:
|
||||
radial-gradient(circle at 50% 33%, #ffe1d2 0 17rpx, transparent 18rpx),
|
||||
radial-gradient(circle at 50% 34%, #33201b 0 24rpx, transparent 25rpx),
|
||||
linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
|
||||
flex: 0 0 58rpx;
|
||||
}
|
||||
|
||||
.voice-value {
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.voice-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6d58ff;
|
||||
flex: 0 0 28rpx;
|
||||
}
|
||||
|
||||
.voice-icon::before,
|
||||
.voice-icon::after,
|
||||
.voice-icon text {
|
||||
content: '';
|
||||
width: 5rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #6d58ff;
|
||||
}
|
||||
|
||||
.voice-icon::before { height: 18rpx; }
|
||||
.voice-icon text { height: 28rpx; margin: 0 4rpx; display: block; }
|
||||
.voice-icon::after { height: 20rpx; }
|
||||
|
||||
.script-row {
|
||||
align-items: flex-start;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
.script-summary {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.view-script {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
color: #7062ff;
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-right: 4rpx solid #7062ff;
|
||||
border-top: 4rpx solid #7062ff;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cost-card {
|
||||
padding: 12rpx 24rpx 22rpx;
|
||||
background: linear-gradient(100deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 255, 248, 0.92) 100%);
|
||||
margin-bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.cost-row {
|
||||
min-height: 52rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2rpx solid rgba(224, 229, 242, 0.75);
|
||||
color: #303748;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.amount,
|
||||
.balance-line,
|
||||
.enough {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amount {
|
||||
gap: 10rpx;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.amount text:first-child {
|
||||
font-size: 32rpx;
|
||||
line-height: 38rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.amount text:last-child {
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.balance-line {
|
||||
gap: 22rpx;
|
||||
}
|
||||
|
||||
.enough {
|
||||
gap: 8rpx;
|
||||
color: #40bf83;
|
||||
font-size: 21rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.enough-waring {
|
||||
gap: 8rpx;
|
||||
color: red;
|
||||
font-size: 21rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.enough text:first-child {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
background: #42c982;
|
||||
}
|
||||
|
||||
.enough text:first-child::after {
|
||||
content: '';
|
||||
width: 11rpx;
|
||||
height: 7rpx;
|
||||
margin: 7rpx auto 0;
|
||||
display: block;
|
||||
border-left: 3rpx solid #ffffff;
|
||||
border-bottom: 3rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.generate-action {
|
||||
height: 66rpx;
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(100deg, #4e84ff 0%, #7d3ff3 100%);
|
||||
box-shadow: 0 12rpx 24rpx rgba(91, 86, 245, 0.22);
|
||||
font-size: 27rpx;
|
||||
line-height: 34rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 42%, #ffffff 43% 57%, transparent 58%),
|
||||
linear-gradient(0deg, transparent 42%, #ffffff 43% 57%, transparent 58%);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.result-title {
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
color: #3f4dff;
|
||||
font-size: 25rpx;
|
||||
line-height: 32rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
border: 4rpx solid #625aff;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.video-preview {
|
||||
width: 100%;
|
||||
height: 274rpx;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12rpx 30rpx rgba(83, 92, 151, 0.13);
|
||||
}
|
||||
|
||||
.preview-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255,255,255,0.36) 0 3rpx, transparent 3rpx 64rpx),
|
||||
linear-gradient(180deg, #fff4e3 0%, #f1dcc3 58%, #d9b98f 100%);
|
||||
}
|
||||
|
||||
.preview-plant {
|
||||
width: 86rpx;
|
||||
height: 126rpx;
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 50rpx 50rpx 12rpx 12rpx;
|
||||
background:
|
||||
radial-gradient(circle at 30% 24%, #79ad65 0 22rpx, transparent 23rpx),
|
||||
radial-gradient(circle at 66% 32%, #6aa05f 0 24rpx, transparent 25rpx),
|
||||
radial-gradient(circle at 50% 50%, #7eb86a 0 25rpx, transparent 26rpx),
|
||||
linear-gradient(180deg, transparent 0 82rpx, #a9794d 83rpx 100%);
|
||||
}
|
||||
|
||||
.plant-left {
|
||||
margin-right: 76rpx;
|
||||
}
|
||||
|
||||
.plant-right {
|
||||
margin-left: 76rpx;
|
||||
}
|
||||
|
||||
.preview-avatar {
|
||||
width: 176rpx;
|
||||
height: 236rpx;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-head {
|
||||
width: 116rpx;
|
||||
height: 130rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
border-radius: 60rpx 60rpx 42rpx 42rpx;
|
||||
background: linear-gradient(160deg, #241a18 0%, #604038 60%, #8a6258 100%);
|
||||
}
|
||||
|
||||
.avatar-face {
|
||||
width: 78rpx;
|
||||
height: 92rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border-radius: 42rpx 42rpx 34rpx 34rpx;
|
||||
background: linear-gradient(180deg, #ffe6d9 0%, #ffd0c2 100%);
|
||||
}
|
||||
|
||||
.avatar-eyes {
|
||||
width: 48rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.avatar-eyes text {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #241a18;
|
||||
}
|
||||
|
||||
.avatar-mouth {
|
||||
width: 26rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
background: #ca6975;
|
||||
}
|
||||
|
||||
.avatar-body {
|
||||
width: 160rpx;
|
||||
height: 106rpx;
|
||||
border-radius: 46rpx 46rpx 0 0;
|
||||
background: linear-gradient(120deg, #ffffff 0%, #f5f4f1 48%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
margin-left: -126rpx;
|
||||
margin-bottom: 54rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.82);
|
||||
border-radius: 50%;
|
||||
background: rgba(49, 43, 38, 0.48);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.play-btn text {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: 6rpx;
|
||||
border-top: 16rpx solid transparent;
|
||||
border-bottom: 16rpx solid transparent;
|
||||
border-left: 24rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.action-primary,
|
||||
.action-outline {
|
||||
height: 82rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border-radius: 14rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 31rpx;
|
||||
font-weight: 900;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(100deg, #5a80ff 0%, #764df3 100%);
|
||||
box-shadow: 0 12rpx 24rpx rgba(91, 86, 245, 0.18);
|
||||
}
|
||||
|
||||
.action-outline {
|
||||
color: #625aff;
|
||||
border: 2rpx solid #dce0f5;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-left: 4rpx solid #ffffff;
|
||||
border-bottom: 4rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border: 4rpx solid #625aff;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-icon {
|
||||
width: 25rpx;
|
||||
height: 22rpx;
|
||||
border: 4rpx solid #625aff;
|
||||
border-top: 0;
|
||||
border-radius: 4rpx;
|
||||
box-sizing: border-box;
|
||||
transform: translateY(4rpx);
|
||||
}
|
||||
|
||||
.home-icon::before {
|
||||
content: '';
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
display: block;
|
||||
border-left: 4rpx solid #625aff;
|
||||
border-top: 4rpx solid #625aff;
|
||||
transform: rotate(45deg) translate(-4rpx, -13rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.save-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
color: #8d94a5;
|
||||
font-size: 23rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3rpx solid #9aa1b2;
|
||||
border-radius: 50%;
|
||||
font-size: 16rpx;
|
||||
line-height: 18rpx;
|
||||
font-weight: 900;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
Reference in New Issue
Block a user