ylj/ahyd_DIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
cclu 2023-08-21 15:27:32 +08:00
parent 6e1494d865
commit 74d00bbc8f
6 changed files with 149 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pages/revenue/component/otherCharts.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<view style="width: 128rpx;height: 128rpx"> <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> </view>
</template> </template>
@ -11,7 +12,9 @@ var uChartsInstance = {};
export default { export default {
name: "OtherCharts", name: "OtherCharts",
data() { data() {
return {} return {
preferPath:''
}
}, },
props: { props: {
success: { success: {
@ -49,7 +52,7 @@ export default {
width: 64, width: 64,
height: 64, height: 64,
series: data.series, series: data.series,
animation: true, animation: false,
rotate: false, rotate: false,
rotateLock: false, rotateLock: false,
background: "#FFFFFF", background: "#FFFFFF",
@ -81,6 +84,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)
}, },
} }
} }

29
pages/revenue/component/yearCharts.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<view style="width: 68rpx;height: 68rpx"> <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> </view>
</template> </template>
@ -11,7 +12,9 @@ var uChartsInstance = {};
export default { export default {
name: "YearCharts", name: "YearCharts",
data() { data() {
return {} return {
preferPath:''
}
}, },
props: { props: {
success: { success: {
@ -45,7 +48,7 @@ export default {
width: 34, width: 34,
height: 34, height: 34,
series: data.series, series: data.series,
animation: true, animation: false,
rotate: false, rotate: false,
rotateLock: false, rotateLock: false,
background: "#FFFFFF", 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)
}, },
} }
} }

119
pages/revenue/index.vue
View File

@ -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" <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> @click="handleShowNotice('false')"></view>
<view class="meng" v-if="otherLeftChar || otherMonthSum ||otherThisMonthRate ||otherThisMonthSuccess" @click="handleShowNotice2('false')"></view> <view class="meng" v-if="otherLeftChar || otherMonthSum ||otherThisMonthRate ||otherThisMonthSuccess" @click="handleShowNotice2('false')"></view>
<view class="header"> <!-- :style="{height: ((668/750) * pageWidth + 36)+'px'}"-->
<image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png"/> <view class="header" >
<view class="headerTop" :style="{top: menu.top + 'px',height:menu.height + 'px'}"> <!-- <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> <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>
<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="headerDetail" :style="{top: (menu.bottom+68) +'px'}">
<view class="detailBox"> <view class="detailBox">
@ -83,7 +90,7 @@
<text class="successUnit">/万元</text> <text class="successUnit">/万元</text>
<view class="notice" @click="handleShowNotice('showMonthExpenditure')">? <view class="notice" @click="handleShowNotice('showMonthExpenditure')">?
<view class="noticeBox" v-if="showMonthExpenditure" @click.stop="handleShowNotice('showMonthExpenditure')"> <view class="noticeBox" v-if="showMonthExpenditure" @click.stop="handleShowNotice('showMonthExpenditure')">
<text>本月收入：营业收入 + 营业外收入</text> <text>本月支出：管理费用+销售费用+财务费用+营业外支出</text>
</view> </view>
</view> </view>
</view> </view>
@ -888,12 +895,15 @@ export default {
otherMonthSum:false,// 其它收入的本月累计 otherMonthSum:false,// 其它收入的本月累计
otherThisMonthRate:false,//其它收入的本月占比 otherThisMonthRate:false,//其它收入的本月占比
otherThisMonthSuccess:false,//其它收入的完成率 otherThisMonthSuccess:false,//其它收入的完成率
pageWidth:0,// 手机的宽度
} }
}, },
onLoad(){ onLoad(){
// 获取手机参数对页面进行适配 // 获取手机参数对页面进行适配
let systemInfo = uni.getSystemInfoSync() 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.statusBarHeight = Number(systemInfo.statusBarHeight)
this.menu = uni.getMenuButtonBoundingClientRect() this.menu = uni.getMenuButtonBoundingClientRect()
console.log('this.menu',this.menu) console.log('this.menu',this.menu)
@ -1071,7 +1081,7 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
//@import '/static/public/font/stylesheet.css'; @import '/static/public/fontRevenue/stylesheet.css';
.main{ .main{
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
@ -1084,43 +1094,74 @@ export default {
} }
.header{ .header{
width: 100%; width: 100%;
height: 664rpx; box-sizing: border-box;
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png"); background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png");
//background-repeat: no-repeat; background-repeat: no-repeat;
//background-size: 100% 664rpx; background-size: 100% 100%;
background: linear-gradient(180deg, #008EC2 0%, #26A0CA 36%, #CCE3EB 85%, #F5F5F5 100%); background-position: 0 0;
.headerBg{
width: 100%;
position: relative; position: relative;
top: 0;left: 0;
height: 564rpx;
}
.headerTop{
width: 100%;
position: fixed;
display: flex;
top: 0;
align-items: center;
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{ .headerBg{
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0;left: 0; top: 0;left: 0;
height: 564rpx; height: 564rpx;
} }
.headerTop{ .imageBox{
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
}
.backIcon{ .backIcon{
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
margin-left: 32rpx; margin-left: 32rpx;
} }
} }
}
.pageTitle{ .pageTitle{
position: absolute; //position: absolute;
left: 32rpx; //left: 32rpx;
font-size: 56rpx; font-size: 56rpx;
font-family: Alimama ShuHeiTi; font-family: Alimama ShuHeiTi;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
line-height: 68rpx; line-height: 68rpx;
margin-top: 24rpx;
margin-left: 32rpx;
} }
.headerDetail{ .headerDetail{
position: absolute; //position: absolute;
margin-top: 32rpx;
width: calc(100% - 64rpx); width: calc(100% - 64rpx);
left: 32rpx; margin-left: 32rpx;
//left: 32rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 16rpx; border-radius: 16rpx;
box-sizing: border-box; box-sizing: border-box;
@ -1152,7 +1193,7 @@ export default {
} }
.moneyBox{ .moneyBox{
width: 100%; width: 100%;
height: 300rpx; //height: 300rpx;
background: #fff; background: #fff;
margin-top: 22rpx; margin-top: 22rpx;
border-radius: 12rpx; border-radius: 12rpx;
@ -1208,14 +1249,14 @@ export default {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
.noticeBox{ .noticeBox{
width: 60%; max-width: 60%;
position: absolute; position: absolute;
top: 10px; top: 10px;
display: inline-block; display: inline-block;
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1271,7 +1312,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1287,7 +1328,7 @@ export default {
.content{ .content{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 74rpx 36rpx 0; padding: 24rpx 36rpx 0;
background: #F5F5F5; background: #F5F5F5;
.profitYear{ .profitYear{
width: 100%; width: 100%;
@ -1363,7 +1404,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1427,7 +1468,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1459,7 +1500,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1519,7 +1560,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1557,7 +1598,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1650,7 +1691,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1733,7 +1774,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1790,7 +1831,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1834,7 +1875,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1904,7 +1945,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -1969,7 +2010,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -2009,7 +2050,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -2045,7 +2086,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -2088,7 +2129,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -2144,7 +2185,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }
@ -2172,7 +2213,7 @@ export default {
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border-radius: 10rpx; 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; z-index:9;
} }
} }

8
static/public/fontRevenue/stylesheet.css Normal file
View 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
View File

Binary file not shown.