(function ($) { $.fn.swipeslider = function (options) { var slideContainer = this; var slider = this.find(‘.sw-slides‘); // reference to slider var defaultSettings = { /** / How long one slide will change the other. */ transitionDuration: 500, /** / Enable autoplay */ //控制是否自动滚动 // autoPlay: false, autoPlay: true, /** * How frequently slides will be changed. */ //时间data autoPlayTimeout: 10000, /** * Transition effect. */ timingFunction: ‘ease-out‘, /** * Show ‘Next‘ and ‘Previous‘ buttons. */ //两边左右 prevNextButtons: true, /** * Show slide switches. */ //下标点 bullets: true, /** * Enable swipe function. */ swipe: true, /** * Overall height of the slider. Set it to percent to make it responsive. * Otherwise the slider will keep the height. */ //大小高度 // sliderHeight: ‘35%‘ }; var settings = $.extend(defaultSettings, options); // Privates // /** Sliding states: * 0 - sliding not started * 1 - sliding started * 2 - slide released */ var slidingState = 0; var startClientX = 0; var startPixelOffset = 0; var pixelOffset = 0; var currentSlide = 0; var slideCount = 0; // Overall width of sliders. var slidesWidth = 0; // Flag for disbling swipe function while transition animation is playing. var allowSwipe = true; var transitionDuration = settings.transitionDuration; var swipe = settings.swipe; var autoPlayTimeout = settings.autoPlayTimeout; // ID of timeout function that waits for animation to end. var animationDelayID = undefined; var allowSlideSwitch = true; var autoPlay = settings.autoPlay; /** * Set initial values. */ (function init() { $(slideContainer).css(‘padding-top‘, settings.sliderHeight); slidesWidth = slider.width(); // Change slide width when window changes. $(window).resize(resizeSlider); if(settings.prevNextButtons) { insertPrevNextButtons(); } // Add last slide before first and first before last to seamless and engless transition slider.find(‘.sw-slide:last-child‘).clone().prependTo(slider); slider.find(‘.sw-slide:nth-child(2)‘).clone().appendTo(slider); slideCount = slider.find(‘.sw-slide‘).length; if(settings.bullets) { insertBullets(slideCount - 2); } setTransitionDuration(transitionDuration); setTimingFunction(settings.timingFunction); setTransitionProperty(‘all‘); if(swipe) { // Add event handlers to react when user swipe. slider.on(‘mousedown touchstart‘, swipeStart); $(‘html‘).on(‘mouseup touchend‘, swipeEnd); $(‘html‘).on(‘mousemove touchmove‘, swiping); } // Jump to slide 1 (since another slide was added to the beginning of row); jumpToSlide(1); enableAutoPlay(); })(); function resizeSlider(){ // Slide width is being changed automatically. Tough slidesWidth used to calculate a distance of transition effect. slidesWidth = slider.width(); switchSlide(); } function swipeStart(event) { if(!allowSwipe) { return; } disableAutoPlay(); // If it is mobile device redefine event to first touch point if (event.originalEvent.touches) event = event.originalEvent.touches[0]; // Check if slide started on slider if (slidingState == 0){ slidingState = 1; // Status 1 = slide started. startClientX = event.clientX; } } /** Triggers when user continues swipe. * @param event browser event object */ function swiping(event) { var pointerData; // Get pointer data from event. if (event.originalEvent.touches) { pointerData = event.originalEvent.touches[0]; } else { pointerData = event; } // Distance of slide from the first touch var deltaSlide = pointerData.clientX - startClientX; // If sliding started first time and there was a distance. if (slidingState == 1 && deltaSlide != 0) { slidingState = 2; // Set status to ‘actually moving‘ startPixelOffset = currentSlide * -slidesWidth; // Store current offset of slide } // When user move image if (slidingState == 2) { event.preventDefault(); // Disable default action to prevent unwanted selection. Can‘t prevent touches. // Means that user slide 1 pixel for every 1 pixel of mouse movement. var touchPixelRatio = 1; // Check for user doesn‘t slide out of boundaries if ((currentSlide == 0 && pointerData.clientX > startClientX) || (currentSlide == slideCount - 1 && pointerData.clientX < startClientX)) { // Set ratio to 3 means image will be moving by 3 pixels each time user moves it‘s pointer by 1 pixel. (Rubber-band effect) touchPixelRatio = 3; } // How far to translate slide while dragging. pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio; enableTransition(false); // Apply moving and remove animation class translateX(pixelOffset); } } function swipeEnd(event) { if (slidingState == 2) { // Reset sliding state. slidingState = 0; // Calculate which slide need to be in view. currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide -1; // Make sure that unexisting slides weren‘t selected. currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1); // Since in this example slide is full viewport width offset can be calculated according to it. pixelOffset = currentSlide * -slidesWidth; disableSwipe(); switchSlide(); enableAutoPlay(); } slidingState = 0; } function disableSwipe() { allowSwipe = false; window.setTimeout(enableSwipe, transitionDuration) } function enableSwipe() { allowSwipe = true; } function disableAutoPlay() { allowSlideSwitch = false; window.clearTimeout(animationDelayID); } function enableAutoPlay() { if(autoPlay) { allowSlideSwitch = true; startAutoPlay(); } } function startAutoPlay() { if(allowSlideSwitch) { animationDelayID = window.setTimeout(performAutoPlay, autoPlayTimeout); } } function performAutoPlay() { switchForward(); startAutoPlay(); } function switchForward() { currentSlide += 1; switchSlide(); } function switchBackward() { currentSlide -= 1; switchSlide(); } function switchSlide() { enableTransition(true); translateX(-currentSlide * slidesWidth); if(currentSlide == 0) { window.setTimeout(jumpToEnd, transitionDuration); } else if (currentSlide == slideCount - 1) { window.setTimeout(jumpToStart, transitionDuration); } setActiveBullet(currentSlide); } function jumpToStart() { jumpToSlide(1); } function jumpToEnd() { jumpToSlide(slideCount - 2); } function jumpToSlide(slideNumber) { enableTransition(false); currentSlide = slideNumber; translateX(-slidesWidth * currentSlide); window.setTimeout(returnTransitionAfterJump, 50); } function returnTransitionAfterJump() { enableTransition(true); } function enableTransition(enable) { if (enable) { setTransitionProperty(‘all‘); } else { setTransitionProperty(‘none‘); } } function translateX(distance) { slider // Prefixes are being set automatically. // .css(‘-webkit-transform‘,‘translateX(‘ + distance + ‘px)‘) // .css(‘-ms-transform‘,‘translateX(‘ + distance + ‘px)‘) .css(‘transform‘,‘translateX(‘ + distance + ‘px)‘); } function setTransitionDuration(duration) { slider // .css(‘-webkit-transition-duration‘, duration + ‘ms‘) .css(‘transition-duration‘, duration + ‘ms‘); } function setTimingFunction(functionDescription) { slider // .css(‘-webkit-transition-timing-function‘, functionDescription) .css(‘transition-timing-function‘, functionDescription); } function setTransitionProperty(property) { slider // .css(‘-webkit-transition-property‘, property) .css(‘transition-property‘, property); } function insertPrevNextButtons() { slider.after(‘<span class="sw-next-prev sw-prev"></span>‘); slideContainer.find(‘.sw-prev‘).click(function(){ if(allowSlideSwitch){ disableAutoPlay(); switchBackward(); enableAutoPlay(); } }); slider.after(‘<span class="sw-next-prev sw-next"></span>‘); slideContainer.find(‘.sw-next‘).click(function(){ if(allowSlideSwitch) { disableAutoPlay(); switchForward(); enableAutoPlay(); } }); } function insertBullets(count) { slider.after(‘<ul class="sw-bullet"></ul>‘); var bulletList = slider.parent().find(‘.sw-bullet‘); for (var i = 0; i < count; i++) { if (i == 0) { bulletList.append(‘<li class="sw-slide-‘ + i + ‘ active"></li>‘); } else { bulletList.append(‘<li class="sw-slide-‘ + i + ‘"></li>‘); } var item = slideContainer.find(‘.sw-slide-‘ + i); (function(lockedIndex) { item.click(function() { // Disable autoplay on time of transition. disableAutoPlay(); currentSlide = lockedIndex + 1; switchSlide(); enableAutoPlay(); }); })(i); } } function setActiveBullet(number) { var activeBullet = 0; if(number == 0) { activeBullet = slideCount - 3; } else if (number == slideCount - 1) { activeBullet = 0; } else { activeBullet = number - 1; } slideContainer.find(‘.sw-bullet‘).find(‘li‘).removeClass(‘active‘); slideContainer.find(‘.sw-slide-‘ + activeBullet).addClass(‘active‘); } return slideContainer; } }(jQuery));
<div class="container"> <div id="responsiveness" class="swipslider"> <ul class="sw-slides"> <li class="sw-slide"> <!--<img src="img/children_game_concept01.jpg" alt="Concept for children game">--> </li> <li class="sw-slide"> <!--<img src="img/children_game_concept02.jpg" alt="Another Concept for children game">--> </li> <li class="sw-slide"> <img src="img/lang_yie_ar_kung_fu.jpg" alt="Another Concept for children game"> </li> <li class="sw-slide"> <!--<img src="img/borderlands_tiny_tina.jpg" alt="Another Concept for children game">--> </li> <li class="sw-slide"> <!--<img src="img/summer_beach.jpg" alt="Another Concept for children game">--> </li> </ul> </div> </div>
* { margin: 0; padding: 0; } /*解决底部定位*/ html, body { /*height: 100%;*/ min-height: 100%; position: relative; } body { padding-bottom: 298px; box-sizing: border-box; } html { height: 100%; } .footer { position: absolute; left: 0; bottom: 0; } /*解决底部定位end*/ a { text-decoration: none; outline: none; cursor: pointer; } a:hover { text-decoration: none; } button, input, select, textarea { font-size: 100%; outline: none; } input[type="submit"], input[type="password"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; } input::-ms-clear, input::-ms-reveal { display: none; } .header-theme-asd>em { width: 0; height: 14px; border-left: 1px solid #00A8FD; margin: 5px 10px 0; } body { /*font: 14px/24px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei";*/ font-family: "Microsoft YaHei"!important; color: #EEEFF7; /*background-color: #1D2936;*/ background: #111b2f; } .warp { width: 100%; min-height: 100%; position: relative; } .header { width: 100%; /*min-width: 1240px;*/ height: 34px; padding: 7px 0; /*background-color: #2A404F;*/ background: #121628; position: relative; z-index: 1; } .logo { float: left; height: 100%; margin: 0 30px 0 25px; } .logo a { display: block; height: 100%; } .logo img { height: 100%; } .nav { float: left; height: 100%; padding: 5px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .nav a { display: inline-block; margin: 1px 14px; font-size: 14px; line-height: 24px; color: #999; } .nav a.active, .nav a:hover { color: #EEEFF7; } .header-search { width: 276px; height: 34px; border-radius: 17px; position: absolute; left: 50%; top: 7px; margin-left: -160px; /*background-color: #12202D;*/ } @media only screen and (min-width: 1000px) and (max-width: 1300px) { .header-search { width: 12%; height: 34px; margin-left: -8%; } .logo { margin-right: 1%; } .logo img { /*width: 100px;*/ } } /*@media only screen and (max-width: 999px) { .header-search { width: 10%; height: 34px; margin-left: -7%; } .header { } .logo { margin-right: 1%; } }*/ .search-icon { display: block; width: 20px; height: 20px; background: url(‘../../images/v2/search-icon.svg‘) no-repeat 0 0/40px auto; position: absolute; left: 15px; top: 7px; z-index: 2; } .search-input { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px 20px 5px 45px; border: 1px solid #6d88A0; border-radius: 17px; background-color: transparent; color: #EEEFF7; font: 14px/24px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei"; position: relative; z-index: 3; } .search-input:focus { border-color: #66AFE9; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.75), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.75), 0 0 8px rgba(102, 175, 233, 0.6); } .search-input:focus+.search-icon { background-position: -20px 0; } .header-right { float: right; height: 100%; padding-right: 25px; } .header-right>div { float: left; height: 24px; padding: 4px 0; position: relative; } .header-right>div+div { /*padding-left:19px;*/ padding-left: 1px; } .header-logined>a { float: left; color: #00A8FD; } .header-logined>a:hover { text-decoration: underline; } .header-logined>em { float: left; width: 0; height: 14px; border-left: 1px solid #00A8FD; margin: 5px 10px 0; } .header-logined>span { float: left; line-height: 24px; padding-left: 22px; padding-right: 18px; cursor: pointer; position: relative; z-index: 5; } .header-logined>span:before, .header-logined>span:after { display: block; content: ‘‘; position: absolute; top: 50%; z-index: 4; } .header-logined>span:before { width: 12px; height: 12px; background: url("../../images/v2/person.svg") no-repeat 0 0; left: 0; margin-top: -6px; } .header-logined>span:after { width: 0; height: 0; border-top: 4px solid #EEEFF7; border-right: 4px solid transparent; border-left: 4px solid transparent; right: 0; margin-top: -2px; } .header-logined:hover .logined-ul { display: block; } .logined-ul, .language-ul { display: none; width: 114px; position: absolute; right: 0; top: 34px; } .logined-ul:before, .language-ul:before { display: block; content: ‘‘; width: 0; height: 0; border-bottom: 3px solid #FFF; border-right: 3px solid transparent; border-left: 3px solid transparent; position: absolute; right: 15px; top: -3px; } .logined-ul a, .language-ul a { display: block; height: 24px; padding: 5px; position: relative; line-height: 24px; color: #474747; background-color: #FFF; overflow: hidden; } .logined-ul a:first-child, .language-ul a:first-child { border-radius: 4px 4px 0 0; } .logined-ul a:last-child, .language-ul a:last-child { border-radius: 0 0 4px 4px; } .logined-ul a+a, .language-ul a+a { border-top: 1px solid #2A404F; } .logined-ul a:hover, .language-ul a:hover { background-color: #86A2E3; } .logined-ul em, .language-ul em { display: inline-block; vertical-align: top; font: 14px/24px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei"; } .logined-ul i { display: inline-block; vertical-align: top; width: 12px; height: 12px; margin: 6px 10px 0 10px; } .logined-icon01 { background: url(‘../../images/v2/logined-icon01.svg‘) no-repeat 0 0; } .logined-icon02 { /*background: url(‘../images/v2/logined-icon02.svg‘) no-repeat 0 0;*/ background: url(‘../../images/v2/logined-icon01.svg‘) no-repeat; } .logined-icon03 { background: url(‘../../images/v2/logined-icon03.svg‘) no-repeat 0 0; } .logined-icon04 { background: url(‘../../images/v2/logined-icon04.svg‘) no-repeat 0 0; } .language-icon, .language-ul i { background: url(‘../../images/v2/language.svg‘) no-repeat 0 0/48px auto; } .language-icon.chinese, .language-ul i.chinese { background-position: 0 0; } .language-icon.english, .language-ul i.english { background-position: -24px 0; } .language-ul i { display: inline-block; vertical-align: top; width: 24px; height: 24px; margin: 0 10px; } .theme-icon { background: url(‘../../images/v2/theme_sun.svg‘) no-repeat 0 0; } .theme-icon.sun { background-position: 0 0; } .theme-icon.moon { background-position: 0 0; } .header-language, .header-theme { width: 24px; } .header-language>span, .header-theme>span { float: left; width: 100%; height: 100%; cursor: pointer; } .header-language:hover .language-ul { display: block; } .footer { width: 100%; /*height: 140px;*/ padding: 50px 0; background-color: #37393F; position: absolute; bottom: 0; } .footer-main { width: 1200px; height: 100%; margin: 0 auto; /*background: dimgrey;*/ } .footer-main dl { float: left; width: 180px; } .footer-main dt { color: #D7D8D9; padding-bottom: 20px; line-height: 1; } .footer-main dd { height: 24px; font-size: 12px; line-height: 24px; } .footer-main a { color: #9B9EA0; } .footer-main a:hover { color: #28D0E9; } .footer-right { float: right; height: 100%; text-align: right; } .footer-right img { /*display: block;*/ width: 208px; } .footer-right p { margin-top: 20px; font-size: 12px; line-height: 24px; color: #9B9EA0; } .footer-link { margin-top: 27px; font-size: 0; } .footer-link a { display: inline-block; vertical-align: top; width: 30px; height: 30px; /*background: url(‘../../images/v2/footer-icon.svg‘) no-repeat 0 0/60px auto;*/ background: url(‘../../images/v2/footer-icon.svg‘) no-repeat 0 0/60px auto; } .footer-link a+a { margin-left: 24px; } .footer-link a.icon01 { background-position: 0 0; } .footer-link a.icon02 { background-position: 0 -30px; } .footer-link a.icon03 { background-position: 0 -60px; } .footer-link a.icon04 { background-position: 0 -90px; } .footer-link a:hover.icon01 { background-position: -30px 0; } .footer-link a:hover.icon02 { background-position: -30px -30px; } .footer-link a:hover.icon03 { background-position: -30px -60px; } .footer-link a:hover.icon04 { background-position: -30px -90px; } @media only screen and (min-width: 1000px) and (max-width: 1200px) { .footer-main { width: 90%; } .footer-main dl { width: 15%; } } @media only screen and (max-width: 999px) { .footer { margin: 0 auto; } .footer-main { width: 80%; } .footer-main dl { width: 20%; } } .nav { position: relative; } /*c2c*/ .c2c-lis-all { width: 142px; background: #2a404f; position: absolute; top: 42px; left: 73px; display: none; } .c2c-lis-all-s { width: 142px; background: #2a404f; position: absolute; top: 238px; left: 143px; display: none; } .c2c-lis-all-son { width: 142px; height: 48px; line-height: 48px; text-align: center; } .nav:hover .c2c-lis-all { display: block; } .c2c-lis-all:hover { display: none; } /*new公共头部导行*/ ul, li { padding: 0; border: 0; list-style: none; } .header-a { /*display: inline-block;*/ float: left; } .nava>li { display: inline-block; } .nava>li>a { text-decoration: none; line-height: 40px; font-size: 14px; padding-left: 16px; } .nava a { display: block; text-decoration: none; color: #ffffff; } .nava ul { display: none; position: absolute; top: 40px; } .nava ul li { position: relative; width: 130px; height: 40px; top: 8px; padding-left: 20px; background: #2a404f; line-height: 40px; } .nava>li:hover>ul { display: block; } .nava>li>ul>li>a { line-height: 40px; } .nava>li>ul>li:hover { background: #294460; } .nava>li>ul>li>ul { left: 100%; top: -8px; } .nava>li>ul>li:hover>ul { display: block; } .nava>li>ul>li>ul>li>a { line-height: 40px; } .nava>li>ul>li>ul>li:hover { background: #294460; } .nava-ov { position: relative; } .sanjiao { width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #ffffff transparent transparent transparent; background: #2A404F; position: absolute; right: -26px; top: 15px; } .sanjiao-right { width: 0; height: 0; border-top: 5px solid transparent; border-left: 5px solid #ffffff; border-bottom: 5px solid transparent; position: absolute; right: 20px; top: 14px; } /*导行栏头部右面*/ .header-dao { width: 100px; cursor: pointer; /*background: seagreen;*/ } .header-dao1 { width: 80px; /*background: red;*/ } .header-dao-son { text-align: center; cursor: pointer; } .hard-al { /*width: 110px;*/ min-width: 110px; background: #2a404f; display: none; margin-top: 8px; border-top: 2px solid #1e72c9; margin-left: 17px; } .hard-al-as { /*width: 80px;*/ min-width: 80px; height: 45px; margin: 0 auto; border-bottom: 1px solid #4a5c69; color: #FFFFFF; line-height: 45px; } .hard-none { border: none; } .hard-al-as:hover { background: #3c6288; /*padding-left: 15px; padding-right: 15px;*/ } .header-dao-son:hover .hard-al { display: block; } .header-dao-img { width: 21px; height: 20px; margin-top: 2px; float: left; margin-left: 20px; } .imgls { margin-left: 40px; } .header-dao-span { font-size: 14px; color: #FFFFFF; /*background: red;*/ } /*2*/ .header-dao1 { width: 75px; cursor: pointer; /*background: red;*/ } .header-dao-son1 { /*text-align: center;*/ } .hard-al1 { width: 160px; background: #2a404f; display: none; margin-top: 8px; border-top: 2px solid #1e72c9; margin-left: -27px; } .hit { width: 130px; height: 60px; margin: 0 auto 0; border-bottom: 1px solid #4a5c69; color: #FFFFFF; padding-top: 12px; } .hit:hover { background: #3c6288; padding-left: 15px; padding-right: 15px; } .hard-al-as1 { width: 130px; height: 45px; margin: 0 auto; border-bottom: 1px solid #4a5c69; color: #FFFFFF; line-height: 45px; } .hard-none { border: none; } .hard-al-as1:hover { background: #3c6288; padding-left: 15px; padding-right: 15px; } .header-dao-son1:hover .hard-al1 { display: block; } .header-dao-img1 { width: 10px; height: 10px; margin-top: 10px; } .header-dao-span1 { font-size: 14px; color: #FFFFFF; margin-left: 5px; } /*dq*/ .header-dao2 { width: 100px; cursor: pointer; /*background: red;*/ } .header-dao-son2 { /*text-align: center;*/ margin-left: 16px; } .hard-al2 { width: 100px; background: #2a404f; display: none; margin-top: 8px; border-top: 2px solid #1e72c9; margin-left: -4px; } .hard-al-as2 { width: 80px; height: 45px; margin: 0 auto; border-bottom: 1px solid #4a5c69; color: #FFFFFF; line-height: 45px; text-align: center; } .hard-none2 { border: none; } .hard-al-as2:hover { background: #3c6288; padding-left: 10px; padding-right: 10px; } .header-dao-son2:hover .hard-al2 { display: block; } .header-dao-img2 { width: 21px; height: 20px; margin-top: 2px; float: left; } .header-dao-span2 { font-size: 14px; color: #FFFFFF; margin-left: 5px; } .header-theme-asd a { color: #00A8FD; font-size: 14px; } .header-theme-asd a:hover { border-bottom: 1px solid #00A8FD; } .header-dao-son { padding-left: 5px; padding-right: 5px; } /*pc端 新的导行开始*/ .header-new-gr{ position: relative; padding-bottom: 50px; } .header-dao-son-xin{ min-width: 100px; } .hard-al-new-xin{ min-width: 240px; min-height: 408px; background-image: linear-gradient(0deg, #1c355b 0%, #20355e 50%, #263562 100%); position: absolute; top: 31px; left: 50%; transform: translate(-50% ,0%); display: none; } .header-new-gr:hover .hard-al-new-xin{ display: block; } /*2*/ .hard-all-tops{ width: 100%; height: 2px; /*background-image: linear-gradient(90deg, rgba(69, 142, 255,0.8) 0%, rgba(1, 231, 207,0.8) 100%), linear-gradient(rgba(111, 142, 255,0.8), rgba(111, 142, 255,0.8));*/ border-radius:2px 2px 0px 0px; background:#1e72c9; } .hard-newall-ov{ overflow: hidden; margin-bottom: 15px; } .hard-newall-imgleft{ width: 54px; height: 54px; border: 3px solid rgba(238,239,247,1); border-radius: 50%; float: left; margin-left: 20px; margin-top: 10px; overflow: hidden; } .hard-newall-imgleftimg{ width: 100%; } .hard-newall-spanright{ float: right; width: 150px; margin-top: 5px; margin-left: 10px; } .hard-vip-ovs{ overflow: hidden; } .hard-vip-spanall{ float: left; font-size: 16px; color:rgba(238,239,247,1); } .hard-vip-imgall{ float: left; margin-top: 8px; margin-left: 5px; } .hard-wkfh{ overflow: hidden; margin-top: 5px; } .hard-waik{ width:60px; height:38px; background:rgba(255,255,255,0.1); border-radius:2px; float: left; } .hard-fenh{ width:60px; height:38px; background:rgba(255,255,255,0.1); border-radius:2px; float: left; margin-left: 10px; } .hard-wkfh-nub{ text-align: center; font-size:14px; color:rgba(238,239,247,1); } .hard-wkfh-name{ text-align: center; font-size: 12px; color: #EEEFF7; } /*3*/ .hard-list-son{ width: 81%; margin: 1px auto 0 ; height: 45px; overflow: hidden; line-height:45px ; } .hard-list-son-hardass:hover{ background: #495689; } .hard-list-sonimg{ float: left; margin-top: 13px; } .hard-list-sonspan{ margin-left: 10px; } .topsboder{ border-top: 1px solid rgba(255,255,255,0.1); } /*pc 端 新的导行结束*/ /*什么是cb 导行开始*/ .hard-all-cb{ float: left; cursor: pointer; margin-left: 30px; } .hard-name-cb{ height: 100%; line-height: 39px; font-size: 14px; color: #eeeef7; } .hard-name-cb:hover{ color: #2BDAFC; } .hard-father-cb{ position: relative; /*padding-bottom: 20px;*/ } .hard-list-cb{ border-top: 2px solid #1e72c9; position: absolute; top: 31px; left: 50%; transform: translate(-50%,0); display: none; } .hard-cbs{ height: 45px; width: 100px; background-image: linear-gradient(0deg, #1c355b 0%, #20355e 50%, #263562 100%); line-height: 45px; padding-left: 10px; } .hard-father-cb:hover .hard-list-cb{ display: block; } .hard-cbs:hover{ background: #495689; } .hard-name-cb:after{ content:url(../../images/v2/sanjiaoa.png); width: 16px; height: 10px; margin-left: 10px; float: right; margin-top: -3px; /*display: inline-block;*/ } .hard-father-cb:hover .hard-name-cb:after{ content:url(../../images/v2/sanjiaob.png); width: 16px; height: 10px; margin-left: 10px; float: right; margin-top: -3px; } /*什么是cb 导行结束*/ /*new公共头部导行end*/ /*手机端 侧边栏*/ .header-phone { width: 100%; padding-bottom: 2%; background: #2a404f; display: none; overflow: hidden; } .header-phoneimg { width: 22%; margin-top: 2%; float: left; margin-left: 3%; } .nav-mobile-phoneimg { width: 5%; float: right; margin-right: 3%; margin-top: 2%; } .phone-body { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 19; display: none; } .header-phone-cbl { width: 70%; height: 100%; background: #2a3c4f; position: fixed; right: -70%; top: 0; z-index: 20; /*display: none;*/ } .header-phone-top { width: 100%; /*height: 20%;*/ background: #223140; padding-top: 10%; padding-bottom: 10%; } .header-phone-hardimg { width: 52px; height: 52px; border-radius: 50%; margin: 0% auto; overflow: hidden; border: 2px solid #9198a0; } .header-phone-hardimg>.header-phone-hardimgs { width: 100%; height: 100%; } .header-phone-hardname { text-align: center; margin-top: 5%; font-size: 12px; } .header-phone-tos { width: 10%; height: 100%; float: left; display: none; } .phone-body-mide { width: 100%; height: 64%; /*background: silver;*/ overflow-y: scroll; } /*三级菜单*/ .list { /*width: 160px;*/ overflow: hidden; } .yiji { padding-left: 20px; } .first-box { padding-left: 15px; } .text { border-bottom: 1px solid #425569; height: 35px; width: 90%; overflow: hidden; line-height: 35px; } .second-container { display: none; padding-left: 15px; } .second-box { padding-left: 15px; } .third { display: none; padding-left: 15px; } .third-box { padding-left: 15px; } .first-box .inactive, .second-box .inactive { background: url(../../images/v2/sanjiaobot.png)no-repeat right center; ; } .first-box .inactive.active, .second-box .inactive.active { background: url(../../images/v2/sanjiaotop.png) no-repeat right center; } .first-box { width: 87%; width: 92%; border-radius: 5px; } .second-box { width: 90%; border-radius: 5px; } .third-box { width: 90%; border-radius: 5px; } .list a { color: #ffffff; } .phone-hard-name { text-align: center; } .phone-hard-name-ov { overflow: hidden; width: 80%; margin: 14px auto 0; } .phone-hard-name-left { width: 45%; height: 25px; border: 1px solid #FFFFFF; float: left; border-radius: 5px; text-align: center; font-size: 12px; } .phone-hard-name-left a { color: #FFFFFF; } .phone-hard-name-right { width: 45%; height: 25px; border: 1px solid #FFFFFF; float: right; border-radius: 5px; text-align: center; font-size: 12px; } .phone-hard-name-right a { color: #FFFFFF; } a { color: #FFFFFF; font-size: 14px; } /*三级菜单end*/ /*侧边栏底部*/ .phone-body-fot { width: 100%; position: absolute; bottom: 4%; } /*侧边栏切换中英文*/ .phone-c2c-all { width: 100%; height: 100%; display: block; position: relative; } .ovs { width: 80%; height: 30px; margin: 0 auto; line-height: 30px; } .p-le { float: left; } .phone-item { width: 80%; height: 100%; float: right; background: #2a3c4f; line-height: 30px; border: 1px solid #697885; cursor: pointer; } .phone-item:first-child { border-left: 1px solid #07111a; } .phone-c2c-as:hover { background-color: #294460; } .phone-c2c-son { display: none; width: 100%; height: 30px; background: #253546; position: absolute; top: -66px; z-index: 1; } .phone-item { position: relative; } .phone-c2c-as { border: 1px solid #697885 } .phone-c2c-as-img { width: 11%; float: left; margin-left: 5%; border-radius: 50%; margin-top: 6px; } .coinbig-c2c-sanj1 { width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #ffffff transparent transparent transparent; background: #2a3c4f; position: absolute; right: -55px; top: 12px; } .coinbig-c2c-sanj-shang1 { border-bottom-color: #ffffff; border-top-color: transparent; position: absolute; top: 5px; } .phone-c2c-all-img { width: 11%; border-radius: 50%; margin-left: 5%; float: left; margin-top: 6px; } .phone-c2c-alla { float: left; margin-left: 10px; } .ph-le { margin-left: 5px; } /*!*定位问题*end/*/ /*添加三角属性*/ .coinbig-c2c-sanj-shang { border-bottom-color: #ffffff; border-top-color: transparent; position: absolute; top: 0px; } /*添加三角属性end*/ /*尾部 头部*/ .footer-lefts { width: 75%; float: left; } .footer-right { width: 25%; float: right; } /*手机端原来735缩小,现在到1000 就到手机端*/ @media only screen and (max-width: 1000px) { .header-phone { display: block; } .header { display: none; } .footer-main { width: 90%; } .footer { width: 100%; padding-bottom: 0; display: none; } /*尾部*/ .footer-lefts { width: 100%; padding-bottom: 17%; } .footer-main dl { width: 25%; } .footer-main dt { font-size: 10px; } .footer-right .footer-right-all { float: left; width: 50%; margin-top: 1%; } .footer-right .footer-right-all .footer-right-allimg { width: 60%; float: left; } .footer-right .footer-right-all .footer-right-p { float: left; font-size: 6px; margin-top: 8%; } .footer-link { margin-top: 0; } .footer-right { width: 100%; } .footer-link { width: 50%; float: right; } .footer-link a+a { margin-left: 5%; } } /*公共结束*/ /*首页开始*/ .swipslider { position: relative; overflow: hidden; display: block; padding-top: 0%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-top: 28%; } .swipslider .sw-slides { display: block; padding: 0; list-style: none; width: 100%; height: 100%; white-space: nowrap; -webkit-transform: translateX(0); transform: translateX(0); position: absolute; bottom: 0; } .swipslider .sw-slide { width: 100%; height: 100%; margin: 0 auto; display: inline-block; position: relative; top: 0; } .swipslider .sw-slide>img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; margin-left: auto; margin-right: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sw-next-prev { height: 50px; width: 50px; text-align: center; vertical-align: middle; position: absolute; line-height: 50px; font-size: 30px; font-weight: bolder; color: rgba(160, 160, 160, 0.53); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: rgba(255, 255, 255, 0); border-radius: 50%; text-decoration: none; transition: all .2s ease-out; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sw-next-prev:hover { background-color: rgba(255, 255, 255, 0.74); } .sw-next-prev:active { background-color: rgba(255, 255, 255, 0.5); } .sw-prev { left: 2%; } .sw-prev::after { content: ‘<‘; } .sw-next { right: 2%; } .sw-next::after { content: ‘>‘; } .sw-bullet { position: absolute; bottom: 45%; left: 96%; list-style: none; display: block; width: 100%; text-align: center; padding: 0; margin: 0; } .sw-bullet li { width: 10px; height: 10px; background-color: rgba(160, 160, 160, 0.53); border-radius: 50%; /*display: inline-block;*/ cursor: pointer; transition: all .2s ease-out; margin-top: 10px; /*display: none;*/ } .sw-bullet li:hover { background-color: rgba(255, 255, 255, 0.74); } .sw-bullet li.active { /*background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 2px rgba(160, 160, 160, 0.53);*/ width: 20px; height: 20px; margin-left: -0.4%; background-color: #122236; box-shadow: inset 0px 0px 16px 0px rgba(43, 235, 252, 0.14); border: solid 2px #2bdafc; } .sw-bullet li:not(:last-child) { margin-right: 5px; } /*自己的*/ .coinbig .container { position: relative; /*z-index: 9;*/ z-index: 0 } .coinbig .sw-slide-two { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .coinbig .sw-slide-twos { text-align: center; margin-top: 4%; } .coinbig .diw { width: 100%; position: absolute; z-index: -1; left: 0; } .coinbig .coinbig-text { text-align: center; font-size: 30px; } .coinbig .coinbig-text1 { text-align: center; font-size: 16px; color: #9299b4; } .coinbig .sw-slide-twos1 { text-align: center; margin-top: 1.6%; } .coinbig .coinbig-list-all { width: 90%; /*height: 120px;*/ margin: 5% auto 0; } .coinbig .coinbig-list-ons { float: left; width: 33%; /*height: 120px;*/ border-right: 1px solid rgba(219, 222, 246, 0.2); } .coinbig .coinbig-list-ons:last-child { border: none; } .coinbig .coinbig-list-ls { margin-top: 2px; } .coinbig .coinbig-list-ls:nth-child(2) { /*margin-top: 20px;*/ margin-top: 5%; } .coinbig .coinbig-list-ls:nth-child(3) { /*margin-top: 10px;*/ margin-top: 5%; } .coinbig .lefts { margin-left: 10%; } .coinbig .coinbig-list-ls1 { font-size: 16px; color: #9299b4; } .coinbig .coinbig-list-ls1 a { font-size: 16px; color: #9299b4; } .coinbig .coinbig-list-ls2 { font-size: 16px; font-size: 36px; color: #2bdafc; } .coinbig .coinbig-list-ls2 a { font-size: 16px; font-size: 36px; color: #2bdafc; } .coinbig .coinbig-list-ls3 { font-size: 16px; color: #9299b4; } .coinbig .coinbig-list-ls3 a { font-size: 16px; color: #9299b4; } .coinbig .coinbig-list-ls4 { font-size: 16px; color: #2bdafc; } .coinbig .coinbig-list-ls4 a { font-size: 13px; font-weight: 100; color: #2bdafc; } .coinbig .coinbig-list-ls5 { font-size: 16px; color: #2bdafc; } .coinbig .coinbig-list-ls5 a { font-size: 30px; color: #2bdafc; } .coinbig .lsz { margin-left: 5%; } /*new*/ .coinbig .lefts1{ margin-top: 3.2%!important; } @media only screen and (max-width: 1800px) { .coinbig .coinbig-lunbo { width: 1600px; width: 100%; margin: 0 auto; } .swipslider { width: 100%; /*background: salmon;*/ margin: 0 auto; } .coinbig .coinbig-list-ls2 { font-size: 33px; } .coinbig .coinbig-list-ls5 { font-size: 16px; } } @media only screen and (max-width: 1700px) { .coinbig .coinbig-list-ls2 { font-size: 30px; } .coinbig .coinbig-list-ls5 { font-size: 16px; } } @media only screen and (max-width: 1600px) { .coinbig .coinbig-list-ls5 { font-size: 16px; } .coinbig .coinbig-list-ls2 { font-size: 27px; } .coinbig .coinbig-list-ls4 a { font-size: 20px; } .coinbig .coinbig-list-ls4 a { font-size: 13px; } .coinbig .lefts { margin-left: 4%; } .coinbig .lefts1{ margin-top: 2.2%!important; } } @media only screen and (max-width: 1500px) { .coinbig .coinbig-list-ls5 { font-size: 16px; } .coinbig .coinbig-list-ls2 { font-size: 24px; } .coinbig .coinbig-list-ls4 a { font-size: 13px; } .coinbig .coinbig-list-ls4 { font-size: 16px; } .coinbig .coinbig-list-ls3 { font-size: 15px; } } @media only screen and (max-width: 1400px) { .coinbig .coinbig-list-ls5 { font-size: 16px; } .coinbig .coinbig-list-ls2 { font-size: 19px; } .coinbig .coinbig-list-ls4 { font-size: 13px; } .coinbig .coinbig-list-ls3 { font-size: 14px; } .coinbig .coinbig-list-ls4 a { font-size: 13px; } .coinbig .lefts { margin-left: 8%; } } @media only screen and (max-width: 1200px) { .coinbig .coinbig-list-ls5 { font-size: 13px; } .coinbig .coinbig-list-ls2 { font-size: 13px; } .coinbig .coinbig-list-ls3 { font-size: 12px; } .coinbig .coinbig-list-ls4 a { font-size: 12px; } } @media only screen and (max-width: 1100px) { .coinbig .coinbig-list-ls5 { font-size: 10px; } .coinbig .coinbig-list-ls2 { font-size: 10px; } .coinbig .coinbig-list-ls3 { font-size: 10px; } .coinbig .coinbig-list-ls4 { font-size: 10px; } .coinbig .coinbig-list-ls4 a { font-size: 10px; } } @media only screen and (max-width: 735px) { .diw { /*display: none;*/ } .sw-bullet li { display: none; } .coinbig .coinbig-lunbo { width: 95%; margin: 0 auto; } .coinbig-text { text-align: center; font-size: 10px; } .swipslider { padding-top: 120%; } /*文字*/ .coinbig .coinbig-text { font-size: 10px; } .coinbig .sw-slide-twos { /*margin-top:16%;*/ margin-top: 10%; } .coinbig .coinbig-text { font-size: 20px; } .coinbig .sw-slide-twos1 { /*margin-top: 0;*/ margin-top: 4%; width: 94%; white-space: normal; word-break: break-all; word-wrap: break-word; text-align: center; } .coinbig .trxs { width: 94%; white-space: normal; word-break: break-all; word-wrap: break-word; text-align: center; } .coinbig .coinbig-text1 { /*display: none;*/ } .coinbig .coinbig-text1 { font-size: 15px; } .coinbig .coinbig-list-ls1 { font-size: 13px; } .coinbig .coinbig-list-ls2 { font-size: 18px; font-weight: 700; line-height: 35px; } .coinbig .coinbig-list-ls3 { font-size: 13px; } .coinbig .coinbig-list-ls4 { font-size: 13px; } .coinbig .coinbig-list-ls4 a { font-size: 12px; } .coinbig .coinbig-list-ls5 { font-size: 14px; } .coinbig .coinbig-list-ls:nth-child(2) { margin-top: -5px; } .coinbig .coinbig-list-ls:nth-child(1) { margin-top: 15px; margin-top: 7%; } .coinbig .coinbig-list-ls:nth-child(3) { margin-top: -5px; } .coinbig .coinbig-list-all { width: 100%; } .coinbig .sw-slide-two { width: 100%; } .coinbig .coinbig-list-ons { width: 100%; border: none; } .coinbig .coinbig-list-all { margin: 0; } .coinbig .lefts { margin-left: 0; } } /*波浪*/ .wrap__uc-waves { overflow: hidden; /*height: 150px;*/ height: 300px; width: 100%; position: absolute; /*bottom: 0;*/ /*bottom: -120px;*/ height: 420px; bottom: -200px; } .wrap__uc-waves .wave { width: 200%; transform-origin: center bottom; position: absolute; left: 0; bottom: 0; } .wrap__uc-waves .w1 { background: url(../images/b1.png) no-repeat; background-size: cover; height: 100%; animation: anim_wave 50s linear infinite; } .wrap__uc-waves .w2 { background: url(../images/b2.png) no-repeat; background-size: cover; height: 100%; animation: anim_wave 50s linear infinite; } @keyframes anim_wave { /*0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(1) } 75% { transform: translateX(-43%) translateZ(0) scaleY(1) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) }*/ 0% { transform: translateX(0) translateZ(0) scaleY(1) } 10% { transform: translateX(-5%) translateZ(0) scaleY(1) } 20% { transform: translateX(-10%) translateZ(0) scaleY(1) } 30% { transform: translateX(-15%) translateZ(0) scaleY(1) } 40% { transform: translateX(-20%) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(1) } 60% { transform: translateX(-30%) translateZ(0) scaleY(1) } 70% { transform: translateX(-35%) translateZ(0) scaleY(1) } 80% { transform: translateX(-40%) translateZ(0) scaleY(1) } 90% { transform: translateX(-45%) translateZ(0) scaleY(1) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } .diw { /*overflow: hidden;*/ } .wave { width: 2560px; margin-top: -100px; } .wave1 { width: 2560px; height: 160px; background-image: url(‘../../images/v2/b1.png‘); animation: wave1 50s infinite linear; background-size: 100% 100%; } .wave2 { width: 2560px; height: 160px; background-image: url(‘../../images/v2/b2.png‘); background-size: 100% 100%; animation: wave2 50s infinite linear; margin-top: -160px; } @keyframes wave1 { 0% { background-position-x: 0; } 100% { background-position-x: -1981px; } } @keyframes wave2 { 0% { background-position-x: 0; } 100% { background-position-x: -1981px; } } /*大图轮播结束*/ /*导行栏开始*/ .coinbig .coinbig-comment { width: 90%; height: 50px; margin: 0 auto; line-height: 50px; font-size: 14px; overflow: hidden; position: relative; z-index: 1; color: rgba(255, 255, 255, 0.8); /*background-image: linear-gradient(0deg, #141b29 0%, rgba(43, 139, 252, 0.05) 25%, rgba(43, 166, 252, 0.1) 50%, rgba(43, 166, 252, 0.1) 50%, rgba(22, 91, 105, 0.3) 100%);*/ } .coinbig-comment-lests { float: left; margin-left: 20px; } .coinbig-imgs { width: 16px; height: 16px; float: left; margin-top: 16px; } .coinbig-spans { float: left; margin-left: 15px; } .coinbig-sus { width: 1px; height: 23px; background: rgba(255, 255, 255, 0.2); float: left; margin-top: 13px; margin-left: 20px; } .coinbig .coinbig-leftz { float: left; width: 90%; } .coinbig .coinbig-rightz { float: right; width: 10%; } .coinbig .coinbig-rightz-span { float: right; } .coinbig .coinbig-rightz-span a { color: #2bdafc; } @media only screen and (max-width: 735px) { .coinbig .coinbig-comment-lests:first-child { margin-left: 0; } .coinbig .coinbig .coinbig-comment { font-size: 12px; } .coinbig .coinbig-sus { display: none; } .coinbig .coinbig-leftz { width: 80%; } .coinbig .coinbig-rightz { width: 20%; } .coinbig .coinbig-spans { margin-left: 5px; } } /*导行结束*/ /*tab切换开始*/ .coinbig .coinbig-tab-all { width: 90%; padding-bottom: 20px; /*height: 1000px;*/ background-image: linear-gradient(90deg, #17233a 0%, #152138 50%, #131e35 100%), linear-gradient( #1a1b20, #1a1b20); background-blend-mode: normal, normal; box-shadow: 0px 10px 50px 0px rgba(6, 16, 36, 0.5); border-radius: 8px; margin: 4% auto; } .tabs:after { content: ‘‘; display: block; clear: both; } .tab { width: 10%; /*width: 100px;*/ height: 50px; line-height: 50px; text-align: center; font-size: 16px; float: left; /*margin-left: 2%;*/ margin-left: 0%; border: 1px solid transparent; } .tab:nth-child(1) { margin-left: 60px; } .tab.active { border: 1px solid #00b9f9; border-bottom-color: transparent; color: #00b9f9; position: relative; border-radius: 4px 4px 0px 0px; } .tab.active:after { content: ‘‘; width: 100%; height: 2px; background: #17233a; position: absolute; left: 0; bottom: -2px; } .content { border-top: 1px solid #00b9f9; /*width: 100%; margin: 0 auto; height: 1px; background-image: linear-gradient(90deg, #00b6ff 0%, #00deb7 100%), linear-gradient( #2bebfc, #2bebfc); background-blend-mode: normal, normal;*/ } .item { display: none; } .item.active { display: block; } /*2*/ .coinbig .tab-ov { overflow: hidden; cursor: pointer; } .coinbig .tabimg { width: 20px; height: 20px; float: left; margin-top: 16px; /*margin-left: 20px;*/ } .coinbig .tabimgs { width: 20px; height: 20px; float: left; margin-top: 17px; margin-left: 30%; } .coinbig .tabname { float: left; margin-top: 3px; margin-left: 7%; } @media only screen and (max-width: 1600px) { .coinbig .tab { width: 100px; margin-left: 5%; } .coinbig .tabimgs { margin-left: 17%; } } @media only screen and (max-width: 1500px) { .coinbig .tabimgs { margin-left: 15%; } } @media only screen and (max-width: 1300px) { .coinbig .tab:nth-child(1) { width: 100px; margin-left: 60px; } .coinbig .tabimgs { margin-left: 20%; } } @media only screen and (max-width: 735px) { .coinbig .tab { width: 60px; line-height: 30px; height: 30px; margin-left: 12px; } .coinbig .tabimgs { display: none; } .coinbig .tabname { margin-left: 15%; } .coinbig .tab:nth-child(1) { margin-left: 12px; ; width: 60px; } .coinbig .tabname { margin-top: 1px; } } /*tab导行结束*/ /*tab导行开始*/ .coinbig .coinbig-tablest-all { width: 100%; height: 50px; overflow: hidden; line-height: 50px; cursor: pointer; /*background: seagreen;*/ } .coinbig .coinbig-tablest-all:hover{ background-image: linear-gradient(90deg, #202D46 0%, #152138 100%), linear-gradient( #202D46, #152138); box-shadow:10px 0px 50px rgba(6,16,36,0.5); } .coinbig .tab-left { margin-left: 50px; } .coinbig .coinbig-tablest1 { float: left; width: 14%; height: 50px; /*background: seagreen;*/ } .coinbig .coinbig-tablest2 { float: left; width: 16%; height: 50px; /*background: red;*/ } .coinbig .coinbig-tablest3 { float: left; width: 11%; height: 50px; /*background: seagreen;*/ } .coinbig .coinbig-tablest4 { float: left; width: 19%; height: 50px; /*background: red;*/ } .coinbig .coinbig-tablest5 { float: left; width: 20%; height: 50px; /*background: seagreen;*/ } .coinbig .coinbig-tablest6 { float: left; width: 10%; height: 50px; /*background: red;*/ } .coinbig .coinbig-tablest7 { float: left; width: 10%; height: 50px; /*background: seagreen;*/ } .coinbig .coinbig-tablest7-span { float: right; font-size: 14px; color: #2bdafc; margin-right: 30px; cursor: pointer; } .coinbig .coinbig-tabov { overflow: hidden; } .coinbig .coinbig-tablest-san { width: 16px; height: 16px; /*background: sandybrown;*/ float: left; margin-top: 17px; margin-left: 5px; } .coinbig .coinbig-tablest-name { float: left; font-size: 14px; color: rgba(235, 245, 254, 0.7); cursor: pointer; } .coinbig .coinbig-santop { width: 0; height: 0; border-left: 7px solid transparent; border-right: 8px solid transparent; border-bottom: 7px solid #FFFFFF; cursor: pointer; opacity: 0.4; } .coinbig .coinbig-santop:hover { width: 0; height: 0; border-left: 7px solid transparent; border-right: 8px solid transparent; border-bottom: 7px solid #FFFFFF; cursor: pointer; box-shadow: 0 0px #666; transform: translateY(-0.8px); opacity: 1; } .coinbig .coinbig-santop:active .coinbig-santop { background: salmon; } .coinbig .coinbig-sanup { width: 0; height: 0; border-left: 7px solid transparent; border-right: 8px solid transparent; border-top: 7px solid #FFFFFF; margin-top: 2px; cursor: pointer; opacity: 0.4; cursor: pointer; } .coinbig .coinbig-sanup:hover { width: 0; height: 0; border-left: 7px solid transparent; border-right: 8px solid transparent; border-top: 7px solid #FFFFFF; cursor: pointer; box-shadow: 0 0px #666; transform: translateY(0.8px); opacity: 1; } .coinbig .coinbig-tablest-san .active { opacity: 1; } .coinbig .coinbig-as { overflow: hidden; } .coinbig .coinbig-tabsc { width: 12px; height: 12px; float: left; margin-top: 17px; margin-left: 30px; } .coinbig .coinbig-tablx { float: left; margin-left: 10px; } .coinbig .coinbig-bai { font-size: 14px; color: #dbdef6; float: left; } .coinbig .coinbig-hui { color: #9299b4; font-size: 14px; float: left; } .coinbig .coinbig-green { font-size: 14px; color: #37d9a6; } .coinbig .coinbig-red { font-size: 14px; color: #ed5664; } .coinbig .pc-none { float: left; } /*手机端tab 内容列表*/ .coinbig .phone-tab { /*width: 96%;*/ width: 90%; margin: 0px auto; display: none; overflow: hidden; padding-bottom: 10px; padding-top: 20px; border-bottom: 1px solid rgba( 255, 255, 255, 0.2); } .coinbig .none { border-bottom: none; } .coinbig .phone-tab-left { float: left; line-height: 16px; } .coinbig .phone-tab-right { float: right; line-height: 16px; text-align: right; } .coinbig .phone-bai { font-size: 14px; color: #dbdef6; } .coinbig .phone-hui { color: #9299b4; font-size: 14px; } .coinbig .phone-red { font-size: 14px; color: #ed5664; float: right; } .coinbig .phone-green { font-size: 14px; color: #37d9a6; float: right; } .coinbig .phone-tab-top { margin-bottom: 15px; float: left; } .coinbig .phone-tab-top1 { float: right; margin-bottom: 15px; } .coinbig .phone-left { float: left; } @media only screen and (max-width: 1200px) { .coinbig .coinbig-tabsc { margin-left: 0; } } @media only screen and (max-width: 735px) { .coinbig .coinbig-tablest1 { width: 25%; background: sandybrown; } .coinbig .coinbig-tab-all { margin-top: 2%; } .coinbig .coinbig-tabsc { display: none; } .coinbig .pc-block { display: none; } .coinbig .coinbig-tablest2 { width: 25%; background: red; } .coinbig .coinbig-tablest3 { width: 25%; background: sandybrown; } .coinbig .coinbig-tablest4 { display: none; } .coinbig .coinbig-tablest5 { display: none; } .coinbig .coinbig-tablest6 { width: 25%; background: silver; } .coinbig .coinbig-tablest7 { display: none; } .coinbig .phone-jsysov { text-align: center; margin-top: 20px; margin-bottom: 30px; } .coinbig .phone-jsys { text-align: center; font-size: 18px; font-weight: 700; } .coinbig .phone-jsys1 { font-size: 12px; } /*手机端4个文字换行*/ /*.coinbig .pc-none{ display: none; } .coinbig .coinbig-bai{ width: 100%; line-height: 12px; margin-top: 10px; } .coinbig .coinbig-hui{ width: 100%; line-height: 12px; margin-top: 7px; } .coinbig .lhs{ line-height: 30px; }*/ .coinbig .pc-tab { display: none; } .coinbig .phone-tab { display: block; } body { padding-bottom: 0; } } /*tab列表结束*/ /*中间hover效果*/ .coinbig .coinbig-hover { /*width: 100%; height: 850px; margin: 0 auto; background-image: linear-gradient(150deg, #5b77ff 0%, #00c5fb 100%), linear-gradient( #212226, #212226); border-radius: 200% 200% 200% 200%/22% 22% 22% 22%;*/ background: url(../images/hac.png)no-repeat; background-size: 100% 100%; width: 100%; padding-top: 15%; padding-bottom: 15%; } .coinbig .coinbig-hover-lest { width: 80px; height: 80px; box-shadow: 0px 2px 3px 0px #fdfdfd; border-style: solid; border-width: 1px; border-image-source: linear-gradient(0deg, #fdfdfd 0%, #fdfdfd 50%, #fdfdfd 90%, #fdfdfd 100%); border-image-slice: 1; } .coinbig .coinbig-hover-all { width: 80%; padding-bottom: 10%; /*height: 100px; background: salmon;*/ margin: 0 auto; } .coinbig .coinbig-hover-li { width: 37%; float: left; /*background: sandybrown;*/ } .coinbig .coinbig-hover-ri { width: 37%; float: right; /*background: seashell;*/ } .coinbig .coinbig-img1 { /*width: 50px;*/ width: 20%; float: left; position: relative; cursor: pointer; } .coinbig .coinbig-image { width: 100% } .coinbig .coinbig-img2 { /*width: 50px; height: 100px;*/ width: 20%; /*background: red;*/ float: right; position: relative; cursor: pointer; } .coinbig .coinbig-img3 { width: 20%; /*background: red;*/ float: left; position: relative; cursor: pointer; } .coinbig .coinbig-img4 { width: 20%; /*background: red;*/ float: right; position: relative; cursor: pointer; } .coinbig .coinbig-dian { width: 16px; height: 16px; margin: 2% auto; border-radius: 50%; background: #FFFFFF; } .coinbig .coinbig-wen { text-align: center; margin-top: 10px; font-size: 16px; } .coinbig .coinbig-hoves { width: 290%; padding-bottom: 100%; background-color: rgba(21, 35, 65, 0.8); box-shadow: 0px 6px 50px 0px rgba(13, 13, 166, 0.16), 0px 6px 30px 0px rgba(3, 18, 36, 0.2); border-radius: 16px; opacity: 0.8; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); display: none; } /*hover里面*/ .coinbig .coinbig-image-two { width: 35%; margin: 5% auto; } .coinbig .coinbig-image-two-s { width: 100%; } .coinbig .coinbig-wenzi { text-align: center; background: linear-gradient(to right, #12d6ad, #14d7ff); -webkit-background-clip: text; color: transparent; font-size: 18px; } .coinbig .coinbig-wenzi-ts { /*width: 70%;*/ width: 81%; min-height: 120px; /*background:red;*/ margin: 5% auto; text-align: justify; color: #eeeff7; font-size: 13px; } @media only screen and (min-width:1800px) { .coinbig .coinbig-wenzi-ts { font-size: 18px; line-height: 26px; } } @media only screen and (max-width: 1300px) { .coinbig .os { margin: 5% auto -40%; } } @media only screen and (max-width: 1400px) { .coinbig .coinbig-wenzi-ts { width: 81%; margin: 5% auto -19%; text-align: justify; color: #eeeff7; font-size: 13px; } .coinbig .os { margin: 5% auto -30%; } } @media only screen and (max-width: 1500px) { .coinbig .os { margin: 5% auto -7%; } } @media only screen and (max-width: 1200px) { .coinbig .coinbig-wenzi-ts { width: 81%; margin: 5% auto -23%; text-align: justify; color: #eeeff7; font-size: 13px; } } .coinbig .coinbig-xian { width: 70%; height: 2px; background-image: linear-gradient(0deg, #fdfdfd 0%, #fdfdfd 100%); position: absolute; top: 58%; left: -35%; transform: translate(-50%, -30%); } .coinbig .coinbig-hover { position: relative; } .coinbig .coinbig-jsjl { position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); } .coinbig .coinbig-jsjl-wenzi { font-size: 28px; color: #eeeff7; ; /*font-weight: bold;*/ font-weight: 600; } .coinbig .coinbig-jsjl-wenzis { font-size: 14px; color: #eeeff7; ; margin-top: 3%; } .coinbig .coinbig-img1:hover .coinbig-hoves { display: block; } .coinbig .coinbig-img1:hover .coinbig-image { display: none; } .coinbig .coinbig-img1:hover .coinbig-dian { display: none; } .coinbig .coinbig-img1:hover .coinbig-wen { display: none; } .coinbig .coinbig-img2:hover .coinbig-hoves { display: block; } .coinbig .coinbig-img2:hover .coinbig-image { display: none; } .coinbig .coinbig-img2:hover .coinbig-dian { display: none; } .coinbig .coinbig-img2:hover .coinbig-wen { display: none; } .coinbig .coinbig-img3:hover .coinbig-hoves { display: block; } .coinbig .coinbig-img3:hover .coinbig-image { display: none; } .coinbig .coinbig-img3:hover .coinbig-dian { display: none; } .coinbig .coinbig-img3:hover .coinbig-wen { display: none; } .coinbig .coinbig-img4:hover .coinbig-hoves { display: block; } .coinbig .coinbig-img4:hover .coinbig-image { display: none; } .coinbig .coinbig-img4:hover .coinbig-dian { display: none; } .coinbig .coinbig-img4:hover .coinbig-wen { display: none; } @media only screen and (max-width: 1800px) { .coinbig .coinbig-jsjl-wenzi { font-size: 26px; } .coinbig .coinbig-jsjl-wenzis { font-size: 14px; } } @media only screen and (max-width: 1700px) { .coinbig .coinbig-jsjl-wenzi { font-size: 24px; } .coinbig .coinbig-jsjl-wenzis { font-size: 13px; } } @media only screen and (max-width: 1600px) { .coinbig .coinbig-jsjl-wenzi { font-size: 22px; } .coinbig .coinbig-jsjl-wenzis { font-size: 12px; margin-top: -4%; } } @media only screen and (max-width: 1500px) { .coinbig .coinbig-jsjl-wenzi { font-size: 20px; } .coinbig .coinbig-jsjl-wenzis { font-size: 14px; margin-top: -5%; } } @media only screen and (max-width: 1400px) { .coinbig .coinbig-jsjl-wenzi { font-size: 20px; } .coinbig .coinbig-jsjl-wenzis { font-size: 14px; margin-top: -6%; } } @media only screen and (max-width: 1300px) { .coinbig .coinbig-jsjl-wenzi { font-size: 20px; } .coinbig .coinbig-jsjl-wenzis { font-size: 14px; margin-top: -3%; } } @media only screen and (max-width: 1200px) { .coinbig .coinbig-jsjl-wenzi { font-size: 20px; } .coinbig .coinbig-jsjl-wenzis { font-size: 15px; margin-top: -7%; } } @media only screen and (max-width: 1100px) { .coinbig .coinbig-jsjl-wenzi { font-size: 20px; } } /*手机端hover*/ .coinbig .phone-hover { width: 100%; margin: 0 auto; padding-top: 11%; padding-bottom: 24%; background: url(../images/phone-bj.png))no-repeat; background-size: 200% 100%; background-position-x: center; display: none; } .coinbig .phone-hover-lest { width: 90%; margin: 0 auto; background-color: rgba(21, 35, 65, 0.8); box-shadow: 0px 6px 50px 0px rgba(13, 13, 166, 0.16), 0px 6px 30px 0px rgba(3, 18, 36, 0.2); border-radius: 16px; } .coinbig .phone-hover-lestimg { width: 14%; margin: 2% auto 0; } .coinbig .phone-hover-lestimgs { width: 100%; margin-top: 15%; } .coinbig .phone-wen { text-align: center; background: linear-gradient(to right, #12d6ad, #14d7ff); -webkit-background-clip: text; color: transparent; font-size: 18px; } .coinbig .phone-names { width: 80%; padding-bottom: 5%; text-align: justify; margin: 0 auto; } @media only screen and (max-width: 1400px) { .coinbig .coinbig-jsjl { position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); font-size: 26px; } } @media only screen and (max-width: 735px) { .coinbig .pc-hover { display: none; } .coinbig .phone-hover { display: block; } } /*4个hover 结束*/ .coinbig .coinbig-hb { width: 80%; margin: 2% auto 0; font-family: "微软雅黑"; font-size: 28px; color: #eeeff7; font-weight: 600; background: linear-gradient(to right, #5b77ff, #00cdfa); -webkit-background-clip: text; color: transparent; } .coinbig .coinbig-hba { background: linear-gradient(to right, #5b77ff, #00cdfa); -webkit-background-clip: text; color: transparent; } .coinbig .coinbig-hbyw { font-size: 14px; color: #eeeff7; font-weight: 100; } /*logo开始*/ .coinbig .coinbig-logo { width: 80%; margin: 0 auto; /*padding-bottom: 22%;*/ } .coinbig .coinbig-logoimg { width: 19.8%; border: solid 1px #1b273f; /*height: 100px;*/ /*background: salmon;*/ float: left; margin: 3.26%; border-radius: 8px } .coinbig .coinbig-logoimg:nth-child(1) { margin-left: 0; } .coinbig .coinbig-logoimg:nth-child(4) { margin-right: 0; } .coinbig .coinbig-logoimgs { width: 80%; padding: 10%; } /*新的img*/ .coinbig .coinbig-logo1{ width: 80%; margin: 0 auto; padding-bottom: 40%; /*background: seagreen;*/ } .coinbig .coinbig-logoimg1 { width: 14.7%; border: solid 1px #1b273f; /* background: salmon; */ float: left; margin: 1%; margin-bottom: 2.5%; border-radius: 8px; } .coinbig .coinbig-logoimgs1{ width: 100%; height: 100%; } .coinbig .coinbig-logoimg1:nth-child(1){ margin-left: 0; } .coinbig .coinbig-logoimg1:nth-child(6){ margin-right: 0; } .coinbig .coinbig-logoimg1:nth-child(7){ margin-left: 0; } .coinbig .coinbig-logoimg1:nth-child(12){ margin-right: 0; } @media only screen and (max-width: 735px) { .coinbig .coinbig-logoimg { width: 46%; } .coinbig .coinbig-logoimg:nth-child(1) { margin-left: 0; } .coinbig .coinbig-logoimg:nth-child(2) { margin-right: 0; } .coinbig .coinbig-logoimg:nth-child(3) { margin-left: 0; } .coinbig .coinbig-logoimg:nth-child(4) { margin-right: 0; } /*新的logo*/ .coinbig .coinbig-logo1{ width: 80%; } .coinbig .coinbig-logoimg1{ width: 31%; } .coinbig .coinbig-logoimg1:nth-child(1){ margin-left: 0; } .coinbig .coinbig-logoimg1:nth-child(3){ margin-right: 0; } .coinbig .coinbig-logoimg1:nth-child(4){ margin-left: 0; } .coinbig .coinbig-logoimg1:nth-child(6){ margin-right: 0; } .coinbig .coinbig-logoimg1:nth-child(7){ margin-left: 0; } .coinbig .coinbig-logoimg1:nth-child(9){ margin-right: 0; } .coinbig .coinbig-logoimg1:nth-child(10){ margin-left: 0; } .coinbig .coinbig-logoimg1:nth-child(12){ margin-right: 0; } } /*合伙人*/ .coinbig .coinbig-ren { overflow: hidden; width: 80%; margin: 0 auto; } .coinbig .coinbig-ren-left { width: 46%; height: 200px; background: salmon; float: left; border-radius: 8px; border: solid 1px #1b273f; } .coinbig .coinbig-ren-right { width: 46%; height: 200px; background: salmon; float: right; border: solid 1px #1b273f; border-radius: 8px; } /*ren*/ .coinbig .home-page-newname { width: 80%; padding-bottom: 5%; overflow: hidden; margin: 0 auto; color: #dbdef6; } .coinbig .home-page-newname-left { width: 46%; float: left; border-radius: 10px; border: solid 1px #1b273f; } .coinbig .home-page-newname-left-img { float: left; width: 15%; /*background: red;*/ margin-top: 5%; margin-bottom: 5%; margin-left: 5%; border-radius: 50%; overflow: hidden; } .coinbig .home-page-newname-left-img img { width: 100%; height: 100%; overflow: hidden; } .coinbig .home-page-newname-right { width: 46%; float: right; border-radius: 10px; border: solid 1px #1b273f; } .coinbig .home-page-newname-comment { margin-right: 5%; float: right; width: 70%; } .coinbig .home-page-names { margin-top: 5%; } .coinbig .home-page-names1 { margin-top: 2%; margin-bottom: 2%; } @media only screen and (max-width: 735px) { .coinbig .home-page-newname { width: 90%; } .coinbig .home-page-newname-left { width: 99%; margin: 2% auto; } .coinbig .home-page-newname-right { width: 99%; margin: 0 auto; } .coinbig .coinbig-hb { font-size: 18px; font-weight: 700; background: linear-gradient(to right, #5b77ff, #00d0fb); -webkit-background-clip: text; color: transparent; } .coinbig .coinbig-hbyw { font-size: 12px; } } /*------------------------------尾部--------------------------------------*/ .coinbag-wei { width: 80%; margin: 2% auto; } .footer-new { width: 100%; background-image: linear-gradient(0deg, #283f70 0%, #264278 100%); position: absolute; bottom: 0; } .footer-all { width: 100%; padding-bottom: 1%; background-image: linear-gradient(0deg, #283f70 0%, #264278 100%); } .footer-all-left { float: left; width: 18%; } .footerimgs { width: 100%; padding-bottom: 3%; background: url(../../images/v2/footer/ty.png) no-repeat; background-size: 100% 100%; } .footer-all-leimg { margin: 15% auto 0; } .footer-all-leimg img { width: 100%; } .footer-all-cment { float: left; width: 64%; } .footer-all-right { float: right; width: 18%; } .footer-all-data { font-size: 12px; color:rgba(219,222,246,0.5); } .footer-all-logo { width: 65%; margin: -3% auto; } .floots { width: 100%; } .footer-all-cment ul { float: left; margin-left: 7%; } .footer-all-cment ul li {} .footer-all-cment ul li a { font-size: 12px; color: rgba(219, 222, 246, 1); } .footer-all-cment ul li a:hover { font-size: 12px; color: #2bdafc; } .footer-all-cment ul:nth-child(1) { float: left; margin-left: 5%; } .footer-all-as { width: 80%; margin: 0 auto; } .footer-li { font-size: 14px; color: rgba(219,222,246,0.5); margin-bottom: 5px; } .footer-about { text-align: right; } .footer-about-logo { margin-top: 2%; } .footer-hover-imgsa { } .foot-images { float: right; width: 40px; height: 40px; } .footer1 { background: url(../../images/v2/footer/qq.png) no-repeat; background-size: 100% 100%; } .footer2 { background: url(../../images/v2/footer/wx.png) no-repeat; background-size: 100% 100%; } .footer3 { background: url(../../images/v2/footer/QQ.png) no-repeat; background-size: 100% 100%; } .footer4 { background: url(../../images/v2/footer/facebook.png) no-repeat; background-size: 100% 100%; } .footer5 { background: url(../../images/v2/footer/twitter.png) no-repeat; background-size: 100% 100%; } .footer6 { background: url(../../images/v2/footer/Telegram.png) no-repeat; background-size: 100% 100%; } .foot-images { position: relative; } .footnew-hover { width: 255%; position: absolute; top: 10%; left: -10%; transform: translate(-27%, -100%); display: none; background: #FFFFFF; border-radius: 8px; } .footnew-hover img{ width: 90%; height: 70%; padding-top: 8%; padding-left: 2%; padding-right: 4%; padding-bottom: 0%; } .footnew-hoverimg { width: 100%; height: 100%; } .footer1:hover .footnew-hover { display: block; } .footer2:hover .footnew-hover { display: block; } .footer3:hover .footnew-hover { display: block; } .footer4:hover .footnew-hover { display: block; } .footer5:hover .footnew-hover { display: block; } .footer6:hover .footnew-hover { display: block; } .foot-text { text-align: center; font-size: 12px; color: rgba(219, 222, 246, 0.5); margin-top:3%; } .foot-text1 { text-align: center; font-size: 12px; color: rgba(219, 222, 246, 0.5); margin-top: 5px; } @media only screen and (max-width: 1200px) { .footer-all-cment ul { margin-left: 5%; } } @media only screen and (max-width: 900px) { .footer-all-cment ul { margin-left: 0%; } body{ padding-bottom:0; } } /*手机端*/ .phone-foote{ width: 100%; background-image: linear-gradient(0deg, #283f70 0%, #264278 100%); display: none; } .footerimgs-img{ width: 130px; margin: 16px auto; } .footerimgs-imgs{ width: 100%; } .foot-logo-imgsa:nth-child(1){ margin-left: 0; } .foot-logo-imgsa:nth-child(6){ margin-right: 0; } .logos-ov{ width: 90%; margin: 0 auto; } .foot-logo-imgsb{ width: 100%; } @media only screen and (max-width: 900px) { .footer-new { display: none; } .phone-foote{ display: block; } } /*手机端尾部添加新的开始*/ .phone-lest-ul{ width: 90%; margin: 0 auto; } .phone-lest-ul ul{ width: 33%; margin: 0 auto; float: left; margin-left: 1px; text-align: center; padding: 20px 0 20px 0; } .phone-lest-ul ul:nth-child(1){ margin-left: 0; } .phone-lest-ul ul li a{ font-size: 12px; color: #93a8c8; } .phone-lest-ul-ons{ font-size: 14px; } .foot-logo-imgst{ float: left; width: 50%; width: 47%; margin-top: 1.2%; } .foot-logo-imgsa { width: 11%; float: left; margin-left: 0.5%; } .phone-ris{ margin-left: 30%; } .as { margin-left: 20%; } .bs { margin-left: 0; } .cs { margin-left: 0; } /*手机端尾部添加新的结束*/ .foot-logo-imgsa{ position: relative; } .foot-logo-imgaleat{ width: 60px; height: 60px; background: #FFFFFF; position: absolute; top: -50px; left: -5px; display: none; } .foot-logo-imgaleat img{ width: 100%; height: 100%; } .foot-logo-imgsa:hover .foot-logo-imgaleat{ display: block; } /*新加按钮首页尾部*/ .coinbig .btndiv{ width: 168px; height: 48px; background-image: linear-gradient(90deg, rgba(69, 142, 255,0.8) 0%, rgba(1, 231, 207,0.8) 100%), linear-gradient(rgba(111, 142, 255,0.8), rgba(111, 142, 255,0.8)); font-size: 14px; position: fixed; right: 30px; bottom: 30px; z-index: 9; border-radius: 24px; line-height: 48px; font-weight: 600; } .coinbig .btndiv:hover{ background-image: linear-gradient(90deg, rgba(69, 142, 255,1) 0%, rgba(1, 231, 207,1) 100%), linear-gradient(rgba(111, 142, 255,1), rgba(111, 142, 255,1)); } .btndiv-img{ width: 16px; height: 16px; float: left; margin-left: 16px; margin-top: 16px; } .btndiv-span{ margin-left: 10px; } /*手机尾部*/ @media only screen and (max-width: 900px) { .coinbig .btndiv{ width: 48px; height: 48px; border-radius: 48px; background-image: linear-gradient(90deg, rgb(69, 142, 255) 0%, rgb(1, 231, 207) 100%), linear-gradient(rgb(111, 142, 255), rgb(111, 142, 255)); } .btndiv-span{ display: none; } } /*全局弹窗样式开始*/ .overall-situation-all{ width: 100%; height: 100%; position: fixed; top: 0; background: rgba(0,0,0,0.6); } .overall-son{ min-width: 640px; min-height: 400px; background:rgba(12,25,36,1); border-radius:8px; box-shadow:10px 0px 50px rgba(6,12,28,0.3); position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9; } /*全局弹窗样式结束*/ /*没有数据*/ .add-assetrecords-none { width: 100%; margin-top: 100px; } .add-assetrecords-text { width: 100%; text-align: center; margin-top: 20px; color: rgba(219,222,246,0.5) } .add-assetrecords-text-span { font-size: 14px; color: rgba(235, 245, 254, 0.7); } .add-assetrecords-text-span a { color: rgba(235, 245, 254, 0.7); } .add-assetrecords-img { width: 100%; margin: 0 auto; width: 100px; height: 100px; } .add-assetrecords-img img { width: 100%; } /*没有数据*end/*/ /*加载条*/ .loding-ld { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; left: 0; top: 0; z-index: 99999999999; } .section_ld { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99999999999; } .loader-ld { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 75px; display: inline-block; vertical-align: middle; } .loader-star { position: absolute; top: calc(50% - 12px); } .loader-2 .loader-star { position: static; width: 60px; height: 60px; -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation: loader-2-star 1s ease alternate infinite; animation: loader-2-star 1s ease alternate infinite; } .loader-2 .loader-circles { width: 8px; height: 8px; border-radius: 50%; position: absolute; left: calc(50% - 4px); top: calc(50% - 4px); -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite; animation: loader-2-circles 1s ease-in-out alternate infinite; } @-webkit-keyframes loader-2-circles { 0% { box-shadow: 0 0 0 #00CDFA; opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { box-shadow: 24px -22px #00CDFA, 30px -15px 0 -3px #00CDFA, 31px 0px #00CDFA, 29px 9px 0 -3px #00CDFA, 24px 23px #00CDFA, 17px 30px 0 -3px #00CDFA, 0px 33px #00CDFA, -10px 28px 0 -3px #00CDFA, -24px 22px #00CDFA, -29px 14px 0 -3px #00CDFA, -31px -3px #00CDFA, -30px -11px 0 -3px #00CDFA, -20px -25px #00CDFA, -12px -30px 0 -3px #00CDFA, 5px -29px #00CDFA, 13px -25px 0 -3px #00CDFA; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { opacity: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 25px -22px #00CDFA, 15px -22px 0 -3px black, 31px 2px #00CDFA, 21px 2px 0 -3px black, 23px 25px #00CDFA, 13px 25px 0 -3px black, 0px 33px #00CDFA, -10px 33px 0 -3px black, -26px 24px #00CDFA, -19px 17px 0 -3px black, -32px 0px #00CDFA, -23px 0px 0 -3px black, -25px -23px #00CDFA, -16px -23px 0 -3px black, 0px -31px #00CDFA, -2px -23px 0 -3px black; } } @keyframes loader-2-circles { 0% { box-shadow: 0 0 0 #00CDFA; opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { box-shadow: 24px -22px #00CDFA, 30px -15px 0 -3px #00CDFA, 31px 0px #00CDFA, 29px 9px 0 -3px #00CDFA, 24px 23px #00CDFA, 17px 30px 0 -3px #00CDFA, 0px 33px #00CDFA, -10px 28px 0 -3px #00CDFA, -24px 22px #00CDFA, -29px 14px 0 -3px #00CDFA, -31px -3px #00CDFA, -30px -11px 0 -3px #00CDFA, -20px -25px #00CDFA, -12px -30px 0 -3px #00CDFA, 5px -29px #00CDFA, 13px -25px 0 -3px #00CDFA; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { opacity: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 25px -22px #00CDFA, 15px -22px 0 -3px black, 31px 2px #00CDFA, 21px 2px 0 -3px black, 23px 25px #00CDFA, 13px 25px 0 -3px black, 0px 33px #00CDFA, -10px 33px 0 -3px black, -26px 24px #00CDFA, -19px 17px 0 -3px black, -32px 0px #00CDFA, -23px 0px 0 -3px black, -25px -23px #00CDFA, -16px -23px 0 -3px black, 0px -31px #00CDFA, -2px -23px 0 -3px black; } } @-webkit-keyframes loader-2-star { 0% { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); } 100% { -webkit-transform: scale(0.7) rotate(360deg); transform: scale(0.7) rotate(360deg); } } @keyframes loader-2-star { 0% { -webkit-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); } 100% { -webkit-transform: scale(0.7) rotate(360deg); transform: scale(0.7) rotate(360deg); } } </style> <style> .cls-1 { fill: url(#img_5); } .cls-2 { fill: url(#img-2); } .cls-3 { fill: url(#img-3); } .cls-4 { fill: url(#img-4); } .cls-5 { fill: url(#img-5); } .cls-6 { fill: url(#img-6); } .cls-7 { fill: url(#img-7); } .cls-8 { fill: url(#img-8); } .cls-9 { fill: url(#img-9); }
调用方法
引入js 调用方法 必须引入
$(window).load(function () {
$(‘#responsiveness‘).swipeslider();
});
原文:https://www.cnblogs.com/chen527/p/10592676.html