|
|
@@ -1,491 +1,309 @@
|
|
|
<template>
|
|
|
- <view class="detail-page">
|
|
|
- <view class="tabs">
|
|
|
- <view class="tab" v-for="(t, i) in tabs" :key="t.label" :class="{ active: category == t.value }"
|
|
|
- :style="{ opacity: loading ? 0.5 : 1 }" @click="selectTab(t)">
|
|
|
- {{ t.label }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <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: '1296px',
|
|
|
- }">
|
|
|
- <view class="grid-header">
|
|
|
- <text class="hcell hcell-sticky-left">查询客户</text>
|
|
|
- <text class="hcell">社会信用代码</text>
|
|
|
- <text class="hcell">加入时间</text>
|
|
|
- <text class="hcell">品种</text>
|
|
|
- <text class="hcell">上游客户</text>
|
|
|
- <text class="hcell">货源片区</text>
|
|
|
- <text class="hcell">数量</text>
|
|
|
- <text class="hcell">批号</text>
|
|
|
- <text class="hcell">监管码样本（抽样）</text>
|
|
|
- <text class="hcell">终端到达数量</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-if="!loading && rows.length > 0" class="grid-body">
|
|
|
- <view v-for="(row, idx) in rows" :key="idx + '-' + (row.produceBatchNo || '')" class="grow">
|
|
|
- <view v-if="row.flags.entName" class="gcell gcol-1 gspan" :class="['sticky-left']"
|
|
|
- :style="{ gridRowEnd: 'span ' + row.spans.entName }">{{ row.entName }}</view>
|
|
|
- <view v-if="row.flags.entName" class="gcell gcol-2 gspan"
|
|
|
- :style="{ gridRowEnd: 'span ' + row.spans.entName }">{{ row.orgCode }}</view>
|
|
|
- <view v-if="row.flags.entName" class="gcell gcol-3 gspan"
|
|
|
- :style="{ gridRowEnd: 'span ' + row.spans.entName }">{{ formatDate(row.time,
|
|
|
- 'YYYY-MM-DD') || '--' }}</view>
|
|
|
- <view v-if="row.flags.physicName" class="gcell gcol-4 gspan"
|
|
|
- :style="{ gridRowEnd: 'span ' + row.spans.physicName }">{{ row.physicName }}</view>
|
|
|
- <view v-if="row.flags.currentENTName" class="gcell gcol-5 gspan"
|
|
|
- :style="{ gridRowEnd: 'span ' + row.spans.currentENTName }">{{ row.currentENTName }}
|
|
|
- </view>
|
|
|
- <view class="gcell gcol-6">{{ row.fromRegionName }}</view>
|
|
|
- <view class="gcell gcol-7">{{ row.fromQuantity }}</view>
|
|
|
- <view class="gcell gcol-8">{{ row.produceBatchNo }}</view>
|
|
|
- <view class="gcell gcol-9">{{ row.tracCode }}</view>
|
|
|
- <view class="gcell gcol-10">{{ row.toQuantity }}</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>
|
|
|
+ <view class="detail-page">
|
|
|
+ <view class="tip"
|
|
|
+ >数据更新时间：{{
|
|
|
+ formatDate(
|
|
|
+ new Date().setDate(new Date().getDate() - 1),
|
|
|
+ "YYYY-MM-DD",
|
|
|
+ ) || "--"
|
|
|
+ }}</view
|
|
|
+ >
|
|
|
+
|
|
|
+ <scroll-view
|
|
|
+ class="list-scroll"
|
|
|
+ scroll-y="true"
|
|
|
+ refresher-enabled
|
|
|
+ :refresher-triggered="isRefreshing"
|
|
|
+ @refresherrefresh="onRefresh"
|
|
|
+ @scrolltolower="onLoadMore"
|
|
|
+ >
|
|
|
+ <view class="list-container">
|
|
|
+ <view
|
|
|
+ class="card-item"
|
|
|
+ v-for="(item, index) in rows"
|
|
|
+ :key="index"
|
|
|
+ @click="toDetail(item)"
|
|
|
+ >
|
|
|
+ <view class="left-info">
|
|
|
+ <view class="row1-name">{{ item.receiverName }}</view>
|
|
|
+ <view class="row4-manager">{{ item.companyCode }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="loading-more" v-if="loading">
|
|
|
+ <image
|
|
|
+ class="loading-icon"
|
|
|
+ src="../../../static/images/loading.png"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="!loading && rows.length === 0" class="empty-data">
|
|
|
+ <EmptyView text="无相关数据" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="!hasMore && rows.length > 0" class="no-more">
|
|
|
+ <text>没有更多数据了</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import EmptyView from "../../../wigets/empty.vue";
|
|
|
-import request, { downloadFile } from '../../../request/index.js'
|
|
|
-import { formatDate } from '../../../utils/utils.js'
|
|
|
+import request from "../../../request/index.js";
|
|
|
+import { formatDate } from "../../../utils/utils.js";
|
|
|
+
|
|
|
export default {
|
|
|
- components: {
|
|
|
- EmptyView,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isLoading: false,
|
|
|
- tableBodyHeight: 0,
|
|
|
- baseRowHeight: 76,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- label: "药品购进",
|
|
|
- value: "1",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "药品销售",
|
|
|
- value: "2",
|
|
|
- },
|
|
|
- ],
|
|
|
- category: "1",
|
|
|
- loading: false,
|
|
|
- rows: [],
|
|
|
- totalCount: 0,
|
|
|
- fetchLoading: false,
|
|
|
- hasMore: false,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 15,
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.tableBodyHeight = 14 * 80;
|
|
|
- // this.fetchList();
|
|
|
- },
|
|
|
- computed: {
|
|
|
- showEmptyData() {
|
|
|
- if (this.loading) return false;
|
|
|
- if (this.rows.length === 0) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- formatDate,
|
|
|
- selectTab(t) {
|
|
|
- if (this.loading) return;
|
|
|
- this.category = t.value;
|
|
|
- this.resetFetch();
|
|
|
- },
|
|
|
- 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();
|
|
|
- },
|
|
|
- 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',
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
+ components: {
|
|
|
+ EmptyView,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isRefreshing: false,
|
|
|
+ loading: false,
|
|
|
+ rows: [],
|
|
|
+ totalCount: 60, // Simulated total count
|
|
|
+ hasMore: true,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.resetFetch();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatDate,
|
|
|
+
|
|
|
+ getLevelClass(level) {
|
|
|
+ if (level === "VIP") return "tag-vip";
|
|
|
+ if (level === "二级") return "tag-l2";
|
|
|
+ if (level === "三级") return "tag-l3";
|
|
|
+ return "tag-default";
|
|
|
+ },
|
|
|
+
|
|
|
+ generateFakeData() {
|
|
|
+ const newRows = [];
|
|
|
+ const provinces = [
|
|
|
+ "91370104771001730R",
|
|
|
+ "91420105783155681H",
|
|
|
+ "91330110MA2CCJE32Y",
|
|
|
+ "91441581761581268X",
|
|
|
+ "91510106768621824L",
|
|
|
+ ];
|
|
|
+
|
|
|
+ const startIdx = (this.pageNum - 1) * this.pageSize;
|
|
|
+ const endIdx = Math.min(startIdx + this.pageSize, this.totalCount);
|
|
|
+
|
|
|
+ if (startIdx >= this.totalCount) {
|
|
|
+ this.hasMore = false;
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = startIdx; i < endIdx; i++) {
|
|
|
+ newRows.push({
|
|
|
+ id: i,
|
|
|
+ receiverName: `测试收货企业${i + 1}有限公司`,
|
|
|
+ companyCode: provinces[i % provinces.length],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return newRows;
|
|
|
+ },
|
|
|
+
|
|
|
+ async onRefresh() {
|
|
|
+ this.isRefreshing = true;
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.hasMore = true;
|
|
|
+ // Simulate network request
|
|
|
+ setTimeout(() => {
|
|
|
+ this.rows = this.generateFakeData();
|
|
|
+ this.isRefreshing = false;
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoadMore() {
|
|
|
+ if (this.loading || !this.hasMore) return;
|
|
|
+ this.loading = true;
|
|
|
+ this.pageNum++;
|
|
|
+
|
|
|
+ // Simulate network request
|
|
|
+ setTimeout(() => {
|
|
|
+ const more = this.generateFakeData();
|
|
|
+ if (more.length > 0) {
|
|
|
+ this.rows = [...this.rows, ...more];
|
|
|
+ } else {
|
|
|
+ this.hasMore = false;
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ }, 800);
|
|
|
+ },
|
|
|
+
|
|
|
+ resetFetch() {
|
|
|
+ this.loading = true;
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.hasMore = true;
|
|
|
+ // Simulate initial load
|
|
|
+ setTimeout(() => {
|
|
|
+ this.rows = this.generateFakeData();
|
|
|
+ this.loading = false;
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+
|
|
|
+ toDetail(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/traceCodePackages/traceabilityReport/pages/blacklist/detail/index?id=${item.id}&name=${encodeURIComponent(item.receiverName)}`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.detail-page {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 24rpx;
|
|
|
- position: relative;
|
|
|
- min-height: 100vh;
|
|
|
- background: #f3f6f9;
|
|
|
- padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100vh - 116rpx - env(safe-area-inset-bottom));
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f3f6f9;
|
|
|
}
|
|
|
|
|
|
.tip {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tabs {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #fff;
|
|
|
- border-radius: 90rpx;
|
|
|
- padding: 10rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tab {
|
|
|
- flex: 1;
|
|
|
- height: 70rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 0 24rpx;
|
|
|
- border-radius: 70rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.tab+.tab {
|
|
|
- margin-left: 12rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.tab.active {
|
|
|
- background: #2c69ff;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.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: 340rpx 300rpx 220rpx 220rpx 220rpx 220rpx 220rpx 220rpx 340rpx 200rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.grid-header .hcell {
|
|
|
- background: #eaf2ff;
|
|
|
- font-weight: bold;
|
|
|
- color: #2c69ff;
|
|
|
-}
|
|
|
-
|
|
|
-.hcell {
|
|
|
- height: 76rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #f3f6f9;
|
|
|
}
|
|
|
|
|
|
-.hcell:last-child {
|
|
|
- border-right: none;
|
|
|
+.list-scroll {
|
|
|
+ flex: 1;
|
|
|
+ height: 0; /* Important for flex expansion */
|
|
|
+ padding: 0 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.hcell-sticky-left {
|
|
|
- position: sticky;
|
|
|
- left: 0;
|
|
|
- z-index: 11;
|
|
|
+.list-container {
|
|
|
+ padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
}
|
|
|
|
|
|
-.grid-scroll {
|
|
|
- border-radius: 16rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- overflow: hidden;
|
|
|
+.card-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start; /* Align top */
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
-.grid-body {
|
|
|
- background: #fff;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 340rpx 300rpx 220rpx 220rpx 220rpx 220rpx 220rpx 220rpx 340rpx 200rpx;
|
|
|
- grid-auto-rows: auto;
|
|
|
+.left-info {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
-.grow {
|
|
|
- display: contents;
|
|
|
+.row1-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
-.gcell {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-bottom: 1rpx solid #eef0f4;
|
|
|
- border-right: 1rpx solid #eef0f4;
|
|
|
- background: #fff;
|
|
|
- color: #333;
|
|
|
- padding: 0 20rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 50rpx;
|
|
|
+.row2-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.gcell:last-child {
|
|
|
- border-right: none;
|
|
|
+.province {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
-.gcell.gcell-full {
|
|
|
- grid-column: 1 / -1;
|
|
|
- background: transparent;
|
|
|
- border: none;
|
|
|
+.level-tag {
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
|
|
|
-.gspan {
|
|
|
- background: #fff;
|
|
|
+.tag-vip {
|
|
|
+ background: #e6f7ff;
|
|
|
+ color: #1890ff;
|
|
|
}
|
|
|
|
|
|
-.gcol-1 {
|
|
|
- grid-column: 1;
|
|
|
+.tag-l2 {
|
|
|
+ background: #f6ffed;
|
|
|
+ color: #52c41a;
|
|
|
}
|
|
|
|
|
|
-.gcol-2 {
|
|
|
- grid-column: 2;
|
|
|
+.tag-l3 {
|
|
|
+ background: #fff7e6;
|
|
|
+ color: #fa8c16;
|
|
|
}
|
|
|
|
|
|
-.gcol-3 {
|
|
|
- grid-column: 3;
|
|
|
+.row3-nature {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.gcol-4 {
|
|
|
- grid-column: 4;
|
|
|
+.row4-manager {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
|
|
|
-.gcol-5 {
|
|
|
- grid-column: 5;
|
|
|
+.right-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ align-self: center; /* Center vertically relative to card */
|
|
|
}
|
|
|
|
|
|
-.gcol-6 {
|
|
|
- grid-column: 6;
|
|
|
+.alert-count {
|
|
|
+ background: #fff2f0;
|
|
|
+ color: #ff4d4f;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
-.gcol-7 {
|
|
|
- grid-column: 7;
|
|
|
-}
|
|
|
-
|
|
|
-.gcol-8 {
|
|
|
- grid-column: 8;
|
|
|
-}
|
|
|
-
|
|
|
-.gcol-9 {
|
|
|
- grid-column: 9;
|
|
|
-}
|
|
|
-
|
|
|
-.gcol-10 {
|
|
|
- grid-column: 10;
|
|
|
-}
|
|
|
-
|
|
|
-.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-more {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
}
|
|
|
|
|
|
.loading-icon {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- animation: spin 1s linear infinite;
|
|
|
-}
|
|
|
-
|
|
|
-@keyframes spin {
|
|
|
- from {
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
-
|
|
|
- to {
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
}
|
|
|
|
|
|
-.empty-data,
|
|
|
-.loading-wrap {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 85rpx;
|
|
|
- z-index: 91;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- border-bottom-left-radius: 16rpx;
|
|
|
- border-bottom-right-radius: 16rpx;
|
|
|
+.empty-data {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 100rpx;
|
|
|
}
|
|
|
|
|
|
-.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: 92;
|
|
|
+.no-more {
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
}
|
|
|
|
|
|
-.fab-text {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
+@keyframes spin {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
钱新宇