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

refactor：重构了产品详情的图片预览功能，coyp了一个页面 add：新增了large.js这个是产品详情图片预览相关的
2025-05-10 17:33:35 +08:00
parent 1d8055ef55
commit 087c49e03a
21 changed files with 860 additions and 138 deletions
--- a/public/static/index/css/category.css
+++ b/public/static/index/css/category.css
@@ -7,6 +7,9 @@
  overflow-x: hidden;
  background: #f9f9f9;
 }
+.oricoCont{
+   background: #f9f9f9;
+}
 .orico_Page_products .focus_image {
  padding-top: 3.75rem;
 }
@@ -20,15 +23,17 @@
 }
 .orico_Page_products .pageMain {
  width: 85%;
-  padding: 50px 0 2.5rem;
+  padding: 7.5rem 0 2.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
+  padding-top: 3.75rem;
 }
 .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;
@@ -62,12 +67,19 @@
 }
 .orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
  color: #101010;
-  font-size: 1.125rem;
+  font-size: 0.875rem;
  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: 1.125rem;
+  font-size: 0.875rem;
  color: #737373;
+  width:80%;
+  text-align: center;
 }
 .orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
  width: 92%;
--- a/public/static/index/css/index.css
+++ b/public/static/index/css/index.css
@@ -798,8 +798,6 @@
  width: 100%;
 }
 .orico_Page_index .pageMain .oricoDataStatistics .odsmain {
-  max-width: 120rem;
-  min-width: 75rem;
  justify-content: center;
  align-items: center;
  flex-direction: row;
--- a/public/static/index/css/orico_footer.css
+++ b/public/static/index/css/orico_footer.css
@@ -48,8 +48,7 @@
  overflow-wrap: anywhere;
 }
 .orico_footer .fotter .footerMain .foottxtbottom {
-  padding-left: 10%;
-  padding-left: 14%;
+  padding-left: 5%;
  display: grid;
  padding-top: 8%;
 }
--- a/public/static/index/css/orico_header.css
+++ b/public/static/index/css/orico_header.css
@@ -160,7 +160,6 @@
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
-  z-index:9999;
 }
 .header-PC #header .nav2 .navItem .navItemConten1 li {
  color: #fff;
@@ -275,7 +274,7 @@
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: fixed;
  right: 2%;
-  width: 45%;
+  width: 33%;
  top: 5rem;
  height: 80%;
  overflow-y: auto;
@@ -318,6 +317,9 @@
  margin-top: 10%;
  margin-left: 1%;
 }
+.header-PC .searchmodalMian .searchmodalct .popProduct .popmain{
+   width: 100%;
+}
 .header-PC .searchmodalMian .searchmodalct .searchhistory .popmain,
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain {
  display: flex;
@@ -327,7 +329,7 @@
 .header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem,
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem {
  text-align: center;
-  margin-top: 10%;
+  margin-top: 7%;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
@@ -354,11 +356,12 @@
 }
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName 
 {
-  width: 100px;
+  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
+  font-size:14px
 }
 .header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .produc-dec{
  font-size: 10px;
--- a/public/static/index/css/product_category.css
+++ b/public/static/index/css/product_category.css
@@ -15,7 +15,7 @@
 }
 .orico_Page_category .pageMain {
  width: 85%;
-  padding: 50px 0 10px;
+  padding: 7.5rem 0 10px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
--- a/public/static/index/css/product_detail.css
+++ b/public/static/index/css/product_detail.css
@@ -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;
 }
--- a/public/static/index/css/product_newpro.css
+++ b/public/static/index/css/product_newpro.css
@@ -7,11 +7,14 @@
  overflow-x: hidden;
  background: #f9f9f9;
 }
+.oricoCont{
+  background: #f9f9f9;
+}
 .orico_Page_newproducts p,
 .orico_Page_newproducts a,
 .orico_Page_newproducts div,
 .orico_Page_newproducts span {
-  font-family: "Microsoft YaHei", "Arial", sans-serif;
+  font-family: 'Microsoft YaHei', 'Arial', sans-serif;
 }
 .orico_Page_newproducts .opdBanner {
  width: 100%;
@@ -25,21 +28,49 @@
  object-fit: cover;
  transition: opacity 1s ease-in-out;
 }
-.orico_Page_newproducts .opdbanner>a:first-child {
+.orico_Page_newproducts .opdbanner > a:first-child {
  display: block;
 }
 .orico_Page_newproducts .oricoNewPrMain {
  width: 85%;
-  padding: 50px 0 10px;
+  padding: 7.5rem 0 10px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
 }
+.orico_Page_newproducts .oricoNewPrMain .cat {
+  margin-bottom: 3.75rem;
+}
 .orico_Page_newproducts .oricoNewPrMain .ori-pd-title {
-  font-size: 1.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catname {
+  font-size: 1.5rem;
  color: #101010;
  margin-bottom: 1.25rem;
 }
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 1%;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore .tmore {
+  font-size: 1rem;
+  color: #444;
+  font-weight: 500;
+}
+.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore .catmoreImg {
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-left: 0.5rem;
+}
+
+
+
 .orico_Page_newproducts .oricoNewPrMain .ori-pd-list {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
@@ -87,16 +118,32 @@
  color: #444;
  font-size: 0.875rem;
  padding-bottom: 0.625rem;
-  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prddec {
  font-size: 0.875rem;
  color: #737373;
 }
+.orico_Page_newproducts .oricoNewPrMain .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_newproducts .oricoNewPrMain .ori-pd-list .oripditem:hover {
  box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
  transform: translate3d(0, -2px, 0);
--- a/public/static/index/css/product_search.css
+++ b/public/static/index/css/product_search.css
@@ -56,13 +56,19 @@
  display: flex;
  flex-direction: row;
 }
-.orico_Page_search .searchMain .seul .seitme .search-pr-img {
-  float: left;
+.orico_Page_search .searchMain .seul .seitme .imgb {
  padding: 9px 10px;
  border: 1px solid #e7e7e7;
  overflow: hidden;
+  float: left;
  width: 140px;
 }
+.orico_Page_search .searchMain .seul .seitme .imgb .search-pr-img {
+  width: 100%;
+  opacity: 1;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+}
 .orico_Page_search .searchMain .seul .seitme .prInfp {
  display: flex;
  flex-direction: column;
@@ -72,6 +78,7 @@
 .orico_Page_search .searchMain .seul .seitme .prInfp .txt1 {
  font-size: 1.125rem;
  color: #333;
+  padding-bottom: 0.5rem;
 }
 .orico_Page_search .searchMain .seul .seitme .prInfp .txt2 {
  font-size: 0.875rem;
@@ -89,6 +96,10 @@
  font-weight: bold;
  color: rgb(255, 0, 0);
 }
+.orico_Page_search .searchMain .seul .seitme:hover .search-pr-img {
+  -webkit-transform: scale3d(1.2, 1.2, 1);
+  transform: scale3d(1.2, 1.2, 1);
+}
 .orico_Page_search .searchMain ::placeholder {
  color: #737373;
 }
--- a/public/static/index/css/product_subcategory.css
+++ b/public/static/index/css/product_subcategory.css
@@ -12,7 +12,7 @@
 }
 .orico_Page_subcategory .pageMain {
  width: 85%;
-  padding: 50px 0 10px;
+  padding: 7.5rem 0 10px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
--- a/public/static/index/css/public.css
+++ b/public/static/index/css/public.css
@@ -60,7 +60,7 @@ button {
 }

 a {
-	color: #000;
+	color: #333;
 	cursor: pointer;
 	text-decoration: none;
 	transition: all 0.2s linear;
--- a/public/static/index/css/topic_nas_header.css
+++ b/public/static/index/css/topic_nas_header.css
@@ -10,7 +10,7 @@
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
-    width: 75rem;
+    max-width: 75rem;
    margin: 0 auto;
 }

--- a/public/static/index/css/topic_nas_index.css
+++ b/public/static/index/css/topic_nas_index.css
@@ -26,9 +26,11 @@
 	width: 100%;
 	position: relative;
 	overflow: hidden;
-	height: 56.4375rem;
+	max-height: 56.4375rem;
+}
+.narsIndex-banner img{
+  width: 100%;
 }
-
 .narsIndex-banner .mySwiper .swiper-slide {
 	position: relative;
 }
@@ -128,7 +130,7 @@
 	flex-direction: row;
 	justify-content: space-between;
 	height: auto;
-	min-width: 1024px;
+	/* min-width: 1024px; */
 	overflow: hidden;
 	margin: 0 7.5rem;
 }
@@ -436,7 +438,7 @@
 }
 .nars-wlj .wltitem {
 	margin: 0 7.5rem;
-	min-width: 1024px;
+	/* min-width: 1024px; */
 	background: #000;
 	display: flex;
 	flex-direction: row;