样式调整

pages/index/index.vue

@@ -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>
+            </view> 
-          </picker>
+          </picker> 
         </view> 
       </div>
 

pages/revenue/component/otherCharts.vue

@@ -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>

pages/revenue/component/yearCharts.vue

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

pages/revenue/index.vue

@@ -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">
+<!--    :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"/>-->
-        <image @click="handleBack" class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
+      <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 :style="{width: '100%',height:(menu.top + menu.height) + 'px'}"></view>
-      <view class="pageTitle" :style="{top: (menu.bottom+18) +'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;
+    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;
-    position: relative;
     .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{
+      background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/revenueBox/revenyeBg.png");
-        width: 48rpx;
+      background-repeat: no-repeat;
-        height: 48rpx;
+      background-size: 100% auto;
-        margin-left: 32rpx;
+      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;
+      //position: absolute;
-      left: 32rpx;
+      //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;
                 }
               }

static/public/fontRevenue/stylesheet.css

@@ -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;
+}
+