<template>
<view class="content">
<view class="hander">
<view class="ssk">
<view class="classify">
<image src="../../static/img/fenlei.png" mode="widthFix"></image>
</view>
<view class="ipt">
<input class="ipt_sr" type="text" placeholder="请输入内容" />
</view>
<view class="dialogue">
<text class="btn">搜索</text>
</view>
</view>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<view class="swiper-item">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">B</view>
</swiper-item>
</swiper>
</view>
<view class="foot">
<view class="">
首页
</view>
<view class="">
购物车
</view>
<view class="">
订单
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.content {
position: relative;
margin: 50upx auto;
.hander {
.ssk {
background-color: #4CD964;
display: flex;
width: 100%;
height: 100upx;
.classify{
flex: 1;
width: 80upx;
height: 80upx;
image {
margin-left: 10upx;
margin-top: 17upx;
width: 80%;
}
}
.ipt {
margin-top: 15upx;
background-color: #fff;
border: 1px solid #C0C0C0;
flex: 7;
height: 70upx;
border-top-left-radius: 15upx;
border-bottom-left-radius: 15upx;
.ipt_sr {
height: 70upx;
line-height: 70upx;
text-align: center;
}
}
.dialogue {
flex: 2;
margin-top: 15upx;
background-color: #9ACD32;
height: 73upx;
border-top-right-radius: 15upx;
border-bottom-right-radius: 15upx;
.btn {
width: 120upx;
margin-left: 30upx;
font-size: 40upx;
line-height: 70upx;
}
}
}
}
.foot {
position: absolute;
margin-bottom: 0;
}
}
</style>