重构布局

uni_modules/uni-charts/components/uni-charts/uni-charts.vue → components/cwg-charts.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script>
-import cfu from '/js_sdk/u-charts/config-ucharts.js';
+import cfu from '../static/js/u-charts/config-ucharts.js';
 // #ifdef APP-VUE || H5
-import cfe from '/js_sdk/u-charts/config-echarts.js';
+import cfe from '../static/js/u-charts/config-echarts.js';
 // #endif
 
 function deepCloneAssign(origin = {}, ...args) {
@@ -87,7 +87,7 @@ function debounce(fn, wait) {
 }
 
 export default {
-  name: 'uni-charts',
+  name: 'cwg-charts',
   mixins: [uniCloud.mixinDatacom],
   props: {
     type: {
@@ -791,9 +791,9 @@ export default {
 
 <!-- #ifdef APP-VUE || H5 -->
 <script module="rdcharts" lang="renderjs">
-import uChartsRD from '/js_sdk/u-charts/u-charts.js';
-import cfu from '/js_sdk/u-charts/config-ucharts.js';
-import cfe from '/js_sdk/u-charts/config-echarts.js';
+import uChartsRD from '../static/js/u-charts/u-charts.js';
+import cfu from '../static/js/u-charts/config-ucharts.js';
+import cfe from '../static/js/u-charts/config-echarts.js';
 
 var that = {};
 var rootdom = null;

components/cwg-page-wrapper.vue

@@ -1,23 +1,20 @@
 <template>
-  <view :class="['page-wrapper', { dark: isDark }]" >
-    <cwg-match-media :min-width="991" v-if="!isLoginPage">
-      <view class="left-sidebar">
-        <cwg-sidebar />
-        <cwg-submenu v-if="sidebarVisible" @submenu-click="onSubmenuClick" />
-      </view>
+  <view :class="['page-wrapper', { dark: isDark }]">
+    <cwg-match-media :max-width="991" v-if="!isLoginPage" class="header-box">
+      <cwg-pc-header @open-right-drawer="openRightDrawer" @open-left-drawer="openLeftDrawer" />
     </cwg-match-media>
+
     <cwg-progress />
     <view class="page-content">
-      <cwg-match-media :min-width="991" v-if="!isLoginPage">
-        <cwg-pc-header @toggle-sidebar="toggleSidebar" :sidebarVisible="sidebarVisible"
-          @open-right-drawer="openRightDrawer" />
-      </cwg-match-media>
-      <cwg-match-media :max-width="991">
-        <cwg-header v-if="!isHeaderFixed">
-          <view class="mobile-menu-btn" @click="openRightDrawer">
-            <cwg-icon name="crm-bars-staggered" :size="20" color="#0f172b" />
-          </view>
-        </cwg-header>
+      <cwg-match-media :max-width="991" v-if="!isLoginPage">
+        <view class="left-sidebar" :class="{ 'sidebar-visible': sidebarVisible }">
+          <cwg-sidebar />
+
+        </view>
+        <view class="sidebar-mask" v-if="sidebarVisible" @click="openLeftDrawer" :style="{
+          opacity: sidebarVisible ? 1 : 0,
+          transition: 'opacity 281ms cubic-bezier(0.4, 0, 0.2, 1)'
+        }"></view>
       </cwg-match-media>
       <view class="content-wrapper" :class="{ 'content-wrapper-padding': isContentPadding }">
         <slot />
@@ -66,18 +63,17 @@ const isDark = computed(() => globalStore.theme === 'dark')
 const isTabBarPage = ref(false)
 
 
-const sidebarVisible = ref(true)
+
 const rightDrawerRef = ref<any>(null)
 
-function toggleSidebar() {
-  sidebarVisible.value = !sidebarVisible.value;
-}
 
 function openRightDrawer() {
-  console.log(32423423);
-
   rightDrawerRef.value?.open()
 }
+const sidebarVisible = ref(false)
+function openLeftDrawer() {
+  sidebarVisible.value = !sidebarVisible.value;
+}
 
 function handleDrawerNavigate(path: string) {
   router.push(path)
@@ -110,33 +106,64 @@ onShow(() => {
 @import "@/uni.scss";
 
 .page-wrapper {
-  display: flex;
-  flex-direction: row;
-  height: 100vh;
-  overflow: hidden;
-  background-color: var(--color-slate-50);
+  height: calc(100vh - 56px);
 }
 
-.left-sidebar {
-  display: flex;
-  flex-direction: row;
+.header-box {
+  width: 100%;
+  height: 56px;
 }
 
 .page-content {
   width: 100%;
   display: flex;
-  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.left-sidebar {
+  width: 0;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  background-color: #fff;
+  transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);
+
+}
+
+.sidebar-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: calc(100vh - 56px);
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 999;
+}
+
+.sidebar-visible {
+  width: px2rpx(280);
 }
 
 .content-wrapper {
-  flex: 1;
-  // padding: 0 px2rpx(24) px2rpx(0) px2rpx(24);
-  box-sizing: border-box;
-  overflow-y: auto;
+  max-width: px2rpx(1224);
+  width: 100%;
+  margin: 0 auto;
+  // border: 1px solid rgba(108, 133, 149, 0.12);
 }
 
-.content-wrapper-padding {
-  padding: px2rpx(30);
+@media screen and (max-width: 1504px) {
+  .content-wrapper-padding {
+    padding: px2rpx(20);
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .page-wrapper {
+    height: 100vh;
+  }
 }
 
 .mobile-menu-btn {

components/cwg-pc-header.vue

@@ -1,136 +1,147 @@
 <template>
-    <header class="cwg-pc-header">
-        <div class="left">
-            <cwg-icon :name="!props.sidebarVisible ? 'crm-bars-staggered' : 'crm-angle-left'" :size="24" color="#e32326"
-                @click="$emit('toggle-sidebar')" />
-        </div>
-        <div class="center"></div>
-        <div class="right">
-            <div class="lang-select">
-                <image class="img flag" src="/static/flag-en.png" alt="en" />
-                <text>English</text>
-                <text class="arrow">▼</text>
-            </div>
-            <text class="icon sun" @click="toggleTheme">🌞</text>
-            <text class="icon bell">🔔<text class="dot"></text></text>
-            <text class="icon avatar">
-                <image class="img" src="/static/avatar.png" alt="avatar" />
-            </text>
-            <text class="icon logo" @click="openRightDrawer">
-                <image class="img" src="/static/logo.png" alt="logo" />
-            </text>
-        </div>
-    </header>
+	<header class="cwg-pc-header">
+		<div class="left">
+			<image class="left-img" src="/static/images/logo.png" mode="widthFix" alt="logo" @click="openLeftDrawer" />
+		</div>
+		<div class="right">
+			<div class="lang-select">
+				<image class="img flag" src="/static/flag-en.png" alt="en" />
+				<text>English</text>
+				<text class="arrow">▼</text>
+			</div>
+			<text class="icon sun" @click="toggleTheme">🌞</text>
+			<text class="icon bell">🔔<text class="dot"></text></text>
+			<text class="icon avatar">
+				<image class="img" src="/static/avatar.png" alt="avatar" />
+			</text>
+			<text class="icon logo" @click="openRightDrawer">
+				<image class="img" src="/static/logo.png" alt="logo" />
+			</text>
+		</div>
+	</header>
 </template>
 
 <script setup lang="ts">
-import useGlobalStore from '@/stores/use-global-store'
-const globalStore = useGlobalStore()
+// import useGlobalStore from '@/stores/use-global-store'
+// const globalStore = useGlobalStore()
 import useRouter from "@/hooks/useRouter";
 const router = useRouter();
 const props = defineProps({
-    sidebarVisible: {
-        type: Boolean,
-        default: false
-    },
+	sidebarVisible: {
+		type: Boolean,
+		default: false
+	},
 })
 const emit = defineEmits<{
-    (e: 'open-right-drawer'): void
+	(e: 'open-right-drawer'): void,
+	(e: 'open-left-drawer'): void
 }>()
 
 function toggleTheme() {
-    globalStore.setGlobalTheme(globalStore.theme === 'light' ? 'dark' : 'light');
+	// globalStore.setGlobalTheme(globalStore.theme === 'light' ? 'dark' : 'light');
 }
 
 function openRightDrawer() {
-    emit('open-right-drawer');
+	emit('open-right-drawer');
+}
+
+function openLeftDrawer() {
+	emit('open-left-drawer');
 }
 </script>
 
 <style scoped lang="scss">
 .cwg-pc-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 56px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-bottom: 1px solid #f0f0f0;
-    padding: 0 32px;
-    position: relative;
-    z-index: 10;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100vw;
+	height: px2rpx(55);
+	background-color: rgba(255, 255, 255, 0.9);
+	border-bottom: 1px solid #f0f0f0;
+	padding: 0 px2rpx(16);
+	box-sizing: border-box;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10;
 }
 
 .left {
-    display: flex;
-    align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .back-arrow {
-    color: #e74c3c;
-    font-size: 22px;
-    cursor: pointer;
-    margin-right: 16px;
+	color: #e74c3c;
+	font-size: 22px;
+	cursor: pointer;
+	margin-right: 16px;
 }
 
 .center {
-    flex: 1;
+	flex: 1;
 }
 
 .right {
-    display: flex;
-    align-items: center;
-    gap: 18px;
+	display: flex;
+	align-items: center;
+	gap: 18px;
 }
 
 .lang-select {
-    display: flex;
-    align-items: center;
-    background: #f5f7fa;
-    border-radius: 18px;
-    padding: 4px 12px;
-    font-size: 14px;
-    cursor: pointer;
+	display: flex;
+	align-items: center;
+	background: #f5f7fa;
+	border-radius: 18px;
+	padding: 4px 12px;
+	font-size: 14px;
+	cursor: pointer;
 }
 
 .flag {
-    width: 22px;
-    height: 16px;
-    margin-right: 6px;
+	width: 22px;
+	height: 16px;
+	margin-right: 6px;
 }
 
 .arrow {
-    margin-left: 4px;
-    font-size: 12px;
+	margin-left: 4px;
+	font-size: 12px;
 }
 
 .icon {
-    font-size: 20px;
-    position: relative;
-    cursor: pointer;
+	font-size: 20px;
+	position: relative;
+	cursor: pointer;
 }
 
 .bell .dot {
-    position: absolute;
-    top: 0;
-    right: -2px;
-    width: 7px;
-    height: 7px;
-    background: #27ae60;
-    border-radius: 50%;
-    display: inline-block;
+	position: absolute;
+	top: 0;
+	right: -2px;
+	width: 7px;
+	height: 7px;
+	background: #27ae60;
+	border-radius: 50%;
+	display: inline-block;
+}
+
+.left-img {
+	width: px2rpx(120);
 }
 
 .avatar .img {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: #eee;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: #eee;
 }
 
 .logo .img {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: #fff;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background: #fff;
 }
 </style>

components/cwg-sidebar.vue

@@ -1,22 +1,26 @@
 <template>
     <view class="cwg-sidebar">
-        <image class="logo" src="/static/images/logo3.png" mode="widthFix" />
-        <view class="menu">
-            <cwg-tooltip class="item" placement="right" v-for="item in menu" :key="item.path"
-                @click="handleClick(item.path)">
-                <view class="menu-item">
-                    <cwg-icon color="#fff" :icon="item.icon" class="arrow" />
+        <view class="menu" v-for="(item, index) in menu" :key="item.path">
+            <view class="menu-item" @click="handleClick(index)">
+                <cwg-icon :name="item.icon" :size="20" color="#6c8595" />
+                <view class="menu-label" v-t="item.label" />
+                <view class="chevron-icon" :class="{ 'expanded': item.isOpenMenu }">
+                    <cwg-icon v-if="item.children && item.children.length" name="crm-chevron-down" :size="20"
+                        color="#6c8595" />
                 </view>
-                <template v-slot:content>
-                    <view class="adaptive-tooltip" v-t="item.label" />
-                </template>
-            </cwg-tooltip>
+            </view>
+            <view ref="submenuRefs" class="submenu-box" :style="{
+                height: item.isOpenMenu ? item.submenuHeight + 'px' : '0px',
+                transition: 'height 281ms cubic-bezier(0.4, 0, 0.2, 1)'
+            }" :class="{ 'active': item.isOpenMenu }">
+                <cwg-submenu v-if="item.children" :submenu-items="item.children" @submenu-click="handleSubmenuClick" />
+            </view>
         </view>
     </view>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted, nextTick, watch } from 'vue';
 import useRouter from "@/hooks/useRouter";
 const router = useRouter();
 import useRoute from '@/hooks/useRoute'
@@ -28,59 +32,164 @@ interface MenuItem {
     children?: MenuItem[];
 }
 const emit = defineEmits(['menu-click']);
+// 菜单数据
 const menu = ref<MenuItem[]>([
-    { path: '/pages/customer/index', label: 'Home.msg.Custom', icon: 'crm-house' },
-    { path: '/pages/customer/promotion', label: 'Home.msg.Ib', icon: 'crm-users' },
-    { path: '/pages/customer/deposit', label: 'Documentary.title', icon: 'crm-chart-area' },
-    { path: '/pages/customer/withdrawal', label: 'Downloadpage.item1', icon: 'crm-download' },
-    { path: '/pages/customer/support', label: 'Downloadpage.item16', icon: 'crm-headset' },
+    {
+        isOpenMenu: false, submenuHeight: 0,
+        path: '/pages/customer/index', label: 'Home.msg.Custom', icon: 'crm-house',
+        children: [
+            { path: '/pages/customer/index', label: 'Client Zone', icon: 'icon-client' },
+            { path: '/pages/customer/promotion', label: 'Promotion Center', icon: 'icon-promotion' },
+            { path: '/pages/customer/deposit', label: 'Deposit', icon: 'icon-deposit' },
+            { path: '/pages/customer/withdrawal', label: 'Withdrawal', icon: 'icon-withdrawal' },
+            { path: '/pages/customer/payment-history', label: 'Payment History', icon: 'icon-payment' },
+            { path: '/pages/customer/transfer', label: 'Internal Transfer', icon: 'icon-transfer' },
+            { path: '/pages/customer/recording-history', label: 'Application History', icon: 'icon-application' }
+        ]
+    },
+    {
+        isOpenMenu: false, submenuHeight: 0,
+        path: '/pages/customer/index', label: 'Home.msg.Custom', icon: 'crm-house',
+        children: []
+    },
+    {
+        isOpenMenu: false,
+        path: '/pages/customer/promotion', label: 'Home.msg.Ib', icon: 'crm-users',
+        children: []
+    },
+    {
+        path: '/pages/customer/deposit', isOpenMenu: false, label: 'Documentary.title', icon: 'crm-chart-area',
+        children: []
+    },
+    {
+        path: '/pages/customer/withdrawal', isOpenMenu: false, label: 'Downloadpage.item1', icon: 'crm-download',
+        children: []
+    },
+    {
+        path: '/pages/customer/support', isOpenMenu: false, label: 'Downloadpage.item16', icon: 'crm-headset',
+        children: []
+    },
 ]);
-function handleClick(path: string) {
-    if (route.path !== path) {
-        router.push(path);
+const submenuRefs = ref<any[]>([]);
+const measureHeight = (element: HTMLElement): number => {
+    const originalDisplay = element.style.display;
+    const originalPosition = element.style.position;
+    const originalVisibility = element.style.visibility;
+    const originalWidth = element.style.width;
+    element.style.display = 'block';
+    element.style.position = 'absolute';
+    element.style.visibility = 'hidden';
+    element.style.width = '100%';
+    const height = element.scrollHeight || element.offsetHeight;
+    element.style.display = originalDisplay;
+    element.style.position = originalPosition;
+    element.style.visibility = originalVisibility;
+    element.style.width = originalWidth;
+
+    return height;
+};
+const updateSubmenuHeight = (index: number) => {
+    const refs = submenuRefs.value;
+    if (refs && refs[index]) {
+        const el = refs[index].$el || refs[index];
+        const height = measureHeight(el);
+        console.log(height, 12121);
+
+        if (height > 0) {
+            menu.value[index].submenuHeight = height;
+        }
     }
+};
+function handleClick(index: number) {
+    menu.value[index].isOpenMenu = !menu.value[index].isOpenMenu;
 }
+watch(route, () => {
+    const currentPath = route.path;
+    menu.value.forEach((item, index) => {
+        if (item.children) {
+            const isActive = item.children.some(child => child.path === currentPath);
+            menu.value[index].isOpenMenu = isActive;
+            if (isActive) {
+                nextTick(() => {
+                    updateSubmenuHeight(index);
+                });
+            }
+        }
+    });
+}, { immediate: true })
+
+onMounted(() => {
+    nextTick(() => {
+        menu.value.forEach((item, index) => {
+            if (item.children) {
+                updateSubmenuHeight(index);
+            }
+        });
+    });
+});
 </script>
 
 <style scoped lang="scss">
 @import "@/uni.scss";
 
 .cwg-sidebar {
-    width: px2rpx(100);
-    background: var(--color-navy-900);
-    color: #fff;
-    height: 100vh;
+    width: px2rpx(280);
+    color: #6c8595;
+    height: calc(100vh - 56px);
+    overflow: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: px2rpx(8);
     padding-top: px2rpx(20);
     box-sizing: border-box;
+    gap: px2rpx(8);
+    border-right: 1px solid rgba(108, 133, 149, 0.12);
 
     .logo {
         width: px2rpx(54);
     }
 
+    .submenu-box {
+        width: 100%;
+        height: 0;
+        overflow: hidden;
+    }
+
     .menu {
+        width: 100%;
+        position: relative;
         display: flex;
         flex-direction: column;
-        gap: px2rpx(20);
         align-items: center;
-        padding-top: px2rpx(30);
+        box-sizing: border-box;
+
     }
 
     .menu-item {
+        width: 100%;
+        height: px2rpx(40);
+        cursor: pointer;
         display: flex;
         align-items: center;
-        justify-content: center;
-        width: px2rpx(54);
-        height: px2rpx(54);
-        border-radius: px2rpx(12);
-        cursor: pointer;
-        background: var(--color-navy-700);
-        transition: background 0.2s;
+        justify-content: space-between;
+        gap: px2rpx(8);
+        padding: px2rpx(10);
+        box-sizing: border-box;
+        font-size: 14px;
+
+        .menu-label {
+            flex: 1;
+        }
 
         &:hover {
-            background: var(--color-navy-600);
+            background: rgba(108, 133, 149, 0.12) !important;
+            border: 1px solid rgb(145, 163, 176) !important;
+            border-radius: px2rpx(4);
+        }
+
+        .expanded .icon {
+            transform: rotate(180deg);
         }
     }
 }

components/cwg-submenu.vue

@@ -1,21 +1,16 @@
 <template>
     <view class="cwg-submenu">
-        <view class="cwg-submenu-title">
-            <text>
-                CWG Markets
-            </text>
-        </view>
         <view class="submenu">
-            <view class="cwg-submenu-item" v-for="item in submenuItems" :key="item.path"
-                @click="handleClick(item.path)">
-                <text>{{ item.label }}</text>
+            <view class="cwg-submenu-item" :class="{ 'active': activePath === item.path }" v-for="item in submenuItems"
+                :key="item.path" @click="handleClick(item.path)">
+                <text v-t="item.label"></text>
             </view>
         </view>
     </view>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, watch, nextTick } from 'vue';
 import useRouter from "@/hooks/useRouter";
 const router = useRouter();
 import useRoute from '@/hooks/useRoute'
@@ -26,18 +21,13 @@ interface MenuItem {
     icon?: string;
     children?: MenuItem[];
 }
-
-const submenuItems = ref<MenuItem[]>([{ path: '/pages/customer/index', label: 'Client Zone', icon: 'icon-client' },
-{ path: '/pages/customer/promotion', label: 'Promotion Center', icon: 'icon-promotion' },
-{ path: '/pages/customer/deposit', label: 'Deposit', icon: 'icon-deposit' },
-{ path: '/pages/customer/withdrawal', label: 'Withdrawal', icon: 'icon-withdrawal' },
-{ path: '/pages/customer/payment-history', label: 'Payment History', icon: 'icon-payment' },
-{ path: '/pages/customer/transfer', label: 'Internal Transfer', icon: 'icon-transfer' },
-{ path: '/pages/customer/recording-history', label: 'Application History', icon: 'icon-application' },
-{ path: '/pages/ib/index', label: 'IB Zone', icon: 'icon-ib' },
-{ path: '/pages/customer/copy', label: 'Copy Trading', icon: 'icon-copy' },
-{ path: '/pages/customer/platform', label: 'Trading Platform', icon: 'icon-platform' },
-{ path: '/pages/customer/chat', label: 'Online Chat', icon: 'icon-chat' },])
+const props = defineProps({
+    submenuItems: {
+        type: Array as () => MenuItem[],
+        default: () => []
+    }
+})
+const activePath = computed(() => route.path + (route.query?.type ? `?type=${route.query.type}` : '') || '')
 const emit = defineEmits(['submenu-click']);
 function handleClick(path: string) {
     if (route.path !== path) {
@@ -50,39 +40,39 @@ function handleClick(path: string) {
 @import "@/uni.scss";
 
 .cwg-submenu {
-    background: #fff;
-    position: relative;
-    z-index: 11;
-
-    padding: 0;
-    margin: 0;
-    box-shadow: px2rpx(4) 0 px2rpx(12) rgba(15, 23, 43, 0.08);
-    border-left: 1px solid #E2E8F0;
-
-    .cwg-submenu-title {
-        padding: px2rpx(20);
-        font-size: px2rpx(16);
-        font-weight: 700;
-        border-bottom: 1px solid #E2E8F0;
-        color: #0F172B;
-    }
+    width: 100%;
 
     .submenu {
-        margin: 0 px2rpx(20);
-        width: px2rpx(200);
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: px2rpx(8);
+        padding: px2rpx(8) px2rpx(8) px2rpx(8) px2rpx(32);
+        box-sizing: border-box;
     }
 
     .cwg-submenu-item {
-        padding: px2rpx(20) 0px;
+        width: 100%;
+        height: px2rpx(40);
         cursor: pointer;
-        color: #0F172B;
-        font-weight: 600;
-        transition: background 0.2s;
         display: flex;
         align-items: center;
-        gap: px2rpx(10);
-        font-size: px2rpx(14);
-        border-bottom: 1px solid #E2E8F0;
+        gap: 12px;
+        padding: px2rpx(10);
+        box-sizing: border-box;
+        font-size: 14px;
+
+        &:hover {
+            background: rgba(108, 133, 149, 0.12) !important;
+            border: 1px solid rgb(145, 163, 176) !important;
+            border-radius: px2rpx(4);
+        }
+
+        &.active {
+            background: rgba(108, 133, 149, 0.12) !important;
+            border-radius: px2rpx(4);
+        }
     }
 }
 </style>

pages.json

@@ -9,6 +9,24 @@
       "^cwg-(.*)": "@/components/cwg-$1.vue"
     }
   },
+  "leftWindow": {
+    "path": "windows/left-window.vue",
+    "style": {
+      "width": "280px"
+    },
+    "matchMedia": {
+      "minWidth": 991
+    }
+  },
+  "topWindow": {
+    "path": "windows/top-window.vue",
+    "style": {
+      "height": "56px"
+    },
+    "matchMedia": {
+      "minWidth": 991
+    }
+  },
   "pages": [
     {
       "path": "pages/launch/index",

pages/activities/detail.vue

@@ -0,0 +1,1593 @@
+<template>
+    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
+        <view class="info-card">
+            <view class="content-title">
+                <view v-t="'Custom.Activity.Single'" />
+            </view>
+            <view id="News_Content">
+
+                <view class="content crm-border-radius" v-if="!ActivitySingle20 &&
+                    !ActivitySingle23 &&
+                    !ActivitySingle23nz_zx &&
+                    !ActivitySingle23jx &&
+                    !ActivitySingle23nz &&
+                    !ActivitySingle23nzTwo &&
+                    !ActivitySingle23jxVip &&
+                    !ActivitySingle24JYB &&
+                    !ActivitySingle23xinjia &&
+                    !ActivitySingle23jnhcj &&
+                    !ActivitySingleNewList &&
+                    !ActivitySingleNoWorries &&
+                    !ActivitySingleNewYear24">
+                    <view class="img">
+                        <cwg-image :lazy="false"
+                            :a='imgUrl + (singleData.activityImage ? singleData.activityImage : singleData.coverImage)'
+                            src="https://file.44a5c8109e4.com/file//444/info/b5a55df62bdb407792c5bbcd7766631c.png">
+                        </cwg-image>
+                    </view>
+                    <view v-html="singleData.content" />
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingleNewList">
+                    <view class="img">
+                        <cwg-image style="width: 500px;" :src="imgUrl + singleData.coverUrl">
+                        </cwg-image>
+                    </view>
+                    <view v-html="singleData.content" />
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle20">
+                    <view v-if="country == 'CN'">
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.ActivitiesContent.item0'">CWG 20%赠金入会礼</h4>
+                            <view style="font-size: 14px;" v-t="'news_add_field1.ActivitiesContent.item1'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item2'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item3'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item4'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item5'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item6'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item7'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item8'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item9'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item10'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item11'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item12'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item13'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item14'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item15'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item16'" />
+                                    </view>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.ActivitiesContent.item17'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item18'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item19'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item20'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item21'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item22'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item23'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item24'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item25'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item26'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item27'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item28'" />
+                            </view>
+                        </view>
+                    </view>
+                    <view v-else>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.ActivitiesContent.item0'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.ActivitiesContent.item29'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item30'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item31'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item32'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item33'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item34'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item35'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item36'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item37'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item38'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item39'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <span v-t="'news_add_field1.ActivitiesContent.item40'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item41'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item42'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item43'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item44'" />
+                                    </view>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.ActivitiesContent.item45'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item46'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item47'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item48'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item49'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item50'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item51'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item52'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item53'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item54'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item55'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item56'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item57'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.ActivitiesContent.item58'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <h4 v-t="'news_add_field1.ActivitiesContent.item60_1'" />
+                                <view class="lis" style="margin-left: 15px;">
+                                    <h4 v-t="'news_add_field1.ActivitiesContent.item59'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis"><span v-t="'news_add_field1.ActivitiesContent.item60'" />
+                                            <span class="toDocumentary crm-cursor" @click="toDocumentary"
+                                                v-t="'news_add_field1.ActivitiesContent.item60_1'" />
+                                        </view>
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item61'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item61_1'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <h4 v-t="'news_add_field1.ActivitiesContent.item62'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item63'" />
+                                    </view>
+                                </view>
+                                <view class="lis" style="margin-left: 15px;">
+                                    <h4 v-t="'news_add_field1.ActivitiesContent.item64'" />
+                                    <view class="uls" style="margin-left: 15px;">
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item65'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item65_5'" />
+                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item66'" />
+                                    </view>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.ActivitiesContent.item67'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item68'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item69'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item70'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item71'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item72'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item73'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item74'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item75'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item76'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item77'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item78'" />
+                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item79'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23nz_zx">
+                    <view>
+                        <view v-if="country == 'CN'">
+                            <h4 v-if="isGuoQin" style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activities10_trading_aoyun.item1_1'" />
+                            <h4 v-else style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activities10_trading_aoyun.item1'" />
+                            <view class="uls" v-if="isGuoQin">
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.deposit.item23'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item1'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item2'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item3'" />
+                                <view class="lis">
+                                    <view class="uls">
+                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item31'" />
+                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item32'" />
+                                    </view>
+                                </view>
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item4'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item5'" />
+                                <view class="lis">
+                                    <view class="uls">
+                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item51'" />
+                                    </view>
+                                </view>
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item6'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item7'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item8'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9_1'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item10'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item11'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item12'" />
+                            </view>
+                            <view class="uls" v-else>
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.deposit.item23'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item1'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item2'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item3'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item4'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item5'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item6'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item7'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item8'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item9_1'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item9'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item10'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item11'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item11_1'" />
+                                <view class="lis">
+                                    <view class="uls">
+                                        <view class="lis" v-t="'news_add_field.CWGActivity.item111'" />
+                                        <view class="lis" v-t="'news_add_field.CWGActivity.item112'" />
+                                        <view class="lis" v-t="'news_add_field.CWGActivity.item113'" />
+                                        <view class="lis" v-t="'news_add_field.CWGActivity.item114'" />
+                                    </view>
+                                </view>
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item12'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity.item13'" />
+                            </view>
+                        </view>
+                        <view v-if="country != 'CN'">
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activities10_trading_aoyun.item1_1'" />
+                            <view class="uls">
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.deposit.item23'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item1'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item2'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item3'" />
+                                <view class="lis">
+                                    <view class="uls">
+                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item31'" />
+                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item32'" />
+                                    </view>
+                                </view>
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item4'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item5'" />
+                                <view class="lis">
+                                    <view class="uls">
+                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item51'" />
+                                    </view>
+                                </view>
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item6'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item7'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item8'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9_1'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item10'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item11'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item12'" />
+                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item13'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23jx">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesJX.item6'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item7'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4><span v-t="'news_add_field1.activitiesJX.item8'" />{{
+                                        timeJx.applicationStartTime
+                                    }}
+                                        - {{ timeJx.applicationEndTime }}</h4>
+                                    <h4><span v-t="'news_add_field1.activitiesJX.item9'" />{{
+                                        timeJx.activityStartTime
+                                    }} -
+                                        {{ timeJx.activityEndTime }}</h4>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJX.item10'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item11'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item12'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item13'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item14'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item15'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item16'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item17'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item18'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item19'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item20'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item21'" />
+                            </view>
+                            <view style="font-size: 16px;
+                      font-weight: bold;
+                      color: #3490CE;
+                      text-align: center;
+                      margin: 20px 0;">
+                                <a class="crm-cursor" style="font-size: 16px;
+                      font-weight: bold;
+                      color: #3490CE;
+                      text-align: center;
+                      margin: 20px 0;" :href="imgUrl + '/activity/jiangx/index.html'" target="_blank"
+                                    v-t="'news_add_field1.activitiesJX.item22'"></a>
+                            </view>
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item23'" />
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23jxVip">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesJX.item6'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item7'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4><span v-t="'news_add_field1.activitiesJX.item8'" />截止到 2024年7月19日</h4>
+                                    <h4><span v-t="'news_add_field1.activitiesJX.item9'" />2024年7月22日到9月22日</h4>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJX.item10'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item11'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item12'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item13'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item14'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item15'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item16'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item17'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item18'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item19'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item20'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJX.item21'" />
+                            </view>
+                            <view style="font-size: 16px;
+                      font-weight: bold;
+                      color: #3490CE;
+                      text-align: center;
+                      margin: 20px 0;">
+                                <a class="crm-cursor" style="font-size: 16px;
+                      font-weight: bold;
+                      color: #3490CE;
+                      text-align: center;
+                      margin: 20px 0;" :href="imgUrl + '/activity/jiangx/indexVip.html'" target="_blank"
+                                    v-t="'news_add_field1.activitiesJX.item22'"></a>
+                            </view>
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item23'" />
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle24JYB">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesJYB.item6'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYB.item7'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4>
+                                        <span v-t="'news_add_field1.activitiesJYB.item8'" />
+                                        <span v-t="'news_add_field1.activitiesJYB.item8_1'" />
+                                    </h4>
+                                    <h4><span v-t="'news_add_field1.activitiesJYB.item9'" />
+                                        <span v-t="'news_add_field1.activitiesJYB.item9_1'" />
+                                    </h4>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYB.item10'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item11'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item12'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item13'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item14'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item15'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item16'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item17'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item18'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item19'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item20'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item21'" />
+                            </view>
+                            <view style="font-size: 16px;
+                      font-weight: bold;
+                      color: #3490CE;
+                      text-align: center;
+                      margin: 20px 0;">
+                                <a class="crm-cursor" style="font-size: 16px;
+                      font-weight: bold;
+                      color: #3490CE;
+                      text-align: center;
+                      margin: 20px 0;" :href="imgUrl + '/activity/jiangx/indexJYB.html'" target="_blank"
+                                    v-t="'news_add_field1.activitiesJYB.item22'"></a>
+                            </view>
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYB.item23'" />
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23nz">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesNZ.item6'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesNZ.item7'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4><span v-t="'news_add_field1.activitiesNZ.item8'" />{{
+                                        timeJx.applicationStartTime
+                                    }}
+                                        - {{ timeJx.applicationEndTime }}</h4>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNZ.item10'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item11'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item12'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item13'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item14'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item15'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item16'" />
+                                <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
+                                    <tr>
+                                        <th v-t="'news_add_field1.activitiesNZ.item31'" />
+                                        <th v-t="'news_add_field1.activitiesNZ.item41'" />
+                                        <th v-t="'news_add_field1.activitiesNZ.item51'" />
+                                        <th v-t="'news_add_field1.activitiesNZ.item61'" />
+                                        <th v-t="'news_add_field1.activitiesNZ.item71'" />
+                                        <th v-t="'news_add_field1.activitiesNZ.item81'" />
+                                        <th v-t="'news_add_field1.activitiesNZ.item91'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZ.item32'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item42'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item52'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item62'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item72'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item82'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item92'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZ.item33'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item43'" />
+                                        <td><span style="color:#F56C6C;" v-t="'news_add_field1.activitiesNZ.item53'" />
+                                        </td>
+                                        <td v-t="'news_add_field1.activitiesNZ.item63'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item73'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item83'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item93'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZ.item34'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item44'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item54'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item64'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item74'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item84'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item94'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZ.item35'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item45'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item55'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item65'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item75'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item85'" />
+                                        <td v-t="'news_add_field1.activitiesNZ.item95'" />
+                                    </tr>
+                                </table>
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item17'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item18'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item19'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item20'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item21'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23nzTwo">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesNZTwo.item6'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesNZTwo.item7'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4><span v-t="'news_add_field1.activitiesNZTwo.item8'" />{{
+                                        timeJx.applicationStartTime }}
+                                        - {{ timeJx.applicationEndTime }}</h4>
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNZTwo.item10'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item11'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item12'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item13'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item14'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item15'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item16'" />
+                                <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
+                                    <tr>
+                                        <th v-t="'news_add_field1.activitiesNZTwo.item31'" />
+                                        <th v-t="'news_add_field1.activitiesNZTwo.item41'" />
+                                        <th v-t="'news_add_field1.activitiesNZTwo.item51'" />
+                                        <th v-t="'news_add_field1.activitiesNZTwo.item61'" />
+                                        <th v-t="'news_add_field1.activitiesNZTwo.item71'" />
+                                        <th v-t="'news_add_field1.activitiesNZTwo.item81'" />
+                                        <th v-t="'news_add_field1.activitiesNZTwo.item91'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item32'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item42'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item52'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item62'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item72'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item82'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item92'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item33'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item43'" />
+                                        <td><span style="color:#F56C6C;"
+                                                v-t="'news_add_field1.activitiesNZTwo.item53'" />
+                                        </td>
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item63'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item73'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item83'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item93'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item34'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item44'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item54'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item64'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item74'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item84'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item94'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item35'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item45'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item55'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item65'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item75'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item85'" />
+                                        <td v-t="'news_add_field1.activitiesNZTwo.item95'" />
+                                    </tr>
+                                </table>
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item17'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item18'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item19'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item20'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item21'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23xinjia">
+                    <view>
+                        <!-- CWG交易之星（中国·新疆）特邀巅峰赛 -->
+                        <view v-if="0">
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesJYDS.item6'" />
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item7'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item8'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item9'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item10'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item11'" />
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item12'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4 v-t="'news_add_field1.activitiesJYDS.item13'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS.item14'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS.item15'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS.item16'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS.item17'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS.item18'" />
+                                </view>
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4 v-t="'news_add_field1.activitiesJYDS.item19'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS.item20'" />
+                                </view>
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item21'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item22'" />
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item23'" />
+                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
+                                <tr>
+                                    <th v-t="'news_add_field1.activitiesJYDS.item24'" />
+                                    <th v-t="'news_add_field1.activitiesJYDS.item25'" />
+                                    <th v-t="'news_add_field1.activitiesJYDS.item26'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item27'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item28'" />
+                                    <td>
+                                        <view v-t="'news_add_field1.activitiesJYDS.item29'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item29_1'" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item30'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item31'" />
+                                    <td>
+                                        <view v-t="'news_add_field1.activitiesJYDS.item32'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item32_1'" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item33'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item34'" />
+                                    <td>
+                                        <view v-t="'news_add_field1.activitiesJYDS.item35'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item35_1'" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item36'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item37'" />
+                                    <td>
+                                        <view v-t="'news_add_field1.activitiesJYDS.item38'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item38_1'" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item39'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item40'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item41'" />
+                                </tr>
+                            </table>
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item42'" />
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item43'" />
+                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
+                                <tr>
+                                    <th colspan="2" v-t="'news_add_field1.activitiesJYDS.item44'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item45'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item46'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item47'" />
+                                    <td>
+                                        <view v-t="'news_add_field1.activitiesJYDS.item48'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item49'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item50'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item51'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item52'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS.item53'" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item54'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item55'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item56'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item57'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item58'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item59'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item60'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item61'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item62'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item63'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS.item64'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS.item65'" />
+                                </tr>
+                            </table>
+
+
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item66'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item67'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item68'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item69'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item70'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item71'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item72'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item73'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item74'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item75'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item76'" />
+                            </view>
+                        </view>
+                        <!--CWG Markets  African Forex Trading Challenge 2025 -->
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesJYDS2025.item6'" />
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesJYDS2025.item6_1'" />
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item7'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item8'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item9'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item10'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item11'" />
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item11_1'" />
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item12'" />
+                            <view class="uls" style="font-size: 14px;">
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item13'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS2025.item14'" />
+
+                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item15'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS2025.item16'" />
+
+                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item17'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS2025.item18'" />
+                                </view>
+                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
+                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item19'" />
+                                    <view v-t="'news_add_field1.activitiesJYDS2025.item20'" />
+                                </view>
+                            </view>
+                            <view style="font-size: 14px;margin-top: 20px;"
+                                v-t="'news_add_field1.activitiesJYDS2025.item21'">
+                            </view>
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item23'" />
+                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
+                                <tr>
+                                    <th v-t="'news_add_field1.activitiesJYDS2025.item24'" />
+                                    <th v-t="'news_add_field1.activitiesJYDS2025.item25'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item26'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item27'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item28'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item30'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item31'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item32'" />
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item33'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item34'" />
+                                    </td>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item35'" />
+                                </tr>
+                            </table>
+                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item42'" />
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item43'" />
+                            <h4 style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item43_1'" />
+                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
+                                <tr>
+                                    <th colspan="2" v-t="'news_add_field1.activitiesJYDS2025.item44'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item45'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item46'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item47'" />
+                                    <td style="text-align: left;">
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item48'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item49'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item50'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item51'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item52'" />
+                                        <view v-t="'news_add_field1.activitiesJYDS2025.item53'" />
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item54'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item55'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item56'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item57'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item58'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item59'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item60'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item61'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item62'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item63'" />
+                                </tr>
+                                <tr>
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item64'" />
+                                    <td v-t="'news_add_field1.activitiesJYDS2025.item65'" />
+                                </tr>
+                            </table>
+
+
+                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item66'" />
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item67'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item68'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item69'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item70'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item71'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item72'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item73'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item74'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingle23jnhcj">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;" v-t="'wallet.item21'">
+                            </h4>
+                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
+                                <!-- <view class="lis" v-t="'wallet.item21_1'" /> -->
+                                <view class="lis" v-t="'wallet.item22'" />
+                                <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
+                                    <tr>
+                                        <td v-t="'wallet.item23'" />
+                                        <td v-t="'wallet.item24'" />
+                                        <td v-t="'wallet.item25'" />
+                                        <td v-t="'wallet.item26'" />
+                                        <td v-t="'wallet.item27'" />
+                                    </tr>
+                                    <tr>
+                                        <td v-t="'wallet.item28'" />
+                                        <td v-t="'wallet.item29'" />
+                                        <td v-t="'wallet.item30'" />
+                                        <td v-t="'wallet.item31'" />
+                                        <td v-t="'wallet.item32'" />
+                                    </tr>
+                                </table>
+                                <view class="lis" v-t="'wallet.item33'" />
+                                <view class="lis" v-t="'wallet.item34'" />
+                                <view class="lis" v-t="'wallet.item35'" />
+                                <view class="lis" v-t="'wallet.item36'" />
+                                <view class="lis" v-t="'wallet.item37'" />
+                                <view class="lis" v-t="'wallet.item38'" />
+                                <view class="lis" v-t="'wallet.item39'" />
+                                <view class="lis" v-t="'wallet.item40'" />
+                                <view class="lis" v-t="'wallet.item41'" />
+                                <view class="lis" v-t="'wallet.item42'" />
+                                <view class="lis" v-t="'wallet.item43'" />
+                                <view class="lis" v-t="'wallet.item44'" />
+                                <view class="lis" v-t="'wallet.item45'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingleNoWorries">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.activitiesNoWorries.item1'" />
+                            <view class="uls">
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_31'" />
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_1'" />
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_2'" />
+                                <view class="lis">
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_3'" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_4'"
+                                        style="font-weight: bold;" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_5'" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_6'"
+                                        style="font-weight: bold;" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_7'" />
+                                </view>
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_8'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_9'" />
+                                <view class="lis">
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_10'" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_11'"
+                                        style="font-weight: bold;color: #EB3F57;" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_12'" />
+                                </view>
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_13'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_14'" />
+                                <view class="lis">
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_15'" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_16'"
+                                        style="font-weight: bold;" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_17'" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_18'"
+                                        style="font-weight: bold;" />
+                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_19'" />
+                                </view>
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_20'"
+                                    style="color: #EB3F57;" />
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_21'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_22'" />
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_23'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_24'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_25'" />
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_26'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_27'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_28'" />
+                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_29'" />
+                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_30'" />
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="content crm-border-radius" v-if="ActivitySingleNewYear24">
+                    <view>
+                        <view>
+                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
+                                v-t="'news_add_field1.NewYear24.item1'" />
+                            <view class="NewYear_quan">
+                                <view class="crm-title-box">
+                                    <span class="tit" v-t="'news_add_field1.NewYear24.item9'" />
+                                </view>
+                                <view class="tip">
+                                    <view v-t="'news_add_field1.NewYear24.item10'" />
+                                    <view v-t="'news_add_field1.NewYear24.item10_1'" />
+                                    <view v-t="'news_add_field1.NewYear24.item10_3'" />
+                                    <view v-t="'news_add_field1.NewYear24.item10_2'" />
+                                </view>
+                                <view class="quanBox">
+                                    <view v-for="(item, index) in tableDataNewYear24.extraConfigs" :key="index"
+                                        class="couponRed"
+                                        :class="{ 'couponBlack': quanStatus(item) == 1 || item.use == 1 }">
+                                        <view class="price">
+                                            <view class="dec" v-t="'news_add_field1.NewYear24.item10BG1'" />
+                                            <span class="num" v-if="item.interestRateExtraDay == 1"
+                                                v-t="'news_add_field1.NewYear24.item10BG2'" />
+                                            <span class="num" v-if="item.interestRateExtraDay == 3"
+                                                v-t="'news_add_field1.NewYear24.item10BG3'" />
+                                            <span class="num" v-if="item.interestRateExtraDay == 5"
+                                                v-t="'news_add_field1.NewYear24.item10BG4'" />
+                                            <span class="num" v-if="item.interestRateExtraDay == 7"
+                                                v-t="'news_add_field1.NewYear24.item10BG5'" />
+                                        </view>
+                                        <view class="describe">
+                                            <view
+                                                v-if="item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_EXTRA_ACCUMULATE'">
+                                                <view>
+                                                    <span v-t="'news_add_field1.NewYear24.item10BG9'" v-if="!isZh" />
+                                                    <span v-if="item.interestRateExtraDay == 1">{{ isCountDown1
+                                                    }}</span>
+                                                    <span v-if="item.interestRateExtraDay == 3">{{ isCountDown3
+                                                    }}</span>
+                                                    <span v-if="item.interestRateExtraDay == 5">{{ isCountDown5
+                                                    }}</span>
+                                                    <span v-if="item.interestRateExtraDay == 7">{{ isCountDown7
+                                                    }}</span>
+                                                    <span v-t="'news_add_field1.NewYear24.item10BG9'" v-if="!isZh" />
+                                                </view>
+                                                <view v-t="'news_add_field1.NewYear24.item10BG10'" />
+                                            </view>
+                                            <view v-if="item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_BALANCE'">
+                                                <span v-t="'news_add_field1.NewYear24.item10BG6'" />${{ (item.min -
+                                                    tableDataNewYear24.balance).toFixed(2) > 0 ? (item.min -
+                                                        tableDataNewYear24.balance).toFixed(2) : 0 }}
+                                                <span v-t="'news_add_field1.NewYear24.item10BG7'" />${{ item.min
+                                                }}<span v-t="'news_add_field1.NewYear24.item10BG8'" />
+                                            </view>
+                                        </view>
+                                        <view class="btns" v-if="quanStatus(item) == 1">
+                                            <button v-t="'news_add_field1.NewYear24.item13'" />
+                                        </view>
+                                        <view class="btns" v-if="quanStatus(item) == 2">
+                                            <button v-t="'news_add_field1.NewYear24.item13'" v-if="item.use == 0"
+                                                @click="ActivityNewYear24Receive(item.id)" />
+                                            <button v-t="'news_add_field1.NewYear24.item14'" v-if="item.use == 1"
+                                                class="use" />
+                                        </view>
+                                        <view class="quan_guoqi" v-if="item.use == 0">
+                                            <span v-if="!isZh">2025-4-1
+                                            </span>
+                                            <span v-t="'news_add_field1.NewYear24.item15'" />
+                                            <span v-if="!isZh">
+                                                2025-4-1</span>
+                                        </view>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+
+                <!--弹出框-->
+                <uni-popup ref="popupRef" type="center" background-color="#fff">
+                    <view class="dia-content">
+                        <view class="des1" style="font-size: 16px;line-height: 1.6;margin: 30px 0 50px;"
+                            v-t="'news_add_field1.NewYear24.itemQ2'" v-if="NewYear24Status == 1" />
+                        <view class="des1" style="font-size: 16px;line-height: 1.6;margin: 30px 0 50px;"
+                            v-t="'news_add_field1.NewYear24.itemQ3'" v-if="NewYear24Status == 2" />
+                        <view slot="footer" class="dialog-footer">
+                            <el-button type="primary" v-t="'Btn.Confirm'"
+                                @click="NewYear24StatusFlag = false"></el-button>
+                        </view>
+                    </view>
+                </uni-popup>
+            </view>
+        </view>
+
+    </cwg-page-wrapper>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { activityApi } from "@/service/activity"
+import Config from "@/config/index"
+import { useI18n } from 'vue-i18n'
+const { t, locale } = useI18n()
+
+const { Code, Host80 } = Config
+const isZh = computed(() => ['cn', 'zhHant'].includes(locale.value))
+// ==================== 路由参数 ====================
+const myId = ref('')
+const type = ref('')
+const active = ref('')
+
+// ==================== 响应式数据 ====================
+const imgUrl = Host80
+const imgContent = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
+const singleData = ref<any>([])
+
+// 活动类型标志
+const ActivitySingle20 = ref(false)
+const ActivitySingle23 = ref(false)
+const ActivitySingle23jx = ref(false)
+const ActivitySingle23jxVip = ref(false)
+const ActivitySingle23nz = ref(false)
+const ActivitySingle23nzTwo = ref(false)
+const ActivitySingle23xinjia = ref(false)
+const ActivitySingle23jnhcj = ref(false)
+const ActivitySingleNewList = ref(false)
+const ActivitySingle23nz_zx = ref(false)
+const ActivitySingle24JYB = ref(false)
+const ActivitySingleNoWorries = ref(false)
+const ActivitySingleNewYear24 = ref(false)
+
+const timeJx = ref<any>({})
+
+// 新年庆典相关
+const tableDataNewYear24Flag = ref(false)
+const tableDataNewYear24 = ref<any>(false)
+const NewYear24DataBalance = ref('')
+const NewYear24Data = reactive({
+    balance: 0,
+    income: 0
+})
+const popupRef = ref<any>(null)
+const NewYear24StatusFlag = ref(false)
+const NewYear24Status = ref(0)
+// 监听弹窗可见性
+watch(() => NewYear24StatusFlag.value, (newVal) => {
+    if (newVal) {
+        popupRef.value?.open()
+    } else {
+        popupRef.value?.close()
+    }
+}, { deep: true })
+// 倒计时相关
+const interval1 = ref<any>(null)
+const interval3 = ref<any>(null)
+const interval5 = ref<any>(null)
+const interval7 = ref<any>(null)
+const isCountDown1 = ref('')
+const isCountDown3 = ref('')
+const isCountDown5 = ref('')
+const isCountDown7 = ref('')
+
+// ==================== 计算属性 ====================
+const country = computed(() => {
+    try {
+        const userStr = uni.getStorageSync('user')
+        const user = JSON.parse(userStr)
+        return user.customInfo?.country || ''
+    } catch {
+        return ''
+    }
+})
+
+const isGuoQin = computed(() => {
+    let flag = false
+    const startTime1 = '2024/10/01 00:00:00'
+    const endTime1 = '2024/10/07 23:59:59'
+    const timezone = 8
+    const offset_GMT = new Date().getTimezoneOffset()
+    const nowDate = new Date().getTime()
+    const now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
+    const end = new Date(endTime1).getTime()
+    const start = new Date(startTime1).getTime()
+
+    if (now > start && now < end) {
+        flag = true
+    }
+    return flag
+})
+
+watch(
+)
+
+// ==================== 方法 ====================
+// 详情
+const getSingle = async (id: string) => {
+    try {
+        const res = await activityApi.ActivitySingle({ id })
+        if (res.code === Code.StatusOK) {
+            singleData.value = res.data
+        } else {
+            uni.showToast({ title: res.msg, icon: 'none' })
+        }
+    } catch (error) {
+        console.error('获取活动详情失败', error)
+        uni.showToast({ title: '获取失败', icon: 'none' })
+    }
+}
+
+// 详情
+const getSingle1 = async (id: string) => {
+    try {
+        const res = await activityApi.ActivityExtensionGiveSingle({ id })
+        if (res.code === Code.StatusOK) {
+            singleData.value = res.data
+        } else {
+            uni.showToast({ title: res.msg, icon: 'none' })
+        }
+    } catch (error) {
+        console.error('获取赠送活动详情失败', error)
+        uni.showToast({ title: '获取失败', icon: 'none' })
+    }
+}
+
+// 24新年庆典
+const ActivityNewYear24 = async () => {
+    try {
+        const res = await activityApi.ActivityNewYear24({})
+        if (res.code === Code.StatusOK) {
+            tableDataNewYear24.value = res.data
+            if (typeof tableDataNewYear24.value === 'object') {
+                tableDataNewYear24Flag.value = true
+                tableDataNewYear24.value?.extraConfigs?.forEach((item: any) => {
+                    if (item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_EXTRA_ACCUMULATE') {
+                        countdownQuan(item)
+                    }
+                })
+            }
+        } else {
+            uni.showToast({ title: res.msg, icon: 'none' })
+        }
+    } catch (error) {
+        console.error('获取新年庆典数据失败', error)
+        uni.showToast({ title: '获取失败', icon: 'none' })
+    }
+}
+
+// 计算收益
+const toIncome = () => {
+    NewYear24Data.balance = Number(NewYear24DataBalance.value) || 0
+    let rate = 0
+    tableDataNewYear24.value?.details?.forEach((item: any) => {
+        if (NewYear24Data.balance > item.min && NewYear24Data.balance <= item.max) {
+            rate = item.rate
+        } else if (NewYear24Data.balance > item.min && NewYear24Data.balance >= item.max && item.max == 0) {
+            rate = item.rate
+        }
+    })
+    NewYear24Data.income = Number((NewYear24Data.balance * rate / 100 / 365 * 30).toFixed(2))
+}
+
+// 获取优惠券状态
+const quanStatus = (item: any) => {
+    let status = 1
+    if (tableDataNewYear24.value?.lastMonthTradeNumber == 0) {
+        status = 1
+        return status
+    }
+    // 天数
+    if (item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_EXTRA_ACCUMULATE') {
+        if (tableDataNewYear24.value?.cumulativeWithdrawDay >= item.min) {
+            status = 2
+        }
+    }
+    // 金额
+    if (item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_BALANCE') {
+        if (tableDataNewYear24.value?.balance >= item.min) {
+            status = 2
+        }
+    }
+    return status
+}
+
+// 优惠券倒计时
+const countdownQuan = (item: any) => {
+    let time = ''
+    let days = (item.min - (tableDataNewYear24.value?.cumulativeWithdrawDay || 0)) > 0 ? item.min - (tableDataNewYear24.value?.cumulativeWithdrawDay || 0) : 0
+    if (days == 0 || item.use == 1) {
+        time = '00:00:00'
+        if (item.interestRateExtraDay == 1) isCountDown1.value = time
+        if (item.interestRateExtraDay == 3) isCountDown3.value = time
+        if (item.interestRateExtraDay == 5) isCountDown5.value = time
+        if (item.interestRateExtraDay == 7) isCountDown7.value = time
+        return
+    }
+
+    let timezone = 2
+    let offset_GMT = new Date().getTimezoneOffset()
+    let nowDate = new Date().getTime()
+    let nowTime = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)
+
+    let today = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)
+    today.setHours(0, 0, 0, 0)
+    today.setDate(today.getDate() + days)
+
+    let startTime = new Date(today).getTime()
+
+    if (nowTime < startTime) {
+        let interval: any = null
+        if (item.interestRateExtraDay == 1) interval1.value = setInterval(() => {
+            let timezone = 2
+            let offset_GMT = new Date().getTimezoneOffset()
+            let nowDate = new Date().getTime()
+            let nowTime = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)
+            let sec = 1000, min = 60 * sec, hour = min * 60, day = 24 * hour
+            let times = startTime - nowTime.getTime()
+            let DAY = getzero(Math.floor(times / day))
+            let HOUR = getzero(Math.floor((times % day) / hour))
+            let MIN = getzero(Math.floor((times % hour) / min))
+            let SEC = getzero(Math.floor((times % min) / sec))
+
+            const timeStr = `${DAY}${DAY}${HOUR}:${MIN}:${SEC}`
+            if (item.interestRateExtraDay == 1) isCountDown1.value = timeStr
+            if (item.interestRateExtraDay == 3) isCountDown3.value = timeStr
+            if (item.interestRateExtraDay == 5) isCountDown5.value = timeStr
+            if (item.interestRateExtraDay == 7) isCountDown7.value = timeStr
+
+            if (nowTime >= startTime) {
+                if (item.interestRateExtraDay == 1) clearInterval(interval1.value)
+                if (item.interestRateExtraDay == 3) clearInterval(interval3.value)
+                if (item.interestRateExtraDay == 5) clearInterval(interval5.value)
+                if (item.interestRateExtraDay == 7) clearInterval(interval7.value)
+                if (item.interestRateExtraDay == 1) isCountDown1.value = '00:00:00'
+                if (item.interestRateExtraDay == 3) isCountDown3.value = '00:00:00'
+                if (item.interestRateExtraDay == 5) isCountDown5.value = '00:00:00'
+                if (item.interestRateExtraDay == 7) isCountDown7.value = '00:00:00'
+            }
+        }, 1000)
+    }
+}
+
+// 时间补0
+const getzero = (time: number) => {
+    return time > 9 ? time : '0' + time
+}
+
+// 打开优惠券提示
+const openQuanTip = (status: number) => {
+    NewYear24Status.value = status
+    NewYear24StatusFlag.value = true
+}
+
+// 领取新年优惠券
+const ActivityNewYear24Receive = async (id: string) => {
+    try {
+        const res = await activityApi.ActivityNewYear24Receive({ extraConfigId: id })
+        if (res.code === Code.StatusOK) {
+            uni.showToast({ title: res.msg, icon: 'success' })
+            await ActivityNewYear24()
+        } else {
+            uni.showToast({ title: res.msg, icon: 'none' })
+        }
+    } catch (error) {
+        console.error('领取优惠券失败', error)
+        uni.showToast({ title: '领取失败', icon: 'none' })
+    }
+}
+
+// 返回活动
+const backActivity = () => {
+    if (type.value == 1) {
+        uni.navigateTo({ url: "/pages/customer/activities" })
+    } else if (type.value == 2) {
+        uni.navigateTo({ url: "/pages/ib/activities" })
+    } else {
+        uni.navigateBack()
+    }
+}
+
+// 跳转到信号源列表
+const toDocumentary = () => {
+    uni.navigateTo({ url: "/pages/documentary/trading/center" })
+}
+
+// ==================== 生命周期 ====================
+onLoad((query) => {
+    myId.value = query.id || ''
+    type.value = query.type || ''
+    active.value = query.active || ''
+
+    if (active.value == '20zj' ||
+        active.value == '23yx' ||
+        active.value == '23jx' ||
+        active.value == '23jxVip' ||
+        active.value == '24JYB' ||
+        active.value == '23nz' ||
+        active.value == '23nzTwo' ||
+        active.value == '23xinjia' ||
+        active.value == '23jnhcj' ||
+        active.value == '23nz_zx' ||
+        active.value == 'NoWorries' ||
+        active.value == 'NewYear24') {
+
+        if (active.value == '20zj') {
+            ActivitySingle20.value = true
+        } else if (active.value == '23yx') {
+            ActivitySingle23.value = true
+        } else if (active.value == '23jx') {
+            ActivitySingle23jx.value = true
+            timeJx.value = {
+                activityStartTime: query.data1,
+                activityEndTime: query.data2,
+                applicationStartTime: query.data3,
+                applicationEndTime: query.data4
+            }
+        } else if (active.value == '23jxVip') {
+            ActivitySingle23jxVip.value = true
+            timeJx.value = {
+                activityStartTime: query.data1,
+                activityEndTime: query.data2,
+                applicationStartTime: query.data3,
+                applicationEndTime: query.data4
+            }
+        } else if (active.value == '24JYB') {
+            ActivitySingle24JYB.value = true
+            timeJx.value = {
+                activityStartTime: query.data1,
+                activityEndTime: query.data2,
+                applicationStartTime: query.data3,
+                applicationEndTime: query.data4
+            }
+        } else if (active.value == '23nz') {
+            ActivitySingle23nz.value = true
+            timeJx.value = {
+                applicationStartTime: query.data3,
+                applicationEndTime: query.data4
+            }
+        } else if (active.value == '23nzTwo') {
+            ActivitySingle23nzTwo.value = true
+            timeJx.value = {
+                applicationStartTime: query.data3,
+                applicationEndTime: query.data4
+            }
+        } else if (active.value == '23xinjia') {
+            ActivitySingle23xinjia.value = true
+        } else if (active.value == '23jnhcj') {
+            ActivitySingle23jnhcj.value = true
+        } else if (active.value == '23nz_zx') {
+            ActivitySingle23nz_zx.value = true
+        } else if (active.value == 'NoWorries') {
+            ActivitySingleNoWorries.value = true
+        } else if (active.value == 'NewYear24') {
+            ActivitySingleNewYear24.value = true
+            ActivityNewYear24()
+        }
+
+    } else if (active.value == 'newList') {
+        ActivitySingleNewList.value = true
+        getSingle1(myId.value)
+    } else {
+        getSingle(myId.value)
+        ActivitySingle20.value = false
+        ActivitySingle23.value = false
+        ActivitySingle23jx.value = false
+        ActivitySingle23jxVip.value = false
+        ActivitySingle23nz.value = false
+        ActivitySingle23nzTwo.value = false
+        ActivitySingle23xinjia.value = false
+        ActivitySingle23jnhcj.value = false
+        ActivitySingleNewList.value = false
+        ActivitySingle23nz_zx.value = false
+        ActivitySingle24JYB.value = false
+        ActivitySingleNoWorries.value = false
+        ActivitySingleNewYear24.value = false
+    }
+})
+
+// 清理定时器
+onUnmounted(() => {
+    clearInterval(interval1.value)
+    clearInterval(interval3.value)
+    clearInterval(interval5.value)
+    clearInterval(interval7.value)
+})
+</script>
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+    height: calc(100% - 50px);
+    overflow: hidden;
+    overflow-y: auto;
+    text-align: left;
+    padding: 20px 25px;
+    box-sizing: border-box;
+    line-height: 2;
+
+    .img {
+        margin-bottom: 20px;
+    }
+}
+
+.toDocumentary {
+    text-decoration: underline;
+    color: blue;
+}
+
+table,
+tr,
+td,
+th {
+    border: 1px solid;
+    text-align: center;
+}
+
+.nz_table {
+    margin: 20px 0;
+}
+
+.NewYear_calculator {
+    .content {
+        // margin-bottom: 20px;
+    }
+
+    .tip {
+        margin-top: 10px;
+        font-size: 16px;
+    }
+
+    .red {
+        color: #EB3F57;
+    }
+}
+
+.NewYear_quan {
+    .quanBox {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .quan_guoqi {
+        text-align: center;
+        font-size: 14px;
+    }
+
+    .tip {
+        padding: 0 25px;
+    }
+
+    .quan_table {
+        margin-top: 20px;
+    }
+
+    .couponRed {
+        background-color: #E0E0E0;
+        width: 200px;
+        min-height: 215px;
+        margin: 15px;
+        --main-color: #EB3F57;
+        --f-color: #444;
+    }
+
+    .couponGreen {
+        background-color: #E0E0E0;
+        width: 200px;
+        min-height: 215px;
+        margin: 15px;
+        --main-color: #4CB01A;
+        --f-color: #444;
+    }
+
+    .couponBlack {
+        background-color: #E0E0E0;
+        width: 200px;
+        min-height: 215px;
+        margin: 15px;
+        --main-color: #5f595a;
+        --f-color: #444;
+    }
+
+    .isUser {
+        opacity: 0.6;
+    }
+
+    .price {
+        position: relative;
+        height: 80px;
+        background-image: radial-gradient(circle at 100px -8px, #fff 20px, var(--main-color) 21px);
+        color: #fff;
+        font-size: 14px;
+        text-align: center;
+        padding-top: 30px;
+    }
+
+    .price .timeout {
+        color: var(--f-color);
+        font-size: 14px;
+        margin-top: 25px;
+    }
+
+    .price .num {
+        font-size: 20px;
+    }
+
+    .price .dec {
+        line-height: 1.5;
+    }
+
+    .price::after {
+        position: absolute;
+        content: '';
+        display: block;
+        bottom: -5px;
+        width: 100%;
+        border-bottom: 10px dotted #E0E0E0;
+    }
+
+    .describe {
+        color: #333;
+        padding: 10px;
+        font-size: 14px;
+        line-height: 1.5;
+        text-align: center;
+        min-height: 90px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+    }
+
+    .btns {
+        /* 使其button可以居中 */
+        text-align: center;
+    }
+
+    .btns button {
+        /* 重置按钮样式 */
+        border: none;
+        box-shadow: none;
+        outline: none;
+        background-color: var(--main-color);
+        color: #fff;
+        width: 50%;
+        border-radius: 20px;
+        line-height: 30px;
+        margin-bottom: 10px;
+        cursor: pointer;
+    }
+
+    .btns button.use {
+        background-color: #5f595a;
+    }
+}
+</style>

pages/activities/index.vue

@@ -426,123 +426,123 @@ const handleDialogAction = (action: string, data?: any) => {
 
 // ==================== 活动操作处理 ====================
 const handleActivityAction = ({ type, params }: { type: string; params?: any[] }) => {
-    switch (type) {
-        case 'toSingle':
-            toSingle(...(params || []))
-            break
-        case 'openCalculator':
-            openCalculatorFlag.value = true
-            break
-        case 'openPdf':
-            openPdf(params?.[0] || type)
-            break
-        case 'openSurplusActivityDialog':
-            dialogSurplusActivity.value = true
-            break
-        case 'openSurplusActivityDialog1':
-            dialogSurplusActivity1.value = true
-            break
-        case 'goMonthlyTaskList':
-            goMonthlyTaskList()
-            break
-        case 'goSurplusTaskList':
-            goSurplusTaskList()
-            break
-        case 'toHistoryLuckyDraw':
-            toHistoryLuckyDraw()
-            break
-        case 'toOpenTask':
-            dialogNewTaskDraw.value = true
-            break
-        case 'toNewTask':
-            dialogNewTask.value = true
-            break
-        case 'toTaskList':
-            toTaskList()
-            break
-        case 'toApplyNoWorriesOpen':
-            dialogDealResultNoWorries.value = true
-            break
-        case 'toRealizationNoWorries':
-            dialogNoWorries.value = true
-            break
-        case 'toActivity24Trading':
-            toActivity24Trading()
-            break
-        case 'toActivity24nianzhong':
-            toActivity24nianzhong()
-            break
-        case 'toApply23Open':
-            toApply23Open()
-            break
-        case 'toTransform':
-            toTransform()
-            break
-        case 'toRealization':
-            toRealization()
-            break
-        case 'toApplyCptOpen':
-            dialogDealResultCpt.value = true
-            break
-        case 'toOpenSingle':
-            // 处理打开外部链接
-            break
-        case 'toApply24JYBOpenVip':
-            dialogDealResultJxJYB.value = true
-            break
-        case 'toRealization24JYBVip':
-            // 处理变现
-            break
-        case 'applications':
-            // 处理申请
-            break
-        case 'checkActivity':
-            // 处理查看活动
-            break
-        case 'openDialog':
-            if (params?.[0]) {
-                updateDialogVisible(params[0], true)
-            }
-            break
-        case 'cashBack':
-            // 处理返现
-            break
-        case 'toApply23JxOpen':
-            dialogDealResultJx.value = true
-            break
-        case 'toApply23JxOpenVip':
-            dialogDealResultJxVip.value = true
-            break
-        case 'toApplyCptOpen':
-            dialogDealResultCpt.value = true
-            break
-        case 'toApply24JYBOpenVip':
-            dialogDealResultJxJYB.value = true
-            break
-        case 'toApplyNoWorriesOpen':
-            dialogDealResultNoWorries.value = true
-            break
-        case 'toRealizationJx':
-            toRealizationJx()
-            break
-        case 'toRealizationJxVip':
-            toRealizationJxVip()
-            break
-        case 'toRealization24JYBVip':
-            toRealization24JYBVip()
-            break
-        case 'toRealizationNoWorries':
-            dialogNoWorries.value = true
-            break
-        case 'toOpenSingle':
-            toOpenSingle(params?.[0])
-            break
-        case 'cashBack':
-            cashBack()
-            break
-        default:
-            console.warn('未知操作类型:', type)
-    }
+    // switch (type) {
+    //     case 'toSingle':
+    //         toSingle(...(params || []))
+    //         break
+    //     case 'openCalculator':
+    //         openCalculatorFlag.value = true
+    //         break
+    //     case 'openPdf':
+    //         openPdf(params?.[0] || type)
+    //         break
+    //     case 'openSurplusActivityDialog':
+    //         dialogSurplusActivity.value = true
+    //         break
+    //     case 'openSurplusActivityDialog1':
+    //         dialogSurplusActivity1.value = true
+    //         break
+    //     case 'goMonthlyTaskList':
+    //         goMonthlyTaskList()
+    //         break
+    //     case 'goSurplusTaskList':
+    //         goSurplusTaskList()
+    //         break
+    //     case 'toHistoryLuckyDraw':
+    //         toHistoryLuckyDraw()
+    //         break
+    //     case 'toOpenTask':
+    //         dialogNewTaskDraw.value = true
+    //         break
+    //     case 'toNewTask':
+    //         dialogNewTask.value = true
+    //         break
+    //     case 'toTaskList':
+    //         toTaskList()
+    //         break
+    //     case 'toApplyNoWorriesOpen':
+    //         dialogDealResultNoWorries.value = true
+    //         break
+    //     case 'toRealizationNoWorries':
+    //         dialogNoWorries.value = true
+    //         break
+    //     case 'toActivity24Trading':
+    //         toActivity24Trading()
+    //         break
+    //     case 'toActivity24nianzhong':
+    //         toActivity24nianzhong()
+    //         break
+    //     case 'toApply23Open':
+    //         toApply23Open()
+    //         break
+    //     case 'toTransform':
+    //         toTransform()
+    //         break
+    //     case 'toRealization':
+    //         toRealization()
+    //         break
+    //     case 'toApplyCptOpen':
+    //         dialogDealResultCpt.value = true
+    //         break
+    //     case 'toOpenSingle':
+    //         // 处理打开外部链接
+    //         break
+    //     case 'toApply24JYBOpenVip':
+    //         dialogDealResultJxJYB.value = true
+    //         break
+    //     case 'toRealization24JYBVip':
+    //         // 处理变现
+    //         break
+    //     case 'applications':
+    //         // 处理申请
+    //         break
+    //     case 'checkActivity':
+    //         // 处理查看活动
+    //         break
+    //     case 'openDialog':
+    //         if (params?.[0]) {
+    //             updateDialogVisible(params[0], true)
+    //         }
+    //         break
+    //     case 'cashBack':
+    //         // 处理返现
+    //         break
+    //     case 'toApply23JxOpen':
+    //         dialogDealResultJx.value = true
+    //         break
+    //     case 'toApply23JxOpenVip':
+    //         dialogDealResultJxVip.value = true
+    //         break
+    //     case 'toApplyCptOpen':
+    //         dialogDealResultCpt.value = true
+    //         break
+    //     case 'toApply24JYBOpenVip':
+    //         dialogDealResultJxJYB.value = true
+    //         break
+    //     case 'toApplyNoWorriesOpen':
+    //         dialogDealResultNoWorries.value = true
+    //         break
+    //     case 'toRealizationJx':
+    //         toRealizationJx()
+    //         break
+    //     case 'toRealizationJxVip':
+    //         toRealizationJxVip()
+    //         break
+    //     case 'toRealization24JYBVip':
+    //         toRealization24JYBVip()
+    //         break
+    //     case 'toRealizationNoWorries':
+    //         dialogNoWorries.value = true
+    //         break
+    //     case 'toOpenSingle':
+    //         toOpenSingle(params?.[0])
+    //         break
+    //     case 'cashBack':
+    //         cashBack()
+    //         break
+    //     default:
+    //         console.warn('未知操作类型:', type)
+    // }
 }
 
 // ==================== 生命周期 ====================

pages/customer/components/TransactionCharts.vue

@@ -20,7 +20,7 @@
             <view class="s-btn" @click="getChart" v-t="'Btn.Confirm'" />
         </view>
         <view class="charts-box">
-            <uni-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true"
+            <cwg-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true"
                 @complete="complete" />
         </view>
     </view>

pages/customer/composables/useGreeting.ts

@@ -1,6 +1,5 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import useUserStore from "@/stores/use-user-store";
-const { userInfo } = useUserStore()
+
 /**
  * 问候语组合式函数
  * @param name - 用户名（可选）

pages/customer/index.vue

@@ -1,18 +1,10 @@
 <template>
     <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
-        <uni-row class="form-row uni-row1">
-            <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
-                <view class="account-section">
-                    <AmountWallet />
-                    <AccountList />
-                    <TransactionCharts />
-                </view>
-            </uni-col>
-            <uni-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
-                <ActivitiesSwiper />
-                <Timeline />
-            </uni-col>
-        </uni-row>
+        <view class="account-section">
+            <!-- <AmountWallet /> -->
+            <AccountList />
+            <!-- <TransactionCharts /> -->
+        </view>
     </cwg-page-wrapper>
 </template>
 

pages/mine/components/BankInfoTab.vue

@@ -773,7 +773,7 @@ onMounted(() => {
 }
 
 .bank-menu {
-    background: #fff;
+    // background: #fff;
     overflow: hidden;
 
     .bank-menu-item {

pages/mine/index.vue

@@ -2,7 +2,7 @@
 	<cwg-page-wrapper :isHeaderFixed="true">
 		<view class="page">
 			<cwg-header :title="t('pages.mine.index')">
-				<div class="language-switch" @click="router.push('/pages/mine/cog')">
+				<div class="language-switch" @click="router.push('/pages/customer/index')">
 					<cwg-icon color="#000" icon="cog-outline" />
 				</div>
 			</cwg-header>

pages/mine/info copy 2.vue

@@ -1,348 +0,0 @@
-<template>
-    <cwg-page-wrapper>
-        <uni-tabs v-model="current" :tabs="tabs" @change="changeTab" color="#333" lineHeight="0" field="name">
-            <template v-slot="{ row, index }">
-                <view class="tab-title " :class="{ active: current === index }">
-                    <cwg-icon v-if="row.icon" :name="row.icon" :size="16"
-                        :color="current === index ? '#fff' : '#333'" />
-                    <text>{{ row.name }}</text>
-                </view>
-            </template>
-        </uni-tabs>
-        <view class="info-card">
-            <view class="content-title">Personal Information</view>
-            <view class="card-body">
-
-                <uni-row class="demo-uni-row">
-                    <uni-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
-                        <view class="avatar-section">
-                            <cwg-input v-model:value="formData.idBackUrl" type="upload" fkey="idBackUrl"
-                                rulesKey="idBackUrl" :is-upload-d="true" accept="image/png, image/jpeg, image/jpg"
-                                :readonly="isReadonly" :disabled="isReadonly" @change="handleChange">
-                                <view class="cwg-upload">
-                                </view>
-                            </cwg-input>
-                            <view class="text name">{{ userInfo.firstName }}</view>
-                            <view class="text cid"> CID:{{ userInfo.cId }}</view>
-                            <view class="btn-primary" @click="handleEditProfile">上传头像</view>
-                        </view>
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18" class="">
-                        <view class="form">
-                            <uni-row>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                                    <cwg-input v-model:value="formData.lastName" fkey="lastName" :required="true"
-                                        :label="t('card.Form.f4')" rulesKey="lastName" :readonly="isReadonly"
-                                        :disabled="isReadonly" @change="handleChange" />
-                                    <cwg-input v-model:value="formData.firstName" fkey="firstName" :required="true"
-                                        :label="t('card.Form.f5')" rulesKey="firstName" :readonly="isReadonly"
-                                        :disabled="isReadonly" @change="handleChange" />
-                                    <cwg-input v-model:value="formData.email" fkey="email" :label="t('card.Form.f3')"
-                                        :required="true" rulesKey="email" :readonly="isReadonly" :disabled="isReadonly"
-                                        @change="handleChange" />
-                                    <view class="f" v-if="phoneCodes.length > 0">
-                                        <cwg-input v-model:value="formData.areaCode" class="l" fkey="areaCode"
-                                            :required="true" type="select" :show-search="true" :columns="phoneCodes"
-                                            :label="t('card.Form.f2')" rulesKey="areaCode" :readonly="isReadonly"
-                                            :disabled="isReadonly" @change="handleChange" />
-                                        <cwg-input v-model:value="formData.mobile" class="r" fkey="mobile" label=" "
-                                            rulesKey="mobile" :readonly="isReadonly" :disabled="isReadonly"
-                                            @change="handleChange" />
-                                    </view>
-                                    <cwg-input v-model:value="formData.gender" fkey="gender" type="select"
-                                        :required="true" rulesKey="gender" :columns="sexOptions"
-                                        :label="t('card.Form.f8')" :readonly="isReadonly" :disabled="isReadonly"
-                                        @change="handleChange" />
-                                    <cwg-input v-model:value="formData.birthday" :required="true" type="date"
-                                        fkey="birthday" rulesKey="birthday" :label="t('card.Form.f6')"
-                                        :readonly="isReadonly" :disabled="isReadonly" @change="handleChange" />
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                                    <view class="form-item ">
-                                        <view class="left-bg">
-                                            <text class="form-label">User CID</text>
-                                            <text class="form-value">{{ userInfo.userId }}</text>
-                                        </view>
-                                    </view>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                                    <view class="form-item ">
-                                        <view class="left-bg">
-                                            <text class="form-label">User CID</text>
-                                            <text class="form-value">{{ userInfo.userId }}</text>
-                                        </view>
-                                    </view>
-                                </uni-col>
-                                <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                                    <view class="form-item ">
-                                        <view class="left-bg">
-                                            <text class="form-label">User CID</text>
-                                            <text class="form-value">{{ userInfo.userId }}</text>
-                                        </view>
-                                    </view>
-                                </uni-col>
-                            </uni-row>
-                        </view>
-
-                    </uni-col>
-                </uni-row>
-                <uni-row class="demo-uni-row uni-row1">
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-model:value="formData.lastName" fkey="lastName" :required="false"
-                            :label="t('card.Form.f4')" rulesKey="lastName" :readonly="isReadonly" :disabled="isReadonly"
-                            @change="handleChange" />
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-model:value="formData.firstName" fkey="firstName" :required="false"
-                            :label="t('card.Form.f5')" rulesKey="firstName" :readonly="isReadonly"
-                            :disabled="isReadonly" @change="handleChange" />
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-model:value="formData.email" fkey="email" :label="t('card.Form.f3')"
-                            :required="false" rulesKey="email" :readonly="isReadonly" :disabled="isReadonly"
-                            @change="handleChange" />
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-model:value="formData.mobile" class="r" fkey="mobile" :label="t('card.Form.f2')"
-                            rulesKey="mobile" :readonly="isReadonly" :disabled="isReadonly" @change="handleChange" />
-                    </uni-col>
-
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-model:value="formData.birthday" :required="false" type="date" fkey="birthday"
-                            rulesKey="birthday" :label="t('card.Form.f6')" :readonly="isReadonly" :disabled="isReadonly"
-                            @change="handleChange" />
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-if="countryOptions.length > 0" v-model:value="formData.nationality"
-                            fkey="nationality" type="select" :required="false" :show-search="true"
-                            rulesKey="nationality" :columns="countryOptions" :label="t('card.Form.f7')"
-                            :readonly="isReadonly" :disabled="isReadonly" @change="handleChange" />
-
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-if="cityOptions.length > 0" v-model:value="formData.town" fkey="town"
-                            :required="false" :show-search="true" rulesKey="town" type="select" :columns="cityOptions"
-                            :label="t('card.Form.f9')" :readonly="isReadonly" :disabled="isReadonly"
-                            @change="handleChange" />
-
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-model:value="formData.address" fkey="address" :label="t('card.Form.f10')"
-                            :required="false" rulesKey="address" :readonly="isReadonly" :disabled="isReadonly"
-                            @change="handleChange" />
-
-                    </uni-col>
-                    <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-                        <cwg-input v-model:value="formData.postCode" :required="false" fkey="postCode"
-                            rulesKey="postCode" :label="t('card.Form.f11')" :readonly="isReadonly"
-                            :disabled="isReadonly" @change="handleChange" />
-                    </uni-col>
-                </uni-row>
-            </view>
-        </view>
-    </cwg-page-wrapper>
-</template>
-
-<script setup lang="ts">
-import { onLoad } from '@dcloudio/uni-app'
-import { ref, onMounted, watch, computed, reactive } from "vue";
-import InfoRow from './components/InfoRow.vue';
-import VerificationRow from './components/VerificationRow.vue';
-import { useI18n } from "vue-i18n";
-import useUserStore from "@/stores/use-user-store";
-import useRouter from "@/hooks/useRouter";
-import useIdTypeOptions from "@/composables/useIdTypeOptions";
-const { allIdTypeOptions } = useIdTypeOptions()
-const userStore = useUserStore();
-const userInfo = computed(() => userStore.userInfo);
-const { t } = useI18n();
-const router = useRouter();
-
-const idTypeOptions = computed(() => {
-    return allIdTypeOptions.value?.filter(item => item.value === userInfo.value?.idType);
-});
-// 获取身份认证状态
-function getIdentityStatus() {
-    // 认证成功就是已认证；否则视为审核中（pending）
-    if (userInfo.value?.approveStatus == 2 || userInfo.value?.kycStatus == 2) {
-        return 'verified';
-    }
-    return 'pending';
-}
-const formData = ref({})
-const imageStyles = ref({
-    width: '80px',
-    height: '80px',
-    borderRadius: '50%'
-});
-const current = ref(0);
-const tabs = computed(() => [
-    { id: 1, name: t('card.Info.s1'), icon: 'icon_personal certification' },
-    { id: 2, name: t('ImproveImmediately.Title.AddressInformation'), icon: 'dw' },
-    { id: 3, name: t('card.Info.s0'), icon: 'globe' },
-    { id: 4, name: t('card.Info.s2'), icon: 'checkmark' }
-]);
-const changeTab = (index) => {
-    current.value = index;
-}
-
-// 获取身份认证日期
-function getIdentityDate() {
-    // 如果有证件有效期，则使用证件签发日期
-    if (userInfo.value?.issueDate) {
-        return new Date(userInfo.value.issueDate).toLocaleDateString();
-    }
-    return '';
-}
-
-const handleEditProfile = () => {
-    router.push('/pages/mine/improve');
-};
-
-const handleChangePassword = () => {
-    uni.showToast({
-        title: t('card.Msg.ComingSoon'),
-        icon: 'none'
-    });
-};
-const isReadonly = computed(() => isAuthInfo.value);
-const listStyles = ref({
-    borderStyle: {
-        color: '#eee',
-        width: '1px',
-        style: 'solid',
-        radius: '5px'
-    },
-    "border": false, // 是否显示边框
-    "dividline": true // 是否显示分隔线
-});
-</script>
-
-<style scoped lang="scss">
-@import "@/uni.scss";
-
-.tab-title {
-    display: flex;
-    align-items: center;
-    gap: px2rpx(4);
-    border: 1px solid #f3f4f6;
-    font-size: 18px;
-    padding: px2rpx(8) px2rpx(16);
-    border-radius: px2rpx(8);
-    background-color: white;
-}
-
-.active {
-    background-color: var(--main-yellow);
-    color: #fff;
-    border: none;
-}
-
-.info-card {
-    border-radius: px2rpx(8);
-    background-color: white;
-    // padding: px2rpx(16);
-}
-
-.card-body {
-    padding: px2rpx(16);
-}
-
-.demo-uni-row {
-    margin-bottom: px2rpx(16);
-}
-
-.avatar-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: px2rpx(12);
-    padding: px2rpx(16);
-
-    .cwg-upload {
-        width: px2rpx(120);
-        height: px2rpx(120);
-        border-radius: 50%;
-        margin: 0 auto;
-    }
-
-    .text {
-        font-size: 14px;
-        color: #333;
-    }
-
-    .btn-primary {
-        margin-top: px2rpx(12);
-        min-width: px2rpx(120);
-        background-color: #2563eb;
-        color: white;
-        padding: px2rpx(12);
-        border-radius: px2rpx(8);
-        border: none;
-        font-size: px2rpx(14);
-        text-align: center;
-    }
-
-    .btn-primary:active {
-        background-color: #1d4ed8;
-    }
-
-    .cid {
-        color: var(--main-yellow);
-        font-size: 12px;
-        margin-top: px2rpx(4);
-    }
-}
-
-
-
-
-
-
-.uni-row1 {
-    display: flex;
-    gap: px2rpx(16);
-    flex-shrink: 1;
-
-    .uni-col {
-
-        margin: px2rpx(12);
-        border-radius: px2rpx(4);
-        display: flex;
-        flex-direction: column;
-        gap: px2rpx(16);
-    }
-}
-
-.left-bg {
-    padding: px2rpx(8);
-    background-color: #f9fafb;
-}
-
-.form {
-    padding: px2rpx(12);
-    border-radius: px2rpx(4);
-    display: flex;
-    flex-direction: column;
-    gap: px2rpx(16);
-
-}
-
-.form-item {
-    // 
-    border-radius: px2rpx(8);
-    padding: px2rpx(8);
-}
-
-.form-label {
-    font-size: px2rpx(12);
-    color: #6b7280;
-    font-weight: 500;
-}
-
-.form-value {
-    font-size: px2rpx(14);
-    color: #1f2937;
-    font-weight: 500;
-}
-</style>

pages/mine/info copy.vue

@@ -1,238 +0,0 @@
-<template>
-    <cwg-page-wrapper>
-        <view class="user-profile-detail">
-            <!-- Content -->
-            <view class="content">
-                <!-- Basic Information -->
-                <view class="info-card">
-                    <view class="card-header">
-                        <cwg-icon name="icon_personal certification" :size="20" color="#2563eb" />
-                        <text class="card-title">{{ t('card.Info.s1') }}</text>
-                    </view>
-                    <view class="card-body">
-                        <info-row icon="xm" :label="t('card.Form.f5') + ' ' + t('card.Form.f4')"
-                            :value="userInfo.firstName + ' ' + userInfo.lastName" />
-                        <info-row icon="email-outline" :label="t('card.Form.f3')" :value="userInfo.email" />
-                        <info-row icon="phone" :label="t('card.Form.f2')"
-                            :value="userInfo.areaCode + ' ' + userInfo.mobile" />
-                        <info-row icon="cwg-calendar" :label="t('card.Form.f6')" :value="userInfo.birthday" />
-                        <info-row :icon="userInfo.gender == 'M' ? 'nan' : 'nv'" :label="t('card.Form.f8')"
-                            :value="userInfo.gender == 'M' ? t('card.Form.v1') : t('card.Form.v2')" :isLast="true" />
-                    </view>
-                </view>
-
-                <!-- Location Information -->
-                <view class="info-card">
-                    <view class="card-header">
-                        <cwg-icon name="dw" :size="20" color="#16a34a" />
-                        <text class="card-title">{{ t('ImproveImmediately.Title.AddressInformation') }}</text>
-                    </view>
-                    <view class="card-body">
-                        <info-row icon="gj" :label="t('card.Form.f7')" :value="userInfo.countryCnName" />
-                        <info-row icon="dw" :label="t('card.Form.f9')" :value="userInfo.townEnName" />
-                        <info-row icon="xxdz" :label="t('card.Form.f10')" :value="userInfo.address" />
-                        <info-row icon="paperclip" :label="t('card.Form.f11')" :value="userInfo.postCode"
-                            :isLast="true" />
-                    </view>
-                </view>
-
-                <!-- Career Information -->
-                <view class="info-card">
-                    <view class="card-header">
-                        <cwg-icon name="globe" :size="20" color="#9333ea" />
-                        <text class="card-title">{{ t('card.Info.s0') }}</text>
-                    </view>
-                    <view class="card-body">
-                        <info-row icon="globe" :label="t('card.Form.f12')" :value="userInfo.occupationDesc" />
-                        <info-row icon="location" :label="t('card.Form.f13')" :value="userInfo.annualSalary" />
-                        <info-row icon="globe" :label="t('card.Form.f14')" :value="userInfo.accountPurpose" />
-                        <info-row icon="gzcalendar" :label="t('card.Form.f15')" :value="userInfo.expectedMonthlyVolume"
-                            :isLast="true" />
-                    </view>
-                </view>
-
-                <!-- Identity Verification -->
-                <view class="info-card">
-                    <view class="card-header">
-                        <cwg-icon name="checkmark" :size="20" color="#ea580c" />
-                        <text class="card-title">{{ t('card.Info.s2') }}</text>
-                    </view>
-                    <view class="card-body">
-                        <verification-row icon="checkmarkempty" :label="t('card.Form.f16')"
-                            :status="getIdentityStatus()" :date="getIdentityDate()" :idType="idTypeOptions[0]?.text"
-                            :idFrontUrl="userInfo.idFrontUrl" :idBackUrl="userInfo.idBackUrl"
-                            :idHoldUrl="userInfo.idHoldUrl" :isLast="true" />
-                    </view>
-                </view>
-
-                <!-- Action Buttons -->
-                <!-- <view class="action-buttons">
-                    <button class="btn-primary" @click="handleEditProfile">{{ t('card.Btn.Edit') }}</button>
-                    <button class="btn-secondary" @click="handleChangePassword">{{ t('card.Btn.ChangePwd') }}</button>
-                </view> -->
-            </view>
-        </view>
-    </cwg-page-wrapper>
-</template>
-
-<script setup lang="ts">
-import { onLoad } from '@dcloudio/uni-app'
-import { ref, onMounted, watch, computed, reactive } from "vue";
-import InfoRow from './components/InfoRow.vue';
-import VerificationRow from './components/VerificationRow.vue';
-import { useI18n } from "vue-i18n";
-import useUserStore from "@/stores/use-user-store";
-import useRouter from "@/hooks/useRouter";
-import useIdTypeOptions from "@/composables/useIdTypeOptions";
-const { allIdTypeOptions } = useIdTypeOptions()
-const userStore = useUserStore();
-const userInfo = computed(() => userStore.userInfo);
-const { t } = useI18n();
-const router = useRouter();
-
-const idTypeOptions = computed(() => {
-    return allIdTypeOptions.value?.filter(item => item.value === userInfo.value?.idType);
-});
-// 获取身份认证状态
-function getIdentityStatus() {
-    // 认证成功就是已认证；否则视为审核中（pending）
-    if (userInfo.value?.approveStatus == 2 || userInfo.value?.kycStatus == 2) {
-        return 'verified';
-    }
-    return 'pending';
-}
-
-// 获取身份认证日期
-function getIdentityDate() {
-    // 如果有证件有效期，则使用证件签发日期
-    if (userInfo.value?.issueDate) {
-        return new Date(userInfo.value.issueDate).toLocaleDateString();
-    }
-    return '';
-}
-
-const handleEditProfile = () => {
-    router.push('/pages/mine/improve');
-};
-
-const handleChangePassword = () => {
-    uni.showToast({
-        title: t('card.Msg.ComingSoon'),
-        icon: 'none'
-    });
-};
-</script>
-
-<style scoped lang="scss">
-@import "@/uni.scss";
-
-.page-wrapper {
-    padding: 0;
-}
-
-.user-profile-detail {
-    min-height: 100vh;
-    background-color: #f9fafb;
-}
-
-.header {
-    background: linear-gradient(to right, #2563eb, #60a5fa);
-    padding: px2rpx(16);
-}
-
-.header-content {
-    display: flex;
-    align-items: center;
-    gap: px2rpx(8);
-}
-
-.avatar {
-    width: px2rpx(40);
-    height: px2rpx(40);
-    border-radius: 50%;
-    background-color: white;
-    border: px2rpx(2) solid white;
-    box-shadow: 0 px2rpx(2) px2rpx(6) rgba(0, 0, 0, 0.1);
-}
-
-.header-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.user-name {
-    color: white;
-    font-size: px2rpx(18);
-    margin-bottom: px2rpx(2);
-}
-
-.user-email {
-    color: #bfdbfe;
-    font-size: px2rpx(12);
-}
-
-.content {
-    padding: px2rpx(1) px2rpx(16) px2rpx(24);
-}
-
-.info-card {
-    background-color: white;
-    border-radius: px2rpx(8);
-    box-shadow: 0 px2rpx(1) px2rpx(4) rgba(0, 0, 0, 0.1);
-    margin-top: px2rpx(16);
-    overflow: hidden;
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    gap: px2rpx(4);
-    padding: px2rpx(12) px2rpx(16);
-    border-bottom: 1px solid #f3f4f6;
-}
-
-.card-title {
-    color: #1f2937;
-    font-size: px2rpx(14);
-}
-
-.card-body {
-    padding: px2rpx(16);
-}
-
-.action-buttons {
-    margin-top: px2rpx(24);
-    display: flex;
-    flex-direction: column;
-    gap: px2rpx(12);
-}
-
-.btn-primary {
-    width: 100%;
-    background-color: #2563eb;
-    color: white;
-    padding: px2rpx(12);
-    border-radius: px2rpx(8);
-    border: none;
-    font-size: px2rpx(14);
-}
-
-.btn-primary:active {
-    background-color: #1d4ed8;
-}
-
-.btn-secondary {
-    width: 100%;
-    background-color: white;
-    color: #374151;
-    padding: px2rpx(12);
-    border-radius: px2rpx(8);
-    border: 1px solid #d1d5db;
-    font-size: px2rpx(14);
-}
-
-.btn-secondary:active {
-    background-color: #f9fafb;
-}
-</style>

pages/mine/info.vue

@@ -1,14 +1,5 @@
 <template>
     <cwg-page-wrapper>
-        <uni-tabs v-model="current" :tabs="tabs" @change="changeTab" color="#333" lineHeight="0" field="name">
-            <template v-slot="{ row, index }">
-                <view class="tab-title " :class="{ active: current == row.id }">
-                    <cwg-icon v-if="row.icon" :name="row.icon" :size="16"
-                        :color="current == row.id ? '#fff' : '#333'" />
-                    <text>{{ row.name }}</text>
-                </view>
-            </template>
-        </uni-tabs>
         <view class="info-card">
             <view class="content-title" v-if="current != 3 && current != 4">
                 <view>{{ tabs[current - 1].name }}</view>
@@ -317,12 +308,17 @@ onMounted(async () => {
 }
 
 .info-card {
+    padding: px2rpx(20);
+    border: 1px solid rgba(108, 133, 149, 0.12);
+    border-radius: px2rpx(8);
+
     .btns {
         display: flex;
         justify-content: flex-end;
         gap: px2rpx(30);
         margin-top: px2rpx(30);
 
+
         .btn-primary {
             min-width: px2rpx(120);
             background-color: var(--color-navy-900);

static/scss/global/global.scss

@@ -257,9 +257,56 @@ body {
     font-size: px2rpx(12);
     line-height: 1;
     color: #000;
-    background: #fff;
 }
 
+uni-left-window {
+    position: fixed;
+    top: px2rpx(56);
+    left: 0;
+    background-color: #fff;
+    z-index: 1;
+
+    transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+uni-content {
+    padding-left: px2rpx(280) !important;
+}
+
+@media screen and (max-width: 1100px) {
+    uni-left-window {
+        width: px2rpx(64) !important;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    uni-left-window:hover {
+        width: px2rpx(280) !important;
+    }
+
+    uni-content {
+        padding-left: px2rpx(64) !important;
+    }
+}
+
+@media screen and (max-width: 991px) {
+    uni-left-window {
+        width: px2rpx(0) !important;
+        overflow: hidden;
+        transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);
+        white-space: nowrap;
+    }
+
+    uni-content {
+        padding-left: px2rpx(0) !important;
+    }
+
+    uni-left-window:hover {
+        width: px2rpx(280) !important;
+    }
+}
+
+
 
 .body {
     position: absolute;
@@ -844,8 +891,9 @@ body {
     min-height: px2rpx(40);
     line-height: px2rpx(40);
     box-sizing: border-box;
-    color: var(--color-white);
-    background-color: var(--color-navy-900);
+    color: var(--color-navy-900);
+    // color: var(--color-white);
+    // background-color: var(--color-navy-900);
     padding: 0 px2rpx(15);
     font-size: px2rpx(20);
     font-weight: bold;
@@ -957,16 +1005,27 @@ body {
 }
 
 .info-card {
-    margin-top: px2rpx(4);
-    border-radius: px2rpx(8);
-    background-color: white;
-    padding: px2rpx(16);
+    // margin-top: px2rpx(4);
+    // border-radius: px2rpx(8);
+    // background-color: white;
+    // padding: px2rpx(8);
     // box-shadow: 0 0 px2rpx(8) rgba(0, 0, 0, 0.1);
-    box-shadow:
-        0 0 px2rpx(4) rgba(0, 0, 0, 0.06),
-        0 px2rpx(6) px2rpx(12) rgba(0, 0, 0, 0.08);
+    // box-shadow:
+    //     0 0 px2rpx(4) rgba(0, 0, 0, 0.06),
+    //     0 px2rpx(6) px2rpx(12) rgba(0, 0, 0, 0.08);
     box-sizing: border-box;
+    padding: px2rpx(20);
+    border: 1px solid rgba(108, 133, 149, 0.12);
+    border-radius: px2rpx(8);
+}
 
+@media screen and (max-width: 991px) {
+    .info-card {
+        box-sizing: border-box;
+        padding: px2rpx(20);
+        border: 0 !important;
+        border-radius: 0 !important;
+    }
 }
 
 // 状态标签基础样式

uni.scss

@@ -80,4 +80,4 @@ $uni-font-size-title: 20px;
 $uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle: 26px;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph: 15px;
+$uni-font-size-paragraph: 15px;

windows/left-window.vue

@@ -0,0 +1,236 @@
+<template>
+    <view class="cwg-sidebar">
+        <view class="menu" v-for="(item, index) in menu" :key="item.path">
+            <view class="menu-item" @click="handleClick(index)">
+                <cwg-icon :name="item.icon" :size="20" color="#6c8595" />
+                <view class="menu-label" v-t="item.label" />
+                <view class="chevron-icon" :class="{ 'expanded': item.isOpenMenu }">
+                    <cwg-icon v-if="item.children && item.children.length" name="crm-chevron-down" :size="20"
+                        color="#6c8595" />
+                </view>
+            </view>
+            <view ref="submenuRefs" class="submenu-box" :style="{
+                height: item.isOpenMenu ? item.submenuHeight + 'px' : '0px',
+                transition: 'height 281ms cubic-bezier(0.4, 0, 0.2, 1)'
+            }" :class="{ 'active': item.isOpenMenu }">
+                <cwg-submenu v-if="item.children" :submenu-items="item.children" @submenu-click="handleSubmenuClick" />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, nextTick, watch, onBeforeUnmount } from 'vue';
+import useRouter from "@/hooks/useRouter";
+const router = useRouter();
+import useRoute from '@/hooks/useRoute'
+const route = useRoute()
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+interface MenuItem {
+    key: string;
+    label: string;
+    icon?: string;
+    children?: MenuItem[];
+}
+const emit = defineEmits(['menu-click']);
+// 菜单数据
+const menu = ref<MenuItem[]>([
+    {
+        isOpenMenu: false, submenuHeight: 0,
+        path: '/pages/customer/index', label: 'Home.msg.Custom', icon: 'crm-house',
+        children: [
+            { path: '/pages/customer/index', label: 'Client Zone', icon: 'icon-client' },
+            { path: '/pages/customer/promotion', label: 'Promotion Center', icon: 'icon-promotion' },
+            { path: '/pages/customer/deposit', label: 'Deposit', icon: 'icon-deposit' },
+            { path: '/pages/customer/withdrawal', label: 'Withdrawal', icon: 'icon-withdrawal' },
+            { path: '/pages/customer/payment-history', label: 'Payment History', icon: 'icon-payment' },
+            { path: '/pages/customer/transfer', label: 'Internal Transfer', icon: 'icon-transfer' },
+            { path: '/pages/customer/recording-history', label: 'Application History', icon: 'icon-application' }
+        ]
+    },
+    {
+        isOpenMenu: false,
+        path: '/pages/customer/promotion', label: 'Home.msg.Ib', icon: 'crm-users',
+        children: []
+    },
+    {
+        path: '/pages/customer/deposit', isOpenMenu: false, label: 'Documentary.title', icon: 'crm-chart-area',
+        children: []
+    },
+    {
+        path: '/pages/customer/withdrawal', isOpenMenu: false, label: 'Downloadpage.item1', icon: 'crm-download',
+        children: []
+    },
+    {
+        path: '/pages/customer/support', isOpenMenu: false, label: 'Downloadpage.item16', icon: 'crm-headset',
+        children: []
+    },
+    {
+        path: '/pages/customer/support', isOpenMenu: false, label: '设置', icon: 'crm-headset',
+        children: [
+            { path: '/pages/mine/info?type=1', isOpenMenu: false, label: 'PersonalManagement.Title.PersonalInformation', icon: 'crm-headset' },
+            { path: '/pages/mine/info?type=2', isOpenMenu: false, label: 'PersonalManagement.Title.BankInformation', icon: 'crm-headset' },
+            { path: '/pages/mine/info?type=3', isOpenMenu: false, label: 'PersonalManagement.Title.FileManagement', icon: 'crm-headset' },
+            { path: '/pages/mine/info?type=4', isOpenMenu: false, label: 'PersonalManagement.Title.SecurityCenter', icon: 'crm-headset' },
+        ]
+    },
+]);
+const submenuRefs = ref<any[]>([]);
+const measureHeight = (element: HTMLElement): number => {
+    const originalDisplay = element.style.display;
+    const originalPosition = element.style.position;
+    const originalVisibility = element.style.visibility;
+    const originalWidth = element.style.width;
+    element.style.display = 'block';
+    element.style.position = 'absolute';
+    element.style.visibility = 'hidden';
+    element.style.width = '100%';
+    const height = element.scrollHeight || element.offsetHeight;
+    element.style.display = originalDisplay;
+    element.style.position = originalPosition;
+    element.style.visibility = originalVisibility;
+    element.style.width = originalWidth;
+
+    return height;
+};
+const updateSubmenuHeight = (index: number) => {
+    const refs = submenuRefs.value;
+    if (refs && refs[index]) {
+        const el = refs[index].$el || refs[index];
+        const height = measureHeight(el);
+        if (height > 0) {
+            menu.value[index].submenuHeight = height;
+        }
+    }
+};
+function handleClick(index: number) {
+    if (!menu.value[index].children || menu.value[index].children.length == 0) {
+        router.push(menu.value[index].path);
+        return;
+    }
+    menu.value[index].isOpenMenu = !menu.value[index].isOpenMenu;
+}
+watch(route, () => {
+    const currentPath = route.path;
+    menu.value.forEach((item, index) => {
+        if (item.children) {
+            const isActive = item.children.some(child => child.path.includes(currentPath));
+            menu.value[index].isOpenMenu = isActive;
+            if (isActive) {
+                nextTick(() => {
+                    updateSubmenuHeight(index);
+                });
+            }
+        }
+    });
+}, { immediate: true })
+
+// 添加窗口大小变化监听
+const handleResize = () => {
+    menu.value.forEach((item, index) => {
+        if (item.children) {
+            updateSubmenuHeight(index);
+        }
+    });
+};
+
+onMounted(() => {
+    nextTick(() => {
+        menu.value.forEach((item, index) => {
+            if (item.children) {
+                updateSubmenuHeight(index);
+            }
+        });
+    });
+
+    // 添加窗口resize监听
+    window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时移除监听
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped lang="scss">
+@import "@/uni.scss";
+
+.cwg-sidebar {
+    width: 100%;
+    color: #6c8595;
+    height: calc(100vh - 56px);
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: px2rpx(8);
+    padding-top: px2rpx(20);
+    box-sizing: border-box;
+    gap: px2rpx(8);
+    border-right: 1px solid rgba(108, 133, 149, 0.12);
+
+    .logo {
+        width: px2rpx(54);
+    }
+
+    .submenu-box {
+        width: 100%;
+        height: 0;
+        overflow: hidden;
+    }
+
+    .menu {
+        width: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+
+    }
+
+    .menu-item {
+        width: 100%;
+        height: px2rpx(40);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: px2rpx(8);
+        padding: px2rpx(10);
+        box-sizing: border-box;
+        font-size: 14px;
+
+        .menu-label {
+            flex: 1;
+        }
+
+        &:hover {
+            background: rgba(108, 133, 149, 0.12) !important;
+            border: 1px solid rgb(145, 163, 176) !important;
+            border-radius: px2rpx(4);
+        }
+
+        .expanded .icon {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+@media screen and (max-width: 1100px) {
+
+    .cwg-sidebar:not(:hover) .menu-label,
+    .cwg-sidebar:not(:hover) .submenu-box,
+    .cwg-sidebar:not(:hover) .chevron-icon {
+        display: none;
+    }
+
+    .cwg-sidebar:hover .menu-label,
+    .cwg-sidebar:hover .submenu-box,
+    .cwg-sidebar:hover .chevron-icon {
+        display: block;
+    }
+}
+</style>

windows/top-window.vue

@@ -0,0 +1,142 @@
+<template>
+	<header class="cwg-pc-header">
+		<div class="left">
+			<image class="left-img" src="/static/images/logo.png" mode="widthFix" alt="logo" @click="openLeftDrawer" />
+		</div>
+		<div class="right">
+			<div class="lang-select">
+				<image class="img flag" src="/static/flag-en.png" alt="en" />
+				<text>English</text>
+				<text class="arrow">▼</text>
+			</div>
+			<text class="icon sun" @click="toggleTheme">🌞</text>
+			<text class="icon bell">🔔<text class="dot"></text></text>
+			<text class="icon avatar">
+				<image class="img" src="/static/avatar.png" alt="avatar" />
+			</text>
+			<text class="icon logo" @click="openRightDrawer">
+				<image class="img" src="/static/logo.png" alt="logo" />
+			</text>
+		</div>
+	</header>
+</template>
+
+<script setup lang="ts">
+// import useGlobalStore from '@/stores/use-global-store'
+// const globalStore = useGlobalStore()
+import useRouter from "@/hooks/useRouter";
+const router = useRouter();
+const props = defineProps({
+	sidebarVisible: {
+		type: Boolean,
+		default: false
+	},
+})
+const emit = defineEmits<{
+	(e: 'open-right-drawer'): void
+}>()
+
+function toggleTheme() {
+	// globalStore.setGlobalTheme(globalStore.theme === 'light' ? 'dark' : 'light');
+}
+
+function openRightDrawer() {
+	emit('open-right-drawer');
+}
+
+function openLeftDrawer() {
+	emit('open-left-drawer');
+}
+</script>
+
+<style scoped lang="scss">
+.cwg-pc-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: px2rpx(55);
+	background-color: rgba(255, 255, 255, 0.9);
+	border-bottom: 1px solid #f0f0f0;
+	padding: 0 px2rpx(16);
+	position: relative;
+	z-index: 10;
+}
+
+.left {
+	display: flex;
+	align-items: center;
+}
+
+.back-arrow {
+	color: #e74c3c;
+	font-size: 22px;
+	cursor: pointer;
+	margin-right: 16px;
+}
+
+.center {
+	flex: 1;
+}
+
+.right {
+	display: flex;
+	align-items: center;
+	gap: 18px;
+}
+
+.lang-select {
+	display: flex;
+	align-items: center;
+	background: #f5f7fa;
+	border-radius: 18px;
+	padding: 4px 12px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.flag {
+	width: 22px;
+	height: 16px;
+	margin-right: 6px;
+}
+
+.arrow {
+	margin-left: 4px;
+	font-size: 12px;
+}
+
+.icon {
+	font-size: 20px;
+	position: relative;
+	cursor: pointer;
+}
+
+.bell .dot {
+	position: absolute;
+	top: 0;
+	right: -2px;
+	width: 7px;
+	height: 7px;
+	background: #27ae60;
+	border-radius: 50%;
+	display: inline-block;
+}
+
+.left-img {
+	width: px2rpx(120);
+}
+
+.avatar .img {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: #eee;
+}
+
+.logo .img {
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background: #fff;
+}
+</style>