refactor: 产品分类

This commit is contained in:
2025-05-15 18:07:38 +08:00
parent 8f8addda34
commit 538de8c59c
13 changed files with 331 additions and 608 deletions

View File

@@ -1,153 +0,0 @@
.orico_Page_OEMandODM {
width: 100%;
position: relative;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f2f2f2;
}
.orico_Page_OEMandODM .OEMandODMpageMain {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .bdimg1 {
width: 100%;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw {
width: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotbt1 {
font-size: 2rem;
font-family: Montserrat-Bold, Montserrat;
padding-bottom: 4.0625rem;
padding-top: 5.5rem;
font-weight: 700;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 {
width: 75%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: 6.25rem;
align-items: baseline;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item {
width: 21rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbic1 {
width: 6.25rem;
height: 6.25rem;
margin-bottom: 1.25rem;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbtp1 {
font-size: 18px;
font-family: Montserrat-Bold, Montserrat;
font-weight: bold;
padding-bottom: 18px;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_bgw .iotb_part1 .iotb_p1_item .iotbts1 {
text-align: center;
font-size: 16px;
font-family: Montserrat-Medium, Montserrat;
color: #9e9e9f;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 {
padding-bottom: 5.625rem;
background: #fff;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .iotbt1 {
font-size: 32px;
font-family: Montserrat-Bold, Montserrat;
padding-bottom: 65px;
padding-top: 88px;
font-weight: 700;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs {
width: 70%;
padding-bottom: 1.25rem;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div {
width: 20rem;
height: 15.9375rem;
text-align: center;
background: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div .fdimgs-div-span {
position: absolute;
bottom: 0px;
z-index: 9999;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(200, 200, 200, 0.1));
height: 45px;
width: 100%;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotbpage .iotb_part22 .fdimgs .fdimgs-div .fdtitle {
font-size: 18px;
font-weight: bold;
z-index: 9999;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
color: #fff;
line-height: 45px;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .iotbt1 {
font-size: 32px;
font-family: Montserrat-Bold, Montserrat;
padding-bottom: 65px;
padding-top: 88px;
font-weight: 700;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .fdimgs {
width: 70%;
padding-bottom: 110px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.orico_Page_OEMandODM .OEMandODMpageMain .iotb_part2 .fdimgs img {
border-style: none;
font-size: 0;
}

View File

@@ -1,115 +0,0 @@
@charset "UTF-8";
.orico_Page_products {
width: 100%;
position: relative;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f9f9f9;
}
.oricoCont{
background: #f9f9f9;
}
.orico_Page_products .focus_image {
padding-top: 3.75rem;
}
.orico_Page_products .focus_image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.orico_Page_products span{
font-size: 24px;
}
.orico_Page_products p, .orico_Page_products a, .orico_Page_products div, .orico_Page_products span {
font-family: "Microsoft YaHei", "Arial", sans-serif;
}
.orico_Page_products .pageMain {
width: 85%;
padding: 7.5rem 0 2.5rem;
margin: 0 auto;
display: flex;
flex-direction: column;
padding-top: 6.2rem;
}
.orico_Page_products .pageMain .ori-pd-title {
font-size: 1.5em;
color: #101010;
margin-bottom: 1.25rem;
font-weight: 400;
}
.orico_Page_products .pageMain .ori-pd-list {
display: flex;
flex-wrap: wrap; /* 自动换行 */
justify-content: flex-start; /* 水平方向均匀分布 */
}
.orico_Page_products .pageMain .ori-pd-list .oripditem {
width: 24%;
float: left;
background: #fff;
padding-bottom: 1em;
margin-top: 15px;
position: relative;
margin-right: 1%;
padding-top: 30px;
padding-bottom: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg {
display: inline-block;
width: 100%;
max-width: 220px;
margin: 25px auto;
display: none;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg-show {
display: block;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
color: #101010;
font-size: 0.875em;
padding-bottom: 0.625rem;
width:80%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
font-size: 0.875em;
color: #737373;
width:80%;
text-align: center;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
width: 92%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 0.3125rem;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit {
width: 1.3rem;
height: 1.3rem;
border-radius: 0.65rem;
cursor: pointer;
margin: 0 0.3125rem;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit img {
width: 100%;
height: 100%;
border-radius: 0.65rem;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit .rgb_hex {
display: block;
height: 100%;
border-radius: 100%;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem:hover {
box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
transform: translate3d(0, -2px, 0);
}

View File

@@ -2,7 +2,7 @@
.orico_Page_category {
width: 100%;
position: relative;
height: 100vh;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f9f9f9;
@@ -13,6 +13,21 @@
.orico_Page_category span {
font-family: "Microsoft YaHei", "Arial", sans-serif;
}
.orico_Page_category .opdBanner {
width: 100%;
height: auto;
position: relative;
}
.orico_Page_category .opdBanner .opdbannerImg {
width: 100%;
height: auto;
display: none;
object-fit: cover;
transition: opacity 1s ease-in-out;
}
.orico_Page_category .opdbanner > a:first-child {
display: block;
}
.orico_Page_category .pageMain {
width: 85%;
padding: 7.5rem 0 10px;

View File

@@ -2,7 +2,7 @@
.orico_Page_subcategory {
width: 100%;
position: relative;
height: 100vh;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f9f9f9;
@@ -10,6 +10,21 @@
.orico_Page_subcategory p, .orico_Page_subcategory a, .orico_Page_subcategory div, .orico_Page_subcategory span {
font-family: "Microsoft YaHei", "Arial", sans-serif;
}
.orico_Page_subcategory .opdBanner {
width: 100%;
height: auto;
position: relative;
}
.orico_Page_subcategory .opdBanner .opdbannerImg {
width: 100%;
height: auto;
display: none;
object-fit: cover;
transition: opacity 1s ease-in-out;
}
.orico_Page_subcategory .opdbanner > a:first-child {
display: block;
}
.orico_Page_subcategory .pageMain {
width: 85%;
padding: 7.5rem 0 10px;
@@ -84,6 +99,11 @@
height: 100%;
border-radius: 0.65rem;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit .rgb_hex {
display: block;
height: 100%;
border-radius: 100%;
}
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem:hover {
box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
transform: translate3d(0, -2px, 0);

View File

@@ -1,159 +0,0 @@
.orico_Page_productxc {
width: 100%;
position: relative;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f2f2f2;
}
.orico_Page_productxc .productxcMain {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.orico_Page_productxc .productxcMain p {
font-family: inherit;
}
.orico_Page_productxc .productxcMain .culture_top {
background: #f2f2f2;
display: flex;
flex-direction: column;
}
.orico_Page_productxc .productxcMain .culture_top img {
height: auto;
max-width: 100%;
}
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con {
max-width: 101.25rem;
width: 80%;
background: #f2f2f2;
overflow: hidden;
display: flex;
margin: 0 auto;
}
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div {
width: 29%;
height: 597px;
background: #fff;
overflow: hidden;
text-align: center;
margin-left: 6%;
margin-top: 5rem;
margin-bottom: 5rem;
border-radius: 1rem;
}
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .iconimg {
display: flex;
justify-content: center;
margin-top: 3.125rem;
}
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .iconimg img {
height: auto;
max-width: 100%;
}
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .title {
font-size: 1.125rem;
font-weight: 600;
font-family: Montserrat-Bold, Montserrat;
margin-top: 2rem;
width: 90%;
margin-left: 5%;
}
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div .subtitle {
width: 80%;
font-size: 0.875rem;
color: #707070;
font-family: Montserrat-Medium, Montserrat;
margin-top: 1.375rem;
margin-left: 10%;
}
.orico_Page_productxc .productxcMain .culture_top .culture_bril_con .culture_bril_div:first-child {
margin-left: 0;
}
.orico_Page_productxc .productxcMain .culture_vision {
background-color: #fff;
overflow: hidden;
width: 100%;
}
.orico_Page_productxc .productxcMain .culture_vision .subtitle {
font-size: 1.25rem;
color: #101010;
line-height: 2em;
margin-bottom: 2%;
font-weight: 600;
font-family: Montserrat-Bold, Montserrat;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container {
width: 80%;
margin: 0 auto;
max-width: 101.25rem;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .title {
font-size: 3em;
font-weight: 600;
color: #101010;
text-align: center;
padding-top: 2.3%;
padding-bottom: 2%;
line-height: 2em;
font-family: "LATO-MEDIUM";
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table {
margin-bottom: 4%;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row {
display: table-row;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .left {
width: 46.7%;
text-align: center;
vertical-align: middle;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .left img {
border-radius: 1rem;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right {
width: 46.7%;
text-align: center;
vertical-align: middle;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right p {
margin-left: 5%;
text-align: left;
display: inline-block;
width: 90%;
font-size: 1.25rem;
color: #101010;
line-height: 2em;
margin-bottom: 2%;
font-family: Montserrat-Bold, Montserrat;
margin-right: 10%;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .right .des {
font-size: 16px;
color: #737373;
line-height: 1.6rem;
font-family: Montserrat-Medium, Montserrat;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .Table-Cell {
display: table-cell;
margin: 0;
padding: 0;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .swt-Table .Table-Row .center {
width: 6.6%;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .des {
font-size: 1rem;
color: #737373;
line-height: 1.6rem;
font-family: Montserrat-Medium, Montserrat;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .des,
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 .subtitle {
text-align: left;
}
.orico_Page_productxc .productxcMain .culture_vision .swt-Container .culture_vision_02 img {
border-radius: 1rem;
}