index.html

<!DOCTYPE html>
<html>

<head>
	<title>滴滴开源平台</title>
	<meta charset="utf-8">
	<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="js/assets/owl.theme.default.css" />
	<script type="text/javascript" src="js/bundle.js"></script>
	<script type="text/javascript" src="js/owl.carousel.min.js"></script>
	<link rel="stylesheet" href="js/assets/owl.carousel.min.css" />
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?a29af03047a8bb72d7292168738f6659";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
	<style>
	.project{margin-bottom: 20px;}
	</style>
</head>

<body>
	<div class="header-own">
		<div class="header-inner container">
			<a href="http://www.didichuxing.com/">
				<img class="logo" src="images/open-source.png">
			</a>
			<div class="github-btn">
				<a href="https://github.com/didi">
					View On GitHub
				</a>
			</div>
		</div>
	</div>
	<!-- <div class="banner">
		<img src="images/banner-1.png" style="width:100%;height:auto;">
	</div> -->
	<div class="owl-carousel owl-theme">
		<img src="images/banner-1.png" style="width:100%;height:auto;">
		<img src="images/banner-2.png" style="width:100%;height:auto;">
	</div>
	<div class="container">
		<div class="row">
			<div class="container-title">
				<span>滴滴开源平台</span>
			</div>
			<div>
				<div class="row-fluid">
					<div class="project col-md-4">
						<div class="project-container">
							<a href="/virtual-apk.html" target="_blank">
							<img src="/images/virtual-apk-logo.png" width="100%">
						</a>
							<h2 class="project-name">
							<a href="virtual-apk.html" target="_blank">VirtualAPK</a>
						</h2>
							<p class="project-summary">
								Android 插件化框架
							</p>
							<p class="project-desc">
								VirtualAPK 是 Android 平台上的一款插件化框架，功能强大且轻量级，能够提供动态更新业务模块的能力。
							</p>
						</div>
					</div>
					<div class="project col-md-4">
						<div class="project-container">
							<a href="https://didi.github.io/cube-ui/" style="display:block;background-color:#eaeaea;">
							<img src="https://static.galileo.xiaojukeji.com/static/tms/shield/z/mofang/mofang/images/mofang_logo.png" style="display:block;height:144px;margin:auto;transform:scale(.6)">
						</a>
							<h2 class="project-name">
							<a href="https://didi.github.io/cube-ui/" target="_blank">cube-ui</a>
						</h2>
							<p class="project-summary">
								基于 Vue.js 实现的精致移动端组件库
							</p>
							<p class="project-desc">
								cube-ui 是一套基于 Vue.js 2.0 的移动端组件库，目标是让移动端的开发更加容易，让开发人员更加专注于业务逻辑的开发，提升研发效率。
							</p>
						</div>
					</div>
					<div class="project col-md-4">
						<div class="project-container">
							<a href="https://didi.github.io/mand-mobile/" style="display:block;background-color:#eaeaea;">
								<img src="//manhattan.didistatic.com/static/manhattan/mand/docs/mand-logo-black.svg" style="display:block;height:144px;margin:auto;transform:scale(.5);box-shadow:0 0 30px #999;border-radius:50%;">
							</a>
							<h2 class="project-name">
							<a href="https://didi.github.io/mand-mobile/" target="_blank">mand-mobile</a>
						</h2>
							<p class="project-summary">
								面向金融场景的 Vue.js 移动端组件库
							</p>
							<p class="project-desc">
								mand-mobile 是一款基于Vue的移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。
							</p>
						</div>
					</div>
					<div class="project col-md-4">
                                                <div class="project-container">
                                                        <a href="https://github.com/didi/gendry/" style="display:block;background-color:#eaeaea;">
                                                                <img src="images/gendry.png" width="100%">
                                                        </a>
                                                        <h2 class="project-name">
                                                        <a href="https://github.com/didi/gendry/" target="_blank">gendry</a>
                                                </h2>
                                                        <p class="project-summary">
                                                                一个go语言的数据库操作工具集
                                                        </p>
                                                        <p class="project-desc">
                                                                gendry是一个go语言的数据库操作工具集，包括操作连接池、构建sql和数据映射>。
                                                        </p>
                                                </div>
                                        </div>
					<div class="project col-md-4">
                                                <div class="project-container">
                                                        <a href="https://github.com/didi/" style="display:block;background-color:#eaeaea;">
                                                                <img src="images/default-project-logo.png" width="100%">
                                                        </a>
                                                        <h2 class="project-name">
                                                        <a href="https://github.com/didi/" target="_blank">DDMQ</a>
                                                </h2>
                                                        <p class="project-summary">
                                                                滴滴消息队列服务
                                                        </p>
                                                        <p class="project-desc">
                                                                DDMQ提供稳定，低延迟，高吞吐的实时队列，帮助系统解决好上下游吞吐不匹配，屏蔽下游系统故障时对上游系统的影响等等，较现有开源产品支持消费前转换，数据过滤等同时提供了脚本语言针对不同场景进行不同的消费前处理的高阶功能。>。
                                                        </p>
                                                </div>
                                        </div>
          <div class="project col-md-4">
						<div class="project-container">
							<a href="https://github.com/didi/pile.js/" style="display:block;background-color:#eaeaea;height: 144px;text-align: center;">
							<img src="http://es-static.xiaojukeji.com/static/web/activity/jimuwiki/Pile.js.png" style="display: inline-block;height: 54px;margin: 44px auto 0 auto;">
						</a>
							<h2 class="project-name">
							<a href="https://github.com/didi/pile.js/" target="_blank">Pile.js</a>
						</h2>
							<p class="project-summary">
								基于React的移动端开发组件库。
							</p>
							<p class="project-desc">
								轻量，易用，包含52个交互功能，支持多语言与自定义皮肤。可以非常轻松的创建用户交互界面，让前端开发更专注于业务逻辑的实现。
							</p>
						</div>
					</div>
					<div class="project col-md-4">
						<div class="project-container">
							<a href="#">
								<img src="images/default-project-logo.png" width="100%">
							</a>
							<h2 class="project-name">
								<a href="#">敬请期待</a>
							</h2>
							<p class="project-summary">

							</p>
							<p class="project-desc">

							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="container">
			<p>
				<a href="http://www.apache.org/licenses/LICENSE-2.0.html">开源协议</a> <span class="liscens">|</span> <a href="mailto:opensource@didichuxing.com">反馈意见</a>
			</p>
			<p class="liscens">© 2012-2017 Didi Chuxing. All Rights Reserved</p>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
		  	$(".owl-carousel").owlCarousel({
		  		nav: false,
		  		autoplay: true,
		  		items: 1,
		  		dots: false,
		  		rewind: true
		  	});
		});
	</script>
</body>

</html>