Browse Source

关于公司页面

liting2017 7 years ago
parent
commit
22f42fc322

BIN
img/aboutUs01.jpg


BIN
img/aboutUs011.png


BIN
img/aboutUs012.png


BIN
img/aboutUs02.jpg


BIN
img/aboutUs03.jpg


BIN
img/aboutUs04.jpg


BIN
img/aboutUs05.jpg


BIN
img/aboutUs06.jpg


BIN
img/aboutUs07.jpg


BIN
img/aboutUs08.jpg


BIN
img/aboutUs_01.png


+ 91 - 0
src/css/aboutUs.css

@@ -0,0 +1,91 @@
+*{font-family: "微软雅黑";}
+.about{position: relative;height: 180px;}
+.line{width: 100%;height: 1px;border-bottom: 1px solid #bfbfbf;display: inline-block;z-index: 10;position:absolute;top: 66px;z-index: 10;}
+.aboutHeader{width: 592px;margin: 0 auto;background: #FFFFFF;z-index:20 ;position: absolute;top: 32px;left: 50%;margin-left: -291px;}
+.aboutHeader ul li{float: left;width: 130px;height: 44px;text-align: center;border-radius: 10px;line-height: 44px;font-size: 16px;color: #2b2b2b;border: 1px solid #bfbfbf;margin: 12px;cursor: pointer;}
+.aboutHeader ul li:first-child{margin-left: 0;}
+.aboutHeader ul li:last-child{margin-right: 0;}
+.aboutHeader ul li.on{background: #f68705;color: #FFFFFF;border: none;}
+
+/*公司简介*/
+.profile>img{float: left;width: 483px;height: 320px;margin-right: 15px;}
+.profile div{float: left;width: 672px;text-align: justify;}
+.profile div h4{font-weight: normal;font-size: 24px;color: #1a1a1a;margin-bottom: 20px;}
+.profile div h4 img{margin-right: 5px;vertical-align: middle;margin-top: -2px;}
+.profile div h4 span{font-size: 16px;color: #605f5f;}
+.profile div p{font-size:14px ;color: #7a7878;margin-bottom: 15px;line-height: 22px;text-indent: 2em;}
+
+/*业务范围*/  
+.business{padding-top: 120px;clear: both;}
+.business>img{float: right;width: 599px;height: 387px}
+.business_txt{width: 540px;height: 270px;background: #f6f6f6;padding-top: 35px;padding-left: 20px;padding-right: 20px;}
+.business div{float: left;width: 540px;text-align: justify;}
+.business div h4{font-weight: normal;font-size: 24px;color: #1a1a1a;margin-bottom: 40px;}
+.business div h4 img{margin-right: 5px;vertical-align: middle;margin-top: -2px;}
+.business div h4 span{font-size: 16px;color: #605f5f;}
+.business div p{font-size:14px ;color: #7a7878;margin-bottom: 30px;line-height: 22px;}
+
+/*资质荣誉*/  
+.honor{clear: both;padding-top: 70px;}
+.honor div h4{font-weight: normal;font-size: 24px;color: #1a1a1a;margin-bottom: 40px;}
+.honor div h4 img{margin-right: 5px;vertical-align: middle;margin-top: -2px;}
+.honor div h4 span{font-size: 16px;color: #605f5f;}
+.honor div p{font-size:14px ;color: #7a7878;margin-bottom: 30px;line-height: 30px;height: 30px;}
+
+.honor div>ul{position: relative;height: 190px;}
+.honor div>ul>li{position: absolute;top: 0;left: 0;width: 1170px;}
+.honor div>ul>li>ol>li{float: left;width:218px;margin-left: 20px;text-align: center;}
+.honor div>ul>li>ol>li P{width: 218px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
+.honor div>ul>li>ol>li img{width: 218px;height: 162px;overflow: hidden;}
+.honor div>ul>li>ol>li:first-child{margin-left: 0;}
+
+.spot{width:96px ;margin: 30px auto 0px;}
+.spot span{width: 16px;height: 16px;border-radius: 50%;background: #d5d6d8;display: inline-block;margin: 0 3px;cursor: pointer;}
+.spot span.this{background: #000000;}
+
+/*发展历程*/
+.history{clear: both;padding-top: 70px;}
+.history h4{font-weight: normal;font-size: 24px;color: #1a1a1a;}
+.history h4 img{margin-right: 5px;vertical-align: middle;margin-top: -2px;margin-right: 5px;}
+.history h4 span{font-size: 16px;color: #605f5f;}
+
+.historyBanner{width: 1100px;clear: both;overflow: hidden;height: 350px;margin-left: 50px;}
+.historyBanner ul{width: 1000000px;overflow: hidden;padding-top: 50px;transition: all .5s;}
+.historyBanner>ul>li{float: left;height: 300px;width: 1100px;}
+.historyBanner>ul>li>ol>li{float: left;text-align: center;width: 88px;vertical-align: top;} 
+.historyBanner>ul>li>ol>li p{width: 100px;font-size: 14px;color: #8d8d8d;visibility: hidden;margin-bottom: 5px;}
+.historyBanner>ul>li:first-child{background: url(../../img/aboutUs011.png) no-repeat center;background-size:98% 80% ;background-position-x: -11px;}
+.historyBanner>ul>li>ol>li span:hover{color: #ff7302;}
+.historyBanner>ul>li:first-child+li{background: url(../../img/aboutUs012.png) no-repeat center;background-size:98% 80% ;background-position-x: -11px;margin-left: -26px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(1){margin-top: 34px;margin-left: 2px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(2){margin-top: 3px;margin-left: 0px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(3){margin-top: -23px;margin-left: 0px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(4){margin-top: -36px;margin-left: 7px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(5){margin-top: -36px;margin-left: 10px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(6){margin-top: -18px;margin-left: 3px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(7){margin-top: 4px;margin-left: 8px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(8){margin-top: 25px;margin-left: 3px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(9){margin-top: 38px;margin-left: 6px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(10){margin-top: 26px;margin-left: 4px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(11){margin-top:-2px;margin-left: -1px;}
+.historyBanner>ul>li:first-child>ol>li:nth-child(12){margin-top: -24px;margin-left:-12px;}
+
+.direction{width: 1200px;margin: 0 auto;margin-top: -150px;margin-bottom: 150px;}
+.direction span{width: 28px;height: 28px;background: #ff7302;display: inline-block;color: #FFFFFF;font-size: 18px;line-height: 28px;text-align: center;border-radius: 50%;cursor: pointer;}
+.direction span:first-child{float: left;}
+.direction span:first-child+span{float:right;}
+
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(1){margin-top: -6px;margin-left: 44px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(2){margin-top: 24px;margin-left: 3px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(3){margin-top: 36px;margin-left: 5px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(4){margin-top: 24px;margin-left: 7px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(5){margin-top: 4px;margin-left:4px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(6){margin-top: -18px;margin-left: 3px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(7){margin-top: -38px;margin-left: 7px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(8){margin-top: -37px;margin-left: 8px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(9){margin-top: -24px;margin-left: 8px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(10){margin-top: 1px;margin-left:0px;}
+.historyBanner>ul>li:first-child+li>ol>li:nth-child(11){margin-top:31px;margin-left: 12px;}
+
+
+

+ 43 - 0
src/js/aboutUs.js

@@ -0,0 +1,43 @@
+import '../css/bootstrap.less';
+import 'bootstrap/dist/js/bootstrap.js';
+import '../css/public.css';
+import '../css/main_banner.css';
+import './public.js';
+import './main_banner.js';
+import '../css/aboutUs.css';
+
+$(function(){
+	//公司简介切换
+	$('.aboutHeader ul li').click(function(){
+		$(this).addClass('on').siblings().removeClass('on');
+	});
+	//资质荣誉切换
+	$('.honor>div>ul>li').eq(0).show().siblings().hide();
+	$('.spot span').click(function(){
+		$(this).addClass('this').siblings().removeClass('this');
+		var ind= $(this).index();		
+		$('.honor>div>ul>li').eq(ind).show().siblings().hide();
+	});
+	//发展历程
+	$('.historyBanner ol li span').mouseenter(function(){
+		$(this).siblings('p').css("visibility",'initial')
+	});
+	$('.historyBanner ol li span').mouseleave(function(){
+		$(this).siblings('p').css("visibility",'hidden')
+	});
+	var i=0;
+	$('.direction .next').click(function(){
+		i++;
+		if(i>6){
+			i=6
+		}
+		$('.historyBanner ul').css('margin-left',-180*i)		
+	});	
+	$('.direction .pre').click(function(){
+		i--;
+		if(i<0){
+			i=0;			
+		}
+		$('.historyBanner ul').css('margin-left',-180*i)				
+	});
+})

File diff suppressed because it is too large
+ 435 - 0
template/aboutUs.html


+ 2 - 2
template/technologyTrading/achievement.html

@@ -8,10 +8,10 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>专利/成果</title>
-    <link rel="stylesheet" href="../../src/css/bootstrap.css" />
+    <!--<link rel="stylesheet" href="../../src/css/bootstrap.css" />
     <link rel="stylesheet" href="../../src/css/public.css" />
     <link rel="stylesheet" href="../../src/css/main_banner.css" />
-    <link rel="stylesheet" type="text/css" href="../../src/css/technologyTrading/achievement.css"/>
+    <link rel="stylesheet" type="text/css" href="../../src/css/technologyTrading/achievement.css"/>-->
 </head>
 <body>  	
   	<header>

+ 6 - 0
webpack.config.js

@@ -41,6 +41,12 @@ module.exports = (function () {
             template: './template/toPayment.html',
             chunks: ['toPayment', 'vendors']
         }),
+         new HtmlWebpackPlugin({
+            title: '关于公司',
+            filename: 'html/aboutUs.html',
+            template: './template/aboutUs.html',
+            chunks: ['aboutUs', 'vendors']
+        }),
         new HtmlWebpackPlugin({
             title: '科技服务',
             filename: 'html/service.html',

+ 5 - 0
webpack/entry.config.js

@@ -1,6 +1,7 @@
 module.exports = {
     prod: {
         'index': './src/js/index.js',
+        'aboutUs': './src/js/aboutUs.js',
         'toPayment': './src/js/toPayment.js',
         'service': './src/js/service.js',
         'register': './src/js/register.js',
@@ -30,6 +31,10 @@ module.exports = {
             'webpack/hot/only-dev-server',
             './src/js/index.js'
         ],
+         'aboutUs': ['webpack-dev-server/client?http://127.0.0.1:80', // WebpackDevServer host and port
+            'webpack/hot/only-dev-server',
+            './src/js/aboutUs.js'
+        ],        
         'toPayment': ['webpack-dev-server/client?http://127.0.0.1:80', // WebpackDevServer host and port
             'webpack/hot/only-dev-server',
             './src/js/toPayment.js'