西安四叶草信息技术有限公司

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>西安四叶草信息技术有限公司</title> <link rel="icon" href="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/导航栏logo/favicon.ico" > <link rel="stylesheet" href="/static/css/bootstrap.css"> <link rel="stylesheet" href="/static/css/animate.min.css"> <link rel="stylesheet" href="/static/css/swiper.min.css"> <script src="/static/js/jquery-3.6.0.min.js"></script> </head> <style> html { font-size: 62.5%; padding: 0; margin: 0; } ul, li { list-style: none } img { border: none } a { color: #333; font-size: 1.4rem; text-decoration: none; } input{ lighting-color: none; } #header { position: fixed; top: 0; z-index: 99; width: 100%; } #banner img { width: 100%; } #userpain, #solvemethod, #benifit, #custom { text-align: center; padding: 2rem 15% 4rem 15%; } #userpain .title, #solvemethod .title, #benifit .title, #custom .title { font-size: 2.8rem; line-height: 4.2rem; } #userpain b, #solvemethod b, #benifit b, #custom b { display: block; width: 5.9rem; height: 3px; background: #8ED200; border-radius: 2px; margin: 1rem 0 1rem calc(50% - 2.95rem); } #userpain .subtitle, #solvemethod .subtitle, #benifit .subtitle, #custom .subtitle { margin-bottom: 3rem; } #solvemethod { background: #F9FAFE; } #userpain .userpain-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } #userpain .userpain-list .item { background: #FFFFFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08); border-radius: 12px; width: 38.7rem; height: 21.1rem; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 5px; position: relative; } #userpain .userpain-list .namewrap { display: inline-flex; flex-direction: column; align-items: center; } #userpain .userpain-list .item .img { width: 7.6rem; height: 7.7rem; } #userpain .userpain-list .item .name { font-weight: 550; color: #42443F; font-size: 1.8rem; line-height: 1.8rem; margin-top: 1rem; } #userpain .userpain-list .item .desc, #userpain .userpain-list .item:hover .img, #userpain .userpain-list .item:hover .name { display: none; } #userpain .userpain-list .item:hover .desc { width: 90%; margin: 5px 5%; display: inline-flex; align-items: center; justify-content: center; height: 100%; } #userpain .userpain-list .item:hover .desc .word { font-weight: 400; color: #42443F; font-size: 1.4rem; line-height: 2.8rem; position: absolute; z-index: 3; left: 0; top: auto; text-indent: 2rem; } #userpain .userpain-list .item:hover .desc .bg { width: 10.9rem; height: 10.9rem; position: absolute; right: 0; bottom: 0; z-index: 2; background: rgba(255,255,255,0.7); } #userpain .userpain-list .item:hover .desc img { width: 10.9rem; height: 10.9rem; position: absolute; right: 0; bottom: 0; z-index: 1; } #userpain .userpain-list .item:hover { cursor: pointer; /* animation: userpainover 0.5s 1; -webkit-animation: userpainover 0.5 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; */ } .userpain-item-out { animation: userpainout 0.5s 1; -webkit-animation: userpainout 0.5 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; } #solvemethod .solvemethod-list { display: flex; align-items: center; justify-content: center; } #solvemethod .solvemethod-list img { /* width: 22.5rem; */ height: 18.6rem; margin-right: 6.4rem; } #solvemethod .solvemethod-list span { text-align: left; color: #42443F; font-size: 1.8rem; line-height: 3.6rem; } #benifit { padding-top: 5rem; height: 554px; background: url("/static/images/solvemethod_bg.png") no-repeat; background-size: cover; color: #FFFFFF; } #benifit .benifit-list { display: inline-flex; justify-content: space-between; align-items: center; } #benifit .benifit-list .item { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 32%; height: 27.2rem; padding: 2rem; background: #3D3F41; box-shadow: 10px 10px 20px 0px rgba(7, 8, 8, 0.16), -10px -10px 20px 0px rgba(105, 105, 105, 0.15); } #benifit .benifit-list .item img { width: 8rem; height: 8rem; } #benifit .benifit-list .item span { font-size: 1.6rem; line-height: 2.8rem; text-align: left; margin-top: 2rem; width: 100%; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } #benifit .benifit-list .item:hover { box-shadow: inset 4px 5px 15px 0px rgba(0, 0, 0, 0.15); cursor: pointer; /* animation: userpainout 0.5s 1; -webkit-animation: userpainout 0.5 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; */ } .benifit-item-out { animation: userpainover 0.5s 1; -webkit-animation: userpainover 0.5 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; } #custom .custom-wrap { position: relative; } #custom .custom-wrap .item { background: url("/static/images/custom_itembg.png") no-repeat; background-size: 100% 100%; /* width: 30.1rem; */ width: 95%; height: 33.6rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; } #custom .custom-wrap .item .img { width: 100%; height: 25%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } #custom .custom-wrap .item .name { height: 15%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; font-size: 1.8rem; } #custom .custom-wrap .item .desc { height: 60%; width: 85%; text-align: left; color: #42443F; line-height: 2.8rem; } #custom .custom-wrap .swiper-wrapper { display: inline-flex; } #custom .left-btn, #custom .right-btn { position: absolute; top: 35%; z-index: 10; } #custom .left-btn { left: -6%; } #custom .right-btn { right: -6%; } #custom .swiper-pagination1 .swiper-pagination-bullet { margin: 0 1px; } #custom .swiper-pagination1 .swiper-pagination-bullet-active { width: 4rem; height: 8px; background: #8ED200; border-radius: 4px; } @keyframes userpainover { from { margin-top:1rem; } to { margin-top:0; } } @keyframes userpainout { from { margin-top:0; } to { margin-top:1rem; } } @media screen and (min-width: 1680px) and (max-width: 1800px) { #userpain, #solvemethod, #benifit, #custom, { padding: 2rem 13% 4rem 13%; } .head, .foot { padding: 0 13% 0m 13% !important; } } @media screen and (min-width: 1480px) and (max-width: 1680px) { #userpain, #solvemethod, #benifit, #custom { padding: 2rem 8% 4rem 8%; } .head, .foot { padding: 0 8% 0m 8% !important; } } @media screen and (min-width: 1280px) and (max-width: 1480px) { #userpain, #solvemethod, #benifit, #custom { padding: 2rem 5% 4rem 5%; } .head, .foot { padding: 0 5% 0 5% !important; } #custom .right-btn { right: -5%; } #custom .swiper-pagination1 .swiper-pagination-bullet { margin: 0 1px; } } @media screen and (min-width: 1024px) and (max-width: 1280px) { #userpain, #solvemethod, #benifit, #custom { padding: 2rem 5% 4rem 5%; } .head, .foot { padding: 0 5% 0 5% !important; } #custom .left-btn, #custom .right-btn { display: none; } } @media screen and (min-width: 768px) and (max-width: 1024px) { #userpain, #solvemethod, #benifit, #custom { padding: 2rem 0 4rem 0; } .head, .foot { padding: 0 !important; } #custom .left-btn, #custom .right-btn { display: none; } } @media screen and (max-width: 768px) { #userpain img { width: 100%; } #userpain .subtitle, #solvemethod .subtitle, #benifit .subtitle, #custom .subtitle, #userpain .userpain-list .item .desc .bg, #userpain .userpain-list .item .desc img { display: none; } #userpain, #solvemethod, #benifit, #custom { padding: 2rem 0 4rem 0; } #userpain .title, #solvemethod .title, #custom .title { font-size: 1.8rem; color: #333333; line-height: 1.8rem; } #benifit .title { font-size: 1.8rem; line-height: 1.8rem; } #userpain .userpain-list .item { height: auto; padding: 2rem 1rem; width: calc(100% - 2rem); } #userpain .userpain-list .item .desc, #userpain .userpain-list .item:hover .img, #userpain .userpain-list .item:hover .name { display: block; } #userpain .userpain-list .item:hover { animation: none; -webkit-animation: none; -webkit-animation-fill-mode: none; -moz-animation-fill-mode: none; -ms-animation-fill-mode: none; -o-animation-fill-mode: none; animation-fill-mode: none; } #userpain .userpain-list .item .desc { display: inline-flex; text-align: left; } #userpain .userpain-list .namewrap { flex-direction: row; align-items: center; justify-content: left; width: 100%; margin-bottom: 1rem; } #userpain .userpain-list .namewrap .img { width: 5rem; height: 5rem; } #userpain .userpain-list .namewrap .name { font-size: 1.6rem; } #userpain .userpain-list .item:hover .desc { width: auto; margin: auto; display: block; height: auto; } #userpain .userpain-list .item:hover .desc .word { line-height: normal; position: static; text-indent: 0%; } #solvemethod .solvemethod-list { flex-direction: column; } #solvemethod .solvemethod-list img { width: 11.5rem; height: 11.5rem; margin-right: 0; } #solvemethod .solvemethod-list span { padding: 1rem; margin-top: 1rem; font-weight: 400; color: #42443F; line-height: 2.4rem; font-size: 1.4rem; } #benifit { background: url("/static/images/achieve-mobile.png") no-repeat; background-size: cover; } #benifit .benifit-list { flex-direction: column; padding: 0 15px; } #benifit .benifit-list .item { flex-direction: row; width: 98%; height: 147px; padding: 2rem 1rem; background: #202122; box-shadow: 10px 10px 20px 0px rgba(7, 8, 8, 0.29), -10px -10px 20px 0px rgba(40, 41, 43, 0.41); } #benifit .benifit-list .item:nth-of-type(2) { margin: 1rem 0; } #benifit .benifit-list .item img { width: 4.2rem; height: 4.2rem; } #benifit .benifit-list .item span { margin-top: 0; margin-left: 1rem; font-size: 1.4rem; color: #E7E7E7; line-height: 2.2rem; } #custom .left-btn, #custom .right-btn { display: none; } #custom .custom-wrap .item { height: 283px; } #custom .custom-wrap .item .name { font-size: 1.5rem; line-height: 2.3rem; } } </style> <body>  <div id="header"> <script type="text/javascript"> $('#header').load('/header',function () { $(".nav .li1:eq(2)").addClass('act'); }); </script> </div>  <div id="banner"> <img src="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/解决方案/banner/教育.png" alt="networktraefik"> </div>  <div id="userpain" class="animate__fadeInUp animate__animated animate__slow"> <p class="title">用户痛点</p> <b></b> <p class="subtitle">直击客户所需</p> <div class="userpain-list">   <div class="item" style="display: '';"> <div class="namewrap"> <img class="img" src="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/解决方案/用户痛点/行业人才短缺.png" alt="userpain"> <span class="name">行业人才短缺</span> </div> <span class="desc"> <span class="word">网络安全攻防竞赛作为网络安全人才技能提升的重要手段，越来越受到运营商的青睐。</span> <span class="bg"></span> <img src="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/解决方案/用户痛点/行业人才短缺.png" alt="userpainbg"> </span> </div> </div> </div>  <div id="solvemethod" class="animate__fadeInUp animate__animated animate__slow"> <p class="title">解决方案</p> <b></b> <p class="subtitle">议题与行动指南</p> <div class="solvemethod-list"> <img src="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/解决方案/内容图/解决方案.png" alt="slovemethod"> <span>四叶草攻防实验平台建设采用虚拟化技术，为学生提供“学、练、赛、测”的环境，达到真正的学以致用，培养出一批高技术人才。平台底层基于虚拟化技术搭建复杂、真实的网络环境；软件采用集成网络安全基础学习、网络攻防培训、CTF实战、漏洞教学和攻防实战靶场的学习与攻防比赛平台。</span> </div> </div>  <div id="benifit"> <p class="title">客户收益</p> <b></b> <p class="subtitle">1＋N模式创收</p> <div class="benifit-list"> <div class="item"> <img src="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/解决方案/客户收益/客户收益.png" alt="benifit"> <span>加强网络安全人才培养，培养国家信息化安全建设下急需的安全人才，补齐网络安全人才实操技能短板，促进我国信息安全事业的发展。</span> </div> <div class="item"> <img src="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/解决方案/客户收益/客户收益.png" alt="benifit"> <span>提高高校安全研究能力，CloverSec实验室将所研究的内容以场景方式实时更新，以便了解到最前沿的信息安全技术。</span> </div> <div class="item"> <img src="https://secloverweb.oss-cn-hangzhou.aliyuncs.com/img/解决方案/客户收益/客户收益.png" alt="benifit"> <span>提升用户应急响应能力，通过网络攻防平台的实际演练，提高在网络空间开展信息监察、预防、应对突发事件的处理能力。</span> </div> </div> </div>  <div id="custom", style="display: none;"> <p class="title">项目案例</p> <b></b> <p class="subtitle">期待与您合作</p> <div class="custom-wrap"> <div class="swiper-container"> <div class="swiper-wrapper">  </div> </div> <div class="left-btn"><img src="/static/images/leftarrow.png" alt="leftarrow"></div> <div class="right-btn"><img src="/static/images/rightarrow.png" alt="leftarrow"></div> <div class="swiper-pagination1"></div> </div> </div>  <div id="contact" style="display: none;"> <script type="text/javascript"> $('#contact').load("/fullcontactus") </script> </div>  <div id="footer"> <script type="text/javascript"> $('#footer').load("/footer") </script> </div> </body> <script src="/static/js/swiper-bundle.min.js"></script> <script> $(document).ready(function() { let slideChild = $(".swiper-wrapper").children().length; let windowWidth = $(window).width(); if(windowWidth > 767) { // 用户痛点 $(".userpain-list .item").mouseover(function(){ // $(this).removeClass("userpain-item-out"); $(this).find(".word").addClass("animate__fadeInUp animate__animated"); // $(this).find("img").addClass("animate__zoomIn animate__animated"); }); $(".userpain-list .item").mouseout(function(){ // $(this).addClass("userpain-item-out"); }); // 客户收益 $(".benifit-list .item").mouseover(function(){ // $(this).removeClass("benifit-item-out"); }); $(".benifit-list .item").mouseout(function(){ // $(this).addClass("benifit-item-out"); }); // 客户案例 $("#custom .swiper-slide .item").mouseover(function(){ $(this).removeClass("animate__flipInY animate__animated"); }); $("#custom .swiper-slide .item").mouseout(function(){ $(this).addClass("animate__flipInY animate__animated"); }); } // 客户案例 let slideNum = 0; if(windowWidth < 767) { slideNum = 1; if(slideChild < 1) { $(".left-btn").css("display", "none"); $(".right-btn").css("display", "none"); $(".swiper-pagination1").css("display", "none"); } }else if(windowWidth >= 925 && windowWidth < 1480) { slideNum = 3; if(slideChild < 3) { $(".left-btn").css("display", "none"); $(".right-btn").css("display", "none"); $(".swiper-pagination1").css("display", "none"); } }else if(windowWidth > 768 && windowWidth < 925) { slideNum = 2; if(slideChild < 2) { $(".left-btn").css("display", "none"); $(".right-btn").css("display", "none"); $(".swiper-pagination1").css("display", "none"); } }else { slideNum = 4; if(slideChild < 4) { $(".left-btn").css("display", "none"); $(".right-btn").css("display", "none"); $(".swiper-pagination1").css("display", "none"); } } let swiperpc = new Swiper('.swiper-container', { loop: true, speed: 1000, slidesPerView: slideNum, spaceBetween: 20, centeredSlides : false, watchSlidesProgress : true, on: { setTranslate: function(){ slides = this.slides for(i=0; i< slides.length; i++){ slide = slides.eq(i) progress = slides[i].progress } }, setTransition: function(transition) { for (var i = 0; i < this.slides.length; i++) { var slide = this.slides.eq(i) slide.transition(transition); } }, }, navigation: { nextEl: '.left-btn', prevEl: '.right-btn', }, pagination: { el: '.swiper-pagination1', clickable: true, }, }); let bannerHieght = $("#banner").height(), // 1 userpainHieght = $("#userpain").height(), // 2 solvemethodHieght = $("#solvemethod").height(), // 3 benifitHieght = $("#benifit").height(); // 4 if(windowWidth > 767) { $(window).scroll(function() { // 289 if($(document).scrollTop() >= (bannerHieght / 2)+50) { $("#benifit").addClass("animate__fadeInUp animate__animated animate__slow"); } // 700 if($(document).scrollTop() >= (bannerHieght + (userpainHieght * 0.66))) { $("#custom").addClass("animate__fadeInUp animate__animated animate__slow"); } }); } }) </script> </html>

CINXE.COM

西安四叶草信息技术有限公司