Skip to content

B
boyueCEnd
Commit 51af7aff authored by youjie's avatar youjie
Browse files
Options

颜色变量调整

parent 2c8f19a1
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 162 deletions
src/App.vue
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
<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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
View file @ 51af7aff
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment