Commit f238684127c9ce6bb5b64fdd1af5f28a45029c52
1 parent
4dddca46
产品页 add css3
Showing
4 changed files
with
141 additions
and
125 deletions
css/portfollo.css
| 1 | +/*breadcrumb*/ | ||
| 2 | +.breadcrumb{ | ||
| 3 | + width: 100%; | ||
| 4 | + height: 682px; | ||
| 5 | + background:url('../images/breadcrumb-bg.png'); | ||
| 6 | + background-size:100% 100%; | ||
| 7 | + background-repeat:no-repeat; | ||
| 1 | 8 | ||
| 9 | +} | ||
| 10 | +.breadcrumb-text{ | ||
| 11 | + text-align: center; | ||
| 12 | + padding-top: 300px; | ||
| 13 | + color: #fff; | ||
| 14 | + font-size: 71px; | ||
| 15 | +} | ||
| 16 | +#portfolio-soft-top{ | ||
| 17 | + background: #fff; | ||
| 18 | +} | ||
| 19 | +/*软件sta-----*/ | ||
| 20 | +.portfolio-soft-wrap li{ | ||
| 21 | + color:rgba(6,14,19,.8); | ||
| 22 | + font-size: 20px; | ||
| 23 | + cursor: pointer; | ||
| 24 | + position: relative; | ||
| 25 | +} | ||
| 26 | +.portfolio-soft-wrap li:nth-of-type(1){ | ||
| 27 | + padding-top: 60px; | ||
| 28 | + background: url("../images/portfolio-soft-wrap-1.png") no-repeat center 0; | ||
| 29 | + | ||
| 30 | +} | ||
| 31 | +.portfolio-soft-wrap li:nth-of-type(2){ | ||
| 32 | + padding-top: 60px; | ||
| 33 | + background: url("../images/portfolio-soft-wrap-2.png") no-repeat center 0; | ||
| 34 | + | ||
| 35 | +} | ||
| 36 | +.portfolio-soft-wrap li:nth-of-type(3){ | ||
| 37 | + padding-top: 60px; | ||
| 38 | + background: url("../images/portfolio-soft-wrap-3.png") no-repeat center 0; | ||
| 39 | + | ||
| 40 | +} | ||
| 41 | +.portfolio-soft-wrap li:nth-of-type(1).active{ | ||
| 42 | + color: #3F9FFE; | ||
| 43 | + padding-bottom: 10px; | ||
| 44 | + /*border-bottom: 3px solid rgba(63,159,254,1);*/ | ||
| 45 | + background: url("../images/portfolio-soft-wrap-1-active.png") no-repeat center 0; | ||
| 46 | +} | ||
| 47 | +.portfolio-soft-wrap li:nth-of-type(2).active{ | ||
| 48 | + color: #3F9FFE; | ||
| 49 | + padding-bottom: 10px; | ||
| 50 | + /*border-bottom: 3px solid rgba(63,159,254,1);*/ | ||
| 51 | + background: url("../images/portfolio-soft-wrap-2-active.png") no-repeat center 0; | ||
| 52 | +} | ||
| 53 | +.portfolio-soft-wrap li:nth-of-type(3).active{ | ||
| 54 | + color: #3F9FFE; | ||
| 55 | + padding-bottom: 10px; | ||
| 56 | + /*border-bottom: 3px solid rgba(63,159,254,1);*/ | ||
| 57 | + background: url("../images/portfolio-soft-wrap-3-active.png") no-repeat center 0; | ||
| 58 | +} | ||
| 59 | + | ||
| 60 | +.portfolio-section-wrap{ | ||
| 61 | + min-height: 596px; | ||
| 62 | +} | ||
| 63 | +.portfolio-section-wrap>li{ | ||
| 64 | +} | ||
| 65 | +.portfolio-section-wrap>li li{ | ||
| 66 | + height: 596px; | ||
| 67 | +} | ||
| 68 | +.ortfolio-soft-bottom-1>li:nth-of-type(1){ | ||
| 69 | + background: url("../images/ortfolio-soft-mobile.gif") no-repeat center center; | ||
| 70 | + background-size: 100% 80%; | ||
| 71 | +} | ||
| 72 | +.ortfolio-soft-bottom-1 li:nth-of-type(2){ | ||
| 73 | + padding-left: 100px; | ||
| 74 | +} | ||
| 75 | +.ortfolio-soft-bottom-2 li:nth-of-type(1){ | ||
| 76 | + background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center; | ||
| 77 | + background-size: 100% 70%; | ||
| 78 | +} | ||
| 79 | +.ortfolio-soft-bottom-2 li:nth-of-type(2){ | ||
| 80 | + padding-left:100px; | ||
| 81 | +} | ||
| 82 | +.ortfolio-soft-bottom-3 li:nth-of-type(1){ | ||
| 83 | + background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center; | ||
| 84 | + background-size: 100% 70%; | ||
| 85 | +} | ||
| 86 | +.ortfolio-soft-bottom-3 li:nth-of-type(2){ | ||
| 87 | + padding-left:100px; | ||
| 88 | +} | ||
| 89 | +.ortfolio-soft-bottom-title{ | ||
| 90 | + font-size:30px; | ||
| 91 | + font-weight:bold; | ||
| 92 | + color:rgba(0,0,0,.8); | ||
| 93 | + margin: 239px 0 27px; | ||
| 94 | + text-align: left; | ||
| 95 | +} | ||
| 96 | +.ortfolio-soft-bottom-des{ | ||
| 97 | + font-size: 16px; | ||
| 98 | + text-align: left; | ||
| 99 | + color:rgba(0,0,0,.6); | ||
| 100 | + padding-left: 20px; | ||
| 101 | + position: relative; | ||
| 102 | +} | ||
| 103 | +.ortfolio-soft-bottom-des span{ | ||
| 104 | + width:6px; | ||
| 105 | + height:6px; | ||
| 106 | + display: inline-block; | ||
| 107 | + position: relative; | ||
| 108 | +} | ||
| 109 | +.ortfolio-soft-bottom-des span:before{ | ||
| 110 | + position: absolute; | ||
| 111 | + content: ''; | ||
| 112 | + left: -10px; | ||
| 113 | + top:50%; | ||
| 114 | + margin-top: -6px; | ||
| 115 | + width:6px; | ||
| 116 | + height:6px; | ||
| 117 | + background:rgba(66,160,251,1); | ||
| 118 | + border-radius:50%; | ||
| 119 | +} | ||
| 120 | +/*硬件sta-----*/ | ||
| 2 | .portfolio-hardware-top{ | 121 | .portfolio-hardware-top{ |
| 3 | background: #fff; | 122 | background: #fff; |
| 4 | padding-top: 101px !important; | 123 | padding-top: 101px !important; |
| @@ -8,6 +127,7 @@ | @@ -8,6 +127,7 @@ | ||
| 8 | color:rgba(6,14,19,.8); | 127 | color:rgba(6,14,19,.8); |
| 9 | font-size: 20px; | 128 | font-size: 20px; |
| 10 | cursor: pointer; | 129 | cursor: pointer; |
| 130 | + position: relative; | ||
| 11 | } | 131 | } |
| 12 | .portfolio-hardware-wrap li:nth-of-type(1){ | 132 | .portfolio-hardware-wrap li:nth-of-type(1){ |
| 13 | padding-top: 60px; | 133 | padding-top: 60px; |
| @@ -32,26 +152,26 @@ | @@ -32,26 +152,26 @@ | ||
| 32 | .portfolio-hardware-wrap li:nth-of-type(1).active{ | 152 | .portfolio-hardware-wrap li:nth-of-type(1).active{ |
| 33 | color: #3F9FFE; | 153 | color: #3F9FFE; |
| 34 | padding-bottom: 10px; | 154 | padding-bottom: 10px; |
| 35 | - border-bottom: 3px solid rgba(63,159,254,1); | 155 | + /*border-bottom: 3px solid rgba(63,159,254,1);*/ |
| 36 | background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0; | 156 | background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0; |
| 37 | } | 157 | } |
| 38 | .portfolio-hardware-wrap li:nth-of-type(2).active{ | 158 | .portfolio-hardware-wrap li:nth-of-type(2).active{ |
| 39 | color: #3F9FFE; | 159 | color: #3F9FFE; |
| 40 | padding-bottom: 10px; | 160 | padding-bottom: 10px; |
| 41 | - border-bottom: 3px solid rgba(63,159,254,1); | 161 | + /*border-bottom: 3px solid rgba(63,159,254,1);*/ |
| 42 | background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0; | 162 | background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0; |
| 43 | /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/ | 163 | /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/ |
| 44 | } | 164 | } |
| 45 | .portfolio-hardware-wrap li:nth-of-type(3).active{ | 165 | .portfolio-hardware-wrap li:nth-of-type(3).active{ |
| 46 | color: #3F9FFE; | 166 | color: #3F9FFE; |
| 47 | padding-bottom: 10px; | 167 | padding-bottom: 10px; |
| 48 | - border-bottom: 3px solid rgba(63,159,254,1); | 168 | + /*border-bottom: 3px solid rgba(63,159,254,1);*/ |
| 49 | background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0; | 169 | background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0; |
| 50 | } | 170 | } |
| 51 | .portfolio-hardware-wrap li:nth-of-type(4).active{ | 171 | .portfolio-hardware-wrap li:nth-of-type(4).active{ |
| 52 | color: #3F9FFE; | 172 | color: #3F9FFE; |
| 53 | padding-bottom: 10px; | 173 | padding-bottom: 10px; |
| 54 | - border-bottom: 3px solid rgba(63,159,254,1); | 174 | + /*border-bottom: 3px solid rgba(63,159,254,1);*/ |
| 55 | background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0; | 175 | background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0; |
| 56 | } | 176 | } |
| 57 | 177 |
js/portfollo.js
| 1 | //软件 | 1 | //软件 |
| 2 | $('#portfolio-soft-wrap li').on('click',function () { | 2 | $('#portfolio-soft-wrap li').on('click',function () { |
| 3 | var _index = $(this).index(); | 3 | var _index = $(this).index(); |
| 4 | - $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | ||
| 5 | - $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') | 4 | + $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); |
| 5 | + $('#portfolio-soft-wrap li').children('div').addClass('displaynone'); | ||
| 6 | + $('#portfolio-soft-wrap li').eq(_index).children('div').removeClass('displaynone'); | ||
| 7 | + $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); | ||
| 6 | }) | 8 | }) |
| 7 | //硬件 | 9 | //硬件 |
| 8 | $('#portfolio-hardware-wrap li').on('click',function () { | 10 | $('#portfolio-hardware-wrap li').on('click',function () { |
| 9 | var _index = $(this).index(); | 11 | var _index = $(this).index(); |
| 10 | - $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | ||
| 11 | - $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') | 12 | + $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); |
| 13 | + $('#portfolio-hardware-wrap li').children('div').addClass('displaynone'); | ||
| 14 | + $('#portfolio-hardware-wrap li').eq(_index).children('div').removeClass('displaynone'); | ||
| 15 | + $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); | ||
| 12 | }) | 16 | }) |
portfolio.html
| @@ -78,12 +78,15 @@ | @@ -78,12 +78,15 @@ | ||
| 78 | <ul class="portfolio-soft-wrap" id="portfolio-soft-wrap"> | 78 | <ul class="portfolio-soft-wrap" id="portfolio-soft-wrap"> |
| 79 | <li class="text-center col-md-4 active"> | 79 | <li class="text-center col-md-4 active"> |
| 80 | 任你停 | 80 | 任你停 |
| 81 | + <div class="ai-success-stories-list-bar"></div> | ||
| 81 | </li> | 82 | </li> |
| 82 | <li class="text-center col-md-4"> | 83 | <li class="text-center col-md-4"> |
| 83 | 企业云平台 | 84 | 企业云平台 |
| 85 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 84 | </li> | 86 | </li> |
| 85 | <li class="text-center col-md-4"> | 87 | <li class="text-center col-md-4"> |
| 86 | 数据分析平台 | 88 | 数据分析平台 |
| 89 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 87 | </li> | 90 | </li> |
| 88 | </ul> | 91 | </ul> |
| 89 | </div> | 92 | </div> |
| @@ -178,15 +181,19 @@ | @@ -178,15 +181,19 @@ | ||
| 178 | <ul class="portfolio-hardware-wrap" id="portfolio-hardware-wrap"> | 181 | <ul class="portfolio-hardware-wrap" id="portfolio-hardware-wrap"> |
| 179 | <li class="text-center col-md-3 active"> | 182 | <li class="text-center col-md-3 active"> |
| 180 | 封闭式设备 | 183 | 封闭式设备 |
| 184 | + <div class="ai-success-stories-list-bar"></div> | ||
| 181 | </li> | 185 | </li> |
| 182 | <li class="text-center col-md-3"> | 186 | <li class="text-center col-md-3"> |
| 183 | 开放式设备 | 187 | 开放式设备 |
| 188 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 184 | </li> | 189 | </li> |
| 185 | <li class="text-center col-md-3"> | 190 | <li class="text-center col-md-3"> |
| 186 | 场内引导设备 | 191 | 场内引导设备 |
| 192 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 187 | </li> | 193 | </li> |
| 188 | <li class="text-center col-md-3"> | 194 | <li class="text-center col-md-3"> |
| 189 | 停车诱导设备 | 195 | 停车诱导设备 |
| 196 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 190 | </li> | 197 | </li> |
| 191 | 198 | ||
| 192 | </ul> | 199 | </ul> |
style.css
| @@ -104,24 +104,7 @@ a:hover{ | @@ -104,24 +104,7 @@ a:hover{ | ||
| 104 | .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} | 104 | .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} |
| 105 | 105 | ||
| 106 | 106 | ||
| 107 | -/*breadcrumb*/ | ||
| 108 | -.breadcrumb{ | ||
| 109 | - width: 100%; | ||
| 110 | - height: 682px; | ||
| 111 | - background:url('images/breadcrumb-bg.png'); | ||
| 112 | - background-size:100% 100%; | ||
| 113 | - background-repeat:no-repeat; | ||
| 114 | 107 | ||
| 115 | -} | ||
| 116 | -.breadcrumb-text{ | ||
| 117 | - text-align: center; | ||
| 118 | - padding-top: 300px; | ||
| 119 | - color: #fff; | ||
| 120 | - font-size: 71px; | ||
| 121 | -} | ||
| 122 | -#portfolio-soft-top{ | ||
| 123 | - background: #fff; | ||
| 124 | -} | ||
| 125 | .section-title-name{ | 108 | .section-title-name{ |
| 126 | font-size: 36px; | 109 | font-size: 36px; |
| 127 | font-weight: 500; | 110 | font-weight: 500; |
| @@ -132,109 +115,10 @@ a:hover{ | @@ -132,109 +115,10 @@ a:hover{ | ||
| 132 | text-align: center; | 115 | text-align: center; |
| 133 | margin-bottom: 40px; | 116 | margin-bottom: 40px; |
| 134 | } | 117 | } |
| 135 | - | ||
| 136 | -.portfolio-soft-wrap li{ | ||
| 137 | - color:rgba(6,14,19,.8); | ||
| 138 | - font-size: 20px; | ||
| 139 | - cursor: pointer; | ||
| 140 | -} | ||
| 141 | -.portfolio-soft-wrap li:nth-of-type(1){ | ||
| 142 | - padding-top: 60px; | ||
| 143 | - background: url("images/portfolio-soft-wrap-1.png") no-repeat center 0; | ||
| 144 | - | ||
| 145 | -} | ||
| 146 | -.portfolio-soft-wrap li:nth-of-type(2){ | ||
| 147 | - padding-top: 60px; | ||
| 148 | - background: url("images/portfolio-soft-wrap-2.png") no-repeat center 0; | ||
| 149 | - | ||
| 150 | -} | ||
| 151 | -.portfolio-soft-wrap li:nth-of-type(3){ | ||
| 152 | - padding-top: 60px; | ||
| 153 | - background: url("images/portfolio-soft-wrap-3.png") no-repeat center 0; | ||
| 154 | - | ||
| 155 | -} | ||
| 156 | -.portfolio-soft-wrap li:nth-of-type(1).active{ | ||
| 157 | - color: #3F9FFE; | ||
| 158 | - padding-bottom: 10px; | ||
| 159 | - border-bottom: 3px solid rgba(63,159,254,1); | ||
| 160 | - background: url("images/portfolio-soft-wrap-1-active.png") no-repeat center 0; | ||
| 161 | -} | ||
| 162 | -.portfolio-soft-wrap li:nth-of-type(2).active{ | ||
| 163 | - color: #3F9FFE; | ||
| 164 | - padding-bottom: 10px; | ||
| 165 | - border-bottom: 3px solid rgba(63,159,254,1); | ||
| 166 | - background: url("images/portfolio-soft-wrap-2-active.png") no-repeat center 0; | ||
| 167 | -} | ||
| 168 | -.portfolio-soft-wrap li:nth-of-type(3).active{ | ||
| 169 | - color: #3F9FFE; | ||
| 170 | - padding-bottom: 10px; | ||
| 171 | - border-bottom: 3px solid rgba(63,159,254,1); | ||
| 172 | - background: url("images/portfolio-soft-wrap-3-active.png") no-repeat center 0; | ||
| 173 | -} | ||
| 174 | - | ||
| 175 | -.portfolio-section-wrap{ | ||
| 176 | - min-height: 596px; | ||
| 177 | -} | ||
| 178 | -.portfolio-section-wrap>li{ | ||
| 179 | -} | ||
| 180 | -.portfolio-section-wrap>li li{ | ||
| 181 | - height: 596px; | ||
| 182 | -} | ||
| 183 | .displaynone{ | 118 | .displaynone{ |
| 184 | display: none; | 119 | display: none; |
| 185 | } | 120 | } |
| 186 | -.ortfolio-soft-bottom-1>li:nth-of-type(1){ | ||
| 187 | - background: url("images/ortfolio-soft-mobile.gif") no-repeat center center; | ||
| 188 | - background-size: 100% 80%; | ||
| 189 | -} | ||
| 190 | -.ortfolio-soft-bottom-1 li:nth-of-type(2){ | ||
| 191 | - padding-left: 100px; | ||
| 192 | -} | ||
| 193 | -.ortfolio-soft-bottom-2 li:nth-of-type(1){ | ||
| 194 | - background: url("images/ortfolio-soft-pc1.gif") no-repeat center center; | ||
| 195 | - background-size: 100% 70%; | ||
| 196 | -} | ||
| 197 | -.ortfolio-soft-bottom-2 li:nth-of-type(2){ | ||
| 198 | - padding-left:100px; | ||
| 199 | -} | ||
| 200 | -.ortfolio-soft-bottom-3 li:nth-of-type(1){ | ||
| 201 | - background: url("images/ortfolio-soft-pc2.gif") no-repeat center center; | ||
| 202 | - background-size: 100% 70%; | ||
| 203 | -} | ||
| 204 | -.ortfolio-soft-bottom-3 li:nth-of-type(2){ | ||
| 205 | - padding-left:100px; | ||
| 206 | -} | ||
| 207 | -.ortfolio-soft-bottom-title{ | ||
| 208 | - font-size:30px; | ||
| 209 | - font-weight:bold; | ||
| 210 | - color:rgba(0,0,0,.8); | ||
| 211 | - margin: 239px 0 27px; | ||
| 212 | - text-align: left; | ||
| 213 | -} | ||
| 214 | -.ortfolio-soft-bottom-des{ | ||
| 215 | - font-size: 16px; | ||
| 216 | - text-align: left; | ||
| 217 | - color:rgba(0,0,0,.6); | ||
| 218 | - padding-left: 20px; | ||
| 219 | - position: relative; | ||
| 220 | -} | ||
| 221 | -.ortfolio-soft-bottom-des span{ | ||
| 222 | - width:6px; | ||
| 223 | - height:6px; | ||
| 224 | - display: inline-block; | ||
| 225 | - position: relative; | ||
| 226 | -} | ||
| 227 | -.ortfolio-soft-bottom-des span:before{ | ||
| 228 | - position: absolute; | ||
| 229 | - content: ''; | ||
| 230 | - left: -10px; | ||
| 231 | - top:50%; | ||
| 232 | - margin-top: -6px; | ||
| 233 | - width:6px; | ||
| 234 | - height:6px; | ||
| 235 | - background:rgba(66,160,251,1); | ||
| 236 | - border-radius:50%; | ||
| 237 | -} | 121 | + |
| 238 | .slicknav_menu{ | 122 | .slicknav_menu{ |
| 239 | display:none; | 123 | display:none; |
| 240 | } | 124 | } |
| @@ -2616,6 +2500,7 @@ a:hover{ | @@ -2616,6 +2500,7 @@ a:hover{ | ||
| 2616 | background:rgba(63,159,254,1); | 2500 | background:rgba(63,159,254,1); |
| 2617 | position:absolute; | 2501 | position:absolute; |
| 2618 | bottom: 0; | 2502 | bottom: 0; |
| 2503 | + left: 0; | ||
| 2619 | animation:myfirst 0.3s; | 2504 | animation:myfirst 0.3s; |
| 2620 | -moz-animation:myfirst 0.3s; /* Firefox */ | 2505 | -moz-animation:myfirst 0.3s; /* Firefox */ |
| 2621 | -webkit-animation:myfirst 0.3s; /* Safari and Chrome */ | 2506 | -webkit-animation:myfirst 0.3s; /* Safari and Chrome */ |