新增充值功能

src/App.vue

@@ -74,6 +74,23 @@ export default {
 }
 </script>
 <style>
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 5px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.15);
+  transition: color 0.2s ease;
+}
 .el-card__body{
     padding: 0 10px !important;
 }

src/components/AppHeader.vue

@@ -25,7 +25,12 @@
                 <el-avatar fit="fill" :size="50" :src="avatar"></el-avatar>
                 <div class="nameAndIntegral">
                     <div>姓名: {{ userInfo.userName }}</div>
-                    <div>积分: <span class="blue">{{ userInfo.surplusIntegral }}</span></div>
+                    <div>
+                        积分: <span class="blue">{{ userInfo.surplusIntegral }}</span>
+                        <router-link to="/ipay">
+                            <span class="ipay-btn">充值</span>
+                        </router-link>
+                    </div>
                 </div>
             </div>
         </nav>
@@ -73,6 +78,19 @@ export default {
 .blue {
     color: #1e80ff;
 }
+.ipay-btn{
+    font-weight: normal;
+    margin-left: 10px;
+    display: inline-block;
+    color: #b87100;
+    width: 56px;
+    height: 24px;
+    line-height: 24px;
+    background: linear-gradient(270deg, #f8c883 0, #fae8d0 100%);
+    border-radius: 16px;
+    cursor: pointer;
+    text-align: center;
+}
 .header-box {
   display: flex;
   justify-content: center;