222 lines
4.5 KiB
Vue
222 lines
4.5 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<view class="upper-search" @click="toggleIpt">
|
|
<span>点击搜索</span>
|
|
<uni-icons type="search" size="20"></uni-icons>
|
|
</view>
|
|
<view class="swiper-area">
|
|
<swiper style="overflow: hidden;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#fff" indicator-active-color="#198AFB">
|
|
<swiper-item v-for="(pics, index) in bgList" :key="index">
|
|
<image :src="pics" mode="" style="width: 100%; height: 100%;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="sliders">
|
|
<view @click="toggleDeviceIn">
|
|
<image src="../../static/DeviceIn.png" mode=""></image>
|
|
</view>
|
|
<view @click="toggleAddDriver">
|
|
<image src="../../static/addDriver.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="items">
|
|
<view class="items-upper">
|
|
<image src="/static/hotSale.png" mode=""></image>
|
|
<view style="color: #B0B0B0;" @click="seeMore">查看更多</view>
|
|
</view>
|
|
<view
|
|
class="single-item"
|
|
v-for="(item, index) in itemList"
|
|
:key="index"
|
|
>
|
|
<image :src="item.url" mode=""></image>
|
|
<h5>
|
|
<span>{{ item.name }}</span>
|
|
<view>
|
|
{{ item.location }}
|
|
</view>
|
|
</h5>
|
|
<h3>
|
|
￥{{ item.pay }}<span style="font-size: 12px;">/月</span>
|
|
</h3>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
iptVal: '',
|
|
bgList: [
|
|
'/static/bg1.jpg',
|
|
'/static/bg2.jpg',
|
|
'/static/bg3.jpg',
|
|
'/static/bg4.jpg'
|
|
],
|
|
itemList: [
|
|
{
|
|
url: '/static/bg1.jpg',
|
|
name: '出租160t推土机',
|
|
location: '河北保定',
|
|
pay: '20000'
|
|
},
|
|
{
|
|
url: '/static/bg2.jpg',
|
|
name: '出租170t推土机',
|
|
location: '河北保定',
|
|
pay: '25000'
|
|
},
|
|
{
|
|
url: '/static/bg3.jpg',
|
|
name: '出租180t推土机',
|
|
location: '河北保定',
|
|
pay: '30000'
|
|
},
|
|
{
|
|
url: '/static/bg4.jpg',
|
|
name: '出租200t推土机',
|
|
location: '河北保定',
|
|
pay: '40000'
|
|
},
|
|
{
|
|
url: '/static/bg2.jpg',
|
|
name: '出租250t推土机',
|
|
location: '河北保定',
|
|
pay: '60000'
|
|
},
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
clickSearch () {
|
|
console.log(this.iptVal);
|
|
},
|
|
seeMore () {
|
|
console.log(1);
|
|
},
|
|
toggleDeviceIn () {
|
|
uni.navigateTo({
|
|
url: '/pages/deviceIn/deviceIn'
|
|
})
|
|
},
|
|
toggleAddDriver () {
|
|
uni.navigateTo({
|
|
url: '/pages/addDriver/addDriver'
|
|
})
|
|
},
|
|
toggleIpt () {
|
|
uni.navigateTo({
|
|
url: '/pages/search/search'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-container{
|
|
background: linear-gradient(#D1E8FB, #fff);
|
|
box-sizing: border-box;
|
|
padding-top: 20rpx;
|
|
.upper-search{
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
color: #BEBEBE;
|
|
border-radius: 15rpx;
|
|
font-size: 12px;
|
|
box-sizing: border-box;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
.swiper-area{
|
|
width: 100%;
|
|
margin: 25rpx auto;
|
|
}
|
|
.sliders{
|
|
width: 95%;
|
|
height: 13vh;
|
|
margin: 25rpx auto;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
box-sizing: border-box;
|
|
padding: 10rpx;
|
|
view{
|
|
width: 48%;
|
|
height: 100%;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.items{
|
|
width: 90%;
|
|
margin: 25rpx auto;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
border-radius: 15rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
.items-upper{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
margin-bottom: 30rpx;
|
|
image{
|
|
width: 20%;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
.single-item{
|
|
width: 48%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
background-color: #F9F9F9;
|
|
box-sizing: border-box;
|
|
padding: 0 0 10rpx 0;
|
|
image{
|
|
width: 100%;
|
|
height: 13vh;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
h5{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
font-weight: normal;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 20rpx;
|
|
view{
|
|
box-sizing: border-box;
|
|
padding: 5rpx 10rpx;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #4594E7;
|
|
color: #4594E7;
|
|
}
|
|
}
|
|
h3{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
color: #FD4A00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|