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.
hunjianghu/杨盼成/pages/index/index.wxss

239 lines
4.0 KiB

/**index.wxss**/
.container {
background-color: #F2f2f2;
min-height: 100%;
display: block;
}
.swiper-container{
width: 750rpx;
position: relative;
}
.swiper_box {
width: 100%;
height:562.5rpx;
}
swiper-item image {
width: 100%;
display: inline-block;
overflow: hidden;
height:562.5rpx;
}
.swiper-container .dots{
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot{
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background: #fff;
border-radius: 50%;
transition: all .6s;
opacity: .5;
}
.swiper-container .dots .dot.active{
width: 14rpx;
opacity: 1;
}
.type-navbar{
white-space: nowrap;
height: 88rpx;
width: 100%;
background-color: #fff;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.type-box{
width:160rpx;
box-sizing: content-box;
font-size: 24rpx;
line-height: 84rpx;
text-align: center;
display: inline-block;
overflow: hidden;
}
.type-navbar-item{
border-bottom: 4rpx solid #fff;
}
.type-item-on{
border-bottom: 4rpx solid #e64340;
}
.goods-container{
display: flex;
justify-content: space-between;
flex-wrap:wrap;
box-sizing: content-box;
padding: 24rpx;
}
.goods-box{
width: 339rpx;
height: 472rpx;
background-color: #fff;
overflow: hidden;
margin-bottom: 24rpx;
}
.goods-box .img-box{
width: 339rpx;
height: 339rpx;
overflow: hidden;
}
.goods-box .img-box image{
width: 339rpx;
height: 339rpx;
}
.goods-box .goods-title{
width: 280rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 24rpx;
padding: 24rpx 0 0rpx 0;
color:#000;
margin-left: 24rpx;
}
.goods-box .goods-price{
width: 280rpx;
overflow: hidden;
font-size: 24rpx;
padding: 24rpx 0;
color:#e64340;
margin-left: 24rpx;
}
.no-more-goods{
text-align: center;
font-size: 24rpx;
padding-bottom:48rpx;
color: #999;
}
.type-container{
width: 100%;
height: 88rpx;
background-color: #fff;
overflow: hidden;
}
.notice{
display: flex;
justify-content: space-between;
flex-wrap:wrap;
height: 80rpx;
line-height: 80rpx;
width: 750rpx;
margin-top: 10rpx;
background-color: #fff;
}
.notice_swiper{
padding-top: 15rpx;
padding-bottom: 15rpx;
height: 50rpx;
line-height: 50rpx;
width: 635rpx;
}
.notice_iteml {
padding-left: 25rpx;
padding-top: 15rpx;
padding-bottom: 15rpx;
font-size: 26rpx;
width: 80rpx;
height: 50rpx;
line-height: 50rpx;
color: #999;
}
.notice_itemr {
padding-left: 10rpx;
font-size: 26rpx;
overflow: hidden;
color: #e64340;
width: 635rpx;
height: 50rpx;
line-height: 50rpx;
}
.pos-fiexd{
position: fixed;
top: 0;
left: 0;
}
.coupons{
margin-top:10rpx;
width: 100%;
height: 180rpx;
overflow: hidden;
}
.coupons-scroll{
white-space: nowrap;
height: 180rpx;
width: 100%;
background-color: #fff;
}
.coupons-item{
width:300rpx;
height: 180rpx;
margin: 10rpx;
padding-top: 20rpx;
padding-left: 15rpx;
background-color: #f1a83b;
box-sizing: content-box;
font-size: 20rpx;
line-height: 35rpx;
overflow: hidden;
color: #fff;
display: inline-block;
}
.search-view{
position:fixed;
left:0;
right:0;
top:0;
z-index:500;
width: 100%;
height: 100rpx;
background: gray;
display: flex;
flex-direction: column;
}
.search-content{
background: white;
width:650rpx;
display: flex;
flex-direction: row;
align-items: center;
padding-top: auto;
padding-left: 20rpx;
padding-bottom: auto;
margin: auto;
height: 70rpx;
border-radius:5px 5px;
}
.search-icon{
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.search-input{
width: 500rpx;
font-size: 28rpx;
}
.search-btn{
width: 150rpx;
height: 70rpx;
margin-right: 0rpx;
background-color:blueviolet;
font-size: 28rpx;
align-items: center;
border-top-left-radius: 0rpx;
border-bottom-left-radius: 0rpx;
color:#fff;
border:none;
position: relative;
}