diff --git a/about/about.html b/about/about.html new file mode 100644 index 0000000..f3762f5 --- /dev/null +++ b/about/about.html @@ -0,0 +1,320 @@ + + + + + + + + 苏州创新投资集团有限公司 + + + + + + + + + + + + + + + + + +
+
+
+ + +
+ + + + +
+
+ + + +
+
+ + +
+
+
+
+
协同创新
+
Collaborative innovation
+
+ +
+
+
+
+
要素资源
+
Element resources
+
+
+ +
+
+
+ +
+
+
强链补链
+
Strong chain complement
+
+
+
+
资本招商重大龙头项目落地苏州
+
+
+
+
+
引进创新
+
人才入驻
+
+
+
+
+
促进创新
+
项目落地
+
+
+
+
+
培育创新
+
企业成长
+
+
+
+
+
+
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/about/about03.html b/about/about03.html index c24325e..f3762f5 100644 --- a/about/about03.html +++ b/about/about03.html @@ -1,238 +1,320 @@ - - + + - - - - 苏州创新投资集团有限公司 - - - - - - - - - - - - - - - - + + + + 苏州创新投资集团有限公司 + + + + + + + + + + + + + - + -
- - - - - - -
- - -
-
-
-
-

核心能力

-

CORE COMPETENCE

-
-
-
- -
- - - - - - - -
- -
- - - - - -
-
-
-
- -

协同创新

-

COLLABORATIVE INNOVATION

-
-
-
-
-
- - -
-
-
-
- -

要素资源

-

ELEMENT RESOURCES

-
-
-
-
- -
-

科研机构

-

联合各研究机构、院所助力科技成果转化

-
-
-
- -
-

金融支持

-

以金融 “活水”灌溉产业创新集群

+ +
+ +
+ + -
- -
-

服务保障

-

赋能企业优化创新服务生态

+ +
  • + 党建工作 +
  • +
    -
    - -
    -

    科研机构

    -

    联合各研究机构、院所助力科技成果转化

    + +
  • + 投资申请 +
  • + +
    + + -
    -
    - - - -
    -
    -
    -
    - -

    强链补链

    -

    STRONG CHAIN COMPLEMENT

    -
    -
    -

    资本招商重大龙头项目落地苏州

    -

    引进创新
    人才入驻

    -

    促进创新
    项目落地

    -

    培育创新
    企业成长

    -
    - +
    +
    +
    +
    协同创新
    +
    Collaborative innovation
    +
    +
    -
    -
    - - - - - - - - - - - - \ No newline at end of file +
    +
    +
    +
    要素资源
    +
    Element resources
    +
    +
    + +
    +
    +
    + +
    +
    +
    强链补链
    +
    Strong chain complement
    +
    +
    +
    +
    资本招商重大龙头项目落地苏州
    +
    +
    +
    +
    +
    引进创新
    +
    人才入驻
    +
    +
    +
    +
    +
    促进创新
    +
    项目落地
    +
    +
    +
    +
    +
    培育创新
    +
    企业成长
    +
    +
    +
    +
    +
    +
    +
    + +
    + + + + + + + + + + + \ No newline at end of file diff --git a/css/about3.css b/css/about3.css new file mode 100644 index 0000000..6a15655 --- /dev/null +++ b/css/about3.css @@ -0,0 +1,396 @@ +body,html{ + margin:0;padding:0; +} +.section1 .topcontainer{ + width:100%; + margin-top:100px; + position: relative; +} +.section1 img{ + width:100%; +} +.selectItemContainer{ + display: flex; + align-items: center; + height: 74px; + background: rgba(2,7,14,0.5); + position: absolute; + bottom: 0; + width:100%; + z-index: 9; +} +.section1.active .selectedContainer{ + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-name: fadeInRight; + -moz-animation-name: fadeInRight; + -o-animation-name: fadeInRight; + animation-name: fadeInRight; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -moz-animation-timing-function: ease-in-out; + -o-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +.section1.active .selectItemContainer{ + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-name: fadeInUp; + -moz-animation-name: fadeInUp; + -o-animation-name: fadeInUp; + animation-name: fadeInUp; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -moz-animation-timing-function: ease-in-out; + -o-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +.section2.active .xietong,.section3.active .yaosu,.section4.active .yaosu{ + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-name: fadeInDown; + -moz-animation-name: fadeInDown; + -o-animation-name: fadeInDown; + animation-name: fadeInDown; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -moz-animation-timing-function: ease-in-out; + -o-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +.section2.active img,.section3.active .middleContent, .section4.active .contentContainer h5{ + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-name: fadeInUp; + -moz-animation-name: fadeInUp; + -o-animation-name: fadeInUp; + animation-name: fadeInUp; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -moz-animation-timing-function: ease-in-out; + -o-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +.section4.active .contentContainer .contentList{ + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-name: fadeInUp; + -moz-animation-name: fadeInUp; + -o-animation-name: fadeInUp; + animation-name: fadeInUp; + animation-delay: 0.5s; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + -o-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -moz-animation-timing-function: ease-in-out; + -o-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; +} +.selectItemContainer a,a:link, +a:visited, +a:hover, +a:active{ + color: #ffffff; + text-decoration: none; + height:100%; + flex:1; +} +.selected{ + background: #124AA0; +} +.selectItemContainer a:hover{ + background: #124AA0; +} +.selectItem{ + + text-align: center; + color: #ffffff; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.selectItem h5{ + font-size: 16px; + font-family: Microsoft YaHei; + font-weight: bold; + color: #FFFFFF; + padding:0 !important; + line-height:16px !important; + margin:0 !important +} +.selectItem>div{ + font-size: 10px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #FFFFFF; + margin-top:12px; +} +.line{ + width: 1px; + height: 30px; + background-color: #ffffff; +} +.selectedContainer{ + position: absolute; + top:0; + left:14%; + z-index: 9; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + left: 15%; +} +.selectedContainer .title{ + font-size: 48px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #FFFFFF; +} +.selectedContainer .subtitle{ + font-size: 36px; + font-family: Arial; + font-weight: 400; + color: #FFFFFF; +} +.section2{ + border:1px solid red; +} +.xietong{ + padding: 146px 0 102px 0; + text-align: center; +} +.section2 img{ + width:100%; +} +.xietong .devide{ + width: 80px; + height: 6px; + background: #E3E8EF; + margin: 0 auto; +} +.xietong .title{ + font-size: 48px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #124AA0; + margin:15px 0 10px 0; +} +.xietong .subtitle{ + font-size: 36px; + font-family: Arial; + font-weight: 400; + color: #124AA0; +} +.section3{ + background: url(../images/要素资源-bg@2x.png) center top no-repeat; +} + +.yaosu{ + text-align: center; +} +.yaosu .devide{ + width: 80px; + height: 6px; + background: #124AA0; + margin: 0 auto; +} +.yaosu .title{ + font-size: 48px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #124AA0; + margin:15px 0 10px 0; +} +.yaosu .subtitle{ + font-size: 36px; + font-family: Arial; + font-weight: 400; + color: #124AA0; +} +.middleContent{ + display: flex; + width:100%; + /* margin-top: 30px; */ + +} + +.middleContent .imgcontainer img{ + width:100%; + height:100%; +} +.middleContent .contenttitle{ + font-size: 30px; + font-family: Microsoft YaHei; + font-weight: bold; + color: #FFFFFF; + text-align: center; +} +.contentText{ + position: absolute; + top:50%; + width: 72%; + left: 14%; +} +.contentText p{ + margin:0; + padding:0; + font-size: 24px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #FFFFFF; +} +.category__item { + cursor: pointer; + border:2px solid transparent; + position: relative; +} +.category__item:hover .business-effect { + background: #134BA1; + -webkit-transition-delay: 0.5s; + -moz-transition-delay: 0.5s; + -o-transition-delay: 0.5s; + transition-delay: 0.5s; +} +.category__item:hover .business-effect .e-img-l { + left: 0; + -webkit-transition: all 0.5s; + -o-transition: all 0.5s; + -moz-transition: all 0.5s; + transition: all 0.5s; + } + .category__item:hover .business-effect .e-img-r { right: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } + .business-effect { + position: absolute; + top: 0; left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 2; +} +.category__item:hover a { + opacity: 1; + z-index:9999; + position: absolute; + top:50%; + transform: translateY(-50%); + left:50%; + transform: translateX(-50%); +} +.category__item .business-effect .e-img-l { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + -webkit-transition: all 0.5s; + -o-transition: all 0.5s; + -moz-transition: all 0.5s; + transition: all 0.5s; +} + + +.category__item .business-effect .e-img-l img { + display: block; + width: 100%; +} +.business-effect .e-img-r { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } +.business-effect .e-img-r img { display: block;height: 100%; width: 100%; } +.category__item>a { + opacity: 0; + display: block; + font-size: 16px; + color: #fff; + width: 118px; height: 38px; + line-height: 38px; + border: 1px solid #fff; + /* margin: 10% auto; */ + -webkit-transition: all 0.5s; + -o-transition: all 0.5s; + -moz-transition: all 0.5s; + transition: all 0.5s; + text-align: center; + position: absolute; +} +.middleContent .owl-nav{ + display: block !important; +} +.owl-prev{ + position: absolute; + right:-70px; + top:50% +} +.owl-next{ + position: absolute; + left:-60px; + top:50% +} +.section4{ + position: relative; +} +.section4 .bg{ + position: absolute; + top:3%; + left:50%; + transform: translateX(-50%); +} +.contentContainer{ + background: url('../images/qianglian.png'); + background-repeat: no-repeat; + padding: 80px 0 90px 0; + text-align: center; +} +.contentContainer h5{ + padding:0; + margin:0; + font-size: 36px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #FFFFFF; +} +.contentList{ + width:65%; + margin:0 auto; + margin-top: 70px; +} +.contentItem{ + width: 202px; + height: 202px; + background: rgba(18,74,160,0); + border: 2px solid #316DCB; + border-radius: 50%; + font-size: 24px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #FFFFFF; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/css/head.css b/css/head.css index aa39fce..0485fd1 100644 --- a/css/head.css +++ b/css/head.css @@ -13,6 +13,13 @@ border-bottom: 1px solid #ffffff; /*background: rgba(28, 35, 39, 0.8);*/ } +.fl { + float: left; +} + +.fr { + float: right; +} .header.animation .headerOut .fl { -webkit-animation-duration: 1.8s; -moz-animation-duration: 1.8s; @@ -267,6 +274,10 @@ .m_nav .ul li .dropdown_menu{ display: none; } +.mainactive a{ + color:#124AA0 !important; + font-weight: bold; +} .m_nav .ul li.dropdown.active .dropdown_menu{ display: block; } diff --git a/images/箭头-右@2x.png b/images/arrowleft.png similarity index 100% rename from images/箭头-右@2x.png rename to images/arrowleft.png diff --git a/images/箭头-左@2x.png b/images/arrowright.png similarity index 100% rename from images/箭头-左@2x.png rename to images/arrowright.png diff --git a/images/bg.png b/images/bg.png new file mode 100644 index 0000000..9c31a21 Binary files /dev/null and b/images/bg.png differ diff --git a/images/强链补链bg@2x.png b/images/qianglian.png similarity index 100% rename from images/强链补链bg@2x.png rename to images/qianglian.png diff --git a/images/协同创新@2x.png b/images/xietong.png similarity index 100% rename from images/协同创新@2x.png rename to images/xietong.png diff --git a/index.html b/index.html index 74fd936..7783c2d 100644 --- a/index.html +++ b/index.html @@ -20,9 +20,6 @@ diff --git a/js/about03.js b/js/about03.js new file mode 100644 index 0000000..7705859 --- /dev/null +++ b/js/about03.js @@ -0,0 +1,65 @@ + + //banner + $(function(){ + $('.brand__slider').owlCarousel({ + loop:true, + margin:30, + autoplay:false, + autoplayTimeout:3000, + smartSpeed:500, + items:3, + navText:['',''], + nav:true, + dots:false, + responsive:{ + 0:{ + items:1 + }, + 576:{ + items:2 + }, + 767:{ + items:3 + }, + } + }); + + //移动端展开nav + $('#navToggle').on('click',function(){ + $('.m_nav').addClass('open'); + }) + //关闭nav + $('.m_nav .top .closed').on('click',function(){ + $('.m_nav').removeClass('open'); + }) + + //二级导航 移动端 + $(".m_nav .ul li").click(function() { + $(this).children("div.dropdown_menu").slideToggle('slow') + $(this).siblings('li').children('.dropdown_menu').slideUp('slow'); + }); + //全屏滚动 + $('#about_main').fullpage({ + 'navigation': true, + scrollBar: false, + slidesNavigation: true, + css3: true, + controlArrows: false, + continuousHorizontal:true, + scrollingSpeed:500, + showActiveTooltip :true, + anchors: ['hero', 'one', 'two', 'three','four','five'], + loopHorizontal: true, + afterLoad: function(anchorLink, index){ + console.log(index) + $('header').addClass('on').addClass("animation"); + }, + afterSlideLoad:function(){ + }, + afterRender: function(){ + }, + onLeave: function(index, direction){ + $(".header").removeClass("animation"); + } + }) + }) \ No newline at end of file