.pages {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
}

header {
    height: 3rem;
    background-color: #ED1429;
    position: relative;
}

header .bg {
    width: 100%;
    height: 6rem;
    /* background-color: #ED1429; */
    border-radius: 2rem;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}

header .bg img {
    height: 100%;
}

header .search {
    display: flex;
    align-items: center;
    padding: .8rem .2rem .2rem;
    position: relative;
    z-index: 2;
}

header .search .left {
    display: flex;
    align-items: center;
    margin-right: .2rem;
}

.search .left .icon {
    width: .7rem;
    height: .7rem;
    display: flex;
    align-items: center;
}

header .search .left span {
    font-size: .7rem;
    margin: 0 .2rem;
    color: #FFF;
}

.search .input {
    flex: 1;
    height: 1.5rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, .5);
    filter: 10px;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    opacity: .8;
}

.search .input .icon {
    width: .7rem;
    height: .7rem;
    display: flex;
    align-items: center;
}

.search .input input {
    flex: 1;
    background-color: transparent;
    padding: 0 .5rem 0 .2rem;
    color: #333;
}

.search .input input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .6);
    font-size: .5rem;
}

main {
    flex: 1;
    overflow: auto;
    position: relative;
    z-index: 3;
}


/* 轮播图 */

main .swiper {
    height: 6.2rem;
    border-radius: .5rem;
    border: .2rem solid #fff;
    margin: .2rem .5rem;
    position: relative;
    z-index: 3;
    overflow: hidden;
}


/* menu */

main .menu {
    display: flex;
    flex-wrap: wrap;
    margin-top: .5rem;
    padding: 0 .5rem;
}

main .menu .item {
    width: 20%;
    min-height: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
}

main .menu .item .img {
    width: 1.5rem;
    height: 1.5rem;
    /* background-color: #EEE; */
    flex: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

main .menu .item .img img {
    width: 90%;
    /* height: 100%; */
}

main .menu .item .title {
    font-size: .6rem;
    font-weight: 600;
    color: #333;
    margin-top: .35rem;
}


/* 活动商品 */

.activity {
    min-height: 6rem;
    background-color: #FF6700;
    border-radius: .4rem;
    margin: 0 .5rem;
    margin-top: .2rem;
    padding: .32rem;
    position: relative;
}

.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.activity .title {
    display: flex;
    padding: .3rem 0 .5rem;
    position: relative;
    z-index: 2;
}

.activity .title div {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #fff;
}

.activity .title div:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, .5);
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.activity .goods {
    padding: .4rem;
    background-color: #FFF;
    border-radius: .3rem;
    overflow-x: auto;
    display: flex;
    position: relative;
    z-index: 2;
}

.activity .goods .item {
    width: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 1rem;
}

.activity .goods .item .img {
    width: 3rem;
    height: 3rem;
    background-color: #EEE;
}

.activity .goods .item div {
    text-align: center;
}

.activity .goods .item .goods-title {
    color: #1A1A1A;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.activity .goods .item .price {
    color: #FF4800;
}


/* 会员 */

.member {
    position: relative;
    margin: .5rem;
    margin-top: 0;
    /* background-color: pink; */
}

.member .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.member .bg img {
    height: 100%;
}

.member .content {
    position: relative;
    z-index: 2;
    padding: .5rem .3rem .5rem .3rem;
    display: flex;
    justify-content: space-between;
}

.member .content .left {
     margin-left: .3rem;
}

.member .content .left .icon {
    width: 1.2rem;
    height: 1.5rem;
    /* background-color: #EEE; */
}

.member .content .left .icon img {
    height: 100%;
}

.member .content .left p:nth-child(2) {
    color: #6F1924;
    font-size: .65rem;
    font-weight: 600;
    margin-top: .4rem;
}

.member .content .left p:nth-child(3) {
    color: #DB0027;
    font-size: .5rem;
    margin-top: .2rem;
    white-space: nowrap;
}

.member .card {
    display: flex;
    align-items: center;
}

.member .card .item {
    width: 2.6rem;
    height: 3.5rem;
    background-color: pink;
    margin: 0 .2rem;
    border-radius: .3rem;
    padding-left: .2rem;
    box-sizing: border-box;
    background: linear-gradient(140deg, #fc9e09, #fa5909);
}

.member .card .item div:nth-child(1) {
    width: 1.1rem;
    height: .9rem;
    margin-top: .6rem;
    margin-left: .2rem;
}

.member .card .item div:nth-child(2) {
    color: #FFF;
    font-size: .4rem;
    margin-top: .4rem;
}

.member .card .item img {
    height: 100%;
}


/* 优惠券 */

.coupon {
    min-height: 5rem;
    padding: .5rem .5rem 1rem;
    border-radius: .5rem;
    overflow: hidden;
    background: #FFF;
}

.coupon .title {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(#FFF1DE, #fff);
    padding: .6rem .7rem;
    border-radius: .5rem;
    overflow: hidden;
}

.coupon .title span:nth-child(1) {
    font-size: 1em;
    font-weight: 600;
    margin-right: .2rem;
}

.coupon .title span:nth-child(2) {
    font-size: .3rem;
    margin-right: .2rem;
    background: linear-gradient(#FF2F1A, #FF8359);
    border-radius: 0 1rem 1rem 1rem;
    padding: .1rem .2rem;
    color: #FFF;
    transform: scale(.6);
}

.coupon .title .more {
    color: #C6B9B3;
    font-size: .7rem;
}

.coupon .card {
    display: flex;
    padding: 0rem .5rem;
    justify-content: space-around;
}

.coupon .card .card-item {
    width: 4rem;
    height: 4.5rem;
    /* background: pink; */
    position: relative;
}

.coupon .card .content {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.coupon .card .content div {
    font-size: 1rem;
    color: #F75117;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

.coupon .card .content div span {
    color: #F75117;
    font-size: .5rem;
    position: absolute;
    top: .1rem;
    left: .2rem;
}

.coupon .card .content div:nth-child(2) {
    color: #C68C47;
    font-size: .5rem;
}


/* 广告 */

.ad {
    margin: .3rem .6rem;
}


/* 推荐商品 */

.recommend {
    margin: .5rem;
}

.recommend .tabs {
    height: 2.5rem;
    position: relative;
}

.recommend .tabs .bg {
    width: 100%;
    height: 3.5rem;
    position: absolute;
    top: 0;
    left: 0;
}

.recommend .tabs .bg img {
    height: 100%;
}

.recommend .tabs .contetn {
    display: flex;
    position: relative;
    z-index: 3;
    padding: .5rem 1rem;
    justify-content: space-around;
}

.recommend .tabs .item {
    height: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recommend .tabs .item div {
    font-weight: 600;
    font-size: .8rem;
    color: #FFF;
}

.recommend .tabs .item .active {
    width: 1.3rem;
    height: .2rem;
    border-radius: .5rem;
    background: #FFF;
    margin-top: .2rem;
}

.recommend .goods {
    width: 101%;
    background: #FFF;
    border-radius: .4rem .4rem 0 0;
    position: relative;
    left: -.1rem;
    z-index: 1;
}

.recommend .goods-item {
    display: flex;
    padding: .5rem;
}

.recommend .goods-item .img {
    width: 3rem;
    height: 3rem;
    background: #EEE;
    border-radius: .2rem;
}

.recommend .goods-item .info {
    padding-left: .5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.recommend .goods-item .info>div:nth-child(1) {
    font-weight: 600;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recommend .goods-item .info>div:nth-child(2) {
    font-size: .6rem;
    color: #B4B3B2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recommend .goods-item .info>div:nth-child(3) {
    font-size: .6rem;
    color: #FF9625;
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recommend .goods-item .info>div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recommend .goods-item .icon {
    width: .5rem;
    height: .5rem;
    margin-right: .2rem;
    display: flex;
    align-items: center;
}

.recommend .more {
    font-size: .6rem;
    color: #CFC7C0;
    text-align: center;
    position: relative;
    padding: .5rem 0;
}

.recommend .more::before {
    content: '';
    width: 100%;
    height: 1px;
    transform: scale(1, .5);
    display: flex;
    background: #EEE;
    position: absolute;
    top: 0;
    left: 0;
}

.goods-region {
    padding: .6rem .2rem;
    background-color: #F4F3F8;
}

.goods-region .tabs {
    display: flex;
}

.goods-region .tabs .item {
    width: 20%;
}

.goods-region .tabs .item div {
    text-align: center;
}

.goods-region .tabs .item div:nth-child(1) {
    color: #0F0D0C;
    font-weight: 600;
    font-size: .8rem;
}

.goods-region .tabs .item div:nth-child(2) {
    color: #9B8C89;
    font-size: .5rem;
}

.goods-region .tabs .item div:nth-child(3) {
    width: 2rem;
    height: 1.5rem;
    margin: auto;
}

.goods-region .tabs .item .active {
    color: #FF6908 !important;
}

.goods-region .goods-list {
    display: flex;
    margin: 0 .4rem;
    flex-wrap: wrap;
}

.goods-region .goods-list-item {
    width: 47%;
    background: #FFF;
    margin: 0 .2rem .4rem;
    border-radius: .5rem;
    overflow: hidden;
}

.goods-region .goods-list-item div:nth-child(1) {
    width: 6rem;
    height: 6rem;
    margin: auto;
    background: #EEE;
}

.goods-region .goods-list-item div:nth-child(2) {
    /* width: 100%; */
    color: #000000;
    margin: .2rem .3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    box-sizing: border-box;
}

.goods-region .goods-list-item div:nth-child(2) .icon {
    color: #FFF;
    font-size: .5rem;
    line-height: 1.2rem;
    padding: .1rem .2rem;
    border-radius: 0 1rem 1rem 1rem;
    background: linear-gradient(#FF3620, #FF8056);
    /* background: pink; */
}

.goods-region .goods-list-item div:nth-child(3) {
    /* display: flex; */
    padding: 0 .3rem;
    box-sizing: border-box;
}

.goods-region .goods-list-item div .tag {
    background: #FFEAE6;
    color: #F54728;
    display: inline-block;
    padding: 0 .2rem;
    border-radius: 2rem;
    font-size: .6rem;
}

.goods-region .goods-list-item div:nth-child(4) {
    color: #F6331F;
    font-size: .7rem;
    font-weight: 600;
    padding: 0 .3rem .5rem;
    box-sizing: border-box;
}

.goods-region .goods-list-item div:nth-child(4) span {
    font-size: .5rem;
    color: #F6331F;
}

footer {
    height: 2.7rem;
    background-color: #FFF;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 -1px 20px 2px #eee;
    z-index: 9;
}

footer .bg {
    width: 5rem;
    height: 1.5rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-48%, -70%);
    /* background-color: pink; */
    z-index: 9;
}

footer .tabbar-item {
    width: 19%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer .tabbar-item .icon {
    width: .9rem;
    height: .9rem;
}

footer .center {
    width: 5rem;
    position: relative;
    z-index: 10;
}

footer .center .icon {
    width: 2rem;
    height: 2rem;
    position: relative;
    top: -.6rem;
}

footer .tabbar-item .text {
    font-size: .5rem;
    color: #A7A3A0;
    margin-top: .1rem;
}

footer .tabbar-item .active {
    color: #FFAB42;
}

footer .tabbar-item .icon img {
    width: 100%;
    height: 100%;
}
.more a{
    color: #C6B9B3;
    font-size: .7rem;
}