<view class="markList">
<view class="list">
<swiper class="swiper1" :indicator-dots="indicatorDots">
<swiper-item v-for="(item,index) in pbgoodlist" :key="index" class="swiperitem">
<view class="tittle">Hot Recruitment Blank Cities</view>
<view class="item">
<span v-for="(item1,index1) in item.list" :class="index1 <=2 ? 'red' : ''" :key="index1">{<!-- -->{< !-- -->index1 + 1}}.{<!-- -->{<!-- -->item1}}</span>
</view>
</swiper-item>
</swiper>
</view>
</view>
.markList {<!-- -->
margin: 45upx 30upx;
.list {<!-- -->
background: #fff;
border-radius: 16upx;
padding-bottom: 20upx;
.swiper1 {<!-- -->
height: 500upx;
.swiperitem {<!-- -->
.tittle {<!-- -->
padding: 30upx 50upx;
}
.item {<!-- -->
padding: 0 50upx;
display: flex;
flex-flow: column wrap;
align-content: flex-start;
height: 400upx;
align-items: center;
span {<!-- -->
display: inline-flex;
font-size: 30upx;
align-items: center;
width: 50%;
margin-bottom: 30upx;
}
.red {<!-- -->
color: red;
}
}
}
}
}
}
pbgoodlist: [{<!-- -->
list: [
'Ganzhou City, Jiangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province'
]
},
{<!-- -->
list: [
'Ganzhou City, Jiangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province',
'Sanjiang City, Guangxi Province'
]
}
],
indicatorDots: true,
If the data returned by the request is a list type, the structure needs to be processed before rendering:
this.pbgoodlist = res.data.data
var data1 = this.pbgoodlist
var list1 = []
//Display 5 at a time
for (var i = 0, len = data1.length; i < len; i + = 5) {<!-- -->
list1.push(data1.slice(i, i + 5));
}
this.pbgoodlist = []
for (var j = 0; j < list1.length; j + + ) {<!-- -->
this.pbgoodlist.push(list1[j])
}
swiper three rows and three columns:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="//i2.wp.com/unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
html,
body {<!-- -->
position: relative;
height: 100%;
}
body {<!-- -->
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.commomPage{<!-- -->
width: 100%;
height: 700px;
display: flex;
align-items: center;
justify-content: center;
}
.pageLsft{<!-- -->
width: 1320px;
height: 700px;
background: red;
}
.pageRight{<!-- -->
position: relative;
background: #f9e8d6;
width: 600px;
height: 700px;
z-index: 99;
}
.productTittle{<!-- -->
color: #f0831a;
font-size: 25px;
font-weight: bold;
margin-top: 65px;
padding-left: 50px;
}
.productType{<!-- -->
margin-top: 10px;
margin-left: 50px;
margin-bottom: 10px;
}
.swiperA{<!-- -->
width: 1320px;
height: 700px;
box-sizing: border-box;
overflow: hidden;
}
\t\t\t
.swiperA .swiper_img {<!-- -->
width: 1320px;
height: 700px;
}
.swiperA .swiper-wrapper .swiper-slide {<!-- -->
cursor: pointer;
text-align: center;
font-size: 18px;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
\t\t\t
.swiper-container {<!-- -->
--swiper-navigation-color: #ffffff;
--swiper-navigation-size: 20px;
}
.swiper {<!-- -->
width: 320px;
height: 435px;
margin-left: 50px;
margin-right: 130px;
}
.swiper .swiper-wrapper .swiper-slide {<!-- -->
cursor: pointer;
text-align: center;
font-size: 18px;
height: calc((400px - 30px) / 3);
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiperBntContent{<!-- -->
position: absolute;
bottom: 80px;
left: 44px;
width: 100px;
display: flex;
}
\t\t\t
/* .swiper-button-next,
.swiper-button-prev{<!-- -->
background: #746d67;
color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
}
.swiper-button-next:after,
.swiper-button-prev:after{<!-- -->
font-size: 15px;
color: #fff;
} */
\t\t\t
.swiper-button-preva{<!-- -->
background: url('https://file.xxxxx.com/resource/xxxxx/four/img/images/home_btn_back.png') no-repeat center;
background-size: 100% 100%;
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 50%;
margin-right: 20px;
}
\t\t\t
.swiper-button-nexta{<!-- -->
background: url('https://file.xxxxx.com/resource/xxxxx/four/img/images/home_btn_next.png') no-repeat center;
background-size: 100% 100%;
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 50%;
}
.swiper .swiper-slide img{<!-- -->
border-radius: 50%;
width: 80px;
height: 80px;
}
.swiper .swiper-slide span{<!-- -->
position: absolute;
color: #fff;
font-size: 15px;
}
</style>
</head>
<body>
<div class="commomPage">
<div class="pageLsft">
<div class="swiperA">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="swiper_img" src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
</div>
<div class="swiper-slide">
<img class="swiper_img" src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
</div>
</div>
</div>
</div>
\t\t\t
<div class="pageRight">
<div class="productTittle">22 major product series</div>
<div class="productType">Covers custom modules + functions + styles</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
<div class="swiper-slide">
<img src="//i2.wp.com/image.xxxxx.com/20221123/2317255249y0.jpg"/>
<span>River brush pot</span>
</div>
</div>
</div>
<div class="swiperBntContent">
<div class="swiper-button-preva swiper_btn"></div>
<div class="swiper-button-nexta swiper_btn"></div>
</div>
</div>
</div>
</body>
<script>
var swiperA = new Swiper(".swiperA", {<!-- -->
loop: true,
autoplay: {<!-- -->
delay: 3000,
disableOnInteraction: false,
},
observer: true,
observeParents: true,
});
var swiperB = new Swiper(".swiper", {<!-- -->
// loop: true,
slidesPerGroup:3,
slidesPerView: 3,
slidesPerColumn: 3,
slidesPerColumnFill:'row',
direction: 'horizontal',
grid: {<!-- -->
fill: 'row',//column
rows: 3,
},
spaceBetween: 30,
observer: true,
observeParents: true,
navigation: {<!-- -->
nextEl: '.swiper-button-nexta',
prevEl: '.swiper-button-preva',
},
on: {<!-- -->
click:function(){<!-- -->
alert(this.clickedIndex);
}
}
});
</script>
</html>