Browse Source

fix: 更新样式,添加!important以确保样式优先级

master
peijunlei 3 weeks ago
parent
commit
4267a53f5a
  1. 8
      public/themes/dist_static/static/css/common.css
  2. 402
      public/themes/dist_static/static/css/product.css

8
public/themes/dist_static/static/css/common.css

@ -956,8 +956,8 @@ body {
}@media (max-width: 576px) {
.section__header {
.section__title {
font-size: 28Px;
line-height: 34Px;
font-size: 28Px!important;
line-height: 34Px!important;
}
.section__title__sub {
@ -972,8 +972,8 @@ body {
}
.section__title {
font-size: 28Px;
line-height: 38Px;
font-size: 28Px!important;
line-height: 34Px!important;
}
.section__title--hero {

402
public/themes/dist_static/static/css/product.css

@ -345,7 +345,7 @@ body.is-p-subnav .site-header {
}
.p-advantage__desc {
margin: 0;
max-width: 45rem;
/* max-width: 45rem; */
color: var(--color-text-muted);
font-family: "MiSans VF", "PingFang SC", sans-serif;
font-size: var(--font-20);
@ -755,188 +755,188 @@ body.is-p-subnav .site-header {
.main-product #p-spec,
.main-product #p-download,
.main-product #p-related {
scroll-margin-top: 72Px;
scroll-margin-top: 72Px!important;
}
.main-product .s-btn {
min-width: 180Px;
min-height: 52Px;
font-size: 18Px;
min-width: 180Px!important;
min-height: 52Px!important;
font-size: 18Px!important;
}
.p-subnav {
height: 64Px;
height: 64Px!important;
}
.p-subnav__inner {
gap: 24Px;
gap: 24Px!important;
}
.p-subnav__title {
font-size: 18Px;
line-height: 26Px;
font-size: 18Px!important;
line-height: 26Px!important;
}
.p-subnav__links {
gap: 24Px;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 24Px!important;
justify-content: flex-start!important;
overflow-x: auto!important;
-webkit-overflow-scrolling: touch!important;
scrollbar-width: none!important;
}
.p-subnav__links::-webkit-scrollbar {
display: none;
display: none!important;
}
.p-subnav__link {
padding: 18Px 0;
font-size: 16Px;
line-height: 22Px;
padding: 18Px 0!important;
font-size: 16Px!important;
line-height: 22Px!important;
}
.p-subnav__cta {
min-width: 132Px;
height: 40Px;
padding: 0 16Px;
font-size: 15Px;
min-width: 132Px!important;
height: 40Px!important;
padding: 0 16Px!important;
font-size: 15Px!important;
}
.p-hero {
padding-top: 120Px;
padding-bottom: 56Px;
padding-top: 120Px!important;
padding-bottom: 56Px!important;
}
.p-hero__mark {
font-size: 220Px;
line-height: 1;
font-size: 220Px!important;
line-height: 1!important;
}
.p-hero__media {
width: min(360Px, 68vw);
width: min(360Px, 68vw)!important;
}
.p-intro {
padding-top: 72Px;
padding-top: 72Px!important;
}
.p-intro__inner {
grid-template-columns: 1fr;
gap: 40Px;
padding-bottom: 72Px;
grid-template-columns: 1fr!important;
gap: 40Px!important;
padding-bottom: 72Px!important;
}
.p-intro__visual {
position: static;
width: 100%;
align-items: stretch;
position: static!important;
width: 100%!important;
align-items: stretch!important;
}
.p-intro__gallery {
width: 100%;
max-width: none;
align-self: stretch;
width: 100%!important;
max-width: none!important;
align-self: stretch!important;
}
.p-intro__content {
gap: 48Px;
gap: 48Px!important;
}
.p-intro__block {
gap: 32Px;
gap: 32Px!important;
}
.p-feature__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr))!important;
}
.p-feature__item:nth-child(n) {
padding-left: 0;
padding-right: 24Px;
padding-left: 0!important;
padding-right: 24Px!important;
}
.p-feature__value {
font-size: 28Px;
line-height: 48Px;
font-size: 28Px!important;
line-height: 48Px!important;
}
.p-feature__value span {
font-size: 40Px;
font-size: 40Px!important;
}
.p-feature__value--text {
font-size: 40Px;
line-height: 48Px;
font-size: 40Px!important;
line-height: 48Px!important;
}
.p-feature__label {
font-size: 18Px;
line-height: 26Px;
font-size: 18Px!important;
line-height: 26Px!important;
}
.p-spec {
padding-top: 72Px;
padding-top: 72Px!important;
}
.p-spec__models {
flex-direction: column;
align-items: stretch;
gap: 16Px;
padding: 24Px 0;
flex-direction: column!important;
align-items: stretch!important;
gap: 16Px!important;
padding: 24Px 0!important;
}
.p-spec__models-label {
font-size: 18Px;
line-height: 26Px;
font-size: 18Px!important;
line-height: 26Px!important;
}
.p-spec__tabs {
flex: none;
justify-content: flex-start;
gap: 40Px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex: none!important;
justify-content: flex-start!important;
gap: 40Px!important;
overflow-x: auto!important;
-webkit-overflow-scrolling: touch!important;
scrollbar-width: none!important;
}
.p-spec__tabs::-webkit-scrollbar {
display: none;
display: none!important;
}
.p-spec__tab {
flex-shrink: 0;
gap: 12Px;
flex-shrink: 0!important;
gap: 12Px!important;
}
.p-spec__tab-name {
font-size: 20Px;
line-height: 28Px;
font-size: 20Px!important;
line-height: 28Px!important;
}
.p-spec__subtitle {
padding-top: 24Px;
padding-bottom: 24Px;
font-size: 18Px;
padding-top: 24Px!important;
padding-bottom: 24Px!important;
font-size: 18Px!important;
}
.p-spec__col-label {
width: 160Px;
width: 160Px!important;
}
.p-spec__col-sub {
width: 120Px;
width: 120Px!important;
}
.p-spec__table {
min-width: 560Px;
min-width: 560Px!important;
}
.p-spec__table th,
.p-spec__table td {
padding: 14Px 16Px;
font-size: 14Px;
line-height: 20Px;
padding: 14Px 16Px!important;
font-size: 14Px!important;
line-height: 20Px!important;
}
.p-download {
padding-top: 72Px;
padding-bottom: 72Px;
padding-top: 72Px!important;
padding-bottom: 72Px!important;
}
.p-download__inner {
grid-template-columns: 1fr;
gap: 40Px;
grid-template-columns: 1fr!important;
gap: 40Px!important;
}
.p-download__visual {
position: static;
min-height: 0;
order: -1;
padding: 16Px 0;
max-width: 100%;
position: static!important;
min-height: 0!important;
order: -1!important;
padding: 16Px 0!important;
max-width: 100%!important;
}
.p-download__visual img {
width: min(280Px, 55%);
width: min(280Px, 55%)!important;
}
.p-related {
padding-top: 56Px;
padding-bottom: 80Px;
padding-top: 56Px!important;
padding-bottom: 80Px!important;
}
.p-related__header {
flex-direction: column;
align-items: flex-start;
gap: 16Px;
flex-direction: column!important;
align-items: flex-start!important;
gap: 16Px!important;
}
.p-related .s-arrows {
display: none;
display: none!important;
}
.p-related__link {
padding: 28Px;
padding: 28Px!important;
}
.p-related__pagination {
margin-top: 32Px;
margin-top: 32Px!important;
}
}
@media (max-width: 576px) {
@ -944,217 +944,217 @@ body.is-p-subnav .site-header {
.main-product #p-spec,
.main-product #p-download,
.main-product #p-related {
scroll-margin-top: 64Px;
scroll-margin-top: 64Px!important;
}
.main-product .s-btn {
min-width: 160Px;
min-height: 48Px;
font-size: 16Px;
min-width: 160Px!important;
min-height: 48Px!important;
font-size: 16Px!important;
}
.p-subnav {
height: 56Px;
height: 56Px!important;
}
.p-subnav__title {
display: none;
display: none!important;
}
.p-subnav__inner {
gap: 16Px;
gap: 16Px!important;
}
.p-subnav__links {
gap: 20Px;
gap: 20Px!important;
}
.p-subnav__link {
padding: 16Px 0;
font-size: 14Px;
line-height: 20Px;
padding: 16Px 0!important;
font-size: 14Px!important;
line-height: 20Px!important;
}
.p-subnav__link::after {
height: 2Px;
height: 2Px!important;
}
.p-subnav__cta {
min-width: 0;
height: 36Px;
padding: 0 12Px;
font-size: 13Px;
min-width: 0!important;
height: 36Px!important;
padding: 0 12Px!important;
font-size: 13Px!important;
}
.p-hero {
padding-top: 88Px;
padding-bottom: 40Px;
min-height: unset;
padding-top: 88Px!important;
padding-bottom: 40Px!important;
min-height: unset!important;
}
.p-hero__mark {
font-size: 96Px;
font-size: 96Px!important;
}
.p-hero__media {
display: none;
width: min(260Px, 82vw);
margin-top: 16Px;
display: none!important;
width: min(260Px, 82vw)!important;
margin-top: 16Px!important;
}
.p-intro {
padding-top: 0;
padding-top: 0!important;
}
.p-intro__inner {
gap: 36Px;
padding-bottom: 0;
padding-bottom: 0!important;
}
.p-intro__content {
gap: 32Px;
gap: 32Px!important;
}
.p-intro__block {
gap: 24Px;
gap: 24Px!important;
}
.p-intro__gallery-pagination {
gap: 12Px;
gap: 12Px!important;
}
.p-intro__gallery-pagination .swiper-pagination-bullet {
width: 28Px;
height: 28Px;
width: 28Px!important;
height: 28Px!important;
}
.p-advantage__card {
padding: 24Px;
border-radius: 20Px;
padding: 24Px!important;
border-radius: 20Px!important;
}
.p-advantage__head {
margin-bottom: 16Px;
margin-bottom: 16Px!important;
}
.p-advantage__title {
font-size: 22Px;
line-height: 30Px;
font-size: 22Px!important;
line-height: 30Px!important;
}
.p-advantage__icon {
width: 36Px;
height: 36Px;
width: 36Px!important;
height: 36Px!important;
}
.p-advantage__desc {
font-size: 16Px;
line-height: 24Px;
font-size: 16Px!important;
line-height: 24Px!important;
}
.p-feature__grid {
grid-template-columns: 1fr;
grid-template-columns: 1fr!important;
}
.p-feature__item {
padding: 24Px 0;
padding: 24Px 0!important;
}
.p-feature__value, .p-feature__value--text {
font-size: 28Px;
line-height: 40Px;
margin-bottom: 12Px;
font-size: 28Px!important;
line-height: 40Px!important;
margin-bottom: 12Px!important;
}
.p-feature__value span, .p-feature__value--text span {
font-size: 36Px;
font-size: 36Px!important;
}
.p-feature__label {
font-size: 16Px;
line-height: 24Px;
font-size: 16Px!important;
line-height: 24Px!important;
}
.p-spec {
padding-top: 48Px;
padding-top: 48Px!important;
}
.p-spec__inner {
gap: 28Px;
gap: 28Px!important;
}
.p-spec__models {
top: 56Px;
gap: 12Px;
padding: 16Px 0;
top: 56Px!important;
gap: 12Px!important;
padding: 16Px 0!important;
}
.p-spec__label-wrapper {
gap: 8Px;
gap: 8Px!important;
}
.p-spec__label {
padding: 10Px 8Px;
min-width: unset;
padding: 10Px 8Px!important;
min-width: unset!important;
}
.p-spec__tabs {
gap: 24Px;
justify-content: center;
gap: 24Px!important;
justify-content: center!important;
}
.p-spec__tab-media {
width: 72Px;
height: 72Px;
width: 72Px!important;
height: 72Px!important;
}
.p-spec__tab-media img {
max-width: 52Px;
height: auto;
max-width: 52Px!important;
height: auto!important;
}
.p-spec__tab-name {
font-size: 16Px;
line-height: 22Px;
font-size: 16Px!important;
line-height: 22Px!important;
}
.p-spec__subtitle {
padding-top: 20Px;
padding-bottom: 16Px;
font-size: 16Px;
line-height: 22Px;
padding-top: 20Px!important;
padding-bottom: 16Px!important;
font-size: 16Px!important;
line-height: 22Px!important;
}
.p-spec__table {
min-width: 480Px;
min-width: 480Px!important;
}
.p-spec__table th,
.p-spec__table td {
padding: 10Px 12Px;
font-size: 13Px;
line-height: 18Px;
padding: 10Px 12Px!important;
font-size: 13Px!important;
line-height: 18Px!important;
}
.p-download {
padding-top: 48Px;
padding-bottom: 48Px;
padding-top: 48Px!important;
padding-bottom: 48Px!important;
}
.p-download__content {
gap: 28Px;
gap: 28Px!important;
}
.p-download__list {
gap: 16Px;
gap: 16Px!important;
}
.p-download__item {
flex-direction: column;
align-items: flex-start;
gap: 16Px;
padding: 24Px;
flex-direction: column!important;
align-items: flex-start!important;
gap: 16Px!important;
padding: 24Px!important;
}
.p-download__name {
margin-bottom: 12Px;
font-size: 20Px;
line-height: 28Px;
margin-bottom: 12Px!important;
font-size: 20Px!important;
line-height: 28Px!important;
}
.p-download__meta {
gap: 12Px;
font-size: 14Px;
line-height: 20Px;
gap: 12Px!important;
font-size: 14Px!important;
line-height: 20Px!important;
}
.p-download__link {
font-size: 16Px;
line-height: 22Px;
font-size: 16Px!important;
line-height: 22Px!important;
}
.p-related {
padding-top: 40Px;
padding-bottom: 56Px;
padding-top: 40Px!important;
padding-bottom: 56Px!important;
}
.p-related__inner {
gap: 28Px;
gap: 28Px!important;
}
.p-related__link {
padding: 24Px;
gap: 16Px;
padding: 24Px!important;
gap: 16Px!important;
}
.p-related__media img {
max-width: 80Px;
max-height: 160Px;
max-width: 80Px!important;
max-height: 160Px!important;
}
.p-related__foot {
padding-top: 16Px;
padding-top: 16Px!important;
}
.p-related__name {
font-size: 18Px;
line-height: 24Px;
font-size: 18Px!important;
line-height: 24Px!important;
}
.p-related__pagination {
margin-top: 24Px;
gap: 12Px;
margin-top: 24Px!important;
gap: 12Px!important;
}
.p-related__pagination .swiper-pagination-bullet {
width: 28Px;
height: 28Px;
width: 28Px!important;
height: 28Px!important;
}
}
/* 选型表弹窗 */
@ -1255,23 +1255,29 @@ body.is-p-subnav .site-header {
vertical-align: middle;
white-space: nowrap;
}
.p-selection-table th {
.p-selection-table th,
.p-selection-table tr:first-child {
position: sticky;
top: 0;
z-index: 1;
font-weight: 500;
background: var(--color-white);
border-bottom: 0.125rem solid rgb(223, 224, 226);
border-bottom: 0;
box-shadow: inset 0 -2px 0 rgb(223, 224, 226);
}
.p-selection-table tr:first-child td{
border: none!important;
}
.p-selection-table td {
border-right: 1px solid rgb(223, 224, 226);
border-bottom: 1px solid rgb(223, 224, 226);
background: none!important;
}
.p-selection-table td:first-child {
border-left: 1px solid rgb(223, 224, 226);
}
.p-selection-table tbody tr:hover td {
background: rgba(175, 181, 185, 0.12);
background: rgba(175, 181, 185, 0.12)!important;;
}
@media (max-width: 1439px) {

Loading…
Cancel
Save