Skip to content

S
self-support
Commit 584e902d authored by Facius's avatar Facius
Browse files
Options

fix: 文件页面标签的换行

parent 2dcca078
Hide whitespace changes
Inline Side-by-side
Showing with 549 additions and 475 deletions
src/pages/order/document.vue
View file @ 584e902d
<template>
<view :class="['doc-wrap', {'order-file': orderFile}]">
<u-navbar back-icon-color="#333333" background="#FFFFFF" title="安装文件" titleColor="#333333"
:border-bottom="false" title-bold></u-navbar>
<template v-if="!orderFile">
<!-- 合作商、品牌标签列表 -->
<view v-for="(item, key) in labels" :key="key" class="label-list">
<view class="label-title">
<!-- 合作商或品牌 -->
<view>{{items[key]}}</view>
<!-- 跳转到所有标签页面的更多按钮 -->
<view class="label-file-right" @click="handleMore(key)" v-if="item.length > 3">
<text class="label-right-text">更多</text>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<scroll-view scroll-x="true" class="label-content" :scroll-into-view="scrollId[key]">
<view v-for="(label, ind) in item" :key="ind" class="label-item" :id="idText + label.id">
<!-- 选中为蓝底，非选中状态为灰底 -->
<view :class="['label-normal', {'selected': label.id == selected[key].id}]" @click="handleClick(key, label)">
<text class="label-text u-line-2">{{label.name}}</text>
</view>
</view>
<!-- 标签加载中 -->
<view class="tag-loading-view" v-if="tapLoading[key]">
<u-loading mode="flower"></u-loading>
</view>
<!-- 无供应商、无品牌 -->
<view class="tag-tip-view" v-else-if="item.length <= 0">{{'暂无' + items[key]}}</view>
</scroll-view>
</view>
</template>
<view class="file-title">文件列表</view>
<view class="file-list">
<!-- 文件列表 -->
<view class="file-row" v-for="(item, index) in list" :key="index">
<view class="file-left">
<view class="file-name">
<u-icon class="item-icon" name="doc" custom-prefix="wxh" size="52" color="#2272FF"></u-icon>
<!-- 文件后缀的首字母，大写 -->
<view class="file-format-text">{{formatText(item.name)}}</view>
</view>
<text>{{item.name}}</text>
</view>
<!-- 文件操作按钮 -->
<view class="file-right">
<u-button :custom-style="shareStyle" shape="circle" @click="handleShare(item)">分享</u-button>
<u-button :custom-style="previewStyle" shape="circle" @click="handlePreview(item)">查看</u-button>
</view>
</view>
<!-- 如果是加载中，就显示转圈；如果加载完成 -->
<view class="loading-view" v-if="loading">
<u-loading mode="flower"></u-loading>
</view>
<!-- 加载完成之后，没有数据的提示：未选择品牌提示、无文件提示 -->
<view class="tip-view" v-else-if="list.length <= 0">{{tipText}}</view>
</view>
</view>
<view :class="['doc-wrap', { 'order-file': orderFile }]">
<u-navbar
back-icon-color="#333333"
background="#FFFFFF"
title="安装文件"
titleColor="#333333"
:border-bottom="false"
title-bold
></u-navbar>
<template v-if="!orderFile">
<!-- 合作商、品牌标签列表 -->
<view v-for="(item, key) in labels" :key="key" class="label-list">
<view class="label-title">
<!-- 合作商或品牌 -->
<view>{{ items[key] }}</view>
<!-- 跳转到所有标签页面的更多按钮 -->
<view
class="label-file-right"
@click="handleMore(key)"
v-if="item.length > 3"
>
<text class="label-right-text">更多</text>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<scroll-view
scroll-x="true"
class="label-content"
:scroll-into-view="scrollId[key]"
>
<view
v-for="(label, ind) in item"
:key="ind"
class="label-item"
:id="idText + label.id"
>
<!-- 选中为蓝底，非选中状态为灰底 -->
<view
:class="[
'label-normal',
{ selected: label.id == selected[key].id },
]"
@click="handleClick(key, label)"
>
<text class="label-text u-line-2">{{ label.name }}</text>
</view>
</view>
<!-- 标签加载中 -->
<view class="tag-loading-view" v-if="tapLoading[key]">
<u-loading mode="flower"></u-loading>
</view>
<!-- 无供应商、无品牌 -->
<view class="tag-tip-view" v-else-if="item.length <= 0">{{
'暂无' + items[key]
}}</view>
</scroll-view>
</view>
</template>
<view class="file-title">文件列表</view>
<view class="file-list">
<!-- 文件列表 -->
<view class="file-row" v-for="(item, index) in list" :key="index">
<view class="file-left">
<view class="file-name">
<u-icon
class="item-icon"
name="doc"
custom-prefix="wxh"
size="52"
color="#2272FF"
></u-icon>
<!-- 文件后缀的首字母，大写 -->
<view class="file-format-text">{{ formatText(item.name) }}</view>
</view>
<text>{{ item.name }}</text>
</view>
<!-- 文件操作按钮 -->
<view class="file-right">
<u-button
:custom-style="shareStyle"
shape="circle"
@click="handleShare(item)"
>分享</u-button
>
<u-button
:custom-style="previewStyle"
shape="circle"
@click="handlePreview(item)"
>查看</u-button
>
</view>
</view>
<!-- 如果是加载中，就显示转圈；如果加载完成 -->
<view class="loading-view" v-if="loading">
<u-loading mode="flower"></u-loading>
</view>
<!-- 加载完成之后，没有数据的提示：未选择品牌提示、无文件提示 -->
<view class="tip-view" v-else-if="list.length <= 0">{{ tipText }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [], // 文件列表
firstLoad: true, // 初次加载
labels: { // 标签列表
'1': [], // 合作商标签列表
'2': [] // 品牌标签列表
},
selected: { // 选中的标签
'1': {}, // 选中的合作商
'2': {} // 选中的品牌
},
scrollId: {
'1': '', // 选中的合作商view的id
'2': '' // 选中的品牌view的id
},
loading: false, // 文件列表加载中
tapLoading: {
'1': true, // 合作商加载中
'2': true // 品牌加载中
},
orderFile: false, // 是否是订单详情进来
fileList: {}, // 文件地址缓存 {url最后一段： tmpPath}
};
},
computed: {
// 合作商的key是'1'，品牌的key是'2'
items() {
return {
'1': '合作商',
'2': '品牌'
}
},
// 分享按钮风格
shareStyle() {
return {
marginRight: '10rpx',
width: '100rpx',
height: '52rpx',
background: '#FFFFFF',
color: '#2272FF',
fontSize: '24rpx',
fontWeight: '400',
lineHeight: '52rpx'
}
},
// 查看按钮风格
previewStyle() {
return {
width: '100rpx',
height: '52rpx',
background: '#2272FF',
color: '#FFFFFF',
fontSize: '24rpx',
fontWeight: '400',
lineHeight: '52rpx'
}
},
// 文件列表文件图片
wenjianImage() {
return process.uniEnv.qn_base_url + 'wenjian-bk.png'
},
// 列表无数据的提示文字
tipText() {
return (this.selected['2'].name || this.orderFile) ? '暂无文件' : '请选择品牌'
},
idText() {
return 'item'
}
},
onLoad(e) {
if (e && e.partnerCompanyId && e.brandId) { // 订单详情进来获取指定合作商和品牌的文件资料
this.orderFile = true
this.loadFileList(e.partnerCompanyId, e.brandId)
} else { // 获取所有文件资料
this.loadFileLabel('1')
}
this.fileList = getApp().globalData.fileList || {} // 文件地址缓存 {url最后一段： tmpPath}
},
onShow() {
// 从标签列表页面返回，获取选中的标签
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let selectedItem = page.selectedItem;
if (selectedItem) {
page.selectedItem = null
for (var item of this.labels[selectedItem.type]) {
if (item.id == selectedItem.id) {
this.handleClick(selectedItem.type, item)
this.scrollId[selectedItem.type] = this.idText + selectedItem.id
return
}
}
}
},
methods: {
// 选中标签
handleClick(key, label) {
this.selected[key] = label
this.scrollId[key] = ''
if (key == '1') { // 合作商
this.selected['2'] = {} // 清空选中品牌标签
this.list = [] // 清空文件列表
this.loadFileLabel('2', label.id) // 获取新合作商对应品牌
} else {// 品牌
this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表
}
},
// 跳转到所有标签
handleMore(key) {
var partnerCompanyId = '' // 合作商id
if (key == '2') { // 点击品牌的更多，跳转要传合作商id
partnerCompanyId = this.selected['1'].id
}
this.$u.route({url: 'pages/order/document-tag' + '?partnerCompanyId=' + partnerCompanyId + '&selectedId=' + this.selected[key].id})
},
// 点击了分享
handleShare(item) {
// 分享资料事件
getApp().track('share_document', {
id: this.vuex_user.id,
url: item.url
});
let filePath = this.fileList[(item.url || '').split('/').pop()]
if (filePath) { // 有下载记录
wx.shareFileMessage({ // 如果用checkFile检查文件是否存在后再分享，shareFileMess报错：shareFileMessage:fail can only be invoked by user TAP gesture.
filePath: filePath,
fileName: item.name,
success() {},
fail: (error) => {
console.log(error)
if (error.errMsg.indexOf('internal') != -1) { // 文件不存在重新下载
this.downloadFile(item.url, (result)=> {
wx.shareFileMessage({
filePath: result.tempFilePath,
fileName: item.name,
success() {},
fail: console.error,
})
})
}
},
})
} else { // 无下载记录
this.downloadFile(item.url, (res)=> { // 下载
wx.shareFileMessage({
filePath: res.tempFilePath,
fileName: item.name,
success() {},
fail: console.error,
})
})
}
},
// 点击了查看
handlePreview(item) {
// 查看资料事件
getApp().track('preview_document', {
id: this.vuex_user.id,
url: item.url
});
let filePath = this.fileList[(item.url || '').split('/').pop()]
if (filePath) { // 有下载记录
this.checkFile(filePath, (res)=> { // 文件是否还存在
if (res.size && res.size > 0) { // 存在，预览文件
this.previewFile(filePath)
} else { // 文件已经不存在, 下载
this.downloadFile(item.url, (result)=> {
this.previewFile(result.tempFilePath)
})
}
})
} else { // 无下载记录
this.downloadFile(item.url, (res)=> { // 下载
this.previewFile(res.tempFilePath)
})
}
},
// 缓存文件是否存在
checkFile(filePath, complete) {
uni.getFileInfo({
filePath: filePath,
complete: complete
})
},
// 下载文件
downloadFile(url, block) {
uni.showLoading({
title: '加载中'
})
uni.downloadFile({
url: url,
success: (res)=> {
uni.hideLoading()
this.fileList[url.split('/').pop()] = res.tempFilePath
block(res)
}
});
},
// 预览文件
previewFile(filePath) {
if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) { // 查看图片
wx.previewImage({
current: filePath, // 当前显示图片的http链接
urls: [filePath] // 需要预览的图片http链接列表
})
} else { // 查看文件
uni.openDocument({
filePath: filePath,
success: function(res) {
console.log('打开文档成功');
}
});
}
},
// 获取合作商或品牌列表
async loadFileLabel(type, partnerCompanyId) {
this.tapLoading[type] = true
let param = {
type: type, // 1:合作商标签，2：品牌标签
}
if (type == '2') {
param.partnerCompanyId = partnerCompanyId // 合作商的标签id
}
let res = await this.$u.api.fileLabel(param)
this.tapLoading[type] = false
if (res && res.code == 200) {
this.labels[type] = res.data || []
// this.labels[type] = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
// 初次进入页面，获取完合作商列表之后，接着获取第一个合作商的品牌列表
if (this.firstLoad && type == '1') {
this.firstLoad = false
if (this.labels[type].length > 0) {
this.selected[type] = this.labels[type][0]
this.loadFileLabel('2', this.selected[type].id)
}
}
}
},
// 获取文件列表
async loadFileList(partnerCompanyId, brandId) {
this.loading = true
let res = await this.$u.api.fileList({
partnerCompanyId: partnerCompanyId, // 合作商标签
brandId: brandId // 品牌标签
})
this.loading = false
if (res && res.code == 200) {
this.list = res.data || []
// this.list = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
}
},
// 文件后缀的首字母，大写
formatText(name) {
let arr = name.split('.')
if (arr.length > 1) {
let item = arr.pop()
return item.substr(0, 1).toUpperCase()
} else {
return 'P'
}
},
}
};
export default {
data() {
return {
list: [], // 文件列表
firstLoad: true, // 初次加载
labels: {
// 标签列表
'1': [], // 合作商标签列表
'2': [], // 品牌标签列表
},
selected: {
// 选中的标签
'1': {}, // 选中的合作商
'2': {}, // 选中的品牌
},
scrollId: {
'1': '', // 选中的合作商view的id
'2': '', // 选中的品牌view的id
},
loading: false, // 文件列表加载中
tapLoading: {
'1': true, // 合作商加载中
'2': true, // 品牌加载中
},
orderFile: false, // 是否是订单详情进来
fileList: {}, // 文件地址缓存 {url最后一段： tmpPath}
}
},
computed: {
// 合作商的key是'1'，品牌的key是'2'
items() {
return {
'1': '合作商',
'2': '品牌',
}
},
// 分享按钮风格
shareStyle() {
return {
marginRight: '10rpx',
width: '100rpx',
height: '52rpx',
background: '#FFFFFF',
color: '#2272FF',
fontSize: '24rpx',
fontWeight: '400',
lineHeight: '52rpx',
}
},
// 查看按钮风格
previewStyle() {
return {
width: '100rpx',
height: '52rpx',
background: '#2272FF',
color: '#FFFFFF',
fontSize: '24rpx',
fontWeight: '400',
lineHeight: '52rpx',
}
},
// 文件列表文件图片
wenjianImage() {
return process.uniEnv.qn_base_url + 'wenjian-bk.png'
},
// 列表无数据的提示文字
tipText() {
return this.selected['2'].name || this.orderFile
? '暂无文件'
: '请选择品牌'
},
idText() {
return 'item'
},
},
onLoad(e) {
if (e && e.partnerCompanyId && e.brandId) {
// 订单详情进来获取指定合作商和品牌的文件资料
this.orderFile = true
this.loadFileList(e.partnerCompanyId, e.brandId)
} else {
// 获取所有文件资料
this.loadFileLabel('1')
}
this.fileList = getApp().globalData.fileList || {} // 文件地址缓存 {url最后一段： tmpPath}
},
onShow() {
// 从标签列表页面返回，获取选中的标签
let pages = getCurrentPages()
let page = pages[pages.length - 1]
let selectedItem = page.selectedItem
if (selectedItem) {
page.selectedItem = null
for (var item of this.labels[selectedItem.type]) {
if (item.id == selectedItem.id) {
this.handleClick(selectedItem.type, item)
this.scrollId[selectedItem.type] = this.idText + selectedItem.id
return
}
}
}
},
methods: {
// 选中标签
handleClick(key, label) {
this.selected[key] = label
this.scrollId[key] = ''
if (key == '1') {
// 合作商
this.selected['2'] = {} // 清空选中品牌标签
this.list = [] // 清空文件列表
this.loadFileLabel('2', label.id) // 获取新合作商对应品牌
} else {
// 品牌
this.loadFileList(this.selected['1'].id, this.selected['2'].id) // 获取文件列表
}
},
// 跳转到所有标签
handleMore(key) {
var partnerCompanyId = '' // 合作商id
if (key == '2') {
// 点击品牌的更多，跳转要传合作商id
partnerCompanyId = this.selected['1'].id
}
this.$u.route({
url:
'pages/order/document-tag' +
'?partnerCompanyId=' +
partnerCompanyId +
'&selectedId=' +
this.selected[key].id,
})
},
// 点击了分享
handleShare(item) {
// 分享资料事件
getApp().track('share_document', {
id: this.vuex_user.id,
url: item.url,
})
let filePath = this.fileList[(item.url || '').split('/').pop()]
if (filePath) {
// 有下载记录
wx.shareFileMessage({
// 如果用checkFile检查文件是否存在后再分享，shareFileMess报错：shareFileMessage:fail can only be invoked by user TAP gesture.
filePath: filePath,
fileName: item.name,
success() {},
fail: (error) => {
console.log(error)
if (error.errMsg.indexOf('internal') != -1) {
// 文件不存在重新下载
this.downloadFile(item.url, (result) => {
wx.shareFileMessage({
filePath: result.tempFilePath,
fileName: item.name,
success() {},
fail: console.error,
})
})
}
},
})
} else {
// 无下载记录
this.downloadFile(item.url, (res) => {
// 下载
wx.shareFileMessage({
filePath: res.tempFilePath,
fileName: item.name,
success() {},
fail: console.error,
})
})
}
},
// 点击了查看
handlePreview(item) {
// 查看资料事件
getApp().track('preview_document', {
id: this.vuex_user.id,
url: item.url,
})
let filePath = this.fileList[(item.url || '').split('/').pop()]
if (filePath) {
// 有下载记录
this.checkFile(filePath, (res) => {
// 文件是否还存在
if (res.size && res.size > 0) {
// 存在，预览文件
this.previewFile(filePath)
} else {
// 文件已经不存在, 下载
this.downloadFile(item.url, (result) => {
this.previewFile(result.tempFilePath)
})
}
})
} else {
// 无下载记录
this.downloadFile(item.url, (res) => {
// 下载
this.previewFile(res.tempFilePath)
})
}
},
// 缓存文件是否存在
checkFile(filePath, complete) {
uni.getFileInfo({
filePath: filePath,
complete: complete,
})
},
// 下载文件
downloadFile(url, block) {
uni.showLoading({
title: '加载中',
})
uni.downloadFile({
url: url,
success: (res) => {
uni.hideLoading()
this.fileList[url.split('/').pop()] = res.tempFilePath
block(res)
},
})
},
// 预览文件
previewFile(filePath) {
if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
// 查看图片
wx.previewImage({
current: filePath, // 当前显示图片的http链接
urls: [filePath], // 需要预览的图片http链接列表
})
} else {
// 查看文件
uni.openDocument({
filePath: filePath,
success: function(res) {
console.log('打开文档成功')
},
})
}
},
// 获取合作商或品牌列表
async loadFileLabel(type, partnerCompanyId) {
this.tapLoading[type] = true
let param = {
type: type, // 1:合作商标签，2：品牌标签
}
if (type == '2') {
param.partnerCompanyId = partnerCompanyId // 合作商的标签id
}
let res = await this.$u.api.fileLabel(param)
this.tapLoading[type] = false
if (res && res.code == 200) {
this.labels[type] = res.data || []
// this.labels[type] = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
// 初次进入页面，获取完合作商列表之后，接着获取第一个合作商的品牌列表
if (this.firstLoad && type == '1') {
this.firstLoad = false
if (this.labels[type].length > 0) {
this.selected[type] = this.labels[type][0]
this.loadFileLabel('2', this.selected[type].id)
}
}
}
},
// 获取文件列表
async loadFileList(partnerCompanyId, brandId) {
this.loading = true
let res = await this.$u.api.fileList({
partnerCompanyId: partnerCompanyId, // 合作商标签
brandId: brandId, // 品牌标签
})
this.loading = false
if (res && res.code == 200) {
this.list = res.data || []
// this.list = [...res.data,...res.data,...res.data,...res.data,...res.data,...res.data,...res.data] // 测试模拟多条数据
}
},
// 文件后缀的首字母，大写
formatText(name) {
let arr = name.split('.')
if (arr.length > 1) {
let item = arr.pop()
return item.substr(0, 1).toUpperCase()
} else {
return 'P'
}
},
},
}
</script>
<style lang="scss" scoped>
.doc-wrap {
background-color: #F4F5F7;
height: 100vh;
display: flex;
flex-direction: column;
&.order-file {
background-color: #FFFFFF;
}
.doc-wrap {
background-color: #f4f5f7;
height: 100vh;
display: flex;
flex-direction: column;
.label-list {
padding: 0 0 40rpx 30rpx;
&.order-file {
background-color: #ffffff;
}
.label-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
.label-list {
padding: 0 0 40rpx 30rpx;
.label-file-right {
display: flex;
align-items: center;
justify-content: flex-end;
color: #2272FF;
font-size: 26rpx;
padding-right: 30rpx;
.label-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
.label-right-text {
font-weight: 400;
}
}
}
.label-file-right {
display: flex;
align-items: center;
justify-content: flex-end;
color: #2272ff;
font-size: 26rpx;
padding-right: 30rpx;
.label-content {
width: 100%;
height: 104rpx;
white-space: nowrap;
.label-item {
overflow: hidden;
padding-right: 20rpx;
flex-shrink: 0;
display: inline-block;
.label-normal {
height: 104rpx;
width: 200rpx;
font-size: 26rpx;
color: #666666;
background-color: #FFFFFF;
border-radius: 8rpx;
padding-left: 20rpx;
padding-right: 20rpx;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
.label-text {
word-break:break-all;
white-space: normal !important;
}
&.selected {
color: #FFFFFF;
background-color: #2272FF;
}
}
}
.tag-loading-view {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
position: absolute;
padding-right: 30rpx;
}
.tag-tip-view {
color: #999999;
width: 100%;
margin-top: 30rpx;
text-align: center;
position: absolute;
padding-right: 30rpx;
}
}
}
}
.label-right-text {
font-weight: 400;
}
}
}
.file-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
padding: 20rpx 30rpx;
border-radius: 32rpx;
background-color: #FFFFFF;
// margin-top: 10rpx;
}
.label-content {
width: 100%;
height: 104rpx;
white-space: nowrap;
.label-item {
overflow: hidden;
padding-right: 20rpx;
flex-shrink: 0;
display: inline-block;
.label-normal {
height: 104rpx;
width: 200rpx;
font-size: 26rpx;
color: #666666;
background-color: #ffffff;
border-radius: 8rpx;
padding-left: 20rpx;
padding-right: 20rpx;
text-align: center;
// display: flex;
// justify-content: center;
// align-items: center;
display: table;
.label-text {
word-break: break-all;
white-space: normal !important;
display: table-cell;
vertical-align: middle;
}
&.selected {
color: #ffffff;
background-color: #2272ff;
}
}
}
.tag-loading-view {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
position: absolute;
padding-right: 30rpx;
}
.tag-tip-view {
color: #999999;
width: 100%;
margin-top: 30rpx;
text-align: center;
position: absolute;
padding-right: 30rpx;
}
}
}
}
.file-list {
padding: 0 30rpx;
height: 100%;
overflow: auto;
background-color: #FFFFFF;
.file-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
padding: 20rpx 30rpx;
border-radius: 32rpx;
background-color: #ffffff;
// margin-top: 10rpx;
}
.file-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
margin-bottom: 50rpx;
.file-list {
padding: 0 30rpx;
height: 100%;
overflow: auto;
background-color: #ffffff;
.file-left {
display: flex;
align-items: center;
color: #333333;
font-size: 26rpx;
.file-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
margin-bottom: 50rpx;
.file-name {
margin-right: 20rpx;
position: relative;
.item-icon {
position: absolute;
}
.file-format-text {
position: relative;
width: 52rpx;
height: 52rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 52rpx;
}
}
.file-left {
display: flex;
align-items: center;
color: #333333;
font-size: 26rpx;
}
.file-name {
margin-right: 20rpx;
position: relative;
.item-icon {
position: absolute;
}
.file-format-text {
position: relative;
width: 52rpx;
height: 52rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #ffffff;
line-height: 52rpx;
}
}
}
.file-right {
display: flex;
align-items: center;
justify-content: flex-end;
.file-right {
display: flex;
align-items: center;
justify-content: flex-end;
.button-class {
margin-left: 10rpx;
}
}
}
.button-class {
margin-left: 10rpx;
}
}
}
.tip-view {
color: #999999;
width: 100%;
margin-top: 200rpx;
text-align: center;
}
.tip-view {
color: #999999;
width: 100%;
margin-top: 200rpx;
text-align: center;
}
.loading-view {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 200rpx;
}
}
.loading-view {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 200rpx;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment