Browse Source

b2b项目公共询价页面整体调整

hangb 8 years ago
parent
commit
346436f3f6

BIN
src/main/webapp/resources/img/all/bar.png


BIN
src/main/webapp/resources/img/all/circle.png


BIN
src/main/webapp/resources/img/all/history.png


BIN
src/main/webapp/resources/img/all/money.png


+ 45 - 1
src/main/webapp/resources/js/common/directives.js

@@ -13,5 +13,49 @@ define(['angular'], function(angular) {
 				}
 			}
 		};
-	}]);
+	}])
+	.directive("slideFollow",function($timeout){
+		return {
+			restrict : 'E',
+			replace : true,
+			scope : {
+				id : "@",
+				datasetData : "="
+			},
+			template : "<span ng-repeat = 'data in datasetData'><img src='static/img/all/circle.png' class='circle'/>{{data.option}}<img src='static/img/home/new.png' class='new'/></span>",
+			link : function(scope, elem, attrs) {
+				$timeout(function(){
+					var className = $("." + $(elem).parent()[0].className);
+					console.log(className);
+					var i = 0, sh;
+					var liLength = className.children("span").length;
+					var liWidth = className.children("span").width() + parseInt(className.children("span").css('border-bottom-width'));
+					className.html(className.html() + className.html());
+					// 开启定时器
+					sh = setInterval(slide, 500);
+					function slide(){
+						if (parseInt(className.css("margin-left")) > (-liLength * liWidth)) {
+							console.log('1' +className.css("margin-left"));
+							console.log(-liLength * liWidth)
+							i++;
+							className.animate({
+								marginLeft : -liWidth * i + "px"
+							}, 1000);
+						} else {
+							i = 0;
+							className.css("margin-left", "0px");
+						}
+					}
+
+					// 清除定时器
+					className.hover(function(){
+						clearInterval(sh);
+					},function(){
+						clearInterval(sh);
+						sh = setInterval(slide,1000);
+					})
+				},0)
+			}
+		}
+	});
 });

+ 8 - 0
src/main/webapp/resources/js/index/app.js

@@ -5272,6 +5272,14 @@
             $scope.tableParams.reload();
         };
 
+         $scope.datasetData = [
+             {option : "这个是第一条数据"},
+             {option : "这个是第二条数据"},
+             {option : "这个是第三条数据"},
+             {option : "这个是第四条数据"},
+             {option : "这个是第五条数据"},
+             {option : "这个是第六条数据"}
+         ]
     }]);
 
     /**

+ 263 - 78
src/main/webapp/resources/tpl/index/baseInfo/inquiry_list.html

@@ -3,11 +3,11 @@
 <style>
 
 /*新增样式 2017-04-19*/
-#tender-list{
-    width: 1170px;
-    margin-left: -240px;
-    background: #f5f5f5;
-}
+    #tender-list{
+         width: 1170px;
+         margin-left: -240px;
+         background: #f5f5f5;
+     }
 #tender-list .tender-label{
     height: auto;
 }
@@ -89,50 +89,218 @@
         border: #5078cb 1px solid;
     }
     .tender-list-tab{
-        border-top: #e8e8e8 1px solid;
+        padding: 0 28px;
+    }
+    .inquiry-table{
+        width: 100%;
+        border: 1px solid #cfcfcf;
+        table-layout: fixed ;
+    }
+    .inquiry-table tr{
+        height: 40px;
+        vertical-align: middle ;
+    }
+    .inquiry-table thead tr{
+        height: 30px;
+        background: #ebf5fe;
+    }
+    .inquiry-table thead tr th{
+        position: relative ;
+        font-size: 14px;
+        color: #333;
+        border-bottom: none!important;
+    }
+    .inquiry-table thead tr th.line em:before{
+        content: '';
+        position: absolute;
+        top: 10px;
+        left: 0;
+        width: 1px;
+        height: 16px;
+        background: #9f9fa0;
+    }
+    .inquiry-table tbody tr td{
+        position: relative;
+        font-size: 12px;
+        color: #666;
+        font-weight: inherit;
+        text-align: left;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        vertical-align: middle;
+        border-bottom: #ccc 1px solid !important;
+        border-top: none !important;
+        white-space: nowrap;
+    }
+    .inquiry-table tbody tr td em{
+        padding: 1px 5px;
+        display: inline-block;
+        background: #eb676c;
+        font-size: 14px;
+        color: #fff;
+        text-align: center;
+        line-height: 23px;
+        margin-right: 10px;
+    }
+    .inquiry-table tbody tr td img{
+        margin-left: 20px;
+        margin-right: 8px;
+    }
+    .inquiry-table tbody tr td a.offer{
+        font-size: 13px;
+        color: #327ebe;
+    }
+    .inquiry-table tbody tr td a.offer:hover{
+        text-decoration: underline ;
+    }
+    .inquiry-table tbody tr td img.showImg {
+        margin-left: 0;
+    }
+    .text-trans{
+        opacity: 1;
+        top: 12px;
+        right: 20px;
+     }
+    .overdue{
+        color: #f47a86;
+        border: #f47a86 1px solid;
+        background: transparent;
+    }
+        /*页面结构调整新增样式*/
+    .pub-com_head{
+        position: relative;
+        overflow: hidden;
+    }
+    .pub-com_head span:before{
+        content: '';
+        position: absolute;
+        top: 17px;
+        left: 13px;
+        width: 4px;
+        height: 13px;
+        background: #000;
+    }
+    .pub-com_head span b{
+        margin-left: 10px;
+        font-weight: normal;
+        font-size: 14px;
+        color: #000;
+    }
+    .pub-com_head span em{
+        font-style: normal;
+        font-size: 14px;
+        color: #d32526;
+    }
+    .pub-com_head a{
+        float: right;
+        padding-right: 30px;
+        font-size: 14px;
+        color: #999;
+    }
+    .tender-list-content .container{
+        margin: 0 auto;
+        padding: 0;
+    }
+    .tender-list-content .slider{
+        padding-left: 35px;
+        height: 65px;
+        line-height: 65px;
+        overflow-y: hidden;
+        border-bottom: 1px solid #cfcfcf;
+    }
+    .tender-list-content .slider span{
+        margin-right: 155px;
+        font-size: 14px;
+        color: #333;
+    }
+    .tender-list-content .slider span img.circle{
+        margin: -3px 5px 0 0;
+        width: 8px;
+        height: 8px;
+    }
+    .tender-list-content .slider span img.new{
+        margin: -3px 0 0 5px;
+    }
+    .filter{
+        padding: 22px 0 0 27px;
+        margin: 0 auto !important ;
+        height: 80px;
+    }
+    .filter input{
+        width: 320px;
+        height: 36px !important ;
+        line-height: 36px !important ;
+        text-align: center;
+    }
+    .tender-list-content .filter div.form-group .input-group-addon{
+        right: -85px;
+        width: 85px;
+        height: 36px;
+        font-size: 16px;
+        color: #fffefe;
+        border-radius: 0;
+    }
+    .tender-list-content .filter div.count{
+        padding-left: 100px;
+        font-size: 14px;
+        line-height: 35px;
+    }
+    .tender-list-content .filter div.all{
+        margin: 5px 0 0 40px;
+    }
+    .tender-list-content .filter div.all span{
+        position: relative;
+    }
+    .tender-list-content .filter div.all ul{
+        display: none;
+        position: absolute;
+        top: 24px;
+        left: 0;
+        width: 94px;
+        background: #fff;
+        z-index: 10;
+        box-shadow: 0 0 5px rgba(0,0,0,.5);
+    }
+    .tender-list-content .filter div.all ul li{
+        height: 20px;
+        line-height: 20px;
+        font-size: 14px;
+        color: #333;
+        list-style: none ;
+    }
+    .tender-list-content .filter div.all ul li:hover,.tender-list-content .filter div.all ul li.active{
+        background: #5078cb;
+        color: #fff;
+    }
+    .tender-list-content .filter div.all span.history{
+        border: none;
+    }
+    .tender-list-content .filter div.all span.history:hover ul{
+        display: block;
+    }
+    .tender-list-content .filter div.all span{
+        margin-right: 20px;
+        display: inline-block;
+        width: 94px;
+        height: 24px;
+        line-height: 22px;
+        text-align: center;
+        font-size: 14px;
+        font-weight: normal;
+        color: #327ebe;
+        border-radius: 4px;
+        border: 1px solid #327ebe;
+        cursor: pointer;
+    }
+    .tender-list-content .filter div.all span img{
+        margin: -2px 10px 0 0;
+        width: 15px;
+        height: 15px;
+    }
+    .tender-list-content .filter div.all span img.first{
+        width: 14px;
+        height: 12px;
     }
-.inquiry-table{
-    width: 100%;
-}
-.inquiry-table tr{
-    height: 60px;
-}
-.inquiry-table tbody tr td,.inquiry-table thead tr th{
-    border-bottom: #ccc 1px dashed !important;
-    font-size: 14px;
-    vertical-align: middle;
-    border-top: none !important;
-    font-weight: inherit;
-    position: relative;
-    text-align: center;
-}
-.inquiry-table tbody tr td em{
-    padding: 1px 5px;
-    display: inline-block;
-    background: #eb676c;
-    font-size: 14px;
-    color: #fff;
-    text-align: center;
-    line-height: 23px;
-    margin-right: 10px;
-}
-.inquiry-table tbody tr td img{
-    margin-left: 20px;
-    margin-right: 8px;
-}
-.inquiry-table tbody tr td:first-child{
-    text-align: left;
-}
-.text-trans{
-    opacity: 1;
-    top: 12px;
-    right: 20px;
- }
-.overdue{
-    color: #f47a86;
-    border: #f47a86 1px solid;
-    background: transparent;
-}
 </style>
 
 <div class="ng-scope">
@@ -140,53 +308,70 @@
         <div class="purc-tender" id="tender-list">
             <div class="tender-label list-unstyled">
                 <div class="pub-com_head">
-                    <span>公共询价</span>
+                    <span>
+                        <b>公共询价</b>
+                        <!--(<em> 10 </em>)-->
+                    </span>
+                    <a href="/platform-b2b/#/">返回</a>
                 </div>
                 <div class="tender-list-content">
                     <div class="container">
-                       <div class="filter row">
-                           <span>时间</span>
-                           <div>
-                               <a ng-click="changeDateZone(-1)" title="" ng-class="{'active':condition.dateZone=='-1'}">全部</a>
-                               <a ng-click="changeDateZone(7)" title="" ng-class="{'active':condition.dateZone=='7'}">一个星期内</a>
-                               <a ng-click="changeDateZone(1)" title="" ng-class="{'active':condition.dateZone=='1'}">一个月内</a>
-                               <a ng-click="changeDateZone(3)" title="" ng-class="{'active':condition.dateZone=='3'}">三个月内</a>
-                               <a ng-click="changeDateZone(6)" title="" ng-class="{'active':condition.dateZone=='6'}">半年内</a>
-                               <a ng-click="changeDateZone()" title="" ng-class="{'active':condition.dateZone== null}">一年内</a>
-                           </div>
-                       </div>
+                        <div class="slider" id="slider">
+                           <!--<marquee behavior="scroll" direction="left" scrollamount="5">-->
+                               <!--<span>-->
+                                  <!--<span><img src="static/img/all/circle.png" alt="" class="circle"/> 华商龙商务科技有限公司开展员工动员大会 <img src="static/img/home/new.png" class="new"/></span>-->
+                               <!--</span>-->
+                           <!--</marquee>-->
+                               <!-- 指令 -->
+                            <div class="slideUl">
+                                <slide-follow id="slide" dataset-data = "datasetData"></slide-follow>
+                            </div>
+                        </div>
                         <div class="filter row">
-                            <span>查询</span>
-                            <div class="form-group" style="width: 310px;">
-                                <input type="search" class="form-control" ng-model="keyword" ng-search="onSearch()" />
-                                <div class="input-group-addon">
-                                    <i class="fa fa-search" ng-click="onSearch()"></i>
-                                </div>
+                            <div class="form-group">
+                                <input type="search" class="form-control" ng-model="keyword" ng-search="onSearch()" placeholder="输入询价信息" />
+                                <div class="input-group-addon" ng-click="onSearch()">搜索</div>
                             </div>
-                            <div style="padding-left: 50px; font-size: 14px; line-height: 35px;">
-                            	    共{{tableParams.total()}}条
+                            <div class="count">共{{tableParams.total()}}条</div>
+                            <div class="all">
+                                <span ng-click="changeDateZone(-1)" title="" ng-class="{'active': condition.dateZone == '-1'}" ><img src="static/img/all/bar.png" alt="" class="first"/>全部</span>
+                                <span class="history">
+                                    <span><img src="static/img/all/history.png" alt=""/>历史询价</span>
+                                    <ul>
+                                        <li ng-click="changeDateZone(7)" title="" ng-class="{'active': condition.dateZone == '7'}">一周内</li>
+                                        <li ng-click="changeDateZone(1)" title="" ng-class="{'active': condition.dateZone == '1'}">一个月内</li>
+                                        <li ng-click="changeDateZone(3)" title="" ng-class="{'active': condition.dateZone == '3'}">三个月内</li>
+                                        <li ng-click="changeDateZone(6)" title="" ng-class="{'active': condition.dateZone == '6'}">半年内</li>
+                                        <li ng-click="changeDateZone()" title="" ng-class="{'active': condition.dateZone == null}">一年内</li>
+                                    </ul>
+                                </span>
+                                <span><img src="static/img/all/money.png" alt=""/>我的报价</span>
                             </div>
                         </div>
                         <div class="tender-list-tab">
                            <table class="table inquiry-table" ng-table="tableParams">
                                <thead>
                                     <tr>
-                                        <th>企业名称</th>
-                                        <th width="200">产品名称</th>
-                                        <th width="250">产品型号</th>
-                                        <th width="150">发布日期</th>
-                                        <th width="150">报价截止日期</th>
-                                        <th width="100"></th>
+                                        <th width="120">发布日期</th>
+                                        <th width="180" class="line"><em></em>产品型号</th>
+                                        <th width="180" class="line"><em></em>品牌</th>
+                                        <th width="160" class="line"><em></em>产品名称</th>
+                                        <th width="80" class="line"><em></em>数量</th>
+                                        <th width="210" class="line"><em></em>询价企业</th>
+                                        <th width="120" class="line"><em></em>报价截止日期</th>
+                                        <th width="70" class="line"><em></em>报价</th>
                                     </tr>
                                </thead>
                                <tbody>
                                     <tr ng-click="toDetail(inquiryItem.id)" title="查看详情" ng-repeat="inquiryItem in $data">
-                                        <td><img src="static/img/icon/inquiry.png" /><a>{{::inquiryItem.inquiry.enterprise.enName}}</a></td>
-                                        <td>{{::inquiryItem.product.title}}</td>
-                                        <td>{{::inquiryItem.product.spec}}</td>
                                         <td>{{::inquiryItem.inquiry.date| date: 'yyyy-MM-dd'}}</td>
+                                        <td>{{::inquiryItem.product.spec}}</td>
+                                        <td>{{::inquiryItem.product.brand || '无'}}</td>
+                                        <td>{{::inquiryItem.product.title}}</td>
+                                        <td>{{::inquiryItem.number}}</td>
+                                        <td><a>{{::inquiryItem.inquiry.enterprise.enName}}</a></td>
                                         <td>{{::inquiryItem.inquiry.endDate| date: 'yyyy-MM-dd'}}</td>
-                                        <td><span class="text-trans overdue" ng-if="nowdate > inquiryItem.inquiry.endDate || inquiryItem.overdue == 1">已失效</span></td>
+                                        <td><a class="offer">我要报价</a></td>
                                     </tr>
                                </tbody>
                            </table>