|
|
@@ -0,0 +1,553 @@
|
|
|
+<template>
|
|
|
+ <view class="detail-page">
|
|
|
+ <view class="tip">数据更新时间：{{ formatDate(new Date().setDate(new Date().getDate() - 1), 'YYYY-MM-DD') || '--' }}</view>
|
|
|
+ <view class="card" :style="{ height: tableBodyHeight + 'rpx' }">
|
|
|
+ <scroll-view class="grid-scroll" scroll-y="true" scroll-x="true" :show-scrollbar="false"
|
|
|
+ :style="{ maxHeight: tableBodyHeight + 'rpx' }" enhanced @scrolltolower="onTableScrollToLower">
|
|
|
+ <view :style="{
|
|
|
+ width: '2685rpx',
|
|
|
+ }">
|
|
|
+ <view class="grid-header">
|
|
|
+ <!-- Row 1 -->
|
|
|
+ <text class="hcell header-group hcell-sticky-left" style="grid-column: 1 / 2; grid-row: 1 / 2; z-index: 12;">该企业累计预警次数</text>
|
|
|
+ <text class="hcell header-group" style="grid-column: 2 / 7; grid-row: 1 / 2;">客户基础信息</text>
|
|
|
+ <text class="hcell header-group" style="grid-column: 7 / 16; grid-row: 1 / 2;">流转信息</text>
|
|
|
+
|
|
|
+ <!-- Row 2 -->
|
|
|
+ <text class="hcell hcell-sticky-left" style="grid-column: 1 / 2; grid-row: 2 / 3;">累计预警次数</text>
|
|
|
+ <text class="hcell" style="grid-column: 2 / 3; grid-row: 2 / 3;">客户名称</text>
|
|
|
+ <text class="hcell" style="grid-column: 3 / 4; grid-row: 2 / 3;">客户所在省份</text>
|
|
|
+ <text class="hcell" style="grid-column: 4 / 5; grid-row: 2 / 3;">客户级别</text>
|
|
|
+ <text class="hcell" style="grid-column: 5 / 6; grid-row: 2 / 3;">客户性质</text>
|
|
|
+ <text class="hcell" style="grid-column: 6 / 7; grid-row: 2 / 3;">责任经理</text>
|
|
|
+ <text class="hcell" style="grid-column: 7 / 8; grid-row: 2 / 3;">收货企业名称</text>
|
|
|
+ <text class="hcell" style="grid-column: 8 / 9; grid-row: 2 / 3;">收货企业所在省份</text>
|
|
|
+ <text class="hcell" style="grid-column: 9 / 10; grid-row: 2 / 3;">单据时间</text>
|
|
|
+ <text class="hcell" style="grid-column: 10 / 11; grid-row: 2 / 3;">单据类型</text>
|
|
|
+ <text class="hcell" style="grid-column: 11 / 12; grid-row: 2 / 3;">产品名称</text>
|
|
|
+ <text class="hcell" style="grid-column: 12 / 13; grid-row: 2 / 3;">批号</text>
|
|
|
+ <text class="hcell" style="grid-column: 13 / 14; grid-row: 2 / 3;">发货地</text>
|
|
|
+ <text class="hcell" style="grid-column: 14 / 15; grid-row: 2 / 3;">数量</text>
|
|
|
+ <text class="hcell" style="grid-column: 15 / 16; grid-row: 2 / 3;">链路</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="!loading && rows.length > 0" class="grid-body">
|
|
|
+ <view v-for="(row, idx) in rows" :key="idx" class="grow">
|
|
|
+ <!-- Common Columns (merged) -->
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-1 sticky-left gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.alertCount }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-2 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerName }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-3 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerProvince }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-4 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerLevel }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-5 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerNature }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-6 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.manager }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-7 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.receiverName }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-8 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.receiverProvince }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-9 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.docTime }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-10 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.docType }}</view>
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-11 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.productName }}</view>
|
|
|
+
|
|
|
+ <!-- Detail Columns (not merged) -->
|
|
|
+ <view class="gcell gcol-12">{{ row.batchNo }}</view>
|
|
|
+ <view class="gcell gcol-13">{{ row.sourceRegion }}</view>
|
|
|
+ <view class="gcell gcol-14">{{ row.quantity }}</view>
|
|
|
+
|
|
|
+ <!-- Link Column (merged) -->
|
|
|
+ <view v-if="row.flags.common" class="gcell gcol-15 gspan"
|
|
|
+ :style="{ gridRowEnd: 'span ' + row.spans.common, borderRight: 'none' }">{{ row.traceLink }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="gcell gcell-full loading-row" v-if="hasMore">
|
|
|
+ <view class="loading-wrapper">
|
|
|
+ <image class="loading-icon" src="../../../static/images/loading.png" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view v-if="loading" class="loading-wrap">
|
|
|
+ <view class="loading-row">
|
|
|
+ <view class="loading-wrapper">
|
|
|
+ <image class="loading-icon" src="../../../static/images/loading.png" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="showEmptyData" class="empty-data">
|
|
|
+ <EmptyView text="无相关数据" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="fab-btn" @click="downloadTable">
|
|
|
+ <text class="fab-text">下载表格</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import EmptyView from "../../../wigets/empty.vue";
|
|
|
+import request, { downloadFile } from '../../../request/index.js'
|
|
|
+import { formatDate } from '../../../utils/utils.js'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ EmptyView,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: false,
|
|
|
+ tableBodyHeight: 0,
|
|
|
+ baseRowHeight: 76,
|
|
|
+ loading: false,
|
|
|
+ rows: [],
|
|
|
+ totalCount: 0,
|
|
|
+ fetchLoading: false,
|
|
|
+ hasMore: false,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.tableBodyHeight = 14 * 80;
|
|
|
+ // this.fetchList();
|
|
|
+ this.generateFakeData();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ showEmptyData() {
|
|
|
+ if (this.loading) return false;
|
|
|
+ if (this.rows.length === 0) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatDate,
|
|
|
+ generateFakeData() {
|
|
|
+ const fakeRows = [];
|
|
|
+ const baseCommonData = {
|
|
|
+ customerProvince: '广东',
|
|
|
+ customerLevel: '一级',
|
|
|
+ customerNature: '商业',
|
|
|
+ manager: '张三',
|
|
|
+ receiverProvince: '广西',
|
|
|
+ docTime: '2023-01-01',
|
|
|
+ docType: '销售出库',
|
|
|
+ productName: '感冒灵颗粒',
|
|
|
+ traceLink: 'A -> B -> C'
|
|
|
+ };
|
|
|
+
|
|
|
+ for (let i = 0; i < 15; i++) {
|
|
|
+ // 模拟一个单据有 1-3 个批号明细
|
|
|
+ const detailCount = Math.floor(Math.random() * 3) + 1;
|
|
|
+ const details = [];
|
|
|
+ for (let j = 0; j < detailCount; j++) {
|
|
|
+ details.push({
|
|
|
+ batchNo: 'BATCH' + i + '-' + j,
|
|
|
+ sourceRegion: j % 2 === 0 ? '华南片区' : '华东片区',
|
|
|
+ quantity: 100 + j * 50
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 公共数据
|
|
|
+ const commonData = {
|
|
|
+ ...baseCommonData,
|
|
|
+ alertCount: String(i + 1), // 显式转为字符串
|
|
|
+ customerName: '测试客户' + i,
|
|
|
+ receiverName: '测试收货企业' + i,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 生成扁平化行数据
|
|
|
+ details.forEach((detail, index) => {
|
|
|
+ fakeRows.push({
|
|
|
+ ...commonData,
|
|
|
+ ...detail,
|
|
|
+ spans: {
|
|
|
+ common: index === 0 ? detailCount : 0 // 首行 span 为明细总数，其他为 0
|
|
|
+ },
|
|
|
+ flags: {
|
|
|
+ common: index === 0 // 仅首行显示公共列
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.rows = fakeRows;
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ // computeBlackLeafCount(node) {
|
|
|
+ // if (!node || !node.dataList || !node.dataList.length) return 1;
|
|
|
+ // let sum = 0;
|
|
|
+ // node.dataList.forEach((c) => {
|
|
|
+ // sum += this.computeBlackLeafCount(c);
|
|
|
+ // });
|
|
|
+ // node.leafCount = sum;
|
|
|
+ // return sum;
|
|
|
+ // },
|
|
|
+ // buildBlackRows(data) {
|
|
|
+ // const res = [];
|
|
|
+ // (data || []).forEach((companyNode) => {
|
|
|
+ // const cLeaves = this.computeBlackLeafCount(companyNode);
|
|
|
+ // let companyStarted = false;
|
|
|
+ // (companyNode.dataList || []).forEach((expNode) => {
|
|
|
+ // const eLeaves = this.computeBlackLeafCount(expNode);
|
|
|
+ // let exporterStarted = false;
|
|
|
+ // const groups = {};
|
|
|
+ // (expNode.dataList || []).forEach((item) => {
|
|
|
+ // const key = item.currentENTName || "";
|
|
|
+ // if (!groups[key]) groups[key] = [];
|
|
|
+ // groups[key].push(item);
|
|
|
+ // });
|
|
|
+ // Object.keys(groups).forEach((prodName) => {
|
|
|
+ // const group = groups[prodName];
|
|
|
+ // let productStarted = false;
|
|
|
+ // group.forEach((batch) => {
|
|
|
+ // res.push({
|
|
|
+ // entName: companyNode.entName,
|
|
|
+ // orgCode: companyNode.orgCode,
|
|
|
+ // time: batch.time,
|
|
|
+ // physicName: expNode.physicName,
|
|
|
+ // currentENTName: prodName,
|
|
|
+ // fromRegionName: batch.fromRegionName,
|
|
|
+ // fromQuantity: batch.fromQuantity,
|
|
|
+ // produceBatchNo: batch.produceBatchNo,
|
|
|
+ // tracCode: batch.tracCode,
|
|
|
+ // toQuantity: batch.toQuantity,
|
|
|
+ // spans: {
|
|
|
+ // entName: companyStarted ? 0 : cLeaves,
|
|
|
+ // physicName: exporterStarted ? 0 : eLeaves,
|
|
|
+ // currentENTName: productStarted ? 0 : group.length,
|
|
|
+ // },
|
|
|
+ // flags: {
|
|
|
+ // entName: !companyStarted,
|
|
|
+ // physicName: !exporterStarted,
|
|
|
+ // currentENTName: !productStarted,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // companyStarted = true;
|
|
|
+ // exporterStarted = true;
|
|
|
+ // productStarted = true;
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // return res;
|
|
|
+ // },
|
|
|
+ onTableScrollToLower(e) {
|
|
|
+ if (e?.detail?.direction === 'right') return
|
|
|
+ // if (this.isLoading) return;
|
|
|
+ // if (this.rows.length >= this.totalCount) return;
|
|
|
+ // this.isLoading = true;
|
|
|
+ // const remain = this.totalCount - this.rows.length;
|
|
|
+ // const toAdd = Math.min(15, remain);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // const more = this.rows.slice(0, toAdd);
|
|
|
+ // this.rows = this.rows.concat(more);
|
|
|
+ // this.isLoading = false;
|
|
|
+ // }, 800);
|
|
|
+ // this.fetchList();
|
|
|
+ },
|
|
|
+ resetFetch() {
|
|
|
+ // this.loading = true;
|
|
|
+ // this.rows = [];
|
|
|
+ // this.totalCount = 0;
|
|
|
+ // this.fetchLoading = false;
|
|
|
+ // this.hasMore = true;
|
|
|
+ // this.pageNum = 1;
|
|
|
+ // this.fetchList();
|
|
|
+ this.generateFakeData();
|
|
|
+ },
|
|
|
+ fetchList() {
|
|
|
+ if (this.fetchLoading || !this.hasMore) return;
|
|
|
+ this.fetchLoading = true;
|
|
|
+ let url = `/report/getBlacklistReport`;
|
|
|
+ try {
|
|
|
+ request(url, {
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ path: '/blacklist/index.vue',
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ const { total, list } = res.data || {};
|
|
|
+ this.totalCount = total || 0;
|
|
|
+ let _list = [];
|
|
|
+ if (Array.isArray(list)) {
|
|
|
+ // _list = this.buildBlackRows(list);
|
|
|
+ }
|
|
|
+ this.rows = [...this.rows, ..._list];
|
|
|
+ if (this.rows.length < this.totalCount) {
|
|
|
+ this.hasMore = true;
|
|
|
+ this.pageNum++;
|
|
|
+ } else {
|
|
|
+ this.hasMore = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.isLoading = false;
|
|
|
+ this.loading = false;
|
|
|
+ this.fetchLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.loading = false;
|
|
|
+ this.fetchLoading = false;
|
|
|
+ })
|
|
|
+ } catch (res) {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.loading = false;
|
|
|
+ this.fetchLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ downloadTable() {
|
|
|
+ downloadFile('', {
|
|
|
+ id: '',
|
|
|
+ path: '/blacklist/index.vue',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.detail-page {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx;
|
|
|
+ position: relative;
|
|
|
+ background: #f3f6f9;
|
|
|
+ padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
|
|
|
+}
|
|
|
+
|
|
|
+.tip {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+ .grid-header {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 200rpx 220rpx 160rpx 140rpx 140rpx 140rpx 220rpx 160rpx 200rpx 140rpx 200rpx 180rpx 160rpx 140rpx 300rpx;
|
|
|
+ grid-auto-rows: 76rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-header .hcell {
|
|
|
+ background: #eaf2ff;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2c69ff;
|
|
|
+ border-bottom: 1rpx solid #d0d7de;
|
|
|
+ border-right: 1rpx solid #d0d7de;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-group {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #dae8ff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hcell {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hcell:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hcell-sticky-left {
|
|
|
+ position: sticky;
|
|
|
+ left: 0;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-scroll {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-body {
|
|
|
+ background: #fff;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 200rpx 220rpx 160rpx 140rpx 140rpx 140rpx 220rpx 160rpx 200rpx 140rpx 200rpx 180rpx 160rpx 140rpx 300rpx;
|
|
|
+ grid-auto-rows: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grow {
|
|
|
+ display: contents;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gcell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-bottom: 1rpx solid #d0d7de;
|
|
|
+ border-right: 1rpx solid #d0d7de;
|
|
|
+ background: #fff;
|
|
|
+ color: #333;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ min-height: 76rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+.gcell:last-child {
|
|
|
+ /* border-right: none; */
|
|
|
+}
|
|
|
+
|
|
|
+.gcell.gcell-full {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.gspan {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-1 {
|
|
|
+ grid-column: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-2 {
|
|
|
+ grid-column: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-3 {
|
|
|
+ grid-column: 3;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-4 {
|
|
|
+ grid-column: 4;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-5 {
|
|
|
+ grid-column: 5;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-6 {
|
|
|
+ grid-column: 6;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-7 {
|
|
|
+ grid-column: 7;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-8 {
|
|
|
+ grid-column: 8;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-9 {
|
|
|
+ grid-column: 9;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-10 {
|
|
|
+ grid-column: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-11 {
|
|
|
+ grid-column: 11;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-12 {
|
|
|
+ grid-column: 12;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-13 {
|
|
|
+ grid-column: 13;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-14 {
|
|
|
+ grid-column: 14;
|
|
|
+}
|
|
|
+
|
|
|
+.gcol-15 {
|
|
|
+ grid-column: 15;
|
|
|
+}
|
|
|
+
|
|
|
+.sticky-left {
|
|
|
+ position: sticky;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-row {
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-wrapper {
|
|
|
+ position: sticky;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ width: calc(100vw - 48rpx);
|
|
|
+ height: 76rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes spin {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.empty-data,
|
|
|
+.loading-wrap {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 85rpx;
|
|
|
+ z-index: 999;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom-left-radius: 16rpx;
|
|
|
+ border-bottom-right-radius: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.fab-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: calc(50rpx + env(safe-area-inset-bottom));
|
|
|
+ right: 30rpx;
|
|
|
+ background-color: #007aff;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
+.fab-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|
