hookehuyr

feat: 重构首页并迁移静态资源到CDN

- 将本地静态图片资源迁移到CDN服务器
- 重构首页组件,使用动态数据替代硬编码
- 优化法会流程、三师七证和新闻模块的数据处理
- 修复样式问题和添加新功能交互
...@@ -357,7 +357,7 @@ defineExpose({ ...@@ -357,7 +357,7 @@ defineExpose({
357 left: 0; 357 left: 0;
358 width: 100%; 358 width: 100%;
359 height: 100%; 359 height: 100%;
360 - background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/视频@2x.png'); 360 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%A7%86%E9%A2%91@2x.png');
361 background-size: contain; 361 background-size: contain;
362 background-repeat: no-repeat; 362 background-repeat: no-repeat;
363 background-position: center; 363 background-position: center;
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 <!-- 顶部Banner图片 --> 6 <!-- 顶部Banner图片 -->
7 <div class="banner-section"> 7 <div class="banner-section">
8 <img 8 <img
9 - src="@/assets/images/02 西园戒幢律寺三坛大戒法会/banner@2x.png" 9 + src="https://cdn.ipadbiz.cn/stdj/images/home/banner@2x.png"
10 alt="三坛大戒法会Banner" 10 alt="三坛大戒法会Banner"
11 class="banner-image" 11 class="banner-image"
12 /> 12 />
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 <div class="ceremony-process"> 28 <div class="ceremony-process">
29 <!-- 标题 --> 29 <!-- 标题 -->
30 <div class="ceremony-title"> 30 <div class="ceremony-title">
31 - <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/法會流程@2x.png" alt="法会流程" /> 31 + <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E6%B3%95%E6%9C%83%E6%B5%81%E7%A8%8B@2x.png" alt="法会流程" />
32 </div> 32 </div>
33 33
34 <!-- 流程步骤 --> 34 <!-- 流程步骤 -->
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
55 55
56 <!-- 底部箭头(选中状态) --> 56 <!-- 底部箭头(选中状态) -->
57 <div v-if="step.active" class="bottom-arrow"> 57 <div v-if="step.active" class="bottom-arrow">
58 - <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/点@2x.png" alt="选中" /> 58 + <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%82%B9@2x.png" alt="选中" />
59 </div> 59 </div>
60 </div> 60 </div>
61 </div> 61 </div>
...@@ -63,10 +63,10 @@ ...@@ -63,10 +63,10 @@
63 </div> 63 </div>
64 64
65 <!-- 法会流程内容 --> 65 <!-- 法会流程内容 -->
66 - <div class="ceremony-intro"> 66 + <div v-if="currentStep" class="ceremony-intro">
67 <div class="intro-container"> 67 <div class="intro-container">
68 <!-- 背景图片 --> 68 <!-- 背景图片 -->
69 - <div class="intro-background"></div> 69 + <div class="intro-background" :style="{ backgroundImage: `url(${currentStep?.cover})` }"></div>
70 70
71 <!-- 步骤标题 --> 71 <!-- 步骤标题 -->
72 <div class="step-title" ref="stepTitleRef"> 72 <div class="step-title" ref="stepTitleRef">
...@@ -77,14 +77,9 @@ ...@@ -77,14 +77,9 @@
77 <div class="decorative-line" :style="decorativeLineStyle"></div> 77 <div class="decorative-line" :style="decorativeLineStyle"></div>
78 78
79 <!-- 查看更多按钮 --> 79 <!-- 查看更多按钮 -->
80 - <div class="more-button" @click="viewMore"> 80 + <div class="more-button" @click="viewMore('法会流程')">
81 <span class="more-text">查看更多</span> 81 <span class="more-text">查看更多</span>
82 </div> 82 </div>
83 -
84 - <!-- 步骤描述(可选显示) -->
85 - <div class="step-description">
86 - <p>{{ currentStep.description }}</p>
87 - </div>
88 </div> 83 </div>
89 </div> 84 </div>
90 </div> 85 </div>
...@@ -93,44 +88,18 @@ ...@@ -93,44 +88,18 @@
93 <div class="three-masters-section"> 88 <div class="three-masters-section">
94 <!-- 标题图片 --> 89 <!-- 标题图片 -->
95 <div class="common-title"> 90 <div class="common-title">
96 - <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/三師七證@2x.png" alt="三师七证" class="title-image"> 91 + <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%89%E5%B8%AB%E4%B8%83%E8%AD%89@2x.png" alt="三师七证" class="title-image">
97 </div> 92 </div>
98 93
99 <!-- 三个栏目 --> 94 <!-- 三个栏目 -->
100 <div class="three-columns"> 95 <div class="three-columns">
101 <!-- 三师七证栏目 --> 96 <!-- 三师七证栏目 -->
102 - <div class="column-item"> 97 + <div class="column-item" v-for="(item, index) in mastersList" :key="index">
103 - <div class="column-content"> 98 + <div class="column-content" :style="{ backgroundImage: `url(${item.cover})` }">
104 <div class="column-overlay"></div> 99 <div class="column-overlay"></div>
105 <div class="column-text"> 100 <div class="column-text">
106 - <h3 class="column-title">三師七證</h3> 101 + <h3 class="column-title">{{ item.name }}</h3>
107 - <div class="more-button" @click="viewMore('masters')"> 102 + <div class="more-button" @click="viewMore(item.name)">
108 - <span class="more-text">查看更多</span>
109 - </div>
110 - </div>
111 - </div>
112 - </div>
113 -
114 - <!-- 戒子栏目 -->
115 - <div class="column-item">
116 - <div class="column-content">
117 - <div class="column-overlay"></div>
118 - <div class="column-text">
119 - <h3 class="column-title">戒子</h3>
120 - <div class="more-button" @click="viewMore('students')">
121 - <span class="more-text">查看更多</span>
122 - </div>
123 - </div>
124 - </div>
125 - </div>
126 -
127 - <!-- 义工栏目 -->
128 - <div class="column-item">
129 - <div class="column-content">
130 - <div class="column-overlay"></div>
131 - <div class="column-text">
132 - <h3 class="column-title">义工</h3>
133 - <div class="more-button" @click="viewMore('volunteers')">
134 <span class="more-text">查看更多</span> 103 <span class="more-text">查看更多</span>
135 </div> 104 </div>
136 </div> 105 </div>
...@@ -143,7 +112,7 @@ ...@@ -143,7 +112,7 @@
143 <div class="news-section"> 112 <div class="news-section">
144 <!-- 标题 --> 113 <!-- 标题 -->
145 <div class="common-title"> 114 <div class="common-title">
146 - <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/相关新聞@2x.png" alt="相关新闻" class="title-image"> 115 + <img src="https://cdn.ipadbiz.cn/stdj/images/home/%E7%9B%B8%E5%85%B3%E6%96%B0%E8%81%9E@2x.png" alt="相关新闻" class="title-image">
147 </div> 116 </div>
148 117
149 <!-- 轮播容器 --> 118 <!-- 轮播容器 -->
...@@ -164,14 +133,14 @@ ...@@ -164,14 +133,14 @@
164 <div class="carousel-nav"> 133 <div class="carousel-nav">
165 <img 134 <img
166 class="nav-btn prev-btn" 135 class="nav-btn prev-btn"
167 - src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/上@2x.png" 136 + src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8A@2x.png"
168 alt="上一张" 137 alt="上一张"
169 @click="prevSlide" 138 @click="prevSlide"
170 :class="{ disabled: currentSlide === 0 }" 139 :class="{ disabled: currentSlide === 0 }"
171 > 140 >
172 <img 141 <img
173 class="nav-btn next-btn" 142 class="nav-btn next-btn"
174 - src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/下@2x.png" 143 + src="https://cdn.ipadbiz.cn/stdj/images/home/%E4%B8%8B@2x.png"
175 alt="下一张" 144 alt="下一张"
176 @click="nextSlide" 145 @click="nextSlide"
177 :class="{ disabled: isTransitioning }" 146 :class="{ disabled: isTransitioning }"
...@@ -215,43 +184,7 @@ const videoOptions = ref({ ...@@ -215,43 +184,7 @@ const videoOptions = ref({
215 }) 184 })
216 185
217 // 法会流程步骤数据 186 // 法会流程步骤数据
218 -const processSteps = ref([ 187 +const processSteps = ref([])
219 - {
220 - name: '准备',
221 - active: true,
222 - description: '法会前的各项准备工作,包括场地布置、法器准备、戒子报到等重要环节。'
223 - },
224 - {
225 - name: '正式开堂',
226 - active: false,
227 - description: '三坛大戒法会正式开始,举行庄严的开堂仪式,宣布戒期开始。'
228 - },
229 - {
230 - name: '封堂洒净',
231 - active: false,
232 - description: '封闭戒堂,进行洒净仪式,为戒子们营造清净庄严的受戒环境。'
233 - },
234 - {
235 - name: '正授沙弥戒',
236 - active: false,
237 - description: '第一坛沙弥戒的正式传授,戒子们受持沙弥十戒,成为正式的沙弥。'
238 - },
239 - {
240 - name: '二坛比丘戒',
241 - active: false,
242 - description: '第二坛比丘戒的庄严传授,戒子们受持比丘二百五十戒,成为比丘僧。'
243 - },
244 - {
245 - name: '三坛菩萨戒',
246 - active: false,
247 - description: '第三坛菩萨戒的殊胜传授,戒子们受持菩萨戒,发菩提心,行菩萨道。'
248 - },
249 - {
250 - name: '圆满',
251 - active: false,
252 - description: '三坛大戒法会圆满结束,戒子们正式成为具足戒的僧人,功德圆满。'
253 - }
254 -])
255 188
256 // 获取当前选中的步骤 189 // 获取当前选中的步骤
257 const currentStep = computed(() => { 190 const currentStep = computed(() => {
...@@ -309,13 +242,39 @@ const selectStep = (index) => { ...@@ -309,13 +242,39 @@ const selectStep = (index) => {
309 calculateLinePosition() 242 calculateLinePosition()
310 } 243 }
311 244
245 +// 三师七证数据列表
246 +const mastersList = ref([])
247 +
312 // 组件挂载后计算装饰线位置 248 // 组件挂载后计算装饰线位置
313 onMounted(async () => { 249 onMounted(async () => {
314 await calculateLinePosition(); 250 await calculateLinePosition();
315 // 调用接口获取首页数据 251 // 调用接口获取首页数据
316 const { code, list } = await homePageAPI(); 252 const { code, list } = await homePageAPI();
317 if (code) { 253 if (code) {
318 - console.warn(list); 254 + // 法会流程
255 + processSteps.value = list?.STDJFHLC?.map(item => ({
256 + id: item.id,
257 + parent_sn: item.parent_sn,
258 + name: item.category_name,
259 + cover: item.cover || '',
260 + active: false,
261 + })) || [];
262 + processSteps.value[0].active = true;
263 + // 三师七证
264 + mastersList.value = list?.STDJSSQZ?.map(item => ({
265 + id: item.id,
266 + parent_sn: item.parent_sn,
267 + name: item.category_name,
268 + cover: item.cover || '',
269 + })) || [];
270 + // 相关新闻
271 + newsItems.value = list?.STDJXGXW?.map(item => ({
272 + id: item.id,
273 + parent_sn: item.parent_sn,
274 + title: item.post_title,
275 + date: item.post_date,
276 + image: item.photo || '',
277 + })) || [];
319 } 278 }
320 }) 279 })
321 280
...@@ -326,31 +285,23 @@ watch(currentStep, () => { ...@@ -326,31 +285,23 @@ watch(currentStep, () => {
326 285
327 // 查看更多按钮点击事件 286 // 查看更多按钮点击事件
328 const viewMore = (type) => { 287 const viewMore = (type) => {
329 - if (type) {
330 - // 三师七证模块的点击事件
331 - console.log('查看更多:', type)
332 switch (type) { 288 switch (type) {
333 - case 'masters': 289 + case '法会流程':
334 - console.log('跳转到三师七证页面') 290 + console.log('法会流程', currentStep.value);
335 - // 这里可以添加跳转到三师七证页面的逻辑 291 + break
292 + case '三师七证':
293 + // 跳转到三师七证页面的逻辑
336 router.push('/masters') 294 router.push('/masters')
337 break 295 break
338 - case 'students': 296 + case '戒子':
339 - console.log('跳转到戒子页面') 297 + // 跳转到戒子页面的逻辑
340 - // 这里可以添加跳转到戒子页面的逻辑
341 router.push('/students') 298 router.push('/students')
342 break 299 break
343 - case 'volunteers': 300 + case '义工':
344 - console.log('跳转到义工页面') 301 + // 跳转到义工页面的逻辑
345 - // 这里可以添加跳转到义工页面的逻辑
346 router.push('/volunteers') 302 router.push('/volunteers')
347 break 303 break
348 } 304 }
349 - } else {
350 - // 原有的法会流程查看更多
351 - console.log('查看更多:', currentStep.value.name)
352 - // 这里可以添加跳转到详情页面的逻辑
353 - }
354 } 305 }
355 306
356 // 新闻轮播相关逻辑 307 // 新闻轮播相关逻辑
...@@ -360,37 +311,11 @@ const isTransitioning = ref(false) ...@@ -360,37 +311,11 @@ const isTransitioning = ref(false)
360 const hasTailClone = ref(false) 311 const hasTailClone = ref(false)
361 312
362 // 新闻数据 313 // 新闻数据
363 -const newsItems = ref([ 314 +const newsItems = ref([])
364 - {
365 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
366 - title: '三坛大戒 | 护戒胜福田 成就最上因',
367 - date: '2025-10-01'
368 - },
369 - {
370 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
371 - title: '西园戒幢律寺三坛大戒法会圆满举行',
372 - date: '2025-09-28'
373 - },
374 - {
375 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
376 - title: '戒子们庄严受戒 功德圆满',
377 - date: '2025-09-25'
378 - },
379 - {
380 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
381 - title: '三师七证齐聚 传承佛法精神',
382 - date: '2025-09-22'
383 - }
384 -])
385 315
386 // 原始长度用于判断“最后一张”的逻辑 316 // 原始长度用于判断“最后一张”的逻辑
387 const initialLength = ref(newsItems.value.length) 317 const initialLength = ref(newsItems.value.length)
388 318
389 -// 计算最大滑动位置
390 -const maxSlide = computed(() => {
391 - return Math.max(0, newsItems.value.length - 1)
392 -})
393 -
394 // 上一张 319 // 上一张
395 const prevSlide = () => { 320 const prevSlide = () => {
396 if (currentSlide.value > 0) { 321 if (currentSlide.value > 0) {
...@@ -636,7 +561,6 @@ const handleNewsClick = (item) => { ...@@ -636,7 +561,6 @@ const handleNewsClick = (item) => {
636 min-height: 20rem; 561 min-height: 20rem;
637 border-radius: 1.17rem; 562 border-radius: 1.17rem;
638 border: 0.08rem solid #C1A16A; 563 border: 0.08rem solid #C1A16A;
639 - background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg');
640 background-size: cover; 564 background-size: cover;
641 background-position: center; 565 background-position: center;
642 background-repeat: no-repeat; 566 background-repeat: no-repeat;
...@@ -692,7 +616,7 @@ const handleNewsClick = (item) => { ...@@ -692,7 +616,7 @@ const handleNewsClick = (item) => {
692 margin: 0 auto; 616 margin: 0 auto;
693 height: 2.5rem; 617 height: 2.5rem;
694 width: 6rem; 618 width: 6rem;
695 - background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/button-bg@2x.png'); 619 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
696 background-size: contain; 620 background-size: contain;
697 background-position: center; 621 background-position: center;
698 background-repeat: no-repeat; 622 background-repeat: no-repeat;
...@@ -832,7 +756,7 @@ const handleNewsClick = (item) => { ...@@ -832,7 +756,7 @@ const handleNewsClick = (item) => {
832 .ceremony-wrapper { 756 .ceremony-wrapper {
833 position: relative; 757 position: relative;
834 width: 100vw; 758 width: 100vw;
835 - background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png'); 759 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
836 background-size: cover; 760 background-size: cover;
837 background-position: center; 761 background-position: center;
838 background-repeat: no-repeat; 762 background-repeat: no-repeat;
...@@ -874,7 +798,7 @@ const handleNewsClick = (item) => { ...@@ -874,7 +798,7 @@ const handleNewsClick = (item) => {
874 left: 0; 798 left: 0;
875 right: 0; 799 right: 0;
876 height: 0.3rem; 800 height: 0.3rem;
877 - background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/麻绳@2x.png'); 801 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E9%BA%BB%E7%BB%B3@2x.png');
878 background-size: cover; 802 background-size: cover;
879 background-position: top; 803 background-position: top;
880 background-repeat: repeat-x; 804 background-repeat: repeat-x;
...@@ -1073,7 +997,6 @@ const handleNewsClick = (item) => { ...@@ -1073,7 +997,6 @@ const handleNewsClick = (item) => {
1073 left: 0; 997 left: 0;
1074 width: 100%; 998 width: 100%;
1075 height: 100%; 999 height: 100%;
1076 - background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg');
1077 background-size: cover; 1000 background-size: cover;
1078 background-position: center; 1001 background-position: center;
1079 background-repeat: no-repeat; 1002 background-repeat: no-repeat;
...@@ -1116,7 +1039,7 @@ const handleNewsClick = (item) => { ...@@ -1116,7 +1039,7 @@ const handleNewsClick = (item) => {
1116 position: absolute; 1039 position: absolute;
1117 left: 2.2rem; 1040 left: 2.2rem;
1118 width: 0.125rem; 1041 width: 0.125rem;
1119 - border-left: 0.125rem dotted #C1A16A; 1042 + border-left: 0.125rem dotted #FFF;
1120 z-index: 3; 1043 z-index: 3;
1121 } 1044 }
1122 1045
...@@ -1127,7 +1050,7 @@ const handleNewsClick = (item) => { ...@@ -1127,7 +1050,7 @@ const handleNewsClick = (item) => {
1127 left: 1.5rem; 1050 left: 1.5rem;
1128 height: 3rem; 1051 height: 3rem;
1129 aspect-ratio: 3 / 1; 1052 aspect-ratio: 3 / 1;
1130 - background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/button-bg@2x.png'); 1053 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/button-bg@2x.png');
1131 background-size: contain; 1054 background-size: contain;
1132 background-position: center; 1055 background-position: center;
1133 background-repeat: no-repeat; 1056 background-repeat: no-repeat;
...@@ -1273,7 +1196,7 @@ const handleNewsClick = (item) => { ...@@ -1273,7 +1196,7 @@ const handleNewsClick = (item) => {
1273 .news-section { 1196 .news-section {
1274 padding: 3rem 1.5rem; 1197 padding: 3rem 1.5rem;
1275 position: relative; 1198 position: relative;
1276 - background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png'); 1199 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
1277 background-size: cover; 1200 background-size: cover;
1278 background-position: center; 1201 background-position: center;
1279 background-repeat: no-repeat; 1202 background-repeat: no-repeat;
...@@ -1287,7 +1210,7 @@ const handleNewsClick = (item) => { ...@@ -1287,7 +1210,7 @@ const handleNewsClick = (item) => {
1287 left: 0; 1210 left: 0;
1288 width: 100%; /* 可根据实际图片大小调整 */ 1211 width: 100%; /* 可根据实际图片大小调整 */
1289 height: 200px; /* 可根据实际图片大小调整 */ 1212 height: 200px; /* 可根据实际图片大小调整 */
1290 - background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/bg@2x.png'); 1213 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png');
1291 background-size: cover; 1214 background-size: cover;
1292 background-repeat: no-repeat; 1215 background-repeat: no-repeat;
1293 z-index: 1; 1216 z-index: 1;
...@@ -1338,6 +1261,9 @@ const handleNewsClick = (item) => { ...@@ -1338,6 +1261,9 @@ const handleNewsClick = (item) => {
1338 color: #333; 1261 color: #333;
1339 line-height: 1.4; 1262 line-height: 1.4;
1340 margin-bottom: 0.5rem; 1263 margin-bottom: 0.5rem;
1264 + overflow: hidden;
1265 + text-overflow: ellipsis;
1266 + white-space: nowrap;
1341 } 1267 }
1342 1268
1343 .news-date { 1269 .news-date {
......
...@@ -19,13 +19,13 @@ ...@@ -19,13 +19,13 @@
19 <div class="splash-content"> 19 <div class="splash-content">
20 <!-- 左上角Logo --> 20 <!-- 左上角Logo -->
21 <div class="logo-section animate-fade-in-up"> 21 <div class="logo-section animate-fade-in-up">
22 - <img src="/src/assets/images/01启动页/logo@2x.png" alt="三坛大戒" class="logo-image" /> 22 + <img src="https://cdn.ipadbiz.cn/stdj/icon/%E5%90%AF%E5%8A%A8%E9%A1%B5logo@2x.png" alt="三坛大戒" class="logo-image" />
23 </div> 23 </div>
24 24
25 <!-- 底部按钮 --> 25 <!-- 底部按钮 -->
26 <div class="bottom-section animate-fade-in-up-delay"> 26 <div class="bottom-section animate-fade-in-up-delay">
27 <div class="enter-button" @click="enterApp"> 27 <div class="enter-button" @click="enterApp">
28 - <img src="/src/assets/images/01启动页/进入传戒现场@2x.png" alt="进入传戒现场" class="enter-image" /> 28 + <img src="https://cdn.ipadbiz.cn/stdj/icon/%E8%BF%9B%E5%85%A5%E4%BC%A0%E6%88%92%E7%8E%B0%E5%9C%BA@2x.png" alt="进入传戒现场" class="enter-image" />
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
...@@ -78,7 +78,7 @@ onMounted(() => { ...@@ -78,7 +78,7 @@ onMounted(() => {
78 left: 0; 78 left: 0;
79 right: 0; 79 right: 0;
80 bottom: 0; 80 bottom: 0;
81 - background-image: url('/src/assets/images/01启动页/海报@2x.png'); 81 + background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E5%90%AF%E5%8A%A8%E9%A1%B5%E6%B5%B7%E6%8A%A5%E8%83%8C%E6%99%AF@2x.png');
82 background-size: cover; 82 background-size: cover;
83 background-position: center; 83 background-position: center;
84 background-repeat: no-repeat; 84 background-repeat: no-repeat;
......