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

fix:首页切换图片bug

Browse Source
This commit is contained in:
迷和油
2025-05-09 11:05:21 +08:00
parent db94557c06
commit 1f33d2b9f8
6 changed files with 748 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/static/index/css/before-after.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.ba-slider{position:relative;overflow:hidden}.ba-slider img{width:100%;display:block;max-width:none}.ba-slider .resize{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}.ba-slider .handle{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:rgba(0,0,0,.5);cursor:ew-resize}.ba-slider .handle:after{position:absolute;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;content:'\21d4';color:#fff;font-weight:700;font-size:36px;text-align:center;line-height:64px;background:#ffb800;border:1px solid #e6a600;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.5),inset 0 60px 50px -30px #ffd466}.ba-slider .handle.ba-draggable:after{width:48px;height:48px;margin:-24px 0 0 -24px;line-height:50px;font-size:30px}

432
public/static/index/css/index.css
View File

@@ -28,8 +28,15 @@
left: 9%;
top: 53%;
}
.orico_Page_index .pageMain .bannerswiper .swiper-horizontal > .swiper-pagination-bullets,
.orico_Page_index .pageMain .bannerswiper .swiper-pagination-bullets.swiper-pagination-horizontal {
.orico_Page_index
.pageMain
.bannerswiper
.swiper-horizontal
> .swiper-pagination-bullets,
.orico_Page_index
.pageMain
.bannerswiper
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 5%;
}
.orico_Page_index .pageMain .bannerswiper .swiper-button-next,
@@ -91,7 +98,12 @@
margin-bottom: 1.5rem;
overflow: hidden;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_left {
width: 53%;
display: flex;
flex-direction: column;
@@ -99,47 +111,102 @@
text-align: center;
align-items: center;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left p {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_left
p {
font-size: 2.625rem;
line-height: 2.8125rem;
font-weight: 600;
height: 5.9375rem;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_left
.subtitle {
font-size: 1.125rem;
font-weight: 600;
display: flex;
flex-direction: row;
align-items: center;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle .tpicture {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_left
.subtitle
.tpicture {
width: 1.375rem;
height: 1.375rem;
background: url("/static/index/images/more2.png") no-repeat;
background: url('/static/index/images/more2.png') no-repeat;
background-position: -26px 0px;
margin-left: 1.625rem;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_left
.subtitle:hover {
color: #004bfa;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover .tpicture {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_left
.subtitle:hover
.tpicture {
background-position: 0 0;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_right {
width: 47%;
overflow: hidden;
position: relative;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_right
img {
width: 100%;
transition: transform 0.3s ease-in-out;
border-start-end-radius: 1.625rem;
border-end-end-radius: 1.625rem;
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img:hover {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme
.ftItme_right
img:hover {
transform: scale(1.09);
}
.orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme:nth-child(even) .ftItme_right img {
.orico_Page_index
.pageMain
.featuredtopicsMain
.ftcontent
.ftItme:nth-child(even)
.ftItme_right
img {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-start-start-radius: 1.625rem;
@@ -162,7 +229,12 @@
margin-left: 6%;
position: relative;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiper-wrapper
.picture {
display: block;
width: 21.875rem;
height: 29.375rem;
@@ -173,7 +245,13 @@
display: flex;
flex-direction: column;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiper-wrapper
.picture
.primg {
width: 13.5rem;
height: 12.875rem;
display: block;
@@ -185,14 +263,34 @@
background-repeat: no-repeat;
transition: transform 0.3s ease-in-out;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiper-wrapper
.picture
.primg
img {
width: 13.5rem;
height: 12.875rem;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img:hover {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiper-wrapper
.picture
.primg
img:hover {
transform: scale(1.1);
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .fpptitle {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiper-wrapper
.picture
.fpptitle {
font-size: 1.25rem;
text-align: center;
line-height: 1.5rem;
@@ -206,7 +304,13 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .subtitle {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiper-wrapper
.picture
.subtitle {
text-align: center;
line-height: 1.125rem;
font-size: medium;
@@ -218,7 +322,13 @@
overflow: hidden;
font-weight: 600;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .more {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiper-wrapper
.picture
.more {
font-size: 0.8rem;
position: absolute;
bottom: 10%;
@@ -233,15 +343,33 @@
position: relative;
height: 6.25rem;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swiper-container1 {
width: 85%;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swiper-container1
.swiper-pagination-progressbar
.swiper-pagination-progressbar-fill {
background-color: #555 !important;
margin-top: 0px;
height: 2px !important;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .slideshow-pag {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swiper-container1
.slideshow-pag {
width: 86%;
right: 3%;
top: 50%;
@@ -256,18 +384,50 @@
padding: 0;
z-index: 1;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .slideshow-btn {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swi1
.slideshow-btn {
height: 2.5rem;
width: 2.5rem;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-next,
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-prev {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swi1
.swiper-button-next,
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swi1
.swiper-rtl
.swiper-button-prev {
position: static !important;
margin-left: 95px;
margin-top: 24px;
}
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-prev,
.orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-next {
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swi1
.swiper-button-prev,
.orico_Page_index
.pageMain
.featuredProducts
.fpSwiper
.swiperasd
.swi1
.swiper-rtl
.swiper-button-next {
position: static !important;
margin-left: 40px;
margin-top: -40px;
@@ -322,7 +482,12 @@
flex-direction: column;
align-items: center;
}
.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .scenetitle {
.orico_Page_index
.pageMain
.sceneIntroduction
.sceneitem
.sceneInfo
.scenetitle {
font-size: 1.875rem;
text-align: center;
font-weight: bold;
@@ -330,7 +495,7 @@
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-top: 10%;
padding-top: 5%;
z-index: 10;
}
.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .subtitle {
@@ -347,7 +512,12 @@
-webkit-box-orient: vertical;
z-index: 10;
}
.orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .sceneMore {
.orico_Page_index
.pageMain
.sceneIntroduction
.sceneitem
.sceneInfo
.sceneMore {
font-size: 1rem;
color: #004bfa;
text-align: center;
@@ -392,7 +562,7 @@
.orico_Page_index .pageMain .oricoTechnology .beforeafter {
width: 85%;
margin: 0 auto;
height: 53.75rem;
max-height: 53.75rem;
position: relative;
border-radius: 1.75rem;
}
@@ -400,7 +570,7 @@
position: absolute;
top: 0px;
left: 0px;
background-image: url("/static/index/images/indeximg1.jpg");
background-image: url('/static/index/images/indeximg1.jpg');
width: 100%;
height: 53.75rem;
background-repeat: no-repeat;
@@ -412,7 +582,7 @@
top: 0px;
left: 0px;
border-right: 0.25rem solid rgba(255, 255, 255, 0.5019607843);
background-image: url("/static/index/images/indeximg2.jpg");
background-image: url('/static/index/images/indeximg2.jpg');
width: 50%;
height: 53.75rem;
background-repeat: no-repeat;
@@ -428,11 +598,12 @@
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
content: "";
content: '';
display: flex;
align-items: center;
justify-content: center;
background: #fff url("/static/index/images/ba-arrow.png") center center/22px 22px no-repeat;
background: #fff url('/static/index/images/ba-arrow.png') center center/22px
22px no-repeat;
border: 1px solid #fff;
border-radius: 50%;
transition: all 0.3s ease;
@@ -479,13 +650,25 @@
margin-left: 10%;
justify-content: center;
}
.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bstitle {
.orico_Page_index
.pageMain
.brandStory
.swiper-wrapper
.bsitem
.bsinf
.bstitle {
font-size: 3rem;
text-align: left;
line-height: 4rem;
font-weight: bolder;
}
.orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bssubtitle {
.orico_Page_index
.pageMain
.brandStory
.swiper-wrapper
.bsitem
.bsinf
.bssubtitle {
font-size: 1.25rem;
text-align: left;
line-height: 1.575rem;
@@ -518,11 +701,22 @@
color: inherit;
border-top-width: 1px;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination {
.orico_Page_index
.pageMain
.brandStory
.bs_swiperasd
.bs_swcontainer
.bs_pagination {
bottom: 3rem;
width: 86%;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet {
.orico_Page_index
.pageMain
.brandStory
.bs_swiperasd
.bs_swcontainer
.bs_pagination
.swiper-pagination-bullet {
margin-right: 28%;
width: 1.25rem;
height: 1.25rem;
@@ -533,7 +727,13 @@
border: 1px solid #cccccc;
float: left;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet-active {
.orico_Page_index
.pageMain
.brandStory
.bs_swiperasd
.bs_swcontainer
.bs_pagination
.swiper-pagination-bullet-active {
background-color: #000;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer span {
@@ -557,7 +757,12 @@
left: 51%;
height: 2px;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .swiper-container {
.orico_Page_index
.pageMain
.brandStory
.bs_swiperasd
.bs_swcontainer
.swiper-container {
width: 15%;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts {
@@ -568,12 +773,22 @@
width: 2.5rem;
height: 2.5rem;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-next {
.orico_Page_index
.pageMain
.brandStory
.bs_swiperasd
.bs_bts
.swiper-button-next {
position: static;
margin-left: 5.9375rem;
margin-top: 1.5rem;
}
.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-prev {
.orico_Page_index
.pageMain
.brandStory
.bs_swiperasd
.bs_bts
.swiper-button-prev {
position: static;
margin-left: 2.5rem;
margin-top: -2.5rem;
@@ -601,10 +816,16 @@
animation: number-scroll 1s ease-in-out forwards;
}
.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem h3 {
font-weith
font-size: 1.25rem;
padding-top: 0.9375rem;
padding-top: 0.5rem;
font-weight: 500;
}
.orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem:nth-child(2) {
.orico_Page_index
.pageMain
.oricoDataStatistics
.odsmain
.odsItem:nth-child(2) {
margin: 0 18%;
}
.orico_Page_index .pageMain .oricoPub {
@@ -677,22 +898,60 @@
width: auto;
position: absolute;
}
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .slideshow-btn {
.orico_Page_index
.pageMain
.oricoPub
.pubswiperasd
.swiper-container
.slideshow-btn {
width: 2.5rem;
height: 2.5rem;
}
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next,
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-container-rtl .swiper-button-prev {
.orico_Page_index
.pageMain
.oricoPub
.pubswiperasd
.swiper-container
.swiper-button-next,
.orico_Page_index
.pageMain
.oricoPub
.pubswiperasd
.swiper-container
.swiper-container-rtl
.swiper-button-prev {
background-image: none;
}
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next,
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-prev {
.orico_Page_index
.pageMain
.oricoPub
.pubswiperasd
.swiper-container
.swiper-button-next,
.orico_Page_index
.pageMain
.oricoPub
.pubswiperasd
.swiper-container
.swiper-rtl
.swiper-button-prev {
margin-left: 4.875rem;
margin-top: 1.5625rem;
position: static;
}
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-prev,
.orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-next {
.orico_Page_index
.pageMain
.oricoPub
.pubswiperasd
.swiper-container
.swiper-button-prev,
.orico_Page_index
.pageMain
.oricoPub
.pubswiperasd
.swiper-container
.swiper-rtl
.swiper-button-next {
position: static;
margin-left: 1.75rem;
margin-top: -2.5rem;
@@ -764,7 +1023,13 @@
margin-bottom: 0.625rem;
border-bottom: 1px solid #d6d6d6;
}
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question {
.orico_Page_index
.pageMain
.oricoFQA
.fqaright
ul.accordion
li.fqali
.fqa-question {
font-size: 1rem;
display: flex;
justify-content: space-between;
@@ -773,20 +1038,45 @@
cursor: pointer;
overflow: hidden;
}
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question .xiala {
.orico_Page_index
.pageMain
.oricoFQA
.fqaright
ul.accordion
li.fqali
.fqa-question
.xiala {
height: 1.875rem;
text-align: center;
}
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer {
.orico_Page_index
.pageMain
.oricoFQA
.fqaright
ul.accordion
li.fqali
.fqa-answer {
font-size: 1rem;
font-weight: 400;
padding: 0.625rem;
display: none;
}
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer p {
.orico_Page_index
.pageMain
.oricoFQA
.fqaright
ul.accordion
li.fqali
.fqa-answer
p {
line-height: 1.75rem;
}
.orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali:last-child {
.orico_Page_index
.pageMain
.oricoFQA
.fqaright
ul.accordion
li.fqali:last-child {
border-bottom: none;
}
.orico_Page_index .pageMain .oricofixd-info {
@@ -833,3 +1123,29 @@
float: right;
width: 1.25rem;
}
.orico_Page_index .ba-slider .handle {
background: #dcdbd9;
cursor: pointer;
}
.orico_Page_index .ba-slider .handle:after {
position: absolute;
top: 50%;
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
content: '';
display: flex;
align-items: center;
justify-content: center;
background: #fff url(../../index/images/ba-arrow.png) center center / 22px 22px
no-repeat;
border: 1px solid #fff;
border-radius: 50%;
transition: all 0.3s ease;
transform: scale(1);
z-index: 5;
box-shadow: none;
}
.orico_Page_index .ba-slider .handle.ba-draggable:after {
transform: scale(.8)
}