主页 账户充值 充值记录 支付结果

App.vue

@@ -24,7 +24,18 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	
+	
+	html, body {
+	  background-color:#F2F4F6;
+	  margin: 0;
+	  padding: 0;
+	}
+	// 导航栏标题文字
+	.u-title {
+		font-size: 40rpx !important
+	}
 	#__vconsole{
 		z-index: 99999;
 		position: absolute;

assets/img/antFill-account-book.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="64 64 896 896" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(24,90,198,1))">
+    <defs><linearGradient id="ik4s6tsjU23UVPQn7XCn9I1" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 448, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.4"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 0 1 8.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z" fill="url(#ik4s6tsjU23UVPQn7XCn9I1)"></path>
+    </g>
+  </svg>

assets/img/antFill-notification.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="64 64 896 896" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(0,75,23,0.67))">
+    <defs><linearGradient id="ik9jjnunU2GQS6NGKz4tjG1" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 448, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.43"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z" fill="url(#ik9jjnunU2GQS6NGKz4tjG1)"></path>
+    </g>
+  </svg>

assets/img/antOutline-alipay-circle bQiHn7m.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="64 64 896 896" width="20" height="20" style="" filter="none">
+    
+    <g>
+    <path d="M308.6 545.7c-19.8 2-57.1 10.7-77.4 28.6-61 53-24.5 150 99 150 71.8 0 143.5-45.7 199.8-119-80.2-38.9-148.1-66.8-221.4-59.6zm460.5 67c100.1 33.4 154.7 43 166.7 44.8A445.9 445.9 0 0 0 960 512c0-247.4-200.6-448-448-448S64 264.6 64 512s200.6 448 448 448c155.9 0 293.2-79.7 373.5-200.5-75.6-29.8-213.6-85-286.8-120.1-69.9 85.7-160.1 137.8-253.7 137.8-158.4 0-212.1-138.1-137.2-229 16.3-19.8 44.2-38.7 87.3-49.4 67.5-16.5 175 10.3 275.7 43.4 18.1-33.3 33.4-69.9 44.7-108.9H305.1V402h160v-56.2H271.3v-31.3h193.8v-80.1s0-13.5 13.7-13.5H557v93.6h191.7v31.3H557.1V402h156.4c-15 61.1-37.7 117.4-66.2 166.8 47.5 17.1 90.1 33.3 121.8 43.9z" fill="rgba(22,119,255,1)"></path>
+    </g>
+  </svg>

assets/img/far fa-clock.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(0,0,0,0.5))">
+    <defs><linearGradient id="ik4s6tsjU23UVPQhjfMKog1" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 256, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.4"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z" fill="url(#ik4s6tsjU23UVPQhjfMKog1)"></path>
+    </g>
+  </svg>

assets/img/fas fa-book.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(0,132,70,1))">
+    <defs><linearGradient id="ik4s6tsjU23UVPQqWmeej01" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 224, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.4"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z" fill="url(#ik4s6tsjU23UVPQqWmeej01)"></path>
+    </g>
+  </svg>

assets/img/fas fa-chart-pie.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 544 512" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(0,130,118,1))">
+    <defs><linearGradient id="ik4s6tsjU23UVPQvByGT4s1" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 272, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.4"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M527.79 288H290.5l158.03 158.03c6.04 6.04 15.98 6.53 22.19.68 38.7-36.46 65.32-85.61 73.13-140.86 1.34-9.46-6.51-17.85-16.06-17.85zm-15.83-64.8C503.72 103.74 408.26 8.28 288.8.04 279.68-.59 272 7.1 272 16.24V240h223.77c9.14 0 16.82-7.68 16.19-16.8zM224 288V50.71c0-9.55-8.39-17.4-17.84-16.06C86.99 51.49-4.1 155.6.14 280.37 4.5 408.51 114.83 513.59 243.03 511.98c50.4-.63 96.97-16.87 135.26-44.03 7.9-5.6 8.42-17.23 1.57-24.08L224 288z" fill="url(#ik4s6tsjU23UVPQvByGT4s1)"></path>
+    </g>
+  </svg>

assets/img/fas fa-exclamation-triangle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 576 512" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(182,77,0,1))">
+    <defs><linearGradient id="ik4s6tsjU23UVPQqVBCLZ31" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 288, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.4"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" fill="url(#ik4s6tsjU23UVPQqVBCLZ31)"></path>
+    </g>
+  </svg>

assets/img/fas fa-file-alt.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 384 512" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(52,0,255,0.75))">
+    <defs><linearGradient id="ik4s6tsjU23UVPQfOJymt11" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 192, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.4"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" fill="url(#ik4s6tsjU23UVPQfOJymt11)"></path>
+    </g>
+  </svg>

assets/img/iconPark-order.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="32" height="32" style="border-color: rgba(187,187,187,1);border-width: 0;border-style: solid" filter="drop-shadow(0px 2px 4px rgba(0,59,18,0.67))">
+    
+    <g>
+    <rect width="48" height="48" fill="rgba(255,255,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M33.0499 7H38C39.1046 7 40 7.89543 40 9V42C40 43.1046 39.1046 44 38 44H10C8.89543 44 8 43.1046 8 42L8 9C8 7.89543 8.89543 7 10 7H16H17V10H31V7H33.0499Z" fill="none" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linejoin="round"></path><rect x="17" y="4" width="14" height="6" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M26.9996 19L19 27.0012H29.004L21.0003 35.0018" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+    </g>
+  </svg>

assets/img/iconPark-wallet.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="32" height="32" style="border-color: rgba(187,187,187,1);border-width: 0;border-style: solid" filter="drop-shadow(0px 2px 4px rgba(0,7,142,0.78))">
+    
+    <g>
+    <rect width="48" height="48" fill="rgba(255,255,255,1)" fill-opacity="0.01" stroke="none"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M17.9821 11.9689L31.7847 4L36.3971 11.9889L17.9821 11.9689Z" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M4 14C4 12.8954 4.89543 12 6 12H42C43.1046 12 44 12.8954 44 14V42C44 43.1046 43.1046 44 42 44H6C4.89543 44 4 43.1046 4 42V14Z" fill="none" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M35.25 33H44V23H35.25C32.3505 23 30 25.2386 30 28C30 30.7614 32.3505 33 35.25 33Z" fill="none" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M44 16.5V40.5" stroke="rgba(255,255,255,1)" stroke-width="4" stroke-linecap="round" fill="none"></path>
+    </g>
+  </svg>

assets/img/if-support.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="28" height="28" style="" filter="drop-shadow(0px 2px 4px rgba(255,0,54,0.5))">
+    <defs><linearGradient id="ik4s6tsjU23UVPQd5riU3Z1" x1="0" x2="100%" y1="0" y2="0" gradientTransform="matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 16, 0)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffffff" stop-opacity="1" offset="0.4"></stop><stop stop-color="#ffffff" stop-opacity="0.6" offset="1"></stop></linearGradient></defs>
+    <g>
+    <path d="M10.624 24.192l-4.16 1.92c-0.608 0.256-1.248 0.672-1.504 1.312 0 0-0.48 1.088-1.024 2.592h11.232l0.672-4.32-3.232-3.168-1.984 1.664zM27.072 27.424c-0.256-0.672-0.896-1.056-1.536-1.312l-4.128-1.92-2.016-1.664-3.2 3.168 0.64 4.32h11.232c-0.512-1.504-0.992-2.592-0.992-2.592zM5.888 16.736h1.184c0.004 0 0.009 0 0.014 0 0.558 0 1.010-0.452 1.010-1.010 0-0.005-0-0.010-0-0.015v0.001-3.968c0-0.002 0-0.004 0-0.006 0-0.446-0.293-0.825-0.697-0.953l-0.007-0.002c0.48-4.384 3.552-6.944 8.544-7.104h0.16c4.992 0.16 8.032 2.72 8.544 7.104-0.411 0.13-0.704 0.508-0.704 0.954 0 0.002 0 0.004 0 0.006v-0 3.968c-0 0.004-0 0.009-0 0.014 0 0.558 0.452 1.010 1.010 1.010 0.005 0 0.010-0 0.015-0h1.183c0.004 0 0.009 0 0.014 0 0.558 0 1.010-0.452 1.010-1.010 0-0.005-0-0.010-0-0.015v0.001-3.968c0-0.48-0.352-0.896-0.832-0.992-0.224-2.432-1.152-4.48-2.688-5.984-1.632-1.6-3.968-2.528-6.752-2.752 0 0-0.288-0.032-0.864-0.032-0.608 0-0.896 0.032-0.896 0.032-2.784 0.224-5.12 1.152-6.752 2.752-1.536 1.504-2.464 3.552-2.688 5.984-0.48 0.096-0.832 0.512-0.832 0.992v3.968c0 0.544 0.448 1.024 1.024 1.024zM23.488 12.16c0.064-4.608-2.144-7.36-7.488-7.36s-7.52 2.752-7.488 7.36c0.096 6.656 3.264 10.592 7.488 10.592s7.424-3.936 7.488-10.592z" fill="url(#ik4s6tsjU23UVPQd5riU3Z1)"></path>
+    </g>
+  </svg>

assets/img/md-check_circle vRxbRvD.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="66" height="66" style="" filter="none">
+    
+    <g>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="rgba(51,133,255,1)"></path>
+    </g>
+  </svg>

assets/img/riFill-wechat-pay-fill fTAsMwS.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M12.36 19.559c-0.117 0.061-0.255 0.096-0.401 0.096-0.331 0-0.619-0.182-0.77-0.451l-0.002-0.004-0.057-0.127-2.424-5.331c-0.005-0.029-0.007-0.063-0.007-0.097s0.003-0.068 0.008-0.1l-0 0.004c0-0 0-0.001 0-0.001 0-0.241 0.195-0.436 0.436-0.436 0.004 0 0.008 0 0.011 0h-0.001c0.003-0 0.006-0 0.009-0 0.096 0 0.184 0.033 0.254 0.089l-0.001-0.001 2.907 2.036c0.204 0.139 0.456 0.222 0.728 0.223h0c0.002 0 0.004 0 0.006 0 0.162 0 0.317-0.032 0.457-0.091l-0.008 0.003 13.396-6c-2.628-2.894-6.405-4.704-10.605-4.704-0.102 0-0.203 0.001-0.304 0.003l0.015-0c-7.368 0-13.339 4.973-13.339 11.157 0.093 3.49 1.886 6.543 4.577 8.371l0.036 0.023c0.219 0.163 0.359 0.42 0.359 0.71 0 0.092-0.014 0.181-0.041 0.265l0.002-0.006-0.6 2.268c-0.034 0.094-0.058 0.203-0.068 0.316l-0 0.005c-0 0.003-0 0.006-0 0.009 0 0.241 0.195 0.436 0.436 0.436 0.003 0 0.007-0 0.010-0h-0c0.094-0.005 0.181-0.033 0.256-0.079l-0.002 0.001 2.907-1.687c0.213-0.131 0.457-0.201 0.708-0.203 0.132 0 0.263 0.019 0.387 0.057 1.417 0.4 2.881 0.603 4.353 0.6 7.367 0 13.347-4.972 13.347-11.107 0-0.022 0-0.048 0-0.073 0-1.891-0.545-3.655-1.486-5.143l0.023 0.040-15.509 8.928z" fill="rgba(34,172,56,1)"></path>
+    </g>
+  </svg>

assets/img/riLine-file-text-line Copy l9stN6v.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="16" height="16" style="" filter="none">
+    
+    <g>
+    <path d="M28 10.667v17.324c0 0.003 0 0.006 0 0.009 0 0.733-0.592 1.328-1.324 1.333h-21.352c-0.731 0-1.323-0.592-1.324-1.323v-24.021c0-0.716 0.599-1.323 1.336-1.323h14.66l8.004 8zM25.333 12h-6.667v-6.667h-12v21.333h18.667v-14.667zM10.667 9.333h4v2.667h-4v-2.667zM10.667 14.667h10.667v2.667h-10.667v-2.667zM10.667 20h10.667v2.667h-10.667v-2.667z" fill="rgba(255,255,255,1)"></path>
+    </g>
+  </svg>

assets/img/tabbarImg/chat-1-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(173,184,194,1)"><path d="M10 3H14C18.4183 3 22 6.58172 22 11C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3Z"></path></svg>

assets/img/tabbarImg/chat-1-fill2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(80,152,255,1)"><path d="M10 3H14C18.4183 3 22 6.58172 22 11C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3Z"></path></svg>

assets/img/tabbarImg/chat-smile-2-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(173,184,194,1)"><path d="M7.29117 20.8242L2 22L3.17581 16.7088C2.42544 15.3056 2 13.7025 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.2975 22 8.6944 21.5746 7.29117 20.8242ZM7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12H15C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12H7Z"></path></svg>

assets/img/tabbarImg/chat-smile-2-fill2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(80,152,255,1)"><path d="M7.29117 20.8242L2 22L3.17581 16.7088C2.42544 15.3056 2 13.7025 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.2975 22 8.6944 21.5746 7.29117 20.8242ZM7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12H15C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12H7Z"></path></svg>

assets/img/tabbarImg/home-wifi-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(173,184,194,1)"><path d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM7 11V13C9.76142 13 12 15.2386 12 18H14C14 14.134 10.866 11 7 11ZM7 15V18H10C10 16.3431 8.65685 15 7 15Z"></path></svg>

assets/img/tabbarImg/home-wifi-fill2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(80,152,255,1)"><path d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM7 11V13C9.76142 13 12 15.2386 12 18H14C14 14.134 10.866 11 7 11ZM7 15V18H10C10 16.3431 8.65685 15 7 15Z"></path></svg>

components/Tabbar.vue

@@ -1,103 +1,90 @@
-<template >
+<template>
 	<view>
-		<u-tabbar v-model="myCurrent" mid-button-size="35px"	 :midButton="true" :list="tabbarList" 
-		:before-switch="beforeSwitch" active-color="#1F4A99" inactive-color="#B3BED1"  ></u-tabbar>
-		
+		<u-tabbar v-model="myCurrent" :list="tabbarList" :before-switch="beforeSwitch" inactive-color="#ADB8C2" active-color="#5098FF">
+		</u-tabbar>
+
 	</view>
 </template>
 
 <script>
- 	var img1=require('@/components/riFill-hearts-fill@1x.png')
-	var img2=require('@/components/home@1x.png')
-	var img3=require('@/components/riFill-hearts-fill@.png')
-	var img4=require('@/components/home@.png')
- 	export default {
-		name:"tabbarJob",
-		props:{
+	var img1=require('@/assets/img/tabbarImg/home-wifi-fill.svg')
+	var img2=require('@/assets/img/tabbarImg/home-wifi-fill2.svg')
+	var img3=require('@/assets/img/tabbarImg/chat-1-fill.svg')
+	var img4=require('@/assets/img/tabbarImg/chat-1-fill2.svg')
+	var img5=require('@/assets/img/tabbarImg/chat-smile-2-fill.svg')
+	var img6=require('@/assets/img/tabbarImg/chat-smile-2-fill2.svg')
+	export default {
+		name: "Tabbar",
+		props: {
 			current: 0,
 			elderStatus: false
 		},
 		data() {
 			return {
-				activeColor:"#1F4A99",
-				oldindex:this.current,
-				 myCurrent:this.current,
-				 tabbarList: [
-					 {
+				oldindex: this.current,
+				myCurrent: this.current,
+				tabbarList: [{
+
+						iconPath: img1,
+						selectedIconPath: img2,
+						text: '主页 ',
+						pagePath2: "/pages/index/index",
+					},
 					 
-				 		iconPath: "home",
-				 		selectedIconPath: "home-fill",
-				 		text: '主页 ',
-						pagePath2:"/",
-						login:false,
-				 	},
 					{
-					 
 						iconPath: img3,
-						selectedIconPath: img1,
-						textImg:true,
-						text: img2,
-						text2: img4,
-						pagePath2:"/pages/staffHome/staffHome",
-						midButton:true,
-						login:true,
+						selectedIconPath: img4,
+						text: '消息',
+						pagePath2: "/pages/message/message",
 						
-					
 					},
-				 	{
-				 		iconPath: "account",
-				 		selectedIconPath: "account-fill",
-				 		text: '我的',
-						login:true,
-						pagePath2:"/pages/mine/mine",
-				 	}
-			 ],
+					
+					{
+						iconPath: img5,
+						selectedIconPath: img6,
+						text: '我的',
+						pagePath2: "/pages/mine/mine",
+					}
+				],
 			};
-			
-		},methods:{
-			setcount(c){
-				//this.myCurrent=c
+
+		},
+		methods: {
+			setcount(c) {
+				this.myCurrent = c
 			},
-			beforeSwitch(index){
-			
-				var bl=false
-				
-				if(index==this.current){
-					
+			beforeSwitch(index) {
+
+
+				if (index == this.current) {
 					return false
 				}
-				//this.myCurrent=index
-				var url =this.tabbarList[index].pagePath2;
-				
-				if(this.tabbarList[index].login){
-					var userInfo=this.carhelp.getPersonInfo()
-					if(userInfo){
-						
-					}else{
-						url="/pages/login/index"
-						bl=true	
-					}
-					
-				}
+				var url = this.tabbarList[index].pagePath2;
+
 				uni.navigateTo({
 					url: url
 				})
-			
-				
-				
+				if (index == 1) {
+					this.myCurrent = this.oldindex;
+					return false;
+				} else {
+					return true;
+				}
+
 			},
-			
+
 		},
-		mounted(){
-			
-		},destroyed(){
-			
+		mounted() {
+
+		},
+		destroyed() {
+
 		}
-		
-		
+
+
 	}
 </script>
 
 <style>
-	 
+
 </style>

pages.json

@@ -1,7 +1,7 @@
 {
 
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
+		{    
 			"path": "pages/index/index",
 			"style": {
 		
@@ -9,7 +9,61 @@
 			}
 		
 		}
-	],
+	    ,{
+            "path" : "pages/message/message",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mine/mine",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/recharge/accountRecharge",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/recharge/rechargeRecord",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/recharge/paymentResult",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/recharge/rechargeDetails",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 
 	"globalStyle": {
 		"navigationStyle": "custom", // 隐藏系统导航栏

pages/index/index.vue

@@ -1,22 +1,261 @@
 <template>
 	<view>
-		123
+		<u-navbar title="微营业厅" title-color="#fff" :background="background" back-icon-color="#ffffff"></u-navbar>
+		<!-- 账户充值 扣费记录 -->
+		<view class="function">
+			<view class="item">
+				<view class="icon">
+					<image class="img" src="@/assets/img/iconPark-wallet.svg" mode=""></image>
+				</view>
+
+				<view class="text">
+					<view class="title">
+						账户充值
+					</view>
+					<view class="infos">
+						余额 88.88
+
+					</view>
+				</view>
+			</view>
+
+			<view class="item">
+				<view class="icon icon2">
+					<image class="img" src="@/assets/img/iconPark-order.svg" mode=""></image>
+				</view>
+
+				<view class="text">
+					<view class="title">
+						扣费记录
+					</view>
+					<view class="infos">
+						查看每日用电情况
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 管家服务 -->
+		<view class="housekeeper-service">
+			<view class="title">
+				管家服务
+			</view>
+			<view class="grid">
+				<u-grid :col="4" :border="false">
+					<u-grid-item>
+						<view class="icon icon1" >
+							<image class="img" src="@/assets/img/far fa-clock.svg" mode=""></image>
+						</view>
+						<view class="grid-text">充值记录
+						</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon2">
+							<image class="img" src="@/assets/img/fas fa-file-alt.svg" mode=""></image>
+						</view>
+						<view class="grid-text">计费规则
+						</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon3">
+							<image class="img" src="@/assets/img/antFill-account-book.svg" mode=""></image>
+						</view>
+						<view class="grid-text">余额提醒
+						</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon4">
+							<image class="img" src="@/assets/img/if-support.svg" mode=""></image>
+						</view>
+						<view class="grid-text">客服热线
+						</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon5">
+							<image class="img" src="@/assets/img/antFill-notification.svg" mode=""></image>
+						</view>
+						<view class="grid-text">停电通知
+
+						</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon6">
+							<image class="img" src="@/assets/img/fas fa-exclamation-triangle.svg" mode=""></image>
+						</view>
+						<view class="grid-text">故障警报
+
+						</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon7">
+							<image class="img" src="@/assets/img/fas fa-chart-pie.svg" mode=""></image>
+						</view>
+						<view class="grid-text">用电监控
+						</view>
+					</u-grid-item>
+					<u-grid-item>
+						<view class="icon icon8">
+							<image class="img" src="@/assets/img/fas fa-book.svg" mode=""></image>
+						</view>
+						<view class="grid-text">用电常识
+						</view>
+					</u-grid-item>
+				</u-grid>
+			</view>
+		</view>
+
+       <view class="cover">
+       	<view class="text">
+       		预存余额 安心用电
+       	</view>
+       </view>
+	   <u-divider border-color="#bbbbbb" half-width="80" color="#777777">荆鹏电管家 24小时服务热线 <text class="tel">8121234</text></u-divider>
+<Tabbar :current="0" ></Tabbar>
 	</view>
+
 </template>
 
 <script>
+	import Tabbar from '@/components/Tabbar.vue'
 	export default {
+		components: {
+			Tabbar
+		},
 		data() {
 			return {
-				
+				background: {
+					backgroundColor: '#3D86FF',
+				}
+
 			}
 		},
 		methods: {
-			
+
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	//  账户充值 扣费记录 
+	.function {
+		background-color: #fff;
+		padding: 56rpx 40rpx;
+		display: flex;
+		justify-content: space-between;
+
+		.item {
+			display: flex;
+			align-items: center;
+
+			.icon {
+				width: 96rpx;
+				height: 96rpx;
+
+				border-radius: 12px;
+				background: linear-gradient(180deg, rgba(93, 155, 255, 1) 0%, rgba(0, 97, 255, 1) 100%);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				.img {
+					width: 64rpx !important;
+					height: 64rpx !important;
+
+
+				}
+			}
+
+			.icon2 {
+				background: linear-gradient(179.2deg, rgba(96, 213, 124, 1) -0.62%, rgba(0, 161, 39, 1) 97.92%);
+			}
+
+			.text {
+				margin-left: 16rpx;
+
+				.title {
+					color: rgba(51, 51, 51, 1);
+					font-size: 36rpx;
+				}
+
+				.infos {
+					color: rgba(119, 119, 119, 1);
+					font-size: 24rpx;
+					margin-top: 8rpx;
+				}
+			}
+		}
+	}
+
+	// 管家服务
+	.housekeeper-service {
+		background-color: #fff;
+		margin-top: 24rpx;
+		padding: 32rpx;
+
+		.title {
+			font-size: 36rpx;
+			color: #333333;
+		}
+
+		.grid-text {
+			margin-top: 28rpx;
+			color: rgba(51, 51, 51, 1);
+		}
+
+		.icon {
+			width: 96rpx;
+			height: 96rpx;
+			border-radius: 24rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.img {
+				width: 56rpx;
+				height: 56rpx;
+			}
+		}
+		.icon1{
+			background: linear-gradient(181.79deg, rgba(117,213,224,1) -1.13%,rgba(53,153,203,1) 94.2%);
+		}
+		.icon2{
+			background: linear-gradient(179.2deg, rgba(168,178,238,1) 6.28%,rgba(123,123,240,1) 96.94%);
+		}
+		.icon3{
+			background: linear-gradient(180deg, rgba(121,172,255,1) 0%,rgba(57,132,255,1) 100%);
+		}
+		.icon4{
+			background: linear-gradient(180.82deg, rgba(247,186,154,1) 0.58%,rgba(255,128,158,1) 97.52%);
+		}
+		.icon5{
+			background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
+		}
+		.icon6{
+			background: linear-gradient(180.29deg, rgba(255,214,125,1) 0.9%,rgba(255,150,0,1) 100.4%);
+		}
+		.icon7{
+			background: linear-gradient(178.44deg, rgba(122,232,227,1) 3.96%,rgba(57,182,182,1) 100.6%);
+		}
+		.icon8{
+			background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
+		}
+	}
+
+.cover{
+	background: radial-gradient( at 100% 100%, rgba(194,255,216,1) 3%,rgba(138,182,232,1) 39%,rgba(82,110,248,1) 100%);
+	color: #ffffff;
+	text-align: center;
+	padding: 40rpx 0;
+	margin: 24rpx 0;
+	.text{
+		font-size:64rpx;
+		// box-shadow: 0px 4px 12px 0px  rgba(0, 0, 0, 0.2);
+		text-align: center;
+	}
+}
+.tel{
+	color: #1677FF;
+	margin-left: 16rpx;
+}
 
-</style>
+</style>

pages/message/message.vue

@@ -0,0 +1,28 @@
+<template>
+	<view>
+		message
+		
+		<Tabbar :current="1" ></Tabbar>
+	</view>
+</template>
+
+<script>
+	import Tabbar from '@/components/Tabbar.vue'
+	export default {
+		components: {
+			Tabbar
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/mine/mine.vue

@@ -0,0 +1,27 @@
+<template>
+	<view>
+		mine
+		<Tabbar :current="2" ></Tabbar>
+	</view>
+</template>
+
+<script>
+	import Tabbar from '@/components/Tabbar.vue'
+	export default {
+		components: {
+			Tabbar
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/recharge/accountRecharge.vue

@@ -0,0 +1,361 @@
+<template>
+	<view>
+		<u-navbar title="账户充值"  title-color="#101010" ></u-navbar>
+		<view class="main">
+			<view class="headline">
+				<view class="title-left">
+					<view class="icon">
+						<image class="icon1" src="../../assets/img/PEokWS2@1x.png" mode=""></image>
+					</view>
+					<view class="text">
+						账户充值
+
+					</view>
+				</view>
+				<view class="title-right">
+					<view class="icon">
+						<image class="icon2" src="../../assets/img/riLine-file-text-line Copy l9stN6v.svg" mode=""></image>
+					</view>
+					<view class="text">
+						历史账单
+					</view>
+				</view>
+			</view>
+			<view class="content">
+				<!-- 可用余额 -->
+				<view class="balance">
+					<view class="balance-left">
+						可用余额(元)
+					</view>
+					<view class="balance-right">
+						88.88
+					</view>
+				</view>
+				<!-- 提示 有余额-->
+				
+				<view class="hint">
+					有余额，可提前充值
+				</view>
+				<!-- 提示 无余额 已欠费 -->
+				<view class="hint hint2">
+					已扣完，请尽快缴费
+				</view>
+				<!-- 租户信息 -->
+				<view class="infos">
+					<view class="item">
+						<view class="item-title">
+							租户信息
+						</view>
+						
+						<view class="item-value">
+							3~6楼联通公司
+						</view>
+					</view>
+					
+					<view class="item">
+						<view class="item-title">
+							户号
+						</view>
+						
+						<view class="item-value">
+							00880088
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							联系人
+						</view>
+						
+						<view class="item-value">
+							周琼
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							缴费单位
+						</view>
+						
+						<view class="item-value">
+							湖北荆鹏集团有限公司
+						</view>
+					</view>
+				</view>
+				<!-- 缴费金额 -->
+				<view class="payment-amount">
+					<view class="title">
+						缴费金额
+					</view>
+					<view class="amount-options">
+						<view class="options-item chosen">
+							100元
+						</view>
+						<view class="options-item">
+							200元
+						</view>
+						<view class="options-item">
+							500元
+						</view>
+						<view class="options-item">
+							1000元
+						</view>
+						<view class="options-item">
+							2000元
+						</view>
+						<view class="options-item">
+							5000元
+						</view>
+					</view>
+				</view>
+				<!-- 输入金额 -->
+				<view class="input-amount">
+					<view class="symbol">
+						￥
+					</view>
+					<input class="input" type="text" placeholder="点击输入缴费金额">
+				</view>
+				<!-- 支付方式 -->
+				<view class="payment-way">
+					<view class="title">
+						支付方式
+					</view>
+					<view class="way">
+						<view class="way-item">
+							<view class="way-name">
+								<view class="icon">
+									<image class="img" src="../../assets/img/riFill-wechat-pay-fill fTAsMwS.svg" mode=""></image>
+								</view>
+								<view class="text">
+									微信支付
+								</view>
+							</view>
+							<view class="way-radio">
+								<label class="radio">
+									<radio value="" /><text></text>
+								</label>
+							</view>
+						</view>
+						
+						<view class="way-item">
+							<view class="way-name">
+								<view class="icon">
+									<image class="img" src="../../assets/img/antOutline-alipay-circle bQiHn7m.svg" mode=""></image>
+								</view>
+								<view class="text">
+									支付宝
+								</view>
+							</view>
+							<view class="way-radio">
+								<label class="radio">
+									<radio value="" /><text></text>
+								</label>
+							</view>
+						</view>
+						
+					</view>
+				</view>
+				<!-- 按钮 -->
+				<button class="btn" >立即缴费</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		padding-bottom: 50px;
+	}
+	.main{
+		margin: 24rpx;
+		overflow: hidden;
+		.headline{
+			background: linear-gradient(90deg, rgba(120,175,247,1) 0%,rgba(39,116,226,1) 100%);
+			color: #fff;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding:24rpx;
+			.title-left{
+				display: flex;
+				align-items: center;
+				font-size: 36rpx;
+				.icon1{
+					width: 56rpx;
+					height: 56rpx;
+					margin-right: 8rpx;
+					vertical-align: middle;
+				}
+			}
+			.title-right{
+				display: flex;
+				font-size: 32rpx;
+				line-height: 32rpx;
+				.icon2{
+					width: 32rpx;
+					height: 32rpx;
+					margin-right: 8rpx;
+					
+				}
+			}
+			
+		}
+		
+		.content{
+			border-radius: 8px 8px 0 0 ;
+			margin-top: -8rpx;
+			z-index: 999;
+			background-color: #fff;
+			padding: 40rpx 32rpx;
+			// 可用余额
+			.balance{
+				display: flex;
+				justify-content: space-between;
+				
+				.balance-left{
+					color: rgb(48,48,48);
+					font-size: 36rpx;
+					line-height: 40px;
+				}
+				.balance-right{
+					color: rgb(48,48,48);
+					font-size: 80rpx;
+				}
+			}
+			// 提示
+			.hint{
+				font-size: 24rpx;
+				color: #1677FF;
+				margin-top: 16rpx;
+				text-align: right;
+				padding-bottom: 32rpx;
+				border-bottom: 1px solid rgba(244,244,244,1);
+			}
+			.hint2{
+				color: #E60012;
+			}
+			// 租户信息
+			.infos{
+				border-bottom: 1px solid rgba(244,244,244,1);
+				margin-top: 32rpx;
+				padding-bottom: 32rpx;
+				.item{
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 24rpx;
+					
+					.item-title{
+						color: rgb(119,119,119);
+					}
+					.item-value{
+						color: rgb(48,48,48);
+					}
+				}
+			}
+			// 缴费金额
+			.payment-amount{
+				margin-top: 32rpx;
+				.title{
+					color: rgb(48,48,48);
+					font-size: 36rpx;
+				}
+				.amount-options{
+					margin-top: 32rpx;
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+					.options-item{
+						width: 200rpx;
+						height: 80rpx;
+						line-height: 80rpx;
+						border-radius: 4px;
+						text-align: center;
+						background-color: rgba(242,242,242,1);
+						color: rgba(16,16,16,1);
+						font-size: 32rpx;
+						margin-bottom: 20rpx;
+					}
+					.chosen{
+						background-color: rgba(22,119,255,1);
+						color: rgba(255,255,255,1);
+					}
+				}
+			}
+			// 输入金额
+			.input-amount{
+				margin-top: 24rpx;
+				display: flex;
+				font-size: 48rpx;
+				height: 100rpx;
+				line-height: 100rpx;
+				.symbol{
+					margin-right: 32rpx;
+				}
+				.input{
+					height: 100rpx;
+					font-size: 48rpx;
+					color: rgba(204,204,204,1);
+				}
+				/deep/.uni-input-placeholder{
+					color: rgba(204,204,204,1);
+				}
+			}
+		
+		
+		// 支付方式
+		.payment-way{
+			margin-top: 24rpx;
+			.title{
+				color: rgb(48,48,48);
+				font-size: 36rpx;
+			}
+			.way{
+				margin-top: 24rpx;
+				.way-item{
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-bottom: 24rpx;
+					.way-name{
+						display: flex;
+						align-items: center;
+						color: rgb(51,51,51);
+						.img{
+							width: 48rpx;
+							height: 48rpx;
+							vertical-align: middle;
+							margin-right: 16rpx;
+						}
+					}
+					/deep/.uni-radio-input{
+						width: 40rpx;
+						height: 40rpx;
+					}
+				}
+			}
+		}
+		// 按钮
+		.btn{
+			height: 96rpx;
+			border-radius: 50px;
+			background-color: rgba(51,133,255,1);
+			color: rgba(255, 255, 255, 1);
+			font-size: 36rpx;
+			margin-top: 48rpx;
+		}
+		
+		}
+	}
+
+</style>

pages/recharge/paymentResult.vue

@@ -0,0 +1,139 @@
+<template>
+	<view>
+		<u-navbar title="支付结果"  title-color="#101010" ></u-navbar>
+		<view class="success-icon">
+			<image class="img" src="../../assets/img/md-check_circle vRxbRvD.svg" mode=""></image>
+		</view>
+		<view class="success-text">
+			支付成功
+
+		</view>
+		<!-- 支付详情 -->
+		<view class="payment-infos">
+			<view class="item">
+				<view class="item-title">
+					充值金额
+				</view>
+				<view class="item-value">
+					1000元
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="item-title">
+					付款方式
+				</view>
+				<view class="item-value">
+					微信支付
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="item-title">
+					订单号
+				</view>
+				<view class="item-value">
+					T20230816112557708460925
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="item-title">
+					创建时间
+				</view>
+				<view class="item-value">
+					2023-08-20 10:29:00
+				</view>
+				
+			</view>
+			<view class="item">
+				<view class="item-title">
+					支付时间
+				</view>
+				<view class="item-value">
+					2023-08-20 10:29:30
+				</view>
+				
+			</view>
+		</view>
+		<!-- 按钮 -->
+		<view class="btns">
+			<button class="btn1">完成</button>
+			<button class="btn2">缴费记录</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		background-color: #fff;
+	}
+	.success-icon{
+		width: 132rpx;
+		height: 132rpx;
+		margin: 48rpx auto; 
+		.img{
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.success-text{
+		color: rgba(51,51,51,1);
+		font-size: 48rpx;
+		text-align: center;
+	}
+	// 支付详情
+	.payment-infos{
+		margin-top: 64rpx;
+		padding: 0 80rpx;
+		.item{
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 24rpx;
+			.item-title{
+				color: rgb(119,119,119);
+			}
+			.item-value{
+				color: rgb(51,51,51);
+			}
+		}
+	}
+	// 按钮
+	.btns{
+		display: flex;
+		padding: 0 80rpx;
+		margin-top: 80rpx;
+		.btn1{
+			width: 280rpx;
+			height: 80rpx;
+			background-color: rgba(255,255,255,1);
+			color: rgba(51,51,51,1);
+			font-size: 32rpx;
+			border-radius: 50px;
+			border: 1px solid rgba(223,223,223,1);
+		}
+		.btn2{
+			width: 280rpx;
+			height: 80rpx;
+			border-radius: 50px;
+			background-color: rgba(22,119,255,1);
+			color: rgba(255,255,255,1);
+			font-size: 32rpx;
+			border: 0px solid rgba(187,187,187,1);
+		}
+	}
+
+</style>

pages/recharge/rechargeDetails.vue

@@ -0,0 +1,157 @@
+<template>
+	<view>
+		<u-navbar title="充值详情"  title-color="#101010" ></u-navbar>
+		<view class="background">
+			<view class="recharge-details">
+				<view class="headline">
+					电费充值
+				</view>
+				<view class="sum">
+					1000.00
+				</view>
+				<view class="state">
+					支付成功
+				</view>
+				<view class="details">
+					<view class="item">
+						<view class="item-title">
+							用户信息
+						</view>
+						<view class="item-value">
+							3~6楼联通公司
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							户号
+						</view>
+						<view class="item-value">
+								00880088
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							联系人
+						</view>
+						<view class="item-value">
+							周琼
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							缴费单位
+						</view>
+						<view class="item-value">
+							湖北荆鹏集团有点公司
+						</view>
+					</view>
+				</view>
+				
+				<view class="details">
+					<view class="item">
+						<view class="item-title">
+							付款方式
+						</view>
+						<view class="item-value">
+							微信支付
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							订单号
+						</view>
+						<view class="item-value">
+					T20230816112557708460925
+								
+								
+								
+								
+
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							创建时间
+						</view>
+						<view class="item-value">
+							2023-08-20 10:29:00
+						</view>
+					</view>
+					<view class="item">
+						<view class="item-title">
+							支付时间
+						</view>
+						<view class="item-value">
+							2023-08-20 10:29:00
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.background{
+		position: relative;
+		height: 200px;
+		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
+		.recharge-details{
+			position: absolute;
+			top: 24rpx;
+			left: 32rpx;
+			right: 32rpx;
+			background-color: #fff;
+			border-radius: 8px;
+			padding: 40rpx 32rpx;
+			text-align: center;
+			.headline{
+				color: rgb(16,16,16);
+				font-size: 36rpx;
+				
+			}
+			.sum{
+				color: rgb(16,16,16);
+				font-size: 48rpx;
+				margin-top: 32rpx;
+
+			}
+			.state{
+				color: rgb(56,158,13);
+				margin-top: 8rpx;
+			}
+			.details{
+				margin-top: 40rpx;
+				padding-top: 40rpx;
+				border-top: 1px solid rgba(241,241,241,1);
+				.item{
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom:16rpx;
+					.item-title{
+						color: rgb(119,119,119);
+					}
+					.item-value{
+						color: rgb(48,48,48);
+					}
+				}
+			}
+		}
+	}
+
+</style>

pages/recharge/rechargeRecord.vue

@@ -0,0 +1,139 @@
+<template>
+	<view>
+		<u-navbar title="充值记录"  title-color="#101010" ></u-navbar>
+		<!-- 折线图 -->
+		<view class="chart-box">
+			<view class="title">
+				1月电费共支出
+			</view>
+			<view class="sum">
+				1000.00<text class="unit">元</text>
+			</view>
+			<view class="chart">
+				<image class="img" src="../../assets/img/jVzkNKE@1x.png" mode=""></image>
+			</view>
+			
+		</view>
+<!-- 标签 -->
+			<view class="tabs">
+				<view class="tabs-item">
+					全部类型<u-icon size="24" name="arrow-down" color="#B6BBB8"></u-icon>
+				</view>
+				<view class="tabs-item">
+					全部时间<u-icon size="24" name="arrow-down" color="#B6BBB8"></u-icon>
+				</view>
+			</view>
+			<!-- 记录 -->
+			<view class="records" v-for="item in 2">
+				<view class="time">
+					01月  支出  1000.00元
+
+				</view>
+				<view class="details">
+					<view class="details-title">
+						<view class="name">
+							电费充值-联通公司-荆鹏软件园
+						</view>
+						<view class="record-time">
+							01-07 10:00 420667788991100
+						</view>
+					</view>
+					<view class="sum">
+						1000.00
+
+					</view>
+				</view>
+				
+			</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// 折线图
+	.chart-box{
+		padding: 24rpx 32rpx;
+		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(255,255,255,1) 100%);
+	
+	 .title{
+		 color: rgb(16,16,16);
+	 }
+	 .sum{
+		 color: rgb(51,51,51);
+		 font-size: 64rpx;
+		 margin-top: 16rpx;
+		 .unit{
+		 		 color: rgb(16,16,16);
+				 font-size: 28rpx;
+				 margin-left: 8rpx;
+		 }
+	 }
+	 .chart{
+		 width: 100%;
+		 height: 240rpx;
+		 margin-top: 8rpx;
+		 .img{
+			 width: 100%;
+			 height: 100%;
+		 }
+	 }
+	 
+	}
+	// 标签
+	.tabs{
+		display: flex;
+		justify-content: space-between;
+		height: 96rpx;
+		line-height: 96rpx;
+		background-color: #fff;
+		border-top: 1px solid rgba(241,241,241,1);
+		.tabs-item{
+			width: 50%;
+			text-align: center;
+		}
+	}
+
+// 记录
+.records{
+	.time{
+		padding: 24rpx 32rpx;
+		color: rgba(119,119,119,1);
+		font-size: 32rpx;
+	}
+	.details{
+		background-color: #fff;
+		padding: 32rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.details-title{
+			.title{
+				color: rgba(51,51,51,1);
+				font-size: 32rpx;
+			}
+			.record-time{
+				color: rgb(153,153,153);
+				font-size: 24rpx;
+				
+				margin-top: 8rpx;
+			}
+		}
+		.sum{
+			color: rgb(16,16,16);
+			font-size: 40rpx;
+		}
+	}
+}
+</style>