328 lines
14 KiB
Vue
328 lines
14 KiB
Vue
<!--<template>-->
|
|
<!-- <view class="main">-->
|
|
<!-- <view class="heard">-->
|
|
<!-- <image class="headerBg" src="/static/images/plan/blueBack.png"></image>-->
|
|
<!-- <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">-->
|
|
<!-- <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">7,321,433,546</span>-->
|
|
<!-- <image 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">+8.24%</p>-->
|
|
<!-- <text class="compare">比计划</text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="itemBottom">-->
|
|
<!-- <view class="progress">-->
|
|
<!-- <view class="have" style="width: 78%"></view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="text">-->
|
|
<!-- <span class="success">计划完成<span class="unit">/元</span></span>-->
|
|
<!-- <span class="target">8,000,000,000</span>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </swiper-item>-->
|
|
<!-- </block>-->
|
|
<!-- </swiper>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!--</template>-->
|
|
|
|
<!--<script>-->
|
|
<!--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,// 选中的月份详情卡片-->
|
|
<!-- }-->
|
|
<!-- },-->
|
|
<!-- onLoad(){-->
|
|
<!-- // 获取手机参数对页面进行适配-->
|
|
<!-- let systemInfo = uni.getSystemInfoSync()-->
|
|
<!-- this.windowHeight = systemInfo.windowHeight-->
|
|
<!-- this.statusBarHeight = Number(systemInfo.statusBarHeight)-->
|
|
<!-- 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)-->
|
|
<!-- },-->
|
|
<!-- 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}`-->
|
|
<!-- },-->
|
|
<!-- // 月份信息详情的滚动-->
|
|
<!-- handleDetailScroll(e){-->
|
|
<!-- this.selectDetail = e.detail.current-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!--}-->
|
|
<!--</script>-->
|
|
|
|
<!--<style scoped lang="scss">-->
|
|
|
|
<!--.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;-->
|
|
<!-- color: #E83944;-->
|
|
<!-- 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;-->
|
|
<!-- .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;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!--}-->
|
|
<!--</style>-->
|