feat: 重构首页并迁移静态资源到CDN
- 将本地静态图片资源迁移到CDN服务器 - 重构首页组件,使用动态数据替代硬编码 - 优化法会流程、三师七证和新闻模块的数据处理 - 修复样式问题和添加新功能交互
Showing
4 changed files
with
66 additions
and
140 deletions
| ... | @@ -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; | ... | ... |
-
Please register or login to post a comment