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

style:修改首页，产品详情，新品，nasr首页样式

Browse Source 
refactor：重构了产品详情的图片预览功能，coyp了一个页面
add：新增了large.js这个是产品详情图片预览相关的
This commit is contained in:
迷和油
2025-05-10 17:33:35 +08:00
parent 1d8055ef55
commit 087c49e03a
21 changed files with 860 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
public/static/index/css/product_detail.css
View File

@@ -13,7 +13,7 @@
.orico_Page_prdetail a,
.orico_Page_prdetail div,
.orico_Page_prdetail span {
font-family: "Microsoft YaHei", "Arial", sans-serif;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
}
.orico_Page_prdetail .oriprdetail {
display: flex;
@@ -89,7 +89,15 @@
height: 5.4375rem;
overflow: hidden;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .smallImg #imageMenu li img {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.smallImg
#imageMenu
li
img {
width: 98%;
cursor: pointer;
}
@@ -107,7 +115,13 @@
overflow: hidden;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgUp.disabled {
background: url(/static/index/images/fl.png) no-repeat;
position: absolute;
z-index: 1;
@@ -117,11 +131,23 @@
left: -2%;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp:hover,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled:hover {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgUp.disabled:hover {
background: url(/static/index/images/fl1.png) no-repeat;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgDown.disabled {
background: url(/static/index/images/rh.png) no-repeat;
position: absolute;
z-index: 1;
@@ -129,8 +155,20 @@
top: 50%;
transform: translate(0%, -50%);
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown:hover,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled:hover {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgDown:hover,
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgDown.disabled:hover {
background: url(/static/index/images/rh1.png) no-repeat;
}
.orico_Page_prdetail .oriprdetail .cp .cprh {
@@ -158,7 +196,14 @@
display: table;
width: 100%;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row {
display: table-row;
width: 100%;
clear: both;
@@ -166,21 +211,53 @@
font-size: 0.875em;
color: #737373;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .Table-Cell {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.Table-Cell {
display: table-cell;
margin: 0;
padding: 4px 0;
line-height: 1.4em;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms2 {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.ms2 {
width: 5%;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms3 {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.ms3 {
width: 30%;
color: #333;
font-size: 14px;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms4 {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.ms4 {
width: 65%;
font-size: 14px;
}
@@ -208,7 +285,14 @@
flex-direction: row;
align-items: center;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.prcolors
.dowebok
.itemcolor {
width: 20px;
height: 20px;
float: left;
@@ -218,12 +302,27 @@
border: 1px solid #d4d4d4;
border-radius: 10px;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor img {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.prcolors
.dowebok
.itemcolor
img {
width: 20px;
height: 20px;
border-radius: 10px;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor.on {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.prcolors
.dowebok
.itemcolor.on {
width: 20px;
height: 20px;
border-radius: 12px;
@@ -276,15 +375,21 @@
display: inline-block;
margin: 0 auto;
font-size: 1rem;
font-weight: bold;
padding-bottom: 1rem;
cursor: pointer;
}
.orico_Page_prdetail .oriprdetail .oriprInfo .titleprinfo a:first-child{
color:#009FDF;
}
.orico_Page_prdetail .oriprdetail .oriprInfo .products_des {
width: 75%;
margin-bottom: 50px;
margin: 0 auto;
}
.orico_Page_prdetail .oriprdetail .oriprInfo .products_des img {
text-align: center;
display: block;
margin: 0 auto;
}
.orico_Page_prdetail .XJmodal {
display: none;
@@ -345,8 +450,8 @@
.orico_Page_prdetail .XJmodal-content .tkitem .form-group .detail-w01 {
width: 90%;
}
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=text],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=email],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type='text'],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type='email'],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group select,
.orico_Page_prdetail .XJmodal-content .tkitem .form-group textarea {
border: 1px solid #ccc;
@@ -379,7 +484,7 @@
margin-right: 0;
}
.orico_Page_prdetail .XJmodal-content .submit-btn {
background-color: #004CFA;
background-color: #004cfa;
color: white;
padding: 10px 100px;
border: none;
@@ -389,5 +494,96 @@
display: block;
}
.orico_Page_prdetail .XJmodal-content .submit-btn:hover {
background-color: #004CFA;
background-color: #004cfa;
}
.enlarge-img {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999;
top: 0;
left: 0;
text-align: center;
display: none;
}
.enlarge-img img {
height: 100vh;
max-width: 100%;
margin: 0 auto;
}
.enlarge-img .close {
position: absolute;
width: 100%;
height: 28px;
z-index: 9;
top: 0px;
color: #fff;
font-size: 0.875em;
cursor: pointer;
text-align: right;
}
.enlarge-img .close span {
display: inline-block;
margin-right: 2%;
font-size: 24px;
height: 40px;
width: 40px;
border: 1px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 20px;
cursor: pointer;
}
.scrollbutton,
.scrollbutton_01 {
width: 53px;
height: 72px;
overflow: hidden;
}
.smallImgUp,
.smallImgUp .disabled,
.smallImgUp:hover,
.smallImgUp .disabled:hover,
.smallImgDown,
.smallImgDown .disabled,
.smallImgDown:hover,
.smallImgDown.disabled:hover {
position: absolute;
z-index: 8;
top: 50%;
cursor: pointer;
transform: translate(0%, -50%);
background-repeat: no-repeat;
}
.scrollbutton_01.smallImgUp,
.scrollbutton_01.smallImgUp.disabled {
background: url(/static/index/images/fl.png);
left: 0px;
}
.scrollbutton_01.smallImgDown,
.scrollbutton_01.smallImgDown.disabled {
background: url(/static/index/images/rh.png);
right: 0px;
}
.scrollbutton.smallImgUp,
.scrollbutton.smallImgUp.disabled {
background: url(/static/index/images/fl.png);
left: 90px;
margin-top: -24.5px;
}
.scrollbutton.smallImgDown,
.scrollbutton.smallImgDown.disabled {
background: url(/static/index/images/rh.png);
right: 0px;
margin-top: -24.5px;
}