PC公共布局

src/main/java/com/caimei/www/controller/ProductController.java

@@ -23,6 +23,12 @@ public class ProductController extends BaseController {
         return PRODUCT_LIST_PATH;
     }
 
+    @GetMapping("/product/search.html")
+    public String hello2(final Model model) {
+        model.addAttribute("msg", "搜索结果");
+        return PRODUCT_LIST_PATH;
+    }
+
     @GetMapping("/product/detail.html")
     public String listPage(final Model model, @RequestParam("pid") Integer productId) {
         model.addAttribute("msg", productId);

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

@@ -3,7 +3,7 @@ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,img,table,tr,th,td,form,
 body,input,textarea,button,select{font-family:Source Han Sans CN,'Microsoft YaHei',SimSun,Arial,Helvetica,sans-serif;}
 body{font-size:14px;color:#333;background:#EBECEF;}
 .clear{clear:both;}
-.clear:after{content:"";display:table;clear:both;}
+.clear:after{content:'';display:table;clear:both;}
 ::-ms-clear,::-ms-reveal{display:none;}
 a{text-decoration:none;color:#000;}
 a:focus{text-decoration:none;outline:none;}
@@ -27,9 +27,10 @@ header li,footer li{list-style:none;}
  * PC端
  */
 @media screen and (min-width:768px){
-   body{width:100%;min-width:1200px;}
+  body{width:100%;min-width:1200px;}
+  .h5Only{display:none;}
   .jqSelect{position:relative;width:100px;height:32px;line-height:32px;border:1px solid #666;border-radius:2px;cursor:pointer}
-  .jqSelect:after{content: "\276F";font-weight: normal;position: absolute;right: 10px;top: 0;transform: rotate(90deg);}
+  .jqSelect:before{content:'\276F';font-weight: normal;position: absolute;right: 10px;top: 0;transform: rotate(90deg);}
   .jqSelect select{display:none}
   .jqSelect [data-select]{display:inline-block;box-sizing:border-box;padding:0 15px;width:100%;height:32px;line-height:32px;vertical-align:middle}
   .jqSelect ul{display:none;position:absolute;left:0;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;z-index:9}
@@ -47,7 +48,7 @@ header li,footer li{list-style:none;}
   .baseHeadTop li .qrCode img{width:72px;height:72px}
   .baseHeadTop li .qrCode p{line-height:24px;white-space:nowrap;text-align:center;color:#4A4F58}
   .baseHeadTop li > a.cTab{padding-right: 18px;}
-  .baseHeadTop li > a.cTab:after{content: "\276F";font-weight: normal;position: absolute;right: 6px;top: 0;transform: rotate(90deg);}
+  .baseHeadTop li > a.cTab:after{content: '\276F';font-weight: normal;position: absolute;right: 6px;top: 0;transform: rotate(90deg);}
   .baseHeadTop li .cShow{display:none;position:absolute;right:calc((100% - 90px)/2);width:90px;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;z-index:8}
   .baseHeadTop li .cShow a{display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:center}
   .baseHeadTop li .cShow a:hover{background:#FEF6F3;color:#E15616}
@@ -56,9 +57,9 @@ header li,footer li{list-style:none;}
   .baseHeadCenter .logo{float:left;width:178px;height:44px;margin-right:122px}
   .baseHeadCenter .searchBox{width:684px;float:left}
   .baseHeadCenter .search{width:100%;height:44px;line-height:44px;border:1px solid #FFE6DC;position:relative}
-  .baseHeadCenter .search:before{content:"";position:absolute;left:104px;top:16px;height:12px;border-right:2px solid #C0C6D1}
+  .baseHeadCenter .search:before{content:'';position:absolute;left:104px;top:16px;height:12px;border-right:2px solid #C0C6D1}
   .baseHeadCenter .search .jqSelect{width:104px;height:44px;line-height:44px;border:none}
-  .baseHeadCenter .search .jqSelect:after{right:16px}
+  .baseHeadCenter .search .jqSelect:before{right:16px}
   .baseHeadCenter .search .jqSelect ul{z-index:999;}
   .baseHeadCenter .keyword{width:578px;height:44px;line-height:44px;text-indent:15px;position:absolute;right:0;top:0;border:none;outline:none}
   .baseHeadCenter .keyword:focus{outline:none;border:none}
@@ -107,20 +108,20 @@ header li,footer li{list-style:none;}
   .classifyBox .clsTab a:hover,.classifyBox .clsTab a.on{color:#E15616;border-color:#E15616}
   .classifyBox .clsCon{padding:10px 0}
   .classifyBox .line{position:relative;padding-left:100px;line-height:32px}
-  .classifyBox .line:after{content:"";position:absolute;left:100px;top:0;border-right:1px solid #FFE6DC;height:100%}
+  .classifyBox .line:after{content:'';position:absolute;left:100px;top:0;border-right:1px solid #FFE6DC;height:100%}
   .classifyBox .lft{position:absolute;top:0;left:0;width:100px;color:#000}
   .classifyBox .lft a{display:inline-block;width:100%;line-height:24px;padding:10px;box-sizing:border-box}
   .classifyBox .rgt{color:#666;padding:6px 0 6px 6px;position:relative}
   .classifyBox .rgt a{display:inline-block;height:32px;line-height:32px;padding:0 22px;cursor:pointer;color:#666}
   .classifyBox .rgt a.on,.classifyBox .clsCon .rgt a:hover{color:#e15616;background:#fbe7de}
-  .classifyBox .line:hover .rgt:after,.classifyBox .line.on .rgt:after{content:"";position:absolute;left:0;top:0;z-index:1;border-right:1px solid #E15616;height:100%}
+  .classifyBox .line:hover .rgt:after,.classifyBox .line.on .rgt:after{content:'';position:absolute;left:0;top:0;z-index:1;border-right:1px solid #E15616;height:100%}
   .classifyBox .line:hover .lft a,.classifyBox .line.on .lft a{color:#E15616}
   .classifyBox .line:hover,.classifyBox .line.on{background:#fbfafa}
   /* 底部 */
   .footTop{width:100%;padding:27px 0;background:#FFF}
   .footTop .wrap{white-space:nowrap;display:table}
   .footTop .wrap span{display:table-cell;height:70px;line-height:70px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
-  .footTop .wrap span:before{content:"";display:inline-block;width:70px;height:70px;vertical-align:middle;background:url("/img/base/icon.png") no-repeat}
+  .footTop .wrap span:before{content:'';display:inline-block;width:70px;height:70px;vertical-align:middle;background:url(/img/base/icon.png) no-repeat}
   .footTop .wrap span:nth-of-type(1):before{background-position:0 -30px}
   .footTop .wrap span:nth-of-type(2):before{background-position:-80px -30px}
   .footTop .wrap span:nth-of-type(3):before{background-position:-160px -30px}
@@ -140,7 +141,7 @@ header li,footer li{list-style:none;}
   .copyright{text-align:center;color:#FFF;font-size:12px;padding-bottom:25px}
   .copyright p{display:inline-block;white-space:nowrap;padding-left:35px;position:relative}
   .copyright p span:nth-of-type(2){margin-right:34px}
-  .copyright p:before{content:"";position:absolute;left:0;width:32px;height:32px;background:url(/img/base/icon.png) no-repeat 0 -110px}
+  .copyright p:before{content:'';position:absolute;left:0;width:32px;height:32px;background:url(/img/base/icon.png) no-repeat 0 -110px}
 
 
 
@@ -154,6 +155,49 @@ header li,footer li{list-style:none;}
 * 移动端
 */
 @media screen and (max-width:768px){
+  .jqSelect .pc,
+  .baseHeadTop,
+  .baseHeadCenter .headCart,
+  .baseHeadCenter .hotword{display:none;}
+  .mf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+  .mfbt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+  .mfi{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
+  .jqSelect{position:relative;}
+  .jqSelect select{box-sizing:border-box;width:24vw;padding: 0 6vw 0 3vw;border-radius:2px;cursor:pointer;position:relative;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;}
+  .jqSelect select::-ms-expand{display:none;}
+  .jqSelect:before{content:'\276F';font-weight:normal;position:absolute;right:3vw;top:0;transform:rotate(90deg);font-size:3.6vw;color:#4A4F58}
+  .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}
+  /* 头部 */
+  .baseHeadCenter{box-sizing:border-box;width:100%;height:26.8vw;padding:0 2vw;position:relative;background:#FFF}
+  .baseHeadCenter .logo{width:23.8vw;height:5.9vw;padding:3.75vw 0;position:absolute;top:0;left:50%;margin-left:-11.9vw}
+  .baseHeadCenter .logo img{display:block;width:23.8vw;height:5.9vw}
+  .baseHeadCenter .mClassBtn{float:left}
+  .baseHeadCenter .mUserCenter{float:right}
+  .baseHeadCenter .mClassBtn,.baseHeadCenter .mUserIcon,.baseHeadCenter .mAddCart{padding:3.5vw 2.8vw;width:6.4vw;height:6.4vw}
+  .baseHeadCenter .mClassBtn:before,.baseHeadCenter .mUserIcon:before,.baseHeadCenter .mAddCart:before{content:'';display:block;width:6.4vw;height:6.4vw}
+  .baseHeadCenter .mClassBtn:before{background-position:0 0}
+  .baseHeadCenter .mUserIcon:before{background-position:11% 0}
+  .baseHeadCenter .mAddCart:before{background-position:22% 0}
+  .baseHeadCenter .searchBox{position:absolute;top:13.4vw;left:0;width:100%;padding-top:1.8vw}
+  .baseHeadCenter .search{width:93.4vw;height:9.6vw;margin:0 auto;border:1px solid #FFE6DC;border-radius:2px;position:relative}
+  .baseHeadCenter .search .jqSelect{width:27vw;height:9.6vw;position:relative}
+  .baseHeadCenter .search .jqSelect select{width:27vw;height:9.6vw;line-height:9.6vw;border:none;font-size:3.7vw;color:#4A4F58;padding:0 6vw 0 3vw}
+  .baseHeadCenter .search .jqSelect:before{right:4vw;line-height:9.6vw}
+  .baseHeadCenter .search .jqSelect:after{content:'';position:absolute;right:0;top:3.4vw;width:.5vw;height:2.8vw;background:#BEC2C9}
+  .baseHeadCenter .search .keyword{position:absolute;right:0;top:0;border:none;outline:none;width:66.4vw;height:9.6vw;line-height:9.6vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}
+  .baseHeadCenter .search .searchBtn{position:absolute;right:1.2vw;top:0}
+  .baseHeadCenter .search .searchBtn:before{content:'';display:block;width:9.6vw;height:9.6vw;background-position:33% -1%}
+  /* 分类 */
+
+
+
+
+
+
+
+
+
+  /* 底部 */
 
 
 

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

@@ -1,4 +1,5 @@
 var spiServer = $("#spiServer").val();
+var windowWidth = $(window).width();
 var mainClassify = new Vue({
     el: '#mainClassify',
     data: {
@@ -81,8 +82,15 @@ function jqSelect(selectBox){
 
 
 $(function(){
-    jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
-    jqSelect(".jqSelect");
-    jqHoverShow(".classBtn", "#mainClassify");
+    if(windowWidth>768){
+        jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
+        jqSelect(".jqSelect");
+        jqHoverShow(".classBtn", "#mainClassify");
+    }else{
+        alert(windowWidth);
+    }
+
+
+
 
 });

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

@@ -34,9 +34,14 @@
     <!--搜索及购物车-->
     <div class="baseHeadCenter">
         <div class="wrap clear">
+            <a href="javascript:void(0);" class="h5Only mClassBtn mIcon" title="分类"></a>
             <a href="/" class="logo">
-                <img src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
+                <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
             </a>
+            <div class="mf h5Only mUserCenter">
+                <a href="javascript:void(0);" class="mUserIcon mIcon" title="个人中心"></a>
+                <a href="javascript:void(0);" class="mAddCart mIcon" title="购物车"></a>
+            </div>
             <div class="searchBox">
                 <div class="search">
                     <div class="jqSelect">
@@ -51,13 +56,13 @@
                         </select>
                     </div>
                     <input class="keyword" type="text" placeholder="请输入关键字" />
-                    <a class="searchBtn" href="javascript:void(0);"></a>
+                    <a class="searchBtn mIcon" href="javascript:void(0);"></a>
                 </div>
                 <!-- 热门搜索关键词 -->
                 <div class="hotword">
                     <span th:each="word,wordStat: ${searchHotWord}">
                         <i th:if="${wordStat.index}>0">/</i>
-                        <a th:href="@{/product/search.shtml( keyword=${word} )}" target="_blank" th:text="${word}"></a>
+                        <a th:href="@{/product/search.html( keyword=${word} )}" target="_blank" th:text="${word}"></a>
                     </span>
                 </div>
             </div>
@@ -94,7 +99,7 @@
         <div id="mainClassify" class="classifyBox">
             <div class="clsTab">
                 <template v-for="(big,i) in classify">
-                    <a :class="{'on':i==0}" v-if="big.validFlag==1" :href="'/product/category.shtml?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
+                    <a :class="{'on':i==0}" v-if="big.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
                 </template>
             </div>
             <div class="clsCon">

src/main/resources/templates/product/search.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <template th:replace="components/headLink"></template>
+    <link rel="stylesheet" th:href="@{/css/base.css(v=${version})}">
+
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!--页面主体数据-->
+<div class="container">
+    <hr>
+    <h1>搜索结果</h1>
+    <hr>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+
+</body>
+</html>