基础弹框

src/main/resources/static/css/base/base.h5.css

@@ -4,7 +4,7 @@
 */
 .noneImportant{display:none!important;}
 .baseHeadCenter,#container,.footMain{width:100%;overflow:hidden;}
-.pcOnly,.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotword,.baseTopNav>.wrap{display:none!important;}
+.pcOnly,.jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotKey,.baseTopNav>.wrap{display:none!important;}
 .mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:75vw auto;transition:all .5s}
 .icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:5.5vw;line-height:5.5vw}
 .icon.shop:before{width:7.5vw;height:6vw;background-position:-1% 60%}
@@ -112,15 +112,26 @@
 .productItem .item .btn{display:inline-block;width:35.8vw;height:9vw;text-align:center;overflow:hidden;color:#F94B4B;background:#FEF6F3;border-radius:2px}
 .productItem .item .btn.add{background:#FEF6F3;color:#E15616;}
 .noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
+/*常规弹框*/
+.baseAlert{display:none;background-color:rgba(74,79,88,.7);z-index:999}
+.baseAlert .box{box-sizing:border-box;width:74.6vw;padding-bottom:2.7vw;position:relative;top:50%;margin:-40vw auto 0 auto;font-size:3.7vw;background:#FFF;border-radius:1.6vw;color:#4A4F58;line-height:5.4vw;text-align:left}
+.baseAlert .hd{border-bottom:1px solid #E2E7EF;height:10vw;line-height:10vw;box-sizing:border-box;padding:0 2.7vw;color:#627386}
+.baseAlert .hd .close{float:right;text-align:center;font-style:normal;cursor:pointer}
+.baseAlert .hd .close:before{content:'\2715'}
+.baseAlert .bd{padding:4vw 2.7vw;text-align:center}
+.baseAlert .btn{text-align:center}
+.baseAlert .btn em{display:inline-block;width:20vw;height:8vw;line-height:8vw;margin:0 3vw;text-align:center;font-style:normal;border-radius:2px;box-sizing:border-box;cursor:pointer;font-size:3.1vw}
+.baseAlert .btn em.confirm{color:#FFF;background:#E15621}
+.baseAlert .btn em.cancel{color:#22272E;background:#FFF;border:1px solid #B8BFCA}
 /*登录弹框*/
-.loginAlert{display:none;background-color:rgba(74,79,88,.7);z-index:999}
-.loginAlert .box{box-sizing:border-box;width:74.6vw;height:80vw;padding-top:7.6vw;position:relative;top:50%;margin:-40vw auto 0 auto;font-size:3.7vw;background:#FFF;border-radius:1.6vw;color:#4A4F58;line-height:5.4vw;text-align:center}
+.loginAlert .box{width:74.6vw;padding-top:7.6vw;margin:-40vw auto 0 auto;text-align:center}
 .loginAlert .box:before{content:'';display:block;width:26.7vw;height:26.7vw;background:url(/img/base/to_login_m.png) no-repeat left top;background-size:100% 100%;margin:0 auto}
 .loginAlert .hd{display:none}
 .loginAlert .bd{padding:2vw 0}
 .loginAlert .bd span{display:block}
-.loginAlert .bd a.btn{display:block;width:55.2vw;height:11.6vw;line-height:11.6vw;text-align:center;color:#FFF;background:#E15621;border-radius:5.8vw;margin:5.4vw auto 4.2vw}
-.loginAlert .bd em.btn{font-style:normal;padding:0 5.4vw}
+.loginAlert .btn em{display:block;box-sizing:border-box;width:55.2vw;height:11.6vw;line-height:11.6vw;text-align:center;border-radius:5.8vw;margin:5.4vw auto 0}
+.loginAlert .btn em.confirm{color:#FFF;background:#E15621;border:none}
+
 /* 咨询，回到顶部 */
 #scrollTop{display:none;position:fixed;right:0;;z-index:9999;bottom:4vw;}
 #scrollTop .item{width:12vw;background-color:rgba(190,194,201,.3);box-sizing:border-box;text-align:center;margin-bottom:2.5vw;font-size:3vw;position:relative}

src/main/resources/static/css/base/base.pc.css

@@ -54,9 +54,9 @@ body{min-width:1184px;}
 .baseHeadCenter .keyword:focus{outline:none;border:none}
 .baseHeadCenter .searchBtn{position:absolute;right: 0;top: 0;font-size:0;padding: 7px 12px;height: 30px;line-height: 30px;}
 .baseHeadCenter .searchBtn:before{width: 30px;height: 30px;background-position: 4px 4px;}
-.baseHeadCenter .hotword{color:#93979F;font-size:12px;line-height:24px}
-.baseHeadCenter .hotword a{color:#93979F;padding:0 5px}
-.baseHeadCenter .hotword a:hover{color:#E15616}
+.baseHeadCenter .hotKey{color:#FFB496;font-size:12px;line-height:24px}
+.baseHeadCenter .hotKey .word{padding:0 5px;font-style:normal;cursor:pointer;}
+.baseHeadCenter .hotKey .word:hover{color:#E15616}
 /* 购物车 */
 .baseHeadCenter .headCart{width:184px;height:44px;float:right;position:relative;}
 .baseHeadCenter .headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;border:1px solid #FFE6DC;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
@@ -188,19 +188,24 @@ body{min-width:1184px;}
 .pageWrap span{display:inline-block;height:40px;line-height:40px;margin:0 5px;color:#93979F}
 .pageWrap b{color:#2D3036;font-weight:normal}
 .pageWrap input{box-sizing:border-box;width:80px;height:40px;line-height:40px;font-size:16px;border:1px solid #EBECEF;outline:none;border-radius:2px;text-align:center}
-/*登录弹框*/
-.loginAlert{display:none;position:fixed;top:0;left:0;width:100%;height:100%;margin:0 auto;background-color:rgba(74,79,88,.7);z-index:999}
-.loginAlert .box{box-sizing:border-box;width:338px;height:234px;position:relative;top:50%;margin:-117px auto 0 auto;font-size:14px;background:#FFF;border-radius:2px;color:#4A4F58;line-height:42px;text-align:left}
+/* 常规弹框 */
+.baseAlert{display:none;position:fixed;top:0;left:0;width:100%;height:100%;margin:0 auto;background-color:rgba(74,79,88,.7);z-index:999}
+.baseAlert .box{position:relative;width:338px;top:50%;margin:-100px auto 0 auto;padding-bottom:16px;box-sizing:border-box;font-size:14px;background:#FFF;border-radius:2px;color:#4A4F58;text-align:left}
+.baseAlert .hd{border-bottom:1px solid #E2E7EF;height:42px;line-height:42px;box-sizing:border-box;padding:0 16px;color:#627386}
+.baseAlert .hd .close{float:right;text-align:center;font-style:normal;cursor:pointer}
+.baseAlert .hd .close:before{content:'\2715'}
+.baseAlert .bd{padding:16px;line-height:24px;font-size:14px;color:#22272E}
+.baseAlert .btn{text-align:center}
+.baseAlert .btn em{display:inline-block;width:68px;height:32px;line-height:32px;margin:0 8px;text-align:center;font-style:normal;border-radius:2px;box-sizing:border-box;cursor:pointer}
+.baseAlert .btn em.confirm{color:#FFF;background:#E15621}
+.baseAlert .btn em.cancel{color:#22272E;background:#FFF;border:1px solid #B8BFCA}
+/* 登录弹框 */
+.loginAlert .box{width:338px;height:234px;top:50%;margin:-117px auto 0 auto}
 .loginAlert .box:after{content:'';display:block;width:125px;height:125px;background:url(/img/base/to_login.png) no-repeat left top;background-size:100% 100%;margin-left:16px}
-.loginAlert .hd{border-bottom:1px solid #E2E7EF;height:42px;box-sizing:border-box;padding:0 16px;color:#627386}
-.loginAlert .hd .close{float:right;text-align:center;font-style:normal;cursor:pointer}
-.loginAlert .hd .close:before{content:'\2715'}
-.loginAlert .bd{padding:0 16px;color:#22272E}
 .loginAlert .bd span:first-child:after{content:'，'}
-.loginAlert .bd .btn{position:absolute;bottom:16px;width:68px;height:32px;line-height:32px;text-align:center;border-radius:2px;box-sizing:border-box;cursor:pointer}
-.loginAlert .bd a.btn{right:16px;color:#FFF;background:#E15621}
-.loginAlert .bd em.btn{font-style:normal;right:100px;color:#22272E;background:#FFF;border:1px solid #B8BFCA}
-
+.loginAlert .btn em{position:absolute;bottom:16px}
+.baseAlert .btn em.confirm{right:16px;}
+.baseAlert .btn em.cancel{right:100px;}
 /* 咨询，回到顶部 */
 #scrollTop{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:120px;}
 #scrollTop .item{width:100%;background-color:#fff;box-sizing:border-box;text-align:center;box-shadow:0 2px 4px rgb(254,246,243);border-radius:2px;margin-bottom:10px;font-size:12px;position:relative}

src/main/resources/static/js/base.js

@@ -60,12 +60,14 @@ var headCart = new Vue({
 });
 // 初始化效果
 $(function(){
+    // PC,H5切换时刷新
     $(window).resize(function() {
         var flag = (isPC && $(window).width()<=768) || (!isPC && $(window).width()>768);
         if(flag){
             window.location.reload();
         }
     });
+    // 导航分类
     if(isPC){
         jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
         jqSelect(".jqSelect");
@@ -82,6 +84,7 @@ $(function(){
             e.stopPropagation();
         });
     }
+    // 去登录弹窗
     $('body').on("click", '.toLogin',function () {
         $('.loginAlert').show();
         if(!isPC){fixedBody();}
@@ -119,6 +122,36 @@ $(function(){
             $('#scrollTop').hide();
         }
     });
+    // 顶部搜索框
+    $('#topSearch').on("click", '.searchBtn', function(){
+        var type = $(this).parents('#topSearch').find('[data-select]').attr("data-select")*1;
+        var keyword = $.trim($(this).parents('#topSearch').find('.keyword').val());
+        if (keyword.length < 2) {
+
+            return false;
+        }
+        if (type === 2) {
+            // 项目仪器
+            window.location.href = '/product/list.html?keyword='+encodeURIComponent(keyword);
+        } else if(type === 1) {
+            // 供应商
+            window.location.href = '/product/list.html?keyword='+encodeURIComponent(keyword);
+        } else{
+            // 商品
+            window.location.href = '/product/list.html?keyword='+encodeURIComponent(keyword);
+        }
+    }).on('keyup', '.keyword', function(event) {
+        // 搜索输入框 按回车键搜索
+        var keyCode = event.keyCode || event.which;
+        if(keyCode === 13){
+            $(this).parents('#topSearch').find('.searchBtn').trigger("click");
+        }
+    }).on("click", '.hotKey .word', function(){
+        // 点击热词 触发搜索
+        $(this).parents('#topSearch').find('.keyword').val($(this).text());
+        $(this).parents('#topSearch').find('.searchBtn').trigger("click");
+    });
+
 
 });
 // 公共方法

src/main/resources/static/js/product/list.js

@@ -68,7 +68,7 @@ var productList = new Vue({
         getListByKeyword: function () {
             var _self = this;
             $.getJSON(spiServer+"/search/query/product", {
-                keyword: this.params.keyword,
+                keyword: encodeURI(this.params.keyword),
                 pageSize: this.params.size,
                 pageNum: this.params.num,
                 sortField: this.params.sortField,

src/main/resources/templates/components/footer.html

@@ -73,15 +73,28 @@
             <span class="toTop icon mIcon">置顶</span>
         </div>
     </div>
-    <div class="loginAlert mFixed">
+    <div class="baseAlert mFixed loginAlert">
         <div class="box">
             <div class="hd">提示<em class="close"></em></div>
             <div class="bd">
                 <span>你还未登录</span>
                 <span>请登录后再进行购买</span>
-                <a class="btn" href="javascript:void(0);">去登录</a>
-                <em class="btn">取消</em>
+            </div>
+            <div class="btn">
+                <a href="javascript:void(0);"><em class="confirm">去登录</em></a>
+                <em class="cancel">取消</em>
+            </div>
+        </div>
+    </div>
+    <div class="baseAlert mFixed">
+        <div class="box">
+            <div class="hd"><span class="title">提示</span><em class="close"></em></div>
+            <div class="bd content">提示信息</div>
+            <div class="btn">
+                <em class="confirm">确定</em>
+                <em class="cancel">关闭</em>
             </div>
         </div>
     </div>
+
 </footer>

src/main/resources/templates/components/header.html

@@ -43,7 +43,7 @@
                 <a href="javascript:void(0);" class="mAddCart mIcon" title="购物车"></a>
                 <a href="javascript:void(0);" class="mUserIcon mIcon" title="个人中心"></a>
             </div>
-            <div class="searchBox">
+            <div class="searchBox" id="topSearch">
                 <div class="search">
                     <div class="jqSelect">
                         <div class="pc">
@@ -60,10 +60,10 @@
                     <a class="searchBtn icon mIcon" href="javascript:void(0);"></a>
                 </div>
                 <!-- 热门搜索关键词 -->
-                <div class="hotword">
+                <div class="hotKey">
                     <span th:each="word,wordStat: ${searchHotWord}">
                         <i th:if="${wordStat.index}>0">/</i>
-                        <a th:href="@{/product/list.html( keyword=${word} )}" target="_blank" th:text="${word}"></a>
+                        <em class="word" th:text="${word}"></em>
                     </span>
                 </div>
             </div>