version temp3

src/views/Agent.vue

@@ -1,22 +1,14 @@
 <template>
     <div class="p-4 bg-gradient-to-b from-gray-50/50 to-gray-100/30 min-h-screen">
         <!-- 资产卡片 -->
-        <div
-            class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-red-50/70 to-red-100/50 p-6"
-        >
+        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-primary-50/70 to-primary-100/50 p-6">
             <div class="flex justify-between items-center mb-3">
                 <div class="flex items-center">
-                    <van-icon
-                        name="balance-pay"
-                        class="text-xl mr-2"
-                        style="color: var(--van-theme-primary);"
-                    />
+                    <van-icon name="balance-pay" class="text-xl mr-2" style="color: var(--van-theme-primary);" />
                     <span class="text-lg font-bold" style="color: var(--van-text-color);">余额</span>
                 </div>
-                <span class="text-3xl font-bold"
-                    style="color: var(--van-theme-primary);"
-                    >¥ {{ (data?.balance || 0).toFixed(2) }}</span
-                >
+                <span class="text-3xl font-bold" style="color: var(--van-theme-primary);">¥ {{ (data?.balance ||
+                    0).toFixed(2) }}</span>
             </div>
             <div class="text-sm mb-2" style="color: var(--van-text-color-2);">
                 累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}
@@ -25,19 +17,15 @@
                 冻结余额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}
             </div>
             <div class="grid grid-cols-2 gap-3">
-                <button
-                    @click="toWithdraw"
+                <button @click="toWithdraw"
                     class="text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center"
-                    style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));"
-                >
+                    style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));">
                     <van-icon name="gold-coin" class="mr-1" />
                     提现
                 </button>
-                <button
-                    @click="toWithdrawDetails"
+                <button @click="toWithdrawDetails"
                     class="bg-white/90 border rounded-full py-2 px-4 shadow-sm flex items-center justify-center"
-                    style="color: var(--van-text-color-2); border-color: var(--van-border-color);"
-                >
+                    style="color: var(--van-text-color-2); border-color: var(--van-border-color);">
                     <van-icon name="notes" class="mr-1" />
                     提现记录
                 </button>
@@ -45,22 +33,14 @@
         </div>
 
         <!-- 直推报告收益 -->
-        <div
-            class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-orange-50/40 to-red-50/50 p-6"
-        >
+        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-warning-50/60 to-warning-100/50 p-6">
             <div class="flex justify-between items-center mb-4">
                 <div class="flex items-center">
-                    <van-icon
-                        name="balance-list"
-                        class="text-xl mr-2"
-                        style="color: var(--van-theme-primary);"
-                    />
-                    <span class="text-lg font-bold" style="color: var(--van-text-color);"
-                        >直推报告收益</span
-                    >
+                    <van-icon name="balance-list" class="text-xl mr-2" style="color: var(--color-warning);" />
+                    <span class="text-lg font-bold" style="color: var(--van-text-color);">直推报告收益</span>
                 </div>
                 <div class="text-right">
-                    <div class="text-2xl font-bold" style="color: var(--van-theme-primary);">
+                    <div class="text-2xl font-bold" style="color: var(--color-warning);">
                         ¥
                         {{
                             (data?.direct_push?.total_commission || 0).toFixed(
@@ -76,73 +56,56 @@
 
             <!-- 日期选择 -->
             <div class="grid grid-cols-3 gap-2 mb-6">
-                <button
-                    v-for="item in promoteDateOptions"
-                    :key="item.value"
-                    @click="selectedPromoteDate = item.value"
-                    class="rounded-full transition-all py-1 px-4 text-sm"
-                    :class="[
+                <button v-for="item in promoteDateOptions" :key="item.value" @click="selectedPromoteDate = item.value"
+                    class="rounded-full transition-all py-1 px-4 text-sm" :class="[
                         selectedPromoteDate === item.value
                             ? 'text-white shadow-md'
                             : 'bg-white/90 border',
-                    ]"
-                    :style="selectedPromoteDate === item.value
-                        ? 'background-color: var(--van-theme-primary);'
-                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'"
-                >
+                    ]" :style="selectedPromoteDate === item.value
+                        ? 'background-color: var(--color-warning);'
+                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
                     {{ item.label }}
                 </button>
             </div>
 
             <div class="grid grid-cols-2 gap-4 mb-6">
-                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(162, 37, 37, 0.08);">
+                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="gold-coin" class="mr-1" />本日收益
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: var(--van-theme-primary);">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                         ¥
                         {{
                             currentPromoteData.commission?.toFixed(2) || "0.00"
                         }}
                     </div>
                 </div>
-                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(162, 37, 37, 0.08);">
+                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="description" class="mr-1" />有效报告
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: var(--van-theme-primary);">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                         {{ currentPromoteData.report || 0 }} 份
                     </div>
                 </div>
             </div>
 
-            <div
-                class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
-                style="color: var(--van-theme-primary);"
-                @click="goToPromoteDetail"
-            >
+            <div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
+                style="color: var(--color-warning);" @click="goToPromoteDetail">
                 <span>查看收益明细</span>
                 <span class="text-lg">→</span>
             </div>
         </div>
 
         <!-- 活跃下级奖励 -->
-        <div
-            class="rounded-xl shadow-lg bg-gradient-to-r from-green-50/40 to-emerald-50/30 p-6"
-        >
+        <div class="rounded-xl shadow-lg bg-gradient-to-r from-success-50/50 to-success-100/40 p-6">
             <div class="flex justify-between items-center mb-4">
                 <div class="flex items-center">
-                    <van-icon
-                        name="friends"
-                        class="text-xl mr-2"
-                        style="color: #10b981;"
-                    />
-                    <span class="text-lg font-bold" style="color: var(--van-text-color);"
-                        >活跃下级奖励</span
-                    >
+                    <van-icon name="friends" class="text-xl mr-2" style="color: var(--color-success);" />
+                    <span class="text-lg font-bold" style="color: var(--van-text-color);">活跃下级奖励</span>
                 </div>
                 <div class="text-right">
-                    <div class="text-2xl font-bold" style="color: #10b981;">
+                    <div class="text-2xl font-bold" style="color: var(--color-success);">
                         ¥
                         {{
                             (data?.active_reward?.total_reward || 0).toFixed(2)
@@ -154,20 +117,14 @@
 
             <!-- 日期选择 -->
             <div class="grid grid-cols-3 gap-2 mb-6">
-                <button
-                    v-for="item in activeDateOptions"
-                    :key="item.value"
-                    @click="selectedActiveDate = item.value"
-                    class="rounded-full transition-all py-1 px-4 text-sm"
-                    :class="[
+                <button v-for="item in activeDateOptions" :key="item.value" @click="selectedActiveDate = item.value"
+                    class="rounded-full transition-all py-1 px-4 text-sm" :class="[
                         selectedActiveDate === item.value
                             ? 'text-white shadow-md'
                             : 'bg-white/90 border',
-                    ]"
-                    :style="selectedActiveDate === item.value
-                        ? 'background-color: #10b981;'
-                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'"
-                >
+                    ]" :style="selectedActiveDate === item.value
+                        ? 'background-color: var(--color-success);'
+                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
                     {{ item.label }}
                 </button>
             </div>
@@ -177,7 +134,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="medal" class="mr-1" />本日奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{ (currentActiveData.active_reward || 0).toFixed(2) }}
                     </div>
@@ -186,7 +143,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="discount" class="mr-1" />下级推广奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{
                             (currentActiveData.sub_promote_reward || 0).toFixed(
@@ -199,7 +156,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="contact" class="mr-1" />新增活跃奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{
                             (currentActiveData.sub_upgrade_reward || 0).toFixed(
@@ -212,7 +169,7 @@
                     <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                         <van-icon name="fire" class="mr-1" />下级转化奖励
                     </div>
-                    <div class="text-xl font-bold mt-1" style="color: #10b981;">
+                    <div class="text-xl font-bold mt-1" style="color: var(--color-success);">
                         ¥
                         {{
                             (
@@ -223,22 +180,17 @@
                 </div>
             </div>
 
-            <div
-                class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
-                style="color: #10b981;"
-                @click="goToActiveDetail"
-            >
+            <div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
+                style="color: var(--color-success);" @click="goToActiveDetail">
                 <span>查看奖励明细</span>
                 <span class="text-lg">→</span>
             </div>
 
             <!-- 添加查看下级按钮 -->
             <div class="mt-4">
-                <button
-                    @click="toSubordinateList"
-                    class="w-full text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center"
-                    style="background: linear-gradient(135deg, #10b981, #059669);"
-                >
+                <button @click="toSubordinateList"
+                    class="w-full text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center bg-success"
+                    style="background: linear-gradient(135deg, var(--color-success), var(--color-success-600));">
                     <van-icon name="friends" class="mr-1" />
                     查看我的下级
                 </button>

src/views/Inquire.vue

@@ -1,31 +1,17 @@
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from "vue";
-import { aesEncrypt } from "@/utils/crypto";
+import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { useUserStore } from "@/stores/userStore";
-import { showConfirmDialog } from "vant";
-
-import Payment from "@/components/Payment.vue";
-import CarNumberInput from "@/components/CarNumberInput.vue";
+import InquireForm from "@/components/InquireForm.vue";
 
 const route = useRoute();
-const router = useRouter();
-const userStore = useUserStore();
-const showPayment = ref(false);
-const queryId = ref(null);
-const name = ref("");
-const idCard = ref("");
-const mobile = ref("");
-const verificationCode = ref("");
-const agreeToTerms = ref(false);
-const isCountingDown = ref(false);
-const countdown = ref(60);
 const feature = ref(route.params.feature);
+
+// 获取产品信息
 const featureData = ref({});
 
-onMounted(() => {
+onMounted(async () => {
     isFinishPayment();
-    getProduct();
+    await getProduct();
 });
 
 function isFinishPayment() {
@@ -35,6 +21,7 @@ function isFinishPayment() {
         router.push({ path: "/report", query: { orderNo } });
     }
 }
+
 async function getProduct() {
     const { data, error } = await useApiFetch(`/product/en/${feature.value}`)
         .get()
@@ -55,573 +42,8 @@ async function getProduct() {
         }
     }
 }
-
-const isPhoneNumberValid = computed(() => {
-    return /^1[3-9]\d{9}$/.test(mobile.value);
-});
-const isIdCardValid = computed(() => /^\d{17}[\dX]$/i.test(idCard.value));
-
-// 检查登录状态
-const isLoggedIn = computed(() => userStore.isLoggedIn);
-
-// 处理输入框点击事件
-const handleInputClick = async () => {
-    if (!isLoggedIn.value) {
-        try {
-            await showConfirmDialog({
-                title: '提示',
-                message: '您需要登录后才能进行查询，是否前往登录？',
-                confirmButtonText: '前往登录',
-                cancelButtonText: '取消',
-            });
-            // 用户点击确认，跳转到登录页面
-            router.push('/login');
-        } catch {
-            // 用户点击取消，什么都不做
-        }
-    }
-};
-
-function handleSubmit() {
-    // 如果未登录，跳转到登录页面
-    if (!isLoggedIn.value) {
-        router.push('/login');
-        return;
-    }
-
-    // 基本协议验证
-    if (!agreeToTerms.value) {
-        showToast({ message: `请阅读并同意用户协议和隐私政策` });
-        return;
-    }
-
-    if (
-        !validateField("name", name.value, (v) => v, "请输入姓名") ||
-        !validateField(
-            "mobile",
-            mobile.value,
-            (v) => isPhoneNumberValid.value,
-            "请输入有效的手机号"
-        ) ||
-        !validateField(
-            "idCard",
-            idCard.value,
-            (v) => isIdCardValid.value,
-            "请输入有效的身份证号码"
-        ) ||
-        !validateField(
-            "verificationCode",
-            verificationCode.value,
-            (v) => v,
-            "请输入验证码"
-        )
-    ) {
-        return;
-    }
-    submitRequest();
-}
-const validateField = (field, value, validationFn, errorMessage) => {
-    if (isHasInput(field) && !validationFn(value)) {
-        showToast({ message: errorMessage });
-        return false;
-    }
-    return true;
-};
-
-const defaultInput = ["name", "idCard", "mobile", "verificationCode"];
-const isHasInput = (input) => {
-    return defaultInput.includes(input);
-};
-async function submitRequest() {
-    const req = {
-        name: name.value,
-        id_card: idCard.value,
-        mobile: mobile.value,
-        code: verificationCode.value
-    };
-    const reqStr = JSON.stringify(req);
-    const encodeData = aesEncrypt(reqStr, "ff83609b2b24fc73196aac3d3dfb874f");
-    const { data, error } = await useApiFetch(`/query/service/${feature.value}`)
-        .post({ data: encodeData })
-        .json();
-    if (data.value.code === 200) {
-        queryId.value = data.value.data.id;
-        showPayment.value = true;
-    }
-}
-
-async function sendVerificationCode() {
-    if (isCountingDown.value || !isPhoneNumberValid.value) return;
-    if (!isPhoneNumberValid.value) {
-        showToast({ message: "请输入有效的手机号" });
-        return;
-    }
-
-    const { data, error } = await useApiFetch("/auth/sendSms")
-        .post({ mobile: mobile.value, actionType: "query" })
-        .json();
-
-    if (!error.value && data.value.code === 200) {
-        showToast({ message: "验证码发送成功", type: "success" });
-        startCountdown();
-        // 聚焦到验证码输入框
-        nextTick(() => {
-            const verificationCodeInput = document.getElementById('verificationCode');
-            if (verificationCodeInput) {
-                verificationCodeInput.focus();
-            }
-        });
-    } else {
-        showToast({ message: "验证码发送失败，请重试" });
-    }
-}
-let timer = null;
-
-function startCountdown() {
-    isCountingDown.value = true;
-    countdown.value = 60;
-    timer = setInterval(() => {
-        if (countdown.value > 0) {
-            countdown.value--;
-        } else {
-            clearInterval(timer);
-            isCountingDown.value = false;
-        }
-    }, 1000);
-}
-function toUserAgreement() {
-    router.push(`/userAgreement`);
-}
-
-function toPrivacyPolicy() {
-    router.push(`/privacyPolicy`);
-}
-function toAuthorization() {
-    router.push(`/authorization`);
-}
-
-const toExample = () => {
-    router.push(`/example?feature=${feature.value}`);
-};
-// 获取功能图标
-const getFeatureIcon = (apiId) => {
-    const iconMap = {
-        JRZQ4AA8: "/inquire_icons/huankuanyali.svg", // 还款压力
-        QCXG7A2B: "/inquire_icons/mingxiacheliang.svg", // 名下车辆
-        BehaviorRiskScan: "/inquire_icons/fengxianxingwei.svg", // 风险行为扫描
-        IVYZ5733: "/inquire_icons/hunyinzhuangtai.svg", // 婚姻状态
-        PersonEnterprisePro: "/inquire_icons/renqiguanxi.svg", // 人企关系加强版
-        JRZQ0A03: "/inquire_icons/jiedaishenqing.svg", // 借贷申请记录
-        FLXG3D56: "/inquire_icons/jiedaiweiyue.svg", // 借贷违约失信
-        FLXG0V4B: "/inquire_icons/sifasheyu.svg", // 司法涉诉
-        JRZQ8203: "/inquire_icons/jiedaixingwei.svg", // 借贷行为记录
-        JRZQ09J8: "/inquire_icons/beijianguanrenyuan.svg", // 收入评估
-        JRZQ4B6C: "/inquire_icons/fengxianxingwei.svg", // 探针C风险评估
-    };
-    return iconMap[apiId] || "/inquire_icons/default.svg";
-};
-
-// 处理图标加载错误
-const handleIconError = (event) => {
-    // 如果图标加载失败，显示默认图标或隐藏
-    event.target.style.display = "none";
-};
-
-// 获取卡片样式类
-const getCardClass = (index) => {
-    const colorIndex = index % 4;
-    const colorClasses = [
-        'bg-gradient-to-br from-blue-50 via-blue-25 to-white ',
-        'bg-gradient-to-br from-green-50 via-green-25 to-white ',
-        'bg-gradient-to-br from-purple-50 via-purple-25 to-white ',
-        'bg-gradient-to-br from-orange-50 via-orange-25 to-white '
-    ];
-    return colorClasses[colorIndex];
-};
-
-onUnmounted(() => {
-    if (timer) {
-        clearInterval(timer);
-    }
-});
 </script>
 
 <template>
-    <div class="inquire-bg min-h-screen p-6">
-        <div class="mb-6 text-center text-3xl font-bold" style="color: var(--van-theme-primary);">
-            {{ featureData.product_name }}
-        </div>
-        <div class="card">
-            <div class="mb-4 text-lg font-semibold" style="color: var(--van-text-color);">基本信息</div>
-            <div class="mb-4">
-                <label for="name" class="form-label block mb-2">姓名</label>
-                <input v-model="name" id="name" type="text" placeholder="请输入姓名" class="form-input"
-                    @click="handleInputClick" />
-            </div>
-            <div class="mb-4">
-                <label for="idCard" class="form-label block mb-2">身份证号</label>
-                <input v-model="idCard" id="idCard" type="text" placeholder="请输入身份证号" class="form-input"
-                    @click="handleInputClick" />
-            </div>
-            <div class="mb-4">
-                <label for="mobile" class="form-label block mb-2">手机号</label>
-                <input v-model="mobile" id="mobile" type="tel" placeholder="请输入手机号" class="form-input"
-                    @click="handleInputClick" />
-            </div>
-            <div class="mb-4">
-                <label for="verificationCode" class="form-label block mb-2">验证码</label>
-                <div class="flex items-center gap-2">
-                    <input v-model="verificationCode" id="verificationCode" placeholder="请输入验证码" maxlength="6"
-                        class="form-input flex-1 min-w-0" @click="handleInputClick" />
-                    <button
-                        class="px-4 py-2 text-sm whitespace-nowrap flex-shrink-0 rounded-lg border transition-colors"
-                        :class="isCountingDown || !isPhoneNumberValid
-                            ? 'text-gray-400 border-gray-300 bg-gray-50'
-                            : 'text-white border-transparent'" :style="isCountingDown || !isPhoneNumberValid
-                                ? ''
-                                : 'background-color: var(--van-theme-primary);'"
-                        :disabled="isCountingDown || !isPhoneNumberValid" @click="sendVerificationCode">
-                        {{
-                            isCountingDown
-                                ? `${countdown}s重新获取`
-                                : "获取验证码"
-                        }}
-                    </button>
-                </div>
-            </div>
-
-            <div class="mb-4 flex items-center">
-                <input type="checkbox" v-model="agreeToTerms" />
-                <span class="ml-2 text-xs" style="color: var(--van-text-color-2);">
-                    我已阅读并同意
-                    <span @click="toUserAgreement" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《用户协议》</span>
-                    <span @click="toPrivacyPolicy" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《隐私政策》</span>
-                    <span @click="toAuthorization" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《授权书》</span>
-                </span>
-            </div>
-            <div class="flex flex-col sm:flex-row gap-2">
-                <button
-                    class="flex-1 sm:w-24 rounded-xl sm:rounded-l-xl sm:rounded-r-none py-3 text-white text-base border transition-colors"
-                    style="background-color: var(--van-theme-primary-light); color: var(--van-theme-primary); border-color: var(--van-theme-primary);"
-                    @click="toExample">
-                    示例报告
-                </button>
-                <button
-                    class="flex-1 rounded-xl sm:rounded-l-none sm:rounded-r-xl py-3 text-white text-base transition-colors"
-                    style="background-color: var(--van-theme-primary);" @click="handleSubmit">
-                    {{ isLoggedIn ? '立即查询' : '前往登录' }}
-                </button>
-            </div>
-        </div>
-        <div class="card mt-3" v-if="featureData.features && featureData.features.length > 0">
-            <div class="mb-3 text-base font-semibold flex items-center" style="color: var(--van-text-color);">
-                <div class="w-1 h-5 rounded-full mr-2"
-                    style="background: linear-gradient(to bottom, var(--van-theme-primary), var(--van-theme-primary-dark));">
-                </div>
-                报告包含内容
-            </div>
-            <div class="grid grid-cols-4 gap-2">
-                <template v-for="(feature, index) in featureData.features" :key="feature.id">
-                    <!-- FLXG0V4B 特殊处理：显示8个独立的案件类型 -->
-                    <template v-if="feature.api_id === 'FLXG0V4B'">
-                        <div v-for="(caseType, caseIndex) in [
-                            { name: '管辖案件', icon: 'beijianguanrenyuan.svg' },
-                            { name: '刑事案件', icon: 'xingshi.svg' },
-                            { name: '民事案件', icon: 'minshianjianguanli.svg' },
-                            { name: '失信被执行', icon: 'shixinren.svg' },
-                            { name: '行政案件', icon: 'xingzhengfuwu.svg' },
-                            { name: '赔偿案件', icon: 'yuepeichang.svg' },
-                            { name: '执行案件', icon: 'zhixinganjian.svg' },
-                            { name: '限高被执行', icon: 'xianzhigaoxiaofei.svg' },
-                        ]" :key="`${feature.id}-${caseIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="mb-1">
-                                <img :src="`/inquire_icons/${caseType.icon}`" :alt="caseType.name"
-                                    class="w-6 h-6 drop-shadow-sm mx-auto" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight font-medium"
-                                style="word-break: break-all; line-height: 1.1; min-height: 28px; display: flex; align-items: center; justify-content: center;">
-                                {{ caseType.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG8B4D 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG8B4D'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '要素核查', icon: 'beijianguanrenyuan.svg' },
-                            { name: '运营商核验', icon: 'mingxiacheliang.svg' },
-                            { name: '公安重点人员检验', icon: 'xingshi.svg' },
-                            { name: '逾期风险综述', icon: 'huankuanyali.svg' },
-                            // { name: '法院曝光台信息', icon: 'sifasheyu.svg' },
-                            { name: '借贷评估', icon: 'jiedaishenqing.svg' },
-                            { name: '租赁风险评估', icon: 'jiedaixingwei.svg' },
-                            { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-                            { name: '规则风险提示', icon: 'fengxianxingwei.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-squaretext-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- CJRZQ5E9F 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'JRZQ5E9F'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '信用评分', icon: 'huankuanyali.svg' },
-                            { name: '贷款行为分析', icon: 'jiedaixingwei.svg' },
-                            { name: '机构分析', icon: 'jiedaishenqing.svg' },
-                            { name: '时间趋势分析', icon: 'zhixinganjian.svg' },
-                            { name: '风险指标详情', icon: 'fengxianxingwei.svg' },
-                            { name: '专业建议', icon: 'yuepeichang.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- PersonEnterprisePro/CQYGL3F8E 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'PersonEnterprisePro' || feature.api_id === 'QYGL3F8E'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '投资企业记录', icon: 'renqiguanxi.svg' },
-                            { name: '高管任职记录', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉诉风险', icon: 'sifasheyu.svg' },
-                            { name: '对外投资历史', icon: 'renqiguanxi.svg' },
-                            { name: '融资历史', icon: 'huankuanyali.svg' },
-                            { name: '行政处罚', icon: 'xingzhengfuwu.svg' },
-                            { name: '经营异常', icon: 'fengxianxingwei.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG6A2C 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG6A2C'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '命中风险标注', icon: 'fengxianxingwei.svg' },
-                            { name: '公安重点人员核验', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉赌涉诈人员核验', icon: 'xingshi.svg' },
-                            { name: '风险名单', icon: 'jiedaiweiyue.svg' },
-                            { name: '历史借贷行为', icon: 'jiedaixingwei.svg' },
-                            { name: '近24个月放款情况', icon: 'jiedaishenqing.svg' },
-                            { name: '履约情况', icon: 'huankuanyali.svg' },
-                            { name: '历史逾期记录', icon: 'jiedaiweiyue.svg' },
-                            { name: '授信详情', icon: 'huankuanyali.svg' },
-                            { name: '租赁行为', icon: 'mingxiacheliang.svg' },
-                            { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-                            // { name: '法院风险信息', icon: 'sifasheyu.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium text-center"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- 其他功能正常显示 -->
-                    <div v-else
-                        class="aspect-square text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-between">
-                        <div class="flex items-center justify-center flex-1">
-                            <img :src="getFeatureIcon(feature.api_id)" :alt="feature.name"
-                                class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                        </div>
-                        <div class="text-xs leading-tight font-medium h-8 flex items-center justify-center text-center"
-                            style="word-break: break-all; line-height: 1.1">
-                            {{ feature.name }}
-                        </div>
-                    </div>
-                </template>
-            </div>
-            <div class="mt-3 text-center">
-                <div class="inline-flex items-center px-3 py-1.5 rounded-full border transition-all"
-                    style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8)); border-color: var(--van-theme-primary);">
-                    <div class="w-1.5 h-1.5 rounded-full mr-1.5" style="background-color: var(--van-theme-primary);">
-                    </div>
-                    <span class="text-xs font-medium" style="color: var(--van-theme-primary);">更多信息请解锁报告</span>
-                </div>
-            </div>
-        </div>
-        <div class="card mt-4">
-            <div class="mb-4 text-xl font-bold" style="color: var(--van-text-color);">
-                {{ featureData.product_name }}
-            </div>
-            <div class="mb-4 flex items-start justify-between">
-                <div class="text-lg" style="color: var(--van-text-color-2);">价格：</div>
-                <div>
-                    <div class="text-2xl font-semibold" style="color: var(--van-theme-primary);">
-                        ¥{{ featureData.sell_price }}
-                    </div>
-                </div>
-            </div>
-
-            <div class="mb-4 leading-relaxed" style="color: var(--van-text-color-2);" v-html="featureData.description">
-            </div>
-            <div class="mb-2 text-xs italic" style="color: var(--van-theme-primary);">
-                为保证用户的隐私以及数据安全，查询的结果生成30天之后将自动清除。
-            </div>
-        </div>
-    </div>
-    <Payment v-model="showPayment" :data="featureData" :id="queryId" type="query" @close="showPayment = false" />
-</template>
-
-<style scoped>
-.form-label {
-    @apply text-sm font-medium;
-    color: var(--van-text-color);
-}
-
-.form-input::placeholder {
-    color: var(--van-text-color-3);
-}
-
-.form-input {
-    @apply w-full border-b px-2 py-3 focus:outline-none text-base transition-colors;
-    min-height: 44px;
-    border-color: var(--van-border-color);
-    color: var(--van-text-color);
-    background-color: transparent;
-}
-
-.form-input:focus {
-    border-color: var(--van-theme-primary);
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-    .form-input {
-        font-size: 16px;
-        /* 防止iOS缩放 */
-        padding: 12px 8px;
-    }
-
-    .form-label {
-        font-size: 14px;
-        margin-bottom: 8px;
-    }
-}
-
-.inquire-bg {
-    /* 优雅的渐变背景 - 增强对比度 */
-    background: linear-gradient(135deg,
-            #f0f4f8 0%,
-            #e2e8f0 25%,
-            #cbd5e1 50%,
-            #e2e8f0 75%,
-            #f0f4f8 100%) !important;
-
-    /* 优化性能的纹理效果 - 减少层数 */
-    background-image:
-        /* 主要圆形纹理 */
-        radial-gradient(circle at 25% 75%, rgba(162, 37, 37, 0.15) 0%, transparent 65%),
-        radial-gradient(circle at 75% 25%, rgba(162, 37, 37, 0.12) 0%, transparent 60%),
-
-        /* 简化网格纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.06) 25%, transparent 25%, transparent 75%, rgba(162, 37, 37, 0.06) 75%) !important;
-
-    /* 优化尺寸和位置 */
-    background-size:
-        500px 500px,
-        450px 450px,
-        80px 80px !important;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0 !important;
-
-    /* 确保背景覆盖整个视口 */
-    min-height: 100vh;
-    position: relative;
-
-    /* 性能优化 */
-    background-attachment: fixed;
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 优化性能的叠加纹理层 */
-.inquire-bg::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-        /* 简化圆形纹理 */
-        radial-gradient(circle at 20% 30%, rgba(162, 37, 37, 0.10) 0%, transparent 60%),
-        radial-gradient(circle at 80% 70%, rgba(162, 37, 37, 0.08) 0%, transparent 55%),
-
-        /* 简化线条纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.05) 0%, transparent 50%, rgba(162, 37, 37, 0.05) 100%);
-
-    background-size:
-        400px 400px,
-        350px 350px,
-        200px 2px;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0;
-
-    pointer-events: none;
-    z-index: -1;
-
-    /* 性能优化 */
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 卡片样式优化 */
-.card {
-    @apply shadow-lg rounded-xl p-6 transition-all hover:shadow-xl;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06),
-        0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-/* 按钮悬停效果 */
-button:hover {
-    transform: translateY(-1px);
-}
-
-button:active {
-    transform: translateY(0);
-}
-</style>
+    <InquireForm :type="'normal'" :feature="feature" :feature-data="featureData" />
+</template>

src/views/Login.vue

@@ -148,67 +148,56 @@ const onClickLeft = () => {
 <template>
     <div class="login-layout ">
         <van-nav-bar fixed placeholder title="用户登录" left-text="" left-arrow @click-left="onClickLeft" />
-        <div class="login px-8 relative z-10">
-            <div class="mb-8 pt-8 text-left">
+        <div class="login px-4 relative z-10">
+            <div class="mb-8 pt-20 text-left">
                 <div class="flex flex-col items-center">
                     <img class="h-16 w-16 rounded-full shadow" src="/logo.jpg" alt="Logo" />
                     <div class="text-3xl mt-4 text-slate-700 font-bold">天远数据</div>
                 </div>
             </div>
 
-            <div class="space-y-5">
+            <!-- 登录表单 -->
+            <div class="login-form">
                 <!-- 手机号输入 -->
-                <div :class="['input-container', phoneFocused ? 'focused' : '']">
-                    <input v-model="phoneNumber" class="input-field" type="tel" placeholder="请输入手机号" maxlength="11"
-                        @focus="phoneFocused = true" @blur="phoneFocused = false" />
+                <div class="form-item">
+                    <div class="form-label">手机号</div>
+                    <input v-model="phoneNumber" class="form-input" type="tel" placeholder="请输入手机号" maxlength="11" />
                 </div>
 
                 <!-- 验证码输入 -->
-                <div v-if="!isPasswordLogin">
-                    <div class="flex items-center justify-between">
-                        <div :class="['input-container', codeFocused ? 'focused' : '']">
-                            <input v-model="verificationCode" id="verificationCode" class="input-field"
-                                placeholder="请输入验证码" maxlength="6" @focus="codeFocused = true"
-                                @blur="codeFocused = false" />
-                        </div>
-                        <button
-                            class="ml-2 px-4 py-2 text-sm font-bold flex-shrink-0 rounded-lg transition duration-300"
-                            :class="isCountingDown || !isPhoneNumberValid ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'text-white hover:opacity-90'"
-                            :style="isCountingDown || !isPhoneNumberValid ? '' : 'background-color: #a22525'"
-                            @click="sendVerificationCode">
-                            {{ isCountingDown ? `${countdown}s重新获取` : '获取验证码' }}
+                <div class="form-item">
+                    <div class="form-label">验证码</div>
+                    <div class="verification-input-wrapper">
+                        <input v-model="verificationCode" id="verificationCode" class="form-input verification-input"
+                            placeholder="请输入验证码" maxlength="6" />
+                        <button class="get-code-btn" :class="{ 'disabled': isCountingDown || !isPhoneNumberValid }"
+                            @click="sendVerificationCode" :disabled="isCountingDown || !isPhoneNumberValid">
+                            {{ isCountingDown ? `${countdown}s` : '获取验证码' }}
                         </button>
                     </div>
                 </div>
 
-                <!-- 密码输入 -->
-                <div v-if="isPasswordLogin" :class="['input-container', passwordFocused ? 'focused' : '']">
-                    <input v-model="password" class="input-field" type="password" placeholder="请输入密码"
-                        @focus="passwordFocused = true" @blur="passwordFocused = false" />
-                </div>
-
                 <!-- 协议同意框 -->
-                <div class="flex items-start space-x-2">
-                    <input type="checkbox" v-model="isAgreed" class="mt-1" />
-                    <span class="text-xs text-gray-400 leading-tight">
-                        未注册手机号登录后将自动生成账号，并且代表您已阅读并同意
-                        <a class="cursor-pointer" style="color: #a22525" @click="toUserAgreement">
-                            《用户协议》
-                        </a>
-                        和
-                        <a class="cursor-pointer" style="color: #a22525" @click="toPrivacyPolicy">
-                            《隐私政策》
-                        </a>
-                    </span>
+                <div class="agreement-wrapper">
+                    <input type="checkbox" v-model="isAgreed" class="agreement-checkbox accent-primary"
+                        id="agreement" />
+                    <label for="agreement" class="agreement-text">
+                        我已阅读并同意
+                        <a class="agreement-link" @click="toUserAgreement">《用户协议》</a>
+                        <a class="agreement-link" @click="toPrivacyPolicy">《隐私政策》</a>
+                    </label>
                 </div>
-            </div>
 
-            <button
-                class="mt-20 w-full py-3 text-lg font-bold text-white rounded-full transition duration-300 hover:opacity-90"
-                style="background-color: #a22525"
-                @click="handleLogin">
-                登录
-            </button>
+                <!-- 提示文字 -->
+                <div class="notice-text">
+                    未注册手机号登录后将自动生成账号，并且代表您已阅读并同意
+                </div>
+
+                <!-- 登录按钮 -->
+                <button class="login-btn" :class="{ 'disabled': !canLogin }" @click="handleLogin" :disabled="!canLogin">
+                    登 录
+                </button>
+            </div>
         </div>
 
         <!-- 点击验证组件 -->
@@ -219,70 +208,147 @@ const onClickLeft = () => {
 
 <style scoped>
 .login-layout {
-    background: linear-gradient(135deg, #f0d6d6 0%, #e8c8c8 50%, #e0b8b8 100%);
+    background-image: url('@/assets/images/login_bg.png');
     background-position: center;
+    background-repeat: no-repeat;
     background-size: cover;
     height: 100vh;
     position: relative;
     overflow: hidden;
 }
 
-.login-layout::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: 
-        radial-gradient(circle at 20% 80%, rgba(162, 37, 37, 0.20) 0%, transparent 50%),
-        radial-gradient(circle at 80% 20%, rgba(162, 37, 37, 0.16) 0%, transparent 50%),
-        radial-gradient(circle at 40% 40%, rgba(162, 37, 37, 0.12) 0%, transparent 50%);
-    pointer-events: none;
+.login {}
+
+/* 登录表单 */
+.login-form {
+    background-color: var(--color-bg-primary);
+    padding: 2rem;
+    margin-top: 0.5rem;
+    box-shadow: 0px 0px 24px 0px #3F3F3F0F;
+    border-radius: 8px;
 }
 
-.login-layout::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: 
-        linear-gradient(45deg, transparent 40%, rgba(162, 37, 37, 0.04) 50%, transparent 60%),
-        linear-gradient(-45deg, transparent 40%, rgba(162, 37, 37, 0.03) 50%, transparent 60%);
-    background-size: 80px 80px;
-    pointer-events: none;
-}
-
-.login {
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 2rem;
-    margin: 2rem 1rem;
-    padding: 2rem 1rem;
-    box-shadow: 
-        0 20px 40px rgba(162, 37, 37, 0.15),
-        0 8px 16px rgba(162, 37, 37, 0.08),
-        inset 0 1px 0 rgba(255, 255, 255, 0.9);
-}
-
-.input-container {
-    border: 2px solid rgba(162, 37, 37, 0.1);
-    border-radius: 1rem;
-    transition: all 0.3s ease;
-    background: rgba(255, 255, 255, 0.9);
-}
-
-.input-container.focused {
-    border: 2px solid #a22525;
-}
-
-.input-field {
-    width: 100%;
-    padding: 1rem;
-    background: transparent;
+/* 表单项 */
+.form-item {
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
     border: none;
+    border-bottom: 1px solid var(--color-border-primary);
+}
+
+.form-label {
+    font-size: 0.9375rem;
+    color: var(--color-text-primary);
+    margin-bottom: 0;
+    margin-right: 1rem;
+    font-weight: 500;
+    min-width: 4rem;
+    flex-shrink: 0;
+}
+
+.form-input {
+    width: 100%;
+    padding: 0.875rem 0;
+
+    font-size: 0.9375rem;
+    color: var(--color-text-primary);
     outline: none;
-    transition: border-color 0.3s ease;
+    background-color: transparent;
+}
+
+.form-input::placeholder {
+    color: var(--color-text-tertiary);
+}
+
+.form-input:focus {
+    border-bottom-color: var(--color-text-primary);
+}
+
+/* 验证码输入 */
+.verification-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.verification-input {
+    flex: 1;
+    padding-right: 6rem;
+}
+
+.get-code-btn {
+    position: absolute;
+    right: 0;
+    background: none;
+    border: none;
+    color: var(--color-primary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    font-weight: 500;
+}
+
+.get-code-btn.disabled {
+    color: var(--color-gray-400);
+    cursor: not-allowed;
+}
+
+/* 协议同意 */
+.agreement-wrapper {
+    display: flex;
+    align-items: center;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.agreement-checkbox {
+    flex-shrink: 0;
+    margin-right: 0.5rem;
+}
+
+.agreement-text {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    line-height: 1.4;
+}
+
+.agreement-link {
+    color: var(--color-primary);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+/* 提示文字 */
+.notice-text {
+    font-size: 0.6875rem;
+    color: var(--color-text-tertiary);
+    line-height: 1.5;
+    margin-bottom: 2rem;
+}
+
+/* 登录按钮 */
+.login-btn {
+    width: 100%;
+    padding: 0.875rem;
+    background-color: var(--color-primary);
+    color: var(--color-text-white);
+    border: none;
+    border-radius: 1.5rem;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.3s;
+    letter-spacing: 0.25rem;
+}
+
+.login-btn:hover {
+    opacity: 0.9;
+}
+
+.login-btn.disabled {
+    background-color: var(--color-gray-300);
+    cursor: not-allowed;
 }
 </style>

src/views/PromotionInquire.vue

@@ -1,43 +1,23 @@
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from "vue";
-import { aesEncrypt } from "@/utils/crypto";
+import { ref, onMounted, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
-import { storeToRefs } from 'pinia'
-import { useUserStore } from '@/stores/userStore'
-import Payment from "@/components/Payment.vue";
-import CarNumberInput from "@/components/CarNumberInput.vue";
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/stores/userStore';
+import InquireForm from "@/components/InquireForm.vue";
 
 const route = useRoute();
 const router = useRouter();
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-const { mobile: userStoreMobile } = storeToRefs(userStore)
-const showPayment = ref(false);
-const pendingPayment = ref(false) // 用于标记是否需要在绑定手机号后进行支付
+const userStore = useUserStore();
+const { mobile: userStoreMobile } = storeToRefs(userStore);
 
-const queryId = ref(null);
-const name = ref("");
-const idCard = ref("");
-const mobile = ref("");
-const verificationCode = ref("");
-const agreeToTerms = ref(false);
-const isCountingDown = ref(false);
-const countdown = ref(60);
+const linkIdentifier = ref("");
 const feature = ref("");
 const featureData = ref({});
-const linkIdentifier = ref("");
 
-// 处理绑定手机号成功的回调
-function handleBindSuccess() {
-    if (pendingPayment.value) {
-        pendingPayment.value = false
-        submitRequest()
-    }
-}
-
-onBeforeMount(() => {
-    getProduct();
+onBeforeMount(async () => {
+    await getProduct();
 });
+
 onMounted(() => {
     isFinishPayment();
 });
@@ -49,6 +29,7 @@ function isFinishPayment() {
         router.push({ path: "/report", query: { orderNo } });
     }
 }
+
 async function getProduct() {
     linkIdentifier.value = route.params.linkIdentifier;
     const { data: agentLinkData, error: agentLinkError } = await useApiFetch(
@@ -74,588 +55,8 @@ async function getProduct() {
         }
     }
 }
-
-const isPhoneNumberValid = computed(() => {
-    return /^1[3-9]\d{9}$/.test(mobile.value);
-});
-const isIdCardValid = computed(() => /^\d{17}[\dX]$/i.test(idCard.value));
-
-function handleSubmit() {
-    if (!agreeToTerms.value) {
-        showToast({
-            message: `请阅读并同意用户协议和隐私政策`,
-        });
-        return;
-    }
-    if (
-        !validateField("name", name.value, (v) => v, "请输入姓名") ||
-        !validateField(
-            "mobile",
-            mobile.value,
-            (v) => isPhoneNumberValid.value,
-            "请输入有效的手机号"
-        ) ||
-        !validateField(
-            "idCard",
-            idCard.value,
-            (v) => isIdCardValid.value,
-            "请输入有效的身份证号码"
-        ) ||
-        !validateField(
-            "verificationCode",
-            verificationCode.value,
-            (v) => v,
-            "请输入验证码"
-        )
-    ) {
-        return;
-    }
-    // 检查是否需要绑定手机号
-    const token = localStorage.getItem('token')
-    console.log('userStoreMobile', userStoreMobile)
-    if (!token || !userStoreMobile.value) {
-        // 没有token或者没有手机号，弹出绑定手机号对话框
-        pendingPayment.value = true
-        dialogStore.openBindPhone()
-    } else {
-        // 已有token和手机号，直接进行支付
-        submitRequest()
-    }
-}
-const validateField = (field, value, validationFn, errorMessage) => {
-    if (isHasInput(field) && !validationFn(value)) {
-        showToast({ message: errorMessage });
-        return false;
-    }
-    return true;
-};
-const toHistory = () => {
-    router.push("/historyQuery");
-};
-const defaultInput = ["name", "idCard", "mobile", "verificationCode"];
-const isHasInput = (input) => {
-    return defaultInput.includes(input);
-};
-async function submitRequest() {
-    const req = {
-        name: name.value,
-        id_card: idCard.value,
-        mobile: mobile.value,
-        code: verificationCode.value
-    };
-    const reqStr = JSON.stringify(req);
-    const encodeData = aesEncrypt(reqStr, "ff83609b2b24fc73196aac3d3dfb874f");
-
-    const { data, error } = await useApiFetch(
-        `/query/service_agent/${feature.value}`
-    )
-        .post({ data: encodeData, agent_identifier: linkIdentifier.value })
-        .json();
-    if (data.value.code === 200) {
-        queryId.value = data.value.data.id;
-        localStorage.setItem("token", data.value.data.accessToken);
-        localStorage.setItem("refreshAfter", data.value.data.refreshAfter);
-        localStorage.setItem("accessExpire", data.value.data.accessExpire);
-        showPayment.value = true;
-    }
-}
-
-async function sendVerificationCode() {
-    if (isCountingDown.value || !isPhoneNumberValid.value) return;
-    if (!isPhoneNumberValid.value) {
-        showToast({ message: "请输入有效的手机号" });
-        return;
-    }
-
-    const { data, error } = await useApiFetch("/auth/sendSms")
-        .post({ mobile: mobile.value, actionType: "query" })
-        .json();
-
-    if (!error.value && data.value.code === 200) {
-        // 聚焦到验证码输入框
-        nextTick(() => {
-            const verificationCodeInput = document.getElementById('verificationCode');
-            if (verificationCodeInput) {
-                verificationCodeInput.focus();
-            }
-        });
-        showToast({ message: "验证码发送成功", type: "success" });
-        startCountdown();
-    } else {
-        showToast({ message: "验证码发送失败，请重试" });
-    }
-}
-let timer = null;
-
-function startCountdown() {
-    isCountingDown.value = true;
-    countdown.value = 60;
-    timer = setInterval(() => {
-        if (countdown.value > 0) {
-            countdown.value--;
-        } else {
-            clearInterval(timer);
-            isCountingDown.value = false;
-        }
-    }, 1000);
-}
-function toUserAgreement() {
-    router.push(`/userAgreement`);
-}
-
-function toPrivacyPolicy() {
-    router.push(`/privacyPolicy`);
-}
-function toAuthorization() {
-    router.push(`/authorization`);
-}
-
-const toExample = () => {
-    router.push(`/example?feature=${feature.value}`);
-};
-// 获取功能图标
-const getFeatureIcon = (apiId) => {
-    const iconMap = {
-        JRZQ4AA8: "/inquire_icons/huankuanyali.svg", // 还款压力
-        QCXG7A2B: "/inquire_icons/mingxiacheliang.svg", // 名下车辆
-        BehaviorRiskScan: "/inquire_icons/fengxianxingwei.svg", // 风险行为扫描
-        IVYZ5733: "/inquire_icons/hunyinzhuangtai.svg", // 婚姻状态
-        PersonEnterprisePro: "/inquire_icons/renqiguanxi.svg", // 人企关系加强版
-        JRZQ0A03: "/inquire_icons/jiedaishenqing.svg", // 借贷申请记录
-        FLXG3D56: "/inquire_icons/jiedaiweiyue.svg", // 借贷违约失信
-        FLXG0V4B: "/inquire_icons/sifasheyu.svg", // 司法涉诉
-        JRZQ8203: "/inquire_icons/jiedaixingwei.svg", // 借贷行为记录
-        JRZQ09J8: "/inquire_icons/beijianguanrenyuan.svg", // 收入评估
-        JRZQ4B6C: "/inquire_icons/fengxianxingwei.svg", // 信贷表现
-    };
-    return iconMap[apiId] || "/inquire_icons/default.svg";
-};
-
-// 处理图标加载错误
-const handleIconError = (event) => {
-    // 如果图标加载失败，显示默认图标或隐藏
-    event.target.style.display = "none";
-};
-
-// 获取卡片样式类
-const getCardClass = (index) => {
-    const colorIndex = index % 4;
-    const colorClasses = [
-        'bg-gradient-to-br from-blue-50 via-blue-25 to-white border-2 border-blue-200',
-        'bg-gradient-to-br from-green-50 via-green-25 to-white border-2 border-green-200',
-        'bg-gradient-to-br from-purple-50 via-purple-25 to-white border-2 border-purple-200',
-        'bg-gradient-to-br from-orange-50 via-orange-25 to-white border-2 border-orange-200'
-    ];
-    return colorClasses[colorIndex];
-};
-
-onUnmounted(() => {
-    if (timer) {
-        clearInterval(timer);
-    }
-});
 </script>
 
 <template>
-    <div class="inquire-bg min-h-screen p-6">
-        <div class="mb-6 text-center text-3xl font-bold" style="color: var(--van-theme-primary);">
-            {{ featureData.product_name }}
-        </div>
-        <div class="card">
-            <div class="mb-4 text-lg font-semibold" style="color: var(--van-text-color);">基本信息</div>
-            <div class="mb-4">
-                <label for="name" class="form-label block mb-2">姓名</label>
-                <input v-model="name" id="name" type="text" placeholder="请输入姓名" class="form-input" />
-            </div>
-            <div class="mb-4">
-                <label for="idCard" class="form-label block mb-2">身份证号</label>
-                <input v-model="idCard" id="idCard" type="text" placeholder="请输入身份证号" class="form-input" />
-            </div>
-            <div class="mb-4">
-                <label for="mobile" class="form-label block mb-2">手机号</label>
-                <input v-model="mobile" id="mobile" type="tel" placeholder="请输入手机号" class="form-input" />
-            </div>
-            <div class="mb-4">
-                <label for="verificationCode" class="form-label block mb-2">验证码</label>
-                <div class="flex items-center gap-2">
-                    <input v-model="verificationCode" id="verificationCode" placeholder="请输入验证码" maxlength="6"
-                        class="form-input flex-1 min-w-0" />
-                    <button
-                        class="px-4 py-2 text-sm whitespace-nowrap flex-shrink-0 rounded-lg border transition-colors"
-                        :class="isCountingDown || !isPhoneNumberValid
-                            ? 'text-gray-400 border-gray-300 bg-gray-50'
-                            : 'text-white border-transparent'" :style="isCountingDown || !isPhoneNumberValid
-                                ? ''
-                                : 'background-color: var(--van-theme-primary);'"
-                        :disabled="isCountingDown || !isPhoneNumberValid" @click="sendVerificationCode">
-                        {{
-                        isCountingDown
-                        ? `${countdown}s重新获取`
-                        : "获取验证码"
-                        }}
-                    </button>
-                </div>
-            </div>
-
-            <div class="mb-4 flex items-center">
-                <input type="checkbox" v-model="agreeToTerms" />
-                <span class="ml-2 text-xs" style="color: var(--van-text-color-2);">
-                    我已阅读并同意
-                    <span @click="toUserAgreement" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《用户协议》</span>
-                    <span @click="toPrivacyPolicy" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《隐私政策》</span>
-                    <span @click="toAuthorization" class="cursor-pointer hover:underline"
-                        style="color: var(--van-theme-primary);">《授权书》</span>
-                </span>
-            </div>
-            <div class="flex flex-col sm:flex-row gap-2">
-                <button
-                    class="flex-1 sm:w-24 rounded-xl sm:rounded-l-xl sm:rounded-r-none py-3 text-white text-base border transition-colors"
-                    style="background-color: var(--van-theme-primary-light); color: var(--van-theme-primary); border-color: var(--van-theme-primary);"
-                    @click="toExample">
-                    示例报告
-                </button>
-                <button
-                    class="flex-1 rounded-xl sm:rounded-l-none sm:rounded-r-xl py-3 text-white text-base transition-colors"
-                    style="background-color: var(--van-theme-primary);" @click="handleSubmit">
-                    立即查询
-                </button>
-            </div>
-        </div>
-        <div class="card mt-3" v-if="featureData.features && featureData.features.length > 0">
-            <div class="mb-3 text-base font-semibold flex items-center" style="color: var(--van-text-color);">
-                <div class="w-1 h-5 rounded-full mr-2"
-                    style="background: linear-gradient(to bottom, var(--van-theme-primary), var(--van-theme-primary-dark));">
-                </div>
-                报告包含内容
-            </div>
-            <div class="grid grid-cols-4 gap-2">
-                <template v-for="(feature, index) in featureData.features" :key="feature.id">
-                    <!-- FLXG0V4B 特殊处理：显示8个独立的案件类型 -->
-                    <template v-if="feature.api_id === 'FLXG0V4B'">
-                        <div v-for="(caseType, caseIndex) in [
-                            { name: '管辖案件', icon: 'beijianguanrenyuan.svg' },
-                            { name: '刑事案件', icon: 'xingshi.svg' },
-                            { name: '民事案件', icon: 'minshianjianguanli.svg' },
-                            { name: '失信被执行', icon: 'shixinren.svg' },
-                            { name: '行政案件', icon: 'xingzhengfuwu.svg' },
-                            { name: '赔偿案件', icon: 'yuepeichang.svg' },
-                            { name: '执行案件', icon: 'zhixinganjian.svg' },
-                            { name: '限高被执行', icon: 'xianzhigaoxiaofei.svg' },
-                        ]" :key="`${feature.id}-${caseIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + caseIndex)">
-                            <div class="mb-1">
-                                <img :src="`/inquire_icons/${caseType.icon}`" :alt="caseType.name"
-                                    class="w-6 h-6 drop-shadow-sm mx-auto" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight font-medium"
-                                style="word-break: break-all; line-height: 1.1; min-height: 28px; display: flex; align-items: center; justify-content: center;">
-                                {{ caseType.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG8B4D 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG8B4D'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '要素核查', icon: 'beijianguanrenyuan.svg' },
-                            { name: '运营商核验', icon: 'mingxiacheliang.svg' },
-                            { name: '公安重点人员检验', icon: 'xingshi.svg' },
-    { name: '逾期风险综述', icon: 'huankuanyali.svg' },
-    { name: '法院曝光台信息', icon: 'sifasheyu.svg' },
-    { name: '借贷评估', icon: 'jiedaishenqing.svg' },
-    { name: '租赁风险评估', icon: 'jiedaixingwei.svg' },
-    { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-    { name: '规则风险提示', icon: 'fengxianxingwei.svg' },
-]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- CJRZQ5E9F 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'JRZQ5E9F'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '信用评分', icon: 'huankuanyali.svg' },
-                            { name: '贷款行为分析', icon: 'jiedaixingwei.svg' },
-                            { name: '机构分析', icon: 'jiedaishenqing.svg' },
-                            { name: '时间趋势分析', icon: 'zhixinganjian.svg' },
-                            { name: '风险指标详情', icon: 'fengxianxingwei.svg' },
-                            { name: '专业建议', icon: 'yuepeichang.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- PersonEnterprisePro/CQYGL3F8E 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'PersonEnterprisePro' || feature.api_id === 'QYGL3F8E'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '投资企业记录', icon: 'renqiguanxi.svg' },
-                            { name: '高管任职记录', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉诉风险', icon: 'sifasheyu.svg' },
-                            { name: '对外投资历史', icon: 'renqiguanxi.svg' },
-                            { name: '融资历史', icon: 'huankuanyali.svg' },
-                            { name: '行政处罚', icon: 'xingzhengfuwu.svg' },
-                            { name: '经营异常', icon: 'fengxianxingwei.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- DWBG6A2C 特殊处理：显示拆分模块 -->
-                    <template v-else-if="feature.api_id === 'DWBG6A2C'">
-                        <div v-for="(module, moduleIndex) in [
-                            { name: '命中风险标注', icon: 'fengxianxingwei.svg' },
-                            { name: '公安重点人员核验', icon: 'beijianguanrenyuan.svg' },
-                            { name: '涉赌涉诈人员核验', icon: 'xingshi.svg' },
-                            { name: '风险名单', icon: 'jiedaiweiyue.svg' },
-                            { name: '历史借贷行为', icon: 'jiedaixingwei.svg' },
-                            { name: '近24个月放款情况', icon: 'jiedaishenqing.svg' },
-                            { name: '履约情况', icon: 'huankuanyali.svg' },
-                            { name: '历史逾期记录', icon: 'jiedaiweiyue.svg' },
-                            { name: '授信详情', icon: 'huankuanyali.svg' },
-                            { name: '租赁行为', icon: 'mingxiacheliang.svg' },
-                            { name: '关联风险监督', icon: 'renqiguanxi.svg' },
-                            { name: '法院风险信息', icon: 'sifasheyu.svg' },
-                        ]" :key="`${feature.id}-${moduleIndex}`"
-                            class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-center p-2 shadow-lg"
-                            :class="getCardClass(index + moduleIndex)">
-                            <div class="text-xl mb-1 flex items-center justify-center">
-                                <img :src="`/inquire_icons/${module.icon}`" :alt="module.name"
-                                    class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                            </div>
-                            <div class="text-xs leading-tight px-1 font-medium"
-                                style="word-break: break-all; line-height: 1.2">
-                                {{ module.name }}
-                            </div>
-                        </div>
-                    </template>
-
-                    <!-- 其他功能正常显示 -->
-                    <div v-else
-                        class="aspect-square rounded-xl text-center text-sm text-gray-700 font-medium flex flex-col items-center justify-between p-2 shadow-lg"
-                        :class="getCardClass(index)">
-                        <div class="flex items-center justify-center flex-1">
-                            <img :src="getFeatureIcon(feature.api_id)" :alt="feature.name"
-                                class="w-6 h-6 drop-shadow-sm" @error="handleIconError" />
-                        </div>
-                        <div class="text-xs leading-tight font-medium h-8 flex items-center justify-center"
-                            style="word-break: break-all; line-height: 1.1">
-                            {{ feature.name }}
-                        </div>
-                    </div>
-                </template>
-            </div>
-            <div class="mt-3 text-center">
-                <div class="inline-flex items-center px-3 py-1.5 rounded-full border transition-all"
-                    style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8)); border-color: var(--van-theme-primary);">
-                    <div class="w-1.5 h-1.5 rounded-full mr-1.5" style="background-color: var(--van-theme-primary);">
-                    </div>
-                    <span class="text-xs font-medium" style="color: var(--van-theme-primary);">更多信息请解锁报告</span>
-                </div>
-            </div>
-        </div>
-        <div class="card mt-4">
-            <div class="mb-4 text-xl font-bold" style="color: var(--van-text-color);">
-                {{ featureData.product_name }}
-            </div>
-            <div class="mb-4 flex items-start justify-between">
-                <div class="text-lg" style="color: var(--van-text-color-2);">价格：</div>
-                <div>
-                    <div class="text-2xl font-semibold" style="color: var(--van-theme-primary);">
-                        ¥{{ featureData.sell_price }}
-                    </div>
-                </div>
-            </div>
-
-            <div class="mb-4 leading-relaxed" style="color: var(--van-text-color-2);" v-html="featureData.description">
-            </div>
-            <div class="mb-2 text-xs italic" style="color: var(--van-theme-primary);">
-                为保证用户的隐私以及数据安全，查询的结果生成30天之后将自动清除。
-            </div>
-            <!-- <template v-if="featureData.features && featureData.features.length > 1">
-                <div class="mb-4 text-lg text-gray-800 font-semibold">
-                    报告包含内容
-                </div>
-                <div class="grid grid-cols-2 gap-4">
-                    <div v-for="(feature, index) in featureData.features" :key="feature.id"
-                        class="rounded-lg py-2 text-center text-sm text-gray-700 font-medium" :class="[
-                            (Math.floor(index / 2) + (index % 2)) % 2 === 0
-                                ? 'bg-gradient-to-r from-blue-200 via-blue-200 to-blue-100'
-                                : 'bg-gradient-to-r from-sky-200 via-sky-200 to-sky-100',
-                        ]">
-                        {{ feature.name }}
-                    </div>
-                </div>
-            </template> -->
-        </div>
-    </div>
-    <Payment v-model="showPayment" :data="featureData" :id="queryId" type="query" @close="showPayment = false" />
-    <BindPhoneDialog @bind-success="handleBindSuccess" />
-    <RecordFooter v-if="!webviewEnv" />
-    <div @click="toHistory"
-        class="fixed right-2 top-3/4 px-4 py-2 text-sm bg-blue-400 rounded-xl cursor-pointer text-white font-bold shadow active:bg-blue-500">
-        历史查询
-    </div>
-</template>
-
-<style scoped>
-.form-label {
-    @apply text-sm font-medium;
-    color: var(--van-text-color);
-}
-
-.form-input::placeholder {
-    color: var(--van-text-color-3);
-}
-
-.form-input {
-    @apply w-full border-b px-2 py-3 focus:outline-none text-base transition-colors;
-    min-height: 44px;
-    border-color: var(--van-border-color);
-    color: var(--van-text-color);
-    background-color: transparent;
-}
-
-.form-input:focus {
-    border-color: var(--van-theme-primary);
-}
-
-/* 移动端优化 */
-@media (max-width: 768px) {
-    .form-input {
-        font-size: 16px;
-        /* 防止iOS缩放 */
-        padding: 12px 8px;
-    }
-
-    .form-label {
-        font-size: 14px;
-        margin-bottom: 8px;
-    }
-}
-
-.inquire-bg {
-    /* 优雅的渐变背景 - 增强对比度 */
-    background: linear-gradient(135deg,
-            #f0f4f8 0%,
-            #e2e8f0 25%,
-            #cbd5e1 50%,
-            #e2e8f0 75%,
-            #f0f4f8 100%) !important;
-
-    /* 优化性能的纹理效果 - 减少层数 */
-    background-image:
-        /* 主要圆形纹理 */
-        radial-gradient(circle at 25% 75%, rgba(162, 37, 37, 0.15) 0%, transparent 65%),
-        radial-gradient(circle at 75% 25%, rgba(162, 37, 37, 0.12) 0%, transparent 60%),
-
-        /* 简化网格纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.06) 25%, transparent 25%, transparent 75%, rgba(162, 37, 37, 0.06) 75%) !important;
-
-    /* 优化尺寸和位置 */
-    background-size:
-        500px 500px,
-        450px 450px,
-        80px 80px !important;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0 !important;
-
-    /* 确保背景覆盖整个视口 */
-    min-height: 100vh;
-    position: relative;
-
-    /* 性能优化 */
-    background-attachment: fixed;
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 优化性能的叠加纹理层 */
-.inquire-bg::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-        /* 简化圆形纹理 */
-        radial-gradient(circle at 20% 30%, rgba(162, 37, 37, 0.10) 0%, transparent 60%),
-        radial-gradient(circle at 80% 70%, rgba(162, 37, 37, 0.08) 0%, transparent 55%),
-
-        /* 简化线条纹理 */
-        linear-gradient(45deg, rgba(162, 37, 37, 0.05) 0%, transparent 50%, rgba(162, 37, 37, 0.05) 100%);
-
-    background-size:
-        400px 400px,
-        350px 350px,
-        200px 2px;
-
-    background-position:
-        0 0,
-        200px 200px,
-        0 0;
-
-    pointer-events: none;
-    z-index: -1;
-
-    /* 性能优化 */
-    will-change: auto;
-    transform: translateZ(0);
-    /* 启用硬件加速 */
-}
-
-/* 卡片样式优化 */
-.card {
-    @apply shadow-lg rounded-xl p-6 transition-all hover:shadow-xl;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06),
-        0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-/* 按钮悬停效果 */
-button:hover {
-    transform: translateY(-1px);
-}
-
-button:active {
-    transform: translateY(0);
-}
-</style>
+    <InquireForm :type="'promotion'" :feature="feature" :link-identifier="linkIdentifier" :feature-data="featureData" />
+</template>

src/views/VantThemeTest.vue

@@ -180,7 +180,7 @@
                         <span>主色调: <span class="font-mono">var(--van-theme-primary)</span></span>
                     </div>
                     <p class="text-sm text-gray-600">
-                        以上所有组件的主色调都已配置为 <span class="font-mono">#a22525</span>，通过 <span
+                        以上所有组件的主色调都已配置为 <span class="font-mono">#5d7eeb</span>，通过 <span
                             class="font-mono">var(--van-theme-primary)</span>
                         CSS变量统一管理。包括按钮、开关、复选框、单选框等组件的激活状态。通过修改CSS变量可以轻松更改整个主题。
                     </p>

src/views/index.vue

@@ -5,9 +5,12 @@ import SectionTitle from "@/components/SectionTitle.vue";
 
 const agentStore = useAgentStore();
 const { isAgent } = storeToRefs(agentStore);
-import personalDataIcon from "@/assets/images/index/personal_data_bg.png";
-import companyIcon from "@/assets/images/index/company_bg.png";
-import loanCheckIcon from "@/assets/images/index/loan_check_bg.png";
+import personalDataIcon from "@/assets/images/index/personal_data_bg.jpg";
+import companyIcon from "@/assets/images/index/company_bg.jpg";
+import loanCheckIcon from "@/assets/images/index/loan_check_bg.jpg";
+import marriageRiskIcon from "@/assets/images/index/marriage_risk_bg.jpg";
+import housekeepingRiskIcon from "@/assets/images/index/housekeeping_risk_bg.jpg";
+import preLoanRiskIcon from "@/assets/images/index/preloan_risk_bg.jpg";
 function toInquire(name) {
     router.push(`/inquire/${name}`);
 }
@@ -17,9 +20,6 @@ function toInvitation() {
 const toPromote = () => {
     router.push({ name: "promote" });
 };
-function toAgentVipApply() {
-    router.push({ name: "agentVipApply" });
-}
 
 const toHelp = () => {
     router.push("/help");
@@ -29,13 +29,11 @@ const toService = () => {
     router.push({ name: "service" });
 };
 
-const toIncome = () => {
-    router.push({ name: "subordinateList" });
-};
+function toHistory() {
+    router.push(`/historyQuery`);
+}
+
 
-const toWithdraw = () => {
-    router.push({ name: "withdraw" });
-};
 
 
 const services = ref([
@@ -44,29 +42,55 @@ const services = ref([
         name: "personalData",
         subtitle: "深度检测报告",
         bg: personalDataIcon,
-        goColor: "#A22525",
+        goColor: "var(--color-service-personal)",
     },
     {
         title: "小微企业",
         name: "companyinfo",
         subtitle: "信用报告",
         bg: companyIcon,
-        goColor: "#6B9DF9",
+        goColor: "var(--color-service-company)",
     },
     {
         title: "贷前背调",
         name: "preloanbackgroundcheck",
         subtitle: "风险评估",
         bg: loanCheckIcon,
-        goColor: "#E1A0E4",
+        goColor: "var(--color-service-loan)",
+    },
+]);
+
+const riskServices = ref([
+    {
+        title: "婚恋风险",
+        name: "marriage",
+        subtitle: "情感安全检测",
+        bg: marriageRiskIcon,
+        goColor: "var(--color-warning)",
+    },
+    {
+        title: "家政风险",
+        name: "homeservice",
+        subtitle: "服务安全保障",
+        bg: housekeepingRiskIcon,
+        goColor: "var(--color-info)",
+    },
+    {
+        title: "入职背调",
+        name: "backgroundcheck",
+        subtitle: "员工背景调查",
+        bg: preLoanRiskIcon,
+        goColor: "var(--color-danger)",
     },
 ]);
 
 const noticeText = ref([]);
-
-function toHistory() {
-    router.push(`/historyQuery`);
-}
+const toCooperation = () => {
+    window.location.href = "https://www.tianyuandata.com";
+};
+const toBigData = () => {
+    window.location.href = "https://www.tybigdata.com/";
+};
 </script>
 
 <template>
@@ -74,69 +98,47 @@ function toHistory() {
         <div class="relative p-4">
             <img class="h-full w-full rounded-xl overflow-hidden" src="@/assets/images/index/banner.png" />
         </div>
-        <div class="px-4 pb-2 mt-6">
-            <!-- 第一行 -->
-            <div class="grid grid-cols-4 gap-3 mb-3">
+        <div class="px-4 pb-2 mt-2">
+            <!-- 菜单项一行显示 -->
+            <div class="grid grid-cols-5 gap-2">
                 <div class="text-center flex flex-col justify-center items-center" @click="toInvitation">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/yqhy.png" alt="邀请好友" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/yqhy.png" alt="邀请好友" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">邀请好友</div>
-                </div>
-                <div class="text-center flex flex-col justify-center items-center" @click="toAgentVipApply">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/cwhy.png" alt="成为会员" class="h-16 w-16" />
-                    </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">成为会员</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">邀请好友</div>
                 </div>
                 <div class="text-center flex flex-col justify-center items-center" @click="toHelp">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/bzzx.png" alt="帮助中心" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/bzzx.png" alt="帮助中心" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">帮助中心</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">帮助中心</div>
                 </div>
                 <div class="text-center flex flex-col justify-center items-center" @click="toHistory">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/wdbg.png" alt="我的报告" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/wdbg.png" alt="我的报告" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">我的报告</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">我的报告</div>
                 </div>
-            </div>
-
-            <!-- 第二行 -->
-            <div class="grid grid-cols-4 gap-3">
                 <div class="text-center flex flex-col justify-center items-center" @click="toService">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/lxkf.png" alt="联系客服" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/lxkf.png" alt="联系客服" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">联系客服</div>
-                </div>
-                <div class="text-center flex flex-col justify-center items-center" @click="toIncome">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/srmx.png" alt="收入明细" class="h-16 w-16" />
-                    </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">收入明细</div>
-                </div>
-                <div class="text-center flex flex-col justify-center items-center" @click="toWithdraw">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/wytx.png" alt="我要提现" class="h-16 w-16" />
-                    </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">我要提现</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">联系客服</div>
                 </div>
                 <div class="text-center flex flex-col justify-center items-center" @click="toPromote">
-                    <div class="h-16 w-16">
-                        <img src="@/assets/images/index/tgbg.png" alt="推广报告" class="h-16 w-16" />
+                    <div class="h-14 w-14">
+                        <img src="@/assets/images/index/tgbg.png" alt="推广报告" class="h-14 w-14" />
                     </div>
-                    <div class="text-center mt-2 text-sm text-[#666666]">推广报告</div>
+                    <div class="text-center mt-2 text-sm text-gray-600">推广报告</div>
                 </div>
             </div>
         </div>
 
-        <div class="relative p-4 pb-4 pt-2 mt-6">
+        <div class="relative p-4 pb-4 pt-2 mt-2">
             <SectionTitle title="查询服务" />
-            <div class="grid grid-cols-2 gap-6 my-4" style="grid-template-rows: repeat(2, 1fr);">
+            <div class="grid grid-cols-2 gap-4 my-4" style="grid-template-rows: repeat(2, 1fr);">
                 <template v-for="(service, index) in services" :key="index">
-                    <div class="relative flex flex-col px-4 py-2 rounded-xl min-h-24"
+                    <div class="relative flex flex-col px-4 py-2 rounded-xl min-h-24 shadow-lg"
                         :class="index === 0 ? 'row-span-2' : ''"
                         :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
                         @click=" toInquire(service.name)">
@@ -157,13 +159,31 @@ function toHistory() {
                     </div>
                 </template>
             </div>
+            <div class="grid grid-cols-3 gap-4 my-4">
+                <template v-for="(service, index) in riskServices" :key="index">
+                    <div class="relative flex flex-col px-3 py-2 rounded-xl min-h-20 shadow-lg"
+                        :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
+                        @click="toInquire(service.name)">
+                        <div class="min-h-16 flex flex-col items-start px-1">
+                            <div class="mt-1 max-w-max text-left text-gray-600 font-bold text-sm">
+                                {{ service.title }}
+                            </div>
+                            <div class="max-w-max text-left text-xs text-gray-600">
+                                <div>{{ service.subtitle }}</div>
+                            </div>
+                            <div class="mt-1 rounded-lg px-1 text-xs text-white shadow-xl w-max flex items-center"
+                                :style="`background-color: ${service.goColor}`">
+                                GO
+                                <img src="@/assets/images/index/go_icon.png" alt="右箭头"
+                                    class="ml-0.5 h-3 w-3 inline-block align-middle" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
             <SectionTitle title="其他服务" class="mt-8" />
-            <div class="mb-6 mt-6 py-4 flex flex-col items-center justify-center rounded-3xl from-blue-500 to-sky-400 bg-gradient-to-b text-center text-lg text-white line-height-12 shadow-xl"
-                @click="toCooperation">
-                <div class="flex items-center text-xl">
-                    天远数据邀您共赢，共享数据新价值！
-                </div>
-                <div class="flex items-center">点击进入商务合作</div>
+            <div class="mt-4 rounded-xl overflow-hidden bg-white shadow-xl" @click="toCooperation">
+                <img src="@/assets/images/index_a_banner.png" class="w-full h-full" alt="大数据服务横幅" mode="widthFix" />
             </div>
             <div class="mt-4 rounded-2xl overflow-hidden" @click="toBigData">
                 <img src="@/assets/images/index_b_banner.png" class="w-full h-full" mode="widthFix" />