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 e341c929c7
commit 31b0f5217a
6 changed files with 748 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/static/.gitignore vendored
View File

@@ -1,2 +1,2 @@
*
!.gitignore

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)
}

28
public/static/index/js/before-after.min.js vendored
View File

@@ -1 +1,27 @@
!function(a){function b(b,c,d){b.on("mousedown.ba-events touchstart.ba-events",function(e){b.addClass("ba-draggable"),c.addClass("ba-resizable");var f=e.pageX?e.pageX:e.originalEvent.touches[0].pageX,g=b.outerWidth(),h=b.offset().left+g-f,i=d.offset().left,j=d.outerWidth();minLeft=i+10,maxLeft=i+j-g-10,b.parents().on("mousemove.ba-events touchmove.ba-events",function(b){var c=b.pageX?b.pageX:b.originalEvent.touches[0].pageX;leftValue=c+h-g,leftValue<minLeft?leftValue=minLeft:leftValue>maxLeft&&(leftValue=maxLeft),widthValue=100*(leftValue+g/2-i)/j+"%",a(".ba-draggable").css("left",widthValue),a(".ba-resizable").css("width",widthValue)}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events",function(){b.removeClass("ba-draggable"),c.removeClass("ba-resizable"),a(this).off(".ba-events")}),e.preventDefault()})}a.fn.beforeAfter=function(){var c=this,d=c.width()+"px";c.find(".resize img").css("width",d),b(c.find(".handle"),c.find(".resize"),c),a(window).resize(function(){var a=c.width()+"px";c.find(".resize img").css("width",a)})}}(jQuery);
! function (a) {
function b(b, c, d) {
b.on("mousedown.ba-events touchstart.ba-events", function (e) {
b.addClass("ba-draggable"), c.addClass("ba-resizable");
var f = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX,
g = b.outerWidth(),
h = b.offset().left + g - f,
i = d.offset().left,
j = d.outerWidth();
minLeft = i + 10, maxLeft = i + j - g - 10, b.parents().on("mousemove.ba-events touchmove.ba-events", function (b) {
var c = b.pageX ? b.pageX : b.originalEvent.touches[0].pageX;
leftValue = c + h - g, leftValue < minLeft ? leftValue = minLeft : leftValue > maxLeft && (leftValue = maxLeft), widthValue = 100 * (leftValue + g / 2 - i) / j + "%", a(".ba-draggable").css("left", widthValue), a(".ba-resizable").css("width", widthValue)
}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events", function () {
b.removeClass("ba-draggable"), c.removeClass("ba-resizable"), a(this).off(".ba-events")
}), e.preventDefault()
})
}
a.fn.beforeAfter = function () {
var c = this,
d = c.width() + "px";
c.find(".resize img").css("width", d), b(c.find(".handle"), c.find(".resize"), c), a(window).resize(function () {
var a = c.width() + "px";
c.find(".resize img").css("width", a)
});
return this
}
}(jQuery);