main
liudan 2 years ago
parent 3412270cde
commit 08e2352d3b
  1. 320
      about/about.html
  2. 432
      about/about03.html
  3. 396
      css/about3.css
  4. 11
      css/head.css
  5. 0
      images/arrowleft.png
  6. 0
      images/arrowright.png
  7. BIN
      images/bg.png
  8. 0
      images/qianglian.png
  9. 0
      images/xietong.png
  10. 3
      index.html
  11. 65
      js/about03.js

@ -0,0 +1,320 @@
<!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">
<title>苏州创新投资集团有限公司</title>
<meta name="applicable-device"content="pc,mobile">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!--css3动画库-->
<link rel="stylesheet" href="../css/animate.css">
<!--banner大图基础样式-->
<link rel="stylesheet" href="../css/slick.css">
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<!--页面滚动基础样式-->
<link rel="stylesheet" href="../css/jquery.fullPage.css" />
<!--导航样式-->
<link rel="stylesheet" href="../css/head.css" />
<!--图片和滚屏样式-->
<link rel="stylesheet" href="../css/about3.css">
</head>
<body>
<!-- 导航 -->
<header class="header on">
<div class="container clearfix headerOut">
<div class="fl left">
<a href="#" ><img src="../images/logo2.png" alt="" class="img1" /></a>
<a href="#" ><img src="../images/logo1.png" alt="" class="img2" /></a>
</div>
<div class="fr nav">
<ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
<li>
<a href="javascript:void(0)">首页</a>
</li>
<li class="mainactive dropdown">
<a href="javascript:void(0)">关于我们</a>
<div class="dropdown_menu">
<a href="#">集团介绍</a>
<a href="#">董事长致辞</a>
<a href="#">核心能力</a>
<a href="#">企业文化</a>
<a href="#">组织构架</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">业务版图</a>
<div class="dropdown_menu">
<a href="#">基金集群</a>
<a href="#">产业地图</a>
<a href="#">投贷联动</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">新闻中心</a>
<div class="dropdown_menu">
<a href="#">集团要闻</a>
<a href="#">行业动态</a>
<a href="#">媒体聚焦</a>
</div>
</li>
<li>
<a href="javascript:void(0)">党建工作</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">人才发展</a>
<div class="dropdown_menu">
<a href="#">人才理念</a>
<a href="#">人才招聘</a>
</div>
</li>
<li>
<a href="javascript:void(0)">投资申请</a>
</li>
</ul>
</div>
<a href="javascript:void(0)" id="navToggle">
<span></span>
</a>
</div>
</header>
<!--移动端的导航-->
<div class="m_nav">
<div class="top clearfix">
<img src="../images/closed.png" alt="" class="closed" />
</div>
<div class="logo">
<img src="../images/logo1.png" alt="" />
</div>
<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
<li class="active">
<a href="javascript:void(0)">首页</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
关于我们
</a>
<div class="dropdown_menu">
<a href="#">集团介绍</a>
<a href="#">董事长致辞</a>
<a href="#">核心能力</a>
<a href="#">企业文化</a>
<a href="#">组织构架</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">业务版图</a>
<div class="dropdown_menu">
<a href="#">基金集群</a>
<a href="#">产业地图</a>
<a href="#">投贷联动</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">新闻中心</a>
<div class="dropdown_menu">
<a href="#">集团要闻</a>
<a href="#">行业动态</a>
<a href="#">媒体聚焦</a>
</div>
</li>
<li>
<a href="javascript:void(0)">党建工作</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">人才发展</a>
<div class="dropdown_menu">
<a href="#">人才理念</a>
<a href="#">人才招聘</a>
</div>
</li>
<li>
<a href="javascript:void(0)">投资申请</a>
</li>
</ul>
</div>
<!-- 内容 -->
<div id="about_main" class="index_main">
<div class="section section1 fp-auto-height fp-section">
<div class="topcontainer">
<img src="../images/banner.png" alt="">
<div class="selectedContainer">
<div class="title">核心能力</div>
<div class="subtitle">Core competence</div>
</div>
<div class="selectItemContainer">
<a href="about01.html">
<div class="selectItem">
<h5>集团简介</h5>
<div>ABOUT US</div>
</div>
</a>
<div class="line"></div>
<a href="about02.html">
<div class="selectItem">
<h5>董事长致辞</h5>
<div>CHAIRMAN'S SPEECH</div>
</div>
</a>
<div class="line"></div>
<a href="about03.html">
<div class="selectItem selected">
<h5>核心能力</h5>
<div>CORE COMPETENCE</div>
</div>
</a>
<div class="line"></div>
<a href="about04.html">
<div class="selectItem">
<h5>企业文化</h5>
<div>CORPORATE CULTURE</div>
</div>
</a>
<div class="line"></div>
<a href="about05.html">
<div class="selectItem">
<h5>组织架构</h5>
<div>ORGANIZATIONAL STRUCTURE</div>
</div>
</a>
<div class="line"></div>
<a href="about06.html">
<div class="selectItem">
<h5>合作伙伴</h5>
<div>COOPERATIVE PARTNER</div>
</div>
</a>
<div class="line"></div>
<a href="about07.html">
<div class="selectItem">
<h5>联系我们</h5>
<div>CONTACT US</div>
</div>
</a>
</div>
</div>
</div>
<div class="section section2">
<div class="xietong">
<div class="devide"></div>
<div class="title">协同创新</div>
<div class="subtitle">Collaborative innovation</div>
</div>
<img src="../images/xietong.png" alt="">
</div>
<div class="section section3">
<div class="yaosu">
<div class="devide"></div>
<div class="title">要素资源</div>
<div class="subtitle">Element resources</div>
</div>
<div class="middleContent container">
<div class="row brand__slider owl-carousel">
<div class="brand__thumb category__item transition-3">
<div class="business-effect">
<div class="e-img-l"><img alt="" src="../images/section4-hover01.png"></div>
<div class="e-img-r"><img alt="" src="../images/section4-hover02.png"></div>
</div>
<div class="imgcontainer transition-3">
<img src="../images/科研机构@2x.png">
</div>
<div class="contentText transition-3">
<div class="contenttitle">科研机构</div>
<p>联合各研究机构、院所助力科技 成果转化</p>
</div>
<a href="#">查看详情</a>
</div>
<div class="brand__thumb category__item transition-3">
<div class="business-effect">
<div class="e-img-l"><img alt="" src="../images/section4-hover01.png"></div>
<div class="e-img-r"><img alt="" src="../images/section4-hover02.png"></div>
</div>
<div class="imgcontainer transition-3">
<img src="../images/金融支持@2x.png">
</div>
<div class="contentText transition-3">
<div class="contenttitle">金融支持</div>
<p>以金融 “活水”灌溉产业创新集群</p>
</div>
<a href="#">查看详情</a>
</div>
<div class="brand__thumb category__item transition-3">
<div class="business-effect">
<div class="e-img-l"><img alt="" src="../images/section4-hover01.png"></div>
<div class="e-img-r"><img alt="" src="../images/section4-hover02.png"></div>
</div>
<div class="imgcontainer transition-3">
<img src="../images/服务保障@2x.png">
</div>
<div class="contentText transition-3">
<div class="contenttitle">服务保障</div>
<p>赋能企业优化创新服务生态</p>
</div>
<a href="#">查看详情</a>
</div>
</div>
</div>
</div>
<div class="section section4">
<img src="../images/bg.png" class="bg" alt="">
<div class="yaosu">
<div class="devide"></div>
<div class="title">强链补链</div>
<div class="subtitle">Strong chain complement</div>
</div>
<div class="container">
<div class="contentContainer">
<h5>资本招商重大龙头项目落地苏州</h5>
<div class="contentList">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
<div class="contentItem">
<div>引进创新</div>
<div>人才入驻</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
<div class="contentItem">
<div>促进创新</div>
<div>项目落地</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
<div class="contentItem">
<div>培育创新</div>
<div>企业成长</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.fullPage.min.js"></script>
<script src="../js/SuperSlide.2.1.3.js"></script>
<script src="../js/index_slick.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/about03.js"></script>
<script type="text/javascript">
$(function(){
$("#footer").load("../public/footer.html");
});
</script>
</body>
</html>

@ -1,238 +1,320 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>苏州创新投资集团有限公司</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="applicable-device"content="pc,mobile">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bxslider.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/swiper-bundle.min.css" rel="stylesheet">
<link href="../css/animate.css" rel="stylesheet" >
<script src="../js/jquery.min.js"></script>
<script src="http://www.jeendo.com/script/wow/wow.min2.js"></script>
<script src="../js/subpage.js"></script>
<script src="../js/common.js"></script>
<script src="../js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="/Templates/skin_cn/js/html5shiv.min.js"></script>
<script src="/Templates/skin_cn/js/respond.min.js"></script>
<![endif]-->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!--css3动画库-->
<link rel="stylesheet" href="../css/animate.css">
<!--banner大图基础样式-->
<link rel="stylesheet" href="../css/slick.css">
<link rel="stylesheet" href="../css/owl.carousel.min.css">
<!--页面滚动基础样式-->
<link rel="stylesheet" href="../css/jquery.fullPage.css" />
<!--导航样式-->
<link rel="stylesheet" href="../css/head.css" />
<!--图片和滚屏样式-->
<link rel="stylesheet" href="../css/about3.css">
</head>
<body>
<header class="top_oth">
<div class="top_logo">
<div class="logo_wrap"> <a href="/"><img src="../images/logo1.png" class="logo" alt=""/></a> </div>
<!-- 导航 -->
<header class="header on">
<div class="container clearfix headerOut">
<div class="fl left">
<a href="#" ><img src="../images/logo2.png" alt="" class="img1" /></a>
<a href="#" ><img src="../images/logo1.png" alt="" class="img2" /></a>
</div>
<div class="fr nav">
<ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
<li>
<a href="javascript:void(0)">首页</a>
</li>
<li class="mainactive dropdown">
<a href="javascript:void(0)">关于我们</a>
<div class="dropdown_menu">
<a href="#">集团介绍</a>
<a href="#">董事长致辞</a>
<a href="#">核心能力</a>
<a href="#">企业文化</a>
<a href="#">组织构架</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">业务版图</a>
<div class="dropdown_menu">
<a href="#">基金集群</a>
<a href="#">产业地图</a>
<a href="#">投贷联动</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">新闻中心</a>
<div class="dropdown_menu">
<a href="#">集团要闻</a>
<a href="#">行业动态</a>
<a href="#">媒体聚焦</a>
</div>
</li>
<li>
<a href="javascript:void(0)">党建工作</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">人才发展</a>
<div class="dropdown_menu">
<a href="#">人才理念</a>
<a href="#">人才招聘</a>
</div>
<!-- Fixed navbar -->
<nav id="top_nav" class="navbar navbar-default navbar-static-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">导航菜单</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<span id="small_search" class="glyphicon glyphicon-search" aria-hidden="true"></span> <a class="navbar-brand" href="#">导航菜单</a> </div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="../index.html">首页</a></li>
<li class="dropdown actived"><a href="../about/about01.html">关于我们</a> </li>
<li class="dropdown"> <a href="../service/service01.html">业务版图</a> </li>
<li class="dropdown"> <a href="../news/news01.html">新闻中心</a> </li>
<li class="dropdown"> <a href="../work/work.html">党建工作</a> </li>
<li class="dropdown"> <a href="../talent/talent01.html">人才发展</a> </li>
<li class="dropdown"> <a href="../form/form.html">投资申请</a> </li>
</li>
<li>
<a href="javascript:void(0)">投资申请</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
<a href="javascript:void(0)" id="navToggle">
<span></span>
</a>
</div>
</nav>
</header>
<!-- part0 -->
<div class="page_bg top_box" style="background: url(../images/banner.png) center top no-repeat;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 number_text">
<p class="line_1 wow fadeInDown">核心能力</p>
<p class="line_2 wow fadeInDown">CORE COMPETENCE</p>
</div>
</div>
<!--移动端的导航-->
<div class="m_nav">
<div class="top clearfix">
<img src="../images/closed.png" alt="" class="closed" />
</div>
<div class="logo">
<img src="../images/logo1.png" alt="" />
</div>
<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
<li class="active">
<a href="javascript:void(0)">首页</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
关于我们
</a>
<div class="dropdown_menu">
<a href="#">集团介绍</a>
<a href="#">董事长致辞</a>
<a href="#">核心能力</a>
<a href="#">企业文化</a>
<a href="#">组织构架</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">业务版图</a>
<div class="dropdown_menu">
<a href="#">基金集群</a>
<a href="#">产业地图</a>
<a href="#">投贷联动</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">新闻中心</a>
<div class="dropdown_menu">
<a href="#">集团要闻</a>
<a href="#">行业动态</a>
<a href="#">媒体聚焦</a>
</div>
</li>
<li>
<a href="javascript:void(0)">党建工作</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">人才发展</a>
<div class="dropdown_menu">
<a href="#">人才理念</a>
<a href="#">人才招聘</a>
</div>
</li>
<li>
<a href="javascript:void(0)">投资申请</a>
</li>
</ul>
</div>
<!-- 内容 -->
<div id="about_main" class="index_main">
<div class="section section1 fp-auto-height fp-section">
<div class="topcontainer">
<img src="../images/banner.png" alt="">
<div class="selectedContainer">
<div class="title">核心能力</div>
<div class="subtitle">Core competence</div>
</div>
<div class="selectItemContainer">
<a href="about01.html">
<div class="selectItem">
<h5>集团简介</h5>
<div>ABOUT US</div>
</div>
</a>
<div class="container wrap">
<div class="col-sm-4 col-about list"><a href="about01.html">
<p class="line_1">集团简介</p>
<p class="line_2">ABOUT US</p></a>
</div>
<div class="col-sm-4 col-about list"><a href="about02.html">
<p class="line_1">董事长致辞</p>
<p class="line_2">CHAIRMAN'S SPEECH</p></a>
</div>
<div class="col-sm-4 col-about list active"><a href="about03.html">
<p class="line_1">核心能力</p>
<p class="line_2">CORE COMPETENCE</p></a>
</div>
<div class="col-sm-4 col-about list"><a href="about04.html">
<p class="line_1">企业文化</p>
<p class="line_2">CORPORATE CULTURE</p></a>
<div class="line"></div>
<a href="about02.html">
<div class="selectItem">
<h5>董事长致辞</h5>
<div>CHAIRMAN'S SPEECH</div>
</div>
</a>
<div class="line"></div>
<a href="about03.html">
<div class="selectItem selected">
<h5>核心能力</h5>
<div>CORE COMPETENCE</div>
</div>
</a>
<div class="line"></div>
<a href="about04.html">
<div class="selectItem">
<h5>企业文化</h5>
<div>CORPORATE CULTURE</div>
</div>
</a>
<div class="line"></div>
<a href="about05.html">
<div class="selectItem">
<h5>组织架构</h5>
<div>ORGANIZATIONAL STRUCTURE</div>
</div>
<div class="col-sm-4 col-about list"><a href="about05.html">
<p class="line_1">组织架构</p>
<p class="line_2">ORGANIZATIONAL STRUCTURE</p></a>
</a>
<div class="line"></div>
<a href="about06.html">
<div class="selectItem">
<h5>合作伙伴</h5>
<div>COOPERATIVE PARTNER</div>
</div>
<div class="col-sm-4 col-about list"><a href="about06.html">
<p class="line_1">合作伙伴</p>
<p class="line_2">COOPERATIVE PARTNER</p></a>
</a>
<div class="line"></div>
<a href="about07.html">
<div class="selectItem">
<h5>联系我们</h5>
<div>CONTACT US</div>
</div>
<div class="col-sm-4 col-about list"><a href="about07.html">
<p class="line_1">联系我们</p>
<p class="line_2">CONTACT US</p></a>
</a>
</div>
</div>
</div>
<!-- part1 -->
<div class="about_21">
<div class="container-fluid row">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 wrap">
<img src="../images/line.png">
<h2 class="wow fadeInDown">协同创新</h2>
<h2 class="wow fadeInDown">COLLABORATIVE INNOVATION</h2>
<div class="about_text wow lightSpeedIn"><img src="../images/协同创新@2x.png"></div>
<div class="section section2">
<div class="xietong">
<div class="devide"></div>
<div class="title">协同创新</div>
<div class="subtitle">Collaborative innovation</div>
</div>
<img src="../images/xietong.png" alt="">
</div>
<div class="section section3">
<div class="yaosu">
<div class="devide"></div>
<div class="title">要素资源</div>
<div class="subtitle">Element resources</div>
</div>
<div class="middleContent container">
<div class="row brand__slider owl-carousel">
<div class="brand__thumb category__item transition-3">
<div class="business-effect">
<div class="e-img-l"><img alt="" src="../images/section4-hover01.png"></div>
<div class="e-img-r"><img alt="" src="../images/section4-hover02.png"></div>
</div>
<!-- part2 -->
<div class="about_22" style="background: url(../images/要素资源-bg@2x.png) center top no-repeat;width: 100%!important;height: 800px;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 title">
<img src="../images/line.png">
<h2 class="wow fadeInDown">要素资源</h2>
<h2 class="wow fadeInDown">ELEMENT RESOURCES</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 wrap swiper mySwiper">
<div class="img_wrap swiper-wrapper">
<div class="col-sm-4 col-md-4 list swiper-slide wow fadeInDown">
<div class="imgcontainer transition-3">
<img src="../images/科研机构@2x.png">
<div class="intro">
<p>科研机构</p>
<p>联合各研究机构、院所助力科技成果转化</p>
</div>
<div class="contentText transition-3">
<div class="contenttitle">科研机构</div>
<p>联合各研究机构、院所助力科技 成果转化</p>
</div>
<a href="#">查看详情</a>
</div>
<div class="brand__thumb category__item transition-3">
<div class="business-effect">
<div class="e-img-l"><img alt="" src="../images/section4-hover01.png"></div>
<div class="e-img-r"><img alt="" src="../images/section4-hover02.png"></div>
</div>
<div class="col-sm-4 col-md-4 list swiper-slide wow fadeInDown">
<div class="imgcontainer transition-3">
<img src="../images/金融支持@2x.png">
<div class="intro">
<p>金融支持</p>
</div>
<div class="contentText transition-3">
<div class="contenttitle">金融支持</div>
<p>以金融 “活水”灌溉产业创新集群</p>
</div>
<a href="#">查看详情</a>
</div>
<div class="brand__thumb category__item transition-3">
<div class="business-effect">
<div class="e-img-l"><img alt="" src="../images/section4-hover01.png"></div>
<div class="e-img-r"><img alt="" src="../images/section4-hover02.png"></div>
</div>
<div class="col-sm-4 col-md-4 list swiper-slide wow fadeInDown">
<div class="imgcontainer transition-3">
<img src="../images/服务保障@2x.png">
<div class="intro" style="bottom:13%;">
<p>服务保障</p>
</div>
<div class="contentText transition-3">
<div class="contenttitle">服务保障</div>
<p>赋能企业优化创新服务生态</p>
</div>
<a href="#">查看详情</a>
</div>
<div class="col-sm-4 col-md-4 list swiper-slide wow fadeInDown">
<img src="../images/科研机构@2x.png">
<div class="intro">
<p>科研机构</p>
<p>联合各研究机构、院所助力科技成果转化</p>
</div>
</div>
<div class="col-sm-4 col-md-4 list swiper-slide wow fadeInDown">
<img src="../images/金融支持@2x.png">
<div class="intro">
<p>金融支持</p>
<p>以金融 “活水”灌溉产业创新集群</p>
</div>
<div class="section section4">
<img src="../images/bg.png" class="bg" alt="">
<div class="yaosu">
<div class="devide"></div>
<div class="title">强链补链</div>
<div class="subtitle">Strong chain complement</div>
</div>
<div class="container">
<div class="contentContainer">
<h5>资本招商重大龙头项目落地苏州</h5>
<div class="contentList">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
<div class="contentItem">
<div>引进创新</div>
<div>人才入驻</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
<div class="contentItem">
<div>促进创新</div>
<div>项目落地</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4">
<div class="contentItem">
<div>培育创新</div>
<div>企业成长</div>
</div>
<!-- part3 -->
<div class="about_23" style="background: url(../images/强链补链bg-@2x.png) center bottom no-repeat;width: 100%!important;height: 740px;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 title">
<img src="../images/line.png">
<h2 class="wow fadeInDown">强链补链</h2>
<h2 class="wow fadeInDown">STRONG CHAIN COMPLEMENT</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 wrap">
<h2 class="wow fadeInDown">资本招商重大龙头项目落地苏州</h2>
<div class="col-sm-4 col-md-4 wow fadeInDown"><div class="list"><p>引进创新<br>人才入驻</p></div></div>
<div class="col-sm-4 col-md-4 wow fadeInDown"><div class="list"><p>促进创新<br>项目落地</p></div></div>
<div class="col-sm-4 col-md-4 wow fadeInDown"><div class="list"><p>培育创新<br>企业成长</p></div></div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
<nav class="navbar navbar-default navbar-fixed-bottom footer_nav">
<div class="foot_nav btn-group dropup"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"> <span class="glyphicon glyphicon-share btn-lg" aria-hidden="true"></span> 分享</a>
<div class="dropdown-menu webshare">
</div>
<div id="footer"></div>
</div>
<div class="foot_nav"><a href="tel:13770555127 17701589205"><span class="glyphicon glyphicon-phone btn-lg" aria-hidden="true"></span>手机</a></div>
<div class="foot_nav" aria-hidden="true" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="glyphicon glyphicon-th-list btn-lg"></span>分类</div>
<div class="foot_nav"><a id="gototop" href="#"><span class="glyphicon glyphicon-circle-arrow-up btn-lg" aria-hidden="true"></span>顶部</a></div>
</nav>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.fullPage.min.js"></script>
<script src="../js/SuperSlide.2.1.3.js"></script>
<script src="../js/index_slick.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/about03.js"></script>
<script type="text/javascript">
$(function(){
$("#footer").load("../public/footer.html");
});
</script>
</body>
<script type="text/javascript" src="../js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</html>

@ -0,0 +1,396 @@
body,html{
margin:0;padding:0;
}
.section1 .topcontainer{
width:100%;
margin-top:100px;
position: relative;
}
.section1 img{
width:100%;
}
.selectItemContainer{
display: flex;
align-items: center;
height: 74px;
background: rgba(2,7,14,0.5);
position: absolute;
bottom: 0;
width:100%;
z-index: 9;
}
.section1.active .selectedContainer{
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.section1.active .selectItemContainer{
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.section2.active .xietong,.section3.active .yaosu,.section4.active .yaosu{
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.section2.active img,.section3.active .middleContent, .section4.active .contentContainer h5{
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.section4.active .contentContainer .contentList{
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
animation-delay: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.selectItemContainer a,a:link,
a:visited,
a:hover,
a:active{
color: #ffffff;
text-decoration: none;
height:100%;
flex:1;
}
.selected{
background: #124AA0;
}
.selectItemContainer a:hover{
background: #124AA0;
}
.selectItem{
text-align: center;
color: #ffffff;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.selectItem h5{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
padding:0 !important;
line-height:16px !important;
margin:0 !important
}
.selectItem>div{
font-size: 10px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
margin-top:12px;
}
.line{
width: 1px;
height: 30px;
background-color: #ffffff;
}
.selectedContainer{
position: absolute;
top:0;
left:14%;
z-index: 9;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
left: 15%;
}
.selectedContainer .title{
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.selectedContainer .subtitle{
font-size: 36px;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
}
.section2{
border:1px solid red;
}
.xietong{
padding: 146px 0 102px 0;
text-align: center;
}
.section2 img{
width:100%;
}
.xietong .devide{
width: 80px;
height: 6px;
background: #E3E8EF;
margin: 0 auto;
}
.xietong .title{
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #124AA0;
margin:15px 0 10px 0;
}
.xietong .subtitle{
font-size: 36px;
font-family: Arial;
font-weight: 400;
color: #124AA0;
}
.section3{
background: url(../images/要素资源-bg@2x.png) center top no-repeat;
}
.yaosu{
text-align: center;
}
.yaosu .devide{
width: 80px;
height: 6px;
background: #124AA0;
margin: 0 auto;
}
.yaosu .title{
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #124AA0;
margin:15px 0 10px 0;
}
.yaosu .subtitle{
font-size: 36px;
font-family: Arial;
font-weight: 400;
color: #124AA0;
}
.middleContent{
display: flex;
width:100%;
/* margin-top: 30px; */
}
.middleContent .imgcontainer img{
width:100%;
height:100%;
}
.middleContent .contenttitle{
font-size: 30px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
.contentText{
position: absolute;
top:50%;
width: 72%;
left: 14%;
}
.contentText p{
margin:0;
padding:0;
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.category__item {
cursor: pointer;
border:2px solid transparent;
position: relative;
}
.category__item:hover .business-effect {
background: #134BA1;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.category__item:hover .business-effect .e-img-l {
left: 0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.category__item:hover .business-effect .e-img-r { right: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.business-effect {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 2;
}
.category__item:hover a {
opacity: 1;
z-index:9999;
position: absolute;
top:50%;
transform: translateY(-50%);
left:50%;
transform: translateX(-50%);
}
.category__item .business-effect .e-img-l {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.category__item .business-effect .e-img-l img {
display: block;
width: 100%;
}
.business-effect .e-img-r { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.business-effect .e-img-r img { display: block;height: 100%; width: 100%; }
.category__item>a {
opacity: 0;
display: block;
font-size: 16px;
color: #fff;
width: 118px; height: 38px;
line-height: 38px;
border: 1px solid #fff;
/* margin: 10% auto; */
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
text-align: center;
position: absolute;
}
.middleContent .owl-nav{
display: block !important;
}
.owl-prev{
position: absolute;
right:-70px;
top:50%
}
.owl-next{
position: absolute;
left:-60px;
top:50%
}
.section4{
position: relative;
}
.section4 .bg{
position: absolute;
top:3%;
left:50%;
transform: translateX(-50%);
}
.contentContainer{
background: url('../images/qianglian.png');
background-repeat: no-repeat;
padding: 80px 0 90px 0;
text-align: center;
}
.contentContainer h5{
padding:0;
margin:0;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.contentList{
width:65%;
margin:0 auto;
margin-top: 70px;
}
.contentItem{
width: 202px;
height: 202px;
background: rgba(18,74,160,0);
border: 2px solid #316DCB;
border-radius: 50%;
font-size: 24px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

@ -13,6 +13,13 @@
border-bottom: 1px solid #ffffff;
/*background: rgba(28, 35, 39, 0.8);*/
}
.fl {
float: left;
}
.fr {
float: right;
}
.header.animation .headerOut .fl {
-webkit-animation-duration: 1.8s;
-moz-animation-duration: 1.8s;
@ -267,6 +274,10 @@
.m_nav .ul li .dropdown_menu{
display: none;
}
.mainactive a{
color:#124AA0 !important;
font-weight: bold;
}
.m_nav .ul li.dropdown.active .dropdown_menu{
display: block;
}

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Before

Width:  |  Height:  |  Size: 355 KiB

After

Width:  |  Height:  |  Size: 355 KiB

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

@ -20,9 +20,6 @@
<!--图片和滚屏样式-->
<link rel="stylesheet" href="css/index.css">
<style>
/* body,html{
overflow: hidden !important;
} */
.g1,.g2,.g3,.g4{width:100%; height:116px; float:left; margin:0 5px 5px 0}
</style>
</head>

@ -0,0 +1,65 @@
//banner
$(function(){
$('.brand__slider').owlCarousel({
loop:true,
margin:30,
autoplay:false,
autoplayTimeout:3000,
smartSpeed:500,
items:3,
navText:['<img src="../images/arrowleft.png" alt="">','<img src="../images/arrowright.png" alt="">'],
nav:true,
dots:false,
responsive:{
0:{
items:1
},
576:{
items:2
},
767:{
items:3
},
}
});
//移动端展开nav
$('#navToggle').on('click',function(){
$('.m_nav').addClass('open');
})
//关闭nav
$('.m_nav .top .closed').on('click',function(){
$('.m_nav').removeClass('open');
})
//二级导航 移动端
$(".m_nav .ul li").click(function() {
$(this).children("div.dropdown_menu").slideToggle('slow')
$(this).siblings('li').children('.dropdown_menu').slideUp('slow');
});
//全屏滚动
$('#about_main').fullpage({
'navigation': true,
scrollBar: false,
slidesNavigation: true,
css3: true,
controlArrows: false,
continuousHorizontal:true,
scrollingSpeed:500,
showActiveTooltip :true,
anchors: ['hero', 'one', 'two', 'three','four','five'],
loopHorizontal: true,
afterLoad: function(anchorLink, index){
console.log(index)
$('header').addClass('on').addClass("animation");
},
afterSlideLoad:function(){
},
afterRender: function(){
},
onLeave: function(index, direction){
$(".header").removeClass("animation");
}
})
})
Loading…
Cancel
Save