.nav{

height: 1.706667rem;

border-bottom: 1px solid #b2b2b2;

position: fixed;

width: 100%;

top: 0;

z-index: 99;

background-color: #fff;

}

.nav .title{

font-size: .453333rem;

color: #2f2f2f;

text-align: center;

line-height: 1.946667rem;

}

.nav .back-icon{

width: .72rem;

height: .72rem;

position: absolute;

top: .613333rem;

background-image: url('../img/back.png');

background-size: cover;

left: .32rem;

}

/* tab-bar */

.tab-bar{

font-size: .426667rem;

display: flex;

border-bottom: .026667rem solid #f0f0f0;

margin-top: 1.706667rem;

}

.tab-bar .tab-item{

flex: 1;

height: 1.2rem;

line-height: 1.2rem;

position: relative;

color: #666;

text-align: center;

text-decoration: none;

}

.tab-bar .tab-item.active::after{

content: ' ';

display: block;

height: .106667rem;

width: 1.6rem;

position: absolute;

bottom: 0;

background-color: #ffd161;

left: 50%;

transform: translateX(-50%);

-webkit-transform: translateX(-50%);

}

.menu-inner{

position: absolute;

right: 0;

bottom: 0;

top: 2.933333rem;

display: flex;

overflow: hidden;

left: 0;

}

.menu-inner .left-bar{

width: 2.266667rem;

background-color: #efefef;

overflow: auto;

height: 100%;

-webkit-overflow-scrolling: touch;

}

.menu-inner .left-bar-inner{

padding-bottom: 2.266667rem;

}

.menu-inner .left-item{

font-size: .373333rem;

color: #656565;

text-align: center;

border-bottom: 1px solid #bfbfbf;

display: flex;

height: 1.6rem;

justify-content:center;

}

.menu-inner .left-item.active{

background-color: #fff;

}

.menu-inner .item-text{

text-align: center;

align-self:center ;

}

.menu-inner .item-icon{

width: .533333rem;

height: .533333rem;

display: inline-block;

vertical-align: -0.106667rem;

margin-right: .16rem;

}

/* right */

.right-content {

flex: 1;

margin-left: 0.266667rem;

height: 100%;

overflow: hidden;

-webkit-overflow-scrolling: touch;

}

.right-content .right-list {

height: 100%;

overflow: auto;

}

.right-content .right-list-inner {

font-size: 0.426667rem;

padding-bottom: 2.266667rem;

}

.right-content .right-title {

font-size: 0.346667rem;

color: #333;

margin-top: 0.266667rem;

padding-left: 0.106667rem;

border-left: 0.053333rem solid #ffd161;

}

.right-content .menu-item {

display: flex;

padding-top: 0.666667rem;

padding-bottom: 0.666667rem;

border-bottom: 1px solid #f0f0f0;

position: relative;

}

.right-content .menu-item .img {

width: 1.653333rem;

height: 1.653333rem;

margin-right: 0.266667rem;

}

.right-content .menu-item-right {

flex: 1;

}

.right-content .item-title {

font-size: .48rem;

color: #2f2f2f;

}

.item-zan,.item-desc {

color: #a9a9a9;

font-size: .346667rem;

margin-top: 0.16rem;

line-height: .346667rem;

padding-right: 0.106667rem;

}

.right-content .menu-item-right .item-desc{

line-height: .453333rem;

}

.right-content .item-price{

margin-top: .266667rem;

color: #fe4d3d;

font-size: .48rem;

}

.right-content .unit{

font-size: .32rem;

color: #a9a9a9;

}

.select-content{

position: absolute;

right: .24rem;

bottom: .56rem;

display: flex;

}

.right-content .plus {

width: .666667rem;

height: .666667rem;

background-image: url('../img/plus.png');

background-size: cover;

}

.right-content .minus {

width: .666667rem;

height: .666667rem;

background-image: url('../img/minus.png');

background-size: cover;

}

.right-content .count {

font-size: .4rem;

color: #2f2f2f;

width: .666667rem;

height: .666667rem;

line-height: .666667rem;

margin-left: .053333rem;

margin-right: .053333rem;

text-align: center;

}