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.
61 lines
1.6 KiB
61 lines
1.6 KiB
<template>
|
|
<el-carousel height="" :interval="5000" arrow="always">
|
|
<el-carousel-item style="height:100%" v-for="item in 4" :key="item">
|
|
<h3>{{ item }}</h3>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
|
|
windowHeight: document.documentElement.clientHeight, //实时屏幕高度
|
|
}
|
|
},
|
|
// <!--在watch中监听实时宽高-->
|
|
// watch: {
|
|
// windowHeight (val) {
|
|
// let that = this;
|
|
// console.log("实时屏幕高度：",val, that.windowHeight );
|
|
// },
|
|
// windowWidth (val) {
|
|
// let that = this;
|
|
// console.log("实时屏幕宽度：",val, that.windowHeight );
|
|
// }
|
|
// },
|
|
created(){
|
|
console.log(document.documentElement.clientHeight)
|
|
},
|
|
mounted() {
|
|
var that = this;
|
|
// <!--把window.onresize事件挂在到mounted函数上-->
|
|
window.onresize = () => {
|
|
return (() => {
|
|
window.fullHeight = document.documentElement.clientHeight;
|
|
window.fullWidth = document.documentElement.clientWidth;
|
|
that.windowHeight = window.fullHeight; // 高
|
|
that.windowWidth = window.fullWidth; // 宽
|
|
})()
|
|
};
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.el-carousel__item h3 {
|
|
color: #475669;
|
|
font-size: 18px;
|
|
opacity: 0.75;
|
|
line-height: 300px;
|
|
margin: 0;
|
|
}
|
|
|
|
.el-carousel__item:nth-child(2n) {
|
|
background-color: #99a9bf;
|
|
}
|
|
|
|
.el-carousel__item:nth-child(2n+1) {
|
|
background-color: #d3dce6;
|
|
}
|
|
</style>
|