diff --git a/images/portfolio-soft-wrap-1-active.png b/images/portfolio-soft-wrap-1-active.png new file mode 100755 index 0000000..1ca4659 --- /dev/null +++ b/images/portfolio-soft-wrap-1-active.png diff --git a/images/portfolio-soft-wrap-1.png b/images/portfolio-soft-wrap-1.png new file mode 100755 index 0000000..a3b2eb3 --- /dev/null +++ b/images/portfolio-soft-wrap-1.png diff --git a/images/portfolio-soft-wrap-2-active.png b/images/portfolio-soft-wrap-2-active.png new file mode 100755 index 0000000..01eb301 --- /dev/null +++ b/images/portfolio-soft-wrap-2-active.png diff --git a/images/portfolio-soft-wrap-2.png b/images/portfolio-soft-wrap-2.png new file mode 100755 index 0000000..94de1e5 --- /dev/null +++ b/images/portfolio-soft-wrap-2.png diff --git a/images/portfolio-soft-wrap-3-active.png b/images/portfolio-soft-wrap-3-active.png new file mode 100755 index 0000000..e33d311 --- /dev/null +++ b/images/portfolio-soft-wrap-3-active.png diff --git a/images/portfolio-soft-wrap-3.png b/images/portfolio-soft-wrap-3.png new file mode 100755 index 0000000..8f014ab --- /dev/null +++ b/images/portfolio-soft-wrap-3.png diff --git a/js/main.js b/js/main.js index 955141d..b882eb6 100755 --- a/js/main.js +++ b/js/main.js @@ -198,3 +198,8 @@ }) + $('#portfolio-soft-wrap li').on('click',function () { + var _index = $(this).index(); + $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active') + $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') + }) diff --git a/portfolio.html b/portfolio.html index 6dce404..fca395e 100755 --- a/portfolio.html +++ b/portfolio.html @@ -1,146 +1,178 @@ - - - - 产品介绍 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
- 城市智慧停车综合解决方案领航者 -
-
-
-
-
- - - -
-
-
-
-
-

硬件设备

-
    -
  • - 任你停 -
    • -
  • - 企业云平台 -
    • -
  • - 数据分析平台 -
    • -
-
-
-
-
- -
-
-
    -
  • 高清智能芯片、车辆进出场车牌识别快、准、清。
    • -
  • 地磁、视频桩、PDA多级设备联动，路侧车辆入场实时通知。
    • -
  • 多级诱导系统 ,车位、路况信息精准、高清展示、为车主快速 ‘指路’。
    • -
  • 低照度、高防护、成像高清、违章抓拍系统让 违章停车 无所遁形
    • -
-
- -
-
-
- # -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + 产品介绍 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ 城市智慧停车综合解决方案领航者 +
+
+
+
+
+ + +
+
+
+
软件平台
+
    +
  • + 任你停 +
    • +
  • + 企业云平台 +
    • +
  • + 数据分析平台 +
    • +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css index 3553ef7..b5519c4 100755 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ padding:0; } .section{ - padding:162px 0 19px 0; + padding:162px 0 0 0; } html,body { height: 100%; @@ -118,8 +118,115 @@ a:hover{ color: #fff; font-size: 71px; } +#portfolio-soft-top{ + background: #fff; +} +.section-title-name{ + font-size: 36px; + font-weight: 500; + text-transform: uppercase; + padding-bottom: 15px; + margin-bottom: 15px; + position: relative; + text-align: center; + margin-bottom: 40px; +} + +.portfolio-soft-wrap li{ + color:rgba(6,14,19,.8); + font-size: 20px; + cursor: pointer; +} +.portfolio-soft-wrap li:nth-of-type(1){ + padding-top: 60px; + background: url("images/portfolio-soft-wrap-1.png") no-repeat center 0; + +} +.portfolio-soft-wrap li:nth-of-type(2){ + padding-top: 60px; + background: url("images/portfolio-soft-wrap-2.png") no-repeat center 0; + +} +.portfolio-soft-wrap li:nth-of-type(3){ + padding-top: 60px; + background: url("images/portfolio-soft-wrap-3.png") no-repeat center 0; + +} +.portfolio-soft-wrap li:nth-of-type(1).active{ + color: #3F9FFE; + padding-bottom: 10px; + border-bottom: 3px solid rgba(63,159,254,1); + background: url("images/portfolio-soft-wrap-1-active.png") no-repeat center 0; +} +.portfolio-soft-wrap li:nth-of-type(2).active{ + color: #3F9FFE; + padding-bottom: 10px; + border-bottom: 3px solid rgba(63,159,254,1); + background: url("images/portfolio-soft-wrap-2-active.png") no-repeat center 0; +} +.portfolio-soft-wrap li:nth-of-type(3).active{ + color: #3F9FFE; + padding-bottom: 10px; + border-bottom: 3px solid rgba(63,159,254,1); + background: url("images/portfolio-soft-wrap-3-active.png") no-repeat center 0; +} +.portfolio-section-wrap{ + height: 596px; + overflow: hidden; +} +.portfolio-section-wrap>li{ + height: 596px; +} +.portfolio-section-wrap>li li{ + height: 596px; +} +.displaynone{ + display: none; +} +.ortfolio-soft-bottom-1>li:nth-of-type(1){ + background: #ffff00; +} +.ortfolio-soft-bottom-1 li:nth-of-type(2){ + padding-left: 100px; +} +.ortfolio-soft-bottom-2 li:nth-of-type(1){ + background: #f00; +} +.ortfolio-soft-bottom-2 li:nth-of-type(2){ + +} +.ortfolio-soft-bottom-3 li:nth-of-type(1){ + background: #f0f; +} +.ortfolio-soft-bottom-3 li:nth-of-type(2){ +} +.ortfolio-soft-bottom-title{ + font-size:30px; + font-weight:bold; + color:rgba(0,0,0,.8); + margin: 239px 0 27px; + text-align: left; +} +.ortfolio-soft-bottom-des{ + font-size: 16px; + text-align: left; + color:rgba(0,0,0,.6); + padding-left: 20px; + position: relative; +} +.ortfolio-soft-bottom-des:before{ + position: absolute; + content: ''; + left: 0; + top:50%; + margin-top: -3px; + width:6px; + height:6px; + background:rgba(66,160,251,1); + border-radius:50%; +} .slicknav_menu{ display:none; }