Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

顶部样式修改

Browse Source
This commit is contained in:
xixi 2024-08-12 17:15:23 +08:00
parent 7d025b74ee
commit f7a43df452
6 changed files with 129 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/balance/BalanceHead.tsx
View File

@ -26,17 +26,20 @@ export default function BalanceHead() {
<div className="balance" onClick={() => { <div className="balance" onClick={() => {
// console.log('查看余额') // console.log('查看余额')
// setMoneyModal(true) // 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='transparentBox'></div>
<div className='moneyModal'> <div className='moneyModal'>
<div className='moneyModal-box'> <div className='moneyModal-box'>
<div className='moneyModal-triangle'></div> <div className='moneyModal-triangle'></div>
<div className='moneyModal-title' onClick={()=>{ <div className='moneyModal-title' onClick={() => {
setCapitalModal(true) 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={{ <div style={{
marginLeft:10, marginLeft: 10,
}}> }}>
资金流水 资金流水
</div> </div>
@ -45,14 +48,14 @@ export default function BalanceHead() {
width: 68, width: 68,
height: 1, height: 1,
background: '#EAEAEA', background: '#EAEAEA',
marginLeft:18 marginLeft: 18
}}></div> }}></div>
<div className='moneyModal-title' onClick={()=>{ <div className='moneyModal-title' onClick={() => {
setRecordModal(true) 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={{ <div style={{
marginLeft:5, marginLeft: 5,
}}> }}>
分账记录 分账记录
</div> </div>

3
src/components/balance/balance-head.css
View File

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

3
src/components/recharge/recharge-head.css
View File

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

175
src/layout/head/Head.tsx
View File

@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
import BalanceHead from '../../components/balance/BalanceHead.tsx'; import BalanceHead from '../../components/balance/BalanceHead.tsx';
import RechargeHead from '../../components/recharge/RechargeHead.tsx'; import RechargeHead from '../../components/recharge/RechargeHead.tsx';
import { Dropdown, MenuProps, message, Modal, Space, Spin, Input } from "antd"; 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 { useContext, useEffect, useState } from "react";
import { put, get, post } from "../../util/AjaxUtils.ts"; import { put, get, post } from "../../util/AjaxUtils.ts";
import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts"; import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
@ -22,6 +22,8 @@ import MyOrder from '../../components/myOrder/MyOrder.tsx'
export default function Head() { export default function Head() {
// 邀请码弹窗 // 邀请码弹窗
const [invitationModal, setinvitationModal] = useState(false) const [invitationModal, setinvitationModal] = useState(false)
// 邀请码弹窗加载
const [isLoading,setisLoading] = useState(false)
// 解除绑定邀请码弹窗 // 解除绑定邀请码弹窗
// const [relieveModal, setRelieveModal] = useState(false) // const [relieveModal, setRelieveModal] = useState(false)
// 申请的邀请码 // 申请的邀请码
@ -52,6 +54,9 @@ export default function Head() {
get<any>({ get<any>({
messageApi, messageApi,
url: '/api/ic/get/self', url: '/api/ic/get/self',
onBefore() {
setisLoading(true)
},
onSuccess({ data }) { onSuccess({ data }) {
console.log(data); console.log(data);
setInvNum(data.ic) setInvNum(data.ic)
@ -60,6 +65,9 @@ export default function Head() {
if (data.ic == '') { if (data.ic == '') {
getIcStatus() getIcStatus()
} }
},
onFinally() {
setisLoading(false)
} }
}) })
} }
@ -371,22 +379,33 @@ export default function Head() {
{/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */} {/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}
<div className="right"> <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={() => { <div className='invitationButton' onClick={() => {
setinvitationModal(true) setinvitationModal(true)
getIc() getIc()
}}> }}>
邀请码 邀请码
</div> </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=系统操作流程') window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=c0c5683a-bef3-40c3-8395-900a362ea234&title=系统操作流程')
}}> }}>
系统操作流程 <QuestionCircleOutlined />
</div> </div>
<BalanceHead /> <div className='headLine'></div>
<RechargeHead />
{/*<MessageHead/>*/} {/*<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} /> <img src={userImg} alt="" width={50} height={50} />
</div> </div>
<Dropdown menu={{ <Dropdown menu={{
@ -534,96 +553,98 @@ export default function Head() {
setInvNum('') setInvNum('')
}}> }}>
<div className='invitation-box'> <Spin tip="加载中..." spinning={isLoading}>
<div className='invBox-top'> <div className='invitation-box'>
<div className='invBox-title'> <div className='invBox-top'>
我的邀请码 <div className='invBox-title'>
</div> 我的邀请码
<div className='invBox-line'></div>
<div className='invBox-btn' onClick={() => {
getInvNum()
}} style={{ display: invNum || icStatus ? 'none' : 'block' }}>
点击申请
</div>
<div className='invBox-btnTwo' style={{ display: icStatus == 'PENDING' ? 'block' : 'none' }}>
正在申请中
</div>
<div className='invBox-btnthree' style={{ display: icStatus == 'REJECTED' ? 'block' : 'none' }}>
<div className='errorBox'>
<div className='errorBox-title'> 申请失败!</div>
<div className='errorBox-btn' onClick={() => {
getInvNum()
}}>重新申请</div>
</div> </div>
<div className='invBox-line'></div>
</div> <div className='invBox-btn' onClick={() => {
<div className='invBox-Num' style={{ display: invNum ? 'block' : 'none' }}> getInvNum()
<div className='invNum-box'> }} style={{ display: invNum || icStatus ? 'none' : 'block' }}>
<div className='invNum'> 点击申请
{invNum} </div>
<div className='invBox-btnTwo' style={{ display: icStatus == 'PENDING' ? 'block' : 'none' }}>
正在申请中
</div>
<div className='invBox-btnthree' style={{ display: icStatus == 'REJECTED' ? 'block' : 'none' }}>
<div className='errorBox'>
<div className='errorBox-title'> 申请失败!</div>
<div className='errorBox-btn' onClick={() => {
getInvNum()
}}>重新申请</div>
</div> </div>
<div className='copyBtn' onClick={() => {
copyInvNum() </div>
}}> <div className='invBox-Num' style={{ display: invNum ? 'block' : 'none' }}>
复制 <div className='invNum-box'>
<div className='invNum'>
{invNum}
</div>
<div className='copyBtn' onClick={() => {
copyInvNum()
}}>
复制
</div>
</div> </div>
</div> </div>
</div> </div>
</div> {/* <div style={{ display: icRebateRatio ? 'block' : 'none' }}> */}
{/* <div style={{ display: icRebateRatio ? 'block' : 'none' }}> */} <div className='invBox-bot'>
<div className='invBox-bot'> <div className='invBox-tips' >
<div className='invBox-tips' > {icRebateRatio ? `邀请码分享给他人，即可获得${icRebateRatio}%佣金` : '邀请码分享给他人，即可获得佣金'}
{icRebateRatio ? `邀请码分享给他人，即可获得${icRebateRatio}%佣金` : '邀请码分享给他人，即可获得佣金'} {/* 邀请码分享给他人，即可获得{icRebateRatio}%佣金 */}
{/* 邀请码分享给他人，即可获得{icRebateRatio}%佣金 */}
</div> </div>
{/* <div className='invBox-tips'> {/* <div className='invBox-tips'>
失败的原因可能是XXXXXX导致,如有疑问请您咨询客服人员 失败的原因可能是XXXXXX导致,如有疑问请您咨询客服人员
</div> */} </div> */}
</div>
{/* </div> */}
</div>
<div className='invitation-box'>
<div className='invBox-top'>
<div className='invBox-title' style={{ fontSize: '24px' }}>
他人邀请码
</div> </div>
<div className='invBox-line'></div> {/* </div> */}
<div className='invBox-input' style={{ display: bindingInvNum ? 'none' : 'block' }}> </div>
<div className='invInput'> <div className='invitation-box'>
<Input value={inInvNum} style={{ width: 261, height: 60, borderRadius: 25, fontSize: 24, textAlign: 'center' }} onChange={(e) => { <div className='invBox-top'>
setInInvNum(e.target.value) <div className='invBox-title' style={{ fontSize: '24px' }}>
}} /> 他人邀请码
<div className='invImg' onClick={() => { </div>
postInvNum() <div className='invBox-line'></div>
}}> <div className='invBox-input' style={{ display: bindingInvNum ? 'none' : 'block' }}>
<img src={inv} alt="" style={{ width: 31, height: 30 }} /> <div className='invInput'>
<Input value={inInvNum} style={{ width: 261, height: 60, borderRadius: 25, fontSize: 24, textAlign: 'center' }} onChange={(e) => {
setInInvNum(e.target.value)
}} />
<div className='invImg' onClick={() => {
postInvNum()
}}>
<img src={inv} alt="" style={{ width: 31, height: 30 }} />
</div>
</div> </div>
</div> </div>
</div> <div className='invBox-input' style={{ display: bindingInvNum ? 'block' : 'none' }}>
<div className='invBox-input' style={{ display: bindingInvNum ? 'block' : 'none' }}> <div className='invInput'>
<div className='invInput'> <div className='invNum-box'>
<div className='invNum-box'> <div className='invNum' >
<div className='invNum' > {bindingInvNum}
{bindingInvNum} </div>
</div> {/* <div className='relieveBtn' onClick={() => {
{/* <div className='relieveBtn' onClick={() => {
setRelieveModal(true) setRelieveModal(true)
}}> }}>
解绑 解绑
</div> */} </div> */}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className='invBox-bot'>
<div className='invBox-bot'> <div className='invBox-tips' >
<div className='invBox-tips' > {bindingInvNum ? '已绑定邀请码' : '输入他人的邀请码，即可获得相应优惠'}
{bindingInvNum ? '已绑定邀请码' : '输入他人的邀请码，即可获得相应优惠'} </div>
</div> </div>
</div> </div>
</div> </Spin>
</Modal> </Modal>
{/* <Modal title="提示" {/* <Modal title="提示"
okText="确认" okText="确认"

21
src/layout/head/head.css
View File

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

BIN
src/static/head/moneytwo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB