<template>
<div class="container">
<van-search
placeholder="大家正在搜：附近经济型酒店"
show-action
background="#00aa00"
input-align="center"
@search="onSearch">
<van-icon name="comment-o" slot="action" size="1rem" @click="onClickRight"/>
</van-search>
<van-swipe :autoplay="2000" indicator-color="White">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img :src="image" />
</van-swipe-item>
</van-swipe>
<van-swipe indicator-color="rgba(0,0,0,0)" :loop="false" class="icon">
<van-swipe-item>
<van-row>
<van-col span="6">
<img src="../assets/images/c.png">
</van-col> <van-col span="6">
<img src="../assets/images/c.png">
</van-col> <van-col span="6">
<img src="../assets/images/c.png">
</van-col> <van-col span="6">
<img src="../assets/images/c.png">
</van-col>
</van-row>
</van-swipe-item>
<van-swipe-item>
<van-row>
<van-col span="6">
<img src="../assets/images/c.png">
</van-col> <van-col span="6">
<img src="../assets/images/c.png">
</van-col> <van-col span="6">
<img src="../assets/images/c.png">
</van-col> <van-col span="6">
<img src="../assets/images/c.png">
</van-col>
</van-row>
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
images: [
require('../assets/images/1.jpg'),
require('../assets/images/1.jpg'),
require('../assets/images/1.jpg'),
require('../assets/images/1.jpg')
]
}
},
methods:{
onSearch(){
console.log(1)
},
onClickRight() {
window.open("http://www.baidu.com/", "_self");
},
}
}
</script>
<style scoped>
.container >>> .van-icon{
font-size:0.8rem;
color:rgb(0,0,0);
vertical-align:middle;
}
.container >>> .van-field__control,van-field__control--center{
font-size:0.6rem;
color:rgb(0,0,0);
}
.container >>> .van-nav-bar__title{
font-size:0.8rem;
color:rgb(0,0,0);
}
.container >>> .van-search__action{
background-color:rgba(0,0,0,0);
}
img{
width:100%;
height:100%;
}
.icon img{
width:50%;
display:flex;
margin:0 auto ;
}
</style>
