From 47e7e6f3d7b00b44a16eaeccb95a6a6a31790e05 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期一, 31 七月 2023 15:03:31 +0800
Subject: [PATCH] Update: 更新輪器圖檔 FILM_1 FILM_2
---
PAMapp/components/Ui/UiCarousel.vue | 144 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 132 insertions(+), 12 deletions(-)
diff --git a/PAMapp/components/Ui/UiCarousel.vue b/PAMapp/components/Ui/UiCarousel.vue
index 15f64d1..d9fb7db 100644
--- a/PAMapp/components/Ui/UiCarousel.vue
+++ b/PAMapp/components/Ui/UiCarousel.vue
@@ -1,42 +1,135 @@
<template>
<div>
<el-carousel
- :autoplay="true"
indicator-position="outside"
arrow="never"
trigger="click"
+ interval="6000"
class="pam-home-carousel"
>
- <el-carousel-item class="banner-img">
+
+ <template v-if="fromAccess === AccessFroms.FILM_1">
+ <el-carousel-item class="banner-img-style2 banner-film1">
+ </el-carousel-item>
+
+ <el-carousel-item class="banner-img-style banner1-img">
<div class="text--center mt-30 banner-info">
- <h1 class="banner-title mb-10">�犖������“���</h1>
- <p class="banner-txt text--PRIMARY_WHITE">����嚗�������</p>
- <p class="banner-txt text--PRIMARY_WHITE">霈��鼠�敹恍�������“����</p>
- <p class="banner-txt text--PRIMARY_WHITE">閫�瘙箔�憭批������嚗�銵���</p>
+ <h1 class="banner-title mb-10">撠惇雿��憿批��ㄐ</h1>
+ <p class="banner-txt text--PRIMARY_WHITE">�����瘙銝敺����?</p>
+ <p class="banner-txt text--PRIMARY_WHITE">頛詨璇辣�翰�祟��憯����</p>
+ <p class="banner-txt text--PRIMARY_WHITE">蝪∪銝郊撽�����兢蝳犖���!</p>
</div>
</el-carousel-item>
+
+ <el-carousel-item class="banner-img-style --3 banner2-img">
+ <div class="text--center mt-30 banner-info">
+ <h1 class="banner-title mb-10">憭���撘�</h1>
+ <p class="banner-txt text--PRIMARY_WHITE">���������憿批��</p>
+ <p class="banner-txt text--PRIMARY_WHITE">靘�犖��瘙�澈蝭拚</p>
+ <p class="banner-txt text--PRIMARY_WHITE">慦���“��蜓��蝜�</p>
+ </div>
+ </el-carousel-item>
+ </template>
+ <template v-else-if="fromAccess === AccessFroms.FILM_2">
+ <el-carousel-item class="banner-img-style2 banner-film2">
+ </el-carousel-item>
+
+ <el-carousel-item class="banner-img-style banner1-img">
+ <div class="text--center mt-30 banner-info">
+ <h1 class="banner-title mb-10">撠惇雿��憿批��ㄐ</h1>
+ <p class="banner-txt text--PRIMARY_WHITE">�����瘙銝敺����?</p>
+ <p class="banner-txt text--PRIMARY_WHITE">頛詨璇辣�翰�祟��憯����</p>
+ <p class="banner-txt text--PRIMARY_WHITE">蝪∪銝郊撽�����兢蝳犖���!</p>
+ </div>
+ </el-carousel-item>
+
+ <el-carousel-item class="banner-img-style banner2-img">
+ <div class="text--center mt-30 banner-info">
+ <h1 class="banner-title mb-10">憭���撘�</h1>
+ <p class="banner-txt text--PRIMARY_WHITE">���������憿批��</p>
+ <p class="banner-txt text--PRIMARY_WHITE">靘�犖��瘙�澈蝭拚</p>
+ <p class="banner-txt text--PRIMARY_WHITE">慦���“��蜓��蝜�</p>
+ </div>
+ </el-carousel-item>
+
+ </template>
+ <template v-else>
+ <el-carousel-item class="banner-img-style banner1-img">
+ <div class="text--center mt-30 banner-info">
+ <h1 class="banner-title mb-10">撠惇雿��憿批��ㄐ</h1>
+ <p class="banner-txt text--PRIMARY_WHITE">�����瘙銝敺����?</p>
+ <p class="banner-txt text--PRIMARY_WHITE">頛詨璇辣�翰�祟��憯����</p>
+ <p class="banner-txt text--PRIMARY_WHITE">蝪∪銝郊撽�����兢蝳犖���!</p>
+ </div>
+ </el-carousel-item>
+
+ <el-carousel-item class="banner-img-style banner2-img">
+ <div class="text--center mt-30 banner-info">
+ <h1 class="banner-title mb-10">憭���撘�</h1>
+ <p class="banner-txt text--PRIMARY_WHITE">���������憿批��</p>
+ <p class="banner-txt text--PRIMARY_WHITE">靘�犖��瘙�澈蝭拚</p>
+ <p class="banner-txt text--PRIMARY_WHITE">慦���“��蜓��蝜�</p>
+ </div>
+ </el-carousel-item>
+ </template>
+
</el-carousel>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
+import {Getter} from "nuxt-property-decorator";
+import {AccessFroms} from "~/shared/services/utils.service";
@Component
export default class UiCarousel extends Vue {
+
+ @Getter
+ fromAccess!: AccessFroms;
+
+ protected AccessFroms = AccessFroms;
}
</script>
<style lang="scss" scoped>
-.banner-img {
+.banner-img-style {
width: 100%;
height: 100%;
- background-image: url('~/assets/images/index_banner_mob.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
+.banner-img-style2 {
+ width: 100%;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: bottom;
+}
+
+.banner1-img {
+ background-image: url('~/assets/images/index_banner_mob.svg');
+}
+
+.banner2-img {
+ background-image: url('~/assets/images/index_banner2_mob.svg');
+}
+
+.banner3-img {
+ background-image: url('~/assets/images/index_banner3_mob.svg');
+ background-color: #e08885;
+}
+
+.banner-film1 {
+ background-image: url('~/assets/images/phone-Education-2@2x.png');
+}
+
+.banner-film2 {
+ background-image: url('~/assets/images/phone-Health-1@2x.png');
+}
+
.banner-info {
.banner-title {
@@ -49,10 +142,28 @@
}
}
-@media (min-width: 768px) {
- .banner-img {
- background-image: url('~/assets/images/index_banner_web.svg');
+@media (min-width: 576px) {
+ .banner1-img {
+ background-image: url('~/assets/images/index_banner_web.svg');
}
+
+ .banner2-img {
+ background-image: url('~/assets/images/index_banner2_web.svg');
+ }
+
+ .banner3-img {
+ background-image: url('~/assets/images/index_banner3_web1.svg');
+ }
+ .banner-film1 {
+ background-image: url('~/assets/images/Education-2@2x.png');
+ background-color: #8DB9CA;
+ }
+
+ .banner-film2 {
+ background-image: url('~/assets/images/Health-1@2x.png');
+ background-color: #EFF0F1;
+ }
+
}
@include desktop {
@@ -66,6 +177,15 @@
line-height: 24px;
}
}
+.banner-img-style2 {
+ width:100%;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ display: block;
+ margin: auto;
+}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0