From 4870c979f7e139498bfe362b24163c6657f7444f Mon Sep 17 00:00:00 2001
From: liyongle <liyongle@123>
Date: Tue, 10 Oct 2023 18:18:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=A7=A9=20=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=B2=BE=E9=80=89=E6=A8=A1=E5=9D=97=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../offline/JSON/getActivityListByMall.json   |  27 +-
 .../offline/JSON/getAllActivityList.json      |  56 ++++
 .../offline/JSON/getMemberBenefits.json       |  20 +-
 .../offline/JSON/getShopActivityList.json     |  60 ++++
 src/assets/images/activity/next-b.png         | Bin 0 -> 531 bytes
 src/assets/images/activity/next-w.png         | Bin 0 -> 567 bytes
 src/assets/images/activity/next.png           | Bin 0 -> 2589 bytes
 src/assets/images/activity/prev-b.png         | Bin 0 -> 520 bytes
 src/assets/images/activity/prev-w.png         | Bin 0 -> 577 bytes
 src/assets/images/activity/prev.png           | Bin 0 -> 2596 bytes
 .../ActivityDetail/MainActivityDetail.vue     | 259 +++++++++++++++++
 src/http/api/activity/index.ts                |   4 +-
 src/types/activity.d.ts                       |   2 +
 src/views/Activity/Activity.vue               | 274 ++++++++----------
 src/views/Activity/ActivityItem.vue           | 150 +---------
 src/views/Activity/ActivityItem2.vue          |  77 +++++
 16 files changed, 628 insertions(+), 301 deletions(-)
 create mode 100644 public/static/offline/JSON/getAllActivityList.json
 create mode 100644 public/static/offline/JSON/getShopActivityList.json
 create mode 100644 src/assets/images/activity/next-b.png
 create mode 100644 src/assets/images/activity/next-w.png
 create mode 100644 src/assets/images/activity/next.png
 create mode 100644 src/assets/images/activity/prev-b.png
 create mode 100644 src/assets/images/activity/prev-w.png
 create mode 100644 src/assets/images/activity/prev.png
 create mode 100644 src/components/ActivityDetail/MainActivityDetail.vue
 create mode 100644 src/views/Activity/ActivityItem2.vue

diff --git a/public/static/offline/JSON/getActivityListByMall.json b/public/static/offline/JSON/getActivityListByMall.json
index c3e6fdb..cb9e473 100644
--- a/public/static/offline/JSON/getActivityListByMall.json
+++ b/public/static/offline/JSON/getActivityListByMall.json
@@ -1 +1,26 @@
-{"code":200,"msg":"操作成功","data":[{"id":264,"title":"主KV","content":{"activityAddress":"","activityAddressEn":"","activityContent":"SKP是全球最具标志性的高端时尚百货之一，首家SKP于2007年在北京诞生。目前，成都SKP是继北京、西安之后的全国第三家SKP旗舰项目，设计融合了成都本土文化和城市特色，将公园城市理念、TOD站城一体化开发理念、以及时尚高端零售理念综合进行统一规划设计。成都SKP是亚洲最大的下沉式建筑，作为成都交子公园商圈引入的首个高端百货业态，成都SKP项目总建筑面积约32.4万平米，品牌共约1300余个，涵盖多个首店品牌。同时，通过SKP最前卫的专业买手团队从世界各地甄选最新、最好、最尖端的品牌和单品，将SKP SELECT作为SKP旗下的多品牌概念店，建立成为一站式的购物体验目的地。","activityContentEn":"","activityName":"主KV","activityNameEn":"","startDate":"2023-07-21","endDate":"2023-08-22","point":"","fileUrl":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png"],"limitStartDate":"2023-07-21 14:43:31","limitEndDate":"2023-08-22 00:00:00"}}]}
\ No newline at end of file
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 264,
+      "title": "主KV",
+      "content": {
+        "activityAddress": "",
+        "activityAddressEn": "",
+        "activityContent": "SKP是全球最具标志性的高端时尚百货之一，首家SKP于2007年在北京诞生。目前，成都SKP是继北京、西安之后的全国第三家SKP旗舰项目，设计融合了成都本土文化和城市特色，将公园城市理念、TOD站城一体化开发理念、以及时尚高端零售理念综合进行统一规划设计。成都SKP是亚洲最大的下沉式建筑，作为成都交子公园商圈引入的首个高端百货业态，成都SKP项目总建筑面积约32.4万平米，品牌共约1300余个，涵盖多个首店品牌。同时，通过SKP最前卫的专业买手团队从世界各地甄选最新、最好、最尖端的品牌和单品，将SKP SELECT作为SKP旗下的多品牌概念店，建立成为一站式的购物体验目的地。",
+        "activityContentEn": "",
+        "activityName": "主KV",
+        "activityNameEn": "",
+        "startDate": "2023-07-21",
+        "endDate": "2023-08-22",
+        "point": "",
+        "fileUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png"
+        ],
+        "limitStartDate": "2023-07-21 14:43:31",
+        "limitEndDate": "2023-08-22 00:00:00"
+      }
+    }
+  ]
+}
diff --git a/public/static/offline/JSON/getAllActivityList.json b/public/static/offline/JSON/getAllActivityList.json
new file mode 100644
index 0000000..74b6a4f
--- /dev/null
+++ b/public/static/offline/JSON/getAllActivityList.json
@@ -0,0 +1,56 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 617,
+      "entryCode": "UIBbbmSxX1bvI_icEzNNu",
+      "title": "欢度中秋国庆",
+      "content": {
+        "activityName": "欢度中秋国庆",
+        "activityNameEn": "happy",
+        "type": "档期活动",
+        "coverUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png"
+        ],
+        "fileUrl_h": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png",
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png"
+        ],
+        "fileUrl_v": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png"
+        ]
+      }
+    },
+    {
+      "id": 618,
+      "entryCode": "liuUoTMkKVyk_ON7TV3jw",
+      "title": "品牌活动",
+      "content": {
+        "activityName": "品牌活动",
+        "activityNameEn": "brand988",
+        "type": "品牌活动",
+        "coverUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png"
+        ],
+        "fileUrl_h": [],
+        "fileUrl_v": []
+      }
+    },
+    {
+      "id": 618,
+      "entryCode": "liuUoTMkKVyk_ON7TV3jw",
+      "title": "品牌活动",
+      "content": {
+        "activityName": "品牌活动",
+        "activityNameEn": "brand988",
+        "type": "品牌活动",
+        "coverUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png"
+        ],
+        "fileUrl_h": [],
+        "fileUrl_v": []
+      }
+    }
+  ]
+}
diff --git a/public/static/offline/JSON/getMemberBenefits.json b/public/static/offline/JSON/getMemberBenefits.json
index 4bf5adf..1e57b43 100644
--- a/public/static/offline/JSON/getMemberBenefits.json
+++ b/public/static/offline/JSON/getMemberBenefits.json
@@ -1 +1,19 @@
-{"code":200,"msg":"操作成功","data":[{"id":196,"title":"成都SKP会员权益","content":{"name":"成都SKP会员权益","nameEn":"","content":"（一）参加会员促销活动，享受会员积分【每消费1元人民币 (仅限现金、支票及银行卡刷卡消费，不含电子礼金等消费) 获得1个积分】，换礼等权益；\n（二）SKP普通会籍在一个定级期内达到定级积分标准后，可获得相应的尊贵会籍资格。尊贵会籍除享有普通会籍权益外，还可享有特殊权益如下：\n金卡定级积分标准：100000 ，享特殊权益(奖励积分0.2倍)\n黑卡定级积分标准：500000， 享特殊权益(奖励积分1倍)\n尊贵会籍自生效日起至下一个定级期的8月31日止。\n（三）SKP在法律法规允许的范围内，对本细则拥有最终解释权；详情可咨询SKP店内服务台或会员服务中心。咨询电话：028-68385888。","contentEn":"","file_code":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png"]}}]}
\ No newline at end of file
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 196,
+      "title": "成都SKP会员权益",
+      "content": {
+        "name": "成都SKP会员权益",
+        "nameEn": "",
+        "content": "（一）参加会员促销活动，享受会员积分【每消费1元人民币 (仅限现金、支票及银行卡刷卡消费，不含电子礼金等消费) 获得1个积分】，换礼等权益；\n（二）SKP普通会籍在一个定级期内达到定级积分标准后，可获得相应的尊贵会籍资格。尊贵会籍除享有普通会籍权益外，还可享有特殊权益如下：\n金卡定级积分标准：100000 ，享特殊权益(奖励积分0.2倍)\n黑卡定级积分标准：500000， 享特殊权益(奖励积分1倍)\n尊贵会籍自生效日起至下一个定级期的8月31日止。\n（三）SKP在法律法规允许的范围内，对本细则拥有最终解释权；详情可咨询SKP店内服务台或会员服务中心。咨询电话：028-68385888。",
+        "contentEn": "",
+        "file_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png"
+        ]
+      }
+    }
+  ]
+}
diff --git a/public/static/offline/JSON/getShopActivityList.json b/public/static/offline/JSON/getShopActivityList.json
new file mode 100644
index 0000000..3f093a0
--- /dev/null
+++ b/public/static/offline/JSON/getShopActivityList.json
@@ -0,0 +1,60 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 620,
+      "entryCode": "7PtFGpCK-XIyq_qKRJPR5",
+      "title": "品牌活动",
+      "content": {
+        "fileUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png"
+        ],
+        "title": "COLOMBO V-SPACE限时店 ",
+        "titleEn": "COLOMBO V-SPACE",
+        "time": "即日起-国庆节",
+        "place": "成都SKP 1F",
+        "placeEn": "成都SKP 1F",
+        "typeId": [
+          "liuUoTMkKVyk_ON7TV3jw"
+        ]
+      }
+    },
+    {
+      "id": 620,
+      "entryCode": "7PtFGpCK-XIyq_qKRJPR51",
+      "title": "品牌活动",
+      "content": {
+        "fileUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png"
+        ],
+        "title": "COLOMBO V-SPACE限时店 ",
+        "titleEn": "COLOMBO V-SPACE",
+        "time": "即日起-国庆节",
+        "place": "成都SKP 1F",
+        "placeEn": "成都SKP 1F",
+        "typeId": [
+          "liuUoTMkKVyk_ON7TV3jw"
+        ]
+      }
+    },
+    {
+      "id": 620,
+      "entryCode": "7PtFGpCK-XIyq_qKRJPR518",
+      "title": "品牌活动",
+      "content": {
+        "fileUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png"
+        ],
+        "title": "COLOMBO V-SPACE限时店 ",
+        "titleEn": "COLOMBO V-SPACE",
+        "time": "即日起-国庆节",
+        "place": "成都SKP 1F",
+        "placeEn": "成都SKP 1F",
+        "typeId": [
+          "liuUoTMkKVyk_ON7TV3jw"
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/assets/images/activity/next-b.png b/src/assets/images/activity/next-b.png
new file mode 100644
index 0000000000000000000000000000000000000000..215f55ee929106dd31b34755e9169e8313dea8cc
GIT binary patch
literal 531
zcmV+u0_^>XP)<h;3K|Lk000e1NJLTq000;O001Zm1^@s6<PADi00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0jNntK~#7FwU<9j
z13?hQpE(czppg&-LB&qXG+OBQ2McWkD=jR7V$>8`7(ygC&)vm!bI0w@ULHJ>%q8=?
z-ORgO3IIpqOYyPzTl|R@Rfx~UYvNM8Z|h^UBmz#w9k14J6GFfge`oGPxS}^?iU98U
zNPK|*E9r^5;#ct;N)`5zt9XK0N$DNm67PxM#WN^Wc+WXOFBOn=TN`O0Mey1|c3~#V
zsnkM>iW(u$;%%5M@*#&XU;Gpq0BUX_Y}yOn&p=KP8OWmHxEs@cP>&8|6Toj0LZSj0
z18_~aEy;n51yHI$rU0nqK&Aqyq(Eu_KBO^_T7ZKz1~LagH3l*l;8YjLeh16dY!&Tj
z0CV#Y>R|<W;@+QOacek1H{x*)VAD452K6u7{P$|B1+e*rc%!2E70h)DTEGs>nTO3k
zV9tEv7gGV;Yu>1Z!@;ZVHB9)R1#n6R74@O`w(di*fD`Lb_twY(sGG+C>H@?q86rY;
zfW`nJQdNMc0BHfy0nz}H0+b3!4p0g}6`)x0jMXz9BmSb5%W6)!|7dO`@5GO2Q9qY3
VZt7T0;8*|v002ovPDHLkV1kJS+35fP

literal 0
HcmV?d00001

diff --git a/src/assets/images/activity/next-w.png b/src/assets/images/activity/next-w.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3396cd8912a08799271b9765efe3431f0df63c
GIT binary patch
literal 567
zcmV-70?7S|P)<h;3K|Lk000e1NJLTq001ul0037A1^@s6lvW%700009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0nAB6K~#7F?VGz&
zgFpa9ck@-IwYSyQPqR*|ZR-4yZR9X8$vBbcKJEoig9#Mp%zy!QHw0s1|Ht)ueQ7q&
z-N#Fe@f5^q<s0$0a1-w#;3Eig=(bM}_8pt3_aMw+WWRJkFMl35MmC_8Z_e$nW^)-h
zPBI|gf9M2{1IJ5U#PRnRP66@Jmo5SEuN@8nacHM{KpZ<jIbc*CR0Af-gJQsBc~A?O
zB@apgv*kf0V39m11T2<^+5xNNp=Q8pd8ieTL>_7cB$J2I0ZHYdWI%FxC>4-J9!dmc
zlZV^^S>+*TKz4b^6;MPTas(8UhtvT@<soH2ad}7;P(>b61XPoUwE<P-VNF1Fc~}}C
zArDIeWaMFPfRsGU36PVAsR5GmFd^VmRvtzIzQ@L4rID4Na^6eIPrP7H|NkmeVf!Ox
zdwXDeV`h6xZ2K@``xt2Z0B-y0!}g_<?dv|<7p=ChxNQd)Y=?Dh2h?nbGHnNuZHMn|
zCr;E7hkZ^Ksx1!tnjohl4*QrCswNKGo(Qcf4%?jkuPzSTTJYi`4%=Ad<t7g8m{hkO
z)=C_P*2DHlio@7wpsY9yt%sEshx-fmHQdhobGJrTnjh1Knxapo=`;WU002ovPDHLk
FV1gIl=>h-%

literal 0
HcmV?d00001

diff --git a/src/assets/images/activity/next.png b/src/assets/images/activity/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..326650517de8a372293223c0447b5eb1ac7d039f
GIT binary patch
literal 2589
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/activity/prev-b.png b/src/assets/images/activity/prev-b.png
new file mode 100644
index 0000000000000000000000000000000000000000..c55a8bd83c1eab0781b04428685786f2192b13b8
GIT binary patch
literal 520
zcmV+j0{8uiP)<h;3K|Lk000e1NJLTq000;O001Zm1^@s6<PADi00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0i8)iK~#7FwU)h0
z13?hQC!WC%{2-iypkilZkwy#u|H48WOJf-nqo&Zpa72Rh++A3PJ$83?^WYIOmz&?+
zWZoqMs;_hQ6?@5^45+Ryt(}$|R8O+`KVXyUXiR1_QqQF$8nUn1t*B%E5A1mfVAnQ3
z5cMD1{2Ony05rd4?*y9Pu@|nO0UVOKa@qWg%#|<vVlDu)zG2Jdn6vNMzw(3}0JdZt
zs889CeJ7;?LOTvktf>T`Zk__@3lK&!r3Cc>q5+~rg#bwb(gKnLqyc0FC>M|&pd5fI
zK&iqNt9Lv__(dDi8r85n_KB#s7W_el0swnGW1o__Bc~CWEWEQ<q*P;HaThOS?!+J2
z9{ZU6NhZZ=0EAV13qZDQZKi=V;=O|$vA4YXPzz}SH9%h3`(#GsL(a&2@f{Tapp}K7
z=}3J3g3Mzh>7my|j=MFLk8QWs(Z_ZS;5U(wRvcFYToa5XJCLaWNEOH&0F)ibTmY06
zNDaV;L<6Y>I7l>*B>*TI$Wnk)Um)9B04Nm5t|q`i5J>l@?dcCT5N;V|AM7gt0000<
KMNUMnLSTa62hiUD

literal 0
HcmV?d00001

diff --git a/src/assets/images/activity/prev-w.png b/src/assets/images/activity/prev-w.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d9ecef317457cb89b1753cb9228d1726605cd28
GIT binary patch
literal 577
zcmV-H0>1r;P)<h;3K|Lk000e1NJLTq001ul0037A1^@s6lvW%700009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0oF-GK~#7F-P^lT
zgg_L8;lZbJQ*%>IeKccJO*iI^OxJ0O_RcWCT)Ov9P>bNBigkfAgkandOuAey_i=MK
z|2huC@M3|F@Ta&r{rdB(JbnR=-fx0%3HX#OehnTQCGk0M$q#HM{24z;;kUq%41Oyd
zN#OUuQFr`aIO>W&0!Q8ON8zXoz62aK$CrYmrudR@)C^x5j+)?Wz)^L4EjX%*uL(!h
z@U`Kn3cdv#700)NqoVkha8wN68jgzKd%)3Qd@ndUgzpJQyYao@Xct}qjyB^};Aj(G
z368SyYH*Z=SA?Tgyeb?e@yc+th*yWBfAJ1*^at+(M?dgRaP*0HgQICC72%J;430QZ
zyG`sP2}ja%*tLj1C-ynbp9i@nd^|1Q;$}?jCwTzZ@voBEen~Og%L8V6Va9APiJ9%q
z2(!HnWVScp%=Xa-vwi5qY#;YA+Xt=8_7OL;9WF52u@18xs4?47CbJzPGu!b!vt2mB
zY?rJs+r>i6c9|BlT_DG7mnJgXMWM`gIWDtZ2+eGlpflUW|IGHa3ugPm3$uOIh}pj6
z#c~fo5|1(tK>K~zl>^XzA9g;s7pIi+L*&E(jMAsg_u?t^5WY^KGiJvh<FT5u%q~xq
P00000NkvXXu0mjflLZ3t

literal 0
HcmV?d00001

diff --git a/src/assets/images/activity/prev.png b/src/assets/images/activity/prev.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e216cc0c25fc86b6ab2149e59fae3f23439ec87
GIT binary patch
literal 2596
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
GLSTY+;=;`U

literal 0
HcmV?d00001

diff --git a/src/components/ActivityDetail/MainActivityDetail.vue b/src/components/ActivityDetail/MainActivityDetail.vue
new file mode 100644
index 0000000..5c8ac53
--- /dev/null
+++ b/src/components/ActivityDetail/MainActivityDetail.vue
@@ -0,0 +1,259 @@
+<template>
+  <transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
+    <masker @click="close">
+      <div v-if="actInfo.type === '档期活动'">
+        <swiper
+          :ref="mySwiper1"
+          class="carousel"
+          :autoplay="true"
+          :observer="true"
+          :modules="modules"
+          :loop="actInfo.fileUrl_h.length > 1"
+          :effect="'fade'"
+          :pagination="true"
+          @swiper="setControlledSwiper"
+        >
+          <swiper-slide v-for="item of actInfo.fileUrl_h" :key="item">
+            <img :src="item" class="banner" />
+          </swiper-slide>
+          <div v-if="actInfo.fileUrl_h.length > 1" class="swiper-prev" @click="pre">
+            <img src="@/assets/images/activity/prev-w.png" alt="" />
+          </div>
+          <div v-if="actInfo.fileUrl_h.length > 1" class="swiper-next" @click="next">
+            <img src="@/assets/images/activity/next-w.png" alt="" />
+          </div>
+        </swiper>
+        <img v-if="!actInfo.fileUrl_h.length" src="../../assets/images/empty_big.svg" class="banner" alt="" />
+      </div>
+      <div v-else class="shop-container">
+        <swiper
+          :ref="mySwiper1"
+          class="carousel1"
+          :slides-per-view="2"
+          :autoplay="{ autoplay: actInfo.list.length > 1, disableOnInteraction: false }"
+          :observer="true"
+          :space-between="40"
+          :pagination="true"
+          :modules="modules1"
+          @swiper="setControlledSwiper"
+        >
+          <swiper-slide v-for="item of actInfo.list" :key="item.entryCode" class="slide">
+            <img :src="item.content.fileUrl[0]" class="banner" />
+            <div class="title">
+              <Marquees class="name" :speed="40" :delay="0.8" :content="switchLanguage(item, 'title')">{{
+                switchLanguage(item.content, 'title')
+              }}</Marquees>
+            </div>
+            <div class="label">{{ $t('activity.time') + item.content.time }}</div>
+            <div class="label">{{ $t('activity.address') + switchLanguage(item.content, 'place') }}</div>
+          </swiper-slide>
+          <div v-if="actInfo.list.length > 1" class="swiper-prev-w" @click="pre">
+            <img src="@/assets/images/activity/prev-b.png" alt="" />
+          </div>
+          <div v-if="actInfo.list.length > 1" class="swiper-next-w" @click="next">
+            <img src="@/assets/images/activity/next-b.png" alt="" />
+          </div>
+        </swiper>
+      </div>
+      <!-- 关闭 -->
+      <div class="exit" :class="actInfo.type !== '档期活动' && 'w'" @click="close">
+        <img src="@/assets/images/shopDetail/close.svg" alt="" />
+      </div>
+    </masker>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { Autoplay, Pagination, EffectFade } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/effect-fade'
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import masker from '@/base/Masker/Masker.vue'
+import Marquees from '@/base/Marquees/Marquees.vue'
+
+const modules1 = [Autoplay, Pagination]
+const modules = [Autoplay, Pagination, EffectFade]
+interface AItem {
+  actInfo: any
+}
+
+defineProps<AItem>()
+const emit = defineEmits(['close'])
+function close() {
+  emit('close')
+}
+const { switchLanguage } = useSwitchLanguage()
+// 获取轮播实例
+const mySwiper1 = shallowRef()
+
+// 获取swiper实例
+function setControlledSwiper(swiper: any) {
+  mySwiper1.value = swiper
+}
+
+// 前一个
+function pre() {
+  mySwiper1.value.slidePrev()
+}
+
+// 后一个
+function next() {
+  mySwiper1.value.slideNext()
+}
+</script>
+
+<style lang="scss" scoped>
+.carousel {
+  height: 940px;
+  margin-top: 90px;
+  text-align: center;
+  .banner {
+    width: 1600px;
+    height: 900px;
+    border-radius: 16px;
+  }
+  :deep(.swiper-pagination-bullet) {
+    width: 4px;
+    height: 4px;
+    margin-right: 6px;
+    background: #e2dcd5;
+    border-radius: 2px;
+  }
+  :deep(.swiper-pagination-bullet-active) {
+    width: 40px;
+    background: #e00068;
+  }
+  .swiper-prev {
+    position: absolute;
+    top: 430px;
+    left: 60px;
+    z-index: 1;
+    img {
+      width: 20px;
+      height: 40px;
+    }
+  }
+  .swiper-next {
+    position: absolute;
+    top: 430px;
+    right: 60px;
+    z-index: 1;
+    img {
+      width: 20px;
+      height: 40px;
+    }
+  }
+}
+.shop-container {
+  position: relative;
+  z-index: 1;
+  width: 1760px;
+  height: 772px;
+  padding-top: 52px;
+  padding-left: 48px;
+  margin-top: 154px;
+  margin-left: 80px;
+  background: #f5f5f5;
+  border-radius: 16px;
+  :deep(.swiper-pagination-bullet) {
+    width: 4px;
+    height: 4px;
+    margin-right: 6px;
+    background: rgb(0 0 0 / 20%);
+    border-radius: 2px;
+  }
+  :deep(.swiper-pagination-horizontal) {
+    bottom: 17px;
+  }
+  :deep(.swiper-pagination-bullet-active) {
+    width: 40px;
+    background: #e00068;
+  }
+  .carousel1 {
+    height: 700px;
+    .slide {
+      width: 800px !important;
+      height: 640px;
+      background: #fff;
+      border-radius: 24px;
+      .banner {
+        width: 800px;
+        height: 450px;
+        border-radius: 16px;
+      }
+      .title {
+        height: 32px;
+        margin: 32px 0 40px 40px;
+        font-size: 24px;
+        font-family: 'font_bold';
+        color: rgb(0 0 0 / 70%);
+        font-style: normal;
+        font-weight: 700;
+        line-height: 32px;
+      }
+      .label {
+        @include no-wrap;
+
+        width: 730px;
+        margin-bottom: 8px;
+        margin-left: 40px;
+        font-size: 14px;
+        font-family: 'font_bold';
+        color: #8e9090;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 22px;
+      }
+    }
+    .swiper-prev-w {
+      position: absolute;
+      top: 670px;
+      left: 0;
+      z-index: 11;
+      img {
+        width: 10px;
+        height: 18px;
+      }
+    }
+    .swiper-next-w {
+      position: absolute;
+      top: 670px;
+      right: 48px;
+      z-index: 11;
+      img {
+        width: 10px;
+        height: 18px;
+      }
+    }
+  }
+}
+.exit {
+  position: absolute;
+  top: 50px;
+  right: 128px;
+  z-index: 1;
+  width: 100px;
+  height: 100px;
+  padding: 26px;
+  font-size: 20px;
+  font-family: 'font_bold';
+  text-align: center;
+  color: rgb(0 0 0 / 80%);
+  background: rgb(255 255 255 / 60%);
+  border: 2px solid #fff;
+  border-radius: 50px;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 20px 30px 0 rgb(0 0 0 / 10%);
+  line-height: 72px;
+  img {
+    width: 48px;
+  }
+}
+.w {
+  top: 114px;
+  right: 48px;
+}
+</style>
diff --git a/src/http/api/activity/index.ts b/src/http/api/activity/index.ts
index 7adf670..bd293ea 100644
--- a/src/http/api/activity/index.ts
+++ b/src/http/api/activity/index.ts
@@ -6,8 +6,8 @@ type TypeAct = {
   content: object
 }
 //获取商场活动
-export const getMallActivity = () => request<TypeAct[]>({ url: `${PREFIX.STATIC_URL}/JSON/getActivityListByMall.json` })
+export const getMallActivity = () => request<TypeAct[]>({ url: `${PREFIX.STATIC_URL}/JSON/getAllActivityList.json` })
 //获取店铺活动
-export const getShopActivity = () => request({ url: `/JSON/getActivityList2.json` })
+export const getShopActivity = () => request({ url: `${PREFIX.STATIC_URL}/JSON/getShopActivityList.json` })
 //获取会员活动
 export const getMemberActivity = () => request({ url: `/JSON/getActivityList3.json` })
diff --git a/src/types/activity.d.ts b/src/types/activity.d.ts
index fc313dd..7b2c290 100644
--- a/src/types/activity.d.ts
+++ b/src/types/activity.d.ts
@@ -19,4 +19,6 @@ declare interface Activity {
   shopCode: string //关联店铺code
   logo_code?: string //一些地方用到这个字段
   facilityCode?: string //服务里需要这个字段
+  fileUrl_h?: string // 横版详情图
+  fileUrl_v?: string // 竖版详情图
 }
diff --git a/src/views/Activity/Activity.vue b/src/views/Activity/Activity.vue
index 9e21997..efe3cc5 100644
--- a/src/views/Activity/Activity.vue
+++ b/src/views/Activity/Activity.vue
@@ -1,197 +1,149 @@
 <template>
   <div class="activity-container">
-    <!-- 切换按钮
-    <switchTab
-      class="btn-group"
-      :width="314.5"
-      :height="82"
-      :wrapper-width="637"
-      :wrapper-height="90"
-      :list="list"
-      @click="handleSwitch"
-    ></switchTab> -->
-    <div class="big-title">
-      <li>{{ switchLanguage({ name: '商场活动' }, 'name') }}</li>
-      <li>MALL ACTIVITIES</li>
-    </div>
     <!-- 活动列表 -->
-    <transition
-      enter-active-class="animate__faster animate__animated animate__fadeInRight"
-      leave-active-class="animate__animated animate__fadeOutDown"
-    >
-      <ScrollView
-        v-if="actList.length"
-        ref="actScroll"
-        :list="actList"
-        :refresh-delay="200"
-        :scroll-x="true"
-        :scrollbar="true"
-        class="act-scroll"
-      >
-        <ul class="act-list">
-          <ActivityItem v-for="(item, index) in actList" :key="index" :act-info="item" @click="clickItem"></ActivityItem>
-        </ul>
-      </ScrollView>
-      <!-- <swiper
-        v-if="showList"
-        class="act-scroll"
-        direction="horizontal"
-        :autoplay="
-          actList.length >= 3
-            ? {
-                disableOnInteraction: false,
-                delay: 1000
-              }
-            : false
-        "
-        :pagination="{
-          type: 'progressbar'
-        }"
-        :free-mode="{
-          enabled: true
-        }"
-        :enabled="actList.length >= 3"
-        :loop="actList.length >= 3"
-        :speed="1000"
+    <transition appear enter-active-class="animate__faster animate__animated animate__fadeIn">
+      <div v-if="actList.length === 1" class="act-list">
+        <ActivityItem2 style="margin-right: 0" :act-info="actList[0]" @handle="clickItem"></ActivityItem2>
+      </div>
+      <div v-else-if="actList.length === 2" class="act-list">
+        <ActivityItem2 :act-info="actList[0]" @handle="clickItem"></ActivityItem2>
+        <ActivityItem2 style="margin-right: 0" :act-info="actList[1]" @handle="clickItem"></ActivityItem2>
+      </div>
+      <swiper
+        v-else-if="actList.length > 2"
         :modules="modules"
-        :looped-slides="3"
-        :loop-additional-slides="3"
-        :slides-per-view="1"
-        :space-between="32"
+        :slides-per-view="1.92"
+        :observer="true"
+        :centered-slides="true"
+        :loop="true"
+        :pagination="false"
+        :autoplay="{ delay: 5000, disableOnInteraction: false }"
+        class="myswiper"
+        @swiper="setControlledSwiper"
       >
         <swiper-slide v-for="(item, index) in actList" :key="index">
-          <ActivityItem :act-info="item" @click-img="clickImage"></ActivityItem>
+          <ActivityItem :act-info="item" @handle="clickItem"></ActivityItem>
         </swiper-slide>
-      </swiper> -->
+        <div class="swiper-prev" @click="pre">
+          <img src="@/assets/images/activity/prev.png" alt="" />
+        </div>
+        <div class="swiper-next" @click="next">
+          <img src="@/assets/images/activity/next.png" alt="" />
+        </div>
+      </swiper>
     </transition>
     <img v-if="showEmpty" class="tra" src="@/assets/images/empty_big_tra.svg" alt="" />
-    <activityDetail v-if="showDetail" :act-info="currentItem" @close="showDetail = false"></activityDetail>
   </div>
+  <MainActivityDetail v-if="showDetail" :act-info="currentItem" @close="showDetail = false"></MainActivityDetail>
 </template>
 <script setup lang="ts">
-import { Autoplay, FreeMode, Pagination } from 'swiper'
+import { ref, shallowRef, watch } from 'vue'
+import { getMallActivity, getShopActivity } from '@/http/api/activity'
+import MainActivityDetail from '@/components/ActivityDetail/MainActivityDetail.vue'
+import ActivityItem from './ActivityItem.vue'
+import ActivityItem2 from './ActivityItem2.vue'
+
+import { Autoplay, Pagination } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css'
 import 'swiper/css/free-mode'
 
-import { useStatisticsModel } from '@/composables/useStatistics'
-import activityDetail from '@/components/ActivityDetail/ActivityDetail.vue'
-import ScrollView from '@/base/ScrollView/ScrollView.vue'
-import ActivityItem from './ActivityItem.vue'
-import { getMallActivity, getShopActivity } from '@/http/api/activity'
-import { ref } from 'vue'
-// import switchTab from '@/components/SwitchTab/SwitchTab.vue'
-import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
-
-const { switchLanguage } = useSwitchLanguage()
-const modules = [Autoplay, FreeMode, Pagination]
-
-/**
-const list = [
-  {
-    name: '商场活动',
-    nameEn: 'Community activities',
-    icon: require('@/assets/images/activity/icon_mall.svg'),
-    iconSel: require('@/assets/images/activity/icon_mallSel.svg'),
+const modules = [Autoplay, Pagination]
 
-    fun: () => getData('mall')
-  },
-  {
-    name: '商家活动',
-    nameEn: 'Brand promotion',
-    icon: require('../../assets/images/activity/icon_shop.svg'),
-    iconSel: require('../../assets/images/activity/icon_shopSel.svg'),
-
-    fun: () => getData('shop')
-  }
-]
- */
-const actList = ref<Activity[]>([])
-const switchIdx = ref(0)
-
-const showList = ref(false)
 const currentItem = ref<Activity>()
 const showDetail = ref(false)
-
-function clickItem(item: Activity) {
-  useStatisticsModel({ recordType: 2, moduleName: item.activityName, activityCode: item.id })
+function clickItem(item: Activity, code: string) {
+  mySwiper.value.autoplay.stop()
+  item.list = shopAcList.value.filter(info => info.content.typeId[0] === code)
   currentItem.value = item
   showDetail.value = true
 }
-/**
- *
- * @param index 点击分类
- */
-function handleSwitch(index: number) {
-  if (switchIdx.value === index) {
-    return
-  }
-  switchIdx.value = index
-  showList.value = false
-  // list[index].fun()
-}
 
 // 展示敬请期待
 const showEmpty = ref(false)
-function getData(type: 'mall' | 'shop') {
-  const fun = type === 'mall' ? getMallActivity() : getShopActivity()
-  fun.then(res => {
-    // actList.value = res.data ?? []
-    for (let t = 0; t < res.data.length; t++) {
-      actList.value.push({ id: res.data[t].id, ...res.data[t].content })
-    }
-    if (!res.data.length) {
-      showEmpty.value = true
-    }
-    showList.value = true
-  })
+const actList = ref([])
+const shopAcList = ref([])
+getMallActivity().then(({ data }) => {
+  actList.value = data ?? []
+  if (!data.length) {
+    showEmpty.value = true
+  }
+})
+getShopActivity().then(({ data }) => {
+  shopAcList.value = data ?? []
+})
+
+// 获取轮播实例
+const mySwiper = shallowRef()
+
+// 获取swiper实例
+function setControlledSwiper(swiper: any) {
+  mySwiper.value = swiper
 }
-getData('mall')
+
+// 前一个
+function pre() {
+  mySwiper.value.slidePrev()
+}
+
+// 后一个
+function next() {
+  mySwiper.value.slideNext()
+}
+
+// 判断轮播是否自动滚动
+watch(
+  () => showDetail.value,
+  () => {
+    if (!showDetail.value) {
+      mySwiper.value.autoplay.start()
+    }
+  }
+)
 </script>
 <style lang="scss" scoped>
-:deep(.bscroll-horizontal-scrollbar) {
-  z-index: 3 !important;
-  width: 500px !important;
-  background: rgb(0 0 0 / 10%);
-  border-radius: 6px;
-  opacity: 1 !important;
-  .bscroll-indicator {
-    background: #e00068 !important;
-    border: none !important;
-    border-radius: 6px !important;
+.activity-container {
+  padding-top: 212px;
+  text-align: center;
+  :deep(.swiper-slide) {
+    transform: scale(0.86) !important;
+    backface-visibility: hidden;
+    transition: all 0.3s;
+  }
+  :deep(.swiper-slide-active) {
+    transform: scale(1) !important;
+    backface-visibility: hidden;
+  }
+  .act-list {
+    display: flex;
+    justify-content: center;
+    margin-top: 40px;
   }
 }
-.activity-container {
-  overflow: hidden;
-  padding-top: 172px;
-  padding-left: 60px;
 
-  --animate-duration: 0.5s;
+.myswiper {
+  height: 656px;
+  text-align: center;
+}
 
-  .big-title {
-    font-size: 24px;
-    font-family: 'font_bold';
-    color: #534f46;
-    li:nth-child(2) {
-      margin-top: 5px;
-      font-size: 14px;
-    }
+.swiper-prev {
+  position: absolute;
+  top: 248px;
+  left: 40px;
+  z-index: 1;
+  img {
+    width: 64px;
+    height: 64px;
   }
-  .act-scroll {
-    position: relative;
-    width: 1864px;
-    height: 610px;
-    margin-top: 40px;
-    margin-left: 0;
-    :deep(.swiper-slide) {
-      width: 880px !important;
-      height: 575px;
-    }
-    .act-list {
-      // display: flex;
-      width: fit-content;
-      white-space: nowrap;
-    }
+}
+.swiper-next {
+  position: absolute;
+  top: 248px;
+  right: 40px;
+  z-index: 1;
+  img {
+    width: 64px;
+    height: 64px;
   }
 }
 
diff --git a/src/views/Activity/ActivityItem.vue b/src/views/Activity/ActivityItem.vue
index 0b5f67b..cb45f19 100644
--- a/src/views/Activity/ActivityItem.vue
+++ b/src/views/Activity/ActivityItem.vue
@@ -1,105 +1,42 @@
 <template>
-  <div v-if="showThis" :key="actInfo.id" class="act-item">
+  <div :key="actInfo.id" class="act-item" @click="clickActItem">
     <!-- 图片 -->
-    <div class="img-container" @click="clickActItem">
-      <img :src="getBackGround()" alt="" />
-      <img v-if="actInfo.fileUrl.length === 0" src="@/assets/images/empty_big.svg" alt="" />
+    <div class="img-container">
+      <img :src="actInfo.content.coverUrl[0] ? actInfo.content.coverUrl[0] : '@/assets/images/empty_big.svg'" alt="" />
     </div>
     <!-- 标题 -->
     <div class="marquee-wrapper">
-      <Marquees class="name" :speed="40" :delay="0.8" :content="switchLanguage(actInfo, 'activityName')">{{
-        switchLanguage(actInfo, 'activityName')
+      <Marquees class="name" :speed="40" :delay="0.8" :content="switchLanguage(actInfo.content, 'activityName')">{{
+        switchLanguage(actInfo.content, 'activityName')
       }}</Marquees>
     </div>
-    <!-- 介紹无 -->
-    <scroll-view
-      v-if="false"
-      ref="introScrollRef"
-      class="intro-scroll"
-      :style="{ height: actInfo.point !== -1 || actInfo.shopCode ? '499px' : null }"
-      :list="[switchLanguage(actInfo, 'activityContent')]"
-      :scrollbar="true"
-      :observe-image="true"
-      :refresh-delay="500"
-    >
-      <p class="intro" v-text="switchLanguage(actInfo, 'activityContent')"></p>
-    </scroll-view>
-    <!-- 导航无 -->
-    <div
-      v-if="false"
-      class="attr-container"
-      :style="{
-        justifyContent: actInfo.startDate === '' && actInfo.activityAddress === '' ? 'flex-end' : ''
-      }"
-    >
-      <p class="time-tip">
-        <span v-if="actInfo.startDate" class="act-time">{{ $t('activity.time') + actInfo.startDate + '至' + actInfo.endDate }}</span>
-        <span v-if="actInfo.activityAddress" class="act-time">{{
-          $t('activity.address') + switchLanguage(actInfo, 'activityAddress')
-        }}</span>
-      </p>
-      <!-- go -->
-      <div v-if="actInfo.point !== -1 || actInfo.shopCode" class="go" @click="handleGo">
-        <span>{{ $t('activity.actGo') }}</span>
-      </div>
-    </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import { useStatisticsModel } from '@/composables/useStatistics'
 import Marquees from '@/base/Marquees/Marquees.vue'
 
-import scrollView from '@/base/ScrollView/ScrollView.vue'
-import { useActivityNav } from '@/composables/useActivityNav'
 import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
 
 interface AItem {
-  actInfo: Activity
+  actInfo: any
 }
 
 const props = defineProps<AItem>()
-const emits = defineEmits(['click', 'clickImg'])
-const { nav } = useActivityNav()
+const emits = defineEmits(['handle'])
 const { switchLanguage } = useSwitchLanguage()
-const showThis = ref(false)
 function clickActItem() {
-  useStatisticsModel({ recordType: 2, moduleName: props.actInfo.activityName, activityCode: props.actInfo.activityId })
-  emits('click', props.actInfo)
-}
-function handleGo() {
-  nav(props.actInfo)
-  useStatisticsModel({ recordType: 2, moduleName: props.actInfo.activityName, activityCode: props.actInfo.activityId })
-  //   emits('clickGo', props.actInfo)
-}
-function getBackGround() {
-  if (props.actInfo.fileUrl.length) {
-    return props.actInfo.fileUrl[0]
-  }
-  return require('@/assets/images/empty_big.svg')
+  useStatisticsModel({ recordType: 2, moduleName: props.actInfo.content.activityName, activityCode: props.actInfo.entryCode })
+  emits('handle', props.actInfo.content, props.actInfo.entryCode)
 }
-onMounted(() => {
-  showThis.value = true
-})
 </script>
 <style lang="scss" scoped>
-:deep(.bscroll-vertical-scrollbar) {
-  z-index: 3 !important;
-  background: rgb(0 0 0 / 3%);
-  border-radius: 6px;
-  opacity: 1 !important;
-  .bscroll-indicator {
-    background: rgb(0 0 0 / 6%) !important;
-    border: none !important;
-    border-radius: 6px !important;
-  }
-}
 .act-item {
   position: relative;
   display: inline-flex;
   overflow: hidden;
-  width: 880px;
-  height: 575px;
+  width: 1024px;
+  height: 656px;
   padding-bottom: 0;
   margin-right: 32px;
   background-color: #fff;
@@ -110,12 +47,12 @@ onMounted(() => {
   .img-container {
     position: relative;
     width: inherit;
-    height: 495px;
+    height: 576px;
     background: #ebebeb00;
 
     img {
-      width: 880px;
-      height: 495px;
+      width: 1024px;
+      height: 576px;
       border-radius: 16px;
     }
   }
@@ -136,64 +73,5 @@ onMounted(() => {
       color: rgb(0 0 0 / 70%);
     }
   }
-  .intro-scroll {
-    position: relative;
-    overflow: hidden;
-    width: 544px;
-    height: 100%;
-    padding: 0;
-    padding-right: 20px;
-    margin-top: 5px;
-    margin-left: 48px;
-    border-radius: 0;
-    .intro {
-      font-size: 14px;
-      font-family: 'font_medium';
-      text-align: justify;
-      white-space: pre-wrap;
-      color: rgb(0 0 0 / 60%);
-      line-height: 200%;
-      :deep(img) {
-        width: 100%;
-      }
-    }
-  }
-  .attr-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    height: 44px;
-    padding: 0 48px;
-    margin-top: 16px;
-    .time-tip {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      width: 415px;
-      height: 48px;
-      margin-bottom: 0;
-      font-size: 14px;
-      font-family: 'font_regular';
-      color: #d0b186;
-      .act-time {
-        &:nth-child(2) {
-          @include no-wrap();
-
-          margin-top: 5px;
-        }
-      }
-    }
-    .go {
-      width: 115px;
-      height: 38px;
-      font-size: 20px;
-      font-family: 'font_bold';
-      text-align: center;
-      color: #fff;
-      background: linear-gradient(180deg, #c7a77b 0%, #d6bb97 100%);
-      border-radius: 90px;
-      line-height: 38px;
-    }
-  }
 }
 </style>
diff --git a/src/views/Activity/ActivityItem2.vue b/src/views/Activity/ActivityItem2.vue
new file mode 100644
index 0000000..7202a6e
--- /dev/null
+++ b/src/views/Activity/ActivityItem2.vue
@@ -0,0 +1,77 @@
+<template>
+  <div :key="actInfo.id" class="act-item" @click="clickActItem">
+    <!-- 图片 -->
+    <div class="img-container">
+      <img :src="actInfo.content.coverUrl[0] ? actInfo.content.coverUrl[0] : '@/assets/images/empty_big.svg'" alt="" />
+    </div>
+    <!-- 标题 -->
+    <div class="marquee-wrapper">
+      <Marquees class="name" :speed="40" :delay="0.8" :content="switchLanguage(actInfo.content, 'activityName')">{{
+        switchLanguage(actInfo.content, 'activityName')
+      }}</Marquees>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useStatisticsModel } from '@/composables/useStatistics'
+import Marquees from '@/base/Marquees/Marquees.vue'
+
+import { useSwitchLanguage } from '@/composables/useSwitchLanguage'
+
+interface AItem {
+  actInfo: any
+}
+
+const props = defineProps<AItem>()
+const emits = defineEmits(['handle'])
+const { switchLanguage } = useSwitchLanguage()
+function clickActItem() {
+  useStatisticsModel({ recordType: 2, moduleName: props.actInfo.content.activityName, activityCode: props.actInfo.entryCode })
+  emits('handle', props.actInfo.content, props.actInfo.entryCode)
+}
+</script>
+<style lang="scss" scoped>
+.act-item {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  width: 880px;
+  height: 575px;
+  padding-bottom: 0;
+  margin-right: 32px;
+  background-color: #fff;
+  border-radius: 16px;
+  flex-direction: column;
+
+  --animate-duration: 0.5s;
+  .img-container {
+    position: relative;
+    width: inherit;
+    height: 495px;
+    background: #ebebeb00;
+
+    img {
+      width: 880px;
+      height: 495px;
+      border-radius: 16px;
+    }
+  }
+  .marquee-wrapper {
+    flex-shrink: 0;
+    overflow: hidden;
+    width: 800px;
+    height: 32px;
+    margin-top: 24px;
+    margin-left: 40px;
+    white-space: nowrap;
+    .name {
+      display: inline-block;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: inherit;
+      font-family: 'font_bold';
+      color: rgb(0 0 0 / 70%);
+    }
+  }
+}
+</style>