<!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="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">
<script src="js/jquery.min.js"></script>
<script src="js/bxslider.min.js"></script>
<script src="js/common.js"></script>
<script src="js/bootstrap.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container-pro {
width: 100%;
height: 500%;
position: absolute;
top: 0;
transition: all 0.3s ease;
}
.section1 {
/* background-color: rebeccapurple;
background: url(images/首页-第四页bg.jpg);*/
}
.section2 {
background-color: skyblue;
background: url(images/首页-第二页bg.jpg) center top no-repeat;
}
.section3 {
background-color: red;
background: url(images/电子信息-bg.jpg) center top no-repeat;
}
.section4 {
background-color: orange;
background: url(images/首页-第三页bg.jpg) center top no-repeat;
}
.section5 {
background-color: lightgreen;
background: url(images/首页-第四页bg.jpg) center top no-repeat;
}
.section6 {
background-color: #fff;
/*background: url(images/首页-第四页bg.jpg);*/
}
.section {
width: 100%;
height: 20%;
display: flex;
color: white;
/*justify-content: center;*/
align-items: center;
background-size: cover;
}
.controls {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
list-style: none;
}
.controls li {
width: 50px;
height: 50px;
font: bold 22px/50px '宋体';
text-align: center;
background-color: #000;
color: white;
cursor: pointer;
border-radius: 50%;
}
.controls li+li {
margin-top: 5px;
}
.controls li.active {
background-color: #fff;
color: red;
}
/*add*/
.swiper-slide img{ width: 100%;height: 100%; }
</style>
</head>
<body>
<div class="container-pro">
<div class="section section1">
<!-- p1 -->
<header>
<div class="top_logo">
<div class="logo_wrap"> <a href="/"><img src="images/logo2.png" class="logo" alt=""/></a> </div>
</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="#">首页</a></li>
<li class="dropdown"><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>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</header>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/首页-banner1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/首页-banner2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/首页-banner3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/首页-banner4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/首页-banner5.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/首页-banner6.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="section section2">
<!-- 数字展示 -->
<div class="number_box" style="width: 100%!important;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 number_text" data-move-y="140px">
<p>苏创投立足苏州市创新型城市发展战略，以数字经济时代下产业创新集群的建设为使命，以全周期科技投资业务为支柱，发挥国有金融资本的引领带动作用，织精织密全市创新资本网络，推动产业链和创新链深度融合。</p>
</div>
<div class="col-sm-4 col-md-4 counter-wrap">
<div class="counter"><span>180</span> 亿元</div>
<p class="text">注册资本</p>
</div>
<div class="col-sm-4 col-md-4 counter-wrap">
<div class="counter"><span>237</span> 亿元</div>
<p class="text">总资产</p>
</div>
<div class="col-sm-4 col-md-4 counter-wrap">
<div class="counter"><span>1400</span> 亿元</div>
<p class="text">管理规模</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<a href="#" class="about_more">探索更多</a>
</div>
</div>
</div>
</div>
</div>
<div class="section section3">
<!-- 电子信息 交互 -->
<div class="elec_box" style="width: 100%!important;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 number_text" >
<p class="line_1">电子信息</p>
<p class="line_2">Electronic information</p>
<p class="line_3">重点关注计算机与智能消费设备制造、信息通信、新型显示、集成电路、电子元器件与专用材料产业、人工智能等领域</p>
</div>
<div class="container elec_wrap">
<div class="col-sm-4 col-md-3 elec_list">
<div class=""><img src="images/电子信息.png"></div>
<p class="text">电子信息</p>
<a href="#" class="more_white">探索更多</a>
</div>
<div class="col-sm-4 col-md-3 elec_list">
<div class=""><img src="images/装备制造.png"></div>
<p class="text">装备制造</p>
<a href="#" class="more_white">探索更多</a>
</div>
<div class="col-sm-4 col-md-3 elec_list">
<div class=""><img src="images/生物医药.png"></div>
<p class="text">医药生物</p>
<a href="#" class="more_white">探索更多</a>
</div>
<div class="col-sm-4 col-md-3 elec_list">
<div class=""><img src="images/先进材料.png"></div>
<p class="text">先进材料</p>
<a href="#" class="more_white">探索更多</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section4">
<!-- 新闻动态 -->
<div class="news_box" style="width: 100%!important;">
<div class="container">
<div class="row">
<!-- left -->
<div class="col-xs-12 col-sm-4 col-md-2 news_left">
<div class="news_left_wrap">
<h2 class="left_h2">最新动态</h2>
<p>NEWS<br>INFORMATION</p>
<button>探索更多</button>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-12 news_wrap">
<div class="list_box">
<h2 class="left_h2 news_title">集团要闻 企业动态 媒体聚焦</h2>
<div class="col-sm-4 col-md-4 col-mm-6 news_list">
<a href="/"> <img src="images/首页-第四页bg.jpg" class="img-thumbnail" alt=""/> </a>
<p class="line_1"><a href="news/detail.html" title="">世界杯第11日！</a></p>
<p class="line_2">2022卡塔尔世界杯，迎来了第11个比赛日，在C组的比赛中，阿根廷队以2-0击败了波兰队，拿到了小组第一名出线</p>
<p class="line_3">2022-12-01</p>
</div>
<div class="col-sm-4 col-md-4 col-mm-6 news_list">
<a href="/"> <img src="images/首页-第四页bg.jpg" class="img-thumbnail" alt=""/> </a>
<p class="line_1"><a href="news/detail.html" title="">世界杯第11日！</a></p>
<p class="line_2">2022卡塔尔世界杯，迎来了第11个比赛日，在C组的比赛中，阿根廷队以2-0击败了波兰队，拿到了小组第一名出线</p>
<p class="line_3">2022-12-01</p>
</div>
<div class="col-sm-4 col-md-4 col-mm-6 news_list">
<a href="/"> <img src="images/首页-第四页bg.jpg" class="img-thumbnail" alt=""/> </a>
<p class="line_1"><a href="news/detail.html" title="">世界杯第11日！</a></p>
<p class="line_2">2022卡塔尔世界杯，迎来了第11个比赛日，在C组的比赛中，阿根廷队以2-0击败了波兰队，拿到了小组第一名出线</p>
<p class="line_3">2022-12-01</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section5">
<!-- 上市企业 -->
<div class="enterprise_box" style="width: 100%!important;">
<div class="container">
<div class="row">
<!-- left -->
<div class="col-xs-12 col-sm-4 col-md-2 enterprise_left">
<div class="enterprise_left_wrap">
<h2 class="left_h2">上市企业</h2>
<p>LISTED<br>ENTERPRISES</p>
<button>探索更多</button>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-12 enterprise_wrap">
<div class="list_box">
<img src="images/logo.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section6">
<!-- 底部目录 -->
<div class="cate_box" style="width: 100%!important;height: 400px;">
<div class="container">
<div class="row">
<div class="container wrap">
<div class="col-sm-4 col-md-2 list">
<div class="title">关于我们</div>
<ul>
<li><a href="about/about01.html" target="_blank">集团介绍</a></li>
<li><a href="about/about02.html" target="_blank">董事长致辞</a></li>
<li><a href="about/about03.html" target="_blank">核心能力</a></li>
<li><a href="about/about04.html" target="_blank">企业文化</a></li>
<li><a href="about/about05.html" target="_blank">组织构架</a></li>
<li><a href="about/about06.html" target="_blank">合作伙伴</a></li>
<li><a href="about/about07.html" target="_blank">联系我们</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-2 list">
<div class="title">业务版图</div>
<ul>
<li><a href="service/service01.html" target="_blank">基金集群</a></li>
<li><a href="service/service11.html" target="_blank">产业地图</a></li>
<li><a href="service/service03.html" target="_blank">投贷联动</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-2 list">
<div class="title">新闻中心</div>
<ul>
<li><a href="news/news01.html" target="_blank">集团要闻</a></li>
<li><a href="news/news02.html" target="_blank">行业动态</a></li>
<li><a href="news/news03.html" target="_blank">媒体聚焦</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-2 list">
<div class="title">党建中心</div>
<ul>
<li><a href="work/work.html" target="_blank">党建工作</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-2 list">
<div class="title">人才发展</div>
<ul>
<li><a href="talent/talent01.html" target="_blank">人才理念</a></li>
<li><a href="talent/talent02.html" target="_blank">人才招聘</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-2 list">
<div class="title">投资申请</div>
<ul>
<li><a href="form/form.html" target="_blank">投资申请</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: 80px;">
<div class="row">
<div class="col-md-3" style="background:red">af</div>
<div class="col-md-3" style="background:yellow">af</div>
<div class="col-md-3" style="background:red">af</div>
<div class="col-md-3" style="background:green">af</div>
</div>
</div>
<ul class="controls">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script type="text/javascript" src="js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
});
</script>
<script>
//实现滚动效果
const container = document.querySelector('.container-pro')
const lis = document.querySelectorAll('.controls li')
var viewHeight = null //声明页面高度
var index = 0; //当前索引
var flag = true; //节流开关
document.addEventListener('mousewheel', function (e) {
e = e || window.event
console.log(e);
// 获取整屏的高度
viewHeight = document.body.clientHeight;
if (flag) { //节流阀
flag = false
if (e.wheelDelta > 0) {
index--
if (index < 0) {
index = 0
}
} else {
index++;
if (index > lis.length - 1) {
index = lis.length - 1
}
}
container.style.top = -index * viewHeight + 'px'
changeColor(index)
setTimeout(function () {
flag = true
}, 500)
}
})
//绑定点击事件
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
viewHeight = document.body.clientHeight
index = i
changeColor(index)
container.style.top = -index * viewHeight + 'px'
}
}
//改变小li颜色
function changeColor(index) {
for (var j = 0; j < lis.length; j++) {
lis[j].className = ''
}
lis[index].className = 'active'
}
</script>
</body>
</html>