Skip to content

likaiwen / yahabbi-web

Go to a project
Commit d7ef8910 by killport80
Options

feat: 增加图片

1 parent a1c2e43a
Inline Side-by-side
Showing 6 changed files with 43 additions and 42 deletions
src/views/Leadership.vue
...@@ -7,19 +7,11 @@ ...@@ -7,19 +7,11 @@
<div class="leadership-main"> <div class="leadership-main">
<!-- <div class="leadership-title" v-html="$t('leadership.title')"></div> --> <!-- <div class="leadership-title" v-html="$t('leadership.title')"></div> -->
<div class="leadership-title"> <div class="leadership-title">
{{$t('leadership.title1')}} {{ $t('leadership.title1') }}
<span class="highlight">{{$t('leadership.title2')}}</span> <span class="highlight">{{ $t('leadership.title2') }}</span>
</div> </div>
<img <img class="star star-left" src="@/assets/leadership/icon3.png" alt="star" />
class="star star-left" <img class="star star-right" src="@/assets/leadership/icon4.png" alt="star" />
src="@/assets/leadership/icon3.png"
alt="star"
/>
<img
class="star star-right"
src="@/assets/leadership/icon4.png"
alt="star"
/>
<div class="leadership-slider-outer"> <div class="leadership-slider-outer">
<div class="arrow-btn-outer"> <div class="arrow-btn-outer">
<div class="arrow-btn left" @click="slidePrev"> <div class="arrow-btn left" @click="slidePrev">
...@@ -30,15 +22,8 @@ ...@@ -30,15 +22,8 @@
</div> </div>
</div> </div>
<div class="leadership-slider" :key="$i18n.locale"> <div class="leadership-slider" :key="$i18n.locale">
<Swiper <Swiper :modules="modules" :slides-per-view="4" :space-between="71" :navigation="false"
:modules="modules" :loop="leaders.length > 4" class="leader-swiper" @swiper="onSwiper">
:slides-per-view="4"
:space-between="71"
:navigation="false"
:loop="leaders.length > 4"
class="leader-swiper"
@swiper="onSwiper"
>
<SwiperSlide v-for="(leader, idx) in leaders" :key="idx"> <SwiperSlide v-for="(leader, idx) in leaders" :key="idx">
<div class="leader-card"> <div class="leader-card">
<img class="leader-photo" :src="leader.photo" alt="leader" /> <img class="leader-photo" :src="leader.photo" alt="leader" />
...@@ -60,16 +45,8 @@ ...@@ -60,16 +45,8 @@
<div class="team-intro-desc">{{ $t("leadership.team_desc1") }}</div> <div class="team-intro-desc">{{ $t("leadership.team_desc1") }}</div>
<div class="team-intro-desc">{{ $t("leadership.team_desc2") }}</div> <div class="team-intro-desc">{{ $t("leadership.team_desc2") }}</div>
</div> </div>
<img <img class="team-intro-img" src="@/assets/leadership/team.png" alt="team" />
class="team-intro-img" <img src="@/assets/leadership/icon5.png" alt="" class="leadership-icon3" />
src="@/assets/leadership/name_desc.png"
alt="team"
/>
<img
src="@/assets/leadership/icon5.png"
alt=""
class="leadership-icon3"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -80,11 +57,10 @@ import AppHeader from "@/components/AppHeader.vue"; ...@@ -80,11 +57,10 @@ import AppHeader from "@/components/AppHeader.vue";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation } from "swiper/modules"; import { Navigation } from "swiper/modules";
import "swiper/css"; import "swiper/css";
import leader1 from "@/assets/leadership/icon1.png"; import leader1 from "@/assets/leadership/card1.png";
import leader2 from "@/assets/leadership/icon2.png"; import leader2 from "@/assets/leadership/card2.png";
import leader3 from "@/assets/leadership/icon3.png"; import leader3 from "@/assets/leadership/card3.png";
import leader4 from "@/assets/leadership/icon4.png"; import leader4 from "@/assets/leadership/card4.png";
import leader5 from "@/assets/leadership/icon5.png";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t, locale } = useI18n(); const { t, locale } = useI18n();
...@@ -95,7 +71,10 @@ const leaders = [ ...@@ -95,7 +71,10 @@ const leaders = [
{ photo: leader2 }, { photo: leader2 },
{ photo: leader3 }, { photo: leader3 },
{ photo: leader4 }, { photo: leader4 },
{ photo: leader5 }, { photo: leader1 },
{ photo: leader2 },
{ photo: leader3 },
{ photo: leader4 },
]; ];
const swiperRef = ref(null); const swiperRef = ref(null);
const onSwiper = (swiper) => { const onSwiper = (swiper) => {
...@@ -110,11 +89,7 @@ const slideNext = () => { ...@@ -110,11 +89,7 @@ const slideNext = () => {
// Watch for changes in the locale // Watch for changes in the locale
watch(locale, (newLocale) => { watch(locale, (newLocale) => {
console.log("123 locale.value", newLocale);
if (swiperRef.value) { if (swiperRef.value) {
console.log('123 11');
swiperRef.value.update(); // Update the Swiper instance swiperRef.value.update(); // Update the Swiper instance
} }
}); });
...@@ -126,6 +101,7 @@ watch(locale, (newLocale) => { ...@@ -126,6 +101,7 @@ watch(locale, (newLocale) => {
position: relative; position: relative;
padding-bottom: 40px; padding-bottom: 40px;
} }
.leadership-icon1 { .leadership-icon1 {
position: absolute; position: absolute;
left: -698px; left: -698px;
...@@ -143,6 +119,7 @@ watch(locale, (newLocale) => { ...@@ -143,6 +119,7 @@ watch(locale, (newLocale) => {
object-fit: cover; object-fit: cover;
z-index: 0; z-index: 0;
} }
.leadership-icon3 { .leadership-icon3 {
width: 212px; width: 212px;
height: 212px; height: 212px;
...@@ -150,6 +127,7 @@ watch(locale, (newLocale) => { ...@@ -150,6 +127,7 @@ watch(locale, (newLocale) => {
left: 222px; left: 222px;
bottom: -8px; bottom: -8px;
} }
.leadership-icon4 { .leadership-icon4 {
width: 212px; width: 212px;
height: 212px; height: 212px;
...@@ -174,6 +152,7 @@ watch(locale, (newLocale) => { ...@@ -174,6 +152,7 @@ watch(locale, (newLocale) => {
font-size: 52px; font-size: 52px;
color: #ffffff; color: #ffffff;
z-index: 2; z-index: 2;
.highlight { .highlight {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -185,6 +164,7 @@ watch(locale, (newLocale) => { ...@@ -185,6 +164,7 @@ watch(locale, (newLocale) => {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
line-height: 1.1; line-height: 1.1;
padding-bottom: 0; padding-bottom: 0;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -208,6 +188,7 @@ watch(locale, (newLocale) => { ...@@ -208,6 +188,7 @@ watch(locale, (newLocale) => {
width: 61px; width: 61px;
height: 60px; height: 60px;
} }
.star-right { .star-right {
position: absolute; position: absolute;
width: 60px; width: 60px;
...@@ -242,11 +223,13 @@ watch(locale, (newLocale) => { ...@@ -242,11 +223,13 @@ watch(locale, (newLocale) => {
align-items: center; align-items: center;
z-index: 10; z-index: 10;
} }
.rtl .arrow-btn-outer { .rtl .arrow-btn-outer {
right: auto; right: auto;
left: -71px; left: -71px;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.arrow-btn { .arrow-btn {
width: 18px; width: 18px;
height: 26px; height: 26px;
...@@ -257,19 +240,23 @@ watch(locale, (newLocale) => { ...@@ -257,19 +240,23 @@ watch(locale, (newLocale) => {
width: 100%; width: 100%;
max-width: 1400px; max-width: 1400px;
overflow: visible; overflow: visible;
.swiper-wrapper { .swiper-wrapper {
align-items: stretch; align-items: stretch;
overflow: visible; overflow: visible;
} }
.swiper-slide { .swiper-slide {
overflow: visible; overflow: visible;
} }
} }
.leadership-cards { .leadership-cards {
display: flex; display: flex;
gap: 71px; gap: 71px;
overflow: visible; overflow: visible;
} }
.leader-card { .leader-card {
background: #fff1; background: #fff1;
border-radius: 8px; border-radius: 8px;
...@@ -282,16 +269,19 @@ watch(locale, (newLocale) => { ...@@ -282,16 +269,19 @@ watch(locale, (newLocale) => {
position: relative; position: relative;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
.leader-card:hover { .leader-card:hover {
transform: scale(1.07) translateY(-8px); transform: scale(1.07) translateY(-8px);
z-index: 3; z-index: 3;
} }
.leader-photo { .leader-photo {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 8px; border-radius: 8px;
} }
.dot { .dot {
position: absolute; position: absolute;
top: 15px; top: 15px;
...@@ -304,6 +294,7 @@ watch(locale, (newLocale) => { ...@@ -304,6 +294,7 @@ watch(locale, (newLocale) => {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
z-index: 3; z-index: 3;
} }
.leader-info-bar { .leader-info-bar {
position: absolute; position: absolute;
left: -23px; left: -23px;
...@@ -315,6 +306,7 @@ watch(locale, (newLocale) => { ...@@ -315,6 +306,7 @@ watch(locale, (newLocale) => {
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
} }
.leader-name { .leader-name {
margin-bottom: 5px; margin-bottom: 5px;
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
...@@ -322,6 +314,7 @@ watch(locale, (newLocale) => { ...@@ -322,6 +314,7 @@ watch(locale, (newLocale) => {
font-size: 28px; font-size: 28px;
color: #ffffff; color: #ffffff;
} }
.leader-position { .leader-position {
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 600; font-weight: 600;
...@@ -344,9 +337,11 @@ watch(locale, (newLocale) => { ...@@ -344,9 +337,11 @@ watch(locale, (newLocale) => {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.team-intro-desc + .team-intro-desc {
.team-intro-desc+.team-intro-desc {
margin-top: 12px; margin-top: 12px;
} }
.team-intro-text { .team-intro-text {
padding-top: 38px; padding-top: 38px;
display: flex; display: flex;
...@@ -354,6 +349,7 @@ watch(locale, (newLocale) => { ...@@ -354,6 +349,7 @@ watch(locale, (newLocale) => {
justify-content: center; justify-content: center;
height: 100%; height: 100%;
} }
.team-intro-title { .team-intro-title {
margin-bottom: 20px; margin-bottom: 20px;
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
...@@ -361,12 +357,14 @@ watch(locale, (newLocale) => { ...@@ -361,12 +357,14 @@ watch(locale, (newLocale) => {
font-size: 32px; font-size: 32px;
color: #ffffff; color: #ffffff;
} }
.team-intro-desc { .team-intro-desc {
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color: #ffffff; color: #ffffff;
} }
.team-intro-img { .team-intro-img {
flex: 1; flex: 1;
object-fit: cover; object-fit: cover;
...@@ -379,13 +377,16 @@ watch(locale, (newLocale) => { ...@@ -379,13 +377,16 @@ watch(locale, (newLocale) => {
.leadership-main { .leadership-main {
max-width: 98vw; max-width: 98vw;
} }
.leader-swiper { .leader-swiper {
width: 98vw; width: 98vw;
} }
.team-intro-block { .team-intro-block {
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
} }
.team-intro-img { .team-intro-img {
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!