修改关于海威
suixy
6 days 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