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
	 Jane Doe
					Jane Doe