ea
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav",
|
||||
"checkin-popup": "/components/checkin-popup/checkin-popup"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import { analysis, tasksearch, polishScript, createTask } from "../../utils/request"
|
||||
|
||||
const sampleText = '解析中...'
|
||||
const checkinStorageKey = 'lastCheckinDate'
|
||||
|
||||
function getTodayKey() {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
Component({
|
||||
data: {
|
||||
parsed: false,
|
||||
videoLink: '',
|
||||
scriptText: sampleText,
|
||||
showCheckinPopup: false,
|
||||
taskId: '',
|
||||
parseId: '',
|
||||
polishing: false
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const today = getTodayKey()
|
||||
const lastCheckinDate = wx.getStorageSync(checkinStorageKey)
|
||||
|
||||
if (lastCheckinDate !== today) {
|
||||
this.setData({ showCheckinPopup: true })
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleInput(e: any) {
|
||||
this.setData({
|
||||
videoLink: e.detail.value,
|
||||
})
|
||||
},
|
||||
onUnload() {
|
||||
this.setData({ videoLink: '', parsed: false, scriptText: '' })
|
||||
},
|
||||
handlePaste() {
|
||||
wx.getClipboardData({
|
||||
success: (res) => {
|
||||
this.setData({
|
||||
videoLink: res.data || '0.58 J@i.cN 08/24 :0pm ULw:/ # 新到 # 国五排放 # 货车出售转让 https://v.douyin.com/tHoCmTcQT2Q/ 复制此链接，打开Dou音搜索，直接观看视频！',
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.setData({
|
||||
videoLink: '0.58 J@i.cN 08/24 :0pm ULw:/ # 新到 # 国五排放 # 货车出售转让 https://v.douyin.com/tHoCmTcQT2Q/ 复制此链接，打开Dou音搜索，直接观看视频！',
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
handleParse() {
|
||||
if (this.data.videoLink == '') {
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '解析链接不能为空',
|
||||
showCancel: false
|
||||
})
|
||||
return;
|
||||
}
|
||||
wx.showLoading({ title: '解析中.' });
|
||||
analysis(this.data.videoLink).then((res: any) => {
|
||||
console.log(res);
|
||||
wx.hideLoading();
|
||||
if (!res.code) {
|
||||
this.setData({
|
||||
parsed: true,
|
||||
taskId: '',
|
||||
parseId: String(res.data.parseId || res.data.taskId || '')
|
||||
})
|
||||
wx.showLoading({ title: '等待结果中...', mask: true });
|
||||
this.tasksearch(String(res.data.parseId || res.data.taskId || ''))
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '解析失败，请确认链接的有效性',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
wx.hideLoading();
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '解析失败，请重试',
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
tasksearch(taskId: string) {
|
||||
let that = this;
|
||||
tasksearch(taskId).then((res: any) => {
|
||||
if (!res.code) {
|
||||
wx.hideLoading();
|
||||
|
||||
this.setData({ scriptText: (res.data && res.data.scriptText) || '' })
|
||||
} else {
|
||||
setTimeout(() => that.tasksearch(taskId), 500);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleReset() {
|
||||
this.setData({
|
||||
parsed: false,
|
||||
scriptText: '',
|
||||
})
|
||||
this.handleParse();
|
||||
},
|
||||
handleCopy() {
|
||||
wx.setClipboardData({
|
||||
data: this.data.scriptText,
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '您还未授于剪切板权限'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePolish() {
|
||||
if (!(this.data.parseId || this.data.taskId) || !this.data.scriptText) {
|
||||
wx.showToast({ title: '暂无可润色文案', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (this.data.polishing) return
|
||||
|
||||
this.setData({ polishing: true })
|
||||
wx.showLoading({ title: '润色中...', mask: true })
|
||||
polishScript(this.data.parseId || this.data.taskId, this.data.scriptText, 'optimize').then((res: any) => {
|
||||
wx.hideLoading()
|
||||
this.setData({ polishing: false })
|
||||
if (!res.code) {
|
||||
this.setData({ scriptText: res.data.scriptText })
|
||||
wx.showToast({ title: '已润色', icon: 'success' })
|
||||
return
|
||||
}
|
||||
wx.showModal({ title: '温馨提示', content: res.message || '润色失败，请稍后再试', showCancel: false })
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
wx.hideLoading()
|
||||
this.setData({ polishing: false })
|
||||
wx.showModal({ title: '温馨提示', content: '润色失败，请稍后再试', showCancel: false })
|
||||
})
|
||||
},
|
||||
handleGoCreate() {
|
||||
const parseId = this.data.parseId || this.data.taskId
|
||||
if (!parseId || !this.data.scriptText) {
|
||||
wx.showToast({ title: '请先完成文案提取', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
wx.showLoading({ title: '创建任务中', mask: true })
|
||||
createTask(parseId, this.data.scriptText).then((res: any) => {
|
||||
wx.hideLoading()
|
||||
if (!res.code && res.data && res.data.taskId) {
|
||||
this.setData({ taskId: res.data.taskId })
|
||||
wx.navigateTo({
|
||||
url: '/pages/aiPackage/preview/index?taskId=' + res.data.taskId,
|
||||
})
|
||||
return
|
||||
}
|
||||
wx.showModal({ title: '温馨提示', content: res.message || '创建任务失败，请稍后再试', showCancel: false })
|
||||
}).catch(() => {
|
||||
wx.hideLoading()
|
||||
wx.showModal({ title: '温馨提示', content: '网络异常，请稍后再试', showCancel: false })
|
||||
})
|
||||
},
|
||||
handleExperience() {
|
||||
this.setData({
|
||||
videoLink: 'https://v.douyin.com/example/',
|
||||
parsed: true,
|
||||
})
|
||||
},
|
||||
handleCheckinClose() {
|
||||
wx.setStorageSync(checkinStorageKey, getTodayKey())
|
||||
this.setData({ showCheckinPopup: false })
|
||||
},
|
||||
handleCheckinRule() {
|
||||
wx.showToast({ title: '每日签到可领取金币', icon: 'none' })
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<view class="home-page">
|
||||
<custom-nav padding-x="28">
|
||||
<view class="topbar">
|
||||
<text class="brand">数字人视频工厂</text>
|
||||
<view class="coin-pill">
|
||||
<image class="coin-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text class="coin-label">金币</text>
|
||||
<text class="coin-count">128</text>
|
||||
</view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="home-content">
|
||||
<view class="hero">
|
||||
<image src="../../static/images/indexed/top.png" style="width: 698rpx;height: 228rpx;"></image>
|
||||
</view>
|
||||
|
||||
<view class="card parse-card">
|
||||
<view class="card-head">
|
||||
<view class="section-title">
|
||||
<text class="step-dot">1</text>
|
||||
<text>粘贴视频链接</text>
|
||||
</view>
|
||||
<view class="help-link">
|
||||
<text class="help-dot">?</text>
|
||||
<text>如何获取链接?</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-row">
|
||||
<input class="link-input" value="{{videoLink}}" placeholder="粘贴视频链接到这里" placeholder-class="input-placeholder" bindinput="handleInput" />
|
||||
<view class="paste-btn" bindtap="handlePaste">一键粘贴</view>
|
||||
</view>
|
||||
|
||||
<view class="primary-action" bindtap="handleParse">
|
||||
<image class="plane-icon icon-placeholder" src="/static/images/xfj.png" mode="aspectFit"></image>
|
||||
<text>开始解析</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<block wx:if="{{parsed}}">
|
||||
<view class="success-strip">
|
||||
<image class="success-icon icon-placeholder" src="/static/images/checked.png" mode="aspectFit"></image>
|
||||
<view class="success-copy">
|
||||
<text class="success-title">链接解析成功</text>
|
||||
<text class="success-subtitle">已为你提取到口播文案</text>
|
||||
</view>
|
||||
<view class="outline-btn" bindtap="handleReset">重新解析</view>
|
||||
</view>
|
||||
|
||||
<view class="card copy-card">
|
||||
<view class="card-head copy-head">
|
||||
<text class="copy-title">提取到的文案</text>
|
||||
<view class="copy-btn" bindtap="handleCopy">
|
||||
<image class="copy-icon icon-placeholder" src="/static/images/file_copy.png" mode="aspectFit"></image>
|
||||
<text>复制文案</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="copy-box">
|
||||
<text>{{scriptText}}</text>
|
||||
</view>
|
||||
<view class="polish-btn" bindtap="handlePolish">
|
||||
<view class="polish-text">
|
||||
<image class="spark-icon icon-placeholder" src="/static/images/filter-3-filled.png" mode="aspectFit"></image>
|
||||
<text class="polish-title">AI 一键润色</text>
|
||||
</view>
|
||||
<view><text class="polish-subtitle">让口播更自然，更吸引人</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip-strip">
|
||||
<image class="tip-icon icon-placeholder" src="/static/images/lightbulb.png" mode="aspectFit"></image>
|
||||
<text>润色后可进入下一步，设置数字人和视频背景</text>
|
||||
</view>
|
||||
|
||||
<view class="generate-btn" bindtap="handleGoCreate">
|
||||
<text>去生成数字人视频</text>
|
||||
<image class="arrow-icon icon-placeholder" src="/static/images/chevron-down.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<view class="flow-card">
|
||||
<image src="../../static/images/indexed/lc_card.png" style="width: 699rpx;height: 298rpx;"></image>
|
||||
</view>
|
||||
|
||||
<view class="sample-card" bindtap="handleExperience">
|
||||
<image src="../../static/images/indexed/down_bottom.png" style="width: 100%;" mode="widthFix"></image>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<checkin-popup visible="{{showCheckinPopup}}" bind:close="handleCheckinClose" bind:rule="handleCheckinRule"></checkin-popup>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -0,0 +1,809 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user