Skip to content

T
test
提交 db01ca79 作者: 武宏岩
操作

添加天网和部门体系

上级 2cc8e82d
正在显示 包含 363 行增加 和 13 行删除
css/index.css
...@@ -25,8 +25,13 @@ ...@@ -25,8 +25,13 @@
#top_nav .logo p { #top_nav .logo p {
font: bold 18px/23px 'Microsoft'; font: bold 18px/23px 'Microsoft';
color: #24b298; color: #24b298;
font-size: 31px;
line-height: 50px;
} }
/* 导航栏 */ /* 导航栏 */
#top_nav .nav{
margin-top: 11px;
}
#top_nav .nav a { #top_nav .nav a {
display: block; display: block;
float: left; float: left;
...@@ -560,7 +565,164 @@ ...@@ -560,7 +565,164 @@
top:465px; top:465px;
left:945px; left:945px;
} }
/* 天网系统 */
#skynet{
height: 600px;
width: 1920px;
background: url(../images/skynet_img.png)no-repeat center;
margin: 40px auto;
text-align: center;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
#skynet .test{
width: 380px;
height: 380px;
background: #fafafa;
border-radius: 50%;
}
#skynet .test .donkey{
margin-top: 140px;
font-size: 45px;
color: #12ab8d;
font-family:"Microsoft Yahei" ;
font-weight: bold;
}
#skynet .test .sunspot{
font-size: 33px;
color: #424b50;
font-family:"Microsoft Yahei" ;
font-weight: Regular;
}
#hover{
width: 1920px;
height: 180px;
margin: 0 auto;
}
#hover ul{
width: 1080px;
height: 130px;
margin: 20px auto 0;
}
#hover ul li{
width:80px;
height: 95px;
float: left;
padding-top:20px;
border: 1px solid #ccc;
text-align: center;
line-height: 30px;
margin: 0 14px;
position:relative;
box-shadow: 0 0 5px #eeeeee;
top: 0;
transition:top 0.8s;
}
#hover ul li:hover{
width:80px;
height: 95px;
float: left;
padding-top:20px;
border: 1px solid #ccc;
text-align: center;
line-height: 30px;
margin: 0 14px;
position:relative;
top: -10px;
}
#hover ul li .arrow{
width:11px;
height:9px;
background:url(../images/arrow.png) no-repeat;
position: absolute;
left: 35px;
top: 93px;
}
#hover .doublemint{
display: block;
margin-left: 426px;
width: 1166px;
}
/* 部门体系 */
#department .carousel-inner{
position: relative;
width:100%;
height:600px;
margin-top:86px;
overflow: hidden;
}
#department .carousel-inner .video_box{
position: absolute;
top:0px;
left:0px;
width:154.34%;
}
#department .carousel-inner li{
width:380px;
height:600px;
margin-right:25px;
float:left;
background: #254557;
}
#department .carousel-inner .video_box ul li .images{
width: 380px;
height: 380px;
overflow: hidden;
}
#department .carousel-inner .video_box ul li .images img{
display: block;
transition: all 0.8s ease-in-out
}
#department .carousel-inner .video_box ul li:hover .images img{
transform: scale(1.2);
transition: all 0.8s ease-in-out;
}
#department .carousel-inner li .text{
text-align: center;
padding: 20px;
color: #fff;
}
#department .carousel-inner li .text div{
font-size: 14px;
margin-bottom:15px;
}
#department .carousel-inner li .text p{
color:#eaeced;
}
.carousel-control-prev{
left: -200px!important;
opacity: 1!important;
}
.carousel-control-next{
right: -200px!important;
opacity: 1!important;
}
/* 招贤纳士 */ /* 招贤纳士 */
#department{ #department{
position: relative; position: relative;
...@@ -570,7 +732,7 @@ ...@@ -570,7 +732,7 @@
position: absolute; position: absolute;
top:50px; top:50px;
right:0px; right:0px;
background: #24b298; background: url(../images/recruit.png) no-repeat;
color:#fff; color:#fff;
width: 317px; width: 317px;
height: 65px; height: 65px;
...@@ -588,18 +750,6 @@ ...@@ -588,18 +750,6 @@
left: 20px; left: 20px;
bottom: -30px; bottom: -30px;
} }
#department_tel::before{
border-top: 15px solid #24b298;
border-left: 40px solid #24b298;
border-right: 40px solid transparent;
border-bottom: 15px solid transparent;
}
#department_tel::after{
border-top: 15px solid #fff;
border-left: 10px solid #fff;
border-right: 10px solid transparent;
border-bottom: 15px solid transparent;
}
#department_tel{ #department_tel{
line-height: 65px; line-height: 65px;
text-align: center; text-align: center;
......
index.html
...@@ -220,6 +220,206 @@ ...@@ -220,6 +220,206 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 天网体系 -->
<div id="department" class="main_body">
<div class="main_body">
<div class="model_top">
<div class="model_title wow animated fadeInUp">天网体系</div>
<p class="model_eng wow animated fadeInUp">SKYNET SYSTEM</p>
</div>
</div>
</div>
<div id="skynet" class="wow">
<div class="test">
<div class="donkey">天网监察体系</div>
<div class="sunspot">稽核中心 +MIS</div>
</div>
</div>
<div id="hover">
<ul>
<li>新增房源<br>系统验真<span class="arrow"></span></li>
<li>信息中西<br>核实<span class="arrow"></span></li>
<li>摄影师<br>实勘验真<span class="arrow"></span></li>
<li>权证法务<br>指导<span class="arrow"></span></li>
<li>法务合同<br>审核<span class="arrow"></span></li>
<li>权证收件<br>审核<span class="arrow"></span></li>
<li>贷款预批<br>审核<span class="arrow"></span></li>
<li>过户<br>审核<span class="arrow"></span></li>
<li>贷款<br>审核<span class="arrow"></span></li>
<li>财务<br>审核<span class="arrow"></span></li>
</ul>
<img class="doublemint" src="./images/Doublemint.png">
</div>
<!-- 部门体系 -->
<div id="department" class="main_body">
<div class="main_body">
<div class="model_top">
<div class="model_title wow animated fadeInUp">部门体系</div>
<p class="model_eng wow animated fadeInUp">DEPARTMENT</p>
</div>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active video_box">
<ul>
<li>
<div class="images">
<img src="./images/Human.png">
</div>
<div class="text">
<div>人力资本部</div>
<p>
千家的猎头组织。一个明明可以靠颜值，却硬是靠才华吃饭的部门，为社会创造更多的高端就业机会。我们为行业募选最优秀的精英，只寻找最真的你。
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/region.png">
</div>
<div class="text">
<div>置业部</div>
<p>
一群用青春去捍卫梦想的房地产经纪人，一个将屌丝变富帅的神奇部门。我们由一个职场小白，磨练成一个顶尖精英、蜕变成一个团队领导人，年入百万只需5年。我们持续壮大队伍，遍布全国，作为客户最坚实的后盾，我们在行业中循演着鲇鱼效应，推动着整个行业规范前行。
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/Administration.png">
</div>
<div class="text">
<div>行政部（风险稽核部）</div>
<p>
公司的大管家。用巨大的爱，做细小的事。规矩是我们的准绳，内秀的我们是企业战略执行的守护者，是业务部门的重要合作伙伴
</p>
</div>
</li>
</ul>
</div>
<div class="carousel-item video_box">
<ul>
<li>
<div class="images">
<img src="./images/Train.png">
</div>
<div class="text">
<div>培训中心</div>
<p>
博学、书香是我们的名片，美貌、俊朗是我们的标签。我们是灵魂导师，成功路上的引路人， 我们是千家教师天团，精英孵化中心的缔造者。
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/warrant.png">
</div>
<div class="text">
<div>权证部</div>
<p>
后期保障专家。15年专业团队,严谨的作风，顾问式的服务，用品质让客户安心，拥有一站式网落签约资格，让每一笔贷款安全无忧，让交易更简单，让家更温暖。
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/Legal.png">
</div>
<div class="text">
<div>法务部</div>
<p>
公司最权威的发言者。刚健中正的我们以法律的视角规避交易风险，捍卫权益者应有的合法利益。我们字字珠玑，锱铢必较，我们一直在竭力完善安全交易防火墙。
</p>
</div>
</li>
</ul>
</div>
<div class="carousel-item video_box">
<ul>
<li>
<div class="images">
<img src="./images/Finance.png">
</div>
<div class="text">
<div>财务部</div>
<p>
我们是管钱的。我们正直，沉稳而充满活力。财务管理分析是我们的爱好，我们对数字迷恋万分，资深财务导师指导我们严谨的打理公司财务，我们的身份就是财务大管家。
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/Propaganda.png">
</div>
<div class="text">
<div>宣传部</div>
<p>
一帮充满梦想，搞创作的文艺青年。这里，有趣的灵魂，好看的皮囊，我们都有。优秀的我们，为千家文化的发扬光大，为行业的正名而沉醉。
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/network.png">
</div>
<div class="text">
<div>科技研发部</div>
<p>
在这里有一群热爱技术、乐于创造的 GEEK（对电脑痴迷的人）！哼着小曲敲代码，喝着咖啡 DEBUG(排除程序故障)，热爱千家MIS·至哲研发，偶尔写写微信小程序，一言不合自己搭服务器跑算法。最先进的互联技术，最一流的研发和测试设备，用科技解放生产力，让你的创意变成现实！
</p>
</div>
</li>
</ul>
</div>
<div class="carousel-item video_box">
<ul>
<li>
<div class="images">
<img src="./images/market.png">
</div>
<div class="text">
<div>市场部</div>
<p>
资源整合专家。我们洞察市场风云变化，拓展市场新资源，我们还致力于通过规范业务行为，引领行业服务品质新高度，我们是行业前行的探路者.
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/Human.png">
</div>
<div class="text">
<div>人力资本部</div>
<p>
千家的猎头组织。一个明明可以靠颜值，却硬是靠才华吃饭的部门，为社会创造更多的高端就业机会。我们为行业募选最优秀的精英，只寻找最真的你,。
</p>
</div>
</li>
<li>
<div class="images">
<img src="./images/region.png">
</div>
<div class="text">
<div>置业部</div>
<p>
一群用青春去捍卫梦想的房地产经纪人，一个将屌丝变富帅的神奇部门。我们由一个职场小白，磨练成一个顶尖精英、蜕变成一个团队领导人，年入百万只需5年。我们持续壮大队伍，遍布全国，作为客户最坚实的后盾，我们在行业中循演着鲇鱼效应，推动着整个行业规范前行。
</p>
</div>
</li>
</ul>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<img src="./images/jianleft.png">
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<img src="./images/jianright.png">
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- 招贤纳士 --> <!-- 招贤纳士 -->
<div id="department" class="main_body"> <div id="department" class="main_body">
<div id="department_tel"> <div id="department_tel">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论