731 lines
21 KiB
Vue
731 lines
21 KiB
Vue
<template>
|
||
<view v-if="visible" class="x-file-picker-mask" @click="close">
|
||
<view class="x-file-picker-container" @click.stop>
|
||
<view class="picker-header">
|
||
<text class="back-btn" @click="goBack" v-if="canGoBack">‹</text>
|
||
<text class="title-text">{{ titleDisplay }}</text>
|
||
<view class="header-right"></view>
|
||
</view>
|
||
|
||
<!-- 菜单视图 -->
|
||
<view v-if="mode === 'menu'" class="menu-grid">
|
||
<view class="menu-item" @click="selectCamera">
|
||
<view class="menu-icon" style="background: #33C759;">📷</view>
|
||
<text class="menu-text">相机</text>
|
||
</view>
|
||
<view class="menu-item" @click="selectImage">
|
||
<view class="menu-icon" style="background: #FF2D55;">🖼️</view>
|
||
<text class="menu-text">图库</text>
|
||
</view>
|
||
<view class="menu-item" @click="selectFileSystem">
|
||
<view class="menu-icon" style="background: #FF9500;">📁</view>
|
||
<text class="menu-text">文件管理</text>
|
||
</view>
|
||
<view class="menu-item" @click="selectVideo">
|
||
<view class="menu-icon" style="background: #5856D6;">🎥</view>
|
||
<text class="menu-text">视频</text>
|
||
</view>
|
||
<view class="menu-item" @click="browsePath('Download')">
|
||
<view class="menu-icon" style="background: #007AFF;">⬇️</view>
|
||
<text class="menu-text">下载</text>
|
||
</view>
|
||
<view class="menu-item" @click="browsePath('Documents')">
|
||
<view class="menu-icon" style="background: #AF52DE;">📄</view>
|
||
<text class="menu-text">文档</text>
|
||
</view>
|
||
<view class="menu-item" @click="browsePath('Music')">
|
||
<view class="menu-icon" style="background: #FF3B30;">🎵</view>
|
||
<text class="menu-text">音乐</text>
|
||
</view>
|
||
<view class="menu-item" @click="browsePath('Movies')">
|
||
<view class="menu-icon" style="background: #5AC8FA;">🎬</view>
|
||
<text class="menu-text">影视</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 文件列表视图 (作为系统API不可用时的降级方案) -->
|
||
<scroll-view v-else scroll-y class="file-list">
|
||
<view v-if="loading" class="loading-tips">加载中...</view>
|
||
<view v-else-if="fileList.length === 0" class="empty-tips">空文件夹</view>
|
||
|
||
<view
|
||
v-for="(item, index) in fileList"
|
||
:key="index"
|
||
class="file-item"
|
||
@click="handleItemClick(item)"
|
||
>
|
||
<view class="item-icon">
|
||
<text v-if="item.isDirectory" style="font-size: 24px;">📁</text>
|
||
<text v-else style="font-size: 24px;">📄</text>
|
||
</view>
|
||
<view class="item-info">
|
||
<text class="item-name">{{ item.name }}</text>
|
||
<text class="item-detail" v-if="!item.isDirectory">{{ formatSize(item.size) }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部取消按钮 -->
|
||
<view class="picker-footer" @click="close">
|
||
<text class="cancel-text">取消</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'x-file-picker',
|
||
props: {
|
||
// 是否支持多选
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 最多选择数量
|
||
limit: {
|
||
type: Number,
|
||
default: 9
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
mode: 'menu', // 'menu' | 'browser'
|
||
currentEntry: null,
|
||
currentPath: '',
|
||
rootPath: '',
|
||
fileList: [],
|
||
loading: false
|
||
};
|
||
},
|
||
computed: {
|
||
canGoBack() {
|
||
return this.mode === 'browser';
|
||
},
|
||
titleDisplay() {
|
||
if (this.mode === 'menu') return '选择操作';
|
||
if (!this.currentPath) return '/';
|
||
const parts = this.currentPath.split('/');
|
||
if (parts.length > 2) {
|
||
return '.../' + parts[parts.length - 1];
|
||
}
|
||
return this.currentPath;
|
||
}
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.currentEntry = null;
|
||
this.currentPath = '';
|
||
this.fileList = [];
|
||
this.loading = false;
|
||
this.selectFileSystem();
|
||
},
|
||
close() {
|
||
this.visible = false;
|
||
},
|
||
|
||
// 拍照 (保留方法但不显示入口)
|
||
selectCamera() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType: ['camera'],
|
||
success: (res) => this.handleImageSuccess(res)
|
||
});
|
||
},
|
||
|
||
// 相册 (保留方法但不显示入口)
|
||
selectImage() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType: ['album'],
|
||
success: (res) => this.handleImageSuccess(res)
|
||
});
|
||
},
|
||
|
||
handleImageSuccess(res) {
|
||
const path = res.tempFilePaths[0];
|
||
let name = 'image.jpg';
|
||
if (res.tempFiles && res.tempFiles[0] && res.tempFiles[0].name) {
|
||
name = res.tempFiles[0].name;
|
||
} else {
|
||
name = path.substring(path.lastIndexOf('/') + 1);
|
||
}
|
||
this.$emit('select', { path, name });
|
||
this.close();
|
||
},
|
||
|
||
// 视频
|
||
selectVideo() {
|
||
uni.chooseVideo({
|
||
count: 1,
|
||
success: (res) => {
|
||
const path = res.tempFilePath;
|
||
let name = 'video.mp4';
|
||
if (res.tempFile && res.tempFile.name) {
|
||
name = res.tempFile.name;
|
||
} else {
|
||
name = path.substring(path.lastIndexOf('/') + 1);
|
||
}
|
||
this.$emit('select', { path, name });
|
||
this.close();
|
||
}
|
||
});
|
||
},
|
||
|
||
selectFileSystem() {
|
||
// #ifdef APP-PLUS
|
||
if (plus.os.name === 'Android') {
|
||
this.selectFileByNativeAndroid();
|
||
return;
|
||
}
|
||
if (plus.os.name === 'iOS') {
|
||
this.selectFileByNativeIOS();
|
||
return;
|
||
}
|
||
// #endif
|
||
this.browsePath('root');
|
||
},
|
||
|
||
handleFileSuccess(res) {
|
||
if (this.multiple) {
|
||
// 多选处理
|
||
const files = (res.tempFiles || []).map(file => {
|
||
let name = file.name || '';
|
||
const path = file.path || '';
|
||
if (!name && path) {
|
||
name = path.substring(path.lastIndexOf('/') + 1);
|
||
}
|
||
return { path, name: name || 'file' };
|
||
});
|
||
|
||
if (files.length === 0 && res.tempFilePaths) {
|
||
res.tempFilePaths.forEach(path => {
|
||
const name = path.substring(path.lastIndexOf('/') + 1);
|
||
files.push({ path, name });
|
||
});
|
||
}
|
||
|
||
if (files.length === 0) {
|
||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||
return;
|
||
}
|
||
this.$emit('select', files); // 返回数组
|
||
} else {
|
||
// 单选兼容处理 (返回单个对象)
|
||
const file = res.tempFiles && res.tempFiles[0] ? res.tempFiles[0] : null;
|
||
const path = (file && file.path) || (res.tempFilePaths && res.tempFilePaths[0]) || '';
|
||
let name = (file && file.name) || 'file';
|
||
if (!name && path) {
|
||
name = path.substring(path.lastIndexOf('/') + 1);
|
||
}
|
||
if (!path) {
|
||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||
return;
|
||
}
|
||
this.$emit('select', { path, name });
|
||
}
|
||
this.close();
|
||
},
|
||
|
||
selectFileByNativeAndroid() {
|
||
const main = plus.android.runtimeMainActivity();
|
||
const Intent = plus.android.importClass('android.content.Intent');
|
||
const intent = new Intent(Intent.ACTION_GET_CONTENT);
|
||
intent.setType('*/*');
|
||
intent.addCategory(Intent.CATEGORY_OPENABLE);
|
||
intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
|
||
|
||
if (this.multiple) {
|
||
intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
|
||
}
|
||
|
||
// 生成随机 requestCode (10000 ~ 50000) 避免冲突
|
||
const requestCode = 10000 + Math.floor(Math.random() * 40000);
|
||
|
||
// 保存旧的 onActivityResult 回调
|
||
const oldActivityResult = main.onActivityResult;
|
||
|
||
main.onActivityResult = (requestCodeResult, resultCode, data) => {
|
||
// 如果有旧的回调，先执行
|
||
if (oldActivityResult) {
|
||
try {
|
||
oldActivityResult(requestCodeResult, resultCode, data);
|
||
} catch (e) {
|
||
console.error('Old onActivityResult failed', e);
|
||
}
|
||
}
|
||
|
||
if (requestCodeResult !== requestCode) return;
|
||
|
||
if (resultCode !== -1 || !data) { // -1 is Activity.RESULT_OK
|
||
return;
|
||
}
|
||
|
||
// 处理多选 ClipData
|
||
let clipData = null;
|
||
try {
|
||
clipData = data.getClipData();
|
||
} catch(e) {
|
||
console.warn('getClipData failed', e);
|
||
}
|
||
|
||
console.log('Android File Picked: multiple=', this.multiple, 'clipData=', clipData);
|
||
|
||
if (clipData && this.multiple) {
|
||
let count = 0;
|
||
try {
|
||
// 尝试直接调用
|
||
count = clipData.getItemCount();
|
||
} catch (e) {
|
||
console.warn('clipData.getItemCount() failed, trying plus.android.invoke', e);
|
||
try {
|
||
// 降级尝试
|
||
count = plus.android.invoke(clipData, 'getItemCount');
|
||
} catch (e2) {
|
||
console.error('All getItemCount attempts failed', e2);
|
||
}
|
||
}
|
||
|
||
console.log('ClipData count:', count);
|
||
|
||
if (count > 0) {
|
||
const files = [];
|
||
let processedCount = 0;
|
||
|
||
for (let i = 0; i < count; i++) {
|
||
try {
|
||
// 尝试直接调用或 invoke
|
||
let item = null;
|
||
try {
|
||
item = clipData.getItemAt(i);
|
||
} catch(e) {
|
||
item = plus.android.invoke(clipData, 'getItemAt', i);
|
||
}
|
||
|
||
if (!item) throw new Error('Item is null');
|
||
|
||
let uri = null;
|
||
try {
|
||
uri = item.getUri();
|
||
} catch(e) {
|
||
uri = plus.android.invoke(item, 'getUri');
|
||
}
|
||
|
||
if (!uri) throw new Error('Uri is null');
|
||
|
||
const uriStr = uri.toString();
|
||
|
||
// 异步获取每个文件信息
|
||
this.resolveAndroidFile(main, uri, uriStr, (file) => {
|
||
files.push(file);
|
||
processedCount++;
|
||
if (processedCount === count) {
|
||
this.emitSelectFiles(files);
|
||
}
|
||
});
|
||
} catch (e) {
|
||
console.error('Process clip item failed at index ' + i, e);
|
||
processedCount++;
|
||
if (processedCount === count) {
|
||
this.emitSelectFiles(files);
|
||
}
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
// 如果 count 为 0，降级到单选逻辑
|
||
}
|
||
|
||
// 单选或不支持 ClipData
|
||
const uri = data.getData();
|
||
console.log('Single URI:', uri);
|
||
if (!uri) {
|
||
console.error('No data uri found');
|
||
return;
|
||
}
|
||
const uriStr = uri.toString();
|
||
|
||
this.resolveAndroidFile(main, uri, uriStr, (file) => {
|
||
console.log('Resolved single file:', file);
|
||
if (this.multiple) {
|
||
this.emitSelectFiles([file]);
|
||
} else {
|
||
this.emitSelect(file.path, file.name);
|
||
}
|
||
});
|
||
};
|
||
|
||
main.startActivityForResult(intent, requestCode);
|
||
},
|
||
|
||
resolveAndroidFile(main, uri, uriStr, callback) {
|
||
let callbackCalled = false;
|
||
const safeCallback = (res) => {
|
||
if (callbackCalled) return;
|
||
callbackCalled = true;
|
||
callback(res);
|
||
};
|
||
|
||
plus.io.resolveLocalFileSystemURL(uriStr, (entry) => {
|
||
safeCallback({ path: entry.fullPath, name: entry.name || '' });
|
||
}, (e) => {
|
||
console.log('resolveLocalFileSystemURL failed', e);
|
||
let name = this.getAndroidFileName(main, uri);
|
||
if (!name) {
|
||
try {
|
||
const path = uri.getPath();
|
||
if (path) {
|
||
const lastSlash = path.lastIndexOf('/');
|
||
if (lastSlash !== -1) {
|
||
name = decodeURIComponent(path.substring(lastSlash + 1));
|
||
}
|
||
}
|
||
} catch (e) {}
|
||
}
|
||
safeCallback({ path: uriStr, name: name || 'file' });
|
||
});
|
||
},
|
||
|
||
getAndroidFileName(main, uri) {
|
||
try {
|
||
const OpenableColumns = plus.android.importClass('android.provider.OpenableColumns');
|
||
const resolver = main.getContentResolver();
|
||
plus.android.importClass(resolver); // 确保 resolver 方法被绑定
|
||
const cursor = resolver.query(uri, null, null, null, null);
|
||
if (cursor) {
|
||
plus.android.importClass(cursor); // 确保 cursor 方法被绑定
|
||
if (cursor.moveToFirst()) {
|
||
const index = cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME);
|
||
if (index > -1) {
|
||
const name = cursor.getString(index);
|
||
cursor.close();
|
||
return name || '';
|
||
}
|
||
}
|
||
cursor.close();
|
||
}
|
||
} catch (e) {
|
||
console.error('getAndroidFileName error', e);
|
||
}
|
||
return '';
|
||
},
|
||
|
||
selectFileByNativeIOS() {
|
||
const UIDocumentPickerViewController = plus.ios.importClass('UIDocumentPickerViewController');
|
||
const picker = new UIDocumentPickerViewController(['public.data'], 0);
|
||
picker.allowsMultipleSelection = this.multiple;
|
||
picker.onDidPickDocumentAtURL = (url) => {
|
||
const path = plus.ios.invoke(url, 'path');
|
||
const name = this.extractName(path);
|
||
if (this.multiple) {
|
||
this.emitSelectFiles([{ path, name }]);
|
||
} else {
|
||
this.emitSelect(path, name);
|
||
}
|
||
plus.ios.deleteObject(picker);
|
||
};
|
||
picker.onDidPickDocumentsAtURLs = (urls) => {
|
||
const count = urls.count();
|
||
if (count > 0) {
|
||
if (this.multiple) {
|
||
const files = [];
|
||
for(let i=0; i<count; i++) {
|
||
const url = urls.objectAtIndex(i);
|
||
const path = plus.ios.invoke(url, 'path');
|
||
files.push({ path, name: this.extractName(path) });
|
||
}
|
||
this.emitSelectFiles(files);
|
||
} else {
|
||
const first = urls.objectAtIndex(0);
|
||
const path = plus.ios.invoke(first, 'path');
|
||
this.emitSelect(path, this.extractName(path));
|
||
}
|
||
}
|
||
plus.ios.deleteObject(picker);
|
||
};
|
||
picker.onWasCancelled = () => {
|
||
plus.ios.deleteObject(picker);
|
||
};
|
||
const current = plus.ios.currentViewController();
|
||
current.presentViewController(picker, true, null);
|
||
},
|
||
|
||
extractName(path) {
|
||
if (!path) return '';
|
||
return path.substring(path.lastIndexOf('/') + 1);
|
||
},
|
||
|
||
emitSelectFiles(files) {
|
||
if (!files || files.length === 0) {
|
||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||
return;
|
||
}
|
||
this.$emit('select', files);
|
||
this.close();
|
||
},
|
||
|
||
emitSelect(path, name) {
|
||
if (!path) {
|
||
uni.showToast({ title: '未选择文件', icon: 'none' });
|
||
return;
|
||
}
|
||
const fileName = name || this.extractName(path) || 'file';
|
||
this.$emit('select', { path, name: fileName });
|
||
this.close();
|
||
},
|
||
|
||
/**
|
||
* 浏览特定目录
|
||
* 由于标准基座不支持 uni.chooseFile，这里使用 plus.io 进行降级处理
|
||
* 保持 UI 风格一致，但在应用内浏览文件
|
||
*/
|
||
browsePath(type) {
|
||
this.visible = true; // 仅在需要浏览器 UI 时显示遮罩
|
||
this.mode = 'browser';
|
||
this.loading = true;
|
||
|
||
let targetPath = '';
|
||
// #ifdef APP-PLUS
|
||
const base = '/storage/emulated/0/';
|
||
switch(type) {
|
||
case 'Download': targetPath = base + 'Download/'; break;
|
||
case 'Documents': targetPath = base + 'Documents/'; break;
|
||
case 'Music': targetPath = base + 'Music/'; break;
|
||
case 'Movies': targetPath = base + 'Movies/'; break;
|
||
case 'root': targetPath = base; break;
|
||
default: targetPath = base;
|
||
}
|
||
|
||
plus.io.resolveLocalFileSystemURL(targetPath, (entry) => {
|
||
this.rootPath = entry.fullPath;
|
||
this.readDirectory(entry);
|
||
}, (e) => {
|
||
console.error('Dir access failed', e);
|
||
if (type !== 'root') {
|
||
// 失败尝试回退到根目录
|
||
this.browsePath('root');
|
||
} else {
|
||
uni.showToast({ title: '无法访问存储', icon: 'none' });
|
||
this.mode = 'menu';
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
// #ifndef APP-PLUS
|
||
uni.showToast({ title: '仅App端支持', icon: 'none' });
|
||
this.mode = 'menu';
|
||
// #endif
|
||
},
|
||
|
||
readDirectory(entry) {
|
||
this.currentEntry = entry;
|
||
this.currentPath = entry.fullPath;
|
||
this.loading = true;
|
||
this.fileList = [];
|
||
|
||
const reader = entry.createReader();
|
||
reader.readEntries((entries) => {
|
||
const list = [];
|
||
if (entries.length > 0) {
|
||
// 排序: 文件夹在前
|
||
entries.sort((a, b) => {
|
||
if (a.isDirectory && !b.isDirectory) return -1;
|
||
if (!a.isDirectory && b.isDirectory) return 1;
|
||
return a.name.localeCompare(b.name);
|
||
});
|
||
|
||
entries.forEach(item => {
|
||
if (item.name.startsWith('.')) return;
|
||
list.push({
|
||
name: item.name,
|
||
isDirectory: item.isDirectory,
|
||
fullPath: item.fullPath,
|
||
entry: item,
|
||
size: 0
|
||
});
|
||
});
|
||
}
|
||
this.fileList = list;
|
||
this.loading = false;
|
||
}, (e) => {
|
||
console.error('Read dir failed', e);
|
||
this.loading = false;
|
||
uni.showToast({ title: '读取目录失败', icon: 'none' });
|
||
});
|
||
},
|
||
|
||
handleItemClick(item) {
|
||
if (item.isDirectory) {
|
||
this.readDirectory(item.entry);
|
||
} else {
|
||
this.$emit('select', {
|
||
path: item.fullPath,
|
||
name: item.name
|
||
});
|
||
this.close();
|
||
}
|
||
},
|
||
|
||
goBack() {
|
||
if (this.currentPath === this.rootPath) {
|
||
this.mode = 'menu';
|
||
return;
|
||
}
|
||
if (!this.currentEntry) {
|
||
this.mode = 'menu';
|
||
return;
|
||
}
|
||
this.currentEntry.getParent((parentEntry) => {
|
||
this.readDirectory(parentEntry);
|
||
}, (e) => {
|
||
this.mode = 'menu';
|
||
});
|
||
},
|
||
|
||
formatSize(size) {
|
||
if (size < 1024) return size + ' B';
|
||
if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB';
|
||
return (size / 1024 / 1024).toFixed(2) + ' MB';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.x-file-picker-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
z-index: 999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end; /* 底部对齐 */
|
||
}
|
||
.x-file-picker-container {
|
||
width: 100%;
|
||
height: 60vh; /* 半屏高度 */
|
||
background: #fff;
|
||
border-top-left-radius: 20px;
|
||
border-top-right-radius: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
.picker-header {
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 15px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.back-btn {
|
||
font-size: 24px;
|
||
color: #333;
|
||
width: 40px;
|
||
}
|
||
.header-right {
|
||
width: 40px;
|
||
}
|
||
.title-text {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
.menu-grid {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 20px 10px;
|
||
align-content: flex-start;
|
||
overflow-y: auto;
|
||
}
|
||
.menu-item {
|
||
width: 25%; /* 4列布局 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
.menu-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 16px; /* 大圆角 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
margin-bottom: 8px;
|
||
color: #fff;
|
||
}
|
||
.menu-text {
|
||
font-size: 12px;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
.file-list {
|
||
flex: 1;
|
||
padding: 0 15px;
|
||
}
|
||
.loading-tips, .empty-tips {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
.file-item:active {
|
||
background-color: #f9f9f9;
|
||
}
|
||
.item-icon {
|
||
margin-right: 15px;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f0f0f0;
|
||
border-radius: 8px;
|
||
color: #999;
|
||
}
|
||
.item-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.item-name {
|
||
font-size: 16px;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
.item-detail {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
.picker-footer {
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-top: 8px solid #f8f8f8; /* 分隔条效果 */
|
||
background: #fff;
|
||
}
|
||
.cancel-text {
|
||
font-size: 16px;
|
||
color: #333;
|
||
width: 100%;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
}
|
||
</style>
|