代码如下： ``` <template> <div class="waterFeeStatistics-container"> <div class="term-base-list"> <div class="card-item item-1"> <div class="item-title">海运数量</div> <div class="item-content"> <span class="item-amount">6</span> <span class="item-unit">条</span> </div> <div class="item-icon-img" /> </div> <div class="card-item item-4"> <div class="item-title">物流园数量</div> <div class="item-content"> <span class="item-amount">6</span> <span class="item-unit">条</span> </div> <div class="item-icon-img" /> </div> <div class="card-item item-5"> <div class="item-title">快递数据</div> <div class="item-content"> <span class="item-amount">6</span> <span class="item-unit">条</span> </div> <div class="item-icon-img" /> </div> <div class="card-item item-6"> <div class="item-title">用户数量</div> <div class="item-content"> <span class="item-amount">6</span> <span class="item-unit">条</span> </div> <div class="item-icon-img" /> </div> <div class="card-item item-7"> <div class="item-title">其他数量</div> <div class="item-content"> <span class="item-amount">6</span> <span class="item-unit">条</span> </div> <div class="item-icon-img" /> </div> </div> </div> </template> <script setup lang="ts" name="tasks"> import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue'; const state = reactive({ title: '更新', schoolID: null, schoolList: [ { id: 1, name: '小', }, { id: 2, name: '大', }, ], }); // 这样暴露出来后页面可以直接使用schoolList,而不需要state.schoolList const { schoolList } = toRefs(state); // 表格数据 const tableData = ref<any[]>([]); const loading = ref(false); const pageIndex = ref(1); // 详情弹窗 const dialogVisible = ref(false); const detailLoading = ref(false); const detail = ref<any>({}); onMounted(() => { pageIndex.value = 1; }); </script> <style scoped="scoped" lang="scss"> .waterFeeStatistics-container{ margin-bottom: 20px; } .term-base-list { display: flex; justify-content: space-between; margin-right: -15px; .card-item { // width: 220px; flex: 1; margin-right: 15px; // height: 100px; height: 93px; padding: 10px; color: #fff; border-radius: 6px; position: relative; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); .item-title { font-size: 16px; } .item-content { position: absolute; width: 100%; text-align: center; top: 36px; left: 0px; .item-amount { font-size: 25px; } .item-unit { font-size: 16px; margin-left: 5px; } } .item-icon-img { position: absolute; bottom: 8px; right: 10px; } } .item-1 { background: linear-gradient(90deg, #2fe5c2, #13c6fa); .item-icon-img { width: 48px; height: 40px; background-image: url('/src/assets/imgs/class_count.png'); } } .item-2 { background: linear-gradient(90deg, #61bdfe, #278adc); .item-icon-img { width: 40px; height: 39px; background-image: url('/src/assets/imgs/stu_count.png'); } } .item-3 { background: linear-gradient(90deg, #5686d6, #315dbf); .item-icon-img { width: 52px; height: 38px; background-image: url('/src/assets/imgs/evaluation_course_count.png'); } } .item-4 { background: linear-gradient(90deg, #646ba4, #90b7d8); .item-icon-img { width: 43px; height: 37px; background-image: url('/src/assets/imgs/knowledge_count.png'); } } .item-5 { background: linear-gradient(90deg, #fea39d, #ff6f8f); .item-icon-img { width: 42px; height: 38px; background-image: url('/src/assets/imgs/labroom_course_count.png'); } } .item-6 { background: linear-gradient(90deg, #5bccf2, #5da5e3); .item-icon-img { width: 38px; height: 38px; background-image: url('/src/assets/imgs/labroom_course_count.png'); } } .item-7 { background: linear-gradient(90deg, #d1c6f8, #a2c4f7); .item-icon-img { width: 43px; height: 37px; background-image: url('/src/assets/imgs/pro_count.png'); } } } </style> ``` tip:图标没有加进来，不要可以去掉