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>
<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,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>
<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)
},
}
}

117
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"
@click="handleShowNotice('false')"></view>
<view class="meng" v-if="otherLeftChar || otherMonthSum ||otherThisMonthRate ||otherThisMonthSuccess" @click="handleShowNotice2('false')"></view>
<!-- :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="{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>
</view>
<view class="pageTitle" :style="{top: (menu.bottom+18) +'px'}">收支预测</view>
</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="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%);
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: 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{
width: 100%;
position: absolute;
top: 0;left: 0;
height: 564rpx;
}
.headerTop{
.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
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.