提交代码

frontend/src/pages/FirstLoginPage.tsx

@@ -191,7 +191,7 @@ export const FirstLoginPage = () => {
         {selectedLoginType === 'phone' && (
           <>
             {/* 区号下拉选择 */}
-            <div style={{ width: px2vw(95), position: 'relative' }} ref={areaCodeContainerRef}>
+            <div style={{ width: px2vmin(95), position: 'relative' }} ref={areaCodeContainerRef}>
               <div
                 className="relative overflow-visible"
                 style={{
@@ -213,15 +213,15 @@ export const FirstLoginPage = () => {
                   }}
                   className="w-full h-full flex items-center justify-between bg-transparent border-none outline-none px-0"
                   style={{
-                    paddingLeft: px2vw(12),
-                    paddingRight: px2vw(8),
+                    paddingLeft: px2vmin(12),
+                    paddingRight: px2vmin(8),
                     fontSize: px2vmin(16),
                     color: '#FFFFFF',
-                    gap: px2vw(8),
+                    gap: px2vmin(8),
                     cursor: 'pointer',
                   }}
                 >
-                  <div className="flex items-center" style={{ gap: px2vw(8) }}>
+                  <div className="flex items-center" style={{ gap: px2vmin(8) }}>
                     <img
                       src={
                         areaCodeOptions.find((item) => item.code === areaCode)?.flag ||
@@ -229,16 +229,18 @@ export const FirstLoginPage = () => {
                       }
                       alt="area flag"
                       style={{
-                        width: px2vw(16),
-                        height: px2vh(24),
+                        width: px2vmin(16),
+                        height: px2vmin(24),
                         objectFit: 'cover',
                       }}
                     />
                     <span style={{ color: '#FFFFFF' }}>{areaCode}</span>
                   </div>
-                  <svg width={px2vw(12)} height={px2vw(12)} viewBox="0 0 12 12" fill="none">
-                    <path d="M3 4L6 7L9 4" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
-                  </svg>
+                  <img
+                    src="https://lyrria-pro.oss-cn-beijing.aliyuncs.com/arrow-icon.png"
+                    alt="arrow"
+                    style={{ width: px2vmin(7.5), height: px2vmin(3.75), flexShrink: 0 }}
+                  />
                 </button>
                 {isAreaCodeOpen && (
                   <div
@@ -246,8 +248,8 @@ export const FirstLoginPage = () => {
                       position: 'absolute',
                       top: '100%',
                       left: 0,
-                      marginTop: px2vh(4),
-                      width: px2vw(95),
+                      marginTop: px2vmin(4),
+                      width: px2vmin(95),
                       background: '#1E1A26',
                       borderRadius: '12PX',
                       boxShadow: '0 8PX 20PX rgba(0, 0, 0, 0.45)',
@@ -268,8 +270,8 @@ export const FirstLoginPage = () => {
                         }}
                         className="flex items-center justify-start w-full border-none bg-transparent text-left hover:opacity-80 transition-opacity"
                         style={{
-                          padding: `${px2vh(10)} ${px2vw(12)}`,
-                          gap: px2vw(10),
+                          padding: `${px2vmin(10)} ${px2vmin(12)}`,
+                          gap: px2vmin(10),
                           cursor: 'pointer',
                         }}
                       >
@@ -277,8 +279,8 @@ export const FirstLoginPage = () => {
                           src={item.flag}
                           alt={`${item.label} flag`}
                           style={{
-                            width: px2vw(16),
-                            height: px2vh(24),
+                            width: px2vmin(16),
+                            height: px2vmin(24),
                             objectFit: 'cover',
                           }}
                         />
@@ -310,7 +312,7 @@ export const FirstLoginPage = () => {
                   className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)]"
                   style={{
                     fontSize: px2vmin(16),
-                    paddingLeft: px2vw(24),
+                    paddingLeft: px2vmin(24),
                     paddingRight: px2vmin(24),
                   }}
                   placeholder="请输入手机号码"
@@ -323,9 +325,9 @@ export const FirstLoginPage = () => {
                   <button
                     className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
                     style={{
-                      right: px2vw(12),
-                      width: px2vw(20),
-                      height: px2vh(20),
+                      right: px2vmin(12),
+                      width: px2vmin(20),
+                      height: px2vmin(20),
                     }}
                     onClick={() => setPhoneNumber('')}
                     aria-label="清除"
@@ -376,7 +378,7 @@ export const FirstLoginPage = () => {
                 className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)]"
                 style={{
                   fontSize: px2vmin(16),
-                  paddingLeft: px2vw(24),
+                  paddingLeft: px2vmin(24),
                   paddingRight: px2vmin(24),
                 }}
                 placeholder="请输入邮箱地址"
@@ -389,9 +391,9 @@ export const FirstLoginPage = () => {
                 <button
                   className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
                   style={{
-                    right: px2vw(12),
-                    width: px2vw(20),
-                    height: px2vh(20),
+                    right: px2vmin(12),
+                    width: px2vmin(20),
+                    height: px2vmin(20),
                   }}
                   onClick={() => setEmail('')}
                   aria-label="清除"

frontend/src/pages/LoginPage.tsx

@@ -235,7 +235,7 @@ export const LoginPage = () => {
         {selectedLoginType === 'phone' && (
           <>
             {/* 区号下拉选择 */}
-            <div style={{ width: px2vw(95), position: 'relative' }} ref={areaCodeContainerRef}>
+            <div style={{ width: px2vmin(95), position: 'relative' }} ref={areaCodeContainerRef}>
               <div
                 className="relative overflow-visible"
                 style={{
@@ -257,15 +257,15 @@ export const LoginPage = () => {
                   }}
                   className="w-full h-full flex items-center justify-between bg-transparent border-none outline-none px-0"
                   style={{
-                    paddingLeft: px2vw(12),
-                    paddingRight: px2vw(8),
+                    paddingLeft: px2vmin(12),
+                    paddingRight: px2vmin(8),
                     fontSize: px2vmin(16),
                     color: '#FFFFFF',
-                    gap: px2vw(8),
+                    gap: px2vmin(8),
                     cursor: 'pointer',
                   }}
                 >
-                  <div className="flex items-center" style={{ gap: px2vw(8) }}>
+                  <div className="flex items-center" style={{ gap: px2vmin(8) }}>
                     <img
                       src={
                         areaCodeOptions.find((item) => item.code === areaCode)?.flag ||
@@ -273,16 +273,18 @@ export const LoginPage = () => {
                       }
                       alt="area flag"
                       style={{
-                        width: px2vw(16),
-                        height: px2vh(24),
+                        width: px2vmin(16),
+                        height: px2vmin(24),
                         objectFit: 'cover',
                       }}
                     />
                     <span style={{ color: '#FFFFFF' }}>{areaCode}</span>
                   </div>
-                  <svg width={px2vw(12)} height={px2vw(12)} viewBox="0 0 12 12" fill="none">
-                    <path d="M3 4L6 7L9 4" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
-                  </svg>
+                  <img
+                    src="https://lyrria-pro.oss-cn-beijing.aliyuncs.com/arrow-icon.png"
+                    alt="arrow"
+                    style={{ width: px2vmin(7.5), height: px2vmin(3.75), flexShrink: 0 }}
+                  />
                 </button>
                 {isAreaCodeOpen && (
                   <div
@@ -290,8 +292,8 @@ export const LoginPage = () => {
                       position: 'absolute',
                       top: '100%',
                       left: 0,
-                      marginTop: px2vh(4),
-                      width: px2vw(95),
+                      marginTop: px2vmin(4),
+                      width: px2vmin(95),
                       background: '#1E1A26',
                       borderRadius: '12PX',
                       boxShadow: '0 8PX 20PX rgba(0, 0, 0, 0.45)',
@@ -312,8 +314,8 @@ export const LoginPage = () => {
                           }}
                           className="flex items-center justify-start w-full border-none bg-transparent text-left hover:opacity-80 transition-opacity"
                           style={{
-                            padding: `${px2vh(10)} ${px2vw(12)}`,
-                            gap: px2vw(10),
+                          padding: `${px2vmin(10)} ${px2vmin(12)}`,
+                          gap: px2vmin(10),
                             cursor: 'pointer',
                           }}
                         >
@@ -321,8 +323,8 @@ export const LoginPage = () => {
                             src={item.flag}
                             alt={`${item.label} flag`}
                             style={{
-                              width: px2vw(16),
-                              height: px2vh(24),
+                            width: px2vmin(16),
+                            height: px2vmin(24),
                               objectFit: 'cover',
                             }}
                           />
@@ -353,7 +355,7 @@ export const LoginPage = () => {
                   className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)]"
                   style={{
                     fontSize: px2vmin(16),
-                    paddingLeft: px2vw(24),
+                    paddingLeft: px2vmin(24),
                     paddingRight: px2vmin(24),
                   }}
                   placeholder="请输入手机号码"
@@ -366,9 +368,9 @@ export const LoginPage = () => {
                   <button
                     className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
                     style={{
-                      right: px2vw(12),
-                      width: px2vw(20),
-                      height: px2vh(20),
+                      right: px2vmin(12),
+                      width: px2vmin(20),
+                      height: px2vmin(20),
                     }}
                     onClick={() => setPhoneNumber('')}
                     aria-label="清除"

frontend/src/pages/LoginVerificationCodePage.tsx

@@ -196,7 +196,7 @@ export const LoginVerificationCodePage = () => {
         {selectedLoginType === 'phone' && (
           <>
             {/* 区号下拉选择 */}
-            <div style={{ width: px2vw(95), position: 'relative' }} ref={areaCodeContainerRef}>
+            <div style={{ width: px2vmin(95), position: 'relative' }} ref={areaCodeContainerRef}>
               <div
                 className="relative overflow-visible"
                 style={{
@@ -218,15 +218,15 @@ export const LoginVerificationCodePage = () => {
                   }}
                   className="w-full h-full flex items-center justify-between bg-transparent border-none outline-none px-0"
                   style={{
-                    paddingLeft: px2vw(12),
-                    paddingRight: px2vw(8),
+                    paddingLeft: px2vmin(12),
+                    paddingRight: px2vmin(8),
                     fontSize: px2vmin(16),
                     color: '#FFFFFF',
-                    gap: px2vw(8),
+                    gap: px2vmin(8),
                     cursor: 'pointer',
                   }}
                 >
-                  <div className="flex items-center" style={{ gap: px2vw(8) }}>
+                  <div className="flex items-center" style={{ gap: px2vmin(8) }}>
                     <img
                       src={
                         areaCodeOptions.find((item) => item.code === areaCode)?.flag ||
@@ -234,16 +234,18 @@ export const LoginVerificationCodePage = () => {
                       }
                       alt="area flag"
                       style={{
-                        width: px2vw(16),
-                        height: px2vh(24),
+                        width: px2vmin(16),
+                        height: px2vmin(24),
                         objectFit: 'cover',
                       }}
                     />
                     <span style={{ color: '#FFFFFF' }}>{areaCode}</span>
                   </div>
-                  <svg width={px2vw(12)} height={px2vw(12)} viewBox="0 0 12 12" fill="none">
-                    <path d="M3 4L6 7L9 4" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
-                  </svg>
+                  <img
+                    src="https://lyrria-pro.oss-cn-beijing.aliyuncs.com/arrow-icon.png"
+                    alt="arrow"
+                    style={{ width: px2vmin(7.5), height: px2vmin(3.75), flexShrink: 0 }}
+                  />
                 </button>
                 {isAreaCodeOpen && (
                   <div
@@ -251,8 +253,8 @@ export const LoginVerificationCodePage = () => {
                       position: 'absolute',
                       top: '100%',
                       left: 0,
-                      marginTop: px2vh(4),
-                      width: px2vw(95),
+                      marginTop: px2vmin(4),
+                      width: px2vmin(95),
                       background: '#1E1A26',
                       borderRadius: '12PX',
                       boxShadow: '0 8PX 20PX rgba(0, 0, 0, 0.45)',
@@ -273,8 +275,8 @@ export const LoginVerificationCodePage = () => {
                           }}
                           className="flex items-center justify-start w-full border-none bg-transparent text-left hover:opacity-80 transition-opacity"
                           style={{
-                            padding: `${px2vh(10)} ${px2vw(12)}`,
-                            gap: px2vw(10),
+                          padding: `${px2vmin(10)} ${px2vmin(12)}`,
+                          gap: px2vmin(10),
                             cursor: 'pointer',
                           }}
                         >
@@ -282,8 +284,8 @@ export const LoginVerificationCodePage = () => {
                             src={item.flag}
                             alt={`${item.label} flag`}
                             style={{
-                              width: px2vw(16),
-                              height: px2vh(24),
+                            width: px2vmin(16),
+                            height: px2vmin(24),
                               objectFit: 'cover',
                             }}
                           />
@@ -314,7 +316,7 @@ export const LoginVerificationCodePage = () => {
                   className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)]"
                   style={{
                     fontSize: px2vmin(16),
-                    paddingLeft: px2vw(24),
+                    paddingLeft: px2vmin(24),
                     paddingRight: px2vmin(24),
                   }}
                   placeholder="请输入手机号码"
@@ -327,9 +329,9 @@ export const LoginVerificationCodePage = () => {
                   <button
                     className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
                     style={{
-                      right: px2vw(12),
-                      width: px2vw(20),
-                      height: px2vh(20),
+                      right: px2vmin(12),
+                      width: px2vmin(20),
+                      height: px2vmin(20),
                     }}
                     onClick={() => setPhoneNumber('')}
                     aria-label="清除"

frontend/src/pages/VerificationCodePage.tsx

@@ -198,7 +198,7 @@ export const VerificationCodePage = () => {
         {selectedLoginType === 'phone' && (
           <>
           {/* 区号下拉选择 */}
-          <div style={{ width: px2vw(95), position: 'relative' }} ref={areaCodeContainerRef}>
+          <div style={{ width: px2vmin(95), position: 'relative' }} ref={areaCodeContainerRef}>
               <div
                 className="relative overflow-visible"
                 style={{
@@ -220,15 +220,15 @@ export const VerificationCodePage = () => {
                 }}
                 className="w-full h-full flex items-center justify-between bg-transparent border-none outline-none px-0"
                 style={{
-                  paddingLeft: px2vw(12),
-                  paddingRight: px2vw(8),
+                  paddingLeft: px2vmin(12),
+                  paddingRight: px2vmin(8),
                   fontSize: px2vmin(16),
                   color: '#FFFFFF',
-                  gap: px2vw(8),
+                  gap: px2vmin(8),
                   cursor: 'pointer',
                 }}
               >
-                <div className="flex items-center" style={{ gap: px2vw(8) }}>
+                <div className="flex items-center" style={{ gap: px2vmin(8) }}>
                   <img
                     src={
                       areaCodeOptions.find((item) => item.code === areaCode)?.flag ||
@@ -236,16 +236,18 @@ export const VerificationCodePage = () => {
                     }
                     alt="area flag"
                     style={{
-                      width: px2vw(16),
-                      height: px2vh(24),
+                      width: px2vmin(16),
+                      height: px2vmin(24),
                       objectFit: 'cover',
                     }}
                   />
                   <span style={{ color: '#FFFFFF' }}>{areaCode}</span>
                 </div>
-                <svg width={px2vw(12)} height={px2vw(12)} viewBox="0 0 12 12" fill="none">
-                  <path d="M3 4L6 7L9 4" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
-                </svg>
+                <img
+                  src="https://lyrria-pro.oss-cn-beijing.aliyuncs.com/arrow-icon.png"
+                  alt="arrow"
+                  style={{ width: px2vmin(7.5), height: px2vmin(3.75), flexShrink: 0 }}
+                />
               </button>
               {isAreaCodeOpen && (
                 <div
@@ -253,8 +255,8 @@ export const VerificationCodePage = () => {
                     position: 'absolute',
                     top: '100%',
                     left: 0,
-                    marginTop: px2vh(4),
-                    width: px2vw(95),
+                    marginTop: px2vmin(4),
+                    width: px2vmin(95),
                     background: '#1E1A26',
                     borderRadius: '12PX',
                     boxShadow: '0 8PX 20PX rgba(0, 0, 0, 0.45)',
@@ -275,8 +277,8 @@ export const VerificationCodePage = () => {
                         }}
                         className="flex items-center justify-start w-full border-none bg-transparent text-left hover:opacity-80 transition-opacity"
                         style={{
-                          padding: `${px2vh(10)} ${px2vw(12)}`,
-                          gap: px2vw(10),
+                          padding: `${px2vmin(10)} ${px2vmin(12)}`,
+                          gap: px2vmin(10),
                           cursor: 'pointer',
                         }}
                       >
@@ -284,8 +286,8 @@ export const VerificationCodePage = () => {
                           src={item.flag}
                           alt={`${item.label} flag`}
                           style={{
-                            width: px2vw(16),
-                            height: px2vh(24),
+                            width: px2vmin(16),
+                            height: px2vmin(24),
                             objectFit: 'cover',
                           }}
                         />
@@ -317,7 +319,7 @@ export const VerificationCodePage = () => {
                   className="w-full h-full font-normal leading-normal tracking-[0.5px] text-[rgba(245,243,240,0.7)] bg-transparent border-none outline-none placeholder:text-[rgba(245,243,240,0.45)]"
                   style={{
                     fontSize: px2vmin(16),
-                    paddingLeft: px2vw(24),
+                    paddingLeft: px2vmin(24),
                     paddingRight: px2vmin(24),
                   }}
                   placeholder="请输入手机号码"
@@ -330,9 +332,9 @@ export const VerificationCodePage = () => {
                   <button
                     className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center transition-opacity hover:opacity-70 touch-manipulation"
                     style={{
-                      right: px2vw(12),
-                      width: px2vw(20),
-                      height: px2vh(20),
+                      right: px2vmin(12),
+                      width: px2vmin(20),
+                      height: px2vmin(20),
                     }}
                     onClick={() => setPhoneNumber('')}
                     aria-label="清除"