修改关于海威
suixy
1 week ago
parent
2afcf76b85
commit
53b11c0fc2
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>
|
||||||
|
{{ data.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="value">
|
||||||
|
<span>
|
||||||
|
{{ data.value }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "El1",
|
||||||
|
props: ['data'],
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 5vw;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.9vw;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4px;
|
||||||
|
background: #3372FE;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
width: 62vw;
|
||||||
|
margin: 2vw auto 4vw auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1vw;
|
||||||
|
line-height: 2vw;
|
||||||
|
letter-spacing: 0.1vw;
|
||||||
|
color: #000;
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,235 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>
|
||||||
|
{{ data.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<div style="height:35.4vw;">
|
||||||
|
<div class="swiper hero-swiper mySwiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide" v-for="(item,k) in data.list" :key="k">
|
||||||
|
|
||||||
|
<el-image
|
||||||
|
style="width: 100%; height: 100%;"
|
||||||
|
:src="item.img"
|
||||||
|
fit="contain"></el-image>
|
||||||
|
<div class="slide-bg">
|
||||||
|
<div class="slide-title">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
<div class="slide-value">
|
||||||
|
{{ item.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Swiper from 'swiper'
|
||||||
|
|
||||||
|
import {Autoplay, Navigation} from "swiper/modules";
|
||||||
|
|
||||||
|
Swiper.use([
|
||||||
|
Navigation,
|
||||||
|
Autoplay
|
||||||
|
])
|
||||||
|
let swiper = null
|
||||||
|
export default {
|
||||||
|
name: "El1",
|
||||||
|
props: ['data'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.initSwiper()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
initSwiper() {
|
||||||
|
if (swiper) {
|
||||||
|
swiper.destroy(true, true);
|
||||||
|
swiper = null;
|
||||||
|
}
|
||||||
|
swiper = new Swiper(".mySwiper", {
|
||||||
|
loop: this.data.list.length > 2,
|
||||||
|
centeredSlides: true,
|
||||||
|
slidesPerView: "auto",
|
||||||
|
spaceBetween: -24,
|
||||||
|
speed: 450,
|
||||||
|
grabCursor: true,
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
clickable: true,
|
||||||
|
renderBullet: function (index, className) {
|
||||||
|
console.log(123)
|
||||||
|
return '<span class="' + className + '">' + (index + 1) + "</span>";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.hero-swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 22vw;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 2vw;
|
||||||
|
|
||||||
|
.swiper-button-next {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 5vw;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-prev {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 5vw;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2vw;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #8b93a1;
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-pagination-bullet-active {
|
||||||
|
width: 22px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #14181f;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hero-swiper .swiper-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide {
|
||||||
|
width: 60vw;
|
||||||
|
height: 21.25vw;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: scale(0.6);
|
||||||
|
transition: transform 300ms ease, opacity 300ms ease;
|
||||||
|
opacity: 0.55;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.slide-bg {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 8vw;
|
||||||
|
background-color: #0002;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
.slide-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 1vw;
|
||||||
|
left: 2vw;
|
||||||
|
font-size: 1.6vw;
|
||||||
|
line-height: 2vw;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-value {
|
||||||
|
position: absolute;
|
||||||
|
text-align: left;
|
||||||
|
top: 3.2vw;
|
||||||
|
left: 2vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
font-weight: 600;
|
||||||
|
width: calc(100% - 4vw);
|
||||||
|
color: #fff;
|
||||||
|
text-indent: 2em;
|
||||||
|
height: 4vw;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 2vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide-active {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.slide-bg {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 18px 48px rgba(20, 24, 31, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.hero-swiper {
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide {
|
||||||
|
width: 76vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 5vw;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.9vw;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4px;
|
||||||
|
background: #3372FE;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>
|
||||||
|
{{ data.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="item" @click="toLink(i)" v-for=" (i,k) in data.list">
|
||||||
|
<div class="img1">
|
||||||
|
<div class="img">
|
||||||
|
<el-image
|
||||||
|
style="width: 100%; height: 100%;"
|
||||||
|
:src="i.img"
|
||||||
|
fit="contain"></el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title1">{{ i.title }}</div>
|
||||||
|
<i class="el-icon-right icon"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "El1",
|
||||||
|
props: ['data'],
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
toLink(e) {
|
||||||
|
if (e.toLink[0] && e.toLink[1] && e.toLink[2]) {
|
||||||
|
this.$router.push(`/productCenter/detail?type=${e.toLink[0]}&typeId=${e.toLink[1]}&id=${e.toLink[2]}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 5vw;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.9vw;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4px;
|
||||||
|
background: #3372FE;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.list {
|
||||||
|
width: 62vw;
|
||||||
|
margin: 3vw auto 0;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-right: 3vw;
|
||||||
|
width: calc(50% - 3vw);
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 1.4vw;
|
||||||
|
vertical-align: top;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
.img1 {
|
||||||
|
.img {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img1 {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: calc((90vw * 0.33 - 3vw) * 1080 / 1920);
|
||||||
|
|
||||||
|
.img {
|
||||||
|
transition: all .5s;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
margin-top: 1vw;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
padding-left: 2vw;
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 1.3vw;
|
||||||
|
position: absolute;
|
||||||
|
right: 2vw;
|
||||||
|
bottom: 1vw;
|
||||||
|
transform: translateY(50%);
|
||||||
|
transition: all .5s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
margin-right: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue