1

pages/ib/agent-transfer.vue

@@ -152,10 +152,10 @@
 
             <!-- 赠金协议20年中 -->
             <BonusAgreementPopup v-model:visible="dialogClauseNZTwo" :title="t('news_add_field1.activitiesNZTwo.item6')"
-                :type="nzTwo" :tableData4Two="tableData4Two" />
+                type="nzTwo" :tableData4Two="tableData4Two" />
             <!-- 赠送活动协议 -->
             <BonusAgreementPopup v-model:visible="dialogClauseNewList" :title="tableDataNewList.title"
-                :content="tableDataNewList.content" :type="newList" />
+                :content="tableDataNewList.content" type="newList" />
         </view>
     </cwg-page-wrapper>
 </template>

pages/ib/components/BonusAgreementPopup.vue

@@ -1,85 +1,42 @@
 <template>
-    <cwg-popup v-model:visible="visible" type="center" :title="title" :mask-click="false" :showFooters="false">
-        <view class="popup-content clause-popup">
-            <view class="clause-content" id="Agreement">
-                <scroll-view scroll-y="true" style="height: 60vh;">
-                    <view v-if="type == 'nzTwo'">
-                        <h4>{{ t('news_add_field1.activitiesNZTwo.item8') }}{{ tableData4Two.applicationStartTime }} -
-                            {{ tableData4Two.applicationEndTime }}</h4>
-                        <h4 style="margin-top: 20px">{{ t('news_add_field1.activitiesNZTwo.item10') }}</h4>
-                        <ul style="margin-left: 15px; font-size: 14px">
-                            <li>{{ t('news_add_field1.activitiesNZTwo.item11') }}</li>
-                            <li>{{ t('news_add_field1.activitiesNZTwo.item12') }}</li>
-                            <li>{{ t('news_add_field1.activitiesNZTwo.item13') }}</li>
-                            <li>{{ t('news_add_field1.activitiesNZTwo.item14') }}</li>
-                            <li v-t="'news_add_field1.activitiesNZTwo.item15'"></li>
-                            <li v-t="'news_add_field1.activitiesNZTwo.item16'"></li>
-                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
-                                <tr>
-                                    <th v-t="'news_add_field1.activitiesNZTwo.item31'"></th>
-                                    <th v-t="'news_add_field1.activitiesNZTwo.item41'"></th>
-                                    <th v-t="'news_add_field1.activitiesNZTwo.item51'"></th>
-                                    <th v-t="'news_add_field1.activitiesNZTwo.item61'"></th>
-                                    <th v-t="'news_add_field1.activitiesNZTwo.item71'"></th>
-                                    <th v-t="'news_add_field1.activitiesNZTwo.item81'"></th>
-                                    <th v-t="'news_add_field1.activitiesNZTwo.item91'"></th>
-                                </tr>
-                                <tr>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item32'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item42'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item52'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item62'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item72'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item82'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item92'"></td>
-                                </tr>
-                                <tr>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item33'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item43'"></td>
-                                    <td>
-                                        <span style="color: #f56c6c"
-                                            v-t="'news_add_field1.activitiesNZTwo.item53'"></span>
-                                    </td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item63'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item73'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item83'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item93'"></td>
-                                </tr>
-                                <tr>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item34'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item44'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item54'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item64'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item74'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item84'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item94'"></td>
-                                </tr>
-                                <tr>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item35'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item45'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item55'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item65'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item75'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item85'"></td>
-                                    <td v-t="'news_add_field1.activitiesNZTwo.item95'"></td>
-                                </tr>
-                            </table>
-                            <li v-t="'news_add_field1.activitiesNZTwo.item17'"></li>
-                            <li v-t="'news_add_field1.activitiesNZTwo.item18'"></li>
-                            <li v-t="'news_add_field1.activitiesNZTwo.item19'"></li>
-                            <li v-t="'news_add_field1.activitiesNZTwo.item20'"></li>
-                            <li v-t="'news_add_field1.activitiesNZTwo.item21'"></li>
-                        </ul>
+    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true"
+        custom-class="clause-popup" :title="title">
+        <view class="popup-content">
+            <scroll-view scroll-y class="clause-content">
+                <view v-if="type == 'nzTwo'">
+                    <view class="h4"><text v-t="'news_add_field1.activitiesNZTwo.item8'"></text>{{
+                        tableData4Two.applicationStartTime }} - {{ tableData4Two.applicationEndTime }}</view>
+                    <view class="h4" v-t="'news_add_field1.activitiesNZTwo.item10'"></view>
+                    <view class="list">
+                        <view class="list-item" v-for="i in 6" :key="i"
+                            v-t="`news_add_field1.activitiesNZTwo.item1${i}`" />
+                        <view class="list-item">
+                            <view class="table-container">
+                                <view class="table">
+                                    <view class="tr">
+                                        <view class="th" v-for="th in 7" :key="th"
+                                            v-t="`news_add_field1.activitiesNZTwo.item${3 + th - 1}1`"></view>
+                                    </view>
+                                    <view class="tr" v-for="r in 5" :key="r">
+                                        <view class="td" v-for="c in 7" :key="c"
+                                            v-t="`news_add_field1.activitiesNZTwo.item${3 + r - 1}${c}`"></view>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="list-item" v-for="i in 5" :key="i"
+                            v-t="`news_add_field1.activitiesNZTwo.item${17 + i - 1}`" />
                     </view>
-                    <view v-else-if="type == 'newList'">
-                        <rich-text class="popup-text" :nodes="content"></rich-text>
-                    </view>
-                </scroll-view>
-            </view>
-            <template #footer>
-                <button type="primary" @click="visible = false">{{ t('Btn.Confirm') }}</button>
-            </template>
+                </view>
+                <view v-else-if="type == 'newList'">
+                    <rich-text class="popup-text" :nodes="content"></rich-text>
+                </view>
+            </scroll-view>
         </view>
+        <template #footer>
+            <button @click="close">{{ t('Btn.Cancel') }}</button>
+            <button type="primary" @click="close">{{ t('Btn.Confirm') }}</button>
+        </template>
     </cwg-popup>
 </template>
 
@@ -119,6 +76,8 @@ const visible = computed({
     get: () => props.visible,
     set: (value) => emit('update:visible', value)
 });
+
+const close = () => { visible.value = false; };
 </script>
 
 <style lang="scss" scoped>
@@ -128,95 +87,93 @@ const visible = computed({
     max-height: 80vh;
     overflow: hidden;
 
-    .clause-content {
+    .popup-content {
         padding: 20px;
+    }
 
-        scroll-view {
-            width: 100%;
-
-            h4 {
-                font-size: 16px;
-                font-weight: 600;
-                color: #303133;
-                margin-bottom: 12px;
-            }
+    .clause-content {
+        height: 60vh;
+        width: 100%;
+
+        .h4 {
+            font-size: 16px;
+            font-weight: 600;
+            color: #303133;
+            margin-bottom: 12px;
+            margin-top: 16px;
+        }
 
-            ul {
-                margin-bottom: 20px;
+        .list {
+            margin-bottom: 20px;
 
-                li {
-                    margin-bottom: 8px;
-                    line-height: 1.5;
-                    color: #606266;
-                }
+            .list-item {
+                margin-bottom: 8px;
+                line-height: 1.5;
+                color: #606266;
             }
 
-            table {
+            .table-container {
                 margin: 16px 0;
-                width: 100%;
-                border-collapse: collapse;
-
-                th,
-                td {
-                    padding: 10px;
-                    text-align: center;
-                    border: 1px solid #dcdfe6;
-                    font-size: 14px;
-                }
-
-                th {
-                    background: #f5f7fa;
-                    font-weight: 600;
-                    color: #303133;
-                }
-
-                td {
-                    color: #606266;
+                overflow-x: auto;
+
+                .table {
+                    width: 100%;
+                    border-collapse: collapse;
+
+                    .tr {
+                        display: flex;
+                        width: 100%;
+
+                        .th,
+                        .td {
+                            flex: 1;
+                            padding: 10px;
+                            text-align: center;
+                            border: 1px solid #dcdfe6;
+                            font-size: 14px;
+                        }
+
+                        .th {
+                            background: #f5f7fa;
+                            font-weight: 600;
+                            color: #303133;
+                        }
+
+                        .td {
+                            color: #606266;
+                        }
+                    }
                 }
             }
+        }
 
-            // Handle v-html content
-            div {
-                line-height: 1.6;
-                color: #606266;
-
-                p {
-                    margin-bottom: 12px;
-                }
-
-                h1,
-                h2,
-                h3,
-                h4,
-                h5,
-                h6 {
-                    margin: 16px 0 8px 0;
-                    color: #303133;
-                }
+        .popup-text {
+            line-height: 1.6;
+            color: #606266;
 
-                ul,
-                ol {
-                    margin-left: 20px;
-                    margin-bottom: 12px;
-                }
+            p {
+                margin-bottom: 12px;
+            }
 
-                li {
-                    margin-bottom: 4px;
-                }
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+                margin: 16px 0 8px 0;
+                color: #303133;
             }
-        }
-    }
 
-    .clause-footer {
-        padding: 16px 20px;
-        border-top: 1px solid #e4e7ed;
-        display: flex;
-        justify-content: center;
+            ul,
+            ol {
+                margin-left: 20px;
+                margin-bottom: 12px;
+            }
 
-        button {
-            min-width: 120px;
-            padding: 10px 20px;
-            border-radius: 4px;
+            li {
+                margin-bottom: 4px;
+            }
         }
     }
 }
@@ -227,43 +184,32 @@ const visible = computed({
         width: 95%;
         max-height: 85vh;
 
-        .clause-header {
-            padding: 12px 16px;
-
-            .clause-title {
-                font-size: 16px;
-            }
+        .popup-content {
+            padding: 16px;
         }
 
         .clause-content {
-            padding: 16px;
-
-            scroll-view {
-                height: 50vh;
-
-                h4 {
-                    font-size: 14px;
-                }
+            height: 50vh;
 
-                table {
+            .h4 {
+                font-size: 14px;
+            }
 
-                    th,
-                    td {
-                        padding: 8px;
-                        font-size: 12px;
+            .list {
+                .table-container {
+                    .table {
+                        .tr {
+
+                            .th,
+                            .td {
+                                padding: 8px;
+                                font-size: 12px;
+                            }
+                        }
                     }
                 }
             }
         }
-
-        .clause-footer {
-            padding: 12px 16px;
-
-            button {
-                min-width: 100px;
-                padding: 8px 16px;
-            }
-        }
     }
 }
 </style>

pages/ib/transfer.vue

@@ -98,10 +98,10 @@
             <cwg-function-disabled-popup v-model:visible="InfoStatus5" :showFooters="false" @confirm="toHome" />
             <!-- 赠金协议20年中 -->
             <BonusAgreementPopup v-model:visible="dialogClauseNZTwo" :title="t('news_add_field1.activitiesNZTwo.item6')"
-                :type="nzTwo" :tableData4Two="tableData4Two" />
+                type="nzTwo" :tableData4Two="tableData4Two" />
             <!-- 赠送活动协议 -->
             <BonusAgreementPopup v-model:visible="dialogClauseNewList" :title="tableDataNewList.title"
-                :content="tableDataNewList.content" :type="newList" />
+                :content="tableDataNewList.content" type="newList" />
         </view>
     </cwg-page-wrapper>
 </template>