Commit cf6ed1ece6956f3a8a7d7e1294a3f0fef9320e82

Authored by liuqimichale
1 parent d5252bf8

软件平台

images/portfolio-soft-wrap-1-active.png 0 → 100755

2.45 KB

images/portfolio-soft-wrap-1.png 0 → 100755

2.95 KB

images/portfolio-soft-wrap-2-active.png 0 → 100755

1.87 KB

images/portfolio-soft-wrap-2.png 0 → 100755

2.24 KB

images/portfolio-soft-wrap-3-active.png 0 → 100755

2.04 KB

images/portfolio-soft-wrap-3.png 0 → 100755

2.43 KB

portfolio.html
@@ -66,27 +66,79 @@ @@ -66,27 +66,79 @@
66 </div> 66 </div>
67 <!--/ End breadcrumb --> 67 <!--/ End breadcrumb -->
68 68
69 - <!-- Latest Works Area -->  
70 - <section id="portfolio-soft" class="section"> 69 + <section id="portfolio-soft-top" class="section">
71 <div class="container"> 70 <div class="container">
72 <div class="row"> 71 <div class="row">
73 - <div class="col-md-12">  
74 - <div class="section-title">  
75 - <h2>硬件设备</h2>  
76 - <ul>  
77 - <li class="text-center">  
78 - 任你停  
79 - </li>  
80 - <li class="text-center">  
81 - 企业云平台  
82 - </li>  
83 - <li class="text-center">  
84 - 数据分析平台  
85 - </li>  
86 - </ul>  
87 - </div>  
88 - </div> 72 + <div class="section-title-name">软件平台</div>
  73 + <ul class="portfolio-soft-wrap">
  74 + <li class="text-center col-md-4 active">
  75 + 任你停
  76 + </li>
  77 + <li class="text-center col-md-4">
  78 + 企业云平台
  79 + </li>
  80 + <li class="text-center col-md-4">
  81 + 数据分析平台
  82 + </li>
  83 + </ul>
89 </div> 84 </div>
  85 + </div>
  86 + </section>
  87 + <ul class="portfolio-section-wrap">
  88 + <li class="">
  89 + <section>
  90 + <div class="container">
  91 + <ul class="row ortfolio-soft-bottom-1">
  92 + <li class="text-center col-md-6">
  93 + 1
  94 + </li>
  95 + <li class="text-center col-md-6">
  96 + 2
  97 + </li>
  98 +
  99 + </ul>
  100 + </div>
  101 + </section>
  102 + </li>
  103 + <li class="displaynone">
  104 + <section>
  105 + <div class="container">
  106 + <ul class="row ortfolio-soft-bottom-2">
  107 + <li class="text-center col-md-6">
  108 + 1
  109 + </li>
  110 + <li class="text-center col-md-6">
  111 + 2
  112 + </li>
  113 +
  114 + </ul>
  115 + </div>
  116 + </section>
  117 + </li>
  118 + <li class="displaynone">
  119 + <section>
  120 + <div class="container">
  121 + <ul class="row ortfolio-soft-bottom-3">
  122 + <li class="text-center col-md-6">
  123 + 1
  124 + </li>
  125 + <li class="text-center col-md-6">
  126 + 2
  127 + </li>
  128 +
  129 + </ul>
  130 + </div>
  131 + </section>
  132 + </li>
  133 + </ul>
  134 +
  135 +
  136 +
  137 +
  138 + <!-- Latest Works Area -->
  139 + <section id="" class="section">
  140 + <div class="container">
  141 +
90 <div class="row"> 142 <div class="row">
91 143
92 <div class="col-md-6 col-sm-12 col-xs-12 wow fadeInLeft " data-wow-duration="0.8s" data-wow-delay="0.9s"> 144 <div class="col-md-6 col-sm-12 col-xs-12 wow fadeInLeft " data-wow-duration="0.8s" data-wow-delay="0.9s">
style.css
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 padding:0; 4 padding:0;
5 } 5 }
6 .section{ 6 .section{
7 - padding:162px 0 19px 0; 7 + padding:162px 0 0 0;
8 } 8 }
9 html,body { 9 html,body {
10 height: 100%; 10 height: 100%;
@@ -118,6 +118,90 @@ a:hover{ @@ -118,6 +118,90 @@ a:hover{
118 color: #fff; 118 color: #fff;
119 font-size: 71px; 119 font-size: 71px;
120 } 120 }
  121 +#portfolio-soft-top{
  122 + background: #fff;
  123 +}
  124 +.section-title-name{
  125 + font-size: 36px;
  126 + font-weight: 500;
  127 + text-transform: uppercase;
  128 + padding-bottom: 15px;
  129 + margin-bottom: 15px;
  130 + position: relative;
  131 + text-align: center;
  132 + margin-bottom: 40px;
  133 +}
  134 +
  135 +.portfolio-soft-wrap li{
  136 + color:rgba(6,14,19,.8);
  137 + font-size: 20px;
  138 + cursor: pointer;
  139 +}
  140 +.portfolio-soft-wrap li:nth-of-type(1){
  141 + padding-top: 60px;
  142 + background: url("images/portfolio-soft-wrap-1.png") no-repeat center 0;
  143 +
  144 +}
  145 +.portfolio-soft-wrap li:nth-of-type(2){
  146 + padding-top: 60px;
  147 + background: url("images/portfolio-soft-wrap-2.png") no-repeat center 0;
  148 +
  149 +}
  150 +.portfolio-soft-wrap li:nth-of-type(3){
  151 + padding-top: 60px;
  152 + background: url("images/portfolio-soft-wrap-3.png") no-repeat center 0;
  153 +
  154 +}
  155 +.portfolio-soft-wrap li:nth-of-type(1).active{
  156 + color: #3F9FFE;
  157 + padding-bottom: 10px;
  158 + border-bottom: 3px solid rgba(63,159,254,1);
  159 + background: url("images/portfolio-soft-wrap-1-active.png") no-repeat center 0;
  160 +}
  161 +.portfolio-soft-wrap li:nth-of-type(2).active{
  162 + color: #3F9FFE;
  163 + padding-bottom: 10px;
  164 + border-bottom: 3px solid rgba(63,159,254,1);
  165 + background: url("images/portfolio-soft-wrap-2-active.png") no-repeat center 0;
  166 +}
  167 +.portfolio-soft-wrap li:nth-of-type(3).active{
  168 + color: #3F9FFE;
  169 + padding-bottom: 10px;
  170 + border-bottom: 3px solid rgba(63,159,254,1);
  171 + background: url("images/portfolio-soft-wrap-3-active.png") no-repeat center 0;
  172 +}
  173 +
  174 +.portfolio-section-wrap{
  175 + height: 596px;
  176 + overflow: hidden;
  177 +}
  178 +.portfolio-section-wrap>li{
  179 + height: 596px;
  180 +}
  181 +.portfolio-section-wrap>li li{
  182 + height: 596px;
  183 +}
  184 +.displaynone{
  185 + display: none;
  186 +}
  187 +.ortfolio-soft-bottom-1 li:nth-of-type(1){
  188 + background: #ffff00;
  189 +}
  190 +.ortfolio-soft-bottom-1 li:nth-of-type(2){
  191 +
  192 +}
  193 +.ortfolio-soft-bottom-2 li:nth-of-type(1){
  194 + background: #f00;
  195 +}
  196 +.ortfolio-soft-bottom-2 li:nth-of-type(2){
  197 +
  198 +}
  199 +.ortfolio-soft-bottom-3 li:nth-of-type(1){
  200 + background: #f0f;
  201 +}
  202 +.ortfolio-soft-bottom-3 li:nth-of-type(2){
  203 +
  204 +}
121 205
122 206
123 .slicknav_menu{ 207 .slicknav_menu{