dengzhiguo 7 years ago
parent
commit
3f034bf88b
4 changed files with 239 additions and 12 deletions
  1. BIN
      img/Technology_25.jpg
  2. 24 2
      src/css/Technologytrading.css
  3. 80 10
      src/js/Technologytrading.js
  4. 135 0
      template/Technologytrading.html

BIN
img/Technology_25.jpg


+ 24 - 2
src/css/Technologytrading.css

@@ -1,3 +1,4 @@
+
 *{box-sizing: border-box;}
 .clear_line{width:100%;height:1px;}
 #technology{width:100%;height:420px;box-shadow: 0 8px 8px 0 #E4E4E4;}
@@ -47,12 +48,19 @@ background-size: 1200px 215px;margin:0 auto;position: relative;}
 .industry{background: #ffffff;overflow: hidden;margin-bottom: 30px;}
 .industry_left{float: left;width: 300px;height:1000px;text-align: center;
     padding-top: 40px;background: #2a9ee2;}
+
+body{background: #f5f5f5;}
+.container{width: 1200px;}
+.industry{background: #ffffff;overflow: hidden;margin-bottom: 30px;}
+.industry_left{float: left;width: 300px;text-align: center;padding-top: 40px;background: #2a9ee2;height: 100%;}
+
 .industry_left h3{font-size: 24px;margin-bottom: 22px;color: #FFFFFF;font-weight:normal;}
 .industry_left ul li a{font-size:16px ;color: #ffffff;}
 .industry_left ul li{line-height: 36px;height: 36px;}
 .title_details{width: 840px;clear: both;margin-bottom: 36px;}
 .industry_right{float: left;padding-left: 30px;width: 870px;}
 .title_details ol {width: 100%;overflow: hidden;border-bottom: 1px solid #CCCCCC;}
+
 .title_details ol li{float: left;padding-left: 12px;padding-right: 12px;
     font-size: 24px;color: #333333;border-bottom: 1px solid transparent;
     line-height: 50px;cursor: pointer;}
@@ -61,11 +69,18 @@ background-size: 1200px 215px;margin:0 auto;position: relative;}
 .checked_no{display:none;}
 .main_details ul{overflow: hidden;}
 .main_details ul li{width: 260px;height:380px;float: left;position: relative;z-index: 10;box-shadow: 0 0 15px #CCCCCC;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;}
+
+.title_details ol li{float: left;padding-left: 12px;padding-right: 12px;font-size: 24px;color: #333333;border-bottom: 1px solid transparent;line-height: 50px;}
+.act{color:#074d88 !important;border-bottom: 1px solid #074d88!important;}
+.main_details ul{overflow: hidden;}
+.main_details ul li{width: 260px;float: left;position: relative;z-index: 10;box-shadow: 0 0 15px #CCCCCC;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;}
+
 .main_details ul li img{;width: 260px;}
 .main_details ul li .details_fix{position: absolute;top: 145px;background: rgba(131,146,145,0.5);z-index: 12;width: 260px;height: 70px;text-align: center;color: #FFFFFF;}
 .details_fix p{line-height: 25px;}
 .details_fix p:first-child{margin-top: 10px;}
 .details_fix p span{color: #333333;margin-left: 5px;}
+
 .details_text{width:260px;padding-top:10px ;position: absolute;left: 0;bottom:0px;}
 .details_text p{width: 200px;margin:5px auto;color: #f68705;font-size: 16px;}
 .details_text p span{color: #333333;display: inline-block;width: 160px;overflow: hidden;height: 20px;vertical-align: top;text-overflow: ellipsis;white-space: nowrap;}
@@ -76,6 +91,14 @@ background-size: 1200px 215px;margin:0 auto;position: relative;}
     margin-right: 30px;margin-bottom: 16px;margin-top:15px;}
 
 .pagination_box{width: 840px;}
+
+.details_text{width:260px;padding-top:10px ;}
+.details_text p{width: 200px;margin:5px auto;color: #f68705;font-size: 16px;}
+.details_text p span{color: #333333;display: inline-block;width: 160px;overflow: hidden;height: 20px;vertical-align: top;text-overflow: ellipsis;white-space: nowrap;}
+.details_text p b{font-weight:normal;color: #333333;width:160px;height:40px ;display: inline-block;vertical-align: top; }
+.details_text a{width: 80px;height: 26px;display: inline-block;background: #ffb200;border-radius: 10px;float: right;line-height: 26px;text-align: center;color: #ffffff;margin-right: 30px;margin-bottom: 16px;}
+
+.pagination_box{width: 600px;margin-bottom: 50px;}
 .pagination_box  .totalCount{ float:right; line-height: 74px;margin-right: 20px;color: #999;}
 .pagination_box .pagination{float: right;}
 .pagination_box .pagination li{float: left;}
@@ -88,7 +111,7 @@ background-size: 1200px 215px;margin:0 auto;position: relative;}
 .channel ul{overflow: hidden;margin-top: 65px;margin-left: 10px;}
 .channel ul li{width: 195px;float: left;height: 195px;margin-left: 40px;}
 .channel ul li:first-child{margin-left: 0;}
-.channel ul li a{color: #ffffff;font-size: 20px;line-height: 195px;height: 195px;display: inline-block;width: 195px;display: inline-block;}
+.channel ul li a{color: #ffffff;font-size: 20px;line-height: 195px;height: 195px;display: inline-block;width: 195px;}
 .channel ul li:nth-child(2n+1){background: url(../../img/Technology_25.png)no-repeat center;}
 .channel ul li:nth-child(2n){background: url(../../img/Technology_26.png)no-repeat center;margin-top: 50px;}
 .checkd{display:block;}
@@ -109,4 +132,3 @@ background-size: 1200px 215px;margin:0 auto;position: relative;}
 
 
 
-

+ 80 - 10
src/js/Technologytrading.js

@@ -9,8 +9,8 @@ import '../css/Technologytrading.css';
 (function(){
     $(".title_details ol li").click(function(){
         $(this).addClass("act").siblings().removeClass("act");
-       var left_val=$(".industry_ul li.action_li").val();
-       var right_val = $(this).val();
+        var left_val=$(".industry_ul li.action_li").val();
+        var right_val = $(this).val();
         $.ajax({
             method: "get",
             dataType: "json",
@@ -43,14 +43,84 @@ import '../css/Technologytrading.css';
         })
     })
 })();
-
-
-
-
-
-
-
-
+$(function(){
+    var industry = $('.industry').innerHeight();
+    $('.industry_left').height(industry)
+})
+//var theKeyword, theMode, theFieldA, theFieldB;
+//var thePageNo = 1,
+//    thePageLength = 1,
+//    pageSize = 12;
+//var categoryObj = {
+//    "0": "绮惧搧鎶�鏈浆璁�",
+//    "1": "绮惧搧鍒涗笟闇�姹�",
+//};
+//function loadDate(pageNo) {
+//    $.ajax({
+//        method: "get",
+//        dataType: "json",
+//        url: globalConfig.context + "/portal/search/demandList",
+//        data: {
+//            pageNo: pageNo || 1,
+//            pageSize: pageSize,
+//            keyword: theKeyword,
+//            sign: 0,
+//            demandType: theMode != 999 ? theMode : undefined,
+//            industryCategoryA: theFieldA != 999 ? theFieldA : undefined,
+//            industryCategoryB: theFieldB != 999 ? theFieldB : undefined,
+//        },
+//        success: function (data) {
+//            var theArr = [];
+//            if (data.data && data.data.list) {
+//                for (let i = 0; i < data.data.list.length; i++) {
+//                    let thisdata = data.data.list[i];
+//                    theArr.push([
+////                      '<li>',
+////                      '<img src="../img/Technology_21.png" alt="" />',//鍥剧墖鍦板潃淇敼
+////                    	'<div class="details_text">',
+////                    	'<p>琛屼笟 <span title="' + getIndustryCategory(thisdata.industryCategoryA, thisdata.industryCategoryB) + '">'+ getIndustryCategory(thisdata.industryCategoryA, thisdata.industryCategoryB) +'</span></p>',
+////                      '<p>浠锋牸 <span>'+thisdata.budgetCost+'</span></p>',
+////                   	'<p>绠�浠� <b>' + thisdata.problemDes + '</b></p>',
+////                   	'<a href="#">浜嗚В璇︽儏</a>',
+////                      '</div>',
+////                      '<div class="details_fix">',
+////                      '<p>涓撳埄鍚� <span>' + thisdata.name + '</span></p>',
+////                      '<p>鎵�鏈変汉 <span>'++'</span></p>	',  //鎵�鏈変汉
+////                      '</div>',
+////                      '</li>',
+//                    ].join(''));
+//                };
+//            };
+//            $('#demandList').empty();
+//            $('#demandList').append(theArr.join(''));
+//
+//            $('.totalCount').html("鍏�" + data.data.totalCount + "鏉℃暟鎹�");
+//            thePageLength = data.data.totalCount ? Math.ceil(data.data.totalCount / pageSize) : 1;
+//            var pageArr = [],
+//                firstNo = 1,
+//                endNo = 3;//5
+//            if (thePageNo > 3) {
+//                firstNo = thePageNo - 2;
+//                endNo = Math.min((Number(thePageNo) + 2), thePageLength);
+//            } else {
+//                endNo = Math.min(thePageLength, 3);//5
+//            };
+//            for (let i = firstNo; i <= endNo; i++) {
+//                if (i == thePageNo) {
+//                    pageArr.push(
+//                        '<li class="pageNumber active"><a href="#" value=' + i + ' >' + i + '</a></li>'
+//                    );
+//                } else {
+//                    pageArr.push(
+//                        '<li class="pageNumber"><a href="#" value=' + i + ' >' + i + '</a></li>'
+//                    );
+//                }
+//            };
+//            $('.pageNumber').remove();
+//            $('.pagePre').after(pageArr.join(''));
+//        },
+//    });
+//}
 
 
 

+ 135 - 0
template/Technologytrading.html

@@ -9,10 +9,17 @@
 	<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>
+<<<<<<< HEAD
     <!--<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.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.css"/>-->
+>>>>>>> 350a3be7ae6655de28f2d85f388298e0857a8e16
 </head>
 <body>  	
   	<header>
@@ -52,6 +59,7 @@
 		</a>
 	</div>
   	<!--主体内容区域开始-->
+<<<<<<< HEAD
  	<div id="technology">
 		<div class="technolo">
 			<div class="technolo_left">
@@ -384,6 +392,107 @@
 					<!--</ul>-->
 				<!--</div>-->
 				<div class="pagination_box">
+=======
+ 	<!--行业分类-->
+ 	<div class="industry">
+ 		<div class="container">
+	 		<div class="industry_left">
+	 			<h3>行业分类</h3>
+	 			<ul>
+	 				<li><a href="">医学类</a></li>
+	 				<li><a href="">教育咨询</a></li>
+	 				<li><a href="">航天航空</a></li>
+	 				<li><a href="">医学类</a></li>
+	 				<li><a href="">教育咨询</a></li>
+	 				<li><a href="">航天航空</a></li>
+	 				<li><a href="">医学类</a></li>
+	 				<li><a href="">教育咨询</a></li>
+	 				<li><a href="">航天航空</a></li>
+	 			</ul>
+	 		</div>
+	 		<div class="industry_right">
+	 			<div class="title_details">
+					<ol>
+						<li class="act" value="999">专利交易</li>
+						<li value="0">精品技术转让</li>
+						<li value="1">精品创业需求</li>
+					</ol>	 				
+	 			</div>
+	 			<div class="main_details">
+	 				<ul id="demandList">
+	 					<li>
+	 						<img src="../img/Technology_21.png" alt="" />	 						
+	 						<div class="details_text">
+	 							<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
+	 							<p>价格 <span>10000</span></p>
+	 							<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
+	 							<a href="#">了解详情</a>
+	 						</div>
+	 						<div class="details_fix">
+	 							<p>专利名 <span> 医疗四分局王死哦风景</span></p>
+	 							<p>所有人 <span> 胡海峰</span></p>	 							
+	 						</div>
+	 					</li>
+	 					<li>
+	 						<img src="../img/Technology_21.png" alt="" />	 						
+	 						<div class="details_text">
+	 							<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
+	 							<p>价格 <span>10000</span></p>
+	 							<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
+	 							<a href="#">了解详情</a>
+	 						</div>
+	 						<div class="details_fix">
+	 							<p>专利名 <span> 医疗四分局王死哦风景</span></p>
+	 							<p>所有人 <span> 胡海峰</span></p>
+	 							
+	 						</div>
+	 					</li>
+	 					<li>
+	 						<img src="../img/Technology_21.png" alt="" />	 						
+	 						<div class="details_text">
+	 							<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
+	 							<p>价格 <span>10000</span></p>
+	 							<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
+	 							<a href="#">了解详情</a>
+	 						</div>
+	 						<div class="details_fix">
+	 							<p>专利名 <span> 医疗四分局王死哦风景</span></p>
+	 							<p>所有人 <span> 胡海峰</span></p>
+	 							
+	 						</div>
+	 					</li>
+	 					<li>
+	 						<img src="../img/Technology_21.png" alt="" />	 						
+	 						<div class="details_text">
+	 							<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
+	 							<p>价格 <span>10000</span></p>
+	 							<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
+	 							<a href="#">了解详情</a>
+	 						</div>
+	 						<div class="details_fix">
+	 							<p>专利名 <span> 医疗四分局王死哦风景</span></p>
+	 							<p>所有人 <span> 胡海峰</span></p>
+	 							
+	 						</div>
+	 					</li>
+	 					<li>
+	 						<img src="../img/Technology_21.png" alt="" />	 						
+	 						<div class="details_text">
+	 							<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
+	 							<p>价格 <span>10000</span></p>
+	 							<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
+	 							<a href="#">了解详情</a>
+	 						</div>
+	 						<div class="details_fix">
+	 							<p>专利名 <span> 医疗四分局王死哦风景</span></p>
+	 							<p>所有人 <span> 胡海峰</span></p>	 							
+	 						</div>
+	 					</li>	 					
+	 					
+	 				</ul>
+	 			</div>	
+	 			<div class="pagination_box">
+>>>>>>> 350a3be7ae6655de28f2d85f388298e0857a8e16
 					<nav aria-label="Page navigation" class="clearfix">
 						<ul class="pagination">
 							<li class="pagePre">
@@ -401,6 +510,7 @@
 						<span class="totalCount">共0条数据</span>
 					</nav>
 				</div>
+<<<<<<< HEAD
 			</div>
 		</div>
 	</div>
@@ -416,6 +526,23 @@
 			</ul>
 		</div>
 	</div>
+=======
+	 		</div>
+ 		</div>
+ 	</div>
+ 	<div class="channel">
+ 		<div class="container">
+ 			<h5>快速通道</h5>
+ 			<ul>
+ 				<li><a href="">技术评估</a></li>
+ 				<li><a href="">专利申请</a></li>
+ 				<li><a href="">专利征集</a></li>
+ 				<li><a href="">发布技术</a></li>
+ 				<li><a href="">发布需求</a></li>
+ 			</ul>
+ 		</div>
+ 	</div>
+>>>>>>> 350a3be7ae6655de28f2d85f388298e0857a8e16
   	<!--主体内容区域结束-->
 	<div id="bottom">
 		<div class="bottom">
@@ -541,8 +668,16 @@
 	</div>
 	<div class="smg"><input type="text" name="msg" value="" id="msg"/></div>
 </body>
+<<<<<<< HEAD
 <!--<script type="text/javascript" src="../src/js/jquery-2.1.0.js"></script>-->
 <!--<script type="text/javascript" src="../src/js/service.js"></script>-->
 <!--<script type="text/javascript" src="../src/js/public.js"></script>-->
 <!--<script type="text/javascript" src="../src/js/Technologytrading.js"></script>-->
+=======
+<!--<script type="text/javascript" src="../src/js/jquery-2.1.0.js"></script>
+<script type="text/javascript" src="../src/js/Technologytrading.js"></script>
+<script type="text/javascript" src="../src/js/public.js"></script>
+<script type="text/javascript" src="../src/js/main_banner.js" ></script>-->
+
+>>>>>>> 350a3be7ae6655de28f2d85f388298e0857a8e16
 </html>