xuan_wechat/pages/mall/index.wxss

page {
    background-color: #f6f6f6;
}

.linearBack {
    background-image: linear-gradient(to top, #ffffff 60%, #fbe2e1);
    padding: 30rpx;
    box-sizing: border-box;
}

/* 搜索 */
.mall-search {
    height: 90rpx;
    line-height: 90rpx;
    background-color: #ffffff;
    border-radius: 100rpx;
    padding: 0 40rpx;
    display: flex;
    color: #999999;
    font-size: 32rpx;
}

.mall-search-icon {
    width: 40rpx;
    margin: 25rpx 20rpx 0 0;
}

/* 轮播 */
.mallBanner-cont {
    margin: 40rpx 0 15rpx;
    position: relative;
    border-radius: 30rpx;
    padding-top: 35%;
    overflow: hidden;
}

.mallBanner-see,
.mallBanner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 修改dot形状 */
.mallBanner-see .wx-swiper-dots .wx-swiper-dot {
    background-color: #ffffff;
    opacity: .6;
}

.mallBanner-see .wx-swiper-dot-active {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

/* 分类 */
.sort-list {
    overflow: hidden;
}

.sort-item {
    width: 20%;
    float: left;
    text-align: center;
    margin-top: 30rpx;
}

.sort-item-icon {
    width: 92rpx;
}

.sort-item-name {
    font-size: 26rpx;
    color: #111111;
    margin-top: 10rpx;
}

/* 公告 */
.notice {
    padding: 30rpx;
    box-sizing: border-box;
}

.noticeCont {
    background-color: #ffffff;
    border-radius: 100rpx;
    height: 90rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
}

.noticeCont-swiper {
    width: calc(100% - 38rpx);
    height: 90rpx;
    line-height: 90rpx;
}

.noticeCont-icon {
    width: 32rpx;
    margin-top: 28rpx;
}

.noticeCont-name {
    width: calc(100% - 32rpx);
    padding-left: 20rpx;
    box-sizing: border-box;
    color: #da2b54;
}

/* 推荐 */
.suggest {
    padding: 10rpx 30rpx 0;
    box-sizing: border-box;
    display: flex;
    display: none;
}

.suggestLeft {
    width: 50%;
    padding-right: 15rpx;
    box-sizing: border-box;
}

.suggestLeft-swiper {
    position: relative;
    border-radius: 30rpx;
    padding-top: 158%;
    overflow: hidden;
}

.suggestLeft-see,
.suggestLeft-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 修改dot形状 */
.suggestLeft-see .wx-swiper-dots.wx-swiper-dots-horizontal {
    bottom: 25rpx;
}

.suggestLeft-see .wx-swiper-dots .wx-swiper-dot {
    width: 32rpx;
    /*宽*/
    height: 12rpx;
    /*高*/
    border-radius: 10rpx;
    /*圆角*/
    background-color: transparent;
    border: 4rpx solid #ffffff;
    box-sizing: border-box;
}

.suggestLeft-see .wx-swiper-dot-active {
    background-color: #ffffff !important;
}

.suggestRight {
    width: 50%;
    padding-left: 15rpx;
    box-sizing: border-box;
}

.moduleWrite {
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
}

.module:last-child {
    margin-bottom: 0;
}

.moduleTitle-name {
    font-weight: 600;
}

.moduleTitle-text {
    color: #999999;
    font-size: 26rpx;
    line-height: 48rpx;
}

.moduleList {
    overflow: hidden;
    margin-top: 10rpx;
}

.moduleList-item {
    width: 50%;
    float: left;
    padding: 0 20rpx;
    box-sizing: border-box;
    text-align: center;
}

.moduleList-item-img {
    width: 80%;
}

.moduleList-item-price {
    font-size: 26rpx;
    color: #ff4040;
    font-weight: 600;
}

/* 商品 */
.tabs {
    box-sizing: border-box;
    width: 100%;
    display: none;
}

.tabs-scroll {
    line-height: 80rpx;
    height: 84rpx;
    white-space: nowrap;
}

.tabs-scroll-name {
    display: inline-block;
    padding: 0 40rpx 10rpx;
    font-size: 30rpx;
    position: relative;
    color: #111111;
}

.tabs-scroll-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(50% - 4rpx);
    height: 18rpx;
    width: 8rpx;
    border-radius: 80rpx 0 0 80rpx;
    border-top: 6rpx solid transparent;
    border-left: 6rpx solid transparent;
    border-bottom: 6rpx solid transparent;
    transform: translate(0) rotate(-90deg);
}

.tabs-scroll-name.active {
    color: #da2b54;
    font-weight: 600;
}

.tabs-scroll-name.active::after {
    border-top-color: #da2b54;
    border-left-color:#da2b54;
    border-bottom-color: #da2b54;
}

.goods {
    padding: 0 30rpx;
    box-sizing: border-box;
}

.goodsList {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 -10rpx;
}

.goodsItem {
    margin: 0 15rpx 20rpx;
    width: calc(50% - 30rpx);
    display: inline-block;
    background-color: white;
    border-radius: 30rpx;
    overflow: hidden;
}

.goodsItem-img {
    width: 100%;
    position: relative;
    padding-top: 100%;
}

.goodsItem-img image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.goodsItem-cont {
    padding: 30rpx 20rpx;
    box-sizing: border-box;
}

.goodsItem-text {
    color: #ff9b26;
    font-size: 26rpx;
    line-height: 54rpx;
}

.goodsItem-tips {
    margin-top: 20rpx;
    display: flex;
    line-height: 40rpx;
}

.goodsItem-price {
    flex: 1;
    color: #da2b54;
    font-size: 32rpx;
    font-weight: 600;
}

.goodsItem-sales {
    font-size: 26rpx;
    color: #999999;
}

/* 自选产品包 */
.capsule{ padding: 0 40rpx 20rpx; }
.capsule-src{ width: 100%; }

/* 暂无列表 */
.goodsList-no {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 30rpx 60rpx;
    box-sizing: border-box;
}

/* 增收赋能 */
.module {
    padding: 30rpx;
    box-sizing: border-box;
}

.module-title {
    margin-bottom: 20rpx;
    color: #000000;
    font-size: 32rpx;
    font-weight: 600;
}

.enable-label {
    background-color: #ffffff;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    position: relative;
    margin-bottom: 30rpx;
}

.enable-img {
    width: 200rpx;
    border-radius: 20rpx;
}

.enable-cont {
    position: absolute;
    left: 0;
    top: 0;
    padding: 20rpx 20rpx 20rpx 240rpx;
    box-sizing: border-box;
}

.enable-title {
    font-size: 34rpx;
    margin: 10rpx 0 15rpx;
}

.enable-price {
    font-size: 36rpx;
    color: #f0115c;
    font-weight: 600;
}

.enable-text {
    color: #999999;
    margin: 10rpx 0 40rpx;
}