1486 lines
39 KiB
Vue
1486 lines
39 KiB
Vue
<template>
|
||
<view class="oneclick-container">
|
||
<view class="top-controls">
|
||
<view class="left-controls">
|
||
<view class="back-btn" @click="onBack">
|
||
<text class="icon-back">‹</text>
|
||
</view>
|
||
</view>
|
||
<view class="center-title">
|
||
<text class="title-text">视频生成</text>
|
||
</view>
|
||
</view>
|
||
<!-- 参考图片模块 -->
|
||
|
||
<view class="section-title-row">
|
||
<text class="section-title">参考图片（一张图）</text>
|
||
</view>
|
||
<view class="tips">
|
||
<text class="warning">特别提示：图片不可含人物，否则视频生成会失败</text>
|
||
</view>
|
||
|
||
<view class="upload-card" v-if="!refImage" @click="chooseImage">
|
||
<text class="upload-plus">+</text>
|
||
<text class="upload-text">添加参考</text>
|
||
</view>
|
||
<view class="upload-preview" v-else>
|
||
<view class="image-container">
|
||
<view class="image-loading" v-if="imageLoading">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">图片加载中...</text>
|
||
</view>
|
||
<image
|
||
:src="refImage"
|
||
mode="aspectFit"
|
||
class="preview-image"
|
||
@load="onImageLoad"
|
||
@error="onImageError"
|
||
:style="{ display: imageLoading ? 'none' : 'block' }"
|
||
></image>
|
||
<view class="image-error" v-if="imageError" @click="retryLoadImage">
|
||
<text class="error-text">图片加载中</text>
|
||
<text class="error-retry">点击重试</text>
|
||
</view>
|
||
</view>
|
||
<view class="preview-actions">
|
||
<button class="btn-secondary" size="mini" @click="removeImage">移除</button>
|
||
<button class="btn-secondary" size="mini" @click="chooseImage">更换</button>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 文案模块 -->
|
||
<view class="section-title-outer">
|
||
<text class="section-title">创意描述（一句话）</text>
|
||
<view class="desc-row">
|
||
<view class="desc-input-wrapper">
|
||
<textarea class="desc-input" :value="description" placeholder="请用一句话描述你要生成的视频内容" maxlength="800" @input="onDescInput"></textarea>
|
||
|
||
<!-- 语音输入按钮 -->
|
||
<view class="voice-btn" @click="startVoiceInput" v-if="!isRecording">
|
||
<text class="iconfont icon-laba"></text>
|
||
</view>
|
||
<view class="voice-btn recording" @click="stopVoiceInput" v-else>
|
||
<view class="recording-animation"></view>
|
||
<text class="recording-time">{{ recordDuration }}s</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 录音提示 -->
|
||
<view class="recording-hint" v-if="isRecording">
|
||
<text class="hint-icon">🎤</text>
|
||
<text class="hint-text">正在录音，点击右下角完成</text>
|
||
</view>
|
||
|
||
<view class="desc-actions">
|
||
<button class="btn-secondary" size="mini" @click="shuffleIdeas">换一组</button>
|
||
<button class="btn-secondary" size="mini" @click="clearDescription">清空</button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 时长选择 -->
|
||
<view class="section">
|
||
<text class="section-title">时长选择</text>
|
||
<view class="options-row">
|
||
<view :class="['option-chip', selectedDuration === 10 ? 'active' : '']" @click="selectDuration" :data-value="10">10秒</view>
|
||
<view :class="['option-chip', selectedDuration === 15 ? 'active' : '']" @click="selectDuration" :data-value="15">15秒</view>
|
||
<view :class="['option-chip', selectedDuration === 25 ? 'active' : '']" @click="selectDuration" :data-value="25">25秒</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 生成比例 -->
|
||
<view class="section">
|
||
<text class="section-title">生成比例</text>
|
||
<view class="options-row">
|
||
<view :class="['option-chip', selectedRatio === '9:16' ? 'active' : '']" @click="selectRatio" data-value="9:16">9:16（竖屏）</view>
|
||
<view :class="['option-chip', selectedRatio === '16:9' ? 'active' : '']" @click="selectRatio" data-value="16:9">16:9（横屏）</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- AI生成内容标识 -->
|
||
<view class="ai-notice">
|
||
<text class="ai-notice-text">内容由AI生成，结果仅供参考</text>
|
||
</view>
|
||
|
||
<!-- 底部操作 -->
|
||
<view class="footer">
|
||
<button class="btn-outline" @click="viewHistory">历史创作</button>
|
||
<button class="btn-primary" @click="onGenerate">立即生成（会员免费）</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from '@/api/models-api.js';
|
||
import { mapGetters } from 'vuex';
|
||
|
||
export default {
|
||
computed: {
|
||
...mapGetters(['userInfo','uid'])
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 0,
|
||
refImage: '',
|
||
imageLoading: false,
|
||
imageError: false,
|
||
description: '描述你想要生成的内容，尽量说清楚人物、场景、动作等，比如：一个女孩坐在新装修的客厅沙发上',
|
||
selectedDuration: 15,
|
||
selectedRatio: '9:16',
|
||
suggestions: [
|
||
'女孩自然的姿势贴地快递飞行，飞向湖面',
|
||
'黄昏城市街头，骑行穿梭灯影之间'
|
||
],
|
||
// 语音输入
|
||
isRecording: false,
|
||
recorderManager: null,
|
||
recordDuration: 0,
|
||
recordTimer: null,
|
||
sourceArticleId: ''
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
console.log('一键创作页面加载', options);
|
||
|
||
// 检查用户是否登录
|
||
if (!this.uid) {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/users/wechat_login/index'
|
||
});
|
||
}, 1500);
|
||
return;
|
||
}
|
||
|
||
this.computeStatusBarHeight();
|
||
if (options && options.description && options.from === 'video') {
|
||
const description = decodeURIComponent(options.description);
|
||
this.description = description;
|
||
console.log('从视频页面接收到描述内容:', description);
|
||
}
|
||
if (options && options.description && options.from === 'image') {
|
||
const description = decodeURIComponent(options.description);
|
||
this.description = description;
|
||
}
|
||
if (options && options.articleId) {
|
||
this.sourceArticleId = options.articleId;
|
||
}
|
||
|
||
// 初始化录音管理器
|
||
this.initRecorder();
|
||
},
|
||
onShow() {
|
||
// 检查用户是否登录
|
||
if (!this.uid) {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/users/wechat_login/index'
|
||
});
|
||
}, 1500);
|
||
return;
|
||
}
|
||
|
||
if (!this.statusBarHeight || this.statusBarHeight <= 0) {
|
||
this.computeStatusBarHeight();
|
||
}
|
||
},
|
||
|
||
onUnload() {
|
||
// 清理录音计时器
|
||
this.stopRecordTimer();
|
||
|
||
// 如果正在录音，停止录音
|
||
if (this.isRecording && this.recorderManager) {
|
||
this.recorderManager.stop();
|
||
}
|
||
},
|
||
methods: {
|
||
computeStatusBarHeight() {
|
||
const sys = uni.getSystemInfoSync() || {};
|
||
const sbh = sys.statusBarHeight;
|
||
const safeTop = sys.safeArea && typeof sys.safeArea.top === 'number' ? sys.safeArea.top : 0;
|
||
const isIOS = (sys.platform === 'ios') || /iphone|ipad|ipod/i.test(String(sys.model || ''));
|
||
const fallback = isIOS ? 44 : 24;
|
||
this.statusBarHeight = (sbh && sbh > 0) ? sbh : (safeTop && safeTop > 0 ? safeTop : fallback);
|
||
this.statusBarHeight += 30;
|
||
},
|
||
onBack() {
|
||
uni.navigateBack();
|
||
},
|
||
// 初始化录音管理器
|
||
initRecorder() {
|
||
// #ifdef MP-WEIXIN || APP-PLUS
|
||
this.recorderManager = uni.getRecorderManager();
|
||
|
||
// 录音开始事件
|
||
this.recorderManager.onStart(() => {
|
||
console.log('录音开始');
|
||
this.recordDuration = 0;
|
||
this.startRecordTimer();
|
||
});
|
||
|
||
// 录音结束事件
|
||
this.recorderManager.onStop((res) => {
|
||
console.log('录音结束', res);
|
||
this.stopRecordTimer();
|
||
|
||
if (res.duration < 1000) {
|
||
uni.showToast({
|
||
title: '录音时间太短',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 处理录音结果
|
||
this.handleRecordResult(res);
|
||
});
|
||
|
||
// 录音错误事件
|
||
this.recorderManager.onError((err) => {
|
||
console.error('录音错误:', err);
|
||
this.isRecording = false;
|
||
this.stopRecordTimer();
|
||
uni.showToast({
|
||
title: '录音失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
// H5 环境提示
|
||
console.log('H5环境暂不支持录音功能');
|
||
// #endif
|
||
},
|
||
|
||
// 开始录音计时
|
||
startRecordTimer() {
|
||
this.recordTimer = setInterval(() => {
|
||
this.recordDuration++;
|
||
if (this.recordDuration >= 60) {
|
||
// 录音超过60秒自动停止
|
||
this.stopVoiceInput();
|
||
}
|
||
}, 1000);
|
||
},
|
||
|
||
// 停止录音计时
|
||
stopRecordTimer() {
|
||
if (this.recordTimer) {
|
||
clearInterval(this.recordTimer);
|
||
this.recordTimer = null;
|
||
}
|
||
this.recordDuration = 0;
|
||
},
|
||
|
||
// 开始语音输入
|
||
startVoiceInput() {
|
||
// #ifdef H5
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: 'H5环境暂不支持语音输入，请使用小程序或APP',
|
||
showCancel: false
|
||
});
|
||
return;
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN || APP-PLUS
|
||
if (!this.recorderManager) {
|
||
uni.showToast({
|
||
title: '录音功能初始化失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 检查录音权限
|
||
uni.authorize({
|
||
scope: 'scope.record',
|
||
success: () => {
|
||
this.startRecording();
|
||
},
|
||
fail: () => {
|
||
uni.showModal({
|
||
title: '需要录音权限',
|
||
content: '请在设置中开启录音权限',
|
||
confirmText: '去设置',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
|
||
// 开始录音
|
||
startRecording() {
|
||
this.isRecording = true;
|
||
|
||
uni.showToast({
|
||
title: '开始录音',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
|
||
// 开始录音
|
||
this.recorderManager.start({
|
||
duration: 60000, // 最长录音60秒
|
||
sampleRate: 16000,
|
||
numberOfChannels: 1,
|
||
encodeBitRate: 96000,
|
||
format: 'mp3'
|
||
});
|
||
},
|
||
|
||
// 停止语音输入
|
||
stopVoiceInput() {
|
||
if (!this.isRecording) {
|
||
return;
|
||
}
|
||
|
||
this.isRecording = false;
|
||
|
||
// #ifdef MP-WEIXIN || APP-PLUS
|
||
if (this.recorderManager) {
|
||
this.recorderManager.stop();
|
||
}
|
||
// #endif
|
||
|
||
uni.showToast({
|
||
title: '正在识别...',
|
||
icon: 'loading',
|
||
duration: 2000
|
||
});
|
||
},
|
||
|
||
// 处理录音结果
|
||
async handleRecordResult(res) {
|
||
console.log('录音文件路径:', res.tempFilePath);
|
||
console.log('录音时长:', res.duration, 'ms');
|
||
|
||
try {
|
||
// 这里可以调用语音识别API
|
||
// 示例：将录音文件上传到服务器进行识别
|
||
const recognizedText = await this.recognizeSpeech(res.tempFilePath);
|
||
|
||
if (recognizedText) {
|
||
// 将识别结果添加到描述中
|
||
if (this.description) {
|
||
this.description = recognizedText;
|
||
} else {
|
||
this.description = recognizedText;
|
||
}
|
||
|
||
uni.showToast({
|
||
title: '识别成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('语音识别失败:', error);
|
||
uni.showToast({
|
||
title: '识别失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
|
||
// 语音识别（对接腾讯云语音识别服务）
|
||
async recognizeSpeech(audioPath) {
|
||
try {
|
||
// 1. 上传录音文件到服务器
|
||
console.log('开始上传录音文件:', audioPath);
|
||
const uploadRes = await api.uploadFile(audioPath, {
|
||
model: 'audio',
|
||
pid: '8'
|
||
});
|
||
|
||
if (!uploadRes || uploadRes.code !== 200) {
|
||
throw new Error('录音文件上传失败');
|
||
}
|
||
|
||
const audioUrl = uploadRes.data.fullUrl;
|
||
console.log('录音文件上传成功，URL:', audioUrl);
|
||
|
||
// 2. 创建语音识别任务
|
||
console.log('创建语音识别任务...');
|
||
const createTaskRes = await api.createAsrTask({
|
||
url: audioUrl,
|
||
engineModelType: '16k_zh',
|
||
channelNum: 1,
|
||
resTextFormat: 0,
|
||
sourceType: 0
|
||
});
|
||
|
||
if (!createTaskRes || createTaskRes.code !== 200) {
|
||
throw new Error('创建识别任务失败');
|
||
}
|
||
|
||
const taskId = createTaskRes.data.taskId;
|
||
console.log('识别任务创建成功，任务ID:', taskId);
|
||
|
||
// 3. 轮询查询识别结果
|
||
const result = await this.pollAsrResult(taskId);
|
||
|
||
// 4. 解析识别文本
|
||
const text = this.parseAsrResult(result);
|
||
|
||
if (!text) {
|
||
throw new Error('识别结果为空');
|
||
}
|
||
|
||
console.log('语音识别成功，结果:', text);
|
||
return text;
|
||
|
||
} catch (error) {
|
||
console.error('语音识别失败:', error);
|
||
throw error;
|
||
}
|
||
},
|
||
|
||
// 轮询查询ASR识别结果
|
||
async pollAsrResult(taskId, maxAttempts = 30, interval = 2000) {
|
||
let attempts = 0;
|
||
|
||
while (attempts < maxAttempts) {
|
||
attempts++;
|
||
console.log(`查询识别状态，第${attempts}次尝试...`);
|
||
|
||
try {
|
||
const statusRes = await api.queryAsrStatus(taskId);
|
||
|
||
if (!statusRes || statusRes.code !== 200) {
|
||
throw new Error('查询识别状态失败');
|
||
}
|
||
|
||
const status = statusRes.data.status;
|
||
const statusStr = statusRes.data.statusStr;
|
||
|
||
console.log(`任务状态: ${statusStr} (${status})`);
|
||
|
||
// status: 0-等待处理, 1-处理中, 2-识别成功, 3-识别失败
|
||
if (status === 2) {
|
||
// 识别成功
|
||
console.log('识别成功！');
|
||
return statusRes.data;
|
||
} else if (status === 3) {
|
||
// 识别失败
|
||
throw new Error(statusRes.data.errorMsg || '识别失败');
|
||
}
|
||
|
||
// 等待一段时间后继续查询
|
||
await new Promise(resolve => setTimeout(resolve, interval));
|
||
|
||
} catch (error) {
|
||
console.error('查询识别状态出错:', error);
|
||
|
||
// 如果不是最后一次尝试，继续重试
|
||
if (attempts < maxAttempts) {
|
||
await new Promise(resolve => setTimeout(resolve, interval));
|
||
continue;
|
||
}
|
||
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
throw new Error('识别超时，请重试');
|
||
},
|
||
|
||
// 解析ASR识别结果文本
|
||
parseAsrResult(data) {
|
||
if (!data || !data.result) {
|
||
return '';
|
||
}
|
||
|
||
let text = data.result;
|
||
|
||
// 去除时间戳标记，例如：[0:0.000,0:11.580]
|
||
text = text.replace(/\[\d+:\d+\.\d+,\d+:\d+\.\d+\]\s*/g, '');
|
||
|
||
// 去除多余的空格和换行
|
||
text = text.replace(/\n+/g, ' ').trim();
|
||
|
||
// 去除多余的空格
|
||
text = text.replace(/\s+/g, ' ');
|
||
|
||
return text;
|
||
},
|
||
|
||
async chooseImage() {
|
||
try {
|
||
const res = await new Promise((resolve, reject) => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: resolve,
|
||
fail: reject
|
||
});
|
||
});
|
||
|
||
uni.showLoading({
|
||
title: '正在上传图片...',
|
||
mask: true
|
||
});
|
||
|
||
const uploadResult = await api.uploadFile(res.tempFilePaths[0], {
|
||
model: 'user',
|
||
pid: '7'
|
||
});
|
||
|
||
uni.hideLoading();
|
||
|
||
if (uploadResult && uploadResult.code === 200) {
|
||
this.imageLoading = true;
|
||
this.imageError = false;
|
||
this.refImage = uploadResult.data.fullUrl;
|
||
|
||
uni.showToast({
|
||
title: '图片上传成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
|
||
console.log('图片上传成功:', uploadResult.data);
|
||
} else {
|
||
this.imageError = true;
|
||
throw new Error(uploadResult?.message || '上传失败');
|
||
}
|
||
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('图片选择或上传失败:', error);
|
||
|
||
let errorMsg = '图片上传失败';
|
||
if (error.errMsg && error.errMsg.includes('cancel')) {
|
||
return;
|
||
} else if (error.message) {
|
||
errorMsg = error.message;
|
||
}
|
||
|
||
uni.showToast({
|
||
title: errorMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
removeImage() {
|
||
this.refImage = '';
|
||
this.imageLoading = false;
|
||
this.imageError = false;
|
||
},
|
||
onImageLoad() {
|
||
this.imageLoading = false;
|
||
this.imageError = false;
|
||
},
|
||
onImageError() {
|
||
this.imageLoading = false;
|
||
this.imageError = true;
|
||
},
|
||
retryLoadImage() {
|
||
if (this.refImage) {
|
||
this.imageLoading = true;
|
||
this.imageError = false;
|
||
// 强制重新加载图片
|
||
const originalSrc = this.refImage;
|
||
this.refImage = '';
|
||
this.$nextTick(() => {
|
||
this.refImage = originalSrc + '?t=' + Date.now();
|
||
});
|
||
}
|
||
},
|
||
onDescInput(e) {
|
||
this.description = e.detail.value;
|
||
},
|
||
applySuggestion(e) {
|
||
const text = e.currentTarget.dataset.text;
|
||
this.description = text;
|
||
},
|
||
shuffleIdeas() {
|
||
const pools = [
|
||
['现代简约风格客厅，白色墙面，灰色沙发，落地窗，极简设计', '北欧风格卧室，浅色木质家具，温馨舒适，自然光线'],
|
||
['中式风格书房，红木家具，传统装饰，典雅大气', '欧式风格餐厅，华丽吊灯，精致餐具，浪漫氛围'],
|
||
['日式风格茶室，榻榻米，简约禅意，自然材质', '工业风格loft，裸露砖墙，金属元素，现代感强'],
|
||
['美式风格客厅，暖色调，舒适沙发，壁炉装饰', '地中海风格阳台，蓝白色调，拱形门窗，清新自然'],
|
||
['新中式风格卧室，现代与传统结合，水墨画装饰', '轻奢风格客厅，金色点缀，大理石地面，高端质感']
|
||
];
|
||
const idx = Math.floor(Math.random() * pools.length);
|
||
const newSuggestions = pools[idx];
|
||
|
||
const randomSuggestion = newSuggestions[Math.floor(Math.random() * newSuggestions.length)];
|
||
|
||
this.suggestions = newSuggestions;
|
||
this.description = randomSuggestion;
|
||
},
|
||
clearDescription() {
|
||
this.description = '';
|
||
},
|
||
selectDuration(e) {
|
||
const value = Number(e.currentTarget.dataset.value);
|
||
this.selectedDuration = value;
|
||
},
|
||
selectRatio(e) {
|
||
const value = e.currentTarget.dataset.value;
|
||
this.selectedRatio = value;
|
||
},
|
||
viewHistory() {
|
||
uni.navigateTo({
|
||
url: '/pages/ai-generate/history'
|
||
});
|
||
},
|
||
onShowExample() {
|
||
uni.showToast({ title: '展示示例', icon: 'none' });
|
||
},
|
||
async onGenerate() {
|
||
|
||
uni.showLoading({ title: '正在创建视频任务...', mask: true });
|
||
|
||
try {
|
||
// 获取用户信息
|
||
const userInfo = this.userInfo || {};
|
||
const avatar = userInfo.avatar || '';
|
||
const nickname = userInfo.nickname || '';
|
||
const uid = this.uid || '';
|
||
|
||
let response;
|
||
|
||
if (this.refImage) {
|
||
const imageToVideoParams = {
|
||
imageUrl: this.refImage,
|
||
prompt: this.description,
|
||
aspect_ratio: this.selectedRatio === '9:16' ? 'portrait' : '16:9',
|
||
n_frames: Math.ceil(this.selectedDuration / 3),
|
||
size: 'standard',
|
||
remove_watermark: true,
|
||
avatar: avatar,
|
||
nickname: nickname,
|
||
uid:this.uid,
|
||
};
|
||
|
||
console.log('调用图生视频任务接口，参数:', imageToVideoParams);
|
||
response = await api.createImageToVideoTask(imageToVideoParams);
|
||
} else {
|
||
const params = {
|
||
prompt: this.description,
|
||
aspect_ratio: this.selectedRatio === '9:16' ? 'portrait' : '16:9',
|
||
n_frames: Math.ceil(this.selectedDuration / 3),
|
||
size: 'standard',
|
||
remove_watermark: true,
|
||
avatar: avatar,
|
||
nickname: nickname,
|
||
uid:this.uid,
|
||
};
|
||
|
||
console.log('调用文生视频任务接口，参数:', params);
|
||
response = await api.createTextToVideoTask(params);
|
||
}
|
||
|
||
console.log('创建任务响应:', response);
|
||
|
||
uni.hideLoading();
|
||
|
||
if (response && response.code === 200) {
|
||
uni.showToast({
|
||
title: '任务创建成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
|
||
const taskType = this.refImage ? 'image-to-video' : 'text-to-video';
|
||
const q = `type=${taskType}&desc=${encodeURIComponent(this.description)}&duration=${this.selectedDuration}&ratio=${encodeURIComponent(this.selectedRatio)}&taskId=${response.data?.task_id || ''}&refImage=${encodeURIComponent(this.refImage || '')}`;
|
||
|
||
setTimeout(() => {
|
||
uni.navigateTo({ url: `/pages/ai-generate/history` });
|
||
}, 1000);
|
||
|
||
} else {
|
||
const errorMsg = response?.message || '任务创建失败，请重试';
|
||
uni.showToast({
|
||
title: errorMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('创建视频任务失败:', error);
|
||
|
||
let errorMsg = '网络连接失败，请检查网络后重试';
|
||
if (error.message && error.message.includes('请求失败')) {
|
||
errorMsg = '服务器响应异常，请稍后重试';
|
||
} else if (error.message) {
|
||
errorMsg = error.message;
|
||
}
|
||
|
||
uni.showToast({
|
||
title: errorMsg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '一键创作 - 人人都是大导演',
|
||
path: '/pages/ai-generate/oneclick'
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: '一键创作 - 人人都是大导演'
|
||
};
|
||
},
|
||
setData(data) {
|
||
let that = this;
|
||
Object.keys(data).forEach(key => {
|
||
that[key] = data[key];
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* 一键创作页面 - 科技感设计 */
|
||
.oneclick-container {
|
||
background-color: black;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
padding: 190rpx 24rpx 120rpx 24rpx; /* 增加底部padding为固定按钮留出空间 */
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.top-controls { position: fixed; margin-top: 48px; top: 0; left: 0; right: 0; height: 48px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px 16px; padding-top: env(safe-area-inset-top); background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%); z-index: 10; }
|
||
.left-controls { display: flex; align-items: center; }
|
||
.back-btn { height: 25px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
|
||
.icon-back { font-size: 34px; color: #ffffff; font-weight: normal; }
|
||
.center-title { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 48px; pointer-events: none; }
|
||
.title-text { font-size: 16px; margin-right: 60px; font-weight: 600; color: #ffffff; }
|
||
|
||
/* 科技感背景粒子效果 */
|
||
.oneclick-container::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background:
|
||
radial-gradient(circle at 20% 30%, rgba(66, 202, 77, 0.15) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 70%, rgba(42, 165, 58, 0.1) 0%, transparent 50%),
|
||
radial-gradient(circle at 40% 80%, rgba(66, 202, 77, 0.08) 0%, transparent 50%);
|
||
animation: techFloat 8s ease-in-out infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes techFloat {
|
||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||
33% { transform: translateY(-10px) rotate(1deg); }
|
||
66% { transform: translateY(5px) rotate(-1deg); }
|
||
}
|
||
|
||
/* AI生成内容标识 */
|
||
.ai-notice {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
padding: 16rpx 32rpx;
|
||
margin: 0rpx 1rpx 70rpx 1rpx;
|
||
background: rgba(66, 202, 77, 0.1);
|
||
border: 2rpx solid rgba(66, 202, 77, 0.3);
|
||
border-radius: 24rpx;
|
||
backdrop-filter: blur(20px);
|
||
position: relative;
|
||
z-index: 2;
|
||
box-shadow: 0 4rpx 12rpx rgba(66, 202, 77, 0.15);
|
||
}
|
||
|
||
.ai-notice-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.ai-notice-text {
|
||
font-size: 24rpx;
|
||
color: #42ca4d;
|
||
line-height: 1.4;
|
||
text-shadow: 0 0 8rpx rgba(66, 202, 77, 0.3);
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 32rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.page-title {
|
||
color: #ffffff;
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
text-shadow: 0 0 20rpx rgba(66, 202, 77, 0.5);
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* 科技感玻璃态卡片 */
|
||
.section {
|
||
background: rgba(0, 0, 0, 0.552);
|
||
backdrop-filter: blur(20px);
|
||
border: 1rpx solid rgba(66, 202, 77, 0.2);
|
||
border-radius: 32rpx;
|
||
padding: 32rpx;
|
||
margin-bottom: 32rpx;
|
||
box-shadow:
|
||
0 8rpx 32rpx rgba(0, 0, 0, 0.3),
|
||
inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 卡片内发光边框效果 */
|
||
.section::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 32rpx;
|
||
padding: 2rpx;
|
||
background: linear-gradient(135deg, rgba(66, 202, 77, 0.3), transparent, rgba(42, 165, 58, 0.2));
|
||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||
mask-composite: exclude;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.section-title-outer {
|
||
margin: 36rpx 0;
|
||
}
|
||
|
||
.section-title-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.section-title {
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
text-shadow: 0 0 10rpx rgba(66, 202, 77, 0.3);
|
||
}
|
||
|
||
.section-link {
|
||
color: #42ca4d;
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.tips {
|
||
margin-top: 12rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 24rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.tips .warning {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
color: #ff6b6b;
|
||
text-shadow: 0 0 8rpx rgba(255, 107, 107, 0.3);
|
||
}
|
||
|
||
/* 科技感上传区域 */
|
||
.upload-card {
|
||
margin-top: 20rpx;
|
||
border: 2rpx dashed rgba(66, 202, 77, 0.6);
|
||
border-radius: 24rpx;
|
||
height: 400rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
background: linear-gradient(160deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2));
|
||
backdrop-filter: blur(10px);
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 0 28rpx rgba(66, 202, 77, 0.22), inset 0 0 10rpx rgba(66, 202, 77, 0.1);
|
||
overflow: hidden;
|
||
animation: pulseGlow 3s ease-in-out infinite;
|
||
}
|
||
|
||
.upload-card:active {
|
||
transform: scale(0.98);
|
||
border-color: rgba(66, 202, 77, 0.8);
|
||
background: rgba(66, 202, 77, 0.2);
|
||
box-shadow: 0 0 30rpx rgba(66, 202, 77, 0.38);
|
||
}
|
||
|
||
/* 光晕与扫光效果 */
|
||
.upload-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 24rpx;
|
||
pointer-events: none;
|
||
background:
|
||
radial-gradient(60% 80% at 15% 15%, rgba(66, 202, 77, 0.12), transparent 60%),
|
||
radial-gradient(60% 80% at 85% 85%, rgba(42, 165, 58, 0.08), transparent 60%);
|
||
}
|
||
|
||
.upload-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -120%;
|
||
width: 120%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
|
||
transform: skewX(12deg);
|
||
animation: sweep 4s linear infinite;
|
||
}
|
||
|
||
@keyframes pulseGlow {
|
||
0%, 100% { box-shadow: 0 0 24rpx rgba(66, 202, 77, 0.18), inset 0 0 8rpx rgba(66, 202, 77, 0.08); }
|
||
50% { box-shadow: 0 0 32rpx rgba(66, 202, 77, 0.28), inset 0 0 12rpx rgba(66, 202, 77, 0.12); }
|
||
}
|
||
|
||
@keyframes sweep {
|
||
0% { left: -120%; }
|
||
100% { left: 120%; }
|
||
}
|
||
|
||
.upload-plus {
|
||
font-size: 72rpx;
|
||
line-height: 1;
|
||
color: #42ca4d;
|
||
text-shadow: 0 0 26rpx rgba(66, 202, 77, 0.55);
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.upload-text {
|
||
margin-top: 12rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.upload-preview {
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
border: 1rpx solid rgba(66, 202, 77, 0.2);
|
||
border-radius: 24rpx;
|
||
padding: 12rpx;
|
||
box-shadow: 0 6rpx 18rpx rgba(66, 202, 77, 0.2);
|
||
}
|
||
|
||
/* 图片容器 - 确保等比例缩放和居中显示 */
|
||
.image-container {
|
||
width: 100%;
|
||
aspect-ratio: 16/9; /* 使用aspect-ratio确保固定宽高比 */
|
||
min-height: 200rpx;
|
||
max-height: 400rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
border-radius: 18rpx;
|
||
border: 2rpx solid rgba(66, 202, 77, 0.35);
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.32), 0 0 18rpx rgba(66, 202, 77, 0.22);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
/* 图片预加载和性能优化 */
|
||
.preview-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
object-position: center;
|
||
border-radius: 16rpx;
|
||
transition: all 0.3s ease;
|
||
/* 确保图片在容器中居中 */
|
||
display: block;
|
||
margin: auto;
|
||
/* 性能优化 */
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
/* 防止图片模糊 */
|
||
image-rendering: -webkit-optimize-contrast;
|
||
image-rendering: -moz-crisp-edges;
|
||
image-rendering: crisp-edges;
|
||
/* GPU加速 */
|
||
transform: translateZ(0);
|
||
-webkit-transform: translateZ(0);
|
||
/* 图片预加载优化 */
|
||
loading: lazy;
|
||
/* 防止图片拖拽 */
|
||
-webkit-user-drag: none;
|
||
-khtml-user-drag: none;
|
||
-moz-user-drag: none;
|
||
-o-user-drag: none;
|
||
user-drag: none;
|
||
/* 防止图片选择 */
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
/* 图片缓存优化 */
|
||
image-orientation: from-image;
|
||
}
|
||
|
||
/* 图片加载状态指示器 */
|
||
.image-loading {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 4rpx solid rgba(66, 202, 77, 0.3);
|
||
border-top: 4rpx solid #42ca4d;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
color: #42ca4d;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 图片加载错误状态 */
|
||
.image-error {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.image-error:hover {
|
||
background: rgba(0, 0, 0, 0.9);
|
||
transform: translate(-50%, -50%) scale(1.05);
|
||
}
|
||
|
||
.error-icon {
|
||
font-size: 48rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.error-text {
|
||
color: #ff6b6b;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.error-retry {
|
||
color: #42ca4d;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 响应式设计优化 */
|
||
@media screen and (max-width: 750rpx) {
|
||
.image-container {
|
||
aspect-ratio: 4/3;
|
||
min-height: 180rpx;
|
||
max-height: 320rpx;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 600rpx) {
|
||
.image-container {
|
||
aspect-ratio: 1/1;
|
||
min-height: 160rpx;
|
||
max-height: 280rpx;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 480rpx) {
|
||
.image-container {
|
||
aspect-ratio: 1/1;
|
||
min-height: 140rpx;
|
||
max-height: 240rpx;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-width: 3rpx;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.error-icon {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.error-text {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.error-retry {
|
||
font-size: 18rpx;
|
||
}
|
||
}
|
||
|
||
/* 高分辨率屏幕优化 */
|
||
@media screen and (-webkit-min-device-pixel-ratio: 2) {
|
||
.preview-image {
|
||
image-rendering: -webkit-optimize-contrast;
|
||
image-rendering: crisp-edges;
|
||
}
|
||
}
|
||
|
||
/* 横屏适配 */
|
||
@media screen and (orientation: landscape) {
|
||
.image-container {
|
||
aspect-ratio: 16/9;
|
||
min-height: 160rpx;
|
||
max-height: 280rpx;
|
||
}
|
||
}
|
||
|
||
.preview-actions {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.desc-row {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
/* 输入框包装器 */
|
||
.desc-input-wrapper {
|
||
position: relative;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border-radius: 24rpx;
|
||
border: 2rpx solid rgba(66, 202, 77, 0.6);
|
||
box-shadow: 0 0 25rpx rgba(66, 202, 77, 0.4);
|
||
backdrop-filter: blur(15px);
|
||
min-height: 240rpx;
|
||
}
|
||
|
||
/* 科技感输入框 */
|
||
.desc-input {
|
||
width: 100%;
|
||
min-height: 240rpx;
|
||
background: transparent;
|
||
color: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx 88rpx 24rpx 24rpx; /* 右侧留出语音按钮空间 */
|
||
box-sizing: border-box;
|
||
border: none;
|
||
font-size: 30rpx;
|
||
line-height: 1.8;
|
||
resize: none;
|
||
}
|
||
|
||
.desc-input-wrapper:focus-within {
|
||
border-color: rgba(66, 202, 77, 0.8);
|
||
box-shadow: 0 0 30rpx rgba(66, 202, 77, 0.5);
|
||
}
|
||
|
||
/* 语音输入按钮 */
|
||
.voice-btn {
|
||
position: absolute;
|
||
bottom: 16rpx;
|
||
right: 16rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(135deg, #42ca4d 0%, #38b045 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(66, 202, 77, 0.4);
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
.voice-btn .iconfont {
|
||
font-size: 48rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.voice-btn.recording {
|
||
background: #ff6b6b;
|
||
width: 102rpx;
|
||
height: 102rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.5);
|
||
}
|
||
|
||
.voice-btn.recording .recording-animation {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
animation: pulse 1s infinite;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.voice-btn.recording .recording-time {
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 录音提示 */
|
||
.recording-hint {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
margin-top: 24rpx;
|
||
padding: 16rpx 32rpx;
|
||
background: rgba(255, 107, 107, 0.1);
|
||
border-radius: 40rpx;
|
||
border: 1px solid rgba(255, 107, 107, 0.3);
|
||
animation: blink 1.5s infinite;
|
||
}
|
||
|
||
.recording-hint .hint-icon {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.recording-hint .hint-text {
|
||
font-size: 26rpx;
|
||
color: #ff6b6b;
|
||
}
|
||
|
||
/* 动画 */
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: scale(0.8);
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
@keyframes blink {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.desc-actions {
|
||
margin-top: 20rpx; /* 增加间距 */
|
||
display: flex;
|
||
gap: 20rpx; /* 增加按钮间距 */
|
||
justify-content: flex-start; /* 左对齐 */
|
||
}
|
||
|
||
.suggest-list {
|
||
margin-top: 24rpx; /* 增加顶部间距 */
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx; /* 增加间距 */
|
||
}
|
||
|
||
/* 科技感建议标签 */
|
||
.suggest-item {
|
||
background: rgba(66, 202, 77, 0.15); /* 增加背景透明度 */
|
||
color: rgba(255, 255, 255, 0.95); /* 增加文字透明度 */
|
||
border: 2rpx solid rgba(66, 202, 77, 0.4); /* 加粗边框并增加透明度 */
|
||
border-radius: 999rpx;
|
||
padding: 18rpx 28rpx; /* 增加内边距 */
|
||
font-size: 26rpx; /* 增大字体 */
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(12px);
|
||
box-shadow: 0 2rpx 12rpx rgba(66, 202, 77, 0.1); /* 添加阴影 */
|
||
}
|
||
|
||
.suggest-item:active {
|
||
background: rgba(66, 202, 77, 0.25); /* 增加激活状态背景 */
|
||
transform: scale(0.96); /* 稍微调整缩放 */
|
||
box-shadow: 0 0 20rpx rgba(66, 202, 77, 0.4); /* 增强阴影效果 */
|
||
border-color: rgba(66, 202, 77, 0.6); /* 增强边框颜色 */
|
||
}
|
||
|
||
.options-row {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
/* 科技感选项芯片 */
|
||
.option-chip {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
border: 1rpx solid rgba(66, 202, 77, 0.2);
|
||
border-radius: 999rpx;
|
||
padding: 16rpx 28rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
position: relative;
|
||
}
|
||
|
||
.option-chip.active {
|
||
background: linear-gradient(135deg, #42ca4d 0%, #2aa53a 100%);
|
||
color: white;
|
||
border-color: transparent;
|
||
box-shadow:
|
||
0 0 20rpx rgba(66, 202, 77, 0.4),
|
||
0 4rpx 15rpx rgba(42, 165, 58, 0.3);
|
||
transform: translateY(-2rpx);
|
||
}
|
||
|
||
/* 科技感底部操作区 */
|
||
.footer {
|
||
position: fixed; /* 改为fixed固定定位 */
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.8); /* 添加半透明背景 */
|
||
backdrop-filter: blur(20px);
|
||
padding: 24rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
z-index: 1000; /* 确保在最上层 */
|
||
border-top: 1rpx solid rgba(66, 202, 77, 0.2); /* 添加顶部边框 */
|
||
}
|
||
|
||
/* 科技感主按钮 */
|
||
.btn-primary {
|
||
flex: 2; /* 设置主按钮占更多空间 */
|
||
background: linear-gradient(135deg, #42ca4d 0%, #2aa53a 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 39rpx;
|
||
padding: 24rpx 32rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
box-shadow:
|
||
0 8rpx 24rpx rgba(66, 202, 77, 0.4),
|
||
0 0 20rpx rgba(42, 165, 58, 0.3);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-primary::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
.btn-primary:active::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-primary:active {
|
||
transform: scale(0.98);
|
||
box-shadow:
|
||
0 4rpx 16rpx rgba(66, 202, 77, 0.5),
|
||
0 0 15rpx rgba(42, 165, 58, 0.4);
|
||
}
|
||
|
||
/* 科技感次要按钮 */
|
||
.btn-outline {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: #ffffff;
|
||
border: 2rpx solid rgba(66, 202, 77, 0.4);
|
||
border-radius: 39rpx;
|
||
padding: 24rpx 32rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-outline:active {
|
||
background: rgba(66, 202, 77, 0.1);
|
||
border-color: rgba(66, 202, 77, 0.6);
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
border: 1rpx solid rgba(66, 202, 77, 0.2);
|
||
border-radius: 999rpx;
|
||
padding: 10rpx 24rpx;
|
||
font-size: 20rpx;
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-secondary:active {
|
||
background: rgba(66, 202, 77, 0.1);
|
||
transform: scale(0.95);
|
||
}
|
||
</style> |