tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交了吸顶组件

Browse Source
This commit is contained in:
田岩
2025-07-23 19:52:00 +08:00
parent c7c20f5406 aa392db1c4
commit b08176f569
10 changed files with 487 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+3 -2
View File
@@ -9,7 +9,7 @@ ENV = 'development'
# VITE_APP_BASE_API_Url = 'http://25.18.122.78:9786'
# DEV
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
# app入口
#VITE_APP_BASE_API_Url = 'http://25.16.122.65:7001'
@@ -17,4 +17,5 @@ VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
#VITE_APP_BASE_API_Url = 'http://25.18.122.66:9786'
# h5专用地址
VITE_APP_BASE_H5_API_Url = 'http://25.18.122.66:9786'
VITE_APP_BASE_H5_API_Url = 'http://25.18.122.66:9786'
src/api/dialog.js
+12
View File
@@ -0,0 +1,12 @@
import request from '@/api/request'
// 获取问题list
export const queryHotQuestionApi = (data) => {
return request({
url: '/traask/traAskchat/queryHotQuestion',
method: 'post',
data
});
};
src/api/login.js
+101 -41
View File
@@ -119,51 +119,111 @@ export const queryCurrentUser = (data) => request({
const base_url = get_base_url()
// 预加载头像
// #ifdef APP-PLUS
// 更新用户信息中的头像路径
const updateUserAvatar = (imagePath) => {
const userInfo = getUserInfo()
setUserInfo({
...userInfo,
'imagePath': imagePath
})
const userInfo = getUserInfo()
setUserInfo({
...userInfo,
'imagePath': imagePath
})
}
try {
const pathName = res.body.imageAddr
const url = base_url + pathName
// 生成唯一文件名，避免冲突
const filename = pathName.split('/').pop()
const localFilePath = '_downloads/' + filename
console.log('localFilePath', localFilePath, url);
// 先检查是否存在
uni.getFileInfo({
filePath: localFilePath,
success: () => {
console.log('头像已存在，无需下载');
updateUserAvatar(localFilePath)
},
fail: () => {
console.log('开始下载头像:', url);
const dtask = plus.downloader.createDownload(
url, {
method: 'GET',
filename: '_downloads/' + filename
},
(download, status) => {
if (status === 200) {
console.log('头像下载成功:', download.filename);
updateUserAvatar(download.filename)
}
}
)
dtask.start();
}
})
} catch (error) {
console.error('头像预加载过程发生错误:', error);
// 确保目录存在
const ensureDirectoryExists = (dirPath) => {
return new Promise((resolve) => {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, (fs) => {
fs.root.getDirectory(dirPath, { create: true }, resolve, resolve)
})
})
}
// 生成唯一文件名
const generateUniqueFilename = (pathName) => {
if (!pathName || typeof pathName !== 'string') {
throw new Error('无效的头像路径');
}
// 直接使用原始文件名(带扩展名)
const filename = pathName.split('/').pop();
if (!filename) {
throw new Error('无法从路径中提取文件名');
}
// 确保文件扩展名为.png (可选，根据实际需求)
const ext = filename.split('.').pop().toLowerCase();
if (ext === 'png' || ext === 'jpg' || ext === 'jpeg' || ext === 'webp') {
return filename;
}
// 如果没有有效扩展名，添加.png
return `${filename}.png`;
};
// 下载并保存头像
const downloadAndSaveAvatar = async (fileUrl, localFilePath) => {
try {
await ensureDirectoryExists('avatar')
return new Promise((resolve, reject) => {
console.log('开始下载头像:', fileUrl)
const dtask = plus.downloader.createDownload(fileUrl, {
filename: localFilePath
}, (d, status) => {
if (status === 200) {
console.log("保存路径：", d.filename)
resolve(d.filename)
} else {
console.error("文件下载失败：", status)
reject(new Error(`下载失败，状态码: ${status}`))
}
})
dtask.start()
})
} catch (error) {
console.error('创建目录失败:', error)
throw error
}
}
// 检查文件是否存在
const checkFileExists = (filePath) => {
return new Promise((resolve) => {
uni.getFileInfo({
filePath,
success: () => resolve(true),
fail: () => resolve(false)
})
})
}
// 主逻辑
(async () => {
try {
const pathName = res.body.imageAddr
const fileUrl = base_url + pathName
// 生成保存路径
const filename = generateUniqueFilename(pathName)
const localFilePath = '_doc/avatar/' + filename
// 检查文件是否存在
const exists = await checkFileExists(localFilePath)
if (exists) {
console.log('头像已存在，无需下载')
updateUserAvatar(localFilePath)
} else {
const savedPath = await downloadAndSaveAvatar(fileUrl, localFilePath)
updateUserAvatar(savedPath)
}
} catch (error) {
console.error('头像预加载过程发生错误:', error)
}
})()
// #endif
return res.body
})
src/pages/course/components/touchBtn.vue
+12 -2
View File
@@ -75,6 +75,10 @@ const props = defineProps({
})
const { isDisabled, onlyVoice } = toRefs(props)
const isLoadingState = computed(() => props.isLoading)
const showTalkingModel = ref(false)
const keyboardIsShow = ref(false)
watch(()=>props.isLoading,()=>{},{
deep:true,immediate:true
})
@@ -84,8 +88,13 @@ watch(()=>props.canAnswer,()=>{},{
watch(()=>props.onlyVoice,()=>{},{
deep:true,immediate:true
})
const showTalkingModel = ref(false)
const keyboardIsShow = ref(false)
watch(()=>props.isDisabled,(val)=>{
if(val){
keyboardIsShow.value = false
}
},{
deep:true,immediate:true
})
const answerValue = ref('')
@@ -315,6 +324,7 @@ const showKeyboard = () => {
}
}
const changeBtn = () => {
if(props.isDisabled) return
keyboardIsShow.value = !keyboardIsShow.value
answerValue.value = ''
}
src/pages/courseDetail/components/comment.vue
+1
View File
@@ -176,6 +176,7 @@
}).then(({
body
}) => {
message_list.concat(body)
// console.log('body', body);
Object.assign(message_list, message_list.concat(body))
src/pages/index/dialog.vue
+30 -14
View File
@@ -27,13 +27,13 @@
<scroll-view :scroll-x="true" :show-scrollbar="false">
<view class="question-row">
<view class="question-item" v-for="item in Math.ceil(questionList.length/2)"
@click="sendText(questionList[item-1])">{{questionList[item-1]}}</view>
@click="sendText(questionList[item-1].hotContent)">{{questionList[item-1].hotContent}}</view>
</view>
<view class="question-row">
<view class="question-item"
v-for="item in questionList.length - Math.ceil(questionList.length/2)"
@click="sendText(questionList[item + Math.ceil(questionList.length/2)-1])">
{{questionList[item + Math.ceil(questionList.length/2)-1]}}
@click="sendText(questionList[item + Math.ceil(questionList.length/2)-1].hotContent)">
{{questionList[item + Math.ceil(questionList.length/2)-1].hotContent}}
</view>
</view>
</scroll-view>
@@ -123,6 +123,9 @@
import {
commonUploadVoiceFile
} from "@/api/common.js"
import {
queryHotQuestionApi
} from "@/api/dialog.js"
const socketStore = useSocketStore()
const {
@@ -131,16 +134,16 @@
const userInfo = computed(() => getUserInfo())
console.log('userInfoxxx', getUserInfo());
const questionList = ref([
'对公小程序开户流程？',
'厅堂服务经理2025年管理办法？',
'厅堂服务经理2025年考核表单？',
'吉林银行重要空白凭证调微业务操作规程？',
'协助有权机关查询冻结扣划业务操作规程？',
'柜面个人账户操作规程？',
'久悬未取款账户如何办理销户？',
'境外来华人员个人账户业务开户如何办理？',
'营业机构日间管理风险防控要点有哪些？',
'现金管理平台柜面业务操作？'
// '对公小程序开户流程？',
// '厅堂服务经理2025年管理办法？',
// '厅堂服务经理2025年考核表单？',
// '吉林银行重要空白凭证调微业务操作规程？',
// '协助有权机关查询冻结扣划业务操作规程？',
// '柜面个人账户操作规程？',
// '久悬未取款账户如何办理销户？',
// '境外来华人员个人账户业务开户如何办理？',
// '营业机构日间管理风险防控要点有哪些？',
// '现金管理平台柜面业务操作？'
])
const scrollBoxRef = ref()
const scrollTop = ref(99999)
@@ -166,6 +169,7 @@
const talkingList = ref([])
const showModelComfirm = ref(false)
const reconcatNum = ref(1)
const initsocketTask = () => {
socketStore.creatSocket('/traask/asksocket/open?summary=')
// unref(SocketObj).on('open', (res)=>{
@@ -182,8 +186,13 @@
// })
unref(SocketObj).on('error', () => {
if ((watchFlag.value === 1) || showModelComfirm.value) return
if (reconcatNum.value === 5) {
common.msg('系统网络异常，请稍后再试！')
return
}
showModelComfirm.value = true
common.show('提示信息', '网络环境不稳定，请重试！', false, '', '确认').then((res) => {
reconcatNum.value += 1
common.redirectTo(`/pages/index/dialog`)
}).finally(() => {
showModelComfirm.value = false
@@ -472,8 +481,15 @@
}
return false
});
const getQuestionList = () => {
queryHotQuestionApi().then(res=> {
console.log(res)
questionList.value = res.body
})
}
onMounted(() => {
getQuestionList()
initsocketTask()
})
onHide(() => {
src/pages/me/index.vue
+7 -12
View File
@@ -8,9 +8,9 @@
<view class="personal_information">
<view class="profile" @click="click_update_avatar()">
<!-- <image-preview v-if="user_info.imageAddr" class="img_100" :src="user_info.imageAddr"></image-preview> -->
<image class="img_100" :src="user_info.imagePath"></image>
<!-- <image-preview v-else-if="user_info.imageAddr" class="img_100" :src="user_info.imageAddr"></image-preview>
<image v-else class="img_100" src="/static/images/me/default_user_avatar.png"></image> -->
<image class="img_100" v-if='user_info.imagePath' :src="user_info.imagePath"></image>
<image-preview v-else-if="user_info.imageAddr" class="img_100" :src="user_info.imageAddr"></image-preview>
<image v-else class="img_100" src="/static/images/me/default_user_avatar.png"></image>
</view>
<view class="personal_information_data">
<view class="name_sex_div">
@@ -221,7 +221,6 @@
}
}
});
const user_info = reactive({
userName: '',
userId: '',
@@ -249,10 +248,7 @@
};
onShow(() => {
setMascot()
const user_info_cache = getUserInfo();
Object.assign(user_info, user_info_cache);
console.log('user_info', user_info);
Object.assign(user_info, getUserInfo());
statistics_data['get_statistics_data'](); // 获取统计数据
});
onPullDownRefresh(() => {
@@ -295,11 +291,10 @@
await updateDfSysUserExtandInfoImageAddr({imageAddr : res.thumbFileId})
// 更新个人信息
const userData = await queryCurrentUser()
console.log('userData', );
console.log('userData', userData);
common.msg('修改成功')
user_info.imageAddr = getUserInfo('imageAddr')
user_info.imagePath = getUserInfo('imagePath')
user_info.imageAddr = userData.imageAddr
user_info.imagePath = ''
} catch {
common.msg('修改失败')
}
src/pages/setting/index.vue
+2 -2
View File
@@ -151,8 +151,8 @@
// 更新个人信息
const userData = await queryCurrentUser()
common.msg('修改成功')
userInfo.value.imageAddr = getUserInfo('imageAddr')
userInfo.value.imagePath = getUserInfo('imagePath')
userInfo.value.imageAddr = userData.imageAddr
userInfo.value.imagePath = ''
} catch {
common.msg('修改失败')
}
src/pages/test/index - 副本.vue
+153 -30
View File
@@ -1,46 +1,169 @@
<template>
<view class="max_page detail-main" style="overflow: hidden">
<view class="max_page detail-main">
<nav-bar :is_seat="false"></nav-bar>
<view class="cell_div">
<uv-cell-group>
<uv-cell title="根域名" :value="url" ></uv-cell>
<uv-cell title="版本号" ></uv-cell>
<uv-cell title="版本名称" ></uv-cell>
<uv-cell title="当前环境:" :value="ENV.MODE"></uv-cell>
<!-- <uv-cell title="竞赛记录" :clickable="false" :border="false"></uv-cell> -->
<view class="fixed_search_div">
<view class="back_div" @click="common.navigateBack()">
<view class="back-icon"></view>
</view>
<view class="title font_pf">系统参数</view>
</view>
<view class="detail-body">
<uv-cell-group :border="false">
<uv-cell title="根域名" :value="url"></uv-cell>
<uv-cell title="当前环境:" :value="ENV.MODE"></uv-cell>
<uv-cell title="版本名称" :value="appBaseInfo.appVersion"></uv-cell>
<uv-cell title="版本号" :value="appBaseInfo.appVersionCode"></uv-cell>
<uv-cell title="点击1:" @click="aaaa"></uv-cell>
<uv-cell title="点击2:" :border="false" @click="bbbb"></uv-cell>
</uv-cell-group>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import common from '@/common/common';
import { get_base_url } from '../../api/request';
const url = get_base_url();
const ENV = import.meta.env
import common from '@/common/common';
import {
get_base_url
} from '../../api/request';
const url = get_base_url();
const ENV = import.meta.env
const appBaseInfo = uni.getAppBaseInfo()
console.log('appBaseInfo', appBaseInfo);
import showDialog from '@/common/dialogMessage'
const bbbb = () => {
// showDialog({
// title: '提示信息',
// content: '检测到您已离开，即将退出学习页面。',
// confirmText: '确认',
// showCancel: false,
// cancelText: '再想想',
// success: (res) => {
// if (res.confirm) {
// console.log('用户点击确定');
// }
// },
// cancel: () => {
// console.log('用户点击取消');
// }
// });
showDialog({
title: '提示',
content: '检测到您已存在学习记录，要继续学习吗？',
confirmText: '重新学习',
showCancel: true,
cancelText: '继续学习',
success: (res) => {
if (res.confirm) {
console.log('用户点击确定');
}
},
cancel: () => {
console.log('用户点击取消');
}
});
}
const aaaa = () => {
common.show('提示','检测到您已存在学习记录，要继续学习吗？','继续学习', '重新学习').then(res => {
})
// function show(title, msg, showCancel = true, cancelText = '取消', confirmText = '确定') {
// showDialog({
// title: '提示',
// content: '检测到您已存在学习记录，要继续学习吗？',
// confirmText: '重新学习',
// showCancel: true,
// cancelText: '继续学习',
// success: (res) => {
// if (res.confirm) {
// console.log('用户点击确定');
// }
// },
// cancel: () => {
// console.log('用户点击取消');
// }
// });
}
</script>
<style lang="scss" scoped>
$bg-margin-left: 50rpx;
// 下方单元格
.cell_div {
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
background: #ffffff;
border-radius: 15rpx;
z-index: 101;
overflow: hidden;
$bg-margin-left: 50rpx;
// 为了让线缩进来24单位
:deep(.uv-line) {
width: calc(100% - 48rpx) !important;
margin: 0 24rpx !important;
.detail-body {
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
background: #ffffff;
border-radius: 15rpx;
z-index: 101;
overflow: hidden;
// 为了让线缩进来24单位
:deep(.uv-line) {
width: calc(100% - 48rpx) !important;
margin: 0 24rpx !important;
}
:deep(.uv-cell__body) {
padding: 12px 15px;
}
:deep(.uv-cell__title) {
flex: none !important;
}
}
:deep(.uv-cell__body) {
padding: 12px 15px;
.detail-main {
background-color: #F6F8FF;
}
}
</style>
.title {
color: #000000;
font-size: 34rpx;
height: 34rpx;
font-weight: 600;
// margin-bottom: 30rpx;
line-height: 34rpx;
}
.fixed_search_div {
padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
display: flex;
align-items: center;
background-color: #f6f7f8;
.back_div {
margin-right: 10rpx;
.back-icon {
position: relative;
width: 40rpx;
height: 40rpx;
cursor: pointer;
display: flex;
align-items: center;
}
.back-icon::before,
.back-icon::after {
content: '';
position: absolute;
transition: all 0.3s ease;
}
.back-icon::after {
top: 25%;
left: 25%;
width: 40%;
height: 40%;
border-top: 4rpx solid #2b2c2e;
border-left: 4rpx solid #2b2c2e;
transform: rotate(-45deg);
}
}
}
</style>
src/pages/test/index.vue
+166 -159
View File
@@ -1,169 +1,176 @@
<template>
<view class="max_page detail-main">
<nav-bar :is_seat="false"></nav-bar>
<view class="fixed_search_div">
<view class="back_div" @click="common.navigateBack()">
<view class="back-icon"></view>
</view>
<view class="title font_pf">系统参数</view>
</view>
<view class="detail-body">
<uv-cell-group :border="false">
<uv-cell title="根域名" :value="url"></uv-cell>
<uv-cell title="当前环境:" :value="ENV.MODE"></uv-cell>
<uv-cell title="版本名称" :value="appBaseInfo.appVersion"></uv-cell>
<uv-cell title="版本号" :value="appBaseInfo.appVersionCode"></uv-cell>
<uv-cell title="点击1:" @click="aaaa"></uv-cell>
<uv-cell title="点击2:" :border="false" @click="bbbb"></uv-cell>
</uv-cell-group>
</view>
</view>
<view class="container">
<button class="download-btn" @click="saveImage2">下载图片</button>
<view class="image-container" v-if="localImagePath">
<image :src="localImagePath" mode="aspectFit" class="preview-image"></image>
</view>
<view class="status-text">{{statusText}}</view>
</view>
</template>
<script setup>
import common from '@/common/common';
import {
get_base_url
} from '../../api/request';
const url = get_base_url();
const ENV = import.meta.env
const appBaseInfo = uni.getAppBaseInfo()
console.log('appBaseInfo', appBaseInfo);
import showDialog from '@/common/dialogMessage'
<script>
const bbbb = () => {
// showDialog({
// title: '提示信息',
// content: '检测到您已离开，即将退出学习页面。',
// confirmText: '确认',
// showCancel: false,
// cancelText: '再想想',
// success: (res) => {
// if (res.confirm) {
// console.log('用户点击确定');
// }
// },
// cancel: () => {
// console.log('用户点击取消');
// }
// });
export default {
data() {
return {
remoteImageUrl: 'https://aitstest.jlbank.com.cn:7002/traoss/tras3/show/S3T0250181221032025072317561000000449416', // 替换为实际图片URL
localImagePath: '',
statusText: '点击下载图片'
}
},
methods: {
downloadImage() {
// const filePath = '_doc/uniapp_save/17532626796030.jpeg';
// // 使用uni.getFileInfo替代access方法
// uni.getFileInfo({
// filePath: filePath, // 注意这里参数名是filePath而非path
// success: (res) => {
// console.log('本地图片存在，文件大小：', res.size);
// this.localImagePath = filePath;
// },
// fail: (err) => {
// console.log('本地图片不存在或获取失败：', err.errMsg);
// this.localImagePath = '';
// }
// });
showDialog({
title: '提示',
content: '检测到您已存在学习记录，要继续学习吗？',
confirmText: '重新学习',
showCancel: true,
cancelText: '继续学习',
success: (res) => {
if (res.confirm) {
console.log('用户点击确定');
this.statusText = '正在下载图片...'
uni.downloadFile({
url: this.remoteImageUrl,
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
this.saveImage(downloadResult.tempFilePath)
} else {
this.statusText = `下载失败，状态码: ${downloadResult.statusCode}`
}
},
fail: (err) => {
this.statusText = `下载失败: ${err.errMsg}`
}
})
},
saveImage(tempFilePath) {
const savedFilePath = ''
this.statusText = '正在保存图片...'
uni.saveFile({
tempFilePath: tempFilePath,
filePath: savedFilePath,
success: (res) => {
this.localImagePath = res.savedFilePath
this.statusText = '图片保存成功'
this.showImage()
},
fail: (err) => {
if (err.errMsg.includes('permission denied')) {
this.statusText = '需要相册权限才能保存图片'
uni.showModal({
title: '权限申请',
content: '需要相册权限来保存图片到本地',
success: (modalRes) => {
if (modalRes.confirm) {
uni.openSetting()
}
}
})
} else {
this.statusText = `保存失败: ${err.errMsg}`
}
}
})
},
saveFileWithCN(fileUrl, customFileName) { // 文件下载地址, 自定义文件名
// const defaultPathPrefix = "_doc/uniapp_save";
// const fullPath = `${defaultPathPrefix}/${customFileName}`;
const fullPath = customFileName;
const dtask = plus.downloader.createDownload(fileUrl, {
filename: fullPath
}, (d, status) => {
if (status === 200) {
console.log("保存路径：", d.filename);
this.localImagePath = d.filename
} else {
console.error("文件下载失败：", status);
}
});
dtask.start();
},
saveImage2() {
const base_url = 'https://aitstest.jlbank.com.cn:7002'
const pathName = '/traoss/tras3/show/S3T0250181221032025072318450600000455860'
const fileUrl = base_url + pathName
// 生成唯一文件名，避免冲突
const filename = pathName.split('/').pop()
const localFilePath = '_doc/jax/' + filename+'.png'
console.log('localFilePath', localFilePath, fileUrl);
// 先检查是否存在
uni.getFileInfo({
filePath: localFilePath,
success: () => {
console.log('头像已存在，无需下载');
this.localImagePath = localFilePath
},
cancel: () => {
console.log('用户点击取消');
fail: () => {
console.log('头像不存在');
console.log('开始下载头像:', fileUrl);
const dtask = plus.downloader.createDownload(fileUrl, {
filename: localFilePath
}, (d, status) => {
if (status === 200) {
console.log("保存路径：", d.filename);
this.localImagePath = d.filename
} else {
console.error("文件下载失败：", status);
}
});
dtask.start();
}
});
}
const aaaa = () => {
common.show('提示','检测到您已存在学习记录，要继续学习吗？','继续学习', '重新学习').then(res => {
})
// function show(title, msg, showCancel = true, cancelText = '取消', confirmText = '确定') {
// showDialog({
// title: '提示',
// content: '检测到您已存在学习记录，要继续学习吗？',
// confirmText: '重新学习',
// showCancel: true,
// cancelText: '继续学习',
// success: (res) => {
// if (res.confirm) {
// console.log('用户点击确定');
// }
// },
// cancel: () => {
// console.log('用户点击取消');
// }
// });
}
})
},
showImage() {
// 使用saveFile保存后的本地路径直接加载
console.log('本地图片路径:', this.localImagePath)
}
}
}
</script>
<style lang="scss" scoped>
$bg-margin-left: 50rpx;
.detail-body {
margin: 30rpx $bg-margin-left 0 $bg-margin-left;
background: #ffffff;
border-radius: 15rpx;
z-index: 101;
overflow: hidden;
// 为了让线缩进来24单位
:deep(.uv-line) {
width: calc(100% - 48rpx) !important;
margin: 0 24rpx !important;
}
:deep(.uv-cell__body) {
padding: 12px 15px;
}
:deep(.uv-cell__title) {
flex: none !important;
}
}
.detail-main {
background-color: #F6F8FF;
}
.title {
color: #000000;
font-size: 34rpx;
height: 34rpx;
font-weight: 600;
// margin-bottom: 30rpx;
line-height: 34rpx;
}
.fixed_search_div {
padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
display: flex;
align-items: center;
background-color: #f6f7f8;
.back_div {
margin-right: 10rpx;
.back-icon {
position: relative;
width: 40rpx;
height: 40rpx;
cursor: pointer;
display: flex;
align-items: center;
}
.back-icon::before,
.back-icon::after {
content: '';
position: absolute;
transition: all 0.3s ease;
}
.back-icon::after {
top: 25%;
left: 25%;
width: 40%;
height: 40%;
border-top: 4rpx solid #2b2c2e;
border-left: 4rpx solid #2b2c2e;
transform: rotate(-45deg);
}
}
}
</style>
<style>
.container {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.download-btn {
padding: 10px 20px;
background-color: #007AFF;
color: white;
border-radius: 5px;
margin-bottom: 20px;
}
.image-container {
width: 100%;
height: 300px;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.preview-image {
max-width: 100%;
max-height: 100%;
}
.status-text {
color: #666;
font-size: 14px;
}
</style>