适配暗黑色
This commit is contained in:
@@ -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" />
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user