学习使用vue实现规格选择实例（一），2024年最新2024Web前端大厂面试集合

html {

font-size: 42.66666px;

}

}

@media screen and (min-width: 360px) and (max-width: 374px) {

html {

font-size: 48px;

}

}

@media screen and (min-width: 375px) and (max-width: 383px) {

html {

font-size: 50px;

}

}

@media screen and (min-width: 384px) and (max-width: 399px) {

html {

font-size: 51.2px;

}

}

@media screen and (min-width: 400px) and (max-width: 413px) {

html {

font-size: 53.333335px;

}

}

@media screen and (min-width: 414px) {

html {

font-size: 55.2px;

}

}

.productBox {

position: fixed;

bottom: 0;

left: 0;

width: 100%;

background-color: #fff;

}

.productConten {

margin-bottom: 1rem;

}

.product-delcom {

padding: 0.24rem 7%;

color: #323232;

font-size: 0.26rem;

border-bottom: 1px solid #EEEEEE;

}

.product-footerlist {

margin-top: 0.1rem;

}

.product-footerlist li {

border: 1px solid #606060;

border-radius: 0.08rem;

color: #606060;

text-align: center;

padding: 0.04rem 0.16rem;

float: left;

margin-right: 0.16rem;

min-width: 0.96rem;

margin-bottom: 0.16rem;

}

.product-footerlist li.productActive {

background-color: #1A1A29;

color: #fff;

border: 1px solid #1A1A29;

}

.product-footerlist li.noneActive {

background-color: #ccc;

opacity: 0.4;

color: #000;

pointer-events: none;

}

.product-footer {

display: -webkit-box;

display: -webkit-flex;

display: flex;

-webkit-flex: 1;

-webkit-box-flex: 1;

flex: 1;

background-color: #1A1A29;

line-height: 1rem;

text-align: center;

}

.product-footer a {

-webkit-flex: 1;

-webkit-box-flex: 1;

flex: 1;

color: #fff;

font-size: 0.3rem;

text-decoration: none;

}

{{ProductItem.name}}

v-bind:class=“[oItem.isShow?‘’:‘noneActive’,subIndex[n] == index?‘productActive’:‘’]”>{{oItem.name}}

立即购买