Commit cf6ed1ece6956f3a8a7d7e1294a3f0fef9320e82
1 parent
d5252bf8
软件平台
Showing
8 changed files
with
155 additions
and
19 deletions
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{ |