顶部样式修改

src/components/balance/BalanceHead.tsx

@@ -26,17 +26,20 @@ export default function BalanceHead() {
             <div className="balance" onClick={() => {
                 // console.log('查看余额')
                 // setMoneyModal(true)
-            }}>￥{globalContext.user.balance}
+            }}>
+                {/* ￥ */}
+                {/* <img src={moneyImg} alt="" width={17} height={19} style={{marginRight:10}}/> */}
+                {globalContext.user.balance}
                 <div className='transparentBox'></div>
                 <div className='moneyModal'>
                     <div className='moneyModal-box'>
                         <div className='moneyModal-triangle'></div>
-                        <div className='moneyModal-title' onClick={()=>{
+                        <div className='moneyModal-title' onClick={() => {
                             setCapitalModal(true)
                         }}>
-                            <img src={capitalImg} style={{marginTop:1}} width={15} height={20} alt="" />
+                            <img src={capitalImg} style={{ marginTop: 1 }} width={15} height={20} alt="" />
                             <div style={{
-                                marginLeft:10,
+                                marginLeft: 10,
                             }}>
                                 资金流水
                             </div>
@@ -45,14 +48,14 @@ export default function BalanceHead() {
                             width: 68,
                             height: 1,
                             background: '#EAEAEA',
-                            marginLeft:18
+                            marginLeft: 18
                         }}></div>
-                        <div className='moneyModal-title' onClick={()=>{
+                        <div className='moneyModal-title' onClick={() => {
                             setRecordModal(true)
                         }}>
-                            <img src={recordImg}  style={{marginTop:1}} width={20} height={20} alt="" />
+                            <img src={recordImg} style={{ marginTop: 1 }} width={20} height={20} alt="" />
                             <div style={{
-                                marginLeft:5,
+                                marginLeft: 5,
                             }}>
                                 分账记录
                             </div>

src/components/balance/balance-head.css

@@ -15,12 +15,13 @@
 }
 
 .balance-head .balance {
-    font-size: 18px;
+    font-size: 20px;
     color: #f78e4c;
     margin-top: 8px;
     cursor: pointer;
     /* background-color: pink; */
     position: relative;
+    font-weight: 700;
 }
 
 .moneyModal {

src/components/recharge/recharge-head.css

@@ -10,5 +10,6 @@
     font-weight: 300;
     font-size: 16px;
     color: #FFFFFF;
-    margin-left: 43px;
+    /* margin-left: 43px; */
+    margin-left: 20px;
 }

src/layout/head/Head.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
 import BalanceHead from '../../components/balance/BalanceHead.tsx';
 import RechargeHead from '../../components/recharge/RechargeHead.tsx';
 import { Dropdown, MenuProps, message, Modal, Space, Spin, Input } from "antd";
-import { DownOutlined, UserOutlined, KeyOutlined, LogoutOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined } from "@ant-design/icons";
+import { DownOutlined, UserOutlined, QuestionCircleOutlined,KeyOutlined, LogoutOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined } from "@ant-design/icons";
 import { useContext, useEffect, useState } from "react";
 import { put, get, post } from "../../util/AjaxUtils.ts";
 import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
@@ -22,6 +22,8 @@ import MyOrder from '../../components/myOrder/MyOrder.tsx'
 export default function Head() {
     // 邀请码弹窗
     const [invitationModal, setinvitationModal] = useState(false)
+    // 邀请码弹窗加载
+    const [isLoading,setisLoading] =  useState(false)
     // 解除绑定邀请码弹窗
     // const [relieveModal, setRelieveModal] = useState(false)
     // 申请的邀请码
@@ -52,6 +54,9 @@ export default function Head() {
         get<any>({
             messageApi,
             url: '/api/ic/get/self',
+            onBefore() {
+                setisLoading(true)
+            },
             onSuccess({ data }) {
                 console.log(data);
                 setInvNum(data.ic)
@@ -60,6 +65,9 @@ export default function Head() {
                 if (data.ic == '') {
                     getIcStatus()
                 }
+            },
+            onFinally() {
+                setisLoading(false)
             }
         })
     }
@@ -371,22 +379,33 @@ export default function Head() {
                     {/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}
 
                     <div className="right">
+
+                        {/* <div className='head-nav' onClick={() => {
+                            window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程')
+                        }}>
+                            <QuestionCircleOutlined />
+                        </div> */}
+                        {/* <div className='headLine'></div> */}
+                        <BalanceHead />
+                        {/* <div className='headLine'></div> */}
+                        <RechargeHead />
+                        <div className='headLine'></div>
                         <div className='invitationButton' onClick={() => {
                             setinvitationModal(true)
                             getIc()
                         }}>
                             邀请码
                         </div>
-                        <div className='head-nav' onClick={() => {
+                        <div className='headLine'></div>
+                        <div className='head-nav' title='系统操作流程' onClick={() => {
                             window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程')
                         }}>
-                            系统操作流程
+                            <QuestionCircleOutlined />
                         </div>
-                        <BalanceHead />
+                        <div className='headLine'></div>
-                        <RechargeHead />
                         {/*<MessageHead/>*/}
-                        <div style={{ display: 'flex', alignContent: 'center', padding: '0 10px', cursor: 'pointer' }}>
+                        <div style={{ display: 'flex', alignContent: 'center', padding: '0', cursor: 'pointer' }}>
-                            <div style={{ width: '50px', height: '50px', borderRadius: '25px', marginLeft: '20px', marginRight: '10px' }} >
+                            <div style={{ width: '50px', height: '50px', borderRadius: '25px', marginLeft: '', marginRight: '10px' }} >
                                 <img src={userImg} alt="" width={50} height={50} />
                             </div>
                             <Dropdown menu={{
@@ -534,6 +553,7 @@ export default function Head() {
                     setInvNum('')
 
                 }}>
+                <Spin tip="加载中..." spinning={isLoading}>
                     <div className='invitation-box'>
                         <div className='invBox-top'>
                             <div className='invBox-title'>
@@ -624,6 +644,7 @@ export default function Head() {
 
                         </div>
                     </div>
+                </Spin>
             </Modal>
             {/* <Modal title="提示"
                 okText="确认"

src/layout/head/head.css

@@ -24,9 +24,10 @@
 }
 
 .head-nav {
-    margin-right: 50px;
+    /* margin-right: 50px; */
+    /* margin-right: 20px; */
     color: #f78e4c;
-    font-size: 16px;
+    font-size: 28px;
     cursor: pointer;
 }
 
@@ -93,16 +94,17 @@
 }
 
 .invitationButton {
-    width: 81px;
+    /* width: 81px; */
     height: 36px;
-    background: linear-gradient(79deg, #FFB020 0%, #FF6508 100%);
+    /* background: linear-gradient(79deg, #FFB020 0%, #FF6508 100%); */
     border-radius: 27px;
     text-align: center;
     line-height: 36px;
     font-weight: 300;
     font-size: 16px;
-    color: #FFFFFF;
+    color: #FF9F08;
-    margin-right: 20px;
+    font-weight: 700;
+    /* margin-left: 20px; */
     cursor: pointer;
 }
 
@@ -278,3 +280,10 @@
     text-decoration-line: underline;
     cursor: pointer;
 }
+.headLine{
+    height: 20px;
+    width: 1px;
+    background-color: rgb(218, 218, 218);
+    margin-left: 10px;
+    margin-right: 10px;
+}