Commit d7ef8910 by killport80

feat: 增加图片

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