样式调整
This commit is contained in:
parent
6e1494d865
commit
74d00bbc8f
@ -17,8 +17,8 @@
|
||||
<!-- <text class="day" >{{ thisDay }}</text>-->
|
||||
<view class="uni-input" :style="{color: 1<=selectMonth && selectMonth<=3?'#B33115':4<=selectMonth && selectMonth<=6?'#025B93':7<=selectMonth && selectMonth<=9?'#2249A2':'#783F0F'}" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
|
||||
<image class="icon" :src="1<=selectMonth && selectMonth<=3?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDownArrow.svg':4<=selectMonth && selectMonth<=6?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/2stDownArrow.svg':7<=selectMonth && selectMonth<=9?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/3stDownArrow.svg':'https://eshangtech.com/ShopICO/ahyd-BID/newIndex/4stDownArrow.svg'"></image>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view style="width: 128rpx;height: 128rpx">
|
||||
<canvas style="width: 128rpx;height: 128rpx" canvas-id="month" id="month"/>
|
||||
<image v-if="preferPath" style="width: 128rpx;height: 128rpx" :src="preferPath"></image>
|
||||
<canvas v-else style="width: 128rpx;height: 128rpx" canvas-id="month" id="month"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -11,7 +12,9 @@ var uChartsInstance = {};
|
||||
export default {
|
||||
name: "OtherCharts",
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
preferPath:''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
success: {
|
||||
@ -49,7 +52,7 @@ export default {
|
||||
width: 64,
|
||||
height: 64,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
animation: false,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
@ -81,7 +84,27 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout( ()=>{
|
||||
this.canvasToTempImage('month')
|
||||
},100)
|
||||
},
|
||||
canvasToTempImage(id){
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId:id,
|
||||
complete:(res)=>{
|
||||
if (res.tempFilePath){
|
||||
uni.getFileSystemManager().readFile({
|
||||
filePath: res.tempFilePath,
|
||||
encoding: 'base64',
|
||||
success: res => {
|
||||
let base64 = 'data:image/png;base64,' + res.data;
|
||||
this.preferPath = base64
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},this)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view style="width: 68rpx;height: 68rpx">
|
||||
<canvas style="width: 68rpx;height: 68rpx" canvas-id="month" id="month"/>
|
||||
<image v-if="preferPath" style="width: 68rpx;height: 68rpx" :src="preferPath"></image>
|
||||
<canvas v-else style="width: 68rpx;height: 68rpx" canvas-id="month" id="month"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -11,7 +12,9 @@ var uChartsInstance = {};
|
||||
export default {
|
||||
name: "YearCharts",
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
preferPath:''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
success: {
|
||||
@ -45,7 +48,7 @@ export default {
|
||||
width: 34,
|
||||
height: 34,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
animation: false,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
@ -72,6 +75,26 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout( ()=>{
|
||||
this.canvasToTempImage('month')
|
||||
},100)
|
||||
},
|
||||
canvasToTempImage(id){
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId:id,
|
||||
complete:(res)=>{
|
||||
if (res.tempFilePath){
|
||||
uni.getFileSystemManager().readFile({
|
||||
filePath: res.tempFilePath,
|
||||
encoding: 'base64',
|
||||
success: res => {
|
||||
let base64 = 'data:image/png;base64,' + res.data;
|
||||
this.preferPath = base64
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},this)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,13 +3,20 @@
|
||||
<view class="meng" v-if="showCost || showPay|| showMonthRevenue|| showMonthExpenditure|| successRate|| thisYearSum|| nowYearSumRate|| showNetProfit|| budget|| showYearNetProfit|| revenueAll|| revenueSuccess|| revenueCostRate|| budgetSum|| incomeSuccess|| nowYearBudget|| nowYearRevenueCost|| compareYesSuccessRate|| userRevenueSmallSum|| thisMonthSum|| thisMonthRevenueRate|| thisMonthSmallSumSuccess1st|| thisMonthSmallSumSuccess2st|| thisMonthSmallSumSuccess2stTitle|| otherSmallSum"
|
||||
@click="handleShowNotice('false')"></view>
|
||||
<view class="meng" v-if="otherLeftChar || otherMonthSum ||otherThisMonthRate ||otherThisMonthSuccess" @click="handleShowNotice2('false')"></view>
|
||||
<view class="header">
|
||||
<image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png"/>
|
||||
<view class="headerTop" :style="{top: menu.top + 'px',height:menu.height + 'px'}">
|
||||
<image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
|
||||
<!-- :style="{height: ((668/750) * pageWidth + 36)+'px'}"-->
|
||||
<view class="header" >
|
||||
<!-- <image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png"/>-->
|
||||
<view class="headerTop" :style="{height:(menu.top + menu.height) + 'px'}">
|
||||
<view class="headerBox">
|
||||
<!-- <image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png"/>-->
|
||||
<view class="imageBox" :style="{height:menu.height + 'px',bottom:0}">
|
||||
<image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pageTitle" :style="{top: (menu.bottom+18) +'px'}">收支预测</view>
|
||||
<view :style="{width: '100%',height:(menu.top + menu.height) + 'px'}"></view>
|
||||
<!-- :style="{top: (menu.bottom+18) +'px'}"-->
|
||||
<view class="pageTitle" >收支预测</view>
|
||||
|
||||
<view class="headerDetail" :style="{top: (menu.bottom+68) +'px'}">
|
||||
<view class="detailBox">
|
||||
@ -83,7 +90,7 @@
|
||||
<text class="successUnit">/万元</text>
|
||||
<view class="notice" @click="handleShowNotice('showMonthExpenditure')">?
|
||||
<view class="noticeBox" v-if="showMonthExpenditure" @click.stop="handleShowNotice('showMonthExpenditure')">
|
||||
<text>本月收入:营业收入 + 营业外收入</text>
|
||||
<text>本月支出:管理费用+销售费用+财务费用+营业外支出</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -888,12 +895,15 @@ export default {
|
||||
otherMonthSum:false,// 其它收入的本月累计
|
||||
otherThisMonthRate:false,//其它收入的本月占比
|
||||
otherThisMonthSuccess:false,//其它收入的完成率
|
||||
pageWidth:0,// 手机的宽度
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
this.windowHeight = systemInfo.windowHeight
|
||||
console.log('systemInfo',systemInfo)
|
||||
this.pageWidth = systemInfo.windowWidth
|
||||
console.log('this.pageWidth',this.pageWidth)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
console.log('this.menu',this.menu)
|
||||
@ -1071,7 +1081,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
//@import '/static/public/font/stylesheet.css';
|
||||
@import '/static/public/fontRevenue/stylesheet.css';
|
||||
.main{
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
@ -1084,43 +1094,74 @@ export default {
|
||||
}
|
||||
.header{
|
||||
width: 100%;
|
||||
height: 664rpx;
|
||||
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png");
|
||||
//background-repeat: no-repeat;
|
||||
//background-size: 100% 664rpx;
|
||||
background: linear-gradient(180deg, #008EC2 0%, #26A0CA 36%, #CCE3EB 85%, #F5F5F5 100%);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
.headerBg{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
top: 0;left: 0;
|
||||
height: 564rpx;
|
||||
}
|
||||
.headerTop{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
.backIcon{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-left: 32rpx;
|
||||
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position:0 0;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
.headerBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.headerBg{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;left: 0;
|
||||
height: 564rpx;
|
||||
}
|
||||
.imageBox{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.backIcon{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.pageTitle{
|
||||
position: absolute;
|
||||
left: 32rpx;
|
||||
//position: absolute;
|
||||
//left: 32rpx;
|
||||
font-size: 56rpx;
|
||||
font-family: Alimama ShuHeiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 68rpx;
|
||||
margin-top: 24rpx;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.headerDetail{
|
||||
position: absolute;
|
||||
//position: absolute;
|
||||
margin-top: 32rpx;
|
||||
width: calc(100% - 64rpx);
|
||||
left: 32rpx;
|
||||
margin-left: 32rpx;
|
||||
//left: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
@ -1152,7 +1193,7 @@ export default {
|
||||
}
|
||||
.moneyBox{
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
//height: 300rpx;
|
||||
background: #fff;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 12rpx;
|
||||
@ -1208,14 +1249,14 @@ export default {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
.noticeBox{
|
||||
width: 60%;
|
||||
max-width: 60%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1271,7 +1312,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0px 0rpx 4rpx 3rpx #e2e2e2;
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1287,7 +1328,7 @@ export default {
|
||||
.content{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 74rpx 36rpx 0;
|
||||
padding: 24rpx 36rpx 0;
|
||||
background: #F5F5F5;
|
||||
.profitYear{
|
||||
width: 100%;
|
||||
@ -1363,7 +1404,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1427,7 +1468,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1459,7 +1500,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1519,7 +1560,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1557,7 +1598,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1650,7 +1691,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1733,7 +1774,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1790,7 +1831,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1834,7 +1875,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1904,7 +1945,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -1969,7 +2010,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -2009,7 +2050,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -2045,7 +2086,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -2088,7 +2129,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -2144,7 +2185,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
@ -2172,7 +2213,7 @@ export default {
|
||||
padding: 5px 10px;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(244, 138, 143, 0.21);
|
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(166, 158, 159, 0.3);
|
||||
z-index:9;
|
||||
}
|
||||
}
|
||||
|
||||
8
static/public/fontRevenue/stylesheet.css
Normal file
8
static/public/fontRevenue/stylesheet.css
Normal file
@ -0,0 +1,8 @@
|
||||
@font-face {
|
||||
font-family: 'Alimama ShuHeiTi';
|
||||
src:url("/static/public/fontRevenue/up9HUFeeQJsE.woff2");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
BIN
static/public/fontRevenue/up9HUFeeQJsE.woff2
Normal file
BIN
static/public/fontRevenue/up9HUFeeQJsE.woff2
Normal file
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user