commit
ac3efbea52
11 changed files with 1116 additions and 0 deletions
@ -0,0 +1,225 @@ |
|||
body{ |
|||
margin: 0; |
|||
} |
|||
header{ |
|||
height: 45px; |
|||
background-color: #C8001E ; |
|||
padding-left: 18%; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
display: flex; |
|||
|
|||
} |
|||
.header_img{ |
|||
height: 100%; |
|||
width: 100px; |
|||
margin-right: 10px; |
|||
} |
|||
.header_item{ |
|||
height: 100%; |
|||
width: 126px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: white; |
|||
font-size: 16px; |
|||
border-left: 1px solid rgba(187, 187, 187, 100); |
|||
cursor: pointer; |
|||
} |
|||
.header_item:last-child{ |
|||
border-right: 1px solid rgba(187, 187, 187, 100); |
|||
} |
|||
footer{ |
|||
width: 100%; |
|||
height: 145px; |
|||
box-sizing: border-box; |
|||
padding: 0 18%; |
|||
background: black; |
|||
color: white; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: flex-end; |
|||
/* text-align: right; */ |
|||
} |
|||
footer div{ |
|||
width: 180px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
|
|||
.banner{ |
|||
width: 100%; |
|||
height: 407px; |
|||
} |
|||
.swiper{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.index_body{ |
|||
background-color: #F2F1F1 ; |
|||
padding:0 18%; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
.index_content{ |
|||
background-color: white; |
|||
width: 100%; |
|||
padding-bottom: 95px; |
|||
} |
|||
.index_content_title{ |
|||
padding: 15px 10px; |
|||
position: relative; |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.index_content_title::after{ |
|||
content: ''; |
|||
width: 1px; |
|||
height: 15px; |
|||
position: absolute; |
|||
left: 5px; |
|||
top: 50%; |
|||
margin-top: -7px; |
|||
background-color: #FF0000 ; |
|||
} |
|||
.index_content_item{ |
|||
width: 100%; |
|||
min-height: 155px; |
|||
border: 1px solid rgba(255, 0, 0, 100); |
|||
margin-bottom: 27px; |
|||
} |
|||
.index_content_item_title{ |
|||
height: 40px; |
|||
border-bottom: 1px solid #BBBBBB ; |
|||
padding: 0 10px; |
|||
line-height: 40px; |
|||
font-size: 18px; |
|||
|
|||
} |
|||
.index_content_item:nth-child(2n+1) .index_content_item_title { |
|||
text-align: right; |
|||
} |
|||
.index_content_item_introduce{ |
|||
min-height: 115px; |
|||
width: 100%; |
|||
padding:0 10px; |
|||
font-size: 14px; |
|||
position: relative; |
|||
padding-bottom: 33px; |
|||
padding-top: 10px; |
|||
box-sizing: border-box; |
|||
} |
|||
.index_content_item_introduce_data{ |
|||
position: absolute; |
|||
right: 15px; |
|||
bottom: 0; |
|||
height: 33px; |
|||
line-height: 33px; |
|||
font-size: 14px; |
|||
|
|||
} |
|||
.item_introduce_data_span{ |
|||
color: red; |
|||
} |
|||
|
|||
|
|||
.index_body1{ |
|||
width: 100%; |
|||
background-color: white; |
|||
padding:0 13%; |
|||
box-sizing: border-box; |
|||
} |
|||
.index_body1_title{ |
|||
padding: 20px 10px; |
|||
position: relative; |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
} |
|||
.index_body1_title::after{ |
|||
content: ''; |
|||
width: 5px; |
|||
height: 40px; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
margin-top: -20px; |
|||
background-color: #FF0000 ; |
|||
} |
|||
.index_body1_item{ |
|||
width: 100%; |
|||
min-height: 200px; |
|||
border: 1px solid rgba(255, 73, 73, 100); |
|||
margin-bottom: 24px; |
|||
border-radius: 6px; |
|||
display: flex; |
|||
} |
|||
.index_body1_item_ranking{ |
|||
height: 100%; |
|||
padding-left: 25px; |
|||
padding-top: 10px; |
|||
color: rgba(255, 73, 73, 100); |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
position: relative; |
|||
width: 50px; |
|||
} |
|||
.index_body1_item:nth-child(-n+4) .ranking_num{ |
|||
color: white; |
|||
position: absolute; |
|||
z-index: 999; |
|||
} |
|||
.index_body1_item:nth-child(-n+4) .ranking_sanjiao{ |
|||
display:block; |
|||
content:''; |
|||
border-width:50px 50px 50px 50px; |
|||
border-style:solid; |
|||
border-color:#FF4949 transparent transparent #FF4949; |
|||
|
|||
/* 定位 */ |
|||
position:absolute; |
|||
left:0; |
|||
top:0; |
|||
z-index: 998; |
|||
} |
|||
.index_body1_item_content{ |
|||
width: 72%; |
|||
margin-left: 15px; |
|||
padding-top: 10px; |
|||
margin-right: 45px; |
|||
} |
|||
.item1_content_title{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
margin-bottom: 12px; |
|||
} |
|||
.item1_content_synopsis{ |
|||
font-size: 14px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.item1_content_synopsis:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
.index_body1_item_profit{ |
|||
/* height: 100%; */ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 196px; |
|||
} |
|||
.index_body1_item_profit button{ |
|||
width: 100%; |
|||
height: 48px; |
|||
border-radius: 33px; |
|||
font-size: 18px; |
|||
color: white; |
|||
border: none; |
|||
} |
|||
.item1_profit_button{ |
|||
background-color: rgba(86, 193, 255, 100); |
|||
margin-bottom: 10px; |
|||
} |
|||
.item1_profit_button1{ |
|||
background-color: rgba(255, 126, 20, 100); |
|||
} |
|||
@ -0,0 +1,613 @@ |
|||
/** |
|||
* Swiper 7.2.0 |
|||
* Most modern mobile touch slider and framework with hardware accelerated transitions |
|||
* https://swiperjs.com |
|||
* |
|||
* Copyright 2014-2021 Vladimir Kharlampidi |
|||
* |
|||
* Released under the MIT License |
|||
* |
|||
* Released on: October 27, 2021 |
|||
*/ |
|||
|
|||
@font-face { |
|||
font-family: 'swiper-icons'; |
|||
src: url('data:application/font-woff;charset=utf-8;base64, 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'); |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
} |
|||
:root { |
|||
--swiper-theme-color: #007aff; |
|||
} |
|||
.swiper { |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
position: relative; |
|||
overflow: hidden; |
|||
list-style: none; |
|||
padding: 0; |
|||
/* Fix of Webkit flickering */ |
|||
z-index: 1; |
|||
} |
|||
.swiper-vertical > .swiper-wrapper { |
|||
flex-direction: column; |
|||
} |
|||
.swiper-wrapper { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1; |
|||
display: flex; |
|||
transition-property: transform; |
|||
box-sizing: content-box; |
|||
} |
|||
.swiper-android .swiper-slide, |
|||
.swiper-wrapper { |
|||
transform: translate3d(0px, 0, 0); |
|||
} |
|||
.swiper-pointer-events { |
|||
touch-action: pan-y; |
|||
} |
|||
.swiper-pointer-events.swiper-vertical { |
|||
touch-action: pan-x; |
|||
} |
|||
.swiper-slide { |
|||
flex-shrink: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
transition-property: transform; |
|||
} |
|||
.swiper-slide-invisible-blank { |
|||
visibility: hidden; |
|||
} |
|||
/* Auto Height */ |
|||
.swiper-autoheight, |
|||
.swiper-autoheight .swiper-slide { |
|||
height: auto; |
|||
} |
|||
.swiper-autoheight .swiper-wrapper { |
|||
align-items: flex-start; |
|||
transition-property: transform, height; |
|||
} |
|||
/* 3D Effects */ |
|||
.swiper-3d, |
|||
.swiper-3d.swiper-css-mode .swiper-wrapper { |
|||
perspective: 1200px; |
|||
} |
|||
.swiper-3d .swiper-wrapper, |
|||
.swiper-3d .swiper-slide, |
|||
.swiper-3d .swiper-slide-shadow, |
|||
.swiper-3d .swiper-slide-shadow-left, |
|||
.swiper-3d .swiper-slide-shadow-right, |
|||
.swiper-3d .swiper-slide-shadow-top, |
|||
.swiper-3d .swiper-slide-shadow-bottom, |
|||
.swiper-3d .swiper-cube-shadow { |
|||
transform-style: preserve-3d; |
|||
} |
|||
.swiper-3d .swiper-slide-shadow, |
|||
.swiper-3d .swiper-slide-shadow-left, |
|||
.swiper-3d .swiper-slide-shadow-right, |
|||
.swiper-3d .swiper-slide-shadow-top, |
|||
.swiper-3d .swiper-slide-shadow-bottom { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
pointer-events: none; |
|||
z-index: 10; |
|||
} |
|||
.swiper-3d .swiper-slide-shadow { |
|||
background: rgba(0, 0, 0, 0.15); |
|||
} |
|||
.swiper-3d .swiper-slide-shadow-left { |
|||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
.swiper-3d .swiper-slide-shadow-right { |
|||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
.swiper-3d .swiper-slide-shadow-top { |
|||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
.swiper-3d .swiper-slide-shadow-bottom { |
|||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); |
|||
} |
|||
/* CSS Mode */ |
|||
.swiper-css-mode > .swiper-wrapper { |
|||
overflow: auto; |
|||
scrollbar-width: none; |
|||
/* For Firefox */ |
|||
-ms-overflow-style: none; |
|||
/* For Internet Explorer and Edge */ |
|||
} |
|||
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
.swiper-css-mode > .swiper-wrapper > .swiper-slide { |
|||
scroll-snap-align: start start; |
|||
} |
|||
.swiper-horizontal.swiper-css-mode > .swiper-wrapper { |
|||
scroll-snap-type: x mandatory; |
|||
} |
|||
.swiper-vertical.swiper-css-mode > .swiper-wrapper { |
|||
scroll-snap-type: y mandatory; |
|||
} |
|||
.swiper-centered > .swiper-wrapper::before { |
|||
content: ''; |
|||
flex-shrink: 0; |
|||
order: 9999; |
|||
} |
|||
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { |
|||
margin-inline-start: var(--swiper-centered-offset-before); |
|||
} |
|||
.swiper-centered.swiper-horizontal > .swiper-wrapper::before { |
|||
height: 100%; |
|||
min-height: 1px; |
|||
width: var(--swiper-centered-offset-after); |
|||
} |
|||
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { |
|||
margin-block-start: var(--swiper-centered-offset-before); |
|||
} |
|||
.swiper-centered.swiper-vertical > .swiper-wrapper::before { |
|||
width: 100%; |
|||
min-width: 1px; |
|||
height: var(--swiper-centered-offset-after); |
|||
} |
|||
.swiper-centered > .swiper-wrapper > .swiper-slide { |
|||
scroll-snap-align: center center; |
|||
} |
|||
.swiper-virtual.swiper-css-mode .swiper-wrapper::after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
pointer-events: none; |
|||
} |
|||
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { |
|||
height: 1px; |
|||
width: var(--swiper-virtual-size); |
|||
} |
|||
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { |
|||
width: 1px; |
|||
height: var(--swiper-virtual-size); |
|||
} |
|||
:root { |
|||
--swiper-navigation-size: 44px; |
|||
/* |
|||
--swiper-navigation-color: var(--swiper-theme-color); |
|||
*/ |
|||
} |
|||
.swiper-button-prev, |
|||
.swiper-button-next { |
|||
position: absolute; |
|||
top: 50%; |
|||
width: calc(var(--swiper-navigation-size) / 44 * 27); |
|||
height: var(--swiper-navigation-size); |
|||
margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); |
|||
z-index: 10; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: var(--swiper-navigation-color, var(--swiper-theme-color)); |
|||
} |
|||
.swiper-button-prev.swiper-button-disabled, |
|||
.swiper-button-next.swiper-button-disabled { |
|||
opacity: 0.35; |
|||
cursor: auto; |
|||
pointer-events: none; |
|||
} |
|||
.swiper-button-prev:after, |
|||
.swiper-button-next:after { |
|||
font-family: swiper-icons; |
|||
font-size: var(--swiper-navigation-size); |
|||
text-transform: none !important; |
|||
letter-spacing: 0; |
|||
text-transform: none; |
|||
font-variant: initial; |
|||
line-height: 1; |
|||
} |
|||
.swiper-button-prev, |
|||
.swiper-rtl .swiper-button-next { |
|||
left: 10px; |
|||
right: auto; |
|||
} |
|||
.swiper-button-prev:after, |
|||
.swiper-rtl .swiper-button-next:after { |
|||
content: 'prev'; |
|||
} |
|||
.swiper-button-next, |
|||
.swiper-rtl .swiper-button-prev { |
|||
right: 10px; |
|||
left: auto; |
|||
} |
|||
.swiper-button-next:after, |
|||
.swiper-rtl .swiper-button-prev:after { |
|||
content: 'next'; |
|||
} |
|||
.swiper-button-lock { |
|||
display: none; |
|||
} |
|||
:root { |
|||
/* |
|||
--swiper-pagination-color: var(--swiper-theme-color); |
|||
--swiper-pagination-bullet-size: 8px; |
|||
--swiper-pagination-bullet-width: 8px; |
|||
--swiper-pagination-bullet-height: 8px; |
|||
--swiper-pagination-bullet-inactive-color: #000; |
|||
--swiper-pagination-bullet-inactive-opacity: 0.2; |
|||
--swiper-pagination-bullet-opacity: 1; |
|||
--swiper-pagination-bullet-horizontal-gap: 4px; |
|||
--swiper-pagination-bullet-vertical-gap: 6px; |
|||
*/ |
|||
} |
|||
.swiper-pagination { |
|||
position: absolute; |
|||
text-align: center; |
|||
transition: 300ms opacity; |
|||
transform: translate3d(0, 0, 0); |
|||
z-index: 10; |
|||
} |
|||
.swiper-pagination.swiper-pagination-hidden { |
|||
opacity: 0; |
|||
} |
|||
/* Common Styles */ |
|||
.swiper-pagination-fraction, |
|||
.swiper-pagination-custom, |
|||
.swiper-horizontal > .swiper-pagination-bullets, |
|||
.swiper-pagination-bullets.swiper-pagination-horizontal { |
|||
bottom: 10px; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
/* Bullets */ |
|||
.swiper-pagination-bullets-dynamic { |
|||
overflow: hidden; |
|||
font-size: 0; |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
transform: scale(0.33); |
|||
position: relative; |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { |
|||
transform: scale(1); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { |
|||
transform: scale(1); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { |
|||
transform: scale(0.66); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { |
|||
transform: scale(0.33); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { |
|||
transform: scale(0.66); |
|||
} |
|||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { |
|||
transform: scale(0.33); |
|||
} |
|||
.swiper-pagination-bullet { |
|||
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); |
|||
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
background: var(--swiper-pagination-bullet-inactive-color, #000); |
|||
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); |
|||
} |
|||
button.swiper-pagination-bullet { |
|||
border: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
box-shadow: none; |
|||
-webkit-appearance: none; |
|||
appearance: none; |
|||
} |
|||
.swiper-pagination-clickable .swiper-pagination-bullet { |
|||
cursor: pointer; |
|||
} |
|||
.swiper-pagination-bullet:only-child { |
|||
display: none !important; |
|||
} |
|||
.swiper-pagination-bullet-active { |
|||
opacity: var(--swiper-pagination-bullet-opacity, 1); |
|||
background: var(--swiper-pagination-color, var(--swiper-theme-color)); |
|||
} |
|||
.swiper-vertical > .swiper-pagination-bullets, |
|||
.swiper-pagination-vertical.swiper-pagination-bullets { |
|||
right: 10px; |
|||
top: 50%; |
|||
transform: translate3d(0px, -50%, 0); |
|||
} |
|||
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, |
|||
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { |
|||
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; |
|||
display: block; |
|||
} |
|||
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, |
|||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 8px; |
|||
} |
|||
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, |
|||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
display: inline-block; |
|||
transition: 200ms transform, 200ms top; |
|||
} |
|||
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, |
|||
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { |
|||
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); |
|||
} |
|||
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, |
|||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
white-space: nowrap; |
|||
} |
|||
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, |
|||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
transition: 200ms transform, 200ms left; |
|||
} |
|||
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { |
|||
transition: 200ms transform, 200ms right; |
|||
} |
|||
/* Progress */ |
|||
.swiper-pagination-progressbar { |
|||
background: rgba(0, 0, 0, 0.25); |
|||
position: absolute; |
|||
} |
|||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { |
|||
background: var(--swiper-pagination-color, var(--swiper-theme-color)); |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
transform: scale(0); |
|||
transform-origin: left top; |
|||
} |
|||
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { |
|||
transform-origin: right top; |
|||
} |
|||
.swiper-horizontal > .swiper-pagination-progressbar, |
|||
.swiper-pagination-progressbar.swiper-pagination-horizontal, |
|||
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, |
|||
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { |
|||
width: 100%; |
|||
height: 4px; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.swiper-vertical > .swiper-pagination-progressbar, |
|||
.swiper-pagination-progressbar.swiper-pagination-vertical, |
|||
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, |
|||
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { |
|||
width: 4px; |
|||
height: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.swiper-pagination-lock { |
|||
display: none; |
|||
} |
|||
/* Scrollbar */ |
|||
.swiper-scrollbar { |
|||
border-radius: 10px; |
|||
position: relative; |
|||
-ms-touch-action: none; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
} |
|||
.swiper-horizontal > .swiper-scrollbar { |
|||
position: absolute; |
|||
left: 1%; |
|||
bottom: 3px; |
|||
z-index: 50; |
|||
height: 5px; |
|||
width: 98%; |
|||
} |
|||
.swiper-vertical > .swiper-scrollbar { |
|||
position: absolute; |
|||
right: 3px; |
|||
top: 1%; |
|||
z-index: 50; |
|||
width: 5px; |
|||
height: 98%; |
|||
} |
|||
.swiper-scrollbar-drag { |
|||
height: 100%; |
|||
width: 100%; |
|||
position: relative; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
border-radius: 10px; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.swiper-scrollbar-cursor-drag { |
|||
cursor: move; |
|||
} |
|||
.swiper-scrollbar-lock { |
|||
display: none; |
|||
} |
|||
.swiper-zoom-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
} |
|||
.swiper-zoom-container > img, |
|||
.swiper-zoom-container > svg, |
|||
.swiper-zoom-container > canvas { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
object-fit: contain; |
|||
} |
|||
.swiper-slide-zoomed { |
|||
cursor: move; |
|||
} |
|||
/* Preloader */ |
|||
:root { |
|||
/* |
|||
--swiper-preloader-color: var(--swiper-theme-color); |
|||
*/ |
|||
} |
|||
.swiper-lazy-preloader { |
|||
width: 42px; |
|||
height: 42px; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
margin-left: -21px; |
|||
margin-top: -21px; |
|||
z-index: 10; |
|||
transform-origin: 50%; |
|||
animation: swiper-preloader-spin 1s infinite linear; |
|||
box-sizing: border-box; |
|||
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); |
|||
border-radius: 50%; |
|||
border-top-color: transparent; |
|||
} |
|||
.swiper-lazy-preloader-white { |
|||
--swiper-preloader-color: #fff; |
|||
} |
|||
.swiper-lazy-preloader-black { |
|||
--swiper-preloader-color: #000; |
|||
} |
|||
@keyframes swiper-preloader-spin { |
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
/* a11y */ |
|||
.swiper .swiper-notification { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
pointer-events: none; |
|||
opacity: 0; |
|||
z-index: -1000; |
|||
} |
|||
.swiper-free-mode > .swiper-wrapper { |
|||
transition-timing-function: ease-out; |
|||
margin: 0 auto; |
|||
} |
|||
.swiper-grid > .swiper-wrapper { |
|||
flex-wrap: wrap; |
|||
} |
|||
.swiper-grid-column > .swiper-wrapper { |
|||
flex-wrap: wrap; |
|||
flex-direction: column; |
|||
} |
|||
.swiper-fade.swiper-free-mode .swiper-slide { |
|||
transition-timing-function: ease-out; |
|||
} |
|||
.swiper-fade .swiper-slide { |
|||
pointer-events: none; |
|||
transition-property: opacity; |
|||
} |
|||
.swiper-fade .swiper-slide .swiper-slide { |
|||
pointer-events: none; |
|||
} |
|||
.swiper-fade .swiper-slide-active, |
|||
.swiper-fade .swiper-slide-active .swiper-slide-active { |
|||
pointer-events: auto; |
|||
} |
|||
.swiper-cube { |
|||
overflow: visible; |
|||
} |
|||
.swiper-cube .swiper-slide { |
|||
pointer-events: none; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
z-index: 1; |
|||
visibility: hidden; |
|||
transform-origin: 0 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.swiper-cube .swiper-slide .swiper-slide { |
|||
pointer-events: none; |
|||
} |
|||
.swiper-cube.swiper-rtl .swiper-slide { |
|||
transform-origin: 100% 0; |
|||
} |
|||
.swiper-cube .swiper-slide-active, |
|||
.swiper-cube .swiper-slide-active .swiper-slide-active { |
|||
pointer-events: auto; |
|||
} |
|||
.swiper-cube .swiper-slide-active, |
|||
.swiper-cube .swiper-slide-next, |
|||
.swiper-cube .swiper-slide-prev, |
|||
.swiper-cube .swiper-slide-next + .swiper-slide { |
|||
pointer-events: auto; |
|||
visibility: visible; |
|||
} |
|||
.swiper-cube .swiper-slide-shadow-top, |
|||
.swiper-cube .swiper-slide-shadow-bottom, |
|||
.swiper-cube .swiper-slide-shadow-left, |
|||
.swiper-cube .swiper-slide-shadow-right { |
|||
z-index: 0; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
} |
|||
.swiper-cube .swiper-cube-shadow { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 0.6; |
|||
z-index: 0; |
|||
} |
|||
.swiper-cube .swiper-cube-shadow:before { |
|||
content: ''; |
|||
background: #000; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
filter: blur(50px); |
|||
} |
|||
.swiper-flip { |
|||
overflow: visible; |
|||
} |
|||
.swiper-flip .swiper-slide { |
|||
pointer-events: none; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
z-index: 1; |
|||
} |
|||
.swiper-flip .swiper-slide .swiper-slide { |
|||
pointer-events: none; |
|||
} |
|||
.swiper-flip .swiper-slide-active, |
|||
.swiper-flip .swiper-slide-active .swiper-slide-active { |
|||
pointer-events: auto; |
|||
} |
|||
.swiper-flip .swiper-slide-shadow-top, |
|||
.swiper-flip .swiper-slide-shadow-bottom, |
|||
.swiper-flip .swiper-slide-shadow-left, |
|||
.swiper-flip .swiper-slide-shadow-right { |
|||
z-index: 0; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
} |
|||
.swiper-creative .swiper-slide { |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
overflow: hidden; |
|||
transition-property: transform, opacity, height; |
|||
} |
|||
.swiper-cards { |
|||
overflow: visible; |
|||
} |
|||
.swiper-cards .swiper-slide { |
|||
transform-origin: center bottom; |
|||
-webkit-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
overflow: hidden; |
|||
} |
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 897 KiB |
|
After Width: | Height: | Size: 650 KiB |
|
After Width: | Height: | Size: 650 KiB |
@ -0,0 +1,106 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title></title> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css"/> |
|||
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/> |
|||
|
|||
</head> |
|||
<body > |
|||
<header> |
|||
<img src="./img/achievement_bg.png" class="header_img"> |
|||
<div class="header_item" onclick="goPage()">首页</div> |
|||
<div class="header_item">赛事介绍</div> |
|||
<div class="header_item">大赛排名</div> |
|||
<div class="header_item">关于我们</div> |
|||
</header> |
|||
<div class="banner"> |
|||
<div class="swiper"> |
|||
<div class="swiper-wrapper"> |
|||
<img src="img/banner3.png" class="swiper-slide "> |
|||
<img src="img/banner1.png" class="swiper-slide"> |
|||
<img src="img/banner2.png" class="swiper-slide"> |
|||
</div> |
|||
<!-- 如果需要分页器 --> |
|||
<div class="swiper-pagination"></div> |
|||
|
|||
<!-- 如果需要导航按钮 --> |
|||
<div class="swiper-button-prev"></div> |
|||
<div class="swiper-button-next"></div> |
|||
</div> |
|||
</div> |
|||
<section class="index_body"> |
|||
<div class="index_content"> |
|||
<div class="index_content_title">老师介绍</div> |
|||
|
|||
<div class="index_content_item"> |
|||
<div class="index_content_item_title">1 Peter</div> |
|||
<div class="index_content_item_introduce"> |
|||
<span> |
|||
Peter ，天才交易员，毕业于新加坡东亚管理学院。渣打银行职员， 2019年8月进入商品公司担任交易员，公司给予3万美元作为交易基金，三年时间的收益扩大为5000万美元。 |
|||
擅长利用资讯，数据综合分析，进行短线布局。交易理念：不要把鸡蛋放在一个篮子里，分散投资，趋势为王 |
|||
</span> |
|||
<div class="index_content_item_introduce_data"> |
|||
<span> |
|||
昨日盈利比： |
|||
<span class="item_introduce_data_span">3%</span> |
|||
总应力比： |
|||
<span class="item_introduce_data_span">40%</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="index_content_item"> |
|||
<div class="index_content_item_title">1 Peter</div> |
|||
<div class="index_content_item_introduce"> |
|||
<span> |
|||
Peter ，天才交易员，毕业于新加坡东亚管理学院。渣打银行职员， 2019年8月进入商品公司担任交易员，公司给予3万美元作为交易基金，三年时间的收益扩大为5000万美元。 |
|||
擅长利用资讯，数据综合分析，进行短线布局。交易理念：不要把鸡蛋放在一个篮子里，分散投资，趋势为王 |
|||
</span> |
|||
<div class="index_content_item_introduce_data"> |
|||
<span> |
|||
昨日盈利比： |
|||
<span class="item_introduce_data_span">3%</span> |
|||
总应力比： |
|||
<span class="item_introduce_data_span">40%</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</section> |
|||
|
|||
<footer > |
|||
<div>联系我们：</div> |
|||
<div>super@coinkoon.com</div> |
|||
</footer> |
|||
|
|||
</body> |
|||
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> |
|||
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script> |
|||
<script> |
|||
var mySwiper = new Swiper ('.swiper', { |
|||
direction: 'horizontal', // 垂直切换选项 |
|||
loop: true, // 循环模式选项 |
|||
autoplay:true, |
|||
|
|||
// 如果需要分页器 |
|||
pagination: { |
|||
el: '.swiper-pagination', |
|||
}, |
|||
|
|||
// 如果需要前进后退按钮 |
|||
navigation: { |
|||
nextEl: '.swiper-button-next', |
|||
prevEl: '.swiper-button-prev', |
|||
}, |
|||
|
|||
}) |
|||
function goPage(){ |
|||
window.location.href="index1.html" |
|||
} |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,140 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title></title> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css"/> |
|||
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/> |
|||
|
|||
</head> |
|||
<body > |
|||
<header> |
|||
<img src="./img/achievement_bg.png" class="header_img"> |
|||
<div class="header_item" onclick="goPage()">首页</div> |
|||
<div class="header_item">赛事介绍</div> |
|||
<div class="header_item">大赛排名</div> |
|||
<div class="header_item">关于我们</div> |
|||
</header> |
|||
<div class="banner"> |
|||
<div class="swiper"> |
|||
<div class="swiper-wrapper"> |
|||
<img src="img/banner3.png" class="swiper-slide "> |
|||
<img src="img/banner1.png" class="swiper-slide"> |
|||
<img src="img/banner2.png" class="swiper-slide"> |
|||
</div> |
|||
<!-- 如果需要分页器 --> |
|||
<div class="swiper-pagination"></div> |
|||
|
|||
<!-- 如果需要导航按钮 --> |
|||
<div class="swiper-button-prev"></div> |
|||
<div class="swiper-button-next"></div> |
|||
</div> |
|||
</div> |
|||
<section class="index_body1"> |
|||
<div class="index_body1_title">金牌老师Top 10</div> |
|||
|
|||
<div class="index_body1_item"> |
|||
<div class="index_body1_item_ranking"> |
|||
<div class="ranking_num">1</div> |
|||
<div class="ranking_sanjiao"></div> |
|||
</div> |
|||
<div class="index_body1_item_content"> |
|||
<p class="item1_content_title">Peter</p> |
|||
<p class="item1_content_synopsis"> |
|||
Peter ，天才交易员，毕业于新加坡东亚管理学院。渣打银行职员， 2019年8月进入商品公司担任交易员，公司给予3万美元作为交易基金，三年时间的收益扩大为5000万美元。 |
|||
</p> |
|||
<p class="item1_content_synopsis">擅长利用资讯，数据综合分析，进行短线布局。交易理念：不要把鸡蛋放在一个篮子里，分散投资，趋势为王。</p> |
|||
</div> |
|||
<div class="index_body1_item_profit"> |
|||
<button type="button" class="item1_profit_button">昨日盈利比：3%</button> |
|||
<button type="button" class="item1_profit_button1">总应力比：40%</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="index_body1_item"> |
|||
<div class="index_body1_item_ranking"> |
|||
<div class="ranking_num">2</div> |
|||
<div class="ranking_sanjiao"></div> |
|||
</div> |
|||
<div class="index_body1_item_content"> |
|||
<p class="item1_content_title">Peter</p> |
|||
<p class="item1_content_synopsis"> |
|||
Peter ，天才交易员，毕业于新加坡东亚管理学院。渣打银行职员， 2019年8月进入商品公司担任交易员，公司给予3万美元作为交易基金，三年时间的收益扩大为5000万美元。 |
|||
</p> |
|||
<p class="item1_content_synopsis">擅长利用资讯，数据综合分析，进行短线布局。交易理念：不要把鸡蛋放在一个篮子里，分散投资，趋势为王。</p> |
|||
</div> |
|||
<div class="index_body1_item_profit"> |
|||
<button type="button" class="item1_profit_button">昨日盈利比：3%</button> |
|||
<button type="button" class="item1_profit_button1">总应力比：40%</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="index_body1_item"> |
|||
<div class="index_body1_item_ranking"> |
|||
<div class="ranking_num">3</div> |
|||
<div class="ranking_sanjiao"></div> |
|||
</div> |
|||
<div class="index_body1_item_content"> |
|||
<p class="item1_content_title">Peter</p> |
|||
<p class="item1_content_synopsis"> |
|||
Peter ，天才交易员，毕业于新加坡东亚管理学院。渣打银行职员， 2019年8月进入商品公司担任交易员，公司给予3万美元作为交易基金，三年时间的收益扩大为5000万美元。 |
|||
</p> |
|||
<p class="item1_content_synopsis">擅长利用资讯，数据综合分析，进行短线布局。交易理念：不要把鸡蛋放在一个篮子里，分散投资，趋势为王。</p> |
|||
</div> |
|||
<div class="index_body1_item_profit"> |
|||
<button type="button" class="item1_profit_button">昨日盈利比：3%</button> |
|||
<button type="button" class="item1_profit_button1">总应力比：40%</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="index_body1_item"> |
|||
<div class="index_body1_item_ranking"> |
|||
<div class="ranking_num">4</div> |
|||
<div class="ranking_sanjiao"></div> |
|||
</div> |
|||
<div class="index_body1_item_content"> |
|||
<p class="item1_content_title">Peter</p> |
|||
<p class="item1_content_synopsis"> |
|||
Peter ，天才交易员，毕业于新加坡东亚管理学院。渣打银行职员， 2019年8月进入商品公司担任交易员，公司给予3万美元作为交易基金，三年时间的收益扩大为5000万美元。 |
|||
</p> |
|||
<p class="item1_content_synopsis">擅长利用资讯，数据综合分析，进行短线布局。交易理念：不要把鸡蛋放在一个篮子里，分散投资，趋势为王。</p> |
|||
</div> |
|||
<div class="index_body1_item_profit"> |
|||
<button type="button" class="item1_profit_button">昨日盈利比：3%</button> |
|||
<button type="button" class="item1_profit_button1">总应力比：40%</button> |
|||
</div> |
|||
</div> |
|||
|
|||
</section> |
|||
|
|||
<footer > |
|||
<div>联系我们：</div> |
|||
<div>super@coinkoon.com</div> |
|||
</footer> |
|||
|
|||
</body> |
|||
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> |
|||
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script> |
|||
<script> |
|||
var mySwiper = new Swiper ('.swiper', { |
|||
direction: 'horizontal', // 垂直切换选项 |
|||
loop: true, // 循环模式选项 |
|||
autoplay:true, |
|||
|
|||
// 如果需要分页器 |
|||
pagination: { |
|||
el: '.swiper-pagination', |
|||
}, |
|||
|
|||
// 如果需要前进后退按钮 |
|||
navigation: { |
|||
nextEl: '.swiper-button-next', |
|||
prevEl: '.swiper-button-prev', |
|||
}, |
|||
|
|||
}) |
|||
function goPage(){ |
|||
window.location.href="index.html" |
|||
} |
|||
</script> |
|||
</html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue