first commit
This commit is contained in:
463
pages/index/index.js
Normal file
463
pages/index/index.js
Normal file
@@ -0,0 +1,463 @@
|
||||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
mode: 'link', // 默认模式为链接提取
|
||||
videoUrl: '', // 视频链接
|
||||
uploadFilePath: '', // 上传文件路径
|
||||
uuid: '', // 页面参数 uuid
|
||||
showPopup: false, // 弹窗显示状态
|
||||
popupType: '', // 弹窗类型
|
||||
popupContent: '', // 弹窗内容
|
||||
showMask: false,
|
||||
records: [],
|
||||
page: 1,
|
||||
isLoading: false,
|
||||
hasMore: true,
|
||||
externalOpenid:''
|
||||
},
|
||||
|
||||
// 切换单选框模式
|
||||
switchMode(e) {
|
||||
const selectedMode = e.currentTarget.dataset.value; // 获取当前点击的值
|
||||
console.log("选择的模式:", selectedMode);
|
||||
this.setData({
|
||||
mode: selectedMode
|
||||
});
|
||||
},
|
||||
|
||||
// 输入视频链接
|
||||
bindVideoInput(e) {
|
||||
this.setData({
|
||||
videoUrl: e.detail.value // 更新输入的视频链接
|
||||
});
|
||||
},
|
||||
|
||||
//文案提取记录
|
||||
// 显示记录蒙版
|
||||
showRecordMask() {
|
||||
this.setData({ showMask: true });
|
||||
console.log('显示记录蒙版')
|
||||
this.loadRecords();
|
||||
},
|
||||
|
||||
// 隐藏蒙版
|
||||
hideMask() {
|
||||
this.setData({ showMask: false });
|
||||
},
|
||||
|
||||
// 阻止冒泡
|
||||
preventDefault() {
|
||||
return;
|
||||
},
|
||||
|
||||
// 加载记录
|
||||
// 加载记录
|
||||
// 加载记录
|
||||
loadRecords() {
|
||||
if (this.data.isLoading || !this.data.hasMore) return;
|
||||
|
||||
this.setData({ isLoading: true });
|
||||
|
||||
app.apiRequest({
|
||||
url: '/myapp/get_transcription_records/',
|
||||
method: "POST",
|
||||
data: {
|
||||
page: this.data.page,
|
||||
uuid: wx.getStorageSync("uuid"),
|
||||
openid: wx.getStorageSync("openid")
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('原始数据:', res.data);
|
||||
|
||||
if (!res.data || !res.data.records) {
|
||||
console.error('返回数据格式错误');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取当前records
|
||||
const currentRecords = this.data.records || [];
|
||||
|
||||
// 处理新数据
|
||||
const newRecords = res.data.records.map(record => {
|
||||
const formattedResult = this.removeTimestampAndMergeLines(record.result || '');
|
||||
return {
|
||||
id: record.id,
|
||||
video_url: record.video_url,
|
||||
task_id: record.task_id,
|
||||
status: record.status,
|
||||
result: formattedResult,
|
||||
preview: formattedResult.substring(0, 15) + '...',
|
||||
created_at: this.formatTime(record.created_at)
|
||||
};
|
||||
});
|
||||
|
||||
console.log('处理后的新数据:', newRecords);
|
||||
|
||||
// 使用回调确保数据更新完成
|
||||
this.setData({
|
||||
records: currentRecords.concat(newRecords),
|
||||
page: this.data.page + 1,
|
||||
hasMore: res.data.has_more
|
||||
}, () => {
|
||||
console.log('更新后的完整数据:', this.data.records);
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('请求失败:', error);
|
||||
},
|
||||
complete: () => {
|
||||
this.setData({ isLoading: false });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化时间显示
|
||||
formatTime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
return `${month}-${day} ${hours}:${minutes}`;
|
||||
},
|
||||
|
||||
// 加载更多
|
||||
loadMore() {
|
||||
this.loadRecords();
|
||||
},
|
||||
|
||||
// 跳转到文案页
|
||||
goToExtract(e) {
|
||||
|
||||
const text = encodeURIComponent(this.data.records[e.currentTarget.dataset.text].result);
|
||||
wx.navigateTo({
|
||||
url: `../extract/extract?text=${text}`
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
// 上传文件
|
||||
uploadFile() {
|
||||
wx.showToast({
|
||||
title: "功能开发者,敬请期待",
|
||||
icon: "none"
|
||||
});
|
||||
},
|
||||
// 提取视频功能
|
||||
parseVideo() {
|
||||
if (!this.data.videoUrl) {
|
||||
wx.showToast({
|
||||
title: "请输入有效的视频链接",
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
wx.showLoading({
|
||||
title: "正在提取..."
|
||||
});
|
||||
|
||||
app.apiRequest({
|
||||
url: "/myapp/video/", // 替换为实际后端接口
|
||||
method: "POST",
|
||||
data: {
|
||||
url: this.data.videoUrl,
|
||||
uuid: wx.getStorageSync("uuid"),
|
||||
openid: wx.getStorageSync("openid")
|
||||
},
|
||||
success: (res) => {
|
||||
console.log("视频提取结果:", res);
|
||||
if (res.data.data.medias[0]) {
|
||||
const media = res.data.data.medias[0];
|
||||
wx.navigateTo({
|
||||
url: `../video/video?url=${encodeURIComponent(media.resource_url)}&image=${encodeURIComponent(media.preview_url)}&preview=${encodeURIComponent(res.data.data.text)}&type=index&read_count=0`
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: "不支持此链接提交。",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error("视频解析失败:", err);
|
||||
wx.showToast({
|
||||
title: "请求失败,请检查网络并稍后重试",
|
||||
icon: "none"
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
wx.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提取文案功能
|
||||
extractText() {
|
||||
if (this.data.mode === 'link') {
|
||||
if (!this.data.videoUrl) {
|
||||
wx.showToast({
|
||||
title: "请输入有效链接",
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let openid = wx.getStorageSync('openid') || '';
|
||||
let uuid = wx.getStorageSync('uuid') || '';
|
||||
|
||||
wx.showLoading({
|
||||
title: '后台处理中',
|
||||
});
|
||||
|
||||
var that = this;
|
||||
app.apiRequest({
|
||||
url: '/myapp/video_to_text/',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
data: {
|
||||
url: this.data.videoUrl,
|
||||
openid: openid,
|
||||
uuid: uuid
|
||||
},
|
||||
success(res) {
|
||||
if (res.data.success === false) {
|
||||
wx.showModal({
|
||||
title: "提取视频",
|
||||
content: '哎呀!去开通会员不限次数使用哦',
|
||||
confirmColor: "#00B269",
|
||||
cancelColor: "#858585",
|
||||
success: function(e) {
|
||||
e.confirm ? (console.log("确定"), wx.navigateTo({
|
||||
url: "../vip_recharge/vip_recharge?show=true"
|
||||
})) : e.cancel && console.log("取消");
|
||||
}
|
||||
});
|
||||
wx.hideLoading();
|
||||
return;
|
||||
}
|
||||
|
||||
let data = res.data;
|
||||
let taskId = (data?.Data?.TaskId) || data.task_id;
|
||||
|
||||
if (data.result) {
|
||||
wx.hideLoading();
|
||||
let text = that.removeTimestampAndMergeLines(data.result);
|
||||
text = encodeURIComponent(text);
|
||||
wx.navigateTo({
|
||||
url: `../extract/extract?text=${text}`
|
||||
});
|
||||
} else if (taskId) {
|
||||
that.search_result(taskId, openid, uuid, (result) => {
|
||||
wx.hideLoading();
|
||||
if (result != 0) {
|
||||
wx.showToast({
|
||||
title: '提取成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
let text = that.removeTimestampAndMergeLines(result);
|
||||
text = encodeURIComponent(text);
|
||||
wx.navigateTo({
|
||||
url: `../extract/extract?text=${text}`
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '异常',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '发送文件失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '网络异常',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (this.data.mode === 'upload') {
|
||||
wx.showToast({
|
||||
title: "功能开发中,敬请期待",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 查询任务状态
|
||||
search_result: function(task_id, openid, uuid, handleResult) {
|
||||
console.log('查询任务');
|
||||
const checkResult = (maxRetries) => {
|
||||
const fetchTaskStatus = () => {
|
||||
app.apiRequest({
|
||||
url: '/myapp/query_task/',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
data: {
|
||||
task_id: task_id,
|
||||
openid: openid,
|
||||
uuid: uuid
|
||||
},
|
||||
success: function(res) {
|
||||
const data = res.data;
|
||||
if (data.result) {
|
||||
handleResult(data.result);
|
||||
} else if (maxRetries > 0) {
|
||||
setTimeout(fetchTaskStatus, 3000);
|
||||
maxRetries--;
|
||||
} else {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '请稍后重试',
|
||||
icon: 'error'
|
||||
});
|
||||
handleResult(0);
|
||||
console.log('已达到最大重试次数,停止查询。');
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
fetchTaskStatus();
|
||||
};
|
||||
|
||||
const maxRetries = 100;
|
||||
checkResult(maxRetries);
|
||||
},
|
||||
extractVideoFromVideoAccount() {
|
||||
wx.navigateTo({
|
||||
url: `../bot-list/bot-list`
|
||||
});
|
||||
},
|
||||
openDownloadRobot(){
|
||||
wx.navigateTo({
|
||||
url: `../bot-list/bot-list`
|
||||
});
|
||||
},
|
||||
// 去掉时间戳并合并行
|
||||
removeTimestampAndMergeLines: function(textWithTimestamp) {
|
||||
let txt = textWithTimestamp.replace(/\[.*\]/g, "");
|
||||
txt = txt.replace(/\s+/g, "");
|
||||
return txt;
|
||||
},
|
||||
|
||||
// 页面加载时触发
|
||||
onLoad(options) {
|
||||
console.log("页面参数:", options);
|
||||
const uuid = options.uuid || "";
|
||||
this.setData({
|
||||
uuid: uuid
|
||||
});
|
||||
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ["shareAppMessage", "shareTimeline"]
|
||||
});
|
||||
|
||||
const { externalOpenid, token } = options;
|
||||
|
||||
if (!externalOpenid || !token) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取新小程序用户的 openid
|
||||
const newOpenid = wx.getStorageSync("openid"); // 假设登录状态中已存储 openid
|
||||
if (!newOpenid) {
|
||||
wx.showToast({ title: "获取新用户信息失败,请重新登录", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
// 请求后端完成迁移
|
||||
app.apiRequest({
|
||||
url: "/myapp/migrate_member/", // 替换为后端迁移接口地址
|
||||
method: "POST",
|
||||
data: {
|
||||
old_openid: externalOpenid,
|
||||
new_openid: newOpenid, // 新小程序 openid
|
||||
token: token, // 加密的 token
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.message === "会员迁移成功") {
|
||||
this.setData({ migrationStatus: "迁移成功" });
|
||||
wx.showToast({ title: "迁移成功", icon: "success" });
|
||||
wx.switchTab({ url: "/pages/mine/mine" }); // 跳转到用户中心
|
||||
} else {
|
||||
this.setData({ migrationStatus: "迁移失败" });
|
||||
wx.showToast({ title: res.data.error || "迁移失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error("迁移失败", err);
|
||||
this.setData({ migrationStatus: "迁移失败" });
|
||||
wx.showToast({ title: "迁移失败,请稍后重试", icon: "none" });
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 页面显示时触发
|
||||
onShow() {
|
||||
app.getPopupConfig()
|
||||
.then(() => {
|
||||
const isEnabled = wx.getStorageSync('popupEnabled');
|
||||
const popupType = wx.getStorageSync('popupType');
|
||||
const popupContent = wx.getStorageSync('popupContent');
|
||||
|
||||
if (isEnabled) {
|
||||
this.setData({
|
||||
showPopup: true,
|
||||
popupType: popupType,
|
||||
popupContent: popupContent
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取弹窗配置失败:', error);
|
||||
});
|
||||
},
|
||||
|
||||
// 清空输入框
|
||||
inputClear() {
|
||||
this.setData({
|
||||
videoUrl: ""
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
closePopup() {
|
||||
this.setData({
|
||||
showPopup: false
|
||||
});
|
||||
},
|
||||
|
||||
// 分享逻辑
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: "推荐一款免费又超好用的视频文案创作工具,分享给大家一起使用",
|
||||
path: `/pages/index/index?uuid=${wx.getStorageSync("uuid")}`,
|
||||
imageUrl: "/images/share.jpg"
|
||||
};
|
||||
},
|
||||
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: "推荐一款免费又超好用的视频文案创作工具,分享给大家一起使用",
|
||||
path: `/pages/index/index?uuid=${wx.getStorageSync("uuid")}`,
|
||||
imageUrl: "/images/share.jpg"
|
||||
};
|
||||
}
|
||||
});
|
||||
9
pages/index/index.json
Normal file
9
pages/index/index.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"popup": "/popup/popup"
|
||||
},
|
||||
"navigationBarTitleText": "快影下载",
|
||||
"navigationBarBackgroundColor": "#222238",
|
||||
"navigationBarTextStyle": "white"
|
||||
|
||||
}
|
||||
114
pages/index/index.wxml
Normal file
114
pages/index/index.wxml
Normal file
@@ -0,0 +1,114 @@
|
||||
<view class="container">
|
||||
<!-- 提取视频卡片 -->
|
||||
<view class="card video-extract">
|
||||
<view class="card-title">提取视频</view>
|
||||
<view class="input-section">
|
||||
<image src="../../images/link_icon.png" class="input-icon"></image>
|
||||
<input placeholder="请输入视频链接,支持多平台" class="input-field" bindinput="bindVideoInput"></input>
|
||||
</view>
|
||||
<button class="action-button" bindtap="parseVideo">提取视频</button>
|
||||
|
||||
<view class="bottom-actions">
|
||||
<view class="bottom-button" bindtap="extractVideoFromVideoAccount">->视频号提取</view>
|
||||
<view class="bottom-button" bindtap="openDownloadRobot">->下载机器人</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 视频转文案卡片 -->
|
||||
<view class="card text-extract">
|
||||
<view class="card-title">视频转文案</view>
|
||||
|
||||
<!-- 单选切换 -->
|
||||
<view class="radio-buttons">
|
||||
<!-- 粘贴链接提取 -->
|
||||
<view class="radio-option" bindtap="switchMode" data-value="link">
|
||||
<view class="radio-circle {{mode === 'link' ? 'selected' : ''}}"></view>
|
||||
<text>粘贴链接提取</text>
|
||||
</view>
|
||||
<!-- 上传本地文件 -->
|
||||
<view class="radio-option" bindtap="switchMode" data-value="upload">
|
||||
<view class="radio-circle {{mode === 'upload' ? 'selected' : ''}}"></view>
|
||||
<text>上传本地文件</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 链接输入框 -->
|
||||
<view wx:if="{{mode === 'link'}}" class="input-section">
|
||||
<image src="../../images/link_icon.png" class="input-icon"></image>
|
||||
<input placeholder="请输入视频链接,支持多平台" class="input-field" bindinput="bindVideoInput"></input>
|
||||
</view>
|
||||
|
||||
<!-- 文件上传框 -->
|
||||
<view wx:if="{{mode === 'upload'}}" class="input-section">
|
||||
|
||||
<view class="upload-button" bindtap="uploadFile">
|
||||
<image src="../../images/upload_icon.png" class="input-icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="action-button" bindtap="extractText">提取文案</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 文案提取记录按钮 放在最后的</view>标签前 -->
|
||||
<!-- 记录按钮 -->
|
||||
<view class="record-button-container">
|
||||
<view class="record-button" bindtap="showRecordMask">
|
||||
<text class="record-text">文案提取记录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 记录蒙版 -->
|
||||
<view class="record-mask {{showMask ? 'show' : ''}}" bindtap="hideMask">
|
||||
<view class="record-content" catchtap="preventDefault">
|
||||
<!-- 标题栏 -->
|
||||
<view class="record-header">
|
||||
<text>提取记录</text>
|
||||
<view class="close-btn" bindtap="hideMask">×</view>
|
||||
</view>
|
||||
|
||||
<!-- 记录列表 -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="record-list"
|
||||
bindscrolltolower="loadMore"
|
||||
lower-threshold="50">
|
||||
|
||||
<view wx:for="{{records}}"
|
||||
wx:key="id"
|
||||
class="record-item"
|
||||
bindtap="goToExtract"
|
||||
data-text="{{index}}">
|
||||
<view class="record-item-left">
|
||||
<view class="record-num">{{index + 1}}</view>
|
||||
<view class="record-info">
|
||||
<text class="record-text" style="color:rgb(61, 61, 61)">{{item.preview}}</text>
|
||||
<text class="record-time">{{item.created_at}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-status {{item.status === 'completed' ? 'completed' : 'False'}}">
|
||||
{{item.status === 'completed' ? '完成' : '失败'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="loading" wx:if="{{isLoading}}">
|
||||
<view class="loading-dots">
|
||||
<view class="dot"></view>
|
||||
<view class="dot"></view>
|
||||
<view class="dot"></view>
|
||||
</view>
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<popup
|
||||
wx:if="{{showPopup}}"
|
||||
popupType="{{popupType}}"
|
||||
popupContent="{{popupContent}}"
|
||||
buttonText="查看详情"
|
||||
targetUrl="/pages/details/details"
|
||||
/>
|
||||
358
pages/index/index.wxss
Normal file
358
pages/index/index.wxss
Normal file
@@ -0,0 +1,358 @@
|
||||
/* 背景渐变和星星样式 */
|
||||
page {
|
||||
background: linear-gradient(135deg, #1A1A1A 0%, #3A3A57 50%, #000C40 100%);
|
||||
background-size: cover, 3px 3px;
|
||||
background-repeat: no-repeat, repeat;
|
||||
font-size: 32rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.video-extract {
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
background: linear-gradient(to bottom right, rgba(58, 85, 97, 0.2), rgba(56, 76, 165, 0.2), rgba(142, 98, 96, 0.2));
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.text-extract {
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
background: linear-gradient(to bottom right, rgba(105, 105, 105, 0.3), rgba(169, 169, 169, 0.3), rgba(192, 192, 192, 0.3)); /* 金属灰渐变 */
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bottom-button {
|
||||
border-radius: 20px;
|
||||
padding: 5px 20px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影,增强立体效果 */
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.bottom-button:hover {
|
||||
transform: translateY(-3px); /* 悬停时轻微上移 */
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 悬停时阴影加深 */
|
||||
}
|
||||
|
||||
.bottom-button:first-child {
|
||||
background-color: #4CAF50; /* 视频号提取按钮颜色:绿色 */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bottom-button:last-child {
|
||||
background-color: #ecb35e; /* 下载机器人按钮颜色:橙色 */
|
||||
color: white;
|
||||
}
|
||||
/* 卡片标题 */
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: rgb(255, 255, 255);
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 卡片描述 */
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
color: rgb(201, 199, 199);
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 输入框部分 */
|
||||
.input-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
border: solid .2px rgb(155, 150, 150);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
background: none;
|
||||
color: rgb(201, 199, 199);
|
||||
}
|
||||
|
||||
/* 上传按钮 */
|
||||
.upload-button {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-button {
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #8d72d2, #7183f3);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border: none;
|
||||
transition: background 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: linear-gradient(to bottom right, rgba(58, 85, 97, 0.8), rgba(56, 76, 165, 0.8), rgba(142, 98, 96, 0.8));
|
||||
transform: scale(1.02);
|
||||
}
|
||||
/* 单选按钮组样式 */
|
||||
.radio-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 单个选项样式 */
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: rgb(201, 199, 199);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 圆圈样式 */
|
||||
.radio-circle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
background-color: transparent; /* 默认空心 */
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.radio-circle.selected {
|
||||
background-color: #5b8def; /* 圆圈变为实心 */
|
||||
border-color: #eeeeee; /* 边框颜色跟随实心颜色 */
|
||||
}
|
||||
|
||||
.record-button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.record-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #4CAF50, #45a049);
|
||||
padding: 20rpx 40rpx;
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.record-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.record-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.record-text {
|
||||
color: #ecf5f3;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* 蒙版样式 */
|
||||
.record-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.record-num{
|
||||
color:rgb(192, 186, 180)
|
||||
}
|
||||
.record-mask.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
position: fixed;
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.record-mask.show .record-content {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* 标题栏 */
|
||||
.record-header {
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
/* 记录列表 */
|
||||
.record-list {
|
||||
height: calc(80vh - 100rpx);
|
||||
}
|
||||
|
||||
.record-item {
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.record-item:active {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.record-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.record-info {
|
||||
margin-left: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.record-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.record-status.completed {
|
||||
background: #e8f5e9;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.record-status.False {
|
||||
background: #fcfeff;
|
||||
color: #e97a92;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #999;
|
||||
border-radius: 50%;
|
||||
margin: 0 6rpx;
|
||||
animation: dot-jump 1.2s infinite;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes dot-jump {
|
||||
0%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10rpx);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user