Browse Source

技术交易页面添加

ws2z3gr2017 7 years ago
parent
commit
ef37524f87

BIN
img/Technology_21.png


BIN
img/Technology_22.jpg


BIN
img/Technology_25.jpg


BIN
img/Technology_25.png


BIN
img/Technology_26.png


+ 52 - 0
src/css/Technologytrading.css

@@ -0,0 +1,52 @@
+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;}
+.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 ;}
+.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;}
+.detail_interest_sub li{transition: all .5s;}
+.detail_interest_sub li:hover{transform: scale(.985)}
+.detail_interest_sub li:hover .interest_list_title>p{color: #fe9507;}
+
+.channel{background: url(../../img/Technology_22.jpg)no-repeat center center; text-align: center;height: 540px;background-position-y: 20px;}
+.channel h5{font-size: 24px;color: #074d88;margin-top: 50px;}
+.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: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;}
+
+#bottom{margin-top: -150px;}
+
+
+
+
+
+
+
+
+

+ 82 - 0
src/js/Technologytrading.js

@@ -5,3 +5,85 @@ import '../css/main_banner.css';
 import './public.js';
 import './main_banner.js';
 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(''));
+        },
+    });
+}
+
+

+ 136 - 4
template/Technologytrading.html

@@ -11,7 +11,8 @@
     <title>科技服务</title>
     <!--<link rel="stylesheet" href="../src/css/bootstrap.css" />
     <link rel="stylesheet" href="../src/css/public.css" />
-    <link rel="stylesheet" type="text/css" href="../src/css/service.css"/>-->
+    <link rel="stylesheet" href="../src/css/main_banner.css" />
+    <link rel="stylesheet" type="text/css" href="../src/css/Technologytrading.css"/>-->
 </head>
 <body>  	
   	<header>
@@ -51,7 +52,137 @@
 		</a>
 	</div>
   	<!--主体内容区域开始-->
- 
+ 	<!--行业分类-->
+ 	<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">
+					<nav aria-label="Page navigation" class="clearfix">
+						<ul class="pagination">
+							<li class="pagePre">
+								<a href="#" aria-label="Previous">
+									<span aria-hidden="true">&laquo;</span>
+								</a>
+							</li>
+							<li class="pageNumber"><a href="#" value="1">1</a></li>
+							<li class="pageNext">
+								<a href="#" aria-label="Next">
+									<span aria-hidden="true">&raquo;</span>
+								</a>
+							</li>
+						</ul>
+						<span class="totalCount">共0条数据</span>
+					</nav>
+				</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>
   	<!--主体内容区域结束-->
 	<div id="bottom">
 		<div class="bottom">
@@ -179,7 +310,8 @@
 	<div class="smg"><input type="text" name="msg" value="" id="msg"/></div>
 </body>
 <!--<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/public.js"></script>
+<script type="text/javascript" src="../src/js/main_banner.js" ></script>-->
 
 </html>