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 | 121 | .portfolio-hardware-top{ |
| 3 | 122 | background: #fff; |
| 4 | 123 | padding-top: 101px !important; |
| ... | ... | @@ -8,6 +127,7 @@ |
| 8 | 127 | color:rgba(6,14,19,.8); |
| 9 | 128 | font-size: 20px; |
| 10 | 129 | cursor: pointer; |
| 130 | + position: relative; | |
| 11 | 131 | } |
| 12 | 132 | .portfolio-hardware-wrap li:nth-of-type(1){ |
| 13 | 133 | padding-top: 60px; |
| ... | ... | @@ -32,26 +152,26 @@ |
| 32 | 152 | .portfolio-hardware-wrap li:nth-of-type(1).active{ |
| 33 | 153 | color: #3F9FFE; |
| 34 | 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 | 156 | background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0; |
| 37 | 157 | } |
| 38 | 158 | .portfolio-hardware-wrap li:nth-of-type(2).active{ |
| 39 | 159 | color: #3F9FFE; |
| 40 | 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 | 162 | background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0; |
| 43 | 163 | /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/ |
| 44 | 164 | } |
| 45 | 165 | .portfolio-hardware-wrap li:nth-of-type(3).active{ |
| 46 | 166 | color: #3F9FFE; |
| 47 | 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 | 169 | background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0; |
| 50 | 170 | } |
| 51 | 171 | .portfolio-hardware-wrap li:nth-of-type(4).active{ |
| 52 | 172 | color: #3F9FFE; |
| 53 | 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 | 175 | background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0; |
| 56 | 176 | } |
| 57 | 177 | ... | ... |
js/portfollo.js
| 1 | 1 | //软件 |
| 2 | 2 | $('#portfolio-soft-wrap li').on('click',function () { |
| 3 | 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 | 10 | $('#portfolio-hardware-wrap li').on('click',function () { |
| 9 | 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 | 78 | <ul class="portfolio-soft-wrap" id="portfolio-soft-wrap"> |
| 79 | 79 | <li class="text-center col-md-4 active"> |
| 80 | 80 | 任你停 |
| 81 | + <div class="ai-success-stories-list-bar"></div> | |
| 81 | 82 | </li> |
| 82 | 83 | <li class="text-center col-md-4"> |
| 83 | 84 | 企业云平台 |
| 85 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 84 | 86 | </li> |
| 85 | 87 | <li class="text-center col-md-4"> |
| 86 | 88 | 数据分析平台 |
| 89 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 87 | 90 | </li> |
| 88 | 91 | </ul> |
| 89 | 92 | </div> |
| ... | ... | @@ -178,15 +181,19 @@ |
| 178 | 181 | <ul class="portfolio-hardware-wrap" id="portfolio-hardware-wrap"> |
| 179 | 182 | <li class="text-center col-md-3 active"> |
| 180 | 183 | 封闭式设备 |
| 184 | + <div class="ai-success-stories-list-bar"></div> | |
| 181 | 185 | </li> |
| 182 | 186 | <li class="text-center col-md-3"> |
| 183 | 187 | 开放式设备 |
| 188 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 184 | 189 | </li> |
| 185 | 190 | <li class="text-center col-md-3"> |
| 186 | 191 | 场内引导设备 |
| 192 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 187 | 193 | </li> |
| 188 | 194 | <li class="text-center col-md-3"> |
| 189 | 195 | 停车诱导设备 |
| 196 | + <div class="ai-success-stories-list-bar displaynone"></div> | |
| 190 | 197 | </li> |
| 191 | 198 | |
| 192 | 199 | </ul> | ... | ... |
style.css
| ... | ... | @@ -104,24 +104,7 @@ a:hover{ |
| 104 | 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 | 108 | .section-title-name{ |
| 126 | 109 | font-size: 36px; |
| 127 | 110 | font-weight: 500; |
| ... | ... | @@ -132,109 +115,10 @@ a:hover{ |
| 132 | 115 | text-align: center; |
| 133 | 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 | 118 | .displaynone{ |
| 184 | 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 | 122 | .slicknav_menu{ |
| 239 | 123 | display:none; |
| 240 | 124 | } |
| ... | ... | @@ -2616,6 +2500,7 @@ a:hover{ |
| 2616 | 2500 | background:rgba(63,159,254,1); |
| 2617 | 2501 | position:absolute; |
| 2618 | 2502 | bottom: 0; |
| 2503 | + left: 0; | |
| 2619 | 2504 | animation:myfirst 0.3s; |
| 2620 | 2505 | -moz-animation:myfirst 0.3s; /* Firefox */ |
| 2621 | 2506 | -webkit-animation:myfirst 0.3s; /* Safari and Chrome */ | ... | ... |