123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- <script setup>
- const { t, locale, setLocale } = useI18n()
- const { $$t } = useStoreI18n()
- const dataList = ref([
- {
- bg: '',
- abg: '',
- id: 'teacher0',
- wowDelay: '0.3s',
- img: '/picture/01.jpg',
- name: $$t('ariaLan'),
- tType: $$t('englishTeacher'),
- tType: $$t('chineseTeacher'),
- introduce: $$t('ariaLanIntroduce')
- },
- {
- bg: 'bg-2',
- abg: 'style-2',
- id: 'teacher1',
- wowDelay: '0.5s',
- img: '/picture/02.jpg',
- name: $$t('wendyChen'),
- tType: $$t('chineseTeacher'),
- subSchool: '',
- introduce: $$t('wendyChenIntroduce')
- },
- {
- bg: 'bg-3',
- abg: 'style-3',
- id: 'teacher2',
- wowDelay: '0.7s',
- img: '/picture/03.jpg',
- name: $$t('aspenChou'),
- tType: $$t('chineseTeacher'),
- subSchool: '',
- introduce: $$t('aspenChouIntroduce')
- },
- {
- bg: 'bg-3',
- abg: 'style-3',
- id: 'teacher3',
- wowDelay: '0.7s',
- img: '/picture/04.jpg',
- name: $$t('oliviaHuang'),
- tType: $$t('englishTeacher'),
- subSchool: '',
- introduce: $$t('oliviaHuangIntroduce')
- }
- ])
- </script>
- <style lang="css" scoped>
- .multi-line {
- overflow: hidden;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- }
- .h-color {
- color: white;
- }
- .clamp-1 {
- -webkit-line-clamp: 1;
- }
- .clamp-2 {
- -webkit-line-clamp: 2;
- }
- .clamp-3 {
- -webkit-line-clamp: 3;
- }
- .left-social-profile {
- position: absolute;
- left: 20px;
- top: 20px;
- z-index: 20;
- width: 40px;
- height: 40px;
- border: 1px solid white;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
- .left-social-profile div {
- width: 24px;
- height: 24px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
- .left-social-profile div img {
- object-fit: cover;
- cursor: pointer;
- }
- .introduce {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- z-index: 20;
- box-sizing: border-box;
- padding: 1rem 1.25rem;
- overflow-y: auto;
- color: white;
- background: rgba(0, 0, 0, 0.4);
- border-radius: 12px;
- -ms-overflow-style: none; /* IE 和 Edge */
- scrollbar-width: none;
- transition: all 0.1s ease-in-out;
- display: none;
- cursor: pointer;
- }
- .introduce::-webkit-scrollbar {
- width: 0px; /* Chrome, Safari 和 Opera */
- }
- .team-image:hover > .introduce {
- display: block;
- }
- .introduce:hover {
- display: block;
- }
- .bgCover {
- width: 100%;
- height: auto;
- object-fit: contain;
- }
- </style>
- <template>
- <section class="team-section fix section-bg section-padding">
- <div class="top-shape">
- <img class="bgCover" src="/picture/section-top-shape.svg" alt="shape-img" />
- </div>
- <div class="love-shape float-bob-x"><img src="/picture/love.png" alt="shape-img" /></div>
- <div class="frame-shape"><img src="/picture/frame.png" alt="shape-img" /></div>
- <div class="container">
- <div class="section-title-area">
- <div class="section-title mt-60">
- <span class="wow fadeInUp">{{ t('ourExperts') }}</span>
- <h2 class="wow fadeInUp" data-wow-delay=".3s">{{ t('ourExpertInstructors') }}</h2>
- </div>
- </div>
- <div class="row">
- <template v-for="(item, index) in dataList" :key="item?.id">
- <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" :data-wow-delay="item?.wowDelay">
- <div class="swiper-slide">
- <div class="team-items">
- <div style="overflow: hidden" class="team-image">
- <div class="shape-img">
- <img src="/picture/team-shape.png" alt="img" />
- </div>
- <img :src="item?.img" alt="team-img" />
- <div class="introduce">
- <p class="fs-5 text-white text-center pb-2">{{ item?.name }}</p>
- <p v-html="item?.introduce"></p>
- </div>
- </div>
- <div class="team-content">
- <h3>
- <a href="team-details.html">{{ item?.name }}</a>
- </h3>
- <p>{{ item?.tType }}</p>
- </div>
- </div>
- </div>
- </div>
- </template>
- </div>
- </div>
- </section>
- </template>
|