<script setup> import { reactive, ref } from 'vue'; import { onLoad, onUnload, onPullDownRefresh, onReachBottom, onPageScroll } from "@dcloudio/uni-app"; import { getProjectBLList, getAmtCount } from "@/api/work/projectInfo.js"; import { addFocus, cancelFocus } from "@/api/work/focus.js"; import { getInfo, } from "@/api/login.js" import { getJSDDlist, getZJLYlist, getHYFLlist, } from "@/api/work/projectInfo.js" import { getXMXZlist, } from "@/api/home.js" import store from '@/store' import { timeFormat } from "@/utils/timeFormatter.js" function backToBefore() { uni.reLaunch({ url: "/pages/index" }); }; let title = ref('分管项目') let scrollTop = ref(0) let loading = ref(true) // 统计 let countShow = ref(false); let firstGetCount = true; let countList = ref([{ title: "年度计划投资(万元)", key: "sumYearAmt", value: 0, color: "" }, { title: "全年占比", key: "yearRt", value: 0, color: "", isRate: true, }, { title: "当月完成金额(万元)", key: "sumMonthAmtSj", value: 0, color: "count-special-value" }, { title: "当月占比", key: "monthRt", value: 0, color: "count-special-value", isRate: true, }]); const getAmtCountValue = paramsOrginal => { getAmtCount(paramsOrginal).then(res => { firstGetCount = false; for (let i in countList.value) { countList.value[i].value = res.data[countList.value[i].key] ?? 0; } }) }; let orderBy = reactive({ text: "amt", amtTotalStatus: null, yearAmtStatus: null }) const changeOrderByStatus = type => { // 改变状态 if (type === "amt") { orderBy.yearAmtStatus = null; orderBy.text = "amt"; if (orderBy.amtTotalStatus === "desc") { orderBy.amtTotalStatus = "asc" } else if (orderBy.amtTotalStatus === "asc") { orderBy.amtTotalStatus = null } else { orderBy.amtTotalStatus = "desc" } } else { orderBy.amtTotalStatus = null; orderBy.text = "year"; if (orderBy.yearAmtStatus === "desc") { orderBy.yearAmtStatus = "asc" } else if (orderBy.yearAmtStatus === "asc") { orderBy.yearAmtStatus = null } else { orderBy.yearAmtStatus = "desc" } } searchInfo.value.pageNo = 1; projectList.value = []; listTotal.value = 0; moreListFlag = true; getList() } // 参数 let searchInfo = ref({ pageNo: 1, pageSize: 10, beginDateStart: null, beginDateEnd: null, }) // 触底加载flag let moreListFlag = true // 获取列表 let projectList = ref([]); let listTotal = ref(0); function getList() { if (searchInfo.value.pageNo == 1) { loading.value = true } let params = Object.assign({ orderBy: orderBy.text === "amt" ? "amtTotal" : "yearAmt", orderType: orderBy.text === "amt" ? orderBy.amtTotalStatus : orderBy.yearAmtStatus }, searchInfo.value) if (countShow.value && firstGetCount) getAmtCountValue(params); getProjectBLList(params).then(res => { console.log(res.data.list); loading.value = false projectList.value = projectList.value.concat(res.data.list); listTotal.value = res.data.total; if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list .length)) moreListFlag = false; console.log(projectList.value); }).catch(() => { loading.value = false }) } function goToDetail(id, subName) { uni.navigateTo({ url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}` }) } function goToPage(url) { uni.navigateTo({ url }) } function goToReport(type, val) { console.log(val, '列表数据'); if (type === 'wtdb') { uni.navigateTo({ url: `/pages/problemSupervision/index?type=${type}&subId=${val.id}&subName=${val.subName}` }) } else if (type === 'qtldjbm') { uni.navigateTo({ url: `/pages/leadersList/index?type=${type}&subId=${val.id}&subName=${val.subName}` }) } else if (type === 'xcyx') { uni.navigateTo({ url: `/pages/projectImageAndVideo/index?type=${type}&subId=${val.id}&subName=${val.subName}` }) } else if (type === 'more') { uni.navigateTo({ url: `/pages/morePage/index?type=${type}&subId=${val.id}&subName=${val.subName}` }) } else { uni.navigateTo({ url: `/pages/projectInfo/report/index?type=${type}&subId=${val.id}&subName=${val.subName}&unitName=${val.unitName}` }) } } // 折叠/展开 const changeFoldItem = (status, id) => { let item = projectList.value.find(item => item.id === id); item.unfold = status; } // 收藏/取消 function changeFocus(id, status) { let item = projectList.value.find(item => item.id === id); if (status) { cancelFocus({ subId: id }).then(res => { if (res.code === 200) { item.isAttention = 0; } }).catch(() => { uni.showToast({ title: "更改收藏状态失败。", icon: "none", duration: 2000 }) }) } else { addFocus({ subId: id }).then(res => { if (res.code === 200) { item.isAttention = 1; } }).catch(() => { uni.showToast({ title: "更改收藏状态失败。", icon: "none", duration: 2000 }) }) } } let seachFalg = ref(true) function searchClick() { goToPage('/pages/projectInfo/search/index') } onUnload(() => { uni.$off('projectInfoSearch'); }) onPageScroll((e) => { scrollTop.value = e.scrollTop }) onPullDownRefresh(() => { searchInfo.value.pageNo = 1; projectList.value = []; moreListFlag = true; firstGetCount = true; try { getList(); } finally { uni.stopPullDownRefresh() } }) //是否展开筛选条件 let isUnfold = ref(false) //投资分析帅选条件 let investmentAnalysisFrom = ref({ kind: '' }) let cardCurrut = ref(0) function onChangeCard(e) { if (cardCurrut.value == e) { projectList.value[cardCurrut.value].isOpen = !projectList.value[cardCurrut.value].isOpen } else { projectList.value[cardCurrut.value].isOpen = false projectList.value[e].isOpen = true cardCurrut.value = e } } let lightList = ref([{ name: '红灯' }, { name: '黄灯' }, { name: '绿灯' }]) let pageForm = ref({ beginDateStart: null, beginDateEnd: null, kind: null, indusKind: null, propKind: null, subjectId: null, status: null, subName: null, startAmt: null, endAmt: null, isHide: null, light: ['红灯', '黄灯', '绿灯'], }) // ====================================选择开始时间 let beginDateStart = ref(null) let beginTimeShow = ref(false) function showBeginTimeChoose() { beginTimeShow.value = true } function beginTimeClose(e) { if (e) { let time = timeFormat(e.value) pageForm.value.beginDateStart = time } beginTimeShow.value = false } // ====================================选择结束时间 let beginDateEnd = ref(null) let endTimeShow = ref(false) function showEndTimeChoose() { endTimeShow.value = true } function endTimeClose(e) { if (e) { let time = timeFormat(e.value) pageForm.value.beginDateEnd = time } endTimeShow.value = false } // ====================================选择项目类型 let kindShow = ref(false); let kindColumns = ref([]); function showKindChoose() { kindShow.value = true } function kindClose(e) { if (e) pageForm.value.kind = e.value[0]; kindShow.value = false; } let kindFull = []; const getXMLX = function() { getZJLYlist().then(res => { kindFull = res.data.list; kindFull.unshift({ key: null, value: "所有来源" }); kindColumns.value = [res.data.list.map(item => item.value)]; }) }; // ====================================选择行业分类 let industKindOrgin = [] let IndustKindList = ref([]) let IndustKindShow = ref(false) function showIndustKindChoose() { IndustKindShow.value = true } function IndustKindClose(e) { if (e) pageForm.value.indusKind = e.value[0]; IndustKindShow.value = false } // ====================================选择行业状态 // let statusList = ref([ // ["请选择", "暂存", "项目申报", "待审批", "审批中", "核准备案中", "计划编制", "待开工", "施工中", "年度竣工", "不同意", "已竣工"] // ]) let statusList = ref([ ["请选择", "暂存", "项目前期", "待开工", "施工中", "暂停施工", "已竣工"] ]) let statusShow = ref(false) function showStatusChoose() { statusShow.value = true } function statusClose(e) { if (e) pageForm.value.status = e.value[0]; statusShow.value = false; } // ====================================选择隐藏状态 let isHideNameList = ref([ ["请选择", "正常", "隐藏" ] ]) let isHideNameShow = ref(false) function showIsHideNameChoose() { isHideNameShow.value = true } function isHideNameClose(e) { if (e) pageForm.value.isHideName = e.value[0]; isHideNameShow.value = false; } // =====================================地点 let areaShow = ref(false); let areaColumns = ref([]); const showAreaChoose = function() { areaShow.value = true; } const areaClose = function(e) { if (e) pageForm.value.subjectId = e.value[0]; areaShow.value = false; } let jsddFull = []; const getJSDD = function() { getJSDDlist().then(res => { jsddFull = res.data.list; jsddFull.push({ key: null, value: "所有地区" }); areaColumns.value = [res.data.list.map(item => item.value)]; areaColumns.value[0].unshift("所有地区"); }) }; // =====================================性质 let xmxzShow = ref(false); let xmxzColumns = ref([]); const showXmxzChoose = function() { xmxzShow.value = true; } const xmxzClose = function(e) { if (e) pageForm.value.propKind = e.value[0]; xmxzShow.value = false; } let xmxzFull = []; const getXMXZ = function() { getXMXZlist().then(res => { xmxzFull = res.data.list; xmxzFull.unshift({ key: null, value: "所有性质" }); xmxzColumns.value = [res.data.list.map(item => item.value)]; }) }; // =====================================灯 let lightShow = ref(false); const kindUnit = store.getters && store.getters.kindUnit; function judgeLightShow() { if ((kindUnit ?? '') === '') { // 为空就请求一下 getInfo().then(res => { lightShow.value = res?.data?.user?.kindUnit === "1"; }) } else { lightShow.value = kindUnit === "1"; } } function confirmParams() { // let statusObj = { // "请选择": "", // "暂存": "0", // "项目申报": "1", // "待审批": "2", // "审批中": "3", // "核准备案中": "4", // "计划编制": "5", // "待开工": "6", // "施工中": "7", // "不同意": "8", // "年度竣工": "9", // "已竣工": "A" // } let statusObj = { "请选择": "", "暂存": "0", "项目前期": "1", "未开工": "6", "施工中": "7", "暂停施工": "8", //"年度竣工": "9", "已竣工": "A" } let isHideNameObj = { "请选择": "", "正常": "0", "隐藏": "1", } let lightObj = { "绿灯": "0", "黄灯": "1", "红灯": "2" } let lightText = "" for (let i in pageForm.value.light) { lightText += lightObj[pageForm.value.light[i]] + "," } if (lightText.length > 0) lightText = lightText.substr(0, lightText.length - 1); let paramsData = { "beginDateStart": pageForm.value.beginDateStart, "beginDateEnd": pageForm.value.beginDateEnd, "zjly": kindFull.find(item => item.value === pageForm.value.kind)?.key, "indusKind": industKindOrgin.find(item => item.value === pageForm.value.indusKind)?.key, "subjectId": jsddFull.find(item => item.value === pageForm.value.subjectId)?.key, "propKind": xmxzFull.find(item => item.value === pageForm.value.propKind)?.key, "status": statusObj[pageForm.value.status], "subName": pageForm.value.subName, "startAmt": pageForm.value.startAmt, "endAmt": pageForm.value.endAmt, "isHide": isHideNameObj[pageForm.value.isHideName], "light": lightText } searchInfo.value = Object.assign(searchInfo.value, paramsData); searchInfo.value.pageNo = 1; projectList.value = []; listTotal.value = 0; moreListFlag = true; console.log(searchInfo.value, '请求参数'); getList(); } onLoad(async (options) => { countShow.value = options.type === "home"; let now = new Date(); let year = now.getFullYear(); // 开始时间 // beginDateStart.value = pageForm.value.beginDateStart = year + "/01/01"; // 结束时间 // beginDateEnd.value = pageForm.value.beginDateEnd = year + "/12/31"; // 行业分类列表 const res = await getHYFLlist() industKindOrgin = res.data.list let titleList = res.data.list.map(item => item.value) titleList.unshift("请选择") IndustKindList.value = [titleList] getJSDD(); // 建设地点列表 getXMXZ(); // 项目性质列表 getXMLX(); // 项目类型列表 judgeLightShow() if (options.name === "储备项目") countShow.value = false; if (options?.type == 'home') { title.value = `分管项目(${options?.name})` seachFalg.value = false searchInfo.value = Object.assign(searchInfo.value, options) pageForm.value.status = options.name searchInfo.value.beginDateStart = ''; searchInfo.value.beginDateEnd = '' getList(); } else if (options?.type !== 'all') { seachFalg.value = false searchInfo.value = Object.assign(searchInfo.value, options) searchInfo.value.beginDateStart = `${options?.year}/01/01`; searchInfo.value.beginDateEnd = `${options?.year}/12/31`; getList(); } else { let year = new Date().getFullYear(); searchInfo.value.beginDateStart = `${year}/01/01`; searchInfo.value.beginDateEnd = `${year}/12/31`; uni.$on('projectInfoSearch', resolve => { searchInfo.value = Object.assign(searchInfo.value, resolve); searchInfo.value.pageNo = 1; projectList.value = []; listTotal.value = 0; moreListFlag = true; getList(); }); getList(); } }); onReachBottom(() => { if (!moreListFlag) { return uni.showToast({ title: "已经到底了。", icon: "none", duration: 2000 }) } searchInfo.value.pageNo++; getList(); }) </script> <template> <view class="container"> <page-title @searchClick='searchClick'>{{title}}({{listTotal}})</page-title> <view class="stats-layer-next"> <view class="condition-btn"> <view class="text"> 2024 </view> <image src="../../static/open-btn.png" mode="" :class="isUnfold ? 'open-btn':''" @click="isUnfold = !isUnfold"> </image> </view> <view class="condition-from" :style="isUnfold ? {height:'800rpx'} :''"> <view class="item"> <view class="item-label">开始日期</view> <view class="item-text" @click="showBeginTimeChoose()"> <view v-if="pageForm.beginDateStart">{{pageForm.beginDateStart}}</view> <view v-else class="text">请选择开始日期</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item"> <view class="item-label">结束日期</view> <view class="item-text" @click="showEndTimeChoose()"> <view v-if="pageForm.beginDateEnd">{{pageForm.beginDateEnd}}</view> <view v-else class="text">请选择结束日期</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item"> <view class="item-label">资金来源</view> <view class="item-text" @click="showKindChoose()"> <view v-if="pageForm.kind">{{pageForm.kind}}</view> <view v-else class="text">请选择类型</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item" v-if="seachFalg"> <view class="item-label">项目性质</view> <view class="item-text" @click="showXmxzChoose()"> <view v-if="pageForm.propKind">{{pageForm.propKind}}</view> <view v-else class="text">请选择行业分类</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item"> <view class="item-label">建设地点</view> <view class="item-text" @click="showAreaChoose()"> <view v-if="pageForm.subjectId">{{pageForm.subjectId}}</view> <view v-else class="text">请选择建设地点</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item"> <view class="item-label">行业分类</view> <view class="item-text" @click="showIndustKindChoose()"> <view v-if="pageForm.indusKind">{{pageForm.indusKind}}</view> <view v-else class="text">请选择行业分类</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item" v-if="seachFalg"> <view class="item-label">状态</view> <view class="item-text" @click="showStatusChoose()"> <view v-if="pageForm.status">{{pageForm.status}}</view> <view v-else class="text">请选择状态</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item"> <view class="item-label">隐藏状态</view> <view class="item-text" @click="showIsHideNameChoose()"> <view v-if="pageForm.isHideName">{{pageForm.isHideName}}</view> <view v-else class="text">请选择隐藏状态</view> <u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon> </view> </view> <view class="item"> <view class="item-label">金额范围</view> <view class="card-item-range"> <input v-model="pageForm.startAmt" class="card-item-input center-input" placeholder="最小值" placeholder-style="color: #D8D8D8" maxlength="20" type="number" /> ~ <input v-model="pageForm.endAmt" class="card-item-input center-input" placeholder="最大值" placeholder-style="color: #D8D8D8" maxlength="20" type="number" /> </view> </view> <view class="item"> <view class="item-label">项目名称</view> <view class="card-item-range"> <input v-model="pageForm.subName" class="card-item-input center-input" placeholder="请输入项目名称" placeholder-style="color: #D8D8D8" maxlength="20" type="number" /> </view> </view> <!-- 红黄绿灯 --> <view style="margin-top: 20rpx;"> <u-checkbox-group v-model="pageForm.light" style="width: 500rpx"> <u-checkbox :customStyle="{display:'flex',justifyContent:'space-evenly',width:'32%'}" label-size="16px" iconColor='#fff' activeColor='#002F69' v-for="(item, index) in lightList" :key="index" :label="item.name" :name="item.name"> </u-checkbox> </u-checkbox-group> </view> <view class="form-confrom" style="margin-top: 20rpx;" @click="confirmParams()"> 确定 </view> </view> </view> <view class="cards-list" :style="isUnfold ? {marginTop:'30rpx'} :''"> <view v-for="(item,index) in projectList" :key="index"> <view class="card"> <!-- <view class=""> </view> --> <view class="project-layer" :style="!item.isOpen ? {border:'none'}:''"> <text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text> <view class="name"> {{item.subName ?? "--"}} </view> </view> <view class="card-status" @click="onChangeCard(index)"> <image class="status-light" src="../../static/images/red.svg" mode="" v-if="item.status_fgw=='2'"></image> <image class="status-light" src="../../static/images/green.svg" mode="" v-if="item.status_fgw=='0'||item.status_fgw==null"></image> <image class="status-light" src="../../static/images/yellow.svg" mode="" v-if="item.status_fgw=='1'"> </image> <view class="" style="white-space: nowrap;"> {{item.status ?? "--"}} </view> <image src="../../static/images/liaghtUp.svg" mode="" :class="item.isOpen ?'card-status-icon-change' :''"> </image> </view> <view class="card-content-box" :style="item.isOpen ? {height:'250rpx'} :''"> <view class="card-item" style="margin-top: 5rpx;"> <view class="card-item-name">总 投 资 金 额</view> <view class="card-item-content">{{item.amtTotal ?? "--"}}万</view> </view> <!-- 年度计划投资-申报单位(万元) --> <view class="card-item"> <view class="card-item-name">年度计划投资</view> <view class="card-item-content">{{item.yearAmt ?? "--"}}万</view> </view> <!-- 已完成投资(万元)--> <view class="card-item"> <view class="card-item-name">年度完成投资</view> <view class="card-item-content">{{item.yearAmtSj ?? "--"}}万</view> </view> <!-- 当前状态 --> <view class="card-item"> <view class="card-item-name">项目状态</view> <view class="card-item-content content-red">{{item.status ?? "--"}}</view> </view> <view class="card-btn-list"> <view class="button" @click="goToReport('weekly',item)"> 周报 </view> <view class="button" @click="goToReport('monthly',item)"> 月报 </view> <view class="button" v-if="!item.isAttention" @click="changeFocus(item.id,item.isAttention)"> 关注 </view> <view class="button" @click="changeFocus(item.id,item.isAttention)" v-else> 取消关注 </view> <view class="button" v-if="item.usersub == 1" @click="goToDetail(item.id,item.subName)"> 项目详情 </view> <view class="button" v-else @click="goToDetail(item.id,item.subName)"> 查看 </view> <view class="button" @click="goToReport('more',item)"> 更多 </view> </view> </view> </view> </view> <view class="no-list" v-if="projectList.length===0"> <image src="@/static/text-nocontent.png" mode=""></image> <text>未搜索到相关内容</text> </view> </view> <u-back-top :scroll-top="scrollTop"></u-back-top> <u-loading-page :loading="loading"></u-loading-page> <!-- 开始时间 --> <u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose" v-model="beginDateStart" mode="date" closeOnClickOverlay></u-datetime-picker> <!-- 结束时间 --> <u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose" v-model="beginDateEnd" mode="date" closeOnClickOverlay></u-datetime-picker> <!-- 行业分类 --> <u-picker :show="IndustKindShow" :columns="IndustKindList" @confirm="IndustKindClose" @cancel="IndustKindClose" @close="IndustKindClose" closeOnClickOverlay></u-picker> <!-- 行业状态 --> <u-picker :show="statusShow" :columns="statusList" @confirm="statusClose" @cancel="statusClose" @close="statusClose" closeOnClickOverlay></u-picker> <!-- 地点选择 --> <u-picker :show="areaShow" :columns="areaColumns" @confirm="areaClose" @cancel="areaClose" @close="areaClose" closeOnClickOverlay></u-picker> <!-- 性质选择 --> <u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose" closeOnClickOverlay></u-picker> <!-- 项目类型 --> <u-picker :show="kindShow" :columns="kindColumns" @confirm="kindClose" @cancel="kindClose" @close="kindClose" closeOnClickOverlay></u-picker> <!-- 隐藏状态 --> <u-picker :show="isHideNameShow" :columns="isHideNameList" @confirm="isHideNameClose" @cancel="isHideNameClose" @close="isHideNameClose" closeOnClickOverlay></u-picker> </view> </template> <style lang="scss" scoped> .bg { margin-top: calc(var(--status-bar-height) + 100rpx); left: 0; width: 100%; min-height: 95%; // padding-top: 14rpx; // border-radius: 40rpx 40rpx 0rpx 0rpx; // background-color: #fff; } .count-value { display: flex; flex-wrap: wrap; width: 100%; height: 200rpx; margin-bottom: 20rpx; background: linear-gradient(180deg, #FFFFFF 2%, #A5C6FF 100%); border-radius: 40rpx 40rpx 40rpx 40rpx; opacity: 1; border: 4rpx solid #fff; .count-item { display: flex; flex-direction: column; justify-content: center; width: 50%; height: 50%; text-align: center; .count-item-value { margin-bottom: 8rpx; font-size: 34rpx; font-weight: 500; color: #FF4000; } .count-special-value { color: #330DDF; } .count-item-description { font-size: 24rpx; color: #343437; } } } .order-by { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 106rpx; margin-bottom: 34rpx; padding: 0 40rpx; border-radius: 40rpx; background: #FFF; .order-by-item { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 32rpx; color: #343437; .order-by-icon { width: 22rpx; height: 46rpx; margin-left: 24rpx; background-image: url("@/static/orderBy-none.png"); background-size: 100% 100%; } .desc { background-image: url("@/static/orderBy-desc.png"); } .asc { background-image: url("@/static/orderBy-asc.png"); } } } .card-box { padding: 0 36rpx 36rpx 36rpx; border-radius: 28rpx 28rpx 28rpx 28rpx; border: 2rpx solid #C2C9D4; } .project-btn { width: 48% !important; background: #1869F6; } .focus-btn { width: 48% !important; background-color: #fff; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 3rpx solid #1869F6; color: #1869F6; } .focus-btn-no { width: 48% !important; background-color: #fff; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 3rpx solid #FF2D2D; color: #FF2D2D; } .lamp { display: flex; justify-content: center; align-items: center; image { width: 72rpx; height: 72rpx; margin-right: 20rpx; } text { font-size: 32rpx; } } .card-box2 { padding: 0 0 36rpx 0; border-radius: 28rpx 28rpx 28rpx 28rpx; } .focusText { font-size: 12rpx; margin-right: 12rpx; } .card { padding-top: 0; // overflow: hidden; } .light-item { margin-bottom: 32rpx; } .card-light { display: flex; align-items: center; justify-content: center; } .card-light-bottom { width: 122rpx; height: 44rpx; margin: auto 0; background-size: 100% 100%; } .light-red { background-image: url('@/static/icon-light-red.png'); } .light-yellow { background-image: url('@/static/icon-light-yellow.png'); } .light-green { background-image: url('@/static/icon-light-green.png'); } .focus { width: 46rpx; height: 40rpx; background-image: url("@/static/focus-off.png"); background-size: 100% 100%; } .focus-on { background-image: url("@/static/focus-on.png"); } .more-btn { background-color: #fff; color: #1869F6; font-size: 32rpx; } .special-btn { width: 48% !important; background: linear-gradient(225deg, #2428F1 0%, #12C8C2 94%); } .bottom-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; row-gap: 20rpx; margin-bottom: 64rpx; } .card-value { position: absolute; bottom: 0; right: 50%; transform: translate(50%); width: 255rpx; height: 68rpx; padding-right: 22rpx; text-align: center; line-height: 68rpx; color: #1869F6; font-size: 32rpx; background: linear-gradient(90deg, rgba(211, 227, 255, 0) 0%, rgba(178, 206, 255, 0.5548) 54%, rgba(219, 232, 255, 0) 100%); } .card-fold { position: relative; width: 100%; min-height: 152rpx; margin-bottom: 20rpx; padding: 24rpx 30rpx 52rpx; box-sizing: border-box; background: #FFFFFF; border-radius: 40rpx; overflow: hidden; } .card-fold-option { position: absolute; display: flex; justify-content: space-between; align-items: center; left: 0; bottom: 0; width: 100%; height: 38rpx; padding: 0 40rpx; box-sizing: border-box; background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%); z-index: 999; .card-fold-count { flex: 1; font-size: 28rpx; color: #1869F6; } .card-fold-center { flex: 1; .card-fold-btn { width: 32rpx; height: 20rpx; margin: 0 auto; background-image: url("@/static/icon-fold.png"); background-size: 100% 100%; } .card-unfold-btn { transform: rotate(180deg); } } .card-fold-chaos { flex: 1; } } .card-fold-red { background: linear-gradient(270deg, #FF8080 0%, rgba(219, 232, 255, 0) 100%); .card-fold-count { color: #FF0000; } .card-fold-center { .card-fold-btn { background-image: url("@/static/icon-fold-red.png"); } } } .card-fold-yellow { background: linear-gradient(270deg, #FFAA00 4%, rgba(219, 232, 255, 0) 100%); .card-fold-count { color: #E19703; } .card-fold-center { .card-fold-btn { background-image: url("@/static/icon-fold-yellow.png"); } } } .card-name-num { width: 64rpx; height: 64rpx; border-radius: 4rpx; border: 2rpx solid #F4F4F4; font-size: 24rpx; color: #B5B5B5; display: flex; align-items: center; justify-content: center; } .card .project-layer { justify-content: flex-start; .name { padding-right: 160rpx; font-weight: 500; font-size: 28rpx; color: #222222; } } .card { padding-top: 20rpx !important; } .card .card-status { position: absolute; top: 20rpx; height: 96rpx; right: 0; width: 140rpx; background: #F2F7FF; font-weight: 500; font-size: 12px; color: #98B7DC; border-radius: 24rpx 0 0 24rpx; } .status-light { width: 60rpx !important; height: 60rpx !important; position: absolute !important; right: 0; top: -204rpx !important; } .card-item { .card-item-name { font-weight: 500; font-size: 24rpx; color: #999999; } .card-item-content { font-weight: 500; font-size: 24rpx; color: #444444; } .content-red { color: #E02020 !important; } } </style>