795 lines
14 KiB
CSS
795 lines
14 KiB
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%;
|
||
} |