601 lines
26 KiB
Vue
601 lines
26 KiB
Vue
<!--<template>-->
|
|
<!-- <view class="main">-->
|
|
<!-- <view class="heard">-->
|
|
<!-- <image class="headerBg" src="/static/images/plan/blueBack.png"></image>-->
|
|
<!-- <view>-->
|
|
<!-- <image @click="handleBack" class="allowLeft" :style="{top: menu.top +((menu.height - 24) / 2) + 'px'}" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="content">-->
|
|
<!-- <view class="block"></view>-->
|
|
<!-- <p class="title">年度经营计划</p>-->
|
|
<!-- <!– 选择月份 –>-->
|
|
<!-- <view class="monthTabs">-->
|
|
<!-- <scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-x="true" enable-flex :scrollIntoView="selectMonthId" >-->
|
|
<!-- <div :id="'item'+item.value" :class="selectMonth===item.value?'monthItem selectItem':'monthItem'" v-for="(item,index) in monthList" :key="index" @click="handleSelectMonth(item.value)">{{item.label}}</div>-->
|
|
<!-- </scroll-view>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- <view class="monthDetailList">-->
|
|
<!-- <swiper class="swiper" previous-margin="40rpx" next-margin="40rpx" @change="handleDetailScroll" :current="selectDetail">-->
|
|
<!-- <block v-for="(item,index) in swiperList" :key="index">-->
|
|
<!-- <swiper-item class="swiper-item" :item-id="index" :data-item-id="index" bindtap='clickChange'>-->
|
|
<!-- <view class="box">-->
|
|
<!-- <view :class="selectDetail===index?'detail':'detail noShow'">-->
|
|
<!-- <view class="item" v-if="selectDetail===index">-->
|
|
<!-- <view class="itemTop">-->
|
|
<!-- <view class="left">-->
|
|
<!-- <image class="logo" src="/static/images/plan/monthLogo.svg"></image>-->
|
|
<!-- <view class="detailContent">-->
|
|
<!-- <view class="top">-->
|
|
<!-- <span class="money">{{detail.Revenue_Amount || '-'}}</span>-->
|
|
<!-- <image v-if="detail.Budget_Degree>100" class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
|
|
<!-- </view>-->
|
|
<!-- <p class="text">本月已完成<text class="unit">/元</text></p>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="right">-->
|
|
<!-- <p class="add" :style="{color:detail.Growth_Rate>0?'#E83944':'#049E77'}">{{detail.Growth_Rate>0?'+':'-'}}{{detail.Growth_Rate || '-'}}%</p>-->
|
|
<!-- <text class="compare">比计划</text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="itemBottom" :style="{marginTop: selectDetail===index?'24px':'4px'}">-->
|
|
<!-- <view class="progress">-->
|
|
<!-- <view class="have" :style="{width: detail.Budget_Degree + '%'}"></view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="text">-->
|
|
<!-- <span class="success">计划完成<span class="unit">/元</span></span>-->
|
|
<!-- <span class="target">{{ detail.Budget_Amount || '-' }}</span>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="item" v-if="selectDetail!==index">-->
|
|
<!-- <view class="itemTop">-->
|
|
<!-- <view class="left">-->
|
|
<!-- <image class="logo" src="/static/images/plan/monthLogo.svg"></image>-->
|
|
<!-- <view class="detailContent">-->
|
|
<!-- <view class="top">-->
|
|
<!-- <span class="money">{{'-'}}</span>-->
|
|
<!-- <image v-if="detail.Budget_Degree>100" class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
|
|
<!-- </view>-->
|
|
<!-- <p class="text">本月已完成<text class="unit">/元</text></p>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="right">-->
|
|
<!-- <p class="add" :style="{color:detail.Growth_Rate>0?'#E83944':'#049E77'}">{{detail.Growth_Rate>0?'+':'-'}}{{ '-'}}%</p>-->
|
|
<!-- <text class="compare">比计划</text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="itemBottom" :style="{marginTop: selectDetail===index?'24px':'4px'}">-->
|
|
<!-- <view class="progress">-->
|
|
<!-- <view class="have" :style="{width: detail.Budget_Degree + '%'}"></view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="text">-->
|
|
<!-- <span class="success">计划完成<span class="unit">/元</span></span>-->
|
|
<!-- <span class="target">{{ '-' }}</span>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </swiper-item>-->
|
|
<!-- </block>-->
|
|
<!-- </swiper>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="serviceList">-->
|
|
<!-- <scroll-view class="list" scroll-y="true">-->
|
|
<!-- <view class="item" v-for="(item,index) in detail.RegionBudgetList" :key="index" @click="goPage(item.Serverpart_ID)">-->
|
|
<!-- <view class="top">-->
|
|
<!-- <p class="title">{{ item.Serverpart_Name || ''}}</p>-->
|
|
<!-- <image class="icon" src="/static/images/plan/blueArrow.svg"></image>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="detail">-->
|
|
<!-- <view class="left">-->
|
|
<!-- <view class="money">-->
|
|
<!-- <span class="num">{{ item.Revenue_Amount }}</span>-->
|
|
<!-- <image class="icon" src="/static/images/index/yearSuccess.svg"></image>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="text">本月已完成<span class="unit">/元</span></view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="right">-->
|
|
<!-- <p class="add" :style="{color:item.Growth_Rate>0?'#E83944':'#049E77'}"><span>{{item.Growth_Rate>0?'+':''}}</span>{{item.Growth_Rate || '-'}}%</p>-->
|
|
<!-- <p class="text">比计划</p>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="progress">-->
|
|
<!-- <view class="box">-->
|
|
<!-- <view class="have" :style="{width:item.Budget_Degree + '%'}"></view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="other">-->
|
|
<!-- <view>-->
|
|
<!-- <span class="unit">计划完成</span>-->
|
|
<!-- <span class="type">/元</span>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="money">{{item.Budget_Amount || ''}}</view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </scroll-view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!--</template>-->
|
|
|
|
<!--<script>-->
|
|
<!--import request from '@/util/index.js'-->
|
|
<!--export default{-->
|
|
<!-- name: "yearPlan",-->
|
|
<!-- data(){-->
|
|
<!-- return {-->
|
|
<!-- monthList:[{label:'1月',value:1},{label:'2月',value:2},{label:'3月',value:3},{label:'4月',value:4},{label:'5月',value:5},{label:'6月',value:6},{label:'7月',value:7}, {label:'8月',value:8},{label:'9月',value:9},{label:'10月',value:10},{label:'11月',value:11},{label:'12月',value:12}],-->
|
|
<!-- selectMonth:0,// 选中的月份-->
|
|
<!-- selectMonthId:'',// 选中月份的id-->
|
|
<!-- swiperList:[{label:1111},{label:2222},{label:3333},{label:4444},{label:5555},{label:6666},{label:7777},{label:8888},{label:9999},{label:1010}, {label:11111111},{label:1212}],-->
|
|
<!-- selectDetail:0,// 选中的月份详情卡片-->
|
|
<!-- serviceList:[{},{},{},{},{},{}],-->
|
|
<!-- menu:{},-->
|
|
<!-- detail:{},// 页面请求到的数据-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- onLoad(){-->
|
|
<!-- // 获取手机参数对页面进行适配-->
|
|
<!-- this.menu = uni.getMenuButtonBoundingClientRect()-->
|
|
<!-- // 先拿到首页的时间 作为调用接口的统一时间 存的lastDay存当前月份的具体日期切换回本月的日期判断有用-->
|
|
<!-- this.searchTime = uni.getStorageSync('lastDay')-->
|
|
<!-- this.lastDay = uni.getStorageSync('lastDay')-->
|
|
<!-- // 拿到当前时间-->
|
|
<!-- const date = new Date(this.searchTime)-->
|
|
<!-- let month = date.getMonth() + 1-->
|
|
<!-- // 滚动的月份列表-->
|
|
<!-- this.monthList = this.monthList.filter(item=>item.value<=month)-->
|
|
<!-- // 详情卡片的滑动列表-->
|
|
<!-- this.swiperList = this.swiperList.filter((item,index)=>index<month)-->
|
|
<!-- // 根据月份显示的详情卡片-->
|
|
<!-- this.selectDetail = month - 1-->
|
|
<!-- // // 拿到片区详情完成列表-->
|
|
<!-- // this.handleAreaDetailList()-->
|
|
<!-- },-->
|
|
<!-- onReady(){-->
|
|
<!-- this.getThisMonth()-->
|
|
<!-- },-->
|
|
<!-- methods:{-->
|
|
<!-- // 横向月份选择器的初始值-->
|
|
<!-- getThisMonth(){-->
|
|
<!-- const date = new Date()-->
|
|
<!-- const month = date.getMonth() + 1-->
|
|
<!-- this.selectMonth = month-->
|
|
<!-- this.selectMonthId = `item${month}`-->
|
|
<!-- },-->
|
|
<!-- // 点击月份切换月份-->
|
|
<!-- handleSelectMonth(value){-->
|
|
<!-- this.selectMonth = value-->
|
|
<!-- this.selectMonthId = `item${value}`-->
|
|
<!-- this.selectDetail = value - 1-->
|
|
<!-- },-->
|
|
<!-- // 月份信息详情的滚动-->
|
|
<!-- handleDetailScroll(e){-->
|
|
<!-- const date = new Date(this.lastDay)-->
|
|
<!-- let year = date.getFullYear()-->
|
|
<!-- let month = date.getMonth() + 1-->
|
|
<!-- let day = date.getDate()-->
|
|
<!-- this.selectDetail = e.detail.current-->
|
|
<!-- this.selectMonth = this.selectDetail + 1-->
|
|
<!-- this.selectMonthId = `item${this.selectDetail<5?1:this.selectDetail}`-->
|
|
<!-- if (month === this.selectMonth){-->
|
|
<!-- this.searchTime = `${year}-${month}-${day}`-->
|
|
<!-- }else{-->
|
|
<!-- let m = this.selectMonth-->
|
|
<!-- if (m<10){-->
|
|
<!-- m = '0' + m-->
|
|
<!-- }-->
|
|
<!-- let d = this.$util.getThisMonthDay(`${year}-${m}`)-->
|
|
<!-- this.searchTime = `${year}-${m}-${d}`-->
|
|
<!-- }-->
|
|
|
|
<!-- this.handleAreaDetailList()-->
|
|
<!-- },-->
|
|
<!-- async handleAreaDetailList(){-->
|
|
<!-- uni.showLoading({title:'正在加载'})-->
|
|
<!-- console.log('this.searchTime',this.searchTime)-->
|
|
<!-- const req = {-->
|
|
<!-- StatisticsDate: this.searchTime,-->
|
|
<!-- ProvinceCode:'340000',-->
|
|
<!-- StatisticsType:1-->
|
|
<!-- }-->
|
|
<!-- const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)-->
|
|
<!-- for (let key in data.Result_Data){-->
|
|
<!-- if (key==='Budget_Amount' || key==='Revenue_Amount'){-->
|
|
<!-- data.Result_Data[key] = this.$util.fmoney(data.Result_Data[key])-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- data.Result_Data.RegionBudgetList.forEach(item=>{-->
|
|
<!-- for (let key in item){-->
|
|
<!-- if (key==='Budget_Amount' || key==='Revenue_Amount'){-->
|
|
<!-- item[key] = this.$util.fmoney(item[key])-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- })-->
|
|
<!-- this.detail = data.Result_Data-->
|
|
<!-- uni.hideLoading()-->
|
|
<!-- console.log('this.detail',this.detail)-->
|
|
<!-- },-->
|
|
<!-- goPage(id){-->
|
|
<!-- this.$util.toNextRoute('navigateTo', '/pages/commercialBI/areaPlanMonth?id='+id+'&search='+this.se)-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!--}-->
|
|
<!--</script>-->
|
|
|
|
<!--<style scoped lang="scss">-->
|
|
<!--@import '/static/public/font/stylesheet.css';-->
|
|
|
|
<!--.main{-->
|
|
<!-- width: 100%;-->
|
|
<!-- .heard{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 366px;-->
|
|
<!-- position: relative;-->
|
|
<!-- .content{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 100%;-->
|
|
<!-- position: absolute;-->
|
|
<!-- box-sizing: border-box;-->
|
|
<!-- top: 0;left: 0;-->
|
|
<!-- z-index: 2;-->
|
|
<!-- .block{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 83px;-->
|
|
<!-- }-->
|
|
<!-- .title{-->
|
|
<!-- font-size: 28px;-->
|
|
<!-- font-family: "Alimama ShuHeiTi";-->
|
|
<!-- color: #160002;-->
|
|
<!-- line-height: 39px;-->
|
|
<!-- font-weight: 600;-->
|
|
<!-- text-shadow: 0 4px 8px rgba(2,32,202,0.2);-->
|
|
<!-- background: linear-gradient(180deg, #fff 50%, #B0BBFF 100%);-->
|
|
<!-- -webkit-background-clip: text;-->
|
|
<!-- -webkit-text-fill-color: transparent;-->
|
|
<!-- margin: 14px 24px;-->
|
|
<!-- }-->
|
|
<!-- .monthTabs{-->
|
|
<!-- width: calc(100% - 32px);-->
|
|
<!-- height: 34px;-->
|
|
<!-- border-radius: 17px;-->
|
|
<!-- box-sizing: border-box;-->
|
|
<!-- border: 1px solid #798DFF;-->
|
|
<!-- background: linear-gradient(180deg, #4762FF 0%, #778EFF 100%);-->
|
|
<!-- overflow: hidden;-->
|
|
<!-- padding: 2px 0;-->
|
|
<!-- margin-top: 16px;-->
|
|
<!-- margin-left: 16px;-->
|
|
<!-- .big{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 100%;-->
|
|
<!-- white-space: nowrap;-->
|
|
<!-- .monthItem{-->
|
|
<!-- display: inline-block;-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- padding: 2px 16px;-->
|
|
<!-- font-family: PingFangSC-Semibold, PingFang SC;-->
|
|
<!-- font-weight: 600;-->
|
|
<!-- color: #B8C2FF;-->
|
|
<!-- line-height: 24px;-->
|
|
<!-- margin-right: 4px;-->
|
|
<!-- text-align: center;-->
|
|
<!-- border-radius: 12px;-->
|
|
<!-- }-->
|
|
<!-- .selectItem{-->
|
|
<!-- background: #fff;-->
|
|
<!-- }-->
|
|
<!-- .monthItem:first-child{-->
|
|
<!-- margin-left: 4px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .monthDetailList{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 140px;-->
|
|
<!-- margin-top: 12px;-->
|
|
<!-- .swiper{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 100%;-->
|
|
<!-- .swiper-item{-->
|
|
<!-- .box{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 100%;-->
|
|
<!-- .detail{-->
|
|
<!-- width: calc(100% - 20px);-->
|
|
<!-- height: 100%;-->
|
|
<!-- background: linear-gradient(314deg, #D8EAFF 0%, #F3F5FF 32%, #F5FCFF 54%, #F0F7FF 70%, #D3D9FF 100%);-->
|
|
<!-- margin-left: 10px;-->
|
|
<!-- border-radius: 8px;-->
|
|
<!-- box-sizing: border-box;-->
|
|
<!-- padding: 16px;-->
|
|
<!-- .item{-->
|
|
<!-- .itemTop{-->
|
|
<!-- width: 100%;-->
|
|
<!-- display: flex;-->
|
|
<!-- justify-content: space-between;-->
|
|
<!-- .left{-->
|
|
<!-- display: flex;-->
|
|
<!-- .logo{-->
|
|
<!-- width: 44px;-->
|
|
<!-- height: 44px;-->
|
|
<!-- margin-right: 8px;-->
|
|
<!-- }-->
|
|
<!-- .detailContent{-->
|
|
<!-- .top{-->
|
|
<!-- display: flex;-->
|
|
<!-- align-items: center;-->
|
|
<!-- margin-bottom: 2px;-->
|
|
<!-- .money{-->
|
|
<!-- font-size: 18px;-->
|
|
<!-- font-family: DINAlternate-Bold, DINAlternate;-->
|
|
<!-- font-weight: bold;-->
|
|
<!-- color: #160002;-->
|
|
<!-- line-height: 24px;-->
|
|
<!-- }-->
|
|
<!-- .icon{-->
|
|
<!-- width: 15px;-->
|
|
<!-- height: 15px;-->
|
|
<!-- margin-left: 6px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .text{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #786B6C;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- .unit{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #A69E9F;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- margin-left: 2px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .right{-->
|
|
<!-- text-align: right;-->
|
|
<!-- .add{-->
|
|
<!-- font-size: 18px;-->
|
|
<!-- font-family: DINAlternate-Bold, DINAlternate;-->
|
|
<!-- font-weight: bold;-->
|
|
<!-- line-height: 24px;-->
|
|
<!-- }-->
|
|
<!-- .compare{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #A69E9F;-->
|
|
<!-- line-height: 18px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .itemBottom{-->
|
|
<!-- margin-top: 24px;-->
|
|
<!-- .progress{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 10px;-->
|
|
<!-- background: #ccc;-->
|
|
<!-- border-radius: 5px;-->
|
|
<!-- position: relative;-->
|
|
<!-- overflow: hidden;-->
|
|
<!-- .have{-->
|
|
<!-- height: 100%;-->
|
|
<!-- position: absolute;-->
|
|
<!-- left: 0;-->
|
|
<!-- top: 0;-->
|
|
<!-- background: #576EFF;-->
|
|
<!-- border-radius: 5px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .text{-->
|
|
<!-- margin-top: 4px;-->
|
|
<!-- width: 100%;-->
|
|
<!-- display: flex;-->
|
|
<!-- justify-content: space-between;-->
|
|
<!-- align-items: center;-->
|
|
<!-- .success{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #786B6C;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- .unit{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #A69E9F;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- margin-left: 2px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .target{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #160002;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .noShow{-->
|
|
<!-- height: 112px;-->
|
|
<!-- margin-top: 14px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
|
|
<!-- }-->
|
|
<!-- .headerBg{-->
|
|
<!-- position: absolute;-->
|
|
<!-- top: 0;-->
|
|
<!-- left: 0;-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 100%;-->
|
|
<!-- z-index: 1;-->
|
|
<!-- }-->
|
|
<!-- .allowLeft{-->
|
|
<!-- position: absolute;-->
|
|
<!-- width: 24px;-->
|
|
<!-- height: 24px;-->
|
|
<!-- left: 16px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
|
|
<!-- .serviceList{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: calc(100vh - 366px);-->
|
|
<!-- transform: translateY(-16px);-->
|
|
<!-- border-radius: 8px;-->
|
|
<!-- z-index: 6;-->
|
|
<!-- position: relative;-->
|
|
<!-- background: #fff;-->
|
|
<!-- box-sizing: border-box;-->
|
|
<!-- padding:16px 16px 0;-->
|
|
<!-- .list{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 100%;-->
|
|
<!-- ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}-->
|
|
<!-- .item{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 178px;-->
|
|
<!-- background: linear-gradient(314deg, #EDF7FF 0%, #F3F5FF 32%, #F5FCFF 54%, #F0F7FF 70%, #D7DDFF 100%);-->
|
|
<!-- border-radius: 8px;-->
|
|
<!-- margin-bottom: 12px;-->
|
|
<!-- box-sizing: border-box;-->
|
|
<!-- padding: 16px;-->
|
|
<!-- .top{-->
|
|
<!-- display: flex;-->
|
|
<!-- align-items: center;-->
|
|
<!-- .title{-->
|
|
<!-- font-size: 18px;-->
|
|
<!-- font-family: Alimama ShuHeiTi;-->
|
|
<!-- color: #1A33BC;-->
|
|
<!-- line-height: 26px;-->
|
|
<!-- }-->
|
|
<!-- .icon{-->
|
|
<!-- width: 15px;-->
|
|
<!-- height: 15px;-->
|
|
<!-- opacity: 0.8;-->
|
|
<!-- margin-left: 7px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .detail{-->
|
|
<!-- margin-top: 16px;-->
|
|
<!-- width: 100%;-->
|
|
<!-- display: flex;-->
|
|
<!-- justify-content: space-between;-->
|
|
<!-- .left{-->
|
|
<!-- .money{-->
|
|
<!-- display: flex;-->
|
|
<!-- align-items: center;-->
|
|
<!-- margin-bottom: 2px;-->
|
|
<!-- .num{-->
|
|
<!-- font-size: 20px;-->
|
|
<!-- font-family: DINAlternate-Bold, DINAlternate;-->
|
|
<!-- font-weight: bold;-->
|
|
<!-- color: #160002;-->
|
|
<!-- line-height: 24px;-->
|
|
<!-- margin-right: 4px;-->
|
|
<!-- }-->
|
|
<!-- .icon{-->
|
|
<!-- width: 16px;-->
|
|
<!-- height: 16px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .text{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #786B6C;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- .unit{-->
|
|
<!-- color: #A69E9F;-->
|
|
<!-- margin-left: 2px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .right{-->
|
|
<!-- display: flex;-->
|
|
<!-- flex-direction: column;-->
|
|
<!-- align-items: flex-end;-->
|
|
<!-- .add{-->
|
|
<!-- font-size: 24px;-->
|
|
<!-- font-family: DINAlternate-Bold, DINAlternate;-->
|
|
<!-- font-weight: bold;-->
|
|
<!-- line-height: 24px;-->
|
|
<!-- margin-bottom: 2px;-->
|
|
<!-- }-->
|
|
<!-- .text{-->
|
|
<!-- font-size: 12px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #A69E9F;-->
|
|
<!-- line-height: 18px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .progress{-->
|
|
<!-- margin-top: 16px;-->
|
|
<!-- .box{-->
|
|
<!-- width: 100%;-->
|
|
<!-- height: 10px;-->
|
|
<!-- border-radius: 5px;-->
|
|
<!-- background: #ccc;-->
|
|
<!-- overflow: hidden;-->
|
|
<!-- position: relative;-->
|
|
<!-- .have{-->
|
|
<!-- position: absolute;-->
|
|
<!-- height: 100%;-->
|
|
<!-- background: rgba(87, 110, 255, 1);-->
|
|
<!-- border-radius: 5px;-->
|
|
<!-- left: 0;top: 0;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- .other{-->
|
|
<!-- width: 100%;-->
|
|
<!-- margin-top: 4px;-->
|
|
<!-- display: flex;-->
|
|
<!-- justify-content: space-between;-->
|
|
<!-- align-items: center;-->
|
|
<!-- .unit{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #786B6C;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- }-->
|
|
<!-- .type{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #A69E9F;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- margin-left: 2px;-->
|
|
<!-- }-->
|
|
<!-- .money{-->
|
|
<!-- font-size: 14px;-->
|
|
<!-- font-family: PingFangSC-Regular, PingFang SC;-->
|
|
<!-- font-weight: 400;-->
|
|
<!-- color: #160002;-->
|
|
<!-- line-height: 20px;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!--}-->
|
|
<!--</style>-->
|