create-account

pages/customer/account-select.vue

@@ -1,87 +1,55 @@
 <template>
     <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
-        <cwg-header :title="t('Custom.Withdraw.Title1')" />
-        <view class="account-selector">
-            <template v-if="loading">
-            </template>
-            <template v-else-if="standardAccounts.length > 0">
-                <!-- PC 端表格视图 -->
-                <view class="account-table pc-view">
-                    <!-- 表头：账户类型 -->
-                    <view class="table-header">
-                        <view class="header-cell type-cell">标准型账户</view>
-                        <view class="header-cell" v-t="'vu.item9'"></view>
-                        <view class="header-cell" v-t="'vu.item10'"></view>
-                        <view class="header-cell" v-t="'vu.item11'"></view>
-                        <!-- <view class="header-cell" v-t="'vu.item12'"></view> -->
-
-                    </view>
-                    <!-- 标准账户行 -->
-                    <template v-for="account in standardAccounts" :key="account.id">
-                        <view class="account-row" v-if="account.showCondition()" @click="onAccountSelect(account.id)"
-                            :class="{ 'active': account.id == selectedAccountId }">
-                            <view class="row-cell type-cell">
-                                <radio-group @change="(e) => onAccountSelect(account.id)" class="radio-group" >
-                                    <label class="radio-label">
-                                        <radio :value="account.id" :checked="selectedAccountId === account.id"
-                                            color="#cf1322" />
-                                        <image class="account-icon" :src="account.icon" mode="aspectFit" />
-                                        <view class="account-info">
-                                            <text class="account-name" v-t="account.name" />
-                                            <text class="account-desc" v-t="account.description" />
-                                        </view>
-                                    </label>
-                                </radio-group>
+        <view class="container">
+            <view
+                class="app-page-head card-header d-flex gap-3 flex-wrap align-items-center justify-content-between border-0">
+                <view class="app-page-head mb-0">
+                    <h1 class="app-page-title" v-t="'Custom.Withdraw.Title1'"></h1>
+                </view>
+            </view>
+            <uni-loading v-if="standardAccounts.length === 0" />
+            <view class="row" v-else>
+                <view class="col-12">
+                    <p class="tips"><span v-t="'news_add_field.OpenAccount.Des1'"></span>
+                        <span class="pdfLink">
+                            <cwg-link type="pdf" title="news_add_field.OpenAccount.Des2"
+                                url="pdf/PrivacyPolicy2019_01.pdf" target="_blank" />
+                        </span>
+                    </p>
+                </view>
+                <view class="col-lg-4" v-for="account in standardAccounts" :key="account.id">
+                    <view class="card overflow-hidden card-action action-border-primary">
+                        <view class="card-header bg-light border-0 p-4 accordion-b utton text-white bg">
+                            <!-- <view class="ribbon">Premium</view> -->
+                            <h4 class="text-white" v-t="account.name"></h4>
+                            <view class="mb-4" v-t="account.description"></view>
+                            <view class="display-6 fw-bold  text-white lh-1 price-monthly">{{ account.minDeposit }}
+                                <span class="h6 text-white" v-t="'vu.item9'"></span>
                             </view>
-                            <view class="row-cell">{{ account.minDeposit }}</view>
-                            <view class="row-cell">{{ account.minSpread }}</view>
-                            <view class="row-cell">{{ account.maxLeverage }}</view>
-                            <!-- <view class="row-cell">{{ account.minSpread }}</view> -->
                         </view>
-                    </template>
-                </view>
-
-                <!-- 移动端轮播视图 -->
-                <view class="mobile-view">
-                    <swiper class="account-swiper" :current="currentSwiperIndex" circular indicator-dots
-                        indicator-active-color="#cf1322" @change="onSwiperChange">
-                        <swiper-item v-for="account in filteredAccounts" :key="account.id">
-                            <view class="account-card" @click="onAccountSelect(account.id)"
-                                :class="{ 'active': account.id == selectedAccountId }">
-                                <image class="card-img" :src="account.icon" mode="aspectFit" />
-                                <view class="card-title" v-t="account.name"></view>
-                                <view class="card-tag">
-                                    <text class="tag-label">{{ account.typeLabel }}</text>
+                        <view class="row-cell"></view>
+                        <view class="row-cell"></view>
+                        <view class="card-body p-4">
+                            <view class="fs-5 list-inline text-dark">
+                                <view class="d-flex gap-2 align-items-center py-1"> <i
+                                        class="fa-regular fa-circle-check text-success"></i> {{ t('vu.item10') }}: {{
+                                    account.minSpread }}
                                 </view>
-                                <p class="card-desc" v-t="account.description"></p>
-                                <view class="card-info-stack">
-                                    <cwg-label-line-value :label="t('vu.item9')" :value="account.minDeposit" />
-                                    <cwg-label-line-value :label="t('vu.item10')" :value="account.minSpread" />
-                                    <cwg-label-line-value :label="t('vu.item11')" :value="account.maxLeverage" />
-                                    <!-- <cwg-label-line-value :label="t('vu.item12')" :value="account.minSpread" /> -->
+                                <view class="d-flex gap-2 align-items-center py-1"> <i
+                                        class="fa-regular fa-circle-check text-success"></i> {{ t('vu.item11') }}: {{
+                                    account.maxLeverage }}
                                 </view>
                             </view>
-                        </swiper-item>
-                    </swiper>
-                </view>
-                <!-- 继续按钮 -->
-                <view class="action-button">
-                    <view class="btn" @click="handleContinue">
-                        <text class="button-text" v-t="'forget.forget'" />
+                        </view>
+                        <view class="card-footer p-4 pt-0 border-0">
+                            <button @click="handleContinue(account.id)"
+                                class="btn btn-danger waves-effect waves-light w-100"><i class="fi fi-rs-check"></i>
+                                {{ t('Btn.item13') }}</button>
+                        </view>
                     </view>
                 </view>
-            </template>
-        </view>
-
-        <!-- 条款说明 -->
-        <view class="terms-section">
-            <text v-t="'news_add_field.OpenAccount.Des1'"></text>
-            <text class="pdfLink">
-                <cwg-link type="pdf" title="news_add_field.OpenAccount.Des2" url="pdf/PrivacyPolicy2019_01.pdf"
-                    target="_blank" />
-            </text>
+            </view>
         </view>
-
     </cwg-page-wrapper>
 </template>
 
@@ -109,7 +77,7 @@ const typeList = computed(() => [
         name: 'AccountType.StandardAccount',
         showCondition: () => showLogin.value && showLogin.value.indexOf('7') == -1,
         description: 'Custom.NewAccount.DesLogin5',
-        minDeposit: '200 USD',
+        minDeposit: '$200',
         minSpread: '0.01',
         maxLeverage: '1:1000',
         icon: '/static/images/info/bank-information-1.webp',
@@ -120,7 +88,7 @@ const typeList = computed(() => [
         name: 'AccountType.SeniorAccount',
         showCondition: () => showLogin.value && showLogin.value.indexOf('2') == -1,
         description: 'Custom.NewAccount.DesLogin3',
-        minDeposit: '200 USD',
+        minDeposit: '$200',
         minSpread: '0.01',
         maxLeverage: '1:1000',
         icon: '/static/images/info/bank-information-2.webp',
@@ -131,7 +99,7 @@ const typeList = computed(() => [
         name: 'AccountType.CentAccount',
         showCondition: () => showLogin.value && showLogin.value.indexOf('8') == -1 && isTimeShow.value,
         description: 'Custom.NewAccount.DesLogin8',
-        minDeposit: '200 USD',
+        minDeposit: '$200',
         minSpread: '0.01',
         maxLeverage: '1:500',
         icon: '/static/images/info/bank-information-3.webp',
@@ -139,8 +107,6 @@ const typeList = computed(() => [
 ])
 // 定义账户数据类型
 const standardAccounts = computed(() => typeList.value.filter(account => account.showCondition()))
-
-
 const getExcludeShowLogin = async () => {
     try {
         let res = await customApi.excludeShowLogin({});
@@ -161,39 +127,11 @@ const getExcludeShowLogin = async () => {
         loading.value = false;
     }
 }
-// 过滤后的账户列表
-const filteredAccounts = computed(() => {
-    return standardAccounts.value.filter(account => account.showCondition())
-})
-
-// 当前选中的账户 ID
-const selectedAccountId = ref(7)
-
-// 轮播图当前索引
-const currentSwiperIndex = computed(() => {
-    const index = filteredAccounts.value.findIndex(a => a.id === selectedAccountId.value)
-    return index > -1 ? index : 0
-})
-
-// 账户选择事件
-const onAccountSelect = (id) => {
-    selectedAccountId.value = id
-}
-
-// 轮播图切换事件
-const onSwiperChange = (e) => {
-    const index = e.detail.current
-    const account = filteredAccounts.value[index]
-    if (account) {
-        selectedAccountId.value = account.id
-    }
-}
-
 // 继续按钮点击事件，向上传递选中的账户信息
-const handleContinue = () => {
+const handleContinue = (id) => {
     router.push({
         path: "/pages/customer/create-account",
-        query: { id: selectedAccountId.value, server: server.value },
+        query: { id, server: server.value },
     });
 }
 //获取显示权限
@@ -205,347 +143,12 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import "@/uni.scss";
 
-.account-selector {
-    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
-    overflow: hidden;
-    min-height: 400px;
-}
-
-.loading-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 400px;
-
-    .loading-spinner {
-        width: 40px;
-        height: 40px;
-        border: 3px solid #f3f3f3;
-        border-top: 3px solid #1e2a3a;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-        margin-bottom: 16px;
-    }
-
-    .loading-text {
-        font-size: 14px;
-        color: #606266;
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.table-wrapper {
-    width: 100%;
-    overflow-x: auto;
-
-    white-space: nowrap;
-}
-
-.account-table {
-    min-width: px2rpx(350);
-    margin-bottom: px2rpx(10);
-    /* 保证在小屏上可滚动 */
-    display: flex;
-    flex-direction: column;
-    font-size: px2rpx(14);
-    color: var(--bs-heading-color);
-}
-
-.table-header {
-    display: flex;
-    padding: px2rpx(10) 0;
-    font-weight: 500;
-    color: var(--bs-heading-color);
-
-    .header-cell {
-        flex: 1;
-        text-align: center;
-        padding: 0 px2rpx(8);
-        white-space: normal;
-        word-break: break-word;
-    }
-
-    .type-cell {
-        flex: 2;
-        text-align: left;
-        padding-left: px2rpx(12);
-    }
-}
-
-.professional-header {
-    margin-top: px2rpx(8);
-}
-
-.account-row {
-    display: flex;
-    align-items: center;
-    padding: px2rpx(12) 0;
-    margin: px2rpx(12) 0;
-    border: 1px solid rgba(108, 133, 149, 0.2);
-    border-radius: px2rpx(8);
-
-    &:hover {
-        box-shadow: 0 10px 15px -3px rgba(7, 10, 12, 0.08), 0 4px 6px -4px rgba(7, 10, 12, 0.08), 0 0 4px 0 rgba(7, 10, 12, 0.08);
-    }
-
-    &.active {
-        background-color: rgba(108, 133, 149, 0.07843);
-    }
-
-    .row-cell {
-        flex: 1;
-        text-align: center;
-        padding: 0 px2rpx(8);
-        font-size: px2rpx(12);
-        color: var(--bs-emphasis-color);
-        white-space: normal;
-        word-break: break-word;
-    }
-
-    .type-cell {
-        flex: 2;
-        text-align: left;
-        padding-left: px2rpx(12);
-    }
-}
-
-.radio-group {
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-
-.radio-label {
-    display: flex;
-    align-items: center;
-    gap: px2rpx(6);
-    width: 100%;
-}
-
-radio {
-    transform: scale(0.8);
-    margin-right: px2rpx(4);
-}
-
-.account-icon {
-    width: px2rpx(48);
-    height: px2rpx(48);
-    margin-right: px2rpx(24);
-    flex-shrink: 0;
-}
-
-.account-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    text-align: left;
-
-    .account-name {
-        font-size: px2rpx(14);
-        font-weight: 500;
-        color: var(--bs-emphasis-color);
-        margin-bottom: px2rpx(4);
-    }
-
-    .account-desc {
-        font-size: px2rpx(12);
-        color: #7f8c8d;
-        line-height: 1.4;
-    }
-}
-
-.mobile-view {
-    display: none;
+.bg {
+    background-image: url('/static/images/vu/account-bg.png');
+    background-size: cover;
+    background-position: center bottom;
 }
-
-@media screen and (max-width: 600px) {
-    .pc-view {
-        display: none;
-    }
-
-    .mobile-view {
-        display: block;
-        padding: px2rpx(20) 0;
-    }
-
-    .account-swiper {
-        min-height: px2rpx(480);
-        width: 100%;
-
-    }
-
-    :deep(uni-swiper-item) {
-        padding: 10px;
-        box-sizing: border-box;
-    }
-
-    .account-card {
-        background: #fff;
-        border-radius: px2rpx(8);
-        margin: px2rpx(2) px2rpx(2);
-        padding: px2rpx(16);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        border: 2px solid transparent;
-        transition: all 0.3s;
-        height: px2rpx(400);
-        color: rgb(20, 29, 34);
-        box-shadow:
-            rgba(54, 61, 66, 0.15) 0px 0px 1px 0px,
-            rgba(54, 61, 66, 0.04) 0px 2px 2px 0px,
-            rgba(54, 61, 66, 0.12) 0px 2px 8px 0px,
-            rgba(54, 61, 66, 0.08) 0px -2px 4px 0px;
-        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
-        overflow: hidden;
-
-        &.active {
-            transform: translateY(px2rpx(-5));
-        }
-
-        .card-img {
-            width: px2rpx(120);
-            height: px2rpx(120);
-            margin-bottom: px2rpx(20);
-        }
-
-        .card-title {
-            font-size: px2rpx(24);
-            font-weight: 700;
-            color: var(--bs-emphasis-color);
-            margin-bottom: px2rpx(8);
-        }
-
-        .card-tag {
-            background: #f0f2f5;
-            padding: px2rpx(4) px2rpx(12);
-            border-radius: px2rpx(20);
-            margin-bottom: px2rpx(16);
-
-            .tag-label {
-                font-size: px2rpx(12);
-                color: var(--bs-heading-color);
-            }
-        }
-
-        .card-desc {
-            font-size: px2rpx(14);
-            color: #7f8c8d;
-            line-height: 1.6;
-            margin-bottom: px2rpx(24);
-            height: px2rpx(44);
-            overflow: hidden;
-        }
-
-        .card-info-stack {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: px2rpx(12);
-
-            .info-row {
-                display: flex;
-                justify-content: space-between;
-                align-items: baseline;
-                position: relative;
-                font-size: px2rpx(14);
-
-                &::after {
-                    content: "";
-                    flex: 1;
-                    margin: 0 px2rpx(10);
-                    border-bottom: 1px dotted #ddd;
-                    height: 1px;
-                }
-
-                .label {
-                    color: var(--bs-heading-color);
-                    order: 1;
-                }
-
-                .value {
-                    color: var(--bs-emphasis-color);
-                    font-weight: 500;
-                    order: 3;
-                }
-            }
-        }
-    }
-
-    .action-button {
-        justify-content: center !important;
-        // padding: 0 px2rpx(20);
-
-        .btn {
-            width: 100%;
-            min-width: unset !important;
-        }
-    }
-
-    .terms-section {
-        text-align: center;
-        padding: 0 px2rpx(20);
-    }
-}
-
-.action-button {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    margin-top: px2rpx(40);
-
-    .btn {
-        width: px2rpx(320);
-        background-color: #cf1322;
-        padding: px2rpx(12) px2rpx(20);
-        border-radius: px2rpx(8);
-        text-align: center;
-        cursor: pointer;
-        box-sizing: border-box;
-        transition: all 0.2s;
-
-        &:active {
-            opacity: 0.9;
-            transform: scale(0.98);
-        }
-
-        .button-text {
-            color: var(--bs-emphasis-color);
-            font-size: px2rpx(16);
-            font-weight: 600;
-        }
-    }
-}
-
-.terms-section {
-    margin: px2rpx(30) 0;
-    font-size: px2rpx(14);
-    line-height: 1.7;
-    color: var(--bs-heading-color);
-    text-align: center;
-
-    .pdfLink {
-        margin-left: px2rpx(4);
-
-        a {
-            color: var(--color-primary);
-            text-decoration: none;
-
-            &:hover {
-                text-decoration: underline;
-            }
-        }
-    }
+.tips{
+    line-height: px2rpx(24);
 }
 </style>

pages/customer/components/AccountList.vue

@@ -6,7 +6,7 @@
                 <view class="border-0 card-header">
                     <view class="d-flex flex-wrap gap-3 align-items-center justify-content-between mb-3">
                         <h3 class="mb-0" v-t="'Custom.Index.AccountList'"></h3>
-                        <button type="button" class="btn  btn-secondary  btn-shadow waves-effect"><i
+                        <button type="button" class="btn  btn-secondary  btn-shadow waves-effect" @click="createAccount"><i
                                 class="fi fi-rr-plus"></i>
                             <text v-t="'Custom.Index.AddAccount'" /></button>
                     </view>

pages/customer/components/TerminalChangePasswordDialog.vue

@@ -182,10 +182,17 @@ watch(() => props.visible, (newVal) => {
         font-size: px2rpx(14);
         color: var(--bs-emphasis-color);
         line-height: px2rpx(24);
+
+        &::before {
+            content: '●';
+            display: inline-block;
+            font-size: px2rpx(10);
+            margin-right: px2rpx(4);
+        }
     }
 
     .isOK {
-        color: var(--color-success);
+        color: var(--bs-success);
     }
 }
 

pages/customer/create-account.vue

@@ -1,92 +1,115 @@
 <template>
     <cwg-page-wrapper class="create-page " :isHeaderFixed="true">
-        <cwg-header :title="t('Custom.Index.AddAccount')" />
-        <view class="create-card">
-
-            <view class="card-bottom user-form crm-form">
-                <view class="tabs-class">
-                    <cwg-tabs v-model:cativeIndex="cativeIndex" :tabs="tabs" />
 
+        <view class="container">
+            <view
+                class="app-page-head card-header d-flex gap-3 flex-wrap align-items-center justify-content-between border-0">
+                <view class="app-page-head mb-0">
+                    <h1 class="app-page-title" v-t="'Custom.Index.AddAccount'"></h1>
                 </view>
-                <uni-forms ref="formRef" :model="formData" :rules="rules" label-width="200" label-position="top"
-                    class="base-info-form" validate-trigger="submit">
-                    <uni-row class="demo-uni-row uni-row1 uni-row2">
-                        <!-- MT4/MT5 -->
-                        <uni-col :xs="24">
-                            <uni-forms-item :label="t('Custom.NewAccount.Platform')" name="platform">
-                                <cwg-combox :clearable="false" v-model:value="formData.platform"
-                                    :options="platformColumns" :placeholder="t('placeholder.choose')" />
-                            </uni-forms-item>
-                        </uni-col>
-                        <!-- 货币类型 -->
-                        <uni-col :xs="24">
-                            <uni-forms-item :label="t('Custom.NewAccount.Currency')" name="currency">
-                                <cwg-combox :clearable="false" v-model:value="formData.currency"
-                                    :options="currencyColumns" :placeholder="t('placeholder.choose')" />
-                            </uni-forms-item>
-                        </uni-col>
-
-                        <!-- 杠杆 -->
-                        <uni-col :xs="24">
-                            <uni-forms-item :label="t('Custom.NewAccount.Lever')" name="leverage">
-                                <cwg-combox :clearable="false" v-model:value="formData.leverage"
-                                    :options="leverageColumns" :placeholder="t('placeholder.choose')" />
-                            </uni-forms-item>
-                        </uni-col>
-
-                        <!-- 账户余额 -->
-                        <uni-col :xs="24" v-if="dome">
-                            <uni-forms-item :label="t('Custom.NewAccount.Balance')" name="balance">
-                                <uni-easyinput type="digit" :clearable="false" v-model="formData.balance"
-                                    :placeholder="t('Custom.NewAccount.BalancePlaceholder')" />
-                            </uni-forms-item>
-                        </uni-col>
-                        <!-- 交易密码 -->
-                        <uni-col :xs="24">
-                            <uni-forms-item :label="t('Custom.NewAccount.Password')" name="password">
-                                <uni-easyinput :clearable="false" v-model="formData.password"
-                                    :placeholder="t('Custom.NewAccount.Password')" />
-                            </uni-forms-item>
-                        </uni-col>
-                        <uni-col :xs="24">
-                            <view class="notice-list">
-                                <view v-for="(item, index) in noticeItems" :key="index"
-                                    :class="['notice-item', item.valid ? 'isOK' : '']">
-                                    {{ item.label }}
-                                </view>
-                            </view>
-                        </uni-col>
-
-
-                        <uni-col :xs="24">
-                            <view class="btn btn-confirm" @click="newAccount">{{ t('Btn.Application') }}</view>
-                        </uni-col>
-                    </uni-row>
-                </uni-forms>
             </view>
+            <view class="row">
+                <view class="col-lg-8">
+
+
+                    <view class="card">
+                        <view class="border-0 card-header">
+                            <uni-forms ref="formRef" :model="formData" :rules="rules" label-width="200"
+                                label-position="top" class="base-info-form" validate-trigger="submit">
+                                <view class="row">
+                                    <view class="col-lg-12">
+                                        <h5 class="mb-3" v-t="'Custom.PaymentHistory.AccountType'"></h5>
+                                        <uni-forms-item name="platform">
+                                            <cwg-combox :clearable="false" v-model:value="cativeIndex" :options="tabs"
+                                                :placeholder="t('placeholder.choose')" />
+                                        </uni-forms-item>
+                                    </view>
+                                    <view class="col-lg-6">
+                                        <h5 class="mb-3" v-t="'Custom.NewAccount.Platform'"></h5>
+                                        <uni-forms-item name="platform">
+                                            <cwg-combox :clearable="false" v-model:value="formData.platform"
+                                                :options="platformColumns" :placeholder="t('placeholder.choose')" />
+
+                                        </uni-forms-item>
+                                    </view>
+                                    <view class="col-lg-6">
+                                        <h5 class="mb-3" v-t="'Custom.NewAccount.Currency'"></h5>
+                                        <uni-forms-item name="currency">
+                                            <cwg-combox :clearable="false" v-model:value="formData.currency"
+                                                :options="currencyColumns" :placeholder="t('placeholder.choose')" />
+                                        </uni-forms-item>
+                                    </view>
+
+                                    <view class="col-lg-6">
+                                        <h5 class="mb-3" v-t="'Custom.NewAccount.Lever'"></h5>
+                                        <uni-forms-item name="leverage">
+                                            <cwg-combox :clearable="false" v-model:value="formData.leverage"
+                                                :options="leverageColumns" :placeholder="t('placeholder.choose')" />
+                                        </uni-forms-item>
+                                    </view>
+                                    <view class="col-lg-6">
+                                        <h5 class="mb-3" v-t="'Custom.NewAccount.Password'"></h5>
+                                        <uni-forms-item name="password">
+                                            <uni-easyinput :clearable="false" v-model="formData.password"
+                                                :placeholder="t('Custom.NewAccount.Password')" />
+                                        </uni-forms-item>
+                                    </view>
+                                    <view class="col-lg-6" v-if="dome">
+                                        <h5 class="mb-3" v-t="'Custom.NewAccount.Balance'"></h5>
+                                        <uni-forms-item name="balance">
+                                            <uni-easyinput type="digit" :clearable="false" v-model="formData.balance"
+                                                :placeholder="t('Custom.NewAccount.BalancePlaceholder')" />
+                                        </uni-forms-item>
+                                    </view>
+                                    <view class="px-4">
+                                        <view class="notice-list">
+                                            <view v-for="(item, index) in noticeItems" :key="index"
+                                                :class="['notice-item', item.valid ? 'isOK' : '']">
+                                                {{ item.label }}
+                                            </view>
+                                        </view>
+                                    </view>
+                                    <!-- <view class="col-lg-12 mb-3">
+                                        <view class="form-check mb-3">
+                                            <input class="form-check-input" type="checkbox" value="" id="invalidCheck2"
+                                                required="">
+                                            <label class="form-check-label" for="invalidCheck2">* I have read all the
+                                                instructions and agreed to the terms and conditions of the Standard
+                                                Account</label>
+                                        </view>
+                                    </view> -->
+                                    <button @click="newAccount" class="btn btn-danger waves-effect waves-light"><i
+                                            class="fi fi-rs-check"></i>
+                                        {{ t('Btn.Application') }}</button>
+                                </view>
+                            </uni-forms>
+                        </view>
 
-            <view class="card-content">
-                <text class="account-name" v-t="currentAccount?.name"></text>
-
-                <!-- 点差信息 -->
-                <view class="info-row">
-                    <view class="info-label" v-t="'vu.item9'" />
-                    <view class="info-value">{{ currentAccount?.minDeposit || '--' }}</view>
-                </view>
-                <!-- 点差信息 -->
-                <view class="info-row">
-                    <view class="info-label" v-t="'vu.item10'" />
-                    <view class="info-value">{{ currentAccount?.minSpread || '--' }}</view>
-                </view>
+                    </view>
 
-                <!-- 杠杆信息 -->
-                <view class="info-row">
-                    <view class="info-label" v-t="'vu.item11'" />
-                    <view class="info-value">{{ currentAccount?.maxLeverage || '--' }}</view>
                 </view>
-                <view class="info-row">
-                    <view class="info-value link-item"><cwg-link type="pdf" title="news_add_field.OpenAccount.Des2"
-                            url="pdf/PrivacyPolicy2019_01.pdf" target="_blank" /></view>
+                <view class="col-lg-4">
+                    <view class="card overflow-hidden card-action action-border-primary">
+                        <view class="card-header bg-light border-0 p-4 accordion-b utton text-white bg">
+                            <!-- <view class="ribbon">Premium</view> -->
+                            <h4 class="text-white" v-t="currentAccount?.name"></h4>
+                            <p class="mb-4" v-t="currentAccount?.description"></p>
+                            <view class="display-6 fw-bold  text-white lh-1 price-monthly">{{ currentAccount?.minDeposit
+                                || '--' }} <text class="h6 text-white">{{ t('vu.item9') }}</text> </view>
+                        </view>
+                        <view class="card-body p-4">
+                            <view class="fs-5 list-inline text-dark">
+                                <view class="d-flex gap-2 align-items-center py-1"> <i
+                                        class="fa-regular fa-circle-check text-success"></i> {{ t('vu.item10') }}: {{
+                                            currentAccount?.minSpread || '--' }}
+                                </view>
+                                <view class="d-flex gap-2 align-items-center py-1"> <i
+                                        class="fa-regular fa-circle-check text-success"></i> {{ t('vu.item11') }}: {{
+                                            currentAccount?.maxLeverage || '--' }}
+                                </view>
+                            </view>
+                        </view>
+                    </view>
                 </view>
             </view>
         </view>
@@ -169,7 +192,7 @@ const standardAccounts = ref([
         name: 'AccountType.StandardAccount',
         showCondition: () => showLogin.value && showLogin.value.indexOf('7') == -1,
         description: 'Custom.NewAccount.DesLogin5',
-        minDeposit: '200 USD',
+        minDeposit: '$200',
         minSpread: '0.01',
         maxLeverage: '1:1000',
         icon: '/static/images/info/bank-information-1.webp',
@@ -180,7 +203,7 @@ const standardAccounts = ref([
         name: 'AccountType.SeniorAccount',
         showCondition: () => showLogin.value && showLogin.value.indexOf('2') == -1,
         description: 'Custom.NewAccount.DesLogin3',
-        minDeposit: '200 USD',
+        minDeposit: '$200',
         minSpread: '0.01',
         maxLeverage: '1:1000',
         icon: '/static/images/info/bank-information-2.webp',
@@ -191,16 +214,16 @@ const standardAccounts = ref([
         name: 'AccountType.CentAccount',
         showCondition: () => showLogin.value && showLogin.value.indexOf('8') == -1 && isTimeShow.value,
         description: 'Custom.NewAccount.DesLogin8',
-        minDeposit: '200 USD',
+        minDeposit: '$200',
         minSpread: '0.01',
         maxLeverage: '1:500',
         icon: '/static/images/info/bank-information-3.webp',
     }
 ])
-const cativeIndex = ref(0)
+const cativeIndex = ref('real')
 const tabs = computed(() => ([
-    { id: 'real', name: t('vu.item1') },
-    { id: 'demo', name: t('vu.item2') }
+    { value: 'real', text: t('vu.item1') },
+    { value: 'demo', text: t('vu.item2') }
 ]))
 
 const currentAccount = computed(() => {
@@ -252,10 +275,10 @@ const resetForm = async () => {
     optionsLev.value = []
     optionsCur.value = []
     showData.value = null
-    amountErrorMessage.value = ""
-    submitting.value = false
+    // amountErrorMessage.value = ""
+    // submitting.value = false
     flag.value = false
-    loginValue.value = ""
+    // loginValue.value = ""
     dialogCheck.value = false
     dialogVisible.value = false
 }
@@ -406,10 +429,14 @@ const showAccountLimitDialog = (platform) => {
 
 // 获取必要数据
 const getMustData = async (type, isDome) => {
+    console.log(type, isDome, locale)
     const api = isDome ? customApi.AccountApplyDataDome : customApi.AccountApplyData;
+    console.log(api, 121212);
+
     const res = await api({
         type: type
     });
+    console.log(res, 121212);
     if (res.code === 200) {
         showData.value = res.data;
     } else {
@@ -593,7 +620,8 @@ watch(() => formData.balance, (newVal, oldVal) => {
     }
 });
 watch(() => cativeIndex.value, (newVal) => {
-    dome.value = newVal == 1
+    dome.value = newVal == 'demo'
+    console.log(newVal, 1111)
     getMustData(isOpenAccount.value, dome.value);
     resetForm()
 });
@@ -601,7 +629,7 @@ watch(() => cativeIndex.value, (newVal) => {
 // 生命周期
 onLoad((e) => {
     dome.value = e.server == 'demo'
-    cativeIndex.value = e.server == 'demo' ? 1 : 0
+    cativeIndex.value = e.server
     isOpenAccount.value = e.id
     const host = window?.location?.host || '';
     ho.value = host.split('.')[1] || '';
@@ -619,6 +647,12 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import "@/uni.scss";
 
+.bg {
+    background-image: url('/static/images/vu/account-bg.png');
+    background-size: cover;
+    background-position: center bottom;
+}
+
 .tit {
     text-align: center;
     font-size: px2rpx(30);
@@ -685,7 +719,7 @@ onMounted(() => {
             width: px2rpx(24);
             height: px2rpx(24);
             margin-right: px2rpx(12);
-            background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
+            background-color: color-mix(in oklab, var(--bs-success) 10%, transparent);
         }
     }
 
@@ -743,12 +777,17 @@ onMounted(() => {
 
     .notice-item {
         font-size: px2rpx(14);
-        color: var(--bs-emphasis-color);
         line-height: px2rpx(24);
+        &::before {
+            content: '●';
+            display: inline-block;
+            font-size: px2rpx(10);
+            margin-right: px2rpx(4);
+        }
     }
 
     .isOK {
-        color: var(--color-success);
+        color: var(--bs-success);
     }
 }
 

pages/mine/components/SecurityCenterTab.vue

@@ -238,7 +238,7 @@ onMounted(() => {
 
     .uni-easyinput__content {
         //border: none !important;
-      background-color: transparent;
+        background-color: transparent;
         //background-color: var(--color-zinc-100) !important;
     }
 }
@@ -265,10 +265,17 @@ onMounted(() => {
         font-size: px2rpx(14);
         color: var(--bs-emphasis-color);
         line-height: px2rpx(24);
+
+        &::before {
+            content: '●';
+            display: inline-block;
+            font-size: px2rpx(10);
+            margin-right: px2rpx(4);
+        }
     }
 
     .isOK {
-        color: var(--color-success);
+        color: var(--bs-success);
     }
 }