hulimall/colorful/pages/index/index.wxss

.head {
    height: 468rpx;
    position: relative;
    top: 90rpx;
}

.head-search {
    padding: 0rpx 20rpx;
    height: 90rpx;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    top: 0;
    z-index: 99;
    position: fixed;
    background-color: #FFFFFF;
}

.search-input {
    width: 100%;
}

.search-input input {
    width: 100%;
}

.search {
    height: 68rpx;
    width: 670rpx;
    background-color: #f6f6f6;
    opacity: 0.8;
    border-radius: 34rpx;
    display: flex;
    align-items: center;
    padding: 0rpx 20rpx;
}

.search image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 12rpx;
}

.search-message {
    height: 68rpx;
    width: 68rpx;
    border-radius: 50%;
    opacity: 0.8;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 22rpx;
    position: relative;
}

.search-message image {
    width: 46rpx;
    height: 46rpx;
}

.search-message .ke {
    text-align: center;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 30px;
}

.bgimg {
    width: 100%;
    height: 37rpx;
    position: relative;
    top: -5rpx;
}
.card {
    height: 360rpx;
}

.card-grid {
    height: 134rpx;
    display: flex;
    flex-wrap: wrap;
    padding: 0rpx 48rpx;
    margin-bottom: 40rpx;
    padding-top: 11rpx;
}

.card-grid view image {
    height: 90rpx;
    width: 90rpx;
    border-radius: 50%;
}

.card-grid-item {
    width: 134rpx;
    height: 134rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 15rpx;
    margin-right: 14rpx;
    margin-bottom: 40rpx;
}

.card-grid-item .title {
    color: #333;
    font-size: 24rpx;
    font-weight: 500;
}

.card-grid-item .navigator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.news {
    height: 80rpx;
    padding: 0rpx 30rpx;
    display: flex;
    align-items: center;
}

.news image {
    height: 27rpx;
    width: 114rpx;
    border-right: 1rpx solid #ddd;
    padding-right: 19rpx;
}

.news-title {
    width: 476rpx;
    color: #333;
    margin-left: 20rpx;
    font-size: 24rpx;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-swiper {
    width: 100%;
    height: 30rpx;
}

.news-swiper-item {
    display: flex;
    align-items: center;
}

.group {
    height: 416rpx;
}

.group-head {
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 27rpx;
}

.group-title {
    display: flex;
    align-items: center;
}

.group-title image {
    width: 44rpx;
    height: 44rpx;
}

.group-title .title {
    color: #333;
    font-weight: bold;
    font-size: 32rpx;
    margin-left: 7rpx;
}

.group-gengduo {
    display: flex;
    align-items: center;
}

.group-gengduo image {
    width: 16rpx;
    height: 28rpx;
}

.group-gengduo .title {
    color: #999;
    font-size: 26rpx;
    font-weight: 500;
    padding-right: 14rpx;
}

.scroll-view_H {
    height: 280rpx;
    width: 100%;
    white-space: nowrap;
}

.scroll-hd {
    height: 240rpx;
    width: 100%;
    white-space: nowrap;
}

.scroll-hd-item {
    display: inline-block;
    width: 165rpx;
    height: 210rpx;
    border: 1rpx solid rgba(255,53,81,1);
    background: rgba(255,255,255,1);
    border-radius: 8rpx;
    margin-right: 10rpx;
    text-align: center;
}

.scroll-view-item_H {
    height: 274rpx;
    width: 200rpx;
    display: inline-block;
    margin-left: 30rpx;
}

.scroll-view-item_H image {
    height: 200rpx;
    width: 200rpx;
    position: absolute;
}

.scroll-view-item_H .title {
    font-size: 26rpx;
    font-weight: 500;
    text-align: conter;
    width: 210rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scroll-view-item_H .num {
    font-size: 28rpx;
    font-weight: bold;
    color: #ff022f;
    text-align: conter;
}

.scroll-view-item_H .new-s {
    color: #999;
    font-size: 24rpx;
    text-decoration: line-through;
}

.list-card {
    background-color: #eee;
    padding: 10rpx 0 0;
    height: 260rpx;
}

.list-card-lj {
    display: flex;
    justify-content: space-between;
    margin: 8rpx 15rpx;
    box-shadow: 5px 5px 3px #ccc;
    background-color: #fff;
}

.list-card-lj item {
    width: 335rpx;
    height: 160rpx;
}

.list-card-lj image {
    width: 325rpx;
    height: 180rpx;
    background-color: #666;
    border-radius: 10rpx;
}

.list-card-lj .item {
position: relative;
margin: 20rpx 8px;
}

.list-card-lj .item .item-body {
    position: absolute;
    top: 0;
    margin: 24rpx 24rpx;
}

.list-card-lj .item .item-body .hd-title {
    color: #fff;
    font-weight: bold;
    font-size: 30rpx;
}

.list-card-lj .item .item-body .hef-title {
    font-size: 24rpx;
    color: #fff;
    font-weight: 500;
}

.list-card-lj .item .item-body .hef-yuan {
    margin-top: 20rpx;
    height: 30rpx;
    width: 60rpx;
    color: #fff;
    font-size: 22rpx;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
}

.list-card-lj .item .item-body .hef-red {
    background-color: #ff3e2e;
}

.list-card-lj .item .item-body .hef-zs {
    background-color: #a438ff;
}

.list-card-hd {
    display: flex;
    margin: 0rpx 30rpx;
}

.list-card-hd .item {
    width: 165rpx;
    height: 210rpx;
    border: 1rpx solid rgba(255,53,81,1);
    background: rgba(255,255,255,1);
    border-radius: 8rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: 10rpx;
}

.list-card-hd .item view {
    text-align: center;
}

.maintitle {
    text-align: center;
    color: #333;
    font-size: 28rpx;
    margin-top: 20rpx;
}

.vicetitle {
    color: #ff3551;
    font-size: 22rpx;
    font-weight: 500;
    text-align: center;
}

.scroll-hd-item image {
    width: 120rpx;
    height: 119rpx;
    display: inline-block;
}

.sellwell {
    height: 70rpx;
    margin: 0rpx 30rpx;
    display: flex;
    align-items: flex-end;
}

.sellwell image {
    width: 48rpx;
    height: 48rpx;
}

.cellwell-list {
    margin: 0rpx 30rpx;
}

.cellwell-list-item {
    height: 250rpx;
    margin: 30rpx 0rpx;
    border-bottom: 1rpx solid #e6e6e6;
    display: flex;
}

.cellwell-list-item .item-image {
    position: relative;
}

.cellwell-list-item .item-image .bg {
    border-radius: 8rpx;
    width: 220rpx;
    height: 220rpx;
    position: relative;
    background-color: #f6f6f6;
}

.cellwell-list-item .item-image .hdlx {
    width: 48rpx;
    height: 50rpx;
    position: absolute;
    left: 0;
}

.cellwell-list-item .item-body {
    margin-left: 42rpx;
    width: 100%;
}

.cellwell-list-item .item-body .sp-title {
    color: #000;
    font-size: 28rpx;
    font-weight: 500;
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.cellwell-list-item .item-body .sp-num {
    color: #999;
    font-size: 24rpx;
}

.line {
    height: 21rpx;
    background-color: #f6f6f6;
}

.tishi {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-red {
    color: #ff0230;
    font-size: 24rpx;
}

.body-top {
    margin-top: 69rpx;
    display: flex;
    justify-content: space-between;
}

.body-top image {
    width: 60rpx;
    height: 60rpx;
}

.body-top-left {
    color: #ff0230;
    font-size: 28rpx;
    font-weight: bold;
}

.body-top-right {
    color: #9b9b9b;
    font-size: 24rpx;
    font-weight: 500;
    text-decoration: line-through;
    margin-left: 8rpx;
}

.navhover {
    background-color: #fff;
    border-bottom: 1rpx solid #e6e6e6;
}

.prompt {
    font-size: 13px;
    color: #666;
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
}

.mask {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #66666699;
    z-index: 2;
}

.maskcard {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 744rpx;
    background-color: #FFFFFF;
    z-index: 10;
}

.padding {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.maskcard .card-title {
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
}

.maskcard .card-title .card-title-head {
    width: 140rpx;
    height: 140rpx;
    border: 1px solid rgba(221,221,221,1);
}

.maskcard .card-title .close-img {
    width: 27rpx;
    height: 28rpx;
}

.title-box {
    display: flex;
}

.title-box .num {
    color: #FF0230;
    font-weight: bold;
    font-size: 30rpx;
}

.title-box .save {
    padding-top: 10rpx;
    color: #999999;
    font-size: 24rpx;
    font-weight: 500;
}

.title-box .item {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.maskcard .line {
    width: 92%;
    background-color: #E6E6E6;
    height: 2rpx;
    margin: 30rpx 30rpx;
}

.col {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.col .item {
    width: 120rpx;
    height: 56rpx;
    background-color: #F6F6F6;
    border-radius: 8rpx;
    margin-right: 18rpx;
    margin-bottom: 10rpx;
    color: #333333;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titles {
    margin-bottom: 24rpx;
    color: #999999;
    font-size: 28rpx;
}

.active {
    color: #FF0230!important;
    border: 2rpx solid rgba(255,2,48,1);
    width: 116rpx!important;
    height: 52rpx!important;
}

.feat {
    display: flex;
    justify-content: space-between;
}

.feat .feat-title {
    color: #999999;
    font-size: 28rpx;
}

.feat .fbox {
    width: 170rpx;
    height: 46rpx;
    border: 2rpx solid #DDDDDD;
    border-radius: 4rpx;
}

.feat .fbox .fbox-50 {
    width: 50rpx;
    height: 46rpx;
    text-align: center;
}

.feat .fbox .fbox-input {
    width: 68rpx;
    height: 46rpx;
    text-align: center;
    border-left: 2rpx solid #DDDDDD;
    border-right: 2rpx solid #DDDDDD;
}

.card-btn {
    height: 98rpx;
    width: 100%;
    margin-top: 40rpx;
    background: linear-gradient(-90deg,rgba(255,0,46,1) 0%,rgba(255,47,85,1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.overf {
    overflow: scroll;
    height: 402rpx;
}

.card-text {
    color: #FFFEFE;
    font-size: 34rpx;
}

.hideBG {
    display: none;
}

@-webkit-keyframes slideBGtUp {
    from {
        background: transparent;
    }

    to {
        background: rgba(0,0,0,0.1);
    }
}

@keyframes slideBGtUp {
    from {
        background: transparent;
    }

    to {
        background: rgba(0,0,0,0.1);
    }
}

@-webkit-keyframes slideBGDown {
    from {
        background: rgba(0,0,0,0.1);
    }

    to {
        background: transparent;
    }
}

@keyframes slideBGDown {
    from {
        background: rgba(0,0,0,0.1);
    }

    to {
        background: transparent;
    }
}

.openBG {
    animation: slideBGtUp 0.5s ease-in both;
}

.closeBG {
    animation: slideBGDown 0.5s ease-in both;
}

.showContent {
    display: block!important;
}

.hideContent {
    display: none!important;
}

@-webkit-keyframes slideContentUps {
    from {
        height: 0;
    }

    to {
        height: 744rpx;
    }
}

@keyframes slideContentUps {
    from {
        height: 0;
    }

    to {
        height: 744rpx;
    }
}

@-webkit-keyframes slideContentDowns {
    from {
        height: 744rpx;
    }

    to {
        height: 0;
    }
}

@keyframes slideContentDowns {
    from {
        height: 744rpx;
    }

    to {
        height: 0;
    }
}

.opens {
    display: block!important;
    animation: slideContentUps 0.5s ease-in both;
}

.closesa {
    animation: slideContentDowns 0.5s ease-in both;
}

.item-image {
    height: 200rpx;
    width: 200rpx;
    position: relative;
}

.item-image-bon {
    width: 108rpx!important;
    height: 28rpx!important;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-image-bon image {
    width: 108rpx!important;
    height: 28rpx!important;
}

.item-image-bon text {
    font-size: 18rpx;
    color: #FFFFFF;
    position: absolute;
    z-index: 2;
}

.newbg {
    width: 48rpx;
    height: 50rpx;
    position: absolute;
    top: 0;
    left: 8rpx;
    z-index: 1;
}

.scroll-hd-item0 {
    border: 1rpx solid #FF3551!important;
}

.scroll-hd-item1 {
    border: 1rpx solid #BB5233!important;
}

.scroll-hd-item2 {
    border: 1rpx solid #E03CA3!important;
}

.scroll-hd-item3 {
    border: 1rpx solid #FA8801!important;
}

.vicetitle0 {
    color: #FF3551;
}

.vicetitle1 {
    color: #BB5233;
}

.vicetitle2 {
    color: #E03CA3;
}

.vicetitle3 {
    color: #FA8801;
}

.wx-swiper-dots {
    position: relative;
}

.wx-swiper-dots.wx-swiper-dots-horizontal {
    bottom: 42rpx;
}
/*products css*/
.goods-block {padding: 20rpx 0 0;}
.goods-block-tit {height: 90rpx; line-height: 90rpx; background-color: #fff; border-bottom: 0px solid #eee;
font-size: 32rpx; font-weight: 700; color: #000;}
.goods-block-tit image {width: 30rpx; height: 30rpx; float: left; margin: 30rpx 20rpx 0 30rpx;}

.goods-area {padding: 0 30rpx;background-color: #fff;
}

.goods-box {
  border-bottom: 1rpx solid #eee; 
  position: relative; 
  display: flex; 
  flex-direction: row;
  padding: 30rpx 0;
  }

.goods-box:last-child {border-bottom: 0;}
.goods-photo {width: 220rpx; height: 220rpx; border-radius: 15rpx;}
.goods-info {width: 470rpx; box-sizing: border-box; padding-left: 30rpx; position: relative; 
font-size: 24rpx; line-height: 48rpx;}
.goods-title {font-size: 30rpx; font-weight: 700; color: #000; height: 84rpx; overflow: hidden; line-height: 42rpx;
margin-bottom: 5rpx;}
.p-sale {color: #999;}
.goods-text {font-family: Arial; padding-top: 42rpx; line-height: 60rpx; height: 60rpx;}
.p-price {color: #f00; font-weight: 600; padding-right: 20rpx; float: left; font-size: 32rpx; line-height: 56rpx;}
.p-price-y {color: #999; text-decoration: line-through;}
.icon-cart, .goods-button {width: 65rpx; height: 65rpx; position: absolute; right: 5rpx; bottom: 5rpx;}
.goods-button {width: 150rpx; background-color: #d62418; color: #fff; font-size: 26rpx; box-sizing: border-box;
padding: 15rpx 15rpx 0 25rpx; line-height: 30rpx; border-radius: 5rpx;}
.goods-button image {float: right; width: 30rpx; height: 30rpx;}

.bottom-pt {text-align: center; padding: 30rpx; font-size: 28rpx;}
.icon-right-arrt {position: absolute; top: 50%; right: 30rpx; width: 30rpx; height: 30rpx; margin-top: -15rpx;}
.datails-size-area .n-dt {width: 100rpx; display: inline-block;}
.button-100 {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; z-index: 110;}

.content-box {padding: 20rpx 0; line-height: 2em; font-size: 28rpx; text-align: left;}
.content-box .wxParse-p {padding: 0 30rpx;}
.content-box .wxParse-img {display: block; margin: 0; width: 100%;}

.block-area {background-color: #fff; margin-bottom: 20rpx;}
.block-title {height: 80rpx; line-height: 80rpx; padding: 0 30rpx;}
.block-title text {font-size: 32rpx; font-weight: 700; color: #000;}
.block-title .n-link {float: right; font-size: 24rpx; color: #a6a6a6; padding-right: 30rpx; position: relative;}
.block-title .n-link image {width: 24rpx; height: 24rpx; position: absolute; top: 50%; right: 0; margin-top: -12rpx;}
.nav-area { background-color: #fff;padding: 20rpx 0 0;
  height: 360rpx;
}
.nav-menu {padding: 20rpx 15rpx;
  height: 134rpx;
  display: flex;
  flex-wrap: wrap;
  padding: 0rpx 48rpx;
  margin-bottom: 40rpx;
  padding-top: 11rpx;  
}
.nav-view {
  width: 134rpx;
height: 134rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: 15rpx;
margin-right: 14rpx;
margin-bottom: 40rpx;
}
.nav-view image {width: 100rpx; height: 100rpx; border-radius: 10rpx; margin: 0 auto 5rpx;}
.nav-view .n-text {font-size: 28rpx;  color: #000; line-height: 50rpx;}

.nav-views {
  width: 141rpx;
height: 134rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: 15rpx;
margin-right: 14rpx;
margin-bottom: 40rpx;
}
.nav-views image {width: 100rpx; height: 100rpx; border-radius: 10rpx; margin: 0 auto 5rpx;}
.nav-views .n-text {font-size: 28rpx;  color: #000; line-height: 30rpx;}

.user-title {height: 80rpx; line-height: 80rpx; padding: 0 30rpx;}
.sellwellx .n-link {float: right; font-size: 24rpx; color: #a6a6a6; padding-right: 30rpx; position: relative;}
.sellwellx .n-link image {width: 24rpx; height: 24rpx; position: absolute; top: 50%; right: 0; margin-top: -12rpx;}
.sellwellx {
    height: 70rpx;
    margin: -40rpx 30rpx;
}
.bgimgx {
    width: 100%;
    height: 233rpx;
    position: relative;
    top: 15rpx;
}
.list-cardx {
    background-color: #fff;
    padding: 20rpx 0 0;
    height: 200rpx;
    }

.list-cardx-lj {
    justify-content: space-between;
    margin: 7rpx 345rpx;
}

.list-cardx-lj item {
    width: 335rpx;
    height: 160rpx;
}

.list-cardx-lj image {
    width: 375rpx;
    height: 190rpx;
    background-color: #666;
    border-radius: 10rpx;
}

.list-cardx-lj .item {
    position: relative;
}

.list-cardx-lj .item .item-body {
    position: absolute;
    top: 0;
    margin: 24rpx 120rpx;
}

.list-cardx-lj .item .item-body .hd-title {
    color: #000;
    font-weight: bold;
    font-size: 35rpx;
    margin: -10rpx -90rpx;
}

.list-cardx-lj .item .item-body .hef-title {
    font-size: 24rpx;
    color: #000;
    font-weight: 500;
    margin: -10rpx -90rpx;
}

.list-cardx-lj .item .item-body .hef-yuan {
    margin-top: 20rpx;
    height: 30rpx;
    width: 60rpx;
    color: #fff;
    font-size: 22rpx;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
}

.list-cardx-lj .item .item-body .hef-red {
    background-color: #ff3e2e;
}

.list-cardx-lj .item .item-body .hef-zs {
    background-color: #a438ff;
}

.list-cardx-hd {
    display: flex;
    margin: 0rpx 30rpx;
}

.list-cardx-hd .item {
    width: 165rpx;
    height: 210rpx;
    border: 1rpx solid rgba(255,53,81,1);
    background: rgba(255,255,255,1);
    border-radius: 8rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: 10rpx;
}

.list-cardx-hd .item view {
    text-align: center;
}

.list-cardx-ljx {
    justify-content: space-between;
    margin: -215rpx 30rpx;
}

.list-cardx-ljx item {
    width: 335rpx;
    height: 160rpx;
}

.list-cardx-ljx image {
    width: 305rpx;
    height: 392rpx;
    background-color: #666;
    border-radius: 10rpx;
}

.list-cardx-ljx navigator {
    position: relative;
}

.list-cardx-ljx .item .item-body {
    position: absolute;
    top: 0px;
    margin: 24rpx 24rpx;
}

.list-cardx-ljx .item .item-body .hd-title {
    color: #000;
    font-weight: bold;
    font-size: 30rpx;
}

.list-cardx-ljx .item .item-body .hef-title {
    font-size: 24rpx;
    color: #000;
    font-weight: 500;
    margin: 0rpx 5rpx;
}

.list-cardx-ljx .item .item-body .hef-yuan {
    margin-top: 20rpx;
    height: 30rpx;
    width: 60rpx;
    color: #fff;
    font-size: 22rpx;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
}

.list-cardx-ljx .item .item-body .hef-red {
    background-color: #ff3e2e;
}

.list-cardx-ljx .item .item-body .hef-zs {
    background-color: #a438ff;
}
.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  top: 1080rpx;
  background: rgba(0,0,0,.7);
  border-radius: 50rpx;
  right: 30rpx;
  /*                                                                         */
  z-index: 9999;
}