.list-annex-div { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; max-width: 100%; } .list-annex-div .annex-item { margin-right: 20px; padding: 0px 2.29vw; cursor: pointer; font-size: clamp(12px, 0.93vw, 18px); font-family: pingfang_heavy; color: #8c8c8c; line-height: 2.22em; text-decoration: none; border: 1px solid #c6c6c6; transition: all 0.25s; } .list-annex-div .annex-item:hover { color: #fff; border-color: #8c8c8c; background-color: #8c8c8c; } .list-type-img-text { width: 100%; } .list-type-img-text .list-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; width: 100%; margin: 230px 0px 0px; margin-top: clamp(36px, 11.97vw, 230px); } .list-type-img-text .list-item:hover .right-arrow-div { background-color: #ea6106; } .list-type-img-text .list-item:hover .right-arrow-div .iconfont { color: #fff; } @media screen and (max-width: 768px) { .list-type-img-text .list-item.goods-list-item { margin-top: 0px; margin-bottom: clamp(72px, 22.81vw, 146px); } } .list-type-img-text .list-item .img-div { flex-shrink: 0; width: clamp(150px, 26.14vw, 502px); height: clamp(90px, 15.62vw, 300px); background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: #d9d9d9; } .list-type-img-text .list-item .content-div { flex-grow: 1; padding: 0px 54px; padding-left: clamp(25px, 2.81vw, 54px); padding-right: clamp(25px, 2.81vw, 54px); max-width: 100%; width: 100%; height: clamp(90px, 15.62vw, 300px); overflow: hidden; background: #fff; } .list-type-img-text .list-item .content-div .title-div, .list-type-img-text .list-item .content-div .desc-div, .list-type-img-text .list-item .content-div .line-div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; width: 100%; height: 50%; padding-top: clamp(0px, 1.25vw, 24px); text-decoration: none; } .list-type-img-text .list-item .content-div .title-div .text-div, .list-type-img-text .list-item .content-div .desc-div .text-div, .list-type-img-text .list-item .content-div .line-div .text-div { overflow: hidden; } .list-type-img-text .list-item .content-div .line-div { height: 1px; margin: 38px 0px; background: #d9d9d9; } .list-type-img-text .list-item .content-div .title-div { overflow: hidden; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #d9d9d9; } .list-type-img-text .list-item .content-div .title-div.goods-title-div { height: 60%; justify-content: flex-start; } @media screen and (max-width: 768px) { .list-type-img-text .list-item .content-div .title-div.goods-title-div { height: 100%; border: 0px; } } .list-type-img-text .list-item .content-div .title-div.goods-title-div .goods-title-title-div { width: 100%; height: 40%; border-bottom: 1px solid #d9d9d9; } .list-type-img-text .list-item .content-div .title-div.goods-title-div .desc-div { height: 60%; } .list-type-img-text .list-item .content-div .title-div .title-h2 { margin: 0px; font-size: clamp(12px, 1.45vw, 28px); color: #666; letter-spacing: clamp(2px, 0.2vw, 4px); font-family: pingfang_heavy; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-type-img-text .list-item .content-div .desc-p { font-size: 18px; line-height: 28px; color: #707070; } .list-type-img-text .list-item .content-div .desc-div { font-size: 18px; font-size: clamp(12px, 0.93vw, 18px); color: #707070; letter-spacing: 2px; overflow: hidden; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* 标准产品页的按钮样式 */ } @media screen and (max-width: 768px) { .list-type-img-text .list-item .content-div .desc-div.goods-desc-div { position: absolute; left: 0px; bottom: -42px; } } .list-type-img-text .list-item .content-div .desc-div.flex-div { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } .list-type-img-text .list-item .content-div .desc-div .text-div { color: #707070; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .list-type-img-text .list-item .content-div .desc-div .product_button { display: block; width: clamp(84px, 9.37vw, 120px) !important; height: clamp(24px, 2.08vw, 40px); margin-right: clamp(8px, 1.56vw, 30px); margin-bottom: clamp(4px, 0.78vw, 15px); font-size: clamp(12px, 0.93vw, 18px); text-decoration: none; text-align: center; color: #8c8c8c; line-height: clamp(24px, 2.08vw, 40px); font-family: 'pingfang_heavy'; overflow: hidden; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #cbcbcb; background: #fffafa; } @media screen and (max-width: 768px) { .list-type-img-text .list-item .content-div .desc-div .product_button { width: min(28.12vw, 140px) !important; height: 24px; margin-right: 8px; margin-bottom: 4px; font-size: 12px; line-height: 24px; } } .list-type-img-text .list-item .content-div .desc-div .product_button.active { color: #fff; border-color: #686868; background: #686868; } .list-type-img-text .list-item .content-div .desc-div .product_button.active a { color: #fff; } .list-type-img-text .list-item .content-div .desc-div .product_button:hover { text-decoration: none; color: #fff; background: #888; } .list-type-img-text .list-item .content-div .desc-div .product_button:hover a { color: #fff; } .list-type-img-text .list-item .content-div .desc-div .product_button a { color: #8c8c8c; text-decoration: none; } .list-type-img-text .list-item .content-div .use-arrow { padding-right: clamp(20px, 2.5vw, 48px); } .list-type-img-text .list-item .content-div .use-arrow .right-arrow-div { bottom: clamp(12px, 1.25vw, 24px); } .list-type-text-line .list-item { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin: 92px 0px; margin-top: clamp(32px, 4.79vw, 92px); margin-bottom: clamp(8px, 4.79vw, 92px); color: #666; font-size: clamp(12px, 1.45vw, 28px); } @media screen and (max-width: 768px) { .list-type-text-line .list-item { border-bottom: 1px dashed #d0d0d0; } .list-type-text-line .list-item:nth-last-child(1) { border-bottom-width: 0px; } } .list-type-text-line .list-item:hover .right-arrow-div { background-color: #ea6106; } .list-type-text-line .list-item:hover .right-arrow-div .iconfont { color: #fff; } .list-type-text-line .list-item .a-div { flex-shrink: 1; flex-grow: 1; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; } .list-type-text-line .list-item .a-div a { color: #666; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-family: pingfang_heavy; } .list-type-text-line .list-item .date-div { flex-shrink: 0; padding: 0px 72px; padding-left: clamp(27px, 3.75vw, 72px); padding-right: clamp(27px, 3.75vw, 72px); } .list-type-text-line .list-item .right-arrow-div { position: relative; } .list-type-text-line .list-item:hover { color: #ea6106; } .list-type-text-line .list-item:hover .a-div a { color: #ea6106; } .list-type-text-line .list-item:hover .right-arrow-div { background-color: #ea6106; } .list-type-text-line .list-item:hover .right-arrow-div .iconfont { color: #fff; } .list-type-big-img { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; margin-top: 10.41vw; } @media screen and (max-width: 768px) { .list-type-big-img { margin-top: 0px; } } .list-type-big-img .list-item { width: calc((100% - 1.25vw * 2) / 3); height: auto; margin-right: 1.25vw; margin-bottom: clamp(36px, 8.07vw, 155px); } @media screen and (max-width: 768px) { .list-type-big-img .list-item { width: calc((100% - 8px * 2) / 3); margin-right: 8px; margin-bottom: 36px; } } .list-type-big-img .list-item:nth-child(3n) { margin-right: 0px; } .list-type-big-img .list-item .img-div { width: 100%; height: clamp(72px, 20.83vw, 400px); cursor: pointer; background-size: cover; background-repeat: no-repeat; background-position: center center; } .list-type-big-img .list-item .content-title-div { width: 100%; margin-top: clamp(10px, 1.04vw, 20px); cursor: pointer; font-size: clamp(12px, 1.45vw, 28px); letter-spacing: 0.14em; color: #676767; line-height: 1.71em; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-type-banner-box { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; margin: 150px 0px; margin-top: clamp(60px, 7.81vw, 150px); margin-bottom: clamp(60px, 7.81vw, 150px); } .list-type-banner-box .list-item { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position: relative; padding: 0px 50px; padding-left: clamp(10px, 2.6vw, 50px); padding-right: clamp(10px, 2.6vw, 50px); margin-right: calc(1.65vw / 2); margin-bottom: clamp(12px, 1.66vw, 32px); width: calc((100% - 1.65vw) / 3); height: clamp(70px, 10.41vw, 200px); cursor: pointer; transition: all 0.25s; border: 5px solid #aeaeae; background-color: #686868; } @media screen and (max-width: 768px) { .list-type-banner-box .list-item { width: calc((100% - 10px) / 3); margin-bottom: 12px; } } .list-type-banner-box .list-item:hover { border-color: #efaa7d; background-color: #ea6106; } .list-type-banner-box .list-item:nth-child(3n) { margin-right: 0px; } .list-type-banner-box .list-item .bg-div { position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: right bottom; background-size: auto 90%; } .list-type-banner-box .list-item .text-div { z-index: 1; max-width: 100%; color: #fff; font-size: clamp(12px, 1.25vw, 24px); letter-spacing: 2px; overflow: hidden; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }