diff --git a/src/components/card/CardProjEdit.tsx b/src/components/card/CardProjEdit.tsx index 93d8c76..ed1c0ba 100644 --- a/src/components/card/CardProjEdit.tsx +++ b/src/components/card/CardProjEdit.tsx @@ -33,7 +33,7 @@ export default function CardProjEdit(props: IProjEdit) { return ( // props.step === 1 ? 'complete-one' : props.step === 2 ? 'complete-two' : props.step === 3 ? 'complete-three' : props.step === 4 ? 'complete-four' : '' -
+
{/*
*/}
{props.title}
@@ -45,7 +45,7 @@ export default function CardProjEdit(props: IProjEdit) {
-
+
) } \ No newline at end of file diff --git a/src/components/card/card-proj-edit.css b/src/components/card/card-proj-edit.css index 7c9aec4..3a46070 100644 --- a/src/components/card/card-proj-edit.css +++ b/src/components/card/card-proj-edit.css @@ -2,7 +2,7 @@ width: 95%; padding: 20px 25px; box-sizing: border-box; - margin-bottom: 27px; + /* margin-bottom: 27px; */ display: flex; justify-content: space-between; border-radius: 4px; @@ -18,7 +18,7 @@ position: absolute; background: url(../../static/editPro/bot.png); background-size: 100% 100%; - left: 140px; + left: calc(50% - 12px); top: -18px; } .card-proj-edit .title { diff --git a/src/components/card/card-proj-jump.css b/src/components/card/card-proj-jump.css index 25e3699..e9ffc6b 100644 --- a/src/components/card/card-proj-jump.css +++ b/src/components/card/card-proj-jump.css @@ -1,11 +1,13 @@ .card-proj-jump { - width: 317px; + width: 100%; padding: 20px 25px; box-sizing: border-box; cursor: pointer; background-color: #F5FEFA; /* box-shadow:0px 3px 0px 0px rgba(55,215,138,0.18) ; */ position: relative; + margin-bottom: 5px; + border-radius: 5px; } diff --git a/src/components/payment/Payment.tsx b/src/components/payment/Payment.tsx index 694420f..a491cf4 100644 --- a/src/components/payment/Payment.tsx +++ b/src/components/payment/Payment.tsx @@ -15,14 +15,14 @@ import { import { ReloadOutlined } from '@ant-design/icons' -import {useEffect, useRef, useState} from "react"; +import { useEffect, useRef, useState } from "react"; import locale from 'antd/locale/zh_CN'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; -import {DevUserId, get, post, uploadImageUrl} from "../../util/AjaxUtils.ts"; -import {UploadOutlined} from "@ant-design/icons"; +import { DevUserId, get, post, uploadImageUrl } from "../../util/AjaxUtils.ts"; +import { UploadOutlined } from "@ant-design/icons"; import useMessage from "antd/es/message/useMessage"; -import {errorImage} from "../../util/CommonUtil.ts"; +import { errorImage } from "../../util/CommonUtil.ts"; dayjs.locale('zh-cn'); @@ -64,7 +64,7 @@ interface IPaymentProps { } export default function Payment(props: IPaymentProps) { - + const [mask, setMask] = useState(false) const [form] = Form.useForm(); const [messageApi, messageApiContext] = useMessage(); const [isRechargeMoneyEdit, setIsRechargeMoneyEdit] = useState(false); @@ -81,7 +81,7 @@ export default function Payment(props: IPaymentProps) { bankUnionpayNumber: '' }); const [countdownTime, setCountdownTime] = useState(''); - const [isCountdownTimeout, setIsCountdownTimeout] = useState(false); + // const [isCountdownTimeout, setIsCountdownTimeout] = useState(false); const moneyRange: number[] = [0.01, 2000]; const countdownIntervalRef = useRef(); const [refreshQrCodeCount, setRefreshQrCodeCount] = useState(0); @@ -93,13 +93,13 @@ export default function Payment(props: IPaymentProps) { if (countdownIntervalRef.current) { clearInterval(countdownIntervalRef.current); } - if (thirdParty == ThirdPartyEnum.DGZZ) { - return; - } + // if (thirdParty == ThirdPartyEnum.DGZZ) { + // return; + // } const Time = new Date().getTime(); // 设定计时器的时间为60秒 const countDownDate = new Date(Time + 270 * 1000).getTime(); - + // const countDownDate = new Date(Time + 5 * 1000).getTime(); // 更新计时器的秒数 const updateCountdown = () => { const now = new Date().getTime(); @@ -111,8 +111,9 @@ export default function Payment(props: IPaymentProps) { setCountdownTime(minutes + ":" + (seconds < 10 ? "0" : "") + seconds); if (distance <= 0) { setCountdownTime('已失效'); - setIsCountdownTimeout(true); + // setIsCountdownTimeout(true); clearInterval(countdownIntervalRef.current); + setMask(true) } } // 每秒更新一次计时器 @@ -132,7 +133,7 @@ export default function Payment(props: IPaymentProps) { onBefore() { setIsLoading(true); }, - onSuccess({data}) { + onSuccess({ data }) { setAccountRechargeId(data.accountRechargeId); setThirdPartyPayUrl(data.thirdPartyPayUrl); countdown(); @@ -147,7 +148,7 @@ export default function Payment(props: IPaymentProps) { get({ messageApi, url: '/api/pay/get-pay-system-bank', - onSuccess({data}) { + onSuccess({ data }) { setPaySystemBank(data); } }) @@ -164,6 +165,7 @@ export default function Payment(props: IPaymentProps) { return; } getPay(); + // countdown() }, [thirdParty, isRechargeMoneyEdit, refreshQrCodeCount]); @@ -172,7 +174,7 @@ export default function Payment(props: IPaymentProps) { if (isRechargeMoneyEdit) { return (
- + @@ -201,51 +203,53 @@ export default function Payment(props: IPaymentProps) { const renderPayBody = () => { if (thirdParty == '对公转账') { return ( - <> +
+ +
倒计时:{countdownTime}
收款方信息 - - + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + +
公司名称 - {paySystemBank.bankAccountName} -
开户银行 - {paySystemBank.bankName} -
银行账号 - {paySystemBank.bankNumber} -
银行联行号 - {paySystemBank.bankUnionpayNumber} -
打款备注 -
{paySystemBank.bankRemark}
-
说明 -
请打款时必须按照以上备注填写
-
公司名称 + {paySystemBank.bankAccountName} +
开户银行 + {paySystemBank.bankName} +
银行账号 + {paySystemBank.bankNumber} +
银行联行号 + {paySystemBank.bankUnionpayNumber} +
打款备注 +
{paySystemBank.bankRemark}
+
说明 +
请打款时必须按照以上备注填写
+
@@ -253,88 +257,88 @@ export default function Payment(props: IPaymentProps) { 付款方信息 - - + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + > + + + + +
公司名称 * - - - -
开户银行 * - - - -
银行账号 * - - - -
打款时间 * - - - { - form.setFieldValue('rechargeFinalTime', dateString); - }}/> - - -
打款凭证 * - { - console.log(e); - if(e.file.status === 'done') { - rechargeVoucherArray.push(e.file.response.data.fileId); - setRechargeVoucherArray(rechargeVoucherArray); - } - if(e.file.status === 'removed') { - const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId); - setRechargeVoucherArray(idArray); - } - return e.fileList; - }} - rules={[{required: true, message: '请上传打款凭证'}]} - > - + 公司名称 * + + + +
开户银行 * + + + +
银行账号 * + + + +
打款时间 * + + + { + form.setFieldValue('rechargeFinalTime', dateString); + }} /> + + +
打款凭证 * + { + console.log(e); + if (e.file.status === 'done') { + rechargeVoucherArray.push(e.file.response.data.fileId); + setRechargeVoucherArray(rechargeVoucherArray); + } + if (e.file.status === 'removed') { + const idArray = rechargeVoucherArray.filter(item => item != e.file.response.data.fileId); + setRechargeVoucherArray(idArray); + } + return e.fileList; + }} + rules={[{ required: true, message: '请上传打款凭证' }]} + > + { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { @@ -342,32 +346,32 @@ export default function Payment(props: IPaymentProps) { } return isJpgOrPng; }} - > - - - -
- +
) } return <>
- - { + + {/* { isCountdownTimeout ? (
{ setRefreshQrCodeCount(refreshQrCodeCount + 1); }}> - + 点击刷新
) : <> - } + } */}
{countdownTime}
 @@ -375,7 +379,18 @@ export default function Payment(props: IPaymentProps) { } return ( - <> +
+
+
+
{ + setMask(false) + setRefreshQrCodeCount(refreshQrCodeCount + 1); + }}> +
+ 已失效,点击刷新 +
+
+
{ form.setFieldValue('thirdParty', e.target.value); @@ -424,22 +439,22 @@ export default function Payment(props: IPaymentProps) { {renderMoney()} {renderPayBody()} -
- -
{messageApiContext} - +
) } \ No newline at end of file diff --git a/src/components/payment/payment.css b/src/components/payment/payment.css index 9af4aa0..3995650 100644 --- a/src/components/payment/payment.css +++ b/src/components/payment/payment.css @@ -16,6 +16,7 @@ .pay-table tr td .mark { color: red; + /* background-color: ; */ } .qr-code { diff --git a/src/components/recharge/RechargeHead.tsx b/src/components/recharge/RechargeHead.tsx index 77733f8..b91f6a3 100644 --- a/src/components/recharge/RechargeHead.tsx +++ b/src/components/recharge/RechargeHead.tsx @@ -1,7 +1,7 @@ import './recharge-head.css'; import Payment from "../payment/Payment.tsx"; -import {Modal} from "antd"; -import {useState} from "react"; +import { Modal } from "antd"; +import { useState } from "react"; export default function RechargeHead() { @@ -11,15 +11,16 @@ export default function RechargeHead() { <>
{ - setIsPaymentModalOpen(true); + setIsPaymentModalOpen(true); }}>充值
{ - setIsPaymentModalOpen(false); - }} - footer={false} + destroyOnClose={true} + title="充值" + onCancel={() => { + setIsPaymentModalOpen(false); + }} + footer={false} > { diff --git a/src/components/scrollAD/ScrollAd.tsx b/src/components/scrollAD/ScrollAd.tsx index 54fbdd2..eb5974d 100644 --- a/src/components/scrollAD/ScrollAd.tsx +++ b/src/components/scrollAD/ScrollAd.tsx @@ -1,28 +1,26 @@ -import React, { useEffect } from 'react' +// import React, { useEffect } from 'react' import './scrollAd.css' export default function ScrollAd(props:any) { - useEffect(() => { - const scrollInterval = setInterval(() => { - const adContainer = document.getElementById('scrolling-ad-container'); - if (adContainer) { - adContainer.scrollLeft += 1; // 每次滚动的距离 - if (adContainer.scrollLeft % adContainer.scrollWidth === 0) { - clearInterval(scrollInterval); // 滚动到末尾时停止滚动 - } - } - }, 50); // 滚动速度，单位毫秒 + // useEffect(() => { + // const scrollInterval = setInterval(() => { + // const adContainer = document.getElementById('scrolling-ad-container'); + // if (adContainer) { + // adContainer.scrollLeft += 1; + // if (adContainer.scrollLeft % adContainer.scrollWidth === 0) { + // clearInterval(scrollInterval); + // } + // } + // }, 50); - return () => clearInterval(scrollInterval); // 组件卸载时清除定时器 - }, []); + // return () => clearInterval(scrollInterval); + // }, []); return (
- {props.ad} - {/* 广告11111111111111111111111112222222222222222222223333333333333 */} + {/* {props.ad} */} + 广告11111111111111111111111112222222222222222222223333333333333广告哈哈哈哈哈呵呵呵呵嘻嘻嘻嘻和嘎嘎嘎嘎嘎嘎嘎哈哈哈哈和额呵呵呵呵哈哈很大很大深度暗杀开橙卡故事背景噶大哥哈克很大空间的哈客户的客户
- - ) } diff --git a/src/components/scrollAD/scrollAd.css b/src/components/scrollAD/scrollAd.css index 2049803..3e4d8ff 100644 --- a/src/components/scrollAD/scrollAd.css +++ b/src/components/scrollAD/scrollAd.css @@ -1,28 +1,47 @@ .scrolling-ad-container { - overflow: hidden; /* 隐藏超出盒子的部分 */ - white-space: nowrap; /* 内容不换行 */ - position: relative; /* 使子元素的动画定位参考于此 */ - padding: 10px; /* 内容内边距 */ - width: 100%; /* 盒子的宽度 */ - height: 30px; /* 盒子的高度 */ - display: flex; - align-items: center; /* 垂直居中对齐文字 */ - box-sizing: border-box; /* 包含内边距和边框 */ - + overflow: hidden; + /* 隐藏超出盒子的部分 */ + white-space: nowrap; + /* 内容不换行 */ + position: relative; + /* 使子元素的动画定位参考于此 */ + padding: 10px; + /* 内容内边距 */ + width: 100%; + /* 盒子的宽度 */ + height: 50px; + /* 盒子的高度 */ + display: flex; + align-items: center; + /* 垂直居中对齐文字 */ + box-sizing: border-box; + /* 包含内边距和边框 */ +} + +.scrolling-ad-content { + display: inline-block; + font-size: 16px; + padding-left: 100%; + /* 确保广告从盒子外开始滚动 */ + white-space: nowrap; + /* 内容不换行 */ + animation: scrollLeft 20s linear infinite; + /* 滚动动画，持续时间为20秒，线性匀速，无限循环 */ +} + +/* 定义动画 */ +@keyframes scrollLeft { + 0% { + transform: translateX(0); + /* 从容器的右边开始 */ } - - .scrolling-ad-content { - font-size: 16px; - display: inline-block; - padding-left: 100%; /* 确保广告从盒子外开始滚动 */ - animation: scrollLeft 25s linear infinite; /* 滚动动画，持续时间为25秒，线性匀速，无限循环 */ + + 100% { + transform: translateX(-100%); + /* 向左移动到容器的左边 */ } - - @keyframes scrollLeft { - 0% { - transform: translateX(0); /* 从盒子的右边开始 */ - } - 100% { - transform: translateX(-100%); /* 向左移动到盒子的左边 */ - } - } \ No newline at end of file +} +/* 悬停时停止动画 */ +.scrolling-ad-container:hover .scrolling-ad-content { + animation-play-state: paused; /* 悬停时动画暂停 */ +} \ No newline at end of file diff --git a/src/components/step/StepProjEdit.tsx b/src/components/step/StepProjEdit.tsx index e4d90b8..acf804b 100644 --- a/src/components/step/StepProjEdit.tsx +++ b/src/components/step/StepProjEdit.tsx @@ -12,7 +12,7 @@ export default function StepProjEdit(props: IStepProj) { console.log('路由', location.pathname); setAllShow(location.pathname.includes('/proj-eall') ? true : false) }, []) - const height = window.innerHeight - 390; + const height = window.innerHeight - 375; // 状态值 已完成:Process.COMPLETE 进行中: Process.PROCESSING 未操作:Process.PENDING const renderStepNo = () => { @@ -109,7 +109,7 @@ export default function StepProjEdit(props: IStepProj) {
-
+
{/*
*/}
{props.children}
diff --git a/src/components/step/step-proj-edit.css b/src/components/step/step-proj-edit.css index b6a9bc3..a10b123 100644 --- a/src/components/step/step-proj-edit.css +++ b/src/components/step/step-proj-edit.css @@ -5,7 +5,8 @@ position: relative; /* overflow: scroll; */ } -.downBox{ + +.downBox { width: 25px; height: 8px; background-color: pink; @@ -15,6 +16,7 @@ background-size: 100% 100%; } + .step-proj .step { width: 100%; height: 56px; @@ -106,6 +108,7 @@ background: url('../../static/editPro/four.png'); background-size: 100% 100%; } + /* 已完成状态连接线 */ .step-proj .step .setLine { width: 10%; @@ -115,16 +118,19 @@ right: -15%; top: 17px; } -.step-proj .step .complete-oneLine{ - background:url('../../static/editPro/lineone.png'); + +.step-proj .step .complete-oneLine { + background: url('../../static/editPro/lineone.png'); background-size: 100% 100%; } -.step-proj .step .complete-twoLine{ - background:url('../../static/editPro/linetwo.png'); + +.step-proj .step .complete-twoLine { + background: url('../../static/editPro/linetwo.png'); background-size: 100% 100%; } -.step-proj .step .complete-threeLine{ - background:url('../../static/editPro/linethree.png'); + +.step-proj .step .complete-threeLine { + background: url('../../static/editPro/linethree.png'); background-size: 100% 100%; } @@ -171,7 +177,7 @@ .step-proj .step .processing-four { width: 100%; - + /* width: 309px; */ height: 56px; /* background-color: pink; */ @@ -180,6 +186,7 @@ background: url('../../static/editPro/processingFour.png'); background-size: 100% 100%; } + .step-proj .step .processing-num { width: 21px; height: 21px; @@ -242,10 +249,12 @@ color: #71757E; margin-left: 15%; } -.step-proj .step .no-line{ - background:url('../../static/editPro/lineno.png'); + +.step-proj .step .no-line { + background: url('../../static/editPro/lineno.png'); background-size: 100% 100%; } + /* Top 状态:未操作 结束 ------------------------------------------------------------ */ @@ -336,17 +345,46 @@ .step-proj .step-card { margin-top: 40px; - padding: 10px 0; + /* padding: 10px 0px; */ + /* box-sizing: border-box; */ /* border: 1px solid var(--color-border); */ overflow: auto; } +.step-card::-webkit-scrollbar { + display: block; + width: 6px; + height: 0; +} + +/* 设置滚动条的轨道（背景部分） */ +.step-card::-webkit-scrollbar-track { + background: #e2e2e2; + /* 轨道的颜色 */ +} + +/* 设置滚动条的滑块部分 */ +.step-card::-webkit-scrollbar-thumb { + background: #cecece; + /* 滑块的颜色 */ + border-radius: 5px; + /* 滑块的圆角 */ +} + +/* 滑块的颜色在鼠标悬停时改变 */ +.step-card::-webkit-scrollbar-thumb:hover { + background: #adadad; + /* 鼠标悬停时滑块的颜色 */ +} + .step-proj .step-card .step-card-list { display: flex; flex-direction: column; align-items: center; } + + .step-proj .step-card .step-card-list .card-proj-edit, .step-proj .step-card .step-card-list .card-proj-loading, .step-proj .step-card .step-card-list .card-proj-result, diff --git a/src/interfaces/card/ICardProj.ts b/src/interfaces/card/ICardProj.ts index 2e8b3ca..64a2506 100644 --- a/src/interfaces/card/ICardProj.ts +++ b/src/interfaces/card/ICardProj.ts @@ -13,6 +13,7 @@ export interface IProjEdit { background?:string; shadow?:string; handleEdit(): void; + } export interface IProjLoading { diff --git a/src/route/proj/ProjCreate.tsx b/src/route/proj/ProjCreate.tsx index f270a05..8508489 100644 --- a/src/route/proj/ProjCreate.tsx +++ b/src/route/proj/ProjCreate.tsx @@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom"; import { message } from "antd"; import { CloseOutlined - } from '@ant-design/icons'; +} from '@ant-design/icons'; import CardProjType from "../../components/card/CardProjType.tsx"; import { // IProjCharge, @@ -39,16 +39,16 @@ export default function ProjCreate() { const [freeCount, setFreeCount] = useState(0) //免费次数 const nav = useNavigate(); const height = window.innerHeight - 170; - const [show,setShow] = useState(true) //是否显示广告 - const [ad,setAd] = useState('') + const [show, setShow] = useState(true) //是否显示广告 + const [ad, setAd] = useState('') const getAd = () => { get({ messageApi: messageApi, url: '/api/env/custom/get-proj-create-notice', onSuccess({ data }) { - console.log('广告',data); + console.log('广告', data); setAd(data.data) - setShow(data.data==''?false:true) + setShow(data.data == '' ? false : true) } }) // sessionStorage.setItem('pathArray', JSON.stringify([ { title: 首页 },{ title: '创建项目' }])); @@ -81,16 +81,21 @@ export default function ProjCreate() { {contextHolder}
-
-
-
- +
+ +
+
+
-
{ +
{ setShow(false) }}>
+
= { messageApi: MessageInstance;