Commit ca9bf13b by cy

开始service

parent 944bc9ca
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/libs/animate.css"> <link rel="stylesheet" href="css/libs/animate.css">
<link rel="stylesheet" href="css/featureSection.css"> <link rel="stylesheet" href="css/featureSection.css">
<link rel="stylesheet" href="css/serviceSection.css">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<!-- bxSlider CSS file --> <!-- bxSlider CSS file -->
...@@ -208,7 +209,7 @@ $(document).ready(function() { ...@@ -208,7 +209,7 @@ $(document).ready(function() {
<figure class="effect-ruby"> <figure class="effect-ruby">
<img src="images/2_03.png" alt="img15"/> <img src="images/2_03.png" alt="img15"/>
<figcaption> <figcaption>
<h2><i class="fa fa-paper-plane fa-2x"></i></h2> <h2><span class="glyphicon glyphicon-search" aria-hidden="true"></span></h2>
<h3><span>成熟框架</span></h3> <h3><span>成熟框架</span></h3>
<h3><p>采用成熟的protobuf数据存储格式和gRPC通信框架,轻便快捷,可扩张能力强不受语音限制</p></h3> <h3><p>采用成熟的protobuf数据存储格式和gRPC通信框架,轻便快捷,可扩张能力强不受语音限制</p></h3>
<p class="checkDetail"><span class="plink">查看详情</span></p> <p class="checkDetail"><span class="plink">查看详情</span></p>
...@@ -272,19 +273,20 @@ $(document).ready(function() { ...@@ -272,19 +273,20 @@ $(document).ready(function() {
<section class="posts"> <section class="posts">
<% var count = 0 %> <% var count = 0 %>
<% site.pages.each(function (post) { %> <% site.pages.each(function (post) { %>
<% if (post.categories == "news") { %></p> <% if (post.categories == "news") { %>
<% count += 1%> <% count += 1%>
<div class="article" style="display:none"> <div class="article" style="display:none">
<div class="article-title row">
<div class="article-title"><h3><%- post.title %></h3><h5><%- date(post.date, "YYYY-MM-DD") %></h5><h5><%- count %></h5></div> <div class="article-title-left">
<div class="article-content"> <a class="article-readmore" href="<%- url_for(post.path) %>"><%- post.title %></a>
<%- post.excerpt %> </div>
</div> <div>
<a class="article-readmore" href="<%- url_for(post.path) %>">查看详情</a> <p><%- date(post.date, "YYYY-MM-DD") %></p>
</div>
<!-- <div class="post-meta"> </div>
<span class="post-time"><%- date(post.date, "YYYY-MM-DD") %></span> <div class="article-content">
</div> --> <%- post.excerpt %>
</div>
</div> </div>
<% } }) %> <% } }) %>
......
...@@ -175,10 +175,10 @@ ...@@ -175,10 +175,10 @@
.common_section .article{ .common_section .article{
margin: 30px; margin: 0;
padding:0 0 20px 0; padding:0;
background:#fff; background:#fff;
border:1px solid #e7e7e7; border-bottom :2px dashed #e7e7e7;
font-family: 'open_sansregular'; font-family: 'open_sansregular';
font-size:20px; font-size:20px;
color:#333; color:#333;
...@@ -199,6 +199,11 @@ ...@@ -199,6 +199,11 @@
border-bottom: 0.5px solid #333; border-bottom: 0.5px solid #333;
} }
.article .article-title .article-title-left{
float: left;
width: 80%;
}
.article .article-content{ .article .article-content{
margin: 20px; margin: 20px;
font-size: 16px; font-size: 16px;
......
.service_grid {
box-sizing: border-box;
overflow: hidden;
margin: 0;
width: 100%;
list-style: none;
text-align: center;
background-color: #fff;
}
/* Common style */
.service_grid figure {
box-sizing: border-box;
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: 1px;
/*background: #3085a3;*/
background: #3085a3;
text-align: center;
cursor: pointer;
width: 33%;
}
.service_grid figure img {
box-sizing: border-box;
position: relative;
display: block;
width: 100%;
/* min-height: 100%;*/
opacity: 1;
}
.service_grid figure figcaption {
box-sizing: border-box;
padding: 2em;
color: #fff;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.service_grid figure figcaption::before,
.service_grid figure figcaption::after {
box-sizing: border-box;
pointer-events: none;
}
.service_grid figure figcaption{
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.service_grid figure h2 {
box-sizing: border-box;
word-spacing: -0.15em;
font-weight: 10;
}
.service_grid figure h4 {
margin: 0;
}
.service_grid figure h2 span {
box-sizing: border-box;
font-weight: 100;
}
.service_grid figure h3 {
box-sizing: border-box;
word-spacing: -0.15em;
font-weight: 50;
}
.service_grid figure h3 span {
box-sizing: border-box;
font-weight: 400;
font-size: 1.75em;
}
.service_grid figure h4 span {
box-sizing: border-box;
font-weight: 200;
font-size: 1.25em;
}
.service_grid figure a{
text-decoration: none;
color:#fff;
}
.service_grid figure a:hover{
text-decoration: underline;
color:#fff;
}
.service_grid figure h2,
.service_grid figure h3,
.service_grid figure p {
margin: 0;
letter-spacing: 1px;
}
/* Individual effects */
/*---------------*/
/***** Ruby *****/
/*---------------*/
figure.effect-ruby2 {
background-color: #000;
}
figure.effect-ruby2 img {
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
figure.effect-ruby2:hover img {
opacity: 0.5;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
figure.effect-ruby2 h2 {
margin-top: 5%;
padding-bottom: 10px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-ruby2:hover h2 {
-webkit-transform: translate3d(0,-130px,0);
transform: translate3d(0,-130px,0);
}
figure.effect-ruby2 h3 {
padding-bottom: 10px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-ruby2:hover h3 {
-webkit-transform: translate3d(0,-80px,0);
transform: translate3d(0,-80px,0);
}
figure.effect-ruby2 h4 {
padding-bottom: 10px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-ruby2:hover h4 {
-webkit-transform: translate3d(0,-80px,0);
transform: translate3d(0,-80px,0);
}
figure.effect-ruby2 p {
margin: 40px 0 80px 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0px,0) scale(1.1);
transform: translate3d(0,0px,0) scale(1.1);
}
figure.effect-ruby2:hover p {
opacity: 1;
-webkit-transform: translate3d(0,-20px,0) scale(1);
transform: translate3d(0,-20px,0) scale(1);
}
.plink{
margin: 30px;
padding: 5px 20px 5px 20px;
border: 1px solid #ffffff;
border-radius: 3px;
}
.service_grid figure figcaption img{
margin: 0 auto;
width: 60px;
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论