¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="sales-account"> |
| | | <!-- 页é¢å¤´é¨ --> |
| | | <van-nav-bar |
| | | title="å¼ç¥¨å°è´¦" |
| | | left-text="è¿å" |
| | | left-arrow |
| | | @click-left="goBack" |
| | | fixed |
| | | placeholder |
| | | /> |
| | | |
| | | <!-- æç´¢åçéåºåï¼ä¿æä¸éå®å°è´¦é£æ ¼ä¸è´ï¼ --> |
| | | <view class="search-filter-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <input |
| | | class="search-text" |
| | | placeholder="客æ·åç§°/éå®ååå·" |
| | | v-model="searchForm.searchText" |
| | | confirm-type="search" |
| | | @confirm="handleQuery" |
| | | /> |
| | | </view> |
| | | <!-- <view class="filter-button" @click="showFilter = true">--> |
| | | <!-- <up-icon name="list" size="24" color="#999"></up-icon>--> |
| | | <!-- </view>--> |
| | | <view class="filter-button" @click="handleQuery"> |
| | | <up-icon name="search" size="24" color="#999"></up-icon> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- å表åºå --> |
| | | <view class="ledger-list" v-if="total > 0"> |
| | | <view v-for="(item, index) in ledgerList" :key="index"> |
| | | <view class="ledger-item"> |
| | | <view class="item-header"> |
| | | <view class="item-left"> |
| | | <view class="document-icon"> |
| | | <up-icon name="file-text" size="16" color="#ffffff"></up-icon> |
| | | </view> |
| | | <text class="item-id">{{ item.salesContractNo }}</text> |
| | | </view> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="item-details"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">客æ·åç§°</text> |
| | | <text class="detail-value">{{ item.customerName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">客æ·ååå·</text> |
| | | <text class="detail-value">{{ item.customerContractNo }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">项ç®</text> |
| | | <text class="detail-value">{{ item.projectName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">产å大类</text> |
| | | <text class="detail-value">{{ item.productCategory }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">è§æ ¼åå·</text> |
| | | <text class="detail-value">{{ item.specificationModel }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">å票å·</text> |
| | | <text class="detail-value">{{ item.invoiceNo || '-' }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">å票éé¢(å
)</text> |
| | | <text class="detail-value highlight">{{ formatAmount(item.invoiceTotal) }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">ç¨ç(%)</text> |
| | | <text class="detail-value">{{ item.taxRate }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">å½å
¥äºº</text> |
| | | <text class="detail-value">{{ item.invoicePerson }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">å½å
¥æ¥æ</text> |
| | | <text class="detail-value">{{ formatDateTime(item.createTime) }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">å¼ç¥¨æ¥æ</text> |
| | | <text class="detail-value">{{ item.invoiceDate || '-' }}</text> |
| | | </view> |
| | | </view> |
| | | <view class="action-buttons"> |
| | | <van-button |
| | | type="primary" |
| | | size="small" |
| | | class="action-btn" |
| | | :disabled="item.invoicePerson !== userStore.nickName" |
| | | @click="openEdit(item)" |
| | | > |
| | | ç¼è¾ |
| | | </van-button> |
| | | <van-button |
| | | type="danger" |
| | | size="small" |
| | | class="action-btn" |
| | | :disabled="item.invoicePerson !== userStore.nickName" |
| | | @click="handleDelete(item)" |
| | | > |
| | | å é¤ |
| | | </van-button> |
| | | <van-button |
| | | type="default" |
| | | size="small" |
| | | class="action-btn" |
| | | v-if="item.invoiceFileName" |
| | | @click="openFileActions(item.commonFiles || [])" |
| | | > |
| | | æ¥çéä»¶ |
| | | </van-button> |
| | | <van-button |
| | | type="primary" |
| | | size="small" |
| | | plain |
| | | class="action-btn" |
| | | v-else |
| | | :disabled="item.invoicePerson !== userStore.nickName" |
| | | @click="openUpload(item)" |
| | | > |
| | | ä¸ä¼ |
| | | </van-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-else class="no-data"> |
| | | <text>ææ å¼ç¥¨å°è´¦æ°æ®</text> |
| | | </view> |
| | | |
| | | <!-- çéå¼¹çª --> |
| | | <van-popup v-model:show="showFilter" position="bottom" round> |
| | | <view class="filter-popup"> |
| | | <van-cell-group title="ç鿡件" inset> |
| | | <van-field |
| | | label="å¼ç¥¨æ¥æ" |
| | | readonly |
| | | @click="showInvoiceRange = true" |
| | | :placeholder="invoiceRangeLabel || 'è¯·éæ©æ¥æèå´'" |
| | | /> |
| | | <van-field |
| | | label="å½å
¥æ¥æ" |
| | | readonly |
| | | @click="showCreateDatePicker = true" |
| | | :placeholder="searchForm.createTimeStart || 'è¯·éæ©å½å
¥æ¥æ'" |
| | | /> |
| | | <view class="switch-row"> |
| | | <text class="switch-label">䏿¾ç¤ºæå票è¡</text> |
| | | <van-switch v-model="searchForm.status" size="20" /> |
| | | </view> |
| | | </van-cell-group> |
| | | <view class="filter-actions"> |
| | | <van-button @click="resetFilter">éç½®</van-button> |
| | | <van-button type="primary" @click="confirmFilter">ç¡®å®</van-button> |
| | | </view> |
| | | </view> |
| | | </van-popup> |
| | | |
| | | <!-- æ¥åï¼å¼ç¥¨æ¥æèå´ --> |
| | | <van-popup v-model:show="showInvoiceRange" position="bottom"> |
| | | <van-calendar |
| | | title="éæ©å¼ç¥¨æ¥æèå´" |
| | | type="range" |
| | | color="#2979ff" |
| | | @confirm="onInvoiceRangeConfirm" |
| | | @cancel="showInvoiceRange = false" |
| | | /> |
| | | </van-popup> |
| | | |
| | | <!-- æ¥æï¼å½å
¥æ¥æ --> |
| | | <van-popup v-model:show="showCreateDatePicker" position="bottom"> |
| | | <van-date-picker |
| | | v-model="currentCreateDate" |
| | | title="éæ©å½å
¥æ¥æ" |
| | | @confirm="onCreateDateConfirm" |
| | | @cancel="showCreateDatePicker = false" |
| | | /> |
| | | </van-popup> |
| | | |
| | | |
| | | |
| | | <!-- åè¡ä¸ä¼ å¼¹çªï¼æ 表åï¼ --> |
| | | <van-popup v-model:show="showUpload" position="bottom" round> |
| | | <view class="upload-container"> |
| | | <van-cell-group title="ä¸ä¼ éä»¶ï¼ä»
æ¯æ pdfï¼æå¤§10MBï¼æå¤10个ï¼" inset> |
| | | <van-uploader |
| | | accept="*" |
| | | multiple |
| | | :max-count="10" |
| | | :after-read="afterReadRowUpload" |
| | | :before-read="beforeReadPdf" |
| | | /> |
| | | <view class="uploaded-list" v-if="fileList.length"> |
| | | <view class="uploaded-item" v-for="(f, idx) in fileList" :key="idx"> |
| | | <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text> |
| | | <van-button size="mini" type="danger" plain @click="removeUploaded(idx)">ç§»é¤</van-button> |
| | | </view> |
| | | </view> |
| | | </van-cell-group> |
| | | <view class="filter-actions"> |
| | | <van-button @click="showUpload = false">åæ¶</van-button> |
| | | <van-button type="primary" @click="confirmUpload">确认</van-button> |
| | | </view> |
| | | </view> |
| | | </van-popup> |
| | | |
| | | <!-- éä»¶åè¡¨éæ© --> |
| | | <van-action-sheet v-model:show="showFileSheet" :actions="fileActions" cancel-text="åæ¶" close-on-click-action @select="onSelectFile" /> |
| | | </view> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive, onMounted } from 'vue' |
| | | import dayjs from 'dayjs' |
| | | import { showToast, showLoadingToast, closeToast } from 'vant' |
| | | import useUserStore from '@/store/modules/user' |
| | | import { getToken } from '@/utils/auth' |
| | | import config from '@/config.js' |
| | | import { |
| | | registrationProductPage, |
| | | commitFile, |
| | | delInvoiceLedgerByRegProductId |
| | | } from '@/api/salesManagement/invoiceLedger.js' |
| | | |
| | | const userStore = useUserStore() |
| | | |
| | | // åè¡¨ä¸æ¥è¯¢ |
| | | const ledgerList = ref([]) |
| | | const total = ref(0) |
| | | const page = reactive({ current: -1, size: -1 }) |
| | | const searchForm = reactive({ |
| | | searchText: '', |
| | | status: false, |
| | | createTimeStart: '' |
| | | }) |
| | | |
| | | // é¡¶é¨äº¤äº |
| | | const showFilter = ref(false) |
| | | const showInvoiceRange = ref(false) |
| | | const showCreateDatePicker = ref(false) |
| | | const invoiceRangeLabel = ref('') |
| | | const currentCreateDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]) |
| | | |
| | | const currentId = ref('') |
| | | const fileList = ref([]) // è¡ä¸ä¼ æéç¨ä¸ä¼ å表 |
| | | |
| | | // è¡ä¸ä¼ å¼¹çª |
| | | const showUpload = ref(false) |
| | | |
| | | // éä»¶æ¥ç |
| | | const showFileSheet = ref(false) |
| | | const fileActions = ref([]) |
| | | let currentFilesToOpen = [] |
| | | |
| | | const formatAmount = (val) => { |
| | | if (val === undefined || val === null || val === '') return '0.00' |
| | | const num = Number(val) |
| | | if (Number.isNaN(num)) return '0.00' |
| | | return num.toFixed(2) |
| | | } |
| | | const formatDateTime = (val) => { |
| | | if (!val) return '' |
| | | return dayjs(val).format('YYYY-MM-DD HH:mm:ss') |
| | | } |
| | | |
| | | const goBack = () => { |
| | | uni.navigateBack() |
| | | } |
| | | |
| | | const handleQuery = () => { |
| | | getList() |
| | | } |
| | | |
| | | const getList = async () => { |
| | | try { |
| | | showLoadingToast({ message: 'å è½½ä¸...' }) |
| | | const { invoiceDate, ...rest } = searchForm |
| | | const res = await registrationProductPage({ ...rest, ...page }) |
| | | // å
¼å®¹ä¸åè¿åç»æ |
| | | const records = res?.data?.records || res?.records || res?.data || [] |
| | | const totalVal = res?.data?.total || res?.total || records.length || 0 |
| | | ledgerList.value = records |
| | | total.value = totalVal |
| | | closeToast() |
| | | } catch (e) { |
| | | closeToast() |
| | | showToast('è·åå表失败') |
| | | } |
| | | } |
| | | |
| | | // çéé»è¾ |
| | | const resetFilter = () => { |
| | | searchForm.searchText = '' |
| | | searchForm.status = false |
| | | const start = dayjs().startOf('month').format('YYYY-MM-DD') |
| | | const end = dayjs().endOf('month').format('YYYY-MM-DD') |
| | | searchForm.invoiceDate = [start, end] |
| | | searchForm.invoiceDateStart = start |
| | | searchForm.invoiceDateEnd = end |
| | | searchForm.createTimeStart = '' |
| | | invoiceRangeLabel.value = '' |
| | | } |
| | | const confirmFilter = () => { |
| | | showFilter.value = false |
| | | getList() |
| | | } |
| | | const onInvoiceRangeConfirm = (e) => { |
| | | // e 为 [start, end] ç Date 对象æå符串ï¼uni-app ä¸ Vant Calendar è¿åæ¶é´æ³æ°ç» |
| | | try { |
| | | let start, end |
| | | if (Array.isArray(e)) { |
| | | const [s, ed] = e |
| | | start = dayjs(s).format('YYYY-MM-DD') |
| | | end = dayjs(ed).format('YYYY-MM-DD') |
| | | } else if (e && e.detail && Array.isArray(e.detail)) { |
| | | const [s, ed] = e.detail |
| | | start = dayjs(s).format('YYYY-MM-DD') |
| | | end = dayjs(ed).format('YYYY-MM-DD') |
| | | } |
| | | searchForm.invoiceDateStart = start |
| | | searchForm.invoiceDateEnd = end |
| | | invoiceRangeLabel.value = `${start} è³ ${end}` |
| | | showInvoiceRange.value = false |
| | | } catch (err) { |
| | | showInvoiceRange.value = false |
| | | } |
| | | } |
| | | const onCreateDateConfirm = ({ selectedValues }) => { |
| | | try { |
| | | searchForm.createTimeStart = selectedValues.join('-') |
| | | currentCreateDate.value = selectedValues |
| | | showCreateDatePicker.value = false |
| | | } catch (err) { |
| | | showCreateDatePicker.value = false |
| | | } |
| | | } |
| | | |
| | | // ç¼è¾é»è¾æ¹ä¸ºè·³è½¬æ°é¡µé¢ |
| | | const openEdit = (row) => { |
| | | try { |
| | | uni.setStorageSync('invoiceLedgerEditRow', JSON.stringify(row)) |
| | | uni.navigateTo({ url: '/pages/sales/invoiceLedger/detail' }) |
| | | } catch (e) { |
| | | showToast('跳转失败') |
| | | } |
| | | } |
| | | |
| | | // å é¤ |
| | | const handleDelete = (row) => { |
| | | uni.showModal({ |
| | | title: 'å é¤ç¡®è®¤', |
| | | content: '该å票å°è´¦å°è¢«å é¤ï¼æ¯å¦ç¡®è®¤å é¤ï¼', |
| | | success: async (res) => { |
| | | if (res.confirm) { |
| | | try { |
| | | showLoadingToast({ message: 'å¤çä¸...' }) |
| | | await delInvoiceLedgerByRegProductId(row.id) |
| | | closeToast() |
| | | showToast('å 餿å') |
| | | getList() |
| | | } catch (e) { |
| | | closeToast() |
| | | showToast('å é¤å¤±è´¥ï¼è¯·éè¯') |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // è¡ä¸ä¼ |
| | | const openUpload = (row) => { |
| | | currentId.value = row.id |
| | | fileList.value = [] |
| | | showUpload.value = true |
| | | } |
| | | const confirmUpload = async () => { |
| | | try { |
| | | const payload = { fileList: fileList.value, id: currentId.value } |
| | | showLoadingToast({ message: 'æäº¤ä¸...' }) |
| | | await commitFile(payload) |
| | | closeToast() |
| | | showToast('æäº¤æå') |
| | | showUpload.value = false |
| | | fileList.value = [] |
| | | currentId.value = '' |
| | | getList() |
| | | } catch (e) { |
| | | closeToast() |
| | | showToast('æäº¤å¤±è´¥ï¼è¯·éè¯') |
| | | } |
| | | } |
| | | |
| | | // ä¸ä¼ ç¸å
³ |
| | | const beforeReadPdf = (file) => { |
| | | // å
¼å®¹å¤æä»¶ |
| | | const files = Array.isArray(file) ? file : [file] |
| | | for (const f of files) { |
| | | const sizeOk = f.size <= 10 * 1024 * 1024 |
| | | const ext = (f.name || '').split('.').pop()?.toLowerCase() |
| | | if (ext !== 'pdf') { |
| | | showToast('ä»
æ¯æpdfæä»¶') |
| | | return false |
| | | } |
| | | if (!sizeOk) { |
| | | showToast('ä¸ä¼ æä»¶å¤§å°ä¸è½è¶
è¿10MB') |
| | | return false |
| | | } |
| | | } |
| | | return true |
| | | } |
| | | |
| | | const uploadSingleFile = async (fileObj) => { |
| | | return new Promise((resolve, reject) => { |
| | | showLoadingToast({ message: 'æ£å¨ä¸ä¼ ...' }) |
| | | uni.uploadFile({ |
| | | url: config.baseUrl + '/invoiceLedger/uploadFile', |
| | | filePath: fileObj.url || fileObj.file?.path || fileObj.tempFilePath, |
| | | name: 'file', |
| | | header: { Authorization: 'Bearer ' + getToken() }, |
| | | success: (res) => { |
| | | closeToast() |
| | | try { |
| | | const data = JSON.parse(res.data || '{}') |
| | | if (data.code === 200) { |
| | | resolve(data.data) |
| | | } else { |
| | | reject(new Error(data.msg || 'ä¸ä¼ 失败')) |
| | | } |
| | | } catch (err) { |
| | | reject(err) |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | closeToast() |
| | | reject(err) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | const afterReadEditUpload = async (file) => { |
| | | try { |
| | | const files = Array.isArray(file) ? file : file?.file ? [file] : [file] |
| | | for (const f of files) { |
| | | const uploaded = await uploadSingleFile(f) |
| | | fileList.value.push(uploaded) |
| | | } |
| | | showToast('ä¸ä¼ æå') |
| | | } catch (e) { |
| | | showToast('ä¸ä¼ 失败') |
| | | } |
| | | } |
| | | |
| | | const afterReadRowUpload = async (file) => { |
| | | try { |
| | | const files = Array.isArray(file) ? file : file?.file ? [file] : [file] |
| | | for (const f of files) { |
| | | const uploaded = await uploadSingleFile(f) |
| | | fileList.value.push(uploaded) |
| | | } |
| | | showToast('ä¸ä¼ æå') |
| | | } catch (e) { |
| | | showToast('ä¸ä¼ 失败') |
| | | } |
| | | } |
| | | |
| | | const removeUploaded = (index) => { |
| | | fileList.value.splice(index, 1) |
| | | } |
| | | |
| | | const getFileNameFromUrl = (url) => { |
| | | try { |
| | | if (!url) return '' |
| | | return decodeURIComponent(url.split('/').pop()) |
| | | } catch (e) { |
| | | return url |
| | | } |
| | | } |
| | | |
| | | // éä»¶æ¥ç |
| | | const openFileActions = (commonFiles) => { |
| | | currentFilesToOpen = commonFiles || [] |
| | | fileActions.value = (commonFiles || []).map((f, idx) => ({ name: getFileNameFromUrl(f.url || ''), index: idx })) |
| | | showFileSheet.value = true |
| | | } |
| | | const onSelectFile = async (action) => { |
| | | try { |
| | | const item = currentFilesToOpen[action.index] |
| | | if (!item || !item.url) return |
| | | showLoadingToast({ message: 'ä¸è½½ä¸...' }) |
| | | uni.downloadFile({ |
| | | url: item.url, |
| | | success: (res) => { |
| | | closeToast() |
| | | if (res.statusCode === 200) { |
| | | uni.openDocument({ filePath: res.tempFilePath }) |
| | | } else { |
| | | showToast('ä¸è½½å¤±è´¥') |
| | | } |
| | | }, |
| | | fail: () => { |
| | | closeToast() |
| | | showToast('ä¸è½½å¤±è´¥') |
| | | } |
| | | }) |
| | | } catch (e) { |
| | | closeToast() |
| | | showToast('æå¼å¤±è´¥') |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getList() |
| | | }) |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .u-divider { |
| | | margin: 0 !important; |
| | | } |
| | | .sales-account { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |
| | | position: relative; |
| | | } |
| | | |
| | | .search-filter-section { |
| | | padding: 10px 20px; |
| | | background: #ffffff; |
| | | } |
| | | |
| | | .search-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .search-input { |
| | | flex: 1; |
| | | background: #f5f5f5; |
| | | border-radius: 24px; |
| | | padding: 10px 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .search-text { |
| | | flex: 1; |
| | | font-size: 14px; |
| | | color: #333; |
| | | background: transparent; |
| | | border: none; |
| | | outline: none; |
| | | } |
| | | |
| | | .search-text::placeholder { |
| | | color: #999; |
| | | } |
| | | |
| | | .filter-button { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .ledger-list { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .ledger-item { |
| | | background: #ffffff; |
| | | border-radius: 12px; |
| | | margin-bottom: 16px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| | | padding: 0 16px; |
| | | } |
| | | |
| | | .item-header { |
| | | padding: 16px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .item-left { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .document-icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | background: #2979ff; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .item-id { |
| | | font-size: 14px; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .item-details { |
| | | padding: 16px 0; |
| | | } |
| | | |
| | | .detail-row { |
| | | display: flex; |
| | | align-items: flex-end; |
| | | justify-content: space-between; |
| | | margin-bottom: 8px; |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | |
| | | .detail-label { |
| | | font-size: 12px; |
| | | color: #777777; |
| | | min-width: 60px; |
| | | } |
| | | |
| | | .detail-value { |
| | | font-size: 12px; |
| | | color: #000000; |
| | | text-align: right; |
| | | flex: 1; |
| | | margin-left: 16px; |
| | | } |
| | | |
| | | .detail-value.highlight { |
| | | color: #2979ff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .no-data { |
| | | padding: 40px 0; |
| | | text-align: center; |
| | | color: #999; |
| | | } |
| | | |
| | | .action-buttons { |
| | | display: flex; |
| | | gap: 12px; |
| | | padding: 0 0 16px 0; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .action-btn { |
| | | flex: 1; |
| | | } |
| | | |
| | | .filter-popup { |
| | | padding: 12px 12px 20px; |
| | | } |
| | | |
| | | .switch-row { |
| | | padding: 12px 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .switch-label { |
| | | font-size: 14px; |
| | | color: #333; |
| | | } |
| | | |
| | | .filter-actions { |
| | | display: flex; |
| | | gap: 12px; |
| | | padding: 12px 16px 16px; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .edit-container { |
| | | padding-bottom: 5rem; |
| | | } |
| | | |
| | | .uploaded-list { |
| | | padding: 8px 16px 0 16px; |
| | | } |
| | | |
| | | .uploaded-item { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 8px 0; |
| | | border-bottom: 1px solid #f5f5f5; |
| | | } |
| | | |
| | | .file-name { |
| | | font-size: 12px; |
| | | color: #333; |
| | | margin-right: 8px; |
| | | flex: 1; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .tip-text { |
| | | padding: 4px 16px 0 16px; |
| | | font-size: 12px; |
| | | color: #888; |
| | | } |
| | | |
| | | .footer-btns { |
| | | position: fixed; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: #fff; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | align-items: center; |
| | | padding: 0.75rem 0; |
| | | box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05); |
| | | z-index: 1000; |
| | | } |
| | | .cancel-btn { |
| | | font-weight: 400; |
| | | font-size: 1rem; |
| | | color: #FFFFFF; |
| | | width: 6.375rem; |
| | | background: #C7C9CC; |
| | | box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2); |
| | | border-radius: 2.5rem 2.5rem 2.5rem 2.5rem; |
| | | } |
| | | .save-btn { |
| | | font-weight: 400; |
| | | font-size: 1rem; |
| | | color: #FFFFFF; |
| | | width: 14rem; |
| | | background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%); |
| | | box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2); |
| | | border-radius: 2.5rem 2.5rem 2.5rem 2.5rem; |
| | | } |
| | | </style> |