颜色变量调整

src/App.vue

@@ -78,16 +78,16 @@ body {
   --arcoblue-2: 235, 235, 233;//#EBEBE9
   --arcoblue-1: 72, 96, 91;//#48605B
 
-  --primary-10: rgba(var(--arcoblue-10));//#F5F6F0
-  --primary-9: rgba(var(--arcoblue-9));//#FF9707
-  --primary-8: rgba(var(--arcoblue-8));//#263628
-  --primary-6: rgba(var(--arcoblue-6));//#4A664D
-  --primary-5: rgba(var(--arcoblue-5));//#95A997
-  --primary-7: rgba(var(--arcoblue-7));//#e3e6da
-  --primary-4: rgba(var(--arcoblue-4));//#C0CEB3
-  --primary-3: rgba(var(--arcoblue-3));//#8AA88A
-  --primary-2: rgba(var(--arcoblue-2));//#EBEBE9
-  --primary-1: rgba(var(--arcoblue-1));//#48605B
+  --primary-10:var(--arcoblue-10);//#F5F6F0
+  --primary-9: var(--arcoblue-9);//#FF9707
+  --primary-8: var(--arcoblue-8);//#263628
+  --primary-6: var(--arcoblue-6);//#4A664D
+  --primary-5: var(--arcoblue-5);//#95A997
+  --primary-7: var(--arcoblue-7);//#e3e6da
+  --primary-4: var(--arcoblue-4);//#C0CEB3
+  --primary-3: var(--arcoblue-3);//#8AA88A
+  --primary-2: var(--arcoblue-2);//#EBEBE9
+  --primary-1: var(--arcoblue-1);//#48605B
 
   --gray-10: 12, 21, 13;//#0c150d 主字体色
   --gray-9: 90, 90, 90;//#5a5a5a
@@ -96,12 +96,12 @@ body {
   --gray-6: 163, 164, 160;//#A3A4A0
   --gray-5: 74, 102, 77;//#4A664D
 
-  --color-neutral-10: rgba(var(--gray-10));//#0c150d
-  --color-neutral-9: rgba(var(--gray-9));//#5a5a5a
-  --color-neutral-8: rgba(var(--gray-8));//#133537
-  --color-neutral-7: rgba(var(--gray-7));//#606961
-  --color-neutral-6: rgba(var(--gray-6));//#A3A4A0
-  --color-neutral-5: rgba(var(--gray-5));//#4A664D
+  --color-neutral-10: rgb(var(--gray-10));//#0c150d
+  --color-neutral-9: rgb(var(--gray-9));//#5a5a5a
+  --color-neutral-8: rgb(var(--gray-8));//#133537
+  --color-neutral-7: rgb(var(--gray-7));//#606961
+  --color-neutral-6: rgb(var(--gray-6));//#A3A4A0
+  --color-neutral-5: rgb(var(--gray-5));//#4A664D
 }
 
 :root {

src/layouts/components/Headers.vue

@@ -11,7 +11,7 @@
             <a-divider v-if="index" direction="vertical" class="h-[17px] app-menu-divider"/>
             <div class="app-menu flex items-center text-nowrap px-[9px] py-[7px]
             rounded-[6px] cursor-pointer fx-sm" 
-            :class="{'active primary-10': item.key === activeMenu}">
+            :class="{'active': item.key === activeMenu}">
               {{ t(item.label) }}
             </div>
           </template>
@@ -103,25 +103,19 @@ const logOut = async () => {
   
 }
 .app-menu.active{
-  background: var(--primary-4);
-  color: var(--primary-6);
+  background: rgb(var(--arcoblue-4));
+  color: rgb(var(--arcoblue-6));
   font-weight: bold;
 }
 .app-menu:hover{
-  background: var(--primary-4);
-  color: var(--primary-6);
+  background: rgb(var(--arcoblue-4));
+  color: rgb(var(--arcoblue-6));
 }
 .app-menu-divider{
-  border-color: var(--primary-4);
-}
-:deep(.arco-btn-primary, .arco-btn-primary){
-  background-color: var(--primary-6);
+  border-color: rgb(var(--arcoblue-4));
 }
 :deep(.arco-btn-primary:hover, .arco-btn-primary){
-  background-color: var(--primary-6);
-}
-:deep(.arco-btn-primary, .arco-btn-primary:hover){
-  background-color: var(--primary-6);
+  background-color: rgb(var(--arcoblue-6));
 }
 </style>
 

src/views/auth/Login.vue

 <template>
-  <div class="h-screen overflow-hidden">
+  <div class="login h-screen overflow-hidden">
     <div ref="loginPage"
     class="light-login-bg pl-[85px] pr-[98px] pt-[33px] h-full !overflow-y-auto light-login-bg">
         <loginHeader />
@@ -7,7 +7,7 @@
         <div class="flex justify-center">
           <div class="w-[463px] h-[620px]">
             <div class="loginForm-bg w-full h-full rounded-[18px] flex flex-col">
-              <div class="text-center pt-[46px] primary-6">
+              <div class="text-center pt-[46px]">
                 <div class="text-[32px] font-bold">{{ t('login.loginTo') }}</div>
                  <div class="flex justify-center items-center mt-[18px]">
                   <img src="@/assets/images/login/welcome-login.png" alt="" class="h-[26px]">
@@ -42,8 +42,7 @@
                     </a-input-password>
                   </a-form-item>
                 
-                  <div class="mt-[34px] flex flex-row items-center items-center-button"
-                  :class="[loginMsg.password&&loginMsg.password.length>=8&&loginMsg.email?'isClick':'']">
+                  <div class="mt-[34px] flex flex-row items-center items-center-button">
                     <a-button
                       type="primary"
                       size="large"
@@ -88,12 +87,12 @@
                       <img :src="method.url" alt="" class="w-[14px] h-[14px]"/>
                     </div>
                 </template>
-                 <div class="w-[42px] h-[42px] 
+                <div class="w-[42px] h-[42px] 
                     rounded-full bg-[#FFF]  
                     flex items-center justify-center cursor-pointer loginForm-item relative"
                      :class="[loginMsg.reType==1?'loginForm-itemActive':'']">
                       <img :src="loginMethods[0].url" alt="" class="w-[14px] h-[14px]"/>
-                      <div
+                      <div 
                           ref="googleButtonContainer"
                           class="g-signin2 rounded-full !rounded-[13px] overflow-hidden 
                           w-[40px] h-[40px] z-[6] flex items-center justify-center absolute"
@@ -102,7 +101,7 @@
                           @click="loginMsg.reType=1"
                       > 
                       </div>
-                  </div>
+                </div>
                 <template v-for="(method,index) in loginMethods">
                     <div v-if="method.key>1" :key="index" class="w-[42px] h-[42px] 
                     rounded-full bg-[#FFF] 
@@ -148,8 +147,6 @@ const userStore = useUserStore()
 const systemConfigStore = useSystemConfigStore()
 
 const loading = ref(false)
-const needVerify = ref(false)
-const validateToken = ref('')
 const router = useRouter()
 const googleButtonContainer = ref(null);
 
@@ -274,7 +271,12 @@ const handleClick = (path: string) => {
 
 const toggleLoginType = (type: number) => {
   if(type==3||type==7) return Message.error(t('login.loginTypeNotSupport'))
-  if(type==2) return getAppIdRedirectUri()
+  if(type==2) {
+    getAppIdRedirectUri()
+  }
+  // if(type==1) {
+  //   loginWithGoogle()
+  // } 
   loginMsg.reType = type
 }
 
@@ -283,6 +285,16 @@ const loginHandler = async ({ values, errors }: any) => {
   await handleLogin()
 }
 
+// 手动构建授权URL（适用于无第三方库的简单场景）
+const clientId = '532164762940-vk65sge5jab1eq8mgbv1srh672ehnkff.apps.googleusercontent.com';
+const redirectUri = encodeURIComponent('https://www.oytour.com/#/login?reType=1'); // 必须与Google控制台配置的一致
+const scope = encodeURIComponent('profile email'); // 请求的权限范围
+
+const loginWithGoogle = () => {
+  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&access_type=offline`;
+  window.location.href = authUrl;
+};
+
 // 渲染 Google 登录按钮
 const renderGoogleButton = () => {
   try {
@@ -299,9 +311,9 @@ const renderGoogleButton = () => {
       { theme: 'outline', size: 'large' }
     );
 
-     window.google.accounts.id.configure({
-      language: locale.value // 支持的语言代码
-    });
+    // window.google.accounts.id.configure({
+    //   language: locale.value // 支持的语言代码
+    // });
     
   } catch (error) {
     console.error('Error rendering Google Sign-In button:', error);
@@ -423,7 +435,7 @@ onMounted(async () => {
 :deep(.arco-input-focus){
   border-radius: 12px;
   box-shadow: rgba(60,85,62,0.18) 0px 5px 15px;
-  border: 2px solid var(--primary-3);
+  border: 2px solid rgb(var(--arcoblue-3));
   background-color: #FFFFFF;
 }
 :deep(.arco-form-item-label){
@@ -433,30 +445,10 @@ onMounted(async () => {
 :deep(.arco-input-wrapper .arco-input.arco-input-size-large){
   font-size: 16px;
 }
-// :deep(.items-center-button .arco-btn-primary){
-//   box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
-//   background-color: var(--primary-5);
-// }
-// :deep(.items-center-button .arco-btn-primary:hover){
-//   box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
-//   background-color: var(--primary-5);
-// }
-// :deep(.items-center-button.isClick .arco-btn-primary){
-//   background-color: var(--primary-6);
-// }
-// :deep(.items-center-button.isClick .arco-btn-primary:hover){
-//   background-color: var(--primary-6);
-// }
-
-// :deep(.arco-btn-primary){
-//   box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
-//   background-color: var(--primary-6);
-// }
-// :deep(.arco-btn-primary:hover){
-//   background-color: var(--primary-6);
-// }
+:deep(.arco-btn-primary:hover){
+  background-color: rgb(var(--arcoblue-6));
+}
 :deep(.arco-divider-text){
-  /*background: #fff;*/
   font-size: 16px;
   color: #C2C3C0;
   font-weight: 400;
@@ -475,43 +467,6 @@ onMounted(async () => {
 :deep(.arco-form-item-message){
   color: rgba(255,0,0,0);
 }
-/*:deep(.nsm7Bb-HzV7m-LgbsSe){
-  background: rgba(255,255,255,0);
-  border-radius: 13px;
-  height: 44px;
-  padding: 0 17px;
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe:hover){
-  background: rgba(255,255,255,0);
-  border-color: rgba(255,255,255,0);
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe span){
-  opacity: 0;
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe-Bz112c){
-  opacity: 0;
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb){
-  width: 40px;
-  height: 40px;
-  overflow: hidden;
-  background: rgba(255,255,255,0);
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb){
-  background: rgba(255,255,255,0);
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb:hover){
-  background: rgba(255,255,255,0);
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe:hover .nsm7Bb-HzV7m-LgbsSe-MJoBVe){
-  background: rgba(255,255,255,0);
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe-MJoBVe){
-  background: rgba(255,255,255,0);
-}
-:deep(.nsm7Bb-HzV7m-LgbsSe-MJoBVe:hover){
-  background: rgba(255,255,255,0);
-}*/
 :deep(.S9gUrf-YoZ4jf){
   opacity: 0;
 }
@@ -526,21 +481,18 @@ onMounted(async () => {
 .loginForm-bg{
   background: url('../../assets/images/login/login_formbg.png')no-repeat white;
   background-size: 100% auto;
-  box-shadow: var(--primary-6) 0px 5px 15px;
+  box-shadow: rgb(var(--arcoblue-6)) 0px 5px 15px;
 }
-/*.loginForm-bg:deep(.arco-btn-primary){
-  background-color: var(--primary-6) !important;
-}*/
 .loginForm-item{
-  border: 1px solid var(--primary-7);
+  border: 1px solid rgb(var(--arcoblue-7));
 }
 .loginForm-item:hover{
-  border: 2px solid var(--primary-5);
+  border: 2px solid rgb(var(--arcoblue-5));
 }
 .loginForm-itemActive{
-  border: 2px solid var(--primary-6);
+  border: 2px solid rgb(var(--arcoblue-6));
 }
 .loginForm-itemActive:hover{
-  border: 2px solid var(--primary-6);
+  border: 2px solid rgb(var(--arcoblue-6));
 }
 </style>

src/views/auth/components/registerSuccess.vue

@@ -56,10 +56,10 @@ onMounted(async () => {
 </script>
 <style scoped lang="scss">
 :deep(.arco-btn-primary){
-  background-color: var(--primary-6);
+  background-color: rgb(var(--arcoblue-6));
 }
 :deep(.arco-btn-primary:hover){
-  background-color: var(--primary-6);
+  background-color: rgb(var(--arcoblue-6));
 }
 .loginForm-bg{
   background: rgba(255, 255, 255, 0.7);

src/views/auth/forgePassword.vue

@@ -8,7 +8,7 @@
         <div class="flex justify-center">
           <div class="w-[463px] h-[620px] ">
             <div class="loginForm-bg w-full h-full rounded-[18px] flex flex-col">
-              <div class="text-center pt-[46px] primary-6">
+              <div class="text-center pt-[46px]">
                 <div class="text-[32px] font-bold">{{ t('login.forgetPassword') }}</div>
               </div>
               <a-space direction="vertical" class="px-[72px]">
@@ -462,7 +462,7 @@ watch(()=>currentStep.value,(newVal,oldVal)=>{
 :deep(.arco-input-focus){
   border-radius: 12px;
   box-shadow: rgba(60,85,62,0.18) 0px 5px 15px;
-  border: 2px solid var(--primary-6);
+  border: 2px solid rgb(var(--arcoblue-6));
   background-color: #FFFFFF;
 }
 :deep(.arco-form-item-label){
@@ -492,26 +492,26 @@ watch(()=>currentStep.value,(newVal,oldVal)=>{
 }
 :deep(.items-center-button .arco-btn-primary){
   box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
-  background-color: var(--primary-5);
+  background-color: rgb(var(--arcoblue-5));
 }
 :deep(.items-center-button .arco-btn-primary:hover){
   box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
-  background-color: var(--primary-5);
+  background-color: rgb(var(--arcoblue-5));
 }
 :deep(.items-center-button.isClick .arco-btn-primary){
-  background-color: var(--primary-6);
+  background-color: rgb(var(--arcoblue-6));
 }
 :deep(.items-center-button.isClick .arco-btn-primary:hover){
-  background-color: var(--primary-6);
+  background-color: rgb(var(--arcoblue-6));
 }
 .loginForm-item{
-  border: 1px solid var(--primary-4);
+  border: 1px solid rgb(var(--arcoblue-4));
 }
 .loginForm-itemActive{
-  border: 2px solid var(--primary-1);
+  border: 2px solid rgb(var(--arcoblue-1));
 }
 :deep(.arco-divider-vertical){
-  border-left: 1px solid var(--primary-4);
+  border-left: 1px solid rgb(var(--arcoblue-4));
 }
 :deep(.arco-form-item-label-required-symbol){
   display: none;

src/views/auth/register.vue

@@ -720,7 +720,7 @@ getSimples()
 :deep(.arco-input-focus){
   border-radius: 12px;
   box-shadow: rgba(60,85,62,0.18) 0px 5px 15px;
-  border: 2px solid var(--primary-6);
+  border: 2px solid rgb(var(--arcoblue-6));
   background-color: #FFFFFF;
 }
 :deep(.arco-form-item-label){
@@ -747,21 +747,21 @@ getSimples()
 .loginForm-bg{
   background: url('../../assets/images/login/login_formbg.png')no-repeat white;
   background-size: 100% auto;
-  box-shadow: var(--primary-6) 0px 5px 15px;
+  box-shadow: rgb(var(--arcoblue-6)) 0px 5px 15px;
 }
 :deep(.items-center-button .arco-btn-primary){
   box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
-  background-color: var(--primary-5);
+  background-color: rgb(var(--arcoblue-5));
 }
 :deep(.items-center-button .arco-btn-primary:hover){
   box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
-  background-color: var(--primary-5);
+  background-color: rgb(var(--arcoblue-5));
 }
 :deep(.items-center-button .isClick .arco-btn-primary){
-  background-color: var(--primary-6);
+  background-color: rgb(var(--arcoblue-6));
 }
 :deep(.items-center-button .isClick .arco-btn-primary:hover){
-  background-color: var(--primary-6);
+  background-color: rgb(var(--arcoblue-6));
 }
 :deep(.arco-form-item-label-required-symbol){
   display: none;
@@ -771,7 +771,7 @@ getSimples()
   text-indent: 17px;
 }
 :deep(.arco-divider-vertical){
-  border-left: 1px solid var(--primary-4);
+  border-left: 1px solid rgb(var(--arcoblue-4));
 }
 :deep(.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled)){
   // background-color: #EEEFEB;

src/views/personalCenter/accountCenter.vue

@@ -79,12 +79,12 @@ const handleDivScroll = (e: any) => {
     background: #FBFBFA;
 }
 .myOrder-text-l{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
 .myOrder-time{
-    color: var(--color-neutral-6);
+    color: rgb(rbg(var(--gray-6)));
 }
 </style>
\ No newline at end of file

src/views/personalCenter/commonPassengerInfo.vue

@@ -79,12 +79,12 @@ const handleDivScroll = (e: any) => {
     background: #FBFBFA;
 }
 .myOrder-text-l{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
 .myOrder-time{
-    color: var(--color-neutral-6);
+    color: rgb(rbg(var(--gray-6)));
 }
 </style>
\ No newline at end of file

src/views/personalCenter/components/LeftView.vue

@@ -140,17 +140,17 @@ getPersonalInfor()
 </script>
 <style scoped>
 .LeftViewImg{
-    border: 2px solid var(--primary-7);
+    border: 2px solid rgb(var(--arcoblue-7));
 }
 .LeftViewTisp{
-    background-color: var(--primary-9);
+    background-color: rgb(var(--arcoblue-9));
 }
 .LeftViewData{
-    color: var(--primary-6);
+    color: rgb(var(--arcoblue-6));
 }
 .LeftView-menu.active{
-    background-color: var(--primary-7);
-    color: var(--primary-6);
+    background-color: rgb(var(--arcoblue-7));
+    color: rgb(var(--arcoblue-6));
 }
 .LeftView-menu.active::after{
     content: '';
@@ -160,11 +160,11 @@ getPersonalInfor()
     transform: translateY(-50%);
     width: 4px;
     height: 12px;
-    background-color: var(--primary-6);
+    background-color: rgb(var(--arcoblue-6));
     border-radius: 2px;
 }
 .LeftView-menu:hover{
-    /* background-color: var(--primary-7); */
-    color: var(--primary-6);
+    /* background-color: rgb(var(--arcoblue-7)); */
+    color: rgb(var(--arcoblue-6));
 }
 </style>
\ No newline at end of file

src/views/personalCenter/coupon.vue

@@ -79,12 +79,12 @@ const handleDivScroll = (e: any) => {
     background: #FBFBFA;
 }
 .myOrder-text-l{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
 .myOrder-time{
-    color: var(--color-neutral-6);
+    color: rgb(rbg(var(--gray-6)));
 }
 </style>
\ No newline at end of file

src/views/personalCenter/distributionCenter.vue

@@ -79,12 +79,12 @@ const handleDivScroll = (e: any) => {
     background: #FBFBFA;
 }
 .myOrder-text-l{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
 .myOrder-time{
-    color: var(--color-neutral-6);
+    color: rgb(rbg(var(--gray-6)));
 }
 </style>
\ No newline at end of file

src/views/personalCenter/myCollection.vue

@@ -79,12 +79,12 @@ const handleDivScroll = (e: any) => {
     background: #FBFBFA;
 }
 .myOrder-text-l{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
 .myOrder-time{
-    color: var(--color-neutral-6);
+    color: rgb(rbg(var(--gray-6)));
 }
 </style>
\ No newline at end of file

src/views/personalCenter/myOrder.vue

@@ -233,47 +233,47 @@ const handleDivScroll = (e: any) => {
     background: #FBFBFA;
 }
 .myOrder-bin{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 .myOrder-status:hover{
-    color: var(--primary-6);
+    color: rgb(var(--arcoblue-6));
 }
 .myOrder-status.active .myOrder-status-border div{
     width: 20px;
     height: 5px;
-    background-color: var(--primary-6);
+    background-color: rgb(var(--arcoblue-6));
     border-radius: 3px;
 }
 .myOrder-status.active{
-    color: var(--color-neutral-10);
+    color: rbg(var(--gray-10));
 }
 .myOrderList{
-    border-color: var(--primary-7);
+    border-color: rgb(var(--arcoblue-7));
 }
 .myOrder-number{
-    color: var(--primary-9);
+    color: rgb(var(--arcoblue-9));
 }
 .myOrderList-header{
-    background-color: var(--primary-10);
-    color: var(--color-neutral-10);
+    background-color: rgb(var(--arcoblue-10));
+    color: rbg(var(--gray-10));
 }
 .myOrder-sta{
-    color: var(--primary-9);
+    color: rgb(var(--arcoblue-9));
 }
 .myOrder-text-l{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
 .orderType-down{
     background: #F3F3F2;
-    color: var(--color-neutral-5);
+    color: rgb(rbg(var(--gray-5)));
 }
 .orderType-text{
-    color: var(--color-neutral-5);
+    color: rgb(rbg(var(--gray-5)));
 }
 .orderType-text:hover{
-    color: var(--color-neutral-5);
+    color: rgb(rbg(var(--gray-5)));
 }
 </style>
\ No newline at end of file

src/views/personalCenter/systemMessage.vue

@@ -117,12 +117,12 @@ const handleDivScroll = (e: any) => {
     background: #FBFBFA;
 }
 .myOrder-text-l{
-    color: var(--color-neutral-7);
+    color: rgb(rbg(var(--gray-7)));
 }
 :deep(.arco-scrollbar-track-direction-vertical){
     display: none;
 }
 .myOrder-time{
-    color: var(--color-neutral-6);
+    color: rgb(rbg(var(--gray-6)));
 }
 </style>
\ No newline at end of file