From 8cf8c4c7d9ddfd6f5c1571678fe8004abb75a127 Mon Sep 17 00:00:00 2001 From: chenbiao Date: Tue, 25 Sep 2018 11:51:20 +0800 Subject: [PATCH] 产品界面 add 硬件平台 以及icon --- css/portfollo.css | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ images/portfolio-hardware-wrap-1-active.png | Bin 0 -> 2272 bytes images/portfolio-hardware-wrap-1.png | Bin 0 -> 2649 bytes images/portfolio-hardware-wrap-2.png | Bin 0 -> 2511 bytes images/portfolio-hardware-wrap-3-active.png | Bin 0 -> 2065 bytes images/portfolio-hardware-wrap-3.png | Bin 0 -> 2337 bytes images/portfolio-hardware-wrap-4-active.png | Bin 0 -> 1528 bytes images/portfolio-hardware-wrap-4.png | Bin 0 -> 1803 bytes images/produect_dev1.png | Bin 0 -> 164630 bytes images/produect_dev2.png | Bin 0 -> 68237 bytes images/produect_dev3.png | Bin 0 -> 48794 bytes images/produect_dev4.png | Bin 0 -> 69895 bytes js/main.js | 5 ----- js/nav-footer.js | 2 +- js/portfollo.js | 12 ++++++++++++ portfolio.html | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 2 ++ 17 files changed, 225 insertions(+), 7 deletions(-) create mode 100644 css/portfollo.css create mode 100755 images/portfolio-hardware-wrap-1-active.png create mode 100755 images/portfolio-hardware-wrap-1.png create mode 100755 images/portfolio-hardware-wrap-2.png create mode 100755 images/portfolio-hardware-wrap-3-active.png create mode 100755 images/portfolio-hardware-wrap-3.png create mode 100755 images/portfolio-hardware-wrap-4-active.png create mode 100755 images/portfolio-hardware-wrap-4.png create mode 100755 images/produect_dev1.png create mode 100755 images/produect_dev2.png create mode 100755 images/produect_dev3.png create mode 100755 images/produect_dev4.png create mode 100644 js/portfollo.js 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 Binary files /dev/null and b/images/portfolio-hardware-wrap-1-active.png differ diff --git a/images/portfolio-hardware-wrap-1.png b/images/portfolio-hardware-wrap-1.png new file mode 100755 index 0000000..e132bb6 Binary files /dev/null and b/images/portfolio-hardware-wrap-1.png differ diff --git a/images/portfolio-hardware-wrap-2.png b/images/portfolio-hardware-wrap-2.png new file mode 100755 index 0000000..adb00d7 Binary files /dev/null and b/images/portfolio-hardware-wrap-2.png differ 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 Binary files /dev/null and b/images/portfolio-hardware-wrap-3-active.png differ diff --git a/images/portfolio-hardware-wrap-3.png b/images/portfolio-hardware-wrap-3.png new file mode 100755 index 0000000..9d70c27 Binary files /dev/null and b/images/portfolio-hardware-wrap-3.png differ 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 Binary files /dev/null and b/images/portfolio-hardware-wrap-4-active.png differ diff --git a/images/portfolio-hardware-wrap-4.png b/images/portfolio-hardware-wrap-4.png new file mode 100755 index 0000000..bacb8c2 Binary files /dev/null and b/images/portfolio-hardware-wrap-4.png differ diff --git a/images/produect_dev1.png b/images/produect_dev1.png new file mode 100755 index 0000000..78e183e Binary files /dev/null and b/images/produect_dev1.png differ diff --git a/images/produect_dev2.png b/images/produect_dev2.png new file mode 100755 index 0000000..c1c3386 Binary files /dev/null and b/images/produect_dev2.png differ diff --git a/images/produect_dev3.png b/images/produect_dev3.png new file mode 100755 index 0000000..7dece21 Binary files /dev/null and b/images/produect_dev3.png differ diff --git a/images/produect_dev4.png b/images/produect_dev4.png new file mode 100755 index 0000000..ff14b01 Binary files /dev/null and b/images/produect_dev4.png differ 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{ -- libgit2 0.21.4