Effect:
The entire code only needs to be related to canvas.
<template>
<div>
<swiper
:navigation="navigation"
:loop="true"
:pagination="pagination"
:modules="modules"
class="mySwiper"
:autoplay="{
autoplay: true,
delay: 4000,
disableOnInteraction:false
}"
>
<canvas id="demo-canvas" width="1920" height="680"></canvas>
<swiper-slide class="banner2">
<el-image class="bannerBox" :src="Banner2" fit="cover"> </el-image>
<div class="banner2Text">
<div class="mainTitle">硅基半导体材料行业数字化转型促进中心</div>
<div class="title">产学研用相结合的协同研发平台</div>
</div></swiper-slide>
<swiper-slide class="banner1"
><el-image class="bannerBox" :src="Banner" fit="cover"></el-image>
<div class="banner1Text">推动行业实现数字化转型</div></swiper-slide>
<div class="swiper-button-prev rot" slot="button-prev">
<img :src="rowLeft" />
</div>
<div class="swiper-button-next rat" slot="button-next">
<img class="rowRight" :src="rowLeft" />
</div>
</swiper>
<div class="aboutBox">
<div class="aboutEnglish">ABOUT INTRODUCTION</div>
<div class="aboutChain">
<div class="aboutLine"></div>
<div class="aboutChainName">中心介绍</div>
<div class="aboutLine"></div>
</div>
<div class="aboutDetailBox">
<div class="aboutDetail">
<div class="aboutDetailLeft">
<div class="aboutDetailNameEng">CENTER PROFILE</div>
<div class="aboutDetailNameEng">中心简介</div>
<div class="aboutDetailContent">{
{ aboutContent }}</div>
</div>
<img class="aboutDetailRight" src="@/assets/image/aboutImg.png" alt />
</div>
<div class="aboutIntroducte">
<div class="aboutIntroducteLeft">
<div>
<div class="aboutIntroducteChain">想了解更多中心介绍?</div>
<div class="aboutIntroducteEng">Want to learn more about the Center?</div>
</div>
<div class="aboutIntroducteIcon" @click="goAboutDetail">
<el-icon>
<ArrowRight />
</el-icon>
</div>
</div>
<div class="aboutIcon">
<el-icon>
<OfficeBuilding />
</el-icon>
<div>中心简介</div>
</div>
<div class="aboutIcon">
<el-icon>
<User />
</el-icon>
<div>中心领导</div>
</div>
<div class="aboutIcon">
<el-icon>
<Notebook />
</el-icon>
<div>组织架构</div>
</div>
</div>
</div>
</div>
<div class="newsBox">
<div class="aboutEnglish">NEWS CENTER</div>
<div class="aboutChain">
<div class="aboutLine"></div>
<div class="aboutChainName">新闻中心</div>
<div class="aboutLine"></div>
</div>
<div class="newsTypeList">
<div
:class="[
'newsType',
'mouseStyle',
selectedNewsType == item.id ? 'newsTypeActive' : '',
]"
v-for="item in newsTypeList"
:key="item.id"
@click="changeNewsType(item)"
>{
{ item.name }}</div>
</div>
<div class="newsContent">
<div class="newsContentLeft">
<div class="newsContentBox">
<img v-if="selectedNewsType == 0" src="@/assets/image/develop_news.png" alt />
<img v-if="selectedNewsType == 1" src="@/assets/image/achivement_news.png" alt />
<img v-if="selectedNewsType == 2" src="@/assets/image/industrial_news.png" alt />
<img v-if="selectedNewsType == 3" src="@/assets/image/trainning_news.png" alt />
</div>
<div
class="newsList"
v-show="index == 0"
v-for="(item, index) in newsList"
:key="item.id"
>
<div class="newsListItem" @click="newDetailEvent(item)">
<div class="newsListItemTitle">{
{ item.title }}</div>
<div class="newsListItemContent">{
{ item.summary }}</div>
<div class="newsListItemOption">
<div class="newsListItemTime">{
{ moment(item.createTime).format("YYYY.MM.DD") }}</div>
<div class="newsListItemEvent">
MORE
<el-icon>
<Right />
</el-icon>
</div>
</div>
</div>
</div>
</div>
<div class="newsContentRight">
<div
class="newsList"
v-show="index > 0 && index < 4"
v-for="(item, index) in newsList"
:key="item.id"
>
<div class="newsListItem" @click="newDetailEvent(item)">
<div class="newsListItemTitle">{
{ item.title }}</div>
<div class="newsListItemContent">{
{ item.summary }}</div>
<div class="newsListItemOption">
<div class="newsListItemTime">{
{ moment(item.createTime).format("YYYY.MM.DD") }}</div>
<div class="newsListItemEvent">
MORE
<el-icon>
<Right />
</el-icon>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contactBox">
<div class="aboutEnglish">CONTACT US</div>
<div class="aboutChain">
<div class="aboutLine"></div>
<div class="aboutChainName">联系我们</div>
<div class="aboutLine"></div>
</div>
<div class="contactBgcBox">
<div class="contactContent">
<div class="contactFormBox">
<el-form ref="formRef" :model="form" label-width="100px" class="demo-ruleForm">
<el-form-item
prop="name"
:rules="[
{
required: true,
message: '请填写姓名/公司名称',
trigger: ['blur', 'change'],
},
{
max: 20,
message: '输入字符不能超过20',
trigger: ['blur', 'change'],
},
]"
>
<el-input v-model="form.name" placeholder="姓名/公司名称" />
</el-form-item>
<el-form-item
prop="phone"
:rules="[
{
required: true,
message: '请填写联系电话',
trigger: ['blur', 'change'],
},
{ validator: checkPhone, trigger: ['blur', 'change'] },
]"
>
<el-input v-model="form.phone" placeholder="联系电话" />
</el-form-item>
<el-form-item
prop="message"
:rules="[
{
required: true,
message: '请填写备注留言',
trigger: ['blur', 'change'],
},
{
max: 255,
message: '输入字符不能超过255',
trigger: ['blur', 'change'],
},
]"
>
<el-input
type="textarea"
class="formTextarea"
v-model="form.message"
placeholder="备注留言"
/>
</el-form-item>
<el-form-item class="formBtnBox">
<el-button class="formBtn" type="primary" @click="submitForm(formRef)">提交留言</el-button>
</el-form-item>
</el-form>
</div>
<div class="contactMapBox">
<div class="contactMap">
<a target="_blank" :href="defaultconfig.map">
<img src="@/assets/image/contactImg.jpg" alt />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, unref } from "vue";
import { getNews, getAboutus, addConsultMessage } from "@/api/home";
import { useRouter } from "vue-router";
import Banner from "@/assets/image/bannerBgc.png";
import Banner2 from "@/assets/image/bannerBgc2.png";
import rowLeft from "@/assets/image/rowleft.png";
import { defaultconfig } from "@/utils/defaultconfig";
import type { ElMessage, FormInstance } from "element-plus";
import moment from "moment";
import TweenLite from "gsap";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination, Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { useOidcStore } from "@/stores/index";
const { state } = useOidcStore();
const userdata = ref({});
const modules = [Navigation, Pagination, Autoplay];
const pagination = {
clickable: true,
type: "custom",
renderCustom: function (swiper, current, total) {
var paginationHtml = "";
for (var i = 0; i < total; i++) {
// 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
if (i === current - 1) {
paginationHtml +=
'<span class="swiper-pagination-customs swiper-pagination-customs-activ"><span class="activ-hover" ref="target"></span></span>';
} else {
paginationHtml += '<span class="swiper-pagination-customs"></span>';
}
}
return paginationHtml;
},
};
const navigation = {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
};
const router = useRouter();
let newsTypeList = ref([
{
name: "研发服务",
id: 0,
},
{
name: "成果转化",
id: 1,
},
{
name: "产业升级",
id: 2,
},
{
name: "人才交流",
id: 3,
},
]);
let newsList = ref([]);
let aboutContent = ref("");
onMounted(async () => {
userdata.value = await unref(state).userManager?.getUser();
getNewsList();
getAboutusInfo();
(function () {
var width,
height,
largeHeader,
canvas,
ctx,
points,
target,
animateHeader = true;
initHeader();
initAnimation();
addListeners();
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {
x: width / 2,
y: height / 2,
};
// largeHeader = document.getElementById('large-header');
// largeHeader.style.height = height + 'px';
canvas = document.getElementById("demo-canvas");
// canvas.width = width;
// canvas.height = height;
ctx = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.fillStyle = "green";
points = [];
for (var x = 0; x < width; x = x + width / 20) {
for (var y = 0; y < height; y = y + height / 20) {
var px = x + (Math.random() * width) / 20;
var py = y + (Math.random() * height) / 20;
var p = {
x: px,
originX: px,
y: py,
originY: py,
};
points.push(p);
}
}
for (var i = 0; i < points.length; i++) {
var closest = [];
var p1 = points[i];
for (var j = 0; j < points.length; j++) {
var p2 = points[j];
if (!(p1 == p2)) {
var placed = false;
for (var k = 0; k < 5; k++) {
if (!placed) {
if (closest[k] == undefined) {
closest[k] = p2;
placed = true;
}
}
}
for (var k = 0; k < 5; k++) {
if (!placed) {
if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2;
placed = true;
}
}
}
}
}
p1.closest = closest;
}
for (var i in points) {
var c = new Circle(
points[i],
2 + Math.random() * 2,
"rgba(255,255,255,0.3)"
);
points[i].circle = c;
}
}
function addListeners() {
if (!("ontouchstart" in window)) {
window.addEventListener("mousemove", mouseMove);
}
// window.addEventListener('scroll', scrollCheck);
// window.addEventListener('resize', resize);
}
function mouseMove(e) {
var posx = 0;
var posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx =
e.clientX +
document.body.scrollLeft +
document.documentElement.scrollLeft;
posy =
e.clientY +
document.body.scrollTop +
document.documentElement.scrollTop;
}
target.x = posx;
target.y = posy;
}
function scrollCheck() {
if (document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height + "px";
canvas.width = width;
canvas.height = height;
}
function initAnimation() {
animate();
for (var i in points) {
shiftPoint(points[i]);
}
}
function animate() {
if (animateHeader) {
ctx.clearRect(0, 0, width, height);
for (var i in points) {
if (Math.abs(getDistance(target, points[i])) < 4000) {
points[i].active = 0.3;
points[i].circle.active = 0.6;
} else if (Math.abs(getDistance(target, points[i])) < 20000) {
points[i].active = 0.1;
points[i].circle.active = 0.3;
} else if (Math.abs(getDistance(target, points[i])) < 40000) {
points[i].active = 0.02;
points[i].circle.active = 0.1;
} else {
points[i].active = 0;
points[i].circle.active = 0;
}
drawLines(points[i]);
points[i].circle.draw();
}
}
requestAnimationFrame(animate);
}
function shiftPoint(p) {
TweenLite.to(p, 1 + 1 * Math.random(), {
x: p.originX - 50 + Math.random() * 100,
y: p.originY - 50 + Math.random() * 100,
ease: Circ.easeInOut,
onComplete: function () {
shiftPoint(p);
},
});
}
function drawLines(p) {
if (!p.active) return;
for (var i in p.closest) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.closest[i].x, p.closest[i].y);
ctx.strokeStyle = "rgba(156,217,249," + p.active + ")";
ctx.stroke();
}
}
function Circle(pos, rad, color) {
var _this = this;
(function () {
_this.pos = pos || null;
_this.radius = rad || null;
_this.color = color || null;
})();
this.draw = function () {
if (!_this.active) return;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgba(156,217,249," + _this.active + ")";
ctx.fill();
};
}
function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}
})();
});
let selectedNewsType = ref(0);
const changeNewsType = (value: any) => {
selectedNewsType.value = value.id;
getNewsList();
};
function getNewsList() {
let api = "";
let url = "";
if (selectedNewsType.value == 0) {
api = defaultconfig.api.developServiceApi;
url = "/api/News/page";
} else if (selectedNewsType.value == 1) {
api = defaultconfig.api.promotionCenterApi;
url = "/api/NewsInfo/page";
} else if (selectedNewsType.value == 2) {
api = defaultconfig.api.industrialCenterApi;
url = "/api/NewsInfo/page";
} else if (selectedNewsType.value == 3) {
api = defaultconfig.api.trainningCenterApi;
url = "/api/NewsInfo/page";
}
getNews(api, url).then((res) => {
newsList.value = res.data.currentPageDatas;
});
}
function newDetailEvent(value) {
// 0：研发，1：成果，2：产业，3：人才
if (selectedNewsType.value == 0) {
window.open(
defaultconfig.developmentServicesWeb + "/news/details?id=" + value.id
);
} else if (selectedNewsType.value == 1) {
window.open(
defaultconfig.resultConvertWeb + "/news/details?id=" + value.id
);
} else if (selectedNewsType.value == 2) {
window.open(
defaultconfig.IndustrialCenterWeb + "/news/details?id=" + value.id
);
} else {
window.open(
defaultconfig.trainingCenterWeb + "/news/details?id=" + value.id
);
}
}
// 手机号校验
const checkPhone = (rule: any, value: any, callback: any) => {
const phoneRules = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
const phoneReg = /^((0\d{2,3})-)?(\d{7,8})$/;
if (!(phoneRules.test(value) || phoneReg.test(value))) {
return callback(
new Error("请输入正确的手机号码或者固话号码（固话格式：区号-号码）")
);
}
callback();
};
const formRef = ref<FormInstance>();
const form = reactive<{
name: string;
phone: string;
message: string;
}>({
name: "",
phone: "",
message: "",
});
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formRef.value!.validate((valid) => {
if (valid) {
addConsultMessage({ ...form })
.then((res) => {
if (res.success) {
ElMessage({
type: "success",
message: "提交留言成功",
});
formRef.value!.resetFields();
}
})
.catch((err) => {
console.log(err);
});
}
});
};
function getAboutusInfo() {
getAboutus().then((res) => {
aboutContent.value = res.data[0].context;
});
}
function goAboutDetail() {
router.push({
path: "/about",
});
}
</script>
<style lang="less" scoped>
@media screen and (max-width: 1200px) {
.swiper-slide-active .banner2Text {
top: -190px !important;
}
}
@media screen and (max-width: 1380px) {
:deep(.swiper){
.rot,
.rat {
display: none !important;
}
}
}
.swiper {
width: 100%;
min-width: 1000px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#demo-canvas {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
// height: 300px;
height: 100%;
z-index: 2;
}
.bannerBox {
height: 674px;
width: 100%;
min-width: 1000px;
}
.aboutBox {
// margin-top: 40px;
padding-top: 70px;
.aboutDetailBox {
max-width: 1200px;
min-width: 1000px;
margin: 62px auto 74px;
.aboutDetail {
display: flex;
justify-content: space-between;
position: relative;
.aboutDetailLeft {
width: 49%;
height: 440px;
.aboutDetailNameEng {
font-size: 26px;
color: #0762cb;
}
.aboutDetailContent {
word-break: break-all;
height: 315px;
overflow-y: auto;
// text-indent: 2em;
font-size: 16px;
line-height: 36px;
color: #333333;
margin-top: 22px;
}
}
.aboutDetailRight {
position: absolute;
width: 49%;
height: 440px;
right: 0px;
// bottom: ;
// margin-right: -14px;
// margin-left: 14px;
}
}
.aboutIntroducte {
display: flex;
justify-content: space-between;
max-width: 1200px;
min-width: 1000px;
height: 125px;
background-color: #0762cb;
// margin-top: 10px;
padding-left: 84px;
padding-right: 120px;
color: #fff;
.aboutIntroducteLeft {
display: flex;
height: 48px;
margin: auto 0;
.aboutIntroducteChain {
font-size: 17px;
line-height: 28px;
}
.aboutIntroducteEng {
font-size: 16px;
opacity: 0.8;
}
.aboutIntroducteIcon {
width: 38px;
height: 38px;
border-radius: 50%;
border: solid 1px #fff;
margin: auto 0 auto 40px;
margin-left: 60px;
cursor: pointer;
.el-icon {
font-size: 20px;
margin-left: 9px;
margin-top: 8px;
}
}
.aboutIntroducteIcon:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
.aboutIcon {
height: 48px;
margin: auto 0;
text-align: center;
.el-icon {
font-size: 24px;
}
}
}
}
}
.aboutEnglish {
// width: 250px;
text-align: center;
font-size: 33px;
font-weight: 600;
color: #b1b7bf;
margin: 0 auto;
// padding-top: 20px;
}
.aboutChain {
text-align: center;
margin: 0 auto;
font-size: 28px;
color: #262626;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.aboutLine {
font-style: normal;
width: 20px;
height: 1px;
background-color: #e0e0e0;
}
.aboutChainName {
margin: 0 15px;
font-weight: 600;
}
}
.newsBox {
padding-top: 70px;
background-color: #f6f7f9;
padding-bottom: 40px;
min-width: 1000px;
.newsTypeList {
display: flex;
width: 700px;
margin: 36px auto;
justify-content: space-between;
.newsType {
width: 120px;
text-align: center;
color: #666;
// background-color: #0762cb;
border: solid 1px #b1b7bf;
border-radius: 25px;
height: 40px;
line-height: 40px;
}
.newsTypeActive {
color: #fff;
background-color: #0762cb;
border: solid 1px #0762cb;
}
}
.newsContent {
display: flex;
max-width: 1200px;
min-width: 1000px;
margin: 26px auto;
justify-content: space-between;
.newsContentLeft {
width: 49%;
.newsContentBox {
width: 98%;
height: 324px;
background-color: #ffffff;
margin-bottom: 20px;
img {
width: 554px;
height: 302px;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
}
}
.newsContentRight {
width: 49%;
}
.newsList {
width: 98%;
background-color: #fff;
margin-bottom: 20px;
height: 152px;
.newsListItem {
position: relative;
display: inline-block;
padding: 0 32px;
width: 100%;
.newsListItemTitle {
font-size: 16px;
// letter-spacing: -1px;
color: #262626;
padding-top: 18px;
padding-bottom: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.newsListItemContent {
font-size: 14px;
color: #666;
margin-bottom: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.newsListItemOption {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
.newsListItemTime,
.newsListItemEvent {
font-size: 15px;
color: #b1b7bf;
.el-icon {
svg {
padding-top: 2px;
}
}
}
}
}
}
}
}
.newsList::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 2px;
background: #0762cb;
}
.newsList:hover::before {
left: 0;
transition: all 1s;
width: 100%;
}
.newsListItem:hover {
.newsListItemTitle {
color: #0762cb !important;
}
.newsListItemEvent {
color: #0762cb !important;
}
}
.contactBox {
padding-top: 70px;
.contactBgcBox {
background-image: url("@/assets/image/contactBgc.png");
padding-top: 120px;
padding-bottom: 130px;
background-size: contain;
min-width: 1000px;
.contactContent {
display: flex;
max-width: 1200px;
min-width: 1000px;
margin: 0 auto;
justify-content: space-between;
.contactFormBox {
width: 32%;
:deep(.el-form-item__content) {
margin-left: 0px !important;
width: 100%;
.el-input {
height: 42px;
}
.formTextarea {
z-index: 99;
.el-textarea__inner {
height: 162px;
border-color: #0762cb !important;
}
}
.formBtn {
margin-top: 30px;
width: 100%;
height: 43px;
background-color: #0762cb;
}
}
}
.contactMapBox {
width: 62%;
border: solid 1px #5c9ee9;
height: 376px;
// opacity: 0.74;
.contactMap {
margin: auto;
// display: inline-block;
overflow: hidden;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
margin-top: 1%;
height: 96%;
width: 98%;
img {
width: 100%;
height: 100%;
transition: all 0.25s;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
}
}
.contactMapBox:hover {
img {
transform: scale(1.05);
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
}
}
}
:deep(.is-focus) {
box-shadow: 0 0 0 1px #0762cb;
}
:deep(.el-textarea) {
--el-input-focus-border-color: #0762cb;
}
}
.banner1 {
position: relative;
.banner1Text {
position: absolute;
top: 38%;
left: 10.8%;
color: #fff;
font-weight: 550;
font-size: 64px;
letter-spacing: 2px;
}
}
.banner2 {
position: relative;
.banner2Text {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
// @keyframes example {
// 0% {
// transform: translate(0%, 220%);
// }
// 100% {
// transform: translate(0%, 185%);
// }
// }
@keyframes cool {
0% {
opacity: 0.3;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
.swiper-slide-active {
position: relative;
.banner2Text {
display: block !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translate(0%, 185%);
text-align: center;
.mainTitle {
color: #fff;
font-weight: 550;
font-size: 64px;
letter-spacing: 2px;
animation: cool 1s;
}
.title {
color: #fff;
font-weight: 550;
font-size: 32px;
letter-spacing: 2px;
animation: cool 2s;
}
button {
width: 120px;
font-size: 18px;
color: #fff;
margin-top: 40px;
background-color: rgba(255, 255, 255, 0.2);
}
}
}
:deep(.swiper) {
--swiper-navigation-size: 0;
.rot,
.rat {
opacity: 0;
}
.rot:hover,
.rat:hover {
opacity: 1;
}
@keyframes widthCHange {
0% {
width: 0;
}
100% {
width: 55px;
}
}
.swiper-pagination-customs {
display: inline-block;
margin: 0;
width: 54px;
height: 3px;
background-color: #ddd !important;
cursor: pointer;
position: relative;
margin-left: 8px;
}
.swiper-pagination-customs-activ .activ-hover {
display: inline-block;
margin: 0;
width: 0px;
height: 4px;
cursor: pointer;
position: absolute;
left: 0;
transition: all 4s;
background-color: #0071ef !important;
margin-top: -1px;
animation-name: widthCHange;
animation-duration: 4s;
// overflow: hidden;
}
.swiper-button-next {
right: 0px !important;
width: 15%;
height: 100%;
top: 0;
}
.swiper-button-prev {
left: 0px !important;
width: 15%;
height: 100%;
top: 0;
}
}
:deep(.swiper-slide:nth-child(2n)) {
background: none !important;
}
.rowRight {
transform: rotateY(180deg);
}
</style>