2
0

适配暗黑色

This commit is contained in:
lai
2025-02-20 14:40:21 +08:00
parent 725c77da78
commit 8368a082ea
6 changed files with 35 additions and 27 deletions

View File

@@ -98,18 +98,19 @@ async function getCheckCode() {
<template>
<AForm ref="formRef" :model="model" :rules="rules">
<AFormItem name="username">
<AInput v-model:value="model.username" size="large" :placeholder="$t('page.login.common.userNamePlaceholder')" />
<AInput v-model:value="model.username" size="large" :placeholder="$t('page.login.common.userNamePlaceholder')" autocomplete="off"/>
</AFormItem>
<AFormItem name="password">
<AInputPassword
v-model:value="model.password"
size="large"
autocomplete="off"
:placeholder="$t('page.login.common.passwordPlaceholder')"
/>
</AFormItem>
<AFormItem>
<div class="flex gap-4">
<AInput v-model:value="model.code" size="large" :placeholder="$t('page.login.common.checkCode')">
<AInput v-model:value="model.code" size="large" :placeholder="$t('page.login.common.checkCode')" autocomplete="off" >
<template #suffix></template>
</AInput>
<AImage :preview="false" :src="codeImg" @click="getCheckCode" />

View File

@@ -353,12 +353,12 @@ const showSteps = computed(() => !isMobile.value);
<ARow :gutter="[8,2]">
<ACol :span="24" :lg="24">
<AFormItem name="username" :label="t('page.login.register.username')">
<AInput v-model:value="basicModel.username" />
<AInput v-model:value="basicModel.username" autocomplete="off"/>
</AFormItem>
</ACol>
<ACol :span="24" :lg="24">
<AFormItem name="fullName" :label="t('page.login.register.fullName')">
<AInput v-model:value="basicModel.fullName" />
<AFormItem name="fullName" :label="t('page.login.register.fullName')" >
<AInput v-model:value="basicModel.fullName" autocomplete="off"/>
</AFormItem>
</ACol>
<ACol :xs="12" :sm="12" :lg="24">
@@ -386,6 +386,7 @@ const showSteps = computed(() => !isMobile.value);
:placeholder="t('page.login.common.phonePlaceholder')"
@input="handlePhoneInput"
:maxLength="20"
autocomplete="off"
allow-clear
/>
</AFormItem>
@@ -417,7 +418,7 @@ const showSteps = computed(() => !isMobile.value);
readonly
class="mb-16px"
size="small"
:style="{ fontSize: '14px', lineHeight: '1.6' }"
:style="{ fontSize: '14px', lineHeight: '1.6', backgroundColor: 'rgba(255, 255, 255, 0.1)' }"
/>
<div class="mb-16px">
<ACheckbox
@@ -448,10 +449,11 @@ const showSteps = computed(() => !isMobile.value);
:wrapper-col="{ span: 16 }"
class="compact-form"
>
<AFormItem name="email" :label="t('page.login.register.email')">
<AFormItem name="email" :label="t('page.login.register.email')" >
<AInput
v-model:value="securityModel.email"
:placeholder="t('page.login.common.emailPlaceholder')"
autocomplete="off"
/>
</AFormItem>
<AFormItem name="code" :label="t('page.login.register.code')">
@@ -459,6 +461,7 @@ const showSteps = computed(() => !isMobile.value);
<AInput
v-model:value="securityModel.code"
:placeholder="t('page.login.common.codePlaceholder')"
autocomplete="off"
/>
<AButton
size="small"

View File

@@ -97,11 +97,11 @@ async function handleSubmit() {
<template>
<AForm ref="formRef" :model="model" :rules="rules">
<AFormItem name="email">
<AInput v-model:value="model.email" size="large" :placeholder="t('page.login.common.emailPlaceholder')" />
<AInput v-model:value="model.email" size="large" :placeholder="t('page.login.common.emailPlaceholder')" autocomplete="off"/>
</AFormItem>
<AFormItem name="code">
<div class="w-full flex-y-center gap-8px">
<AInput v-model:value="model.code" size="large" :placeholder="t('page.login.common.codePlaceholder')" />
<AInput v-model:value="model.code" size="large" :placeholder="t('page.login.common.codePlaceholder')" autocomplete="off"/>
<AButton
size="small"
:disabled="isCounting"

View File

@@ -202,7 +202,7 @@ const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => {
:disabled="!paymentAmount || paymentAmount <= 0"
@click="handleRecharge"
>
¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
<span style="color: var(--text-color, var(--ant-text-color))"> ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }} </span>
</AButton>
</div>
@@ -231,7 +231,7 @@ const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => {
.recharge-option.selected,
.special-option.selected {
border-color: #1890ff;
background-color: #e6f7ff;
background: rgba(63, 97, 207, 0.1);
}
.special-option {
@@ -281,7 +281,7 @@ const handlePaymentConfirm = async (paymentMethod: 'alipay' | 'wxpay') => {
}
.payment-section {
background-color: #fff;
background-color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

View File

@@ -372,7 +372,7 @@ onMounted(async () => {
</div>
<!-- 套餐详情 -->
<div class="package-details">
<a-card>
<h3 class="section-title">{{ t('page.setmeal.mealdetail') }}</h3>
<div class="details-list">
<div class="detail-item">
@@ -426,7 +426,7 @@ onMounted(async () => {
</button>
</div>
</div>
</div>
</a-card>
<!-- 订单确认弹窗 -->
<OrderConfirmModal
@@ -447,7 +447,8 @@ onMounted(async () => {
}
.price-header {
background: #fff1f0;
border-color: #ff4d4f;
background: rgba(218, 7, 7, 0.1);
padding: 20px;
border-radius: 12px;
margin-bottom: 16px;
@@ -473,14 +474,14 @@ onMounted(async () => {
.subtitle {
font-size: 14px;
color: #666;
color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
}
.section-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 16px;
color: #333;
color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
position: relative;
padding-left: 12px;
}
@@ -505,7 +506,7 @@ onMounted(async () => {
}
.option-card {
background: white;
background: var(--primary-color, var(--ant-primary-color));
padding: 16px;
border-radius: 8px;
text-align: center;
@@ -522,7 +523,8 @@ onMounted(async () => {
.option-card.selected {
border-color: #ff4d4f;
background: #fff1f0;
background: rgba(218, 7, 7, 0.1);
}
.recommended-tag {
@@ -554,12 +556,12 @@ onMounted(async () => {
.label {
width: 80px;
color: #666;
color: var(--primary-color, var(--ant-primary-color));
}
.value {
flex: 1;
color: #333;
color: var(--primary-color, var(--ant-primary-color));
}
.value.highlight {
@@ -596,18 +598,18 @@ onMounted(async () => {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
color: #333;
color: var(--primary-color, var(--ant-primary-color));
}
.traffic {
font-size: 14px;
color: #666;
color: var(--primary-color, var(--ant-primary-color));
margin-top: 8px;
}
.device-count {
font-size: 14px;
color: #666;
color: var(--primary-color, var(--ant-primary-color));
margin-top: 4px;
}

View File

@@ -56,6 +56,7 @@ const handleClick: MenuProps['onClick'] = e => {
</script>
<template>
<a-card>
<div class="recharge-container">
<div class="recharge-content-wrapper">
<!-- 返回按钮 -->
@@ -84,12 +85,13 @@ const handleClick: MenuProps['onClick'] = e => {
</div>
</div>
</div>
</a-card>
</template>
<style scoped>
.recharge-container {
min-height: 100vh;
background-color: #f5f5f7;
background-color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
padding: 16px;
}
@@ -103,13 +105,13 @@ const handleClick: MenuProps['onClick'] = e => {
}
.recharge-menu {
background-color: #fff;
background-color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
border-radius: 8px;
margin-bottom: 16px;
}
.recharge-content {
background-color: #fff;
background-color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
border-radius: 8px;
padding: 16px;
min-height: 400px;