753 lines
12 KiB
CSS
753 lines
12 KiB
CSS
* {
|
||
margin: 0 auto;
|
||
padding: 0;
|
||
font-family: HYQiHei;
|
||
list-style-type: none
|
||
}
|
||
|
||
html {
|
||
font-size: 26.66666667vw;
|
||
height: 100%;
|
||
}
|
||
|
||
|
||
body {
|
||
height: 100%;
|
||
-webkit-text-size-adjust: 100%;
|
||
-ms-text-size-adjust: 100%;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
|
||
@media screen and (min-width:900px) {
|
||
html {
|
||
transform: scale(0.3);
|
||
background: #fff;
|
||
transform-origin: 50% 0px 0px;
|
||
height: 6rem;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#homepage {
|
||
height: 6rem !important;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.mask {
|
||
height: 6rem !important;
|
||
}
|
||
|
||
#matrix,
|
||
#list {
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.exchange-btn {
|
||
top: 5.5rem !important;
|
||
}
|
||
|
||
.suspensionDom {
|
||
height: 6rem;
|
||
}
|
||
}
|
||
|
||
.main-body {
|
||
overflow: scroll;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
position: relative;
|
||
margin-top: -0.4rem;
|
||
z-index: 997;
|
||
}
|
||
|
||
|
||
#homepage {
|
||
min-width: 100%;
|
||
font-size: 0.14rem;
|
||
min-height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.swiper-container {
|
||
height: 2.2rem;
|
||
}
|
||
|
||
.swiper-pagination-bullet {
|
||
width: 0.08rem;
|
||
height: 0.08rem;
|
||
margin: 0.03rem !important;
|
||
}
|
||
|
||
/* 閺夌儐鍠楅幐锟<E5B990> */
|
||
.topBanner {
|
||
width: 100%;
|
||
min-height: 2.41rem;
|
||
position: relative;
|
||
}
|
||
|
||
.search-box {
|
||
margin: 0;
|
||
}
|
||
|
||
.topBanner .search {
|
||
width: 3.08rem;
|
||
height: 0.32rem;
|
||
background: #FFFAF5;
|
||
border-radius: 0.15rem;
|
||
outline: none;
|
||
border: 0;
|
||
position: relative;
|
||
padding: 0 0.15rem;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
|
||
.search:focus+.search-img {
|
||
display: none;
|
||
}
|
||
|
||
.topBanner .search-img {
|
||
width: 0.14rem;
|
||
height: 0.14rem;
|
||
position: absolute;
|
||
left: 19%;
|
||
top: 36%;
|
||
z-index: 9999;
|
||
|
||
}
|
||
|
||
.topBanner .search::placeholder {
|
||
font-size: 0.14rem;
|
||
color: #ADADAD;
|
||
}
|
||
|
||
.topBanner .backpresty {
|
||
width: 0.31rem;
|
||
height: 0.31rem;
|
||
margin: 0
|
||
}
|
||
|
||
.topBanner .banner {
|
||
height: 2.41rem;
|
||
margin: 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 {
|
||
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;
|
||
margin-bottom: 0.14rem;
|
||
}
|
||
|
||
#rotation {
|
||
margin-top: 0.1rem;
|
||
}
|
||
|
||
#rotation .commodity {
|
||
width: 94%;
|
||
height: 2.2rem;
|
||
border-radius: 0.05rem;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
}
|
||
|
||
#rotation .swiper-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
#rotation .swiper-slide {
|
||
width: 0.9rem;
|
||
height: 1.01rem;
|
||
background: #FFF3EC;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
box-shadow: 0px 4px 5px 2px rgba(181, 187, 193, 0.41);
|
||
transition: 300ms;
|
||
transform: scale(0.90);
|
||
margin: 0 0.2rem;
|
||
padding: 0 0.02rem;
|
||
box-sizing: border-box;
|
||
border-radius: 0.05rem;
|
||
}
|
||
|
||
|
||
|
||
#rotation .price {
|
||
font-size: 0.07rem;
|
||
transform: scale(0.6);
|
||
text-decoration: line-through;
|
||
color: #A9A9A9;
|
||
-webkit-transform: scale(0.6);
|
||
-moz-transform: scale(0.6);
|
||
-ms-transform: scale(0.6);
|
||
-o-transform: scale(0.6);
|
||
margin-bottom: -0.07rem;
|
||
}
|
||
|
||
#rotation .current-price {
|
||
font-size: 0.15rem;
|
||
color: #EA4F3F;
|
||
font-weight: 600;
|
||
margin-left: -0.03rem;
|
||
}
|
||
|
||
#rotation .money {
|
||
font-size: 0.07rem;
|
||
transform: scale(0.7);
|
||
}
|
||
|
||
#rotation .sign {
|
||
font-size: 0.06rem;
|
||
transform: scale(0.6);
|
||
color: #EA4F3F;
|
||
}
|
||
|
||
#rotation .swiper-slide-active,
|
||
#rotation .swiper-slide-duplicate-active {
|
||
transform: scale(1.6) !important;
|
||
box-shadow: 0px 3px 4px 1px rgba(181, 187, 193, 0.41);
|
||
}
|
||
|
||
|
||
.swiper-slide-active .item-content,
|
||
.swiper-slide-duplicate-active .item-content {
|
||
color: #B98E3E;
|
||
}
|
||
|
||
#rotation .imgbox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
#rotation .swiper-slide .le-img {
|
||
width: 0.46rem;
|
||
height: 0.46rem;
|
||
}
|
||
|
||
#rotation .item-name {
|
||
color: #0A0A0A;
|
||
font-size: 0.09rem;
|
||
text-align: center;
|
||
margin-top: 0.04rem;
|
||
transform: scale(0.9);
|
||
margin-bottom: -0.02rem;
|
||
}
|
||
|
||
/* 闁稿繑鍨跺畷鏌ュ箰婢舵劖灏<E58A96> */
|
||
.exchangeBtn {
|
||
width: 3.37rem;
|
||
height: 0.45rem;
|
||
background: #F98F5B;
|
||
border-radius: 0.21rem;
|
||
margin-bottom: 0.24rem;
|
||
margin-top: 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;
|
||
}
|
||
|
||
/* 闁告帗顨夐妴鍐箳閹烘柨顣<E69FA8> */
|
||
#list .listcommity {
|
||
width: 94%;
|
||
position: relative;
|
||
}
|
||
|
||
#list .listcommity li {
|
||
width: 100%;
|
||
height: 0.74rem;
|
||
border-radius: 0.07rem;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
margin-bottom: 0.07rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
margin: 0.14rem 0;
|
||
box-shadow: 0px 1px 5px 1px rgba(223, 223, 223, 0.77);
|
||
overflow: hidden;
|
||
|
||
}
|
||
|
||
#list .listcommity li .box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
margin: 0;
|
||
|
||
}
|
||
|
||
#list .listcommity li img {
|
||
width: 0.48rem;
|
||
height: 0.47rem;
|
||
box-shadow: 0rem .01rem .1rem rgba(181, 187, 193, 0.41);
|
||
border: 0.08rem solid #fff;
|
||
border-radius: 100%;
|
||
background: #fff;
|
||
}
|
||
|
||
#list .listcommity li .imgBG {
|
||
background-color: #FFF3EC;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 0.74rem;
|
||
height: 0.74rem;
|
||
margin-right: 0.12rem;
|
||
}
|
||
|
||
#list .listcommity li font {
|
||
font-size: 0.14rem;
|
||
color: #0A0A0A;
|
||
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 .details {
|
||
display: flex;
|
||
margin-top: 0.1rem;
|
||
align-items: flex-end;
|
||
|
||
}
|
||
|
||
#list .listcommity .sign,
|
||
#list .listcommity .price {
|
||
color: #EA4F3F
|
||
}
|
||
|
||
#list .listcommity .sign,
|
||
#list .listcommity .coupon {
|
||
font-size: 0.12rem;
|
||
}
|
||
|
||
#list .listcommity .price {
|
||
font-size: 0.25rem;
|
||
line-height: 0.24rem;
|
||
margin-left: -0.02rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
#list .listcommity .original-price {
|
||
font-size: 0.12rem;
|
||
text-decoration: line-through;
|
||
color: #A9A9A9;
|
||
margin-left: 0.14rem;
|
||
}
|
||
|
||
|
||
|
||
#list .listcommity .detail #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 {
|
||
margin-top: 0.1rem;
|
||
}
|
||
|
||
|
||
|
||
#matrix .listcommity {
|
||
width: 94%;
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 33.3%);
|
||
grid-gap: 0.2rem 0;
|
||
background: #fff;
|
||
border-radius: 0.05rem;
|
||
padding: 0.2rem 0;
|
||
box-sizing: border-box;
|
||
justify-items: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#matrix .listcommity li {
|
||
text-align: center;
|
||
width: 1.05rem;
|
||
height: 1.85rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 0.05rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 0.01rem solid #F9FAFA;
|
||
}
|
||
|
||
|
||
#matrix .listcommity li img {
|
||
width: 0.58rem;
|
||
height: 0.58rem;
|
||
}
|
||
|
||
#matrix .listcommity li .goodsNum-frist {
|
||
width: 100%;
|
||
height: 1rem;
|
||
padding: 0.16rem;
|
||
box-sizing: border-box;
|
||
background: #FFF3EC;
|
||
display: flex;
|
||
position: relative;
|
||
margin-bottom: 0.1rem;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#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 .img {
|
||
width: 0.6rem;
|
||
height: 0.6rem;
|
||
background: #fff;
|
||
border-radius: 100%;
|
||
border: 0.1rem solid #fff;
|
||
}
|
||
|
||
#matrix .listcommity li font {
|
||
color: #0A0A0A;
|
||
font-size: 0.13rem;
|
||
line-height: 0.18rem;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
#matrix .listcommity .sign,
|
||
#matrix .listcommity .price {
|
||
color: #EA4F3F
|
||
}
|
||
|
||
#matrix .listcommity .sign {
|
||
font-size: 0.12rem;
|
||
margin-right: -0.02rem;
|
||
}
|
||
|
||
#matrix .listcommity .coupon {
|
||
display: inline-block;
|
||
font-size: 0.08rem;
|
||
transform: scale(0.9);
|
||
margin-left: -0.05rem;
|
||
}
|
||
|
||
#matrix .listcommity .detail-text {
|
||
padding: 0 0.02rem;
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
}
|
||
|
||
#matrix .listcommity .price {
|
||
font-size: 0.18rem;
|
||
line-height: 0.17rem;
|
||
margin-left: -0.02rem;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
#matrix .listcommity .original-price {
|
||
font-size: 0.12rem;
|
||
text-decoration: line-through;
|
||
color: #A9A9A9;
|
||
margin-top: 0.04rem;
|
||
margin-bottom: 0.04rem;
|
||
}
|
||
|
||
|
||
/* 鐎殿喚鎳撻崵顓烆浖閿燂拷 */
|
||
.mask {
|
||
background: rgba(0, 0, 0, 0.2);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 9999;
|
||
right: 0;
|
||
}
|
||
|
||
.bottomBtn {
|
||
position: fixed;
|
||
bottom: 0rem;
|
||
z-index: 998;
|
||
left: 50%;
|
||
margin-left: -1.745rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 闁告娲樺顖炲箵閹邦喓浠<E59693> */
|
||
.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%;
|
||
|
||
}
|
||
|
||
|
||
.saleNull img {
|
||
width: 2.5rem;
|
||
margin: 50% 0% 50% 10%;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
.suspensionDom {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: #fff;
|
||
position: relative;
|
||
}
|
||
|
||
.susTip {
|
||
position: fixed;
|
||
width: 0.3rem;
|
||
right: 0;
|
||
top: 0.8rem;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.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;
|
||
background: #fff;
|
||
line-height: 0.25rem;
|
||
text-align: justify;
|
||
}
|
||
|
||
|
||
|
||
.title {
|
||
font-size: 0.19rem;
|
||
color: #0A0A0A;
|
||
width: 94%;
|
||
margin: 0.20rem auto 0;
|
||
height: 0.3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.title>p {
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.or {
|
||
width: auto;
|
||
height: 100%;
|
||
margin: 0;
|
||
margin-right: 0.05rem;
|
||
}
|
||
|
||
|
||
|
||
|
||
.search-backpresty {
|
||
position: absolute;
|
||
top: 0rem;
|
||
z-index: 9999;
|
||
padding: 0.1rem 0.1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
background: red;
|
||
} |