You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

79 lines
1.3 KiB

<template>
<div class="head">
<img class="settle-in" src="~assets/settleIn.png" />
<a-carousel :autoplay-speed="time" autoplay>
<div :key="item.id" class="img-box" v-for="item in lists">
<img :src="item.url" alt />
</div>
</a-carousel>
</div>
</template>
<script>
import { queryRotation } from 'config/api';
export default {
data() {
return {
time: 3000,
lists: [],
};
},
created() {
this.getData();
},
methods: {
async getData() {
try {
const params = { param: { showPage: 0 } };
const res = await queryRotation(params);
const { code, data, msg } = res.data;
if (code === 200) {
this.lists = data;
} else {
this.$message.error(error);
}
} catch (error) {
this.$message.error(error);
}
},
},
};
</script>
<style lang="stylus">
.head {
background: white;
max-height: 340px;
overflow: hidden;
position: relative;
}
.settle-in {
position: absolute;
top: 3%;
right: 10%;
z-index: 9;
}
.img-box {
height: 340px;
width: 100%;
img {
height: 100%;
width: 100%;
}
}
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>