采美百科上测试

src/main/resources/static/css/encyclopedia/common.css

@@ -26,7 +26,7 @@ body{padding-top:80px}
 .navbar .search .search-control .search-input::placeholder{color:#9aa5b5;font-size:14px}
 .navbar .search .search-control .search-btn{display:block;width:64px;height:36px;border:0;background:#e15616;border-radius:0px 2px 2px 0px;cursor:pointer;font-size:14px;color:#ffffff}
 .navbar .search .search-control .hot-keyword{display:none}
-.navbar .search .keywords{width:336px;font-size:12px;margin-top:4px;color:#ffb496;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
+.navbar .search .keywords{width:336px;font-size:12px;margin-top:4px;color:#ffb496;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space: nowrap;}
 .navbar .search .keywords .close-btn{display:none}
 .navbar .search .keywords a{color:#ffb496}
 .navbar .search .keywords a:hover{color:#e15616}

src/main/resources/static/css/encyclopedia/contact.css

@@ -5,7 +5,7 @@
 .page-title .title h2{color:#fff;width:124px;font-size:30px}
 .page-title .title .line{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-left:7px;height:1px;background:rgba(255,255,255,0.2)}
 .page-title .title .line::after{content:"";display:inline-block;width:16px;height:2px;background:#ffffff;opacity:0.72}
-.page-title .subtitle{margin-top:8px;font-size:12px;color:#ffffff;opacity:0.6}
+.page-title .subtitle{margin-top:8px;font-size:12px;color:#ffffff;opacity:0.6;text-transform: uppercase;}
 .page-title .subtitle span{display:inline-block;width:38px;height:1px;background:#ffffff;vertical-align:middle;margin-right:8px}
 .contact{position:relative;height:630px}
 .contact .content{height:713px;padding:40px 55px;background:#ffffff;border-radius:2px;-webkit-transform:translateY(-80px);-ms-transform:translateY(-80px);transform:translateY(-80px);-webkit-box-shadow:0 0 16px rgba(0,0,0,0.1);box-shadow:0 0 16px rgba(0,0,0,0.1);-webkit-box-sizing:border-box;box-sizing:border-box}

src/main/resources/static/css/encyclopedia/index.css

@@ -1,5 +1,15 @@
 @charset "UTF-8";
 @media screen and (min-width:768px){
+.color0{ color: #EB2F96 !important;}
+.color1{ color: #9254DE !important;}
+.color2{ color: #00BE6F !important;}
+.color3{ color: #FD8321 !important;}
+.color4{ color: #EB2F96 !important;}
+.color5{ color: #9254DE !important;}
+.color6{ color: #FF4D4F !important;}
+.color7{ color: #40A9FF !important;}
+.color8{ color: #FCC004 !important;}
+.color9{ color: #3AD0CA !important;}
 .flex-between-center,.floor .article .section .content .footer,.floor .emtyp,.category .name,.category{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 .banner{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}
 .banner img{width:1920px;height:510px}

src/main/resources/static/js/encyclopedia/common.js

@@ -383,6 +383,9 @@ $(function () {
     });
     // 搜索框内容为空时阻止表单提交
     $('form').submit(function(){
-        if(!$('#searchKeyword').val()) return false;
+        const searchKeyword =  $('#searchKeyword');
+        const val = searchKeyword.val().trim();
+        searchKeyword.val(val);
+        if(!searchKeyword) return false;
     });
 });

src/main/resources/static/js/encyclopedia/detail.js

@@ -2,27 +2,28 @@
 
 $(function () {
     // 页面滚动偏移
-    var offset = 0; // 生成导航
-
+    var offset = 0;
+    var windowWidth = $(window).width();
+    var timer = null; // 定时器
+    var middleScreenWidth = 1450;
+    // 生成导航
     makeNavigate('.section h2', '.navigate');
-
-    if ($(window).width() > 768) {
+    if (windowWidth > 768) {
         offset = getScrollOffset('.navbar') + 10;
     } else {
         offset = getScrollOffset(['.navbar', '.navigate']) + 10;
-    } // 侧边导航跳转
-
-
+    }
+    // 侧边导航跳转
     bindCategory('.navigate li', '.section', offset, function (index) {
         activeCategory('.navigate li', index);
-    }); // 页面滚动观测
-
+    });
+    // 页面滚动观测
     pageScrollObserve('.section', offset, function (el, index) {
         if (index > -1) {
             activeCategory('.navigate li', index);
         }
-    }); // 常见问题展开收起
-
+    });
+    // 常见问题展开收起
     $('[data-toggle="collapse"]').each(function (index, el) {
         var targetEl = $(el).attr('data-target');
         if (!targetEl) return;
@@ -39,4 +40,30 @@ $(function () {
     $('#contactPopupClose').on('click', function () {
         $('#contactPopup').hide();
     });
+    // 切换显示侧边导航
+    function toggleNavigate(selector, time, maxWidth, offset) {
+        selector = $(selector);
+        if(windowWidth <= middleScreenWidth){
+            selector.hide();
+        }
+        // 鼠标移动事件
+        $('body').on('mousemove', function (e) {
+            var width = $(this).width();
+            if (!(e.clientX > width - offset && width <= maxWidth)) return;
+            clearTimeout(timer);
+            selector.fadeIn();
+            timer = setTimeout(function () {
+                selector.fadeOut();
+            }, time)
+        });
+        // 窗口大小改变
+        $(window).resize(function () {
+            if ($(this).width() <= maxWidth) {
+                selector.hide();
+            }else{
+                selector.show();
+            }
+        });
+    }
+    toggleNavigate('.navigate', 1000, middleScreenWidth, 80);
 });

src/main/resources/static/js/encyclopedia/search.js

@@ -35,7 +35,6 @@ var search = new Vue({
     methods: {
         // 初始化关键字
         initSearchWord: function () {
-            console.log(decodeURI(window.location.search.slice(1)));
             var query = this.queryString(window.location.search.slice(1));
             document.querySelector('#searchKeyword').value = query.keyword;
             this.listQuery.keyword = query.keyword || '';

src/main/resources/templates/encyclopedia/about.html

@@ -5,14 +5,30 @@
     <meta charset="UTF-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>采美百科关于我们呢</title>
+    <title>采美百科-联系我们</title>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/contact.css(v=${version})}"/>
 </head>
 <body>
 <!-- 引用公共头部 -->
 <template th:replace="encyclopedia/components/header"></template>
+<!-- 页面标题 -->
+<div class="page-title">
+    <div class="container">
+        <div class="title">
+            <h2>关于我们</h2>
+            <div class="line"></div>
+        </div>
+        <p class="subtitle"><span></span>about us</p>
+    </div>
+</div>
+<div class="contact container">
+    <div class="content">
+
+    </div>
+</div>
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
 </body>

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

@@ -32,11 +32,11 @@
                 <span>热门搜索：</span>
                 <!--跳转方式：1仅搜索，2产品，3仪器，4链接-->
                 <th:block th:each="item,stat: ${searchHotWord}" th:object="${item}">
-                    <a th:href="*{'search.html?keyword=' + keyWord}" th:if="*{jumpType eq 1}" th:text="*{keyWord}"></a>
-                    <a th:href="*{'product-' + productId + '.html'}" th:if="*{jumpType eq 2}" th:text="*{keyWord}"></a>
-                    <a th:href="*{'instrument-' + productId + '.html'}" th:if="*{jumpType eq 3}" th:text="*{keyWord}"></a>
-                    <a th:href="*{jumpLink}" th:if="*{jumpType eq 4}" th:text="*{keyWord}"></a>
-                    <em th:if="${stat.size gt 1}">/</em>
+                    <a th:href="*{'search.html?keyword=' + keyWord}" th:if="*{jumpType eq 1}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <a th:href="*{'product-' + productId + '.html'}" th:if="*{jumpType eq 2}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <a th:href="*{'instrument-' + productId + '.html'}" th:if="*{jumpType eq 3}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <a th:href="*{jumpLink}" th:if="*{jumpType eq 4}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <em th:if="${stat.size gt 1 and stat.size ne stat.index + 1}">/</em>
                 </th:block>
             </div>
         </div>

src/main/resources/templates/encyclopedia/instrument.html

@@ -16,7 +16,7 @@
 <template th:replace="encyclopedia/components/header"></template>
 <!-- banner -->
 <div class="banner">
-    <img th:src="${banner.image}" th:alt="${banner.link}"/>
+    <a th:href="${banner.link}"><img th:src="${banner.image}" th:alt="${banner.link}"/></a>
 </div>
 <!-- 产品 / 仪器分类 -->
 <div class="category container" id="category">
@@ -37,14 +37,14 @@
 <div class="floor-list">
     <div class="floor" th:each="floor,floorStat : ${typeData}" th:if="${floor.productList.size} > 0">
         <div class="floor-title">
-            <h2 th:text="${floor.name}"></h2>
+            <h2 th:text="${floor.name}" th:class="'color' + ${floor.typeId % 10}"></h2>
             <div class="h5-more-btn">
                 <a th:href="'more-' + ${floor.typeId} + '-1-12.html'">
                     <span>更多</span>
                     <i class="icon arrowright"></i>
                 </a>
             </div>
-            <img src="/img/encyclopedia/01.png" th:alt="${floor.name}"/>
+            <img th:src="'/img/encyclopedia/title-bg-' + ${floor.typeId % 10} + '.png'" th:alt="${floor.name}"/>
         </div>
         <article class="article container">
             <section class="section" th:each="item,stat : ${floor.productList}" th:object="${item}">
@@ -67,7 +67,7 @@
                         <div class="dashed-line"></div>
                         <footer class="footer">
                             <time>日期：<span th:text="*{publishTime}"></span></time>
-                            <span>浏览量：<span th:text="*{pv lt 1000 ? pv : '999+'}"></span></span>
+                            <span>浏览量：<span th:text="*{pv lt 10000 ? pv : '9999+'}"></span></span>
                         </footer>
                     </div>
                 </a>

src/main/resources/templates/encyclopedia/more.html

@@ -18,8 +18,8 @@
 <!-- 分类楼层 -->
 <div class="floor container more-floor" id="moreFloor" th:object="${moreData}">
     <div class="floor-title" th:id="${moreData}">
-        <h2 th:text="*{typeName}"></h2>
-        <img src="/img/encyclopedia/01.png" alt="中胚层产品"/>
+        <h2 th:text="*{typeName}" th:class="'color' + *{typeId % 10}"></h2>
+        <img th:src="'/img/encyclopedia/title-bg-' + *{typeId % 10} + '.png'" alt="中胚层产品"/>
     </div>
     <article class="article">
         <section class="section" th:each="item: *{results}">
@@ -43,7 +43,7 @@
                     <div class="dashed-line"></div>
                     <footer class="footer">
                         <time>日期：<span th:text="${item.publishTime}"></span></time>
-                        <span>浏览量：<span th:text="${item.pv lt 1000 ? item.pv : '999+'}"></span></span>
+                        <span>浏览量：<span th:text="${item.pv lt 10000 ? item.pv : '9999+'}"></span></span>
                     </footer>
                 </div>
             </a>

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

@@ -16,7 +16,7 @@
 <template th:replace="encyclopedia/components/header"></template>
 <!-- banner -->
 <div class="banner">
-    <img th:src="${banner?.image}" th:alt="${banner?.link}"/>
+    <a th:href="${banner.link}"><img th:src="${banner.image}" th:alt="${banner.link}"/></a>
 </div>
 <!-- 产品 / 仪器分类 -->
 <div class="category container" id="category">
@@ -35,16 +35,16 @@
 </div>
 <!-- 分类楼层 -->
 <div class="floor-list">
-    <div class="floor" th:each="floor : ${typeData}" th:if="${floor.productList.size} > 0">
+    <div class="floor" th:each="floor,floorStat : ${typeData}" th:if="${floor.productList.size} > 0">
         <div class="floor-title">
-            <h2 th:text="${floor?.name}"></h2>
+            <h2 th:text="${floor?.name}" th:class="'color' + ${floor.typeId % 10}"></h2>
             <div class="h5-more-btn">
                 <a th:href="'more-' + ${floor.typeId} + '-1-12.html'">
                     <span>更多</span>
                     <i class="icon arrowright"></i>
                 </a>
             </div>
-            <img src="/img/encyclopedia/01.png" th:alt="${floor.name}"/>
+            <img th:src="'/img/encyclopedia/title-bg-' + ${floor.typeId % 10} + '.png'" th:alt="${floor.name}"/>
         </div>
         <article class="article container">
             <section class="section" th:each="item,stat : ${floor.productList}" th:object="${item}">
@@ -67,7 +67,7 @@
                         <div class="dashed-line"></div>
                         <footer class="footer">
                             <time>日期：<span th:text="*{publishTime}"></span></time>
-                            <span>浏览量：<span th:text="*{pv lt 1000 ? pv : '999+'}"></span></span>
+                            <span>浏览量：<span th:text="*{pv lt 10000 ? pv : '9999+'}"></span></span>
                         </footer>
                     </div>
                 </a>