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 | 81 ++++++++++++++++++++++++++++++++++++++-- 1 files changed, 76 insertions(+), 5 deletions(-) diff --git a/PAMapp/components/Ui/UiCarousel.vue b/PAMapp/components/Ui/UiCarousel.vue index 5bf0867..d9fb7db 100644 --- a/PAMapp/components/Ui/UiCarousel.vue +++ b/PAMapp/components/Ui/UiCarousel.vue @@ -4,8 +4,14 @@ indicator-position="outside" arrow="never" trigger="click" + interval="6000" class="pam-home-carousel" > + + <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> @@ -15,7 +21,7 @@ </div> </el-carousel-item> - <el-carousel-item class="banner-img-style banner2-img"> + <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> @@ -23,9 +29,49 @@ <p class="banner-txt text--PRIMARY_WHITE">慦���“��蜓��蝜�</p> </div> </el-carousel-item> - - <el-carousel-item class="banner-img-style2 banner3-img"> + </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> @@ -33,9 +79,16 @@ <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> @@ -69,6 +122,15 @@ 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 { @extend .title; @@ -82,7 +144,7 @@ @media (min-width: 576px) { .banner1-img { - background-image: url('~/assets/images/index_banner_web.svg'); + background-image: url('~/assets/images/index_banner_web.svg'); } .banner2-img { @@ -91,8 +153,17 @@ .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 { -- Gitblit v1.8.0