diff --git a/css/portfollo.css b/css/portfollo.css new file mode 100644 index 0000000..2bdcaff --- /dev/null +++ b/css/portfollo.css @@ -0,0 +1,113 @@ + +.portfolio-hardware-top{ + background: #fff; + padding-top: 101px !important; +} + +.portfolio-hardware-wrap li{ + color:rgba(6,14,19,.8); + font-size: 20px; + cursor: pointer; +} +.portfolio-hardware-wrap li:nth-of-type(1){ + padding-top: 60px; + background: url("../images/portfolio-hardware-wrap-1.png") no-repeat center 0; + +} +.portfolio-hardware-wrap li:nth-of-type(2){ + padding-top: 60px; + background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0; + +} +.portfolio-hardware-wrap li:nth-of-type(3){ + padding-top: 60px; + background: url("../images/portfolio-hardware-wrap-3.png") no-repeat center 0; + +} +.portfolio-hardware-wrap li:nth-of-type(4){ + padding-top: 60px; + background: url("../images/portfolio-hardware-wrap-4.png") no-repeat center 0; + +} +.portfolio-hardware-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-hardware-wrap-1-active.png") no-repeat center 0; +} +.portfolio-hardware-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-hardware-wrap-2.png") no-repeat center 0; + /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/ +} +.portfolio-hardware-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-hardware-wrap-3-active.png") no-repeat center 0; +} +.portfolio-hardware-wrap li:nth-of-type(4).active{ + color: #3F9FFE; + padding-bottom: 10px; + border-bottom: 3px solid rgba(63,159,254,1); + background: url("../images/portfolio-hardware-wrap-4-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-hardware-bottom-1>li:nth-of-type(1){ + background: #ffff00; +} +.ortfolio-hardware-bottom-1 li:nth-of-type(2){ + padding-left: 100px; +} +.ortfolio-hardware-bottom-2 li:nth-of-type(1){ + background: #f00; +} +.ortfolio-hardware-bottom-2 li:nth-of-type(2){ + +} +.ortfolio-hardware-bottom-3 li:nth-of-type(1){ + background: #f0f; +} +.ortfolio-hardware-bottom-3 li:nth-of-type(2){ + +} +.ortfolio-hardware-bottom-title{ + font-size:30px; + font-weight:bold; + color:rgba(0,0,0,.8); + margin: 239px 0 27px; + text-align: left; +} +.ortfolio-hardware-bottom-des{ + font-size: 16px; + text-align: left; + color:rgba(0,0,0,.6); + padding-left: 20px; + position: relative; +} +.ortfolio-hardware-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%; +} \ No newline at end of file diff --git a/images/portfolio-hardware-wrap-1-active.png b/images/portfolio-hardware-wrap-1-active.png new file mode 100755 index 0000000..2c8639d --- /dev/null +++ b/images/portfolio-hardware-wrap-1-active.png diff --git a/images/portfolio-hardware-wrap-1.png b/images/portfolio-hardware-wrap-1.png new file mode 100755 index 0000000..e132bb6 --- /dev/null +++ b/images/portfolio-hardware-wrap-1.png diff --git a/images/portfolio-hardware-wrap-2.png b/images/portfolio-hardware-wrap-2.png new file mode 100755 index 0000000..adb00d7 --- /dev/null +++ b/images/portfolio-hardware-wrap-2.png diff --git a/images/portfolio-hardware-wrap-3-active.png b/images/portfolio-hardware-wrap-3-active.png new file mode 100755 index 0000000..64ab4ec --- /dev/null +++ b/images/portfolio-hardware-wrap-3-active.png diff --git a/images/portfolio-hardware-wrap-3.png b/images/portfolio-hardware-wrap-3.png new file mode 100755 index 0000000..9d70c27 --- /dev/null +++ b/images/portfolio-hardware-wrap-3.png diff --git a/images/portfolio-hardware-wrap-4-active.png b/images/portfolio-hardware-wrap-4-active.png new file mode 100755 index 0000000..6e621dc --- /dev/null +++ b/images/portfolio-hardware-wrap-4-active.png diff --git a/images/portfolio-hardware-wrap-4.png b/images/portfolio-hardware-wrap-4.png new file mode 100755 index 0000000..bacb8c2 --- /dev/null +++ b/images/portfolio-hardware-wrap-4.png diff --git a/images/produect_dev1.png b/images/produect_dev1.png new file mode 100755 index 0000000..78e183e --- /dev/null +++ b/images/produect_dev1.png diff --git a/images/produect_dev2.png b/images/produect_dev2.png new file mode 100755 index 0000000..c1c3386 --- /dev/null +++ b/images/produect_dev2.png diff --git a/images/produect_dev3.png b/images/produect_dev3.png new file mode 100755 index 0000000..7dece21 --- /dev/null +++ b/images/produect_dev3.png diff --git a/images/produect_dev4.png b/images/produect_dev4.png new file mode 100755 index 0000000..ff14b01 --- /dev/null +++ b/images/produect_dev4.png diff --git a/js/main.js b/js/main.js index b882eb6..955141d 100755 --- a/js/main.js +++ b/js/main.js @@ -198,8 +198,3 @@ }) - $('#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/js/nav-footer.js b/js/nav-footer.js index b2fd63d..d99edc4 100644 --- a/js/nav-footer.js +++ b/js/nav-footer.js @@ -58,7 +58,7 @@ var footHtmls='
' + '
联系我们
' + ' ' + '
' + diff --git a/js/portfollo.js b/js/portfollo.js new file mode 100644 index 0000000..859eced --- /dev/null +++ b/js/portfollo.js @@ -0,0 +1,12 @@ +//软件 +$('#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') +}) +//硬件 +$('#portfolio-hardware-wrap li').on('click',function () { + var _index = $(this).index(); + $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active') + $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') +}) diff --git a/portfolio.html b/portfolio.html index 397b859..4e730d5 100755 --- a/portfolio.html +++ b/portfolio.html @@ -27,6 +27,7 @@ + @@ -69,7 +70,7 @@ - +
@@ -145,9 +146,103 @@
+ + +
+
+
+
硬件平台
+
    +
  • + 封闭式设备 +
    • +
  • + 开放式设备 +
    • +
  • + 场内引导设备 +
    • +
  • + 停车诱导设备 +
    • + +
+
+
+
+ + @@ -178,5 +273,6 @@ + diff --git a/style.css b/style.css index b54c167..fbfcee6 100755 --- a/style.css +++ b/style.css @@ -18,6 +18,8 @@ body{ background:#F6F6F6; margin:0; padding:0; + min-width: 1200px !important; + height: 100%; } a,button{