jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat：新增加product_subcategory和product_category，两个页面，category这个页面可能要废弃了，英文官网添底部一个公共部分

Browse Source
This commit is contained in:
迷和油
2025-05-09 15:46:55 +08:00
parent 31b0f5217a
commit 693e2a896c
14 changed files with 626 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
public/static/index/css/category.css Normal file
View File

@@ -0,0 +1,100 @@
@charset "UTF-8";
.orico_Page_products {
width: 100%;
position: relative;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
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 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: 50px 0 2.5rem;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.orico_Page_products .pageMain .ori-pd-title {
font-size: 1.5em;
color: #101010;
margin-bottom: 1.25rem;
}
.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: 1.125rem;
padding-bottom: 0.625rem;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
font-size: 1.125rem;
color: #737373;
}
.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);
}

4
public/static/index/css/orico_footer.css
View File

@@ -88,7 +88,9 @@
flex-direction: row;
justify-content: center;
align-items: center;
margin: 3.5rem auto;
padding: 3.5rem 0;
background: transparent;
background: #f2f2f2;
}
.oricoCont .ctitem {
width: 45%;

1
public/static/index/css/orico_header.css
View File

@@ -160,6 +160,7 @@
align-items: center;
justify-content: center;
padding: 0.5rem 0;
z-index:9999;
}
.header-PC #header .nav2 .navItem .navItemConten1 li {
color: #fff;

108
public/static/index/css/product_category.css
View File

@@ -1,75 +1,106 @@
@charset "UTF-8";
.orico_Page_products {
.orico_Page_category {
width: 100%;
position: relative;
min-height: 100vh;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
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 p, .orico_Page_products a, .orico_Page_products div, .orico_Page_products span {
.orico_Page_category p,
.orico_Page_category a,
.orico_Page_category div,
.orico_Page_category span {
font-family: "Microsoft YaHei", "Arial", sans-serif;
}
.orico_Page_products .pageMain {
.orico_Page_category .pageMain {
width: 85%;
padding: 50px 0 2.5rem;
padding: 50px 0 10px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.orico_Page_products .pageMain .ori-pd-title {
font-size: 1.5em;
.orico_Page_category .pageMain .cat {
margin-bottom: 3.75rem;
}
.orico_Page_category .pageMain .ori-pd-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.orico_Page_category .pageMain .ori-pd-title .catname {
font-size: 1.5rem;
color: #101010;
margin-bottom: 1.25rem;
font-weight: 300;
}
.orico_Page_products .pageMain .ori-pd-list {
.orico_Page_category .pageMain .ori-pd-title .catmore {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 1%;
}
.orico_Page_category .pageMain .ori-pd-title .catmore .tmore {
font-size: 1rem;
color: #444;
}
.orico_Page_category .pageMain .ori-pd-title .catmore .catmoreImg {
width: 1.75rem;
height: 1.75rem;
margin-left: 0.5rem;
}
.orico_Page_category .pageMain .ori-pd-list {
display: flex;
flex-wrap: wrap; /* 自动换行 */
justify-content: flex-start; /* 水平方向均匀分布 */
}
.orico_Page_products .pageMain .ori-pd-list .oripditem {
width: 24%;
.orico_Page_category .pageMain .ori-pd-list .oripditem {
width: 18.2%;
float: left;
background: #fff;
padding-bottom: 1em;
margin-top: 15px;
position: relative;
margin-right: 1%;
padding-top: 30px;
padding-bottom: 70px;
margin-right: 1.8125rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 25rem;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdimg {
.orico_Page_category .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 {
.orico_Page_category .pageMain .ori-pd-list .oripditem .prdimg-show {
display: block;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
color: #101010;
font-size: 1.125rem;
padding-bottom: 0.625rem;
.orico_Page_category .pageMain .ori-pd-list .oripditem .prdName {
font-size: 0.875rem;
color: #444;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
font-size: 1.125rem;
color: #737373;
.orico_Page_category .pageMain .ori-pd-list .oripditem .prddec {
margin-top: 3%;
font-size: 0.875rem;
color: #666;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
.orico_Page_category .pageMain .ori-pd-list .oripditem .newcp {
width: 72px;
height: 30px;
background: #df2c39;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, 0%);
}
.orico_Page_category .pageMain .ori-pd-list .oripditem .prd-colors {
width: 92%;
display: flex;
flex-direction: row;
@@ -77,24 +108,15 @@
justify-content: center;
margin-top: 0.3125rem;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit {
.orico_Page_category .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 {
.orico_Page_category .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);
}

90
public/static/index/css/product_subcategory.css Normal file
View File

@@ -0,0 +1,90 @@
@charset "UTF-8";
.orico_Page_subcategory {
width: 100%;
position: relative;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f9f9f9;
}
.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 .pageMain {
width: 85%;
padding: 50px 0 10px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.orico_Page_subcategory .pageMain .sbbanner {
width: 100%;
}
.orico_Page_subcategory .pageMain .ori-pd-title {
font-size: 1.5em;
color: #101010;
margin-bottom: 1.25rem;
}
.orico_Page_subcategory .pageMain .ori-pd-list {
display: flex;
flex-wrap: wrap; /* 自动换行 */
justify-content: flex-start; /* 水平方向均匀分布 */
}
.orico_Page_subcategory .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_subcategory .pageMain .ori-pd-list .oripditem .prdimg {
display: inline-block;
width: 100%;
max-width: 220px;
margin: 25px auto;
display: none;
}
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prdimg-show {
display: block;
}
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prdName {
color: #101010;
font-size: 1.125rem;
padding-bottom: 0.625rem;
}
.orico_Page_subcategory .pageMain .ori-pd-list .oripditem .prddec {
font-size: 1.125rem;
color: #737373;
}
.orico_Page_subcategory .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_subcategory .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_subcategory .pageMain .ori-pd-list .oripditem .prd-colors .prdolorit img {
width: 100%;
height: 100%;
border-radius: 0.65rem;
}
.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);
}

BIN
public/static/index/images/SSD-1920x900-CN.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 708 KiB

BIN
public/static/index/images/contact-Us.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
public/static/index/images/customer-service.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB