.product .m { display: none; } .product .pc .list { width: 77.0833333333vw; position: relative; left: 50%; transform: translateX(-50%); } .product .list { display: flex; flex-wrap: wrap; } .product .list li { width: 17.7083333333vw; background-color: #fff; border-radius: 0.2604166667vw; box-sizing: border-box; border: 1px solid #e2e2e2; margin-right: 2.0833333333vw; margin-bottom: 2.0833333333vw; overflow: hidden; transition: all 0.3s ease-in-out; } .product .list li:nth-child(4n) { margin-right: 0; } .product .list li .thumb { width: 100%; height: 17.7083333333vw; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-color: #f9f9fb; } .product .list li .thumb img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .product .list li .info { display: flex; flex-direction: column; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 1.0416666667vw; width: 100%; height: 8.3333333333vw; text-align: center; } .product .list li .info .pdt-name, .product .list li .info .pdt-brief { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product .list li .info .pdt-name { font-size: 1.25vw; color: #262626; } .product .list li .info .pdt-brief { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9375vw; color: #666; } .product .list li .info .view { font-size: 0.8333333333vw; color: #00479d; border-bottom: 0.1041666667vw solid #00479d; } .product .list li .info .view::after { content: "\e628"; font-family: "iconfont"; font-weight: bold; } .product .list li:hover { border-color: transparent; box-shadow: 0 0 5.2083333333vw rgba(0, 0, 0, 0.1); } .product .list li:hover .pdt-name, .product .list li:hover .pdt-brief { color: #00479d; } .pdt-detail { width: 63.125vw; margin: 0 auto; } .pdt-detail .base-info { display: flex; width: 100%; margin-bottom: 3.6458333333vw; } .pdt-detail .base-info .big-pics { width: 26.0416666667vw; } .pdt-detail .base-info .big-pics .bigpic { width: 26.0416666667vw; height: 26.0416666667vw; margin-bottom: 1.0416666667vw; box-shadow: 0 0 2.6041666667vw rgba(0, 0, 0, 0.1); border-radius: 0.2604166667vw; } .pdt-detail .base-info .big-pics .bigpic .swiper-slide img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .pdt-detail .base-info .big-pics .thumbs { box-sizing: border-box; padding: 0 1.875vw; height: 5.2083333333vw; --swiper-navigation-sides-offset:0; } .pdt-detail .base-info .big-pics .thumbs .swiper-slide { width: 5.2083333333vw; height: 5.2083333333vw; box-sizing: border-box; border: 1px solid #e6e6e6; } .pdt-detail .base-info .big-pics .thumbs .swiper-slide img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .pdt-detail .base-info .big-pics .thumbs .swiper-button-prev, .pdt-detail .base-info .big-pics .thumbs .swiper-button-next { width: 1.1458333333vw; height: 5.2083333333vw; top: 0; margin-top: 0; background-color: #f7f7f7; opacity: 1; } .pdt-detail .base-info .big-pics .thumbs .swiper-button-prev::after, .pdt-detail .base-info .big-pics .thumbs .swiper-button-next::after { font-size: 0.625vw; } .pdt-detail .base-info .big-pics .thumbs .swiper-slide-thumb-active { border-color: #00479d; } .pdt-detail .base-info .info { width: 28.125vw; margin-left: 6.25vw; } .pdt-detail .base-info .info h2 { line-height: 2.3958333333vw; font-size: 1.7708333333vw; color: #00479d; margin-bottom: 1.0416666667vw; } .pdt-detail .base-info .info .tags { display: flex; flex-wrap: wrap; } .pdt-detail .base-info .info .tags span { display: inline-block; line-height: 1.3541666667vw; font-size: 0.7291666667vw; border: 1px solid #00479d; border-radius: 0.2083333333vw; margin-right: 0.3125vw; margin-bottom: 0.3125vw; padding: 0 0.625vw; opacity: 0.6; } .pdt-detail .base-info .info h3 { margin-top: 1.0416666667vw; margin-bottom: 0.5208333333vw; line-height: 1.5625vw; font-size: 0.9375vw; color: #000; } .pdt-detail .base-info .info .attr-name { line-height: 1.3541666667vw; font-size: 0.8333333333vw; color: #333; } .pdt-detail .base-info .info .attr-values { display: flex; flex-wrap: wrap; margin-bottom: 0.5208333333vw; margin-top: 0.3125vw; } .pdt-detail .base-info .info .attr-values span { display: inline-block; box-sizing: border-box; min-width: 2.0833333333vw; padding: 0 0.625vw; line-height: 1.3541666667vw; font-size: 0.7291666667vw; border: 1px solid #ccc; color: #333; margin-right: 0.3125vw; margin-bottom: 0.3125vw; border-radius: 0.2083333333vw; text-align: center; } .pdt-detail .base-info .info .attrs { display: flex; width: 100%; flex-wrap: wrap; } .pdt-detail .base-info .info .attrs li { display: inline-flex; align-items: center; width: 50%; height: 3.6458333333vw; border-bottom: 0.0520833333vw solid #ebebeb; font-size: 0.8333333333vw; color: #666; } .pdt-detail .base-info .info .pdt-btns { display: flex; height: 2.7083333333vw; margin: 1.4583333333vw 0 2.0833333333vw 0; } .pdt-detail .base-info .info .pdt-btns .item { display: inline-flex; width: 33.33%; align-items: center; font-size: 0.7291666667vw; color: #666; } .pdt-detail .base-info .info .pdt-btns .item:nth-child(2) { justify-content: center; border-left: 0.0520833333vw solid #ebebeb; border-right: 0.0520833333vw solid #ebebeb; } .pdt-detail .base-info .info .pdt-btns .item:nth-child(2) span { text-align: center; font-size: 0.625vw; } .pdt-detail .base-info .info .pdt-btns .item:nth-child(3) { justify-content: flex-end; } .pdt-detail .base-info .info .pdt-btns .item .iconfont { font-size: 1.5625vw; color: #d9d9d9; margin-right: 0.5208333333vw; } .pdt-detail .base-info .info .zixun { display: flex; width: 13.6458333333vw; height: 2.9166666667vw; justify-content: center; align-items: center; background-color: #00479d; border-radius: 0.2604166667vw; color: #fff; font-size: 0.8333333333vw; } .pdt-detail .base-info .info .zixun::before { font-size: 0.9375vw; margin-right: 0.5208333333vw; } .pdt-detail .desc { background-color: #fff; box-shadow: 0 0 2.6041666667vw rgba(0, 0, 0, 0.05); overflow: hidden; border-radius: 0.2604166667vw; } .pdt-detail .desc .title { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5625vw; height: 2.9166666667vw; font-size: 0.9375vw; background-color: #00479d; color: #fff; } .pdt-detail .desc .content { padding: 2.34375vw; line-height: 1.7708333333vw; font-size: 0.8333333333vw; color: #4c4c4c; } @media screen and (max-width: 768px) { .product .pc { display: none; } .product .m { display: block; } .product .m .list { justify-content: space-between; } .product .m .list li { width: 43.2vw; margin-right: 0; margin-bottom: 4vw; border-radius: 0.6666666667vw; } .product .m .list li .thumb { height: 42.9333333333vw; } .product .m .list li .info { height: 23.4666666667vw; padding: 4vw 2.6666666667vw; } .product .m .list li .info .pdt-name { font-size: 4vw; } .product .m .list li .info .pdt-brief { font-size: 2.9333333333vw; } .product .m .list li .info .view { font-size: 2.4vw; } .detail { padding: 8vw 0; } .detail .pdt-detail { width: 100%; } .detail .pdt-detail .base-info { flex-direction: column; padding: 0 4.6666666667vw; margin-bottom: 0; box-sizing: border-box; } .detail .pdt-detail .base-info .big-pics { width: 100%; margin-bottom: 1.6vw; } .detail .pdt-detail .base-info .big-pics .bigpic { width: 90.6666666667vw; height: 90.6666666667vw; margin-bottom: 4.2666666667vw; } .detail .pdt-detail .base-info .big-pics .thumbs { height: 18.1333333333vw; padding: 0 6.4vw; } .detail .pdt-detail .base-info .big-pics .thumbs .swiper-slide { height: 18.1333333333vw; } .detail .pdt-detail .base-info .big-pics .thumbs .swiper-button-prev, .detail .pdt-detail .base-info .big-pics .thumbs .swiper-button-next { width: 3.7333333333vw; height: 18.1333333333vw; } .detail .pdt-detail .base-info .big-pics .thumbs .swiper-button-prev::after, .detail .pdt-detail .base-info .big-pics .thumbs .swiper-button-next::after { font-size: 2.1333333333vw; } .detail .pdt-detail .base-info .info { margin: 0; width: 100%; } .detail .pdt-detail .base-info .info h2 { line-height: 12.2666666667vw; font-size: 5.0666666667vw; margin-bottom: 0; } .detail .pdt-detail .base-info .info .attrs li { height: 10.4vw; font-size: 3.2vw; } .detail .pdt-detail .base-info .info .pdt-btns { height: 8vw; margin: 3.7333333333vw 0 8.8vw 0; } .detail .pdt-detail .base-info .info .pdt-btns .item { width: auto; flex-grow: 1; justify-content: center !important; font-size: 2.4vw; } .detail .pdt-detail .base-info .info .pdt-btns .item:nth-child(2) span { font-size: 0.8333333333vw; } .detail .pdt-detail .base-info .info .pdt-btns .item .iconfont { font-size: 5.3333333333vw; margin-right: 1.6vw; } .detail .pdt-detail .base-info .info .zixun { display: none; } .detail .pdt-detail .desc .title { width: 100%; height: 11.2vw; padding: 0 4.6666666667vw; font-size: 3.7333333333vw; } .detail .pdt-detail .desc .content { padding: 4.6666666667vw; line-height: 5.3333333333vw; font-size: 3.2vw; } } @media screen and (min-width: 769px) and (max-width: 1400px) { .pdt-detail { width: 100%; } .pdt-detail .base-info .big-pics { width: 32vw; } .pdt-detail .base-info .big-pics .bigpic { width: 32vw; height: 32vw; } .pdt-detail .base-info .big-pics .thumbs { height: 6.2vw; } .pdt-detail .base-info .big-pics .thumbs .swiper-slide { width: 6.2vw; height: 6.2vw; } .pdt-detail .base-info .big-pics .thumbs .swiper-button-prev, .pdt-detail .base-info .big-pics .thumbs .swiper-button-next { height: 6.2vw; } .pdt-detail .base-info .big-pics .thumbs .swiper-button-prev::after, .pdt-detail .base-info .big-pics .thumbs .swiper-button-next::after { font-size: 1vw; } .pdt-detail .base-info .info { flex-grow: 1; } .pdt-detail .base-info .info h2 { line-height: 4vw; font-size: 2.6666666667vw; } .pdt-detail .base-info .info .attrs li { font-size: 1.3333333333vw; } .pdt-detail .base-info .info .pdt-btns { height: 4vw; } .pdt-detail .base-info .info .pdt-btns .item { font-size: 1.0666666667vw; } .pdt-detail .base-info .info .pdt-btns .item:nth-child(2) span { font-size: 0.9333333333vw; } .pdt-detail .base-info .info .zixun { height: 3.7333333333vw; font-size: 1.3333333333vw; } .pdt-detail .base-info .info .zixun::before { font-size: 1.6vw; } .pdt-detail .desc .title { height: 4vw; font-size: 1.4vw; } .pdt-detail .desc .content { line-height: 2.2vw; font-size: 1.3vw; } }/*# sourceMappingURL=pdtlist.css.map */