Files
orico-official-website/public/static/index/css/product_newpro.css
迷和油 8643eedf7d style:修改首页,产品详情,新品,nasr首页样式
refactor:重构了产品详情的图片预览功能,coyp了一个页面
add:新增了large.js这个是产品详情图片预览相关的
2025-05-10 17:33:35 +08:00

154 lines
3.6 KiB
CSS
Executable File

@charset "UTF-8";
.orico_Page_newproducts {
width: 100%;
position: relative;
min-height: 100vh;
overflow-y: auto;
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;
}
.orico_Page_newproducts .opdBanner {
width: 100%;
height: auto;
position: relative;
}
.orico_Page_newproducts .opdBanner .opdbannerImg {
width: 100%;
height: auto;
display: none;
object-fit: cover;
transition: opacity 1s ease-in-out;
}
.orico_Page_newproducts .opdbanner > a:first-child {
display: block;
}
.orico_Page_newproducts .oricoNewPrMain {
width: 85%;
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 {
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; /* 自动换行 */
justify-content: flex-start; /* 水平方向均匀分布 */
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem {
width: 18%;
float: left;
background: #fff;
padding-bottom: 1em;
margin-top: 2.1%;
position: relative;
margin-right: 2.1%;
padding-top: 30px;
padding-bottom: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .oNpicoNEW {
width: 4.5rem;
height: 1.875rem;
background: #df2c39;
font-size: 0.75rem;
color: #fff;
text-align: center;
line-height: 1.875rem;
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, 0%);
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prdimg {
display: inline-block;
width: 100%;
max-width: 220px;
margin: 25px auto;
display: none;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prdimg-show {
display: block;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prdName {
color: #444;
font-size: 0.875rem;
padding-bottom: 0.625rem;
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);
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem:nth-child(5n) {
margin-right: 0px;
}