mobileclient/homepage1_1.css

html {
  background: #F4F6F9;
}
body{
	height:100%;
}
.top {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
#app{
  height: 100%;
}
img {
  width: 100%;
  vertical-align: middle;
}
.main-body{
  overflow: scroll;
  height: 100%;
}
.center {
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;

}

.bottom {
  width: 100%;
  height: auto;
  position: relative;
}
.tipBottomtext{
  position: absolute;
  top:0.7rem;
  padding:0 0.25rem;
  box-sizing: border-box;
  line-height: 0.24rem;
  text-align: justify;
  left: 0;
}
.key {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 2rem;
  height: 0.25rem;
  z-index: 2;
  margin-left: -0.72rem;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 0.14rem;
}

.code {
  position: absolute;
  top: 0.935rem;
  left: 50%;
  width: 1rem;
  height: 0.25rem;
  z-index: 2;
  margin-left: -0.72rem;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 0.14rem;
}

.codeimg {
  position: absolute;
  top: 0.82rem;
  right: 0.3rem;
  width: 0.84rem;
  height: 0.42rem;
  border-radius: 0.21rem;
  z-index: 2;
  background-color: #f1f2f3;
  color: #ccc;
  display: flex;
  justify-content: center;
  outline: none;
  border: none;
  align-items: center;
  font-size:0.13rem;
}
.codeimg.active{
  color: rgb(42, 126, 236);
  font-weight: bold;
}
.codeimg.disabledstyle{
  color: #999;
}
.submit {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: 3rem;
  height: 0.4rem;
  margin-left: -1.5rem;
  z-index: 2;
  background-color: transparent;
}
@media screen and (min-width:900px){
  html{
    transform: scale(0.3);
    background: #fff;
    transform-origin: 50% 0px 0px;
    height: calc(100vh);
  }
  #homepage,#exchangePage{
    height: 6rem!important;
    background: #F4F6F9;
    overflow-y: scroll;
  }
  .mask{
    height: 6rem!important;
  }
  #matrix,#rotation, #list{
    height:6rem!important;
    overflow-y: auto;
  }
  .exchange-btn{
   top: 5.5rem!important;
  }
}

#homepage {
  width: 100%;
  font-size: 0.14rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.swiper-container{
 height: 2rem;
}


/* 鏉烆喗鎸<E59697> */
.topBanner {
  width: 100%;
  height: 1.83rem;
  position: relative;
}
.topBanner .backpresty{
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 0.4rem;
  height: 0.4rem;
  z-index: 877;
}

.topBanner img {
  width: 100%;
  height: 1.83rem;
  position: absolute;
  top: 0;
  left: 0;
}

#homepage h2 {
  position: relative;
  text-align: center;
  top: 0.58rem;
  color: #fff;
  font-size: 0.21rem;
  letter-spacing: 0.03rem;
  padding-left: 0.03rem;
}
#homepage .bottom{
  width: 94%;
  margin-top: 0.1rem;
  font-size: 0.14rem;
 
}
#homepage  .goodsTip,#exchangePage .goodsTip{
  width: 100%;
  background: #fff;
  padding: 0.26rem;
  line-height: 0.24rem;
  box-sizing: border-box;
  text-align: justify;
}
#homepage .tipset{
 margin-bottom: 0.5rem;
}
#homepage .bottom>img{
  border-radius: 0.05rem;
}
#rotation .commodity {
  width: 94%;
  height: 1.96rem;
  background: #FFFFFF;
  border-radius: 0.05rem;
  position: relative;
  margin-top: -0.45rem;
  display: flex;
  align-items: center;
}

#rotation .swiper-wrapper {
  display: flex;
  align-items: center;
}

#rotation .swiper-slide {
  width: 0.85rem;
  height: 1rem;
  background: #F3F5F7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 3px 4px 1px rgba(181, 187, 193, 0.41);
  transition: 300ms;
  transform: scale(0.90);
  margin: 0 0.15rem;
  padding: 0 0.14rem;
  box-sizing: border-box;
  border-radius: 0.05rem;
}

#rotation .swiper-slide-active,
#rotation .swiper-slide-duplicate-active {
  transform: scale(1.4) !important;
  box-shadow: 0px 3px 4px 1px rgba(181, 187, 193, 0.41);
  /* height: 1.43rem; */
  background: linear-gradient(0deg, #F3F5F7, #F3F5F7);
}
.swiper-slide-active .item-content,
.swiper-slide-duplicate-active .item-content {
  color: #B98E3E;
}

#rotation .imgbox {
  display: flex;
  align-items: center;
}

#rotation .swiper-slide .le-img {
  width: 0.5rem;
  height: 0.5rem;
}

#rotation .item-name {
  color: #242533;
  font-size: 0.08rem;
  text-align: center;
  margin-top: 0.1rem;
}

/* 閸忔垶宕查幐澶愭尦 */
#rotation .exchangeBtn {
  width: 3.49rem;
  height: 0.42rem;
  background: #F98F5B;
  border-radius: 0.21rem;
  margin-top: 0.24rem;
  margin-bottom: 0.24rem;
  color: #AAAAAA;
  font-size: 0.19rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04rem;
  padding-left: 0.04rem;
}
#rotation .noexchangeBtn{
background: #cacccc!important;
}
.listcommity {
  list-style: none;
}

/* 閸掓銆冮幒鎺斿 */
#list .listcommity {
  width: 94%;
  /* height: 100px; */
  position: relative;
  margin-top: -0.45rem;
}

#list .listcommity li {
  width: 100%;
  height: 0.6rem;
  border-radius: 0.05rem;
  padding: 0.14rem;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 0.07rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

#list .listcommity li div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;

}

#list .listcommity li img {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.23rem;
  border-radius: 0.25rem;
  box-shadow: 0rem .01rem .1rem rgba(181, 187, 193, 0.41);
}

#list .listcommity li font {
  font-size: 0.15rem;
  color: #151515;
  max-width: 2rem;
  margin-right: 0.14rem;
}

#list .listcommity li span {
  width: 0.72rem;
  height: 0.29rem;
  line-height: 0.29rem;
  border-radius: 0.145rem;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
#list .listcommity li .begin{
  font-size: 0.12rem;
  color: #AAAAAA;
}
#list .listcommity .bindexchange{
  background: #EBEBEB;
  color: #AAAAAA;
}
.changegray{
  -webkit-filter: grayscale(1); /* Webkit */  
  filter: gray; /* IE6-9 */    
  filter: grayscale(1); 
  color: #c5c4c4!important;
 
}
.changegray img{
  opacity: 0.6;
}
img.changegray{
  opacity: 0.6;
}
.changegray  font{
  color: #c5c4c4!important;
}
#matrix,#list,#rotation{
  /* height:calc(100vh); */
  /* overflow-y: auto; */
}
/* 閻晠妯€閹烘帞澧<E5B89E> */
#matrix .listcommity {
  width: 94%;
  position: relative;
  margin-top: -0.45rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #fff;
  padding: 0.23rem;
  box-sizing: border-box;
  border-radius: 0.05rem;


}

#matrix .listcommity li {
  width: 0.92rem;
  display: flex;
  flex-direction: column;
  margin: 0 0 0.17rem 0;
  border-radius: 0.05rem;
  position: relative;
}
/* //鍟嗗搧鐭╅樀鍥捐緣 */

#matrix .listcommity li:nth-child(3n+2) {
 margin-right:calc((100% - 0.92*3rem)/2);
  margin-left:calc((100% - 0.92*3rem)/2);
}

#matrix .listcommity li img {
  width: 0.58rem;
  height: 0.58rem;
}

#matrix .listcommity li div {
  width: 100%;
  height: 0.89rem;
  padding: 0.16rem;
  box-sizing: border-box;
  background: #F9FAFA;
  display: flex;
  position: relative;
}
#matrix .listcommity li .goodsIcon{
  position: absolute;
  left: 0;
  top: 0;
 width: 100%;
 height: 100%;
  display: flex;
  justify-content: flex-end;
}
#matrix .listcommity li .goodsIcon>img{
  position: absolute;
  right: 0;
  z-index: 88;
}
#matrix .listcommity li font {
  color: #242533;
  padding-top: 8px;
  font-size: 0.12rem;
  line-height: 0.18rem;
  text-align: center;
}

/* 瀵懓鍤锟<EE9BBC> */
.mask {
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 99;
  right: 0;
}

.ipt_frame {
  width: 100%;
  background: #fff;
  position: absolute;
  bottom: -20px;
  opacity:0;
  left: 0;
  max-height: 70%;
  overflow-y: auto;
  z-index: -1;
  padding: 0.37rem 0.29rem;
  box-sizing: border-box;
  transition: all .4s;
}
.ipt_frame.active{
  bottom: 0;
  opacity: 1;
  z-index: 999;
  overflow-y: auto;
}
.ipt_frame img{
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  top:0.24rem;
  right:0.25rem;
}
.ipt_frame h3 {
  font-size: 0.23rem;
  font-weight: bold;
  color: #060606;
  padding-bottom: 0.28rem;
}
.bottomBtn{
  position: fixed;
  bottom: 0rem;
  z-index: 88;
  left:50%;
  margin-left: -1.745rem;
}
.ipt_frame>div {
  display: flex;
  flex-direction: column;
}

.ipt_frame>div input {
  width: 100%;
  height: 0.42rem;
  border-radius: 0.42rem;
  outline: none;
  border: 0;
  background: #F3F5F7;
  margin-bottom: 0.18rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  line-height: 0.42rem;
  font-size: 0.15rem;
  box-sizing: border-box;
}

.ipt_frame>div input::placeholder {
  color: #242533;
}

.sureBtn {
  width: 100%;
  height: 0.42rem;
  line-height: 0.42rem;
  background: #F98F5B;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.42rem;
  margin-top: 0.15rem;
  font-size: 0.18rem;
  color: #FFFFFF;
}

/* 閸楁洘娼幓鎰仛 */
.prompt{
  display: inline-block;
  min-width: 50%;
  padding: 0.08rem;
  background: rgba(0, 0, 0, 0);
  border-radius: 0.2rem;
  color: #fff;
  position: fixed;
  top: 20%;
  left: -150%;
  margin-left: -25%;
  text-align: center;
  transition: left .2s;
  z-index: 99999;
}
.proactive{
  left: 50%;
  background: rgba(0, 0, 0, 0.7);
}
.saleNull{
  width: 90%;
  height: calc(100% - 1.6rem);
  position: absolute;
  z-index: 666;
  background: #f4f6f9;
  margin-top: -0.45rem;
  box-shadow: 0rem .01rem .1rem rgba(181, 187, 193, 0.41);
  border-radius:5px;
  margin-left: 5%;

}
@media screen and (min-width:600px){
  height: 6rem;
}
.saleNull img{
  width:2.5rem;
  margin: 50% 0% 50% 10%;
}

/* 瀵懓鍤锟<EE9BBC> */
.popboxshow{
  width: 2.45rem;
  height: 2.27rem;
  background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/fail.png') no-repeat;
  background-size: contain;
  position: fixed;
  top: 500%;
  left: 50%;
  z-index: 99;
  transition: all 0.2s;
}
.successbox{
  background: url('https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/success.png') no-repeat;
  background-size: contain;
}
.popboxshow.active{
  top: 25%;
  margin-left: -1.225rem;

}
.popboxshow>div{
 position: absolute;
 top:1rem;
  width: 80%;
  left: 10%;
  font-size: 0.15rem;
  color: #57300D;
  line-height: 0.23rem;
  text-align: center;
  height: 1rem;
}
.popboxshow>.tip{
  position: absolute;
  top: 0.93rem;
   width: 90%;
   left: 5%;
   height: 1.15rem;
   font-size: 0.14rem;
   color: #57300D;
   line-height: 0.23rem;
   text-align: center;
 }
 .errbox>div,.successbox>div{
  top: 1.15rem;
  height: 0.9rem;
}
.popboxshow>div span{
  display: inline-block;
  width: 100%;
  height: 0.31rem;
  background: linear-gradient(0deg, #DAA66E 0%, #F8D2AE 100%);
  border-radius: 0.31rem;
  line-height: .31rem;
  color: #fff;
  margin-top: 0.2rem;
  /* background: #ff0; */
  position: absolute;
  bottom:0;
  left: 0;
}
.errbox>div span,.successbox>div span{
  margin-top: 0.2rem;
}
.popboxshow>.tip .yettip{
 margin-top: 0.1rem;
}
.popboxshow>.tip .yetexchange{
  margin-top: 0.42rem;
}
.closed{
  width: 0.26rem;
  height: 0.26rem;
  position: fixed;
  z-index: 999;
  left: 50%;
  margin-left: -.13rem;
  top: 25%;
  margin-top: 2.6rem;
}
.imgitemMask{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
#rotation .imgitemMask span{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   display: flex;
  justify-content: flex-end;
  
}
.oneItem{
  overflow: visible!important;
}
#rotation .imgitemMask span img{
  width: 0.56rem;
  height: 0.56rem;
  position: absolute;
  right: 0;
  z-index: 88;
  top: 0;
}
/* 立即兑换页 */
#exchangePage{
  font-size: 0.14rem;
  height: 100vh;
  background: #fff;
}
#exchangePage .about-good{
    width: 100%;
    height:100vw;
    background:rgb(218, 223, 226);
    font-size: 0.14rem;
    position: relative;
}
#exchangePage .about-good>span{
  position: absolute;
  top: 0.1rem;
  left:0.1rem;
}
#exchangePage .about-good>span>img{
  width: 0.4rem;
}
#exchangePage .about-good>img{
  width: 100%;
  height: 100%;
}
#exchangePage .ipt-acc{
  font-size: 0.15rem;
  width: 100%;
  padding: 0.3rem 0;
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  background: rgba(255,255,255,1);
  border-top: 0.08rem solid #F3F5F7;
  border-bottom: 0.08rem solid #F3F5F7;
}
#exchangePage .ipt-acc>p{
  display:flex;
  width: 90%;
  padding: 0.05rem 0.2rem;
  justify-content:space-between;
  align-items:center;
  box-sizing: border-box;
  background: #F3F5F7;
  border-radius: 0.2rem;
}
#exchangePage .ipt-acc>p>span{
  width:0.8rem;
}
#exchangePage .ipt-acc input{
  flex: 1;
  height:0.32rem;
  outline:none;
  padding-right:0.1rem;
  border:none;
  background: #F3F5F7;
  font-size: 0.15rem;

}
#exchangePage .ipt-acc input::placeholder{
  color:#BAC2CA;
}
/* BAC2CA */
#exchangePage .ipt-acc>p:last-child{
  margin-top: 0.15rem;
}
#exchangePage .desc-img{
  width:100%;
}
#exchangePage .exchange-btn{
  outline:none;
  border: 0;
  width:90%;
  position: fixed;
  height: 0.36rem;
  z-index: 8;
  bottom: 0.1rem;
  left: 5%;
  background: #D7D7D7;
  font-size: 0.15rem;
  border-radius:0.36rem;
}
.suspensionDom{
  width: 100%;
  height:100vh;
  background: #fff;
  position: relative;
}
.susTip{
  position: fixed;
  width: 0.6rem;
  right: 0.2rem;
  top: 0.2rem;
  z-index: 12;
}
.suspensionDom>h4{
  height: 0.5rem;
  font-size: 0.16rem;
  background: #f7f8f9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.suspensionDom>img{
  width: 0.3rem;
  position: absolute;
  left: 0.1rem;
  top:0.1rem;
}
.suspensionDom>div{
  padding: 0.25rem;
  box-sizing: border-box;
  line-height: 0.25rem;
  text-align: justify;
}
#exchangePage .swiper-container{
  width: 100%;
  height: 100%;
}
#exchangePage .swiper-slide>img{
  height: 100%;
}