页面模板整合

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

@@ -1,7 +1,8 @@
 package com.caimei.www.controller;
 
-import com.caimei.module.base.entity.bo.JsonModel;
-import com.caimei.www.pojo.TopMenuVo;
+import com.caimei.www.pojo.FriendLink;
+import com.caimei.www.pojo.HelpPageType;
+import com.caimei.www.pojo.TopMenu;
 import com.caimei.www.service.BaseService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
@@ -30,15 +31,22 @@ public class BaseController {
 
 	@ModelAttribute
 	public Model init(final Model model) {
+	    // 静态文件版本号
+	    model.addAttribute("version", "1.0");
 		// spi服务器地址
 		model.addAttribute("spiServer", spiServer);
 		// 搜索热门关键字
 		List<String> searchHotWord = baseService.getSearchHotWord();
 		model.addAttribute("searchHotWord", searchHotWord);
 		// 头部菜单
-		List<TopMenuVo> menuList = baseService.getNavMenu();
+		List<TopMenu> menuList = baseService.getNavMenu();
 		model.addAttribute("topMenuList", menuList);
-
+		// 底部帮助页
+		List<HelpPageType> helpPages = baseService.getHelpPages();
+		model.addAttribute("helpPages", helpPages);
+		// 友情链接
+		List<FriendLink> friendLinks = baseService.getFriendLinks();
+		model.addAttribute("friendLinks", friendLinks);
 		return model;
 	}
 

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

@@ -3,11 +3,6 @@ package com.caimei.www.controller;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.ModelAttribute;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.thymeleaf.spring5.view.ThymeleafViewResolver;
-
-import javax.annotation.Resource;
 
 /**
  * Description

src/main/java/com/caimei/www/mapper/BaseDao.java

@@ -1,7 +1,6 @@
 package com.caimei.www.mapper;
 
-import com.caimei.www.pojo.SubMenuVo;
-import com.caimei.www.pojo.TopMenuVo;
+import com.caimei.www.pojo.*;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
 
@@ -22,9 +21,24 @@ public interface BaseDao {
     /**
      * 获取头部菜单
      */
-    List<TopMenuVo> getTopMenus();
+    List<TopMenu> getTopMenus();
     /**
      * 获取二级菜单
      */
-    List<SubMenuVo> getSubMenus(@Param("topId") Integer topId);
+    List<SubMenu> getSubMenus(@Param("topId") Integer topId);
+
+    /**
+     * 获取底部链接分类
+     */
+    List<HelpPageType> getHelpPageTypes();
+
+    /**
+     * 根据分类获取底部链接
+     */
+    List<HelpPage> getHelpPagesByType(@Param("typeId") Integer typeId);
+
+    /**
+     * 获取友情链接
+     */
+    List<FriendLink> getFriendLinks();
 }

src/main/java/com/caimei/www/pojo/FriendLink.java

@@ -0,0 +1,17 @@
+package com.caimei.www.pojo;
+
+import lombok.Data;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/6/19
+ */
+@Data
+public class FriendLink {
+	private static final long serialVersionUID = 1L;
+	private Integer id;
+	private String name;
+	private String link;
+}

src/main/java/com/caimei/www/pojo/HelpPage.java

@@ -0,0 +1,18 @@
+package com.caimei.www.pojo;
+
+import lombok.Data;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/6/19
+ */
+@Data
+public class HelpPage {
+	private static final long serialVersionUID = 1L;
+	/** 主键 helpPageID */
+	private Integer id;
+	private Integer typeId;
+	private String name;
+}

src/main/java/com/caimei/www/pojo/HelpPageType.java

@@ -0,0 +1,20 @@
+package com.caimei.www.pojo;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/6/19
+ */
+@Data
+public class HelpPageType {
+	private static final long serialVersionUID = 1L;
+	/** 主键 cHelpPageTypeID */
+	private Integer id;
+	private String name;
+	private List<HelpPage> helpPages;
+}

src/main/java/com/caimei/www/pojo/SubMenuVo.java → src/main/java/com/caimei/www/pojo/SubMenu.java

@@ -9,7 +9,8 @@ import lombok.Data;
  * @date : 2020/6/18
  */
 @Data
-public class SubMenuVo {
+public class SubMenu {
+	private static final long serialVersionUID = 1L;
 	private Integer id;
 	/** 一级导航栏ID */
 	private Integer topId;

src/main/java/com/caimei/www/pojo/TopMenuVo.java → src/main/java/com/caimei/www/pojo/TopMenu.java

@@ -11,7 +11,8 @@ import java.util.List;
  * @date : 2020/6/18
  */
 @Data
-public class TopMenuVo {
+public class TopMenu {
+	private static final long serialVersionUID = 1L;
 	private Integer id;
     /** 一级导航栏名称 */
 	private String name;
@@ -22,5 +23,5 @@ public class TopMenuVo {
 	/** 排序 */
 	private String sort;
 	/** 二级导航列表 */
-	private List<SubMenuVo> subMenus;
+	private List<SubMenu> subMenus;
 }

src/main/java/com/caimei/www/service/BaseService.java

@@ -1,6 +1,8 @@
 package com.caimei.www.service;
 
-import com.caimei.www.pojo.TopMenuVo;
+import com.caimei.www.pojo.FriendLink;
+import com.caimei.www.pojo.HelpPageType;
+import com.caimei.www.pojo.TopMenu;
 
 import java.util.List;
 
@@ -20,5 +22,15 @@ public interface BaseService {
     /**
      * 获取头部菜单
      */
-    List<TopMenuVo> getNavMenu();
+    List<TopMenu> getNavMenu();
+
+    /**
+     * 底部帮助页
+     */
+    List<HelpPageType> getHelpPages();
+
+    /**
+     * 友情链接
+     */
+    List<FriendLink> getFriendLinks();
 }

src/main/java/com/caimei/www/service/impl/BaseServiceImpl.java

@@ -1,10 +1,9 @@
 package com.caimei.www.service.impl;
 
-import com.caimei.module.base.entity.bo.JsonModel;
 import com.caimei.www.mapper.BaseDao;
-import com.caimei.www.pojo.SubMenuVo;
-import com.caimei.www.pojo.TopMenuVo;
+import com.caimei.www.pojo.*;
 import com.caimei.www.service.BaseService;
+import org.springframework.cache.annotation.Cacheable;
 import org.springframework.stereotype.Service;
 import org.springframework.util.CollectionUtils;
 import org.springframework.util.StringUtils;
@@ -27,13 +26,13 @@ public class BaseServiceImpl implements BaseService {
      * 获取搜索热门关键字
      */
     @Override
+    @Cacheable(value = "getSearchHotWord", key="'www'", unless="#result == null")
     public List<String> getSearchHotWord() {
         List<String> hotSearch = baseDao.getSearchKeyword();
         if (!CollectionUtils.isEmpty(hotSearch) && hotSearch.size() > 8) {
-            List<String> newList = hotSearch.stream()
+            return hotSearch.parallelStream()
                 .filter(str -> !StringUtils.isEmpty(str)).limit(8)
                 .collect(Collectors.toList());
-            return newList;
         } else {
             return hotSearch;
         }
@@ -43,12 +42,36 @@ public class BaseServiceImpl implements BaseService {
      * 获取头部菜单
      */
     @Override
-    public List<TopMenuVo> getNavMenu() {
-        List<TopMenuVo> menuList = baseDao.getTopMenus();
+    @Cacheable(value = "getNavMenu", key="'www'", unless="#result == null")
+    public List<TopMenu> getNavMenu() {
+        List<TopMenu> menuList = baseDao.getTopMenus();
         menuList.forEach(item -> {
-            List<SubMenuVo> subList = baseDao.getSubMenus(item.getId());
+            List<SubMenu> subList = baseDao.getSubMenus(item.getId());
             item.setSubMenus(subList);
         });
         return menuList;
     }
+
+    /**
+     * 底部帮助页
+     */
+    @Override
+    @Cacheable(value = "getHelpPages", key="'www'", unless="#result == null")
+    public List<HelpPageType> getHelpPages() {
+        List<HelpPageType> typeList = baseDao.getHelpPageTypes();
+        typeList.forEach(item -> {
+            List<HelpPage> pageList = baseDao.getHelpPagesByType(item.getId());
+            item.setHelpPages(pageList);
+        });
+        return typeList;
+    }
+
+    /**
+     * 友情链接
+     */
+    @Override
+    @Cacheable(value = "getFriendLinks", key="'www'", unless="#result == null")
+    public List<FriendLink> getFriendLinks() {
+        return baseDao.getFriendLinks();
+    }
 }

src/main/resources/config/dev/application-dev.yml

@@ -51,7 +51,8 @@ logging:
 
 # 服务域名
 caimei:
-  spiServer: http://localhost:8008
+#  spiServer: http://localhost:8008
+  spiServer: https://spi-b.caimei365.com
   imageDomain: https://img-b.caimei365.com
 
 

src/main/resources/mapper/BaseMapper.xml

@@ -6,7 +6,7 @@
         where validFlag=1
         order by sortIndex desc
     </select>
-    <select id="getTopMenus" resultType="com.caimei.www.pojo.TopMenuVo">
+    <select id="getTopMenus" resultType="com.caimei.www.pojo.TopMenu">
 		select
             id,
             navigationName as name,
@@ -18,7 +18,7 @@
 		order by sort desc,createDate desc
 		limit 7
     </select>
-    <select id="getSubMenus" resultType="com.caimei.www.pojo.SubMenuVo">
+    <select id="getSubMenus" resultType="com.caimei.www.pojo.SubMenu">
 		select
             id,
             firstNavigationId as topId,
@@ -31,4 +31,25 @@
 		and firstNavigationId = #{topId}
 		order by sort desc,createDate desc
     </select>
+    <select id="getHelpPageTypes" resultType="com.caimei.www.pojo.HelpPageType">
+		SELECT
+		c_helpPageTypeID as id,
+		c_helpPageTypeName as name
+		FROM c_helpPageType
+    </select>
+    <select id="getHelpPagesByType" resultType="com.caimei.www.pojo.HelpPage">
+		select
+            helpPageID as id,
+            helpPageTypeID as typeId,
+            title as name
+		from helpPage
+		where validFlag = 1
+		and helpPageTypeID = #{typeId}
+		order by sortIndex
+    </select>
+    <select id="getFriendLinks" resultType="com.caimei.www.pojo.FriendLink">
+		select id,name,link
+		from new_page_friendship_link
+		where delFlag = 0 order by id
+    </select>
 </mapper>

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

@@ -1,4 +1,29 @@
 @charset "utf-8";
-html,body{width:100%;height:100%;}
+html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,img,table,tr,th,td,form,input,textarea,button{margin:0;padding:0;}
+body,input,textarea,button,select{font-family:Helvetica Neue,Helvetica,'Microsoft Jhenghei','Microsoft YaHei',Arial,'Trebuchet MS',Calibri,Helvetica,sans-serif;font-size:15px;}
 .clear{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;}
+img{border:none;vertical-align:middle;}
+button{border:none;outline:none;}
+input:focus {box-shadow: 0 0 5px #003399;}
+pre{white-space:pre-wrap;}
+li{list-style-position:inside;}
+@-webkit-keyframes fadeInDown{
+  from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}
+  to{opacity:1;-webkit-transform:none;transform:none;}
+}
+@keyframes fadeInDown{
+  from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}
+  to{opacity:1;-webkit-transform:none;transform:none;}
+}
+@media screen and (min-width:768px){
+/* PC端 */
+
+}
+@media screen and (max-width:768px){
+/* 移动端 */
+
+}

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

@@ -0,0 +1,91 @@
+@charset "utf-8";
+@media screen and (min-width:768px){
+/* PC端 */
+        .slideBox {
+            width: 450px;
+            height: 230px;
+            overflow: hidden;
+            position: relative;
+            border: 1px solid #ddd;
+        }
+
+        .slideBox .hd {
+            height: 15px;
+            overflow: hidden;
+            position: absolute;
+            right: 5px;
+            bottom: 5px;
+            z-index: 1;
+        }
+
+        .slideBox .hd ul {
+            overflow: hidden;
+            zoom: 1;
+            float: left;
+        }
+
+        .slideBox .hd ul li {
+            float: left;
+            margin-right: 2px;
+            width: 15px;
+            height: 15px;
+            line-height: 14px;
+            text-align: center;
+            background: #fff;
+            cursor: pointer;
+        }
+
+        .slideBox .hd ul li.on {
+            background: #f00;
+            color: #fff;
+        }
+
+        .slideBox .bd {
+            position: relative;
+            height: 100%;
+            z-index: 0;
+        }
+
+        .slideBox .bd li {
+            zoom: 1;
+            vertical-align: middle;
+        }
+
+        .slideBox .bd img {
+            width: 450px;
+            height: 230px;
+            display: block;
+        }
+
+        /* 下面是前/后按钮代码，如果不需要删除即可 */
+        .slideBox .prev,
+        .slideBox .next {
+            position: absolute;
+            left: 3%;
+            top: 50%;
+            margin-top: -25px;
+            display: block;
+            width: 32px;
+            height: 40px;
+            background: #000 url(https://www.caimei365.com/Newindex/img/right.png);
+            filter: alpha(opacity=50);
+            opacity: 0.5;
+        }
+
+        .slideBox .next {
+            left: auto;
+            right: 3%;
+            background-position: 8px 5px;
+        }
+
+        .slideBox .prev:hover,
+        .slideBox .next:hover {
+            filter: alpha(opacity=100);
+            opacity: 1;
+        }
+
+}
+@media screen and (max-width:768px){
+/* 移动端 */
+
+}

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

@@ -1,24 +1,16 @@
-/*
-var topMenu = new Vue({
-    el: '#topMenu',
+var spiServer = $("#spiServer").val();
+var mainClassify = new Vue({
+    el: '#mainClassify',
     data: {
-        menuList: [],
         classify: []
     },
     methods: {},
     created: function () {
         var _self = this;
-        $.getJSON("/nav/menu").done(function(r){
-            if (r.code === 0 && r.data) {
-                _self.menuList = r.data;
-            }
-        });
-        $.getJSON(this.requestUrl+"/product/classify").done(function (r) {
+        $.getJSON(spiServer+"/product/classify").done(function (r) {
             if (r.code === 0 && r.data) {
                 _self.classify = r.data;
             }
         });
     }
 });
-*/
-var spiServer = $("#spiServer").val();

src/main/resources/static/js/index.js

@@ -0,0 +1,11 @@
+$(function () {
+    jQuery("#slideBox").slide({
+        mainCell:".bd ul",
+        titCell:".hd ul",
+        effect: "leftLoop",
+        vis: 1,
+        autoPlay: true,
+        autoPage: true,
+        trigger: "click"
+    });
+});

src/main/resources/static/lib/jquery.SuperSlide.2.1.3.source.js

@@ -0,0 +1,503 @@
+/*!
+ * SuperSlide v2.1.3
+ * 轻松解决网站大部分特效展示问题
+ * 详尽信息请看官网：http://www.SuperSlide2.com/
+ *
+ * Copyright 2011-至今, 大话主席
+ *
+ * 请尊重原创，保留头部版权
+ * 在保留版权的前提下可应用于个人或商业用途
+
+ * v2.1.3：处理Jquery已经弃用的API，兼容最新版本的Jquery，目前是jquery3.3.1，日后如果发现插件不兼容新版本的jquery，请联系我 305491515@qq.com
+
+ */
+
+(function($){
+	$.fn.slide=function(options){
+		$.fn.slide.defaults={
+		type:"slide", 
+		effect:"fade", 
+		autoPlay:false, 
+		delayTime:500, 
+		interTime:2500,
+		triggerTime:150,
+		defaultIndex:0,
+		titCell:".hd li",
+		mainCell:".bd",
+		targetCell:null,
+		trigger:"mouseover",
+		scroll:1,
+		vis:1,
+		titOnClassName:"on",
+		autoPage:false, 
+		prevCell:".prev",
+		nextCell:".next",
+		pageStateCell:".pageState",
+		opp: false, 
+		pnLoop:true, 
+		easing:"swing", 
+		startFun:null,
+		endFun:null,
+		switchLoad:null,
+
+		playStateCell:".playState",
+		mouseOverStop:true,
+		defaultPlay:true,
+		returnDefault:false 
+		};
+
+		return this.each(function() {
+
+			var opts = $.extend({},$.fn.slide.defaults,options);
+			var slider = $(this);
+			var effect = opts.effect;
+			var prevBtn = $(opts.prevCell, slider);
+			var nextBtn = $(opts.nextCell, slider);
+			var pageState = $(opts.pageStateCell, slider);
+			var playState = $(opts.playStateCell, slider);
+
+			var navObj = $(opts.titCell, slider);//导航子元素结合
+			var navObjSize = navObj.length;
+			var conBox = $(opts.mainCell , slider);//内容元素父层对象
+			var conBoxSize=conBox.children().length;
+			var sLoad=opts.switchLoad;
+			var tarObj = $(opts.targetCell, slider);
+
+			/*字符串转换*/
+			var index=parseInt(opts.defaultIndex);
+			var delayTime=parseInt(opts.delayTime);
+			var interTime=parseInt(opts.interTime);
+			var triggerTime=parseInt(opts.triggerTime);
+			var scroll=parseInt(opts.scroll);
+			var autoPlay = (opts.autoPlay=="false"||opts.autoPlay==false)?false:true;
+			var opp = (opts.opp=="false"||opts.opp==false)?false:true;
+			var autoPage = (opts.autoPage=="false"||opts.autoPage==false)?false:true;
+			var pnLoop = (opts.pnLoop=="false"||opts.pnLoop==false)?false:true;
+			var mouseOverStop = (opts.mouseOverStop=="false"||opts.mouseOverStop==false)?false:true;
+			var defaultPlay = (opts.defaultPlay=="false"||opts.defaultPlay==false)?false:true;
+			var returnDefault = (opts.returnDefault=="false"||opts.returnDefault==false)?false:true;
+			var vis=isNaN(opts.vis)?1:parseInt(opts.vis);
+	
+			var isIE6 = !-[1,]&&!window.XMLHttpRequest;//v2.1.2
+
+			var slideH=0;
+			var slideW=0;
+			var selfW=0;
+			var selfH=0;
+			var easing=opts.easing;
+			var inter=null;//autoPlay-setInterval 
+			var mst =null;//trigger-setTimeout
+			var rtnST=null;//returnDefault-setTimeout
+			var titOn = opts.titOnClassName;
+
+			var onIndex = navObj.index( slider.find( "."+titOn) );
+			var oldIndex = index = onIndex==-1?index:onIndex;
+			var defaultIndex = index;
+
+
+			var _ind = index;
+			var cloneNum = conBoxSize>=vis?( conBoxSize%scroll!=0?conBoxSize%scroll:scroll):0; 
+			var _tar;
+			var isMarq = effect=="leftMarquee" || effect=="topMarquee"?true:false;
+
+			var doStartFun=function(){ if ( $.isFunction( opts.startFun) ){ opts.startFun( index,navObjSize,slider,$(opts.titCell, slider),conBox,tarObj,prevBtn,nextBtn ) } }
+			var doEndFun=function(){ if ( $.isFunction( opts.endFun ) ){ opts.endFun( index,navObjSize,slider,$(opts.titCell, slider),conBox,tarObj,prevBtn,nextBtn ) } }
+			var resetOn=function(){ navObj.removeClass(titOn); if( defaultPlay ) navObj.eq(defaultIndex).addClass(titOn)  }
+
+
+
+			//单独处理菜单效果
+			if( opts.type=="menu" ){
+
+				if( defaultPlay ){ navObj.removeClass(titOn).eq(index).addClass(titOn); }
+				navObj.hover(
+						function(){
+							_tar=$(this).find( opts.targetCell );
+							var hoverInd =navObj.index($(this));
+						
+							mst = setTimeout(function(){  
+								index=hoverInd;
+								navObj.removeClass(titOn).eq	(index).addClass(titOn);
+								doStartFun();
+								switch (effect)
+								{
+									case "fade":_tar.stop(true,true).animate({opacity:"show"}, delayTime,easing,doEndFun ); break;
+									case "slideDown":_tar.stop(true,true).animate({height:"show"}, delayTime,easing,doEndFun ); break;
+								}
+							} ,opts.triggerTime);
+
+						},function(){
+							clearTimeout(mst);
+							switch (effect){ case "fade":_tar.animate( {opacity:"hide"},delayTime,easing ); break; case "slideDown":_tar.animate( {height:"hide"},delayTime,easing ); break; }
+						}
+				);
+
+				if (returnDefault){ 
+					slider.hover(function(){clearTimeout(rtnST);},function(){ rtnST = setTimeout( resetOn,delayTime ); });
+				}
+				
+
+				return;
+			}
+
+			
+			//处理分页
+			if( navObjSize==0 )navObjSize=conBoxSize;//只有左右按钮
+			if( isMarq ) navObjSize=2;
+			if( autoPage ){
+				if(conBoxSize>=vis){
+					if( effect=="leftLoop" || effect=="topLoop" ){ navObjSize=conBoxSize%scroll!=0?(conBoxSize/scroll^0)+1:conBoxSize/scroll; }
+					else{ 
+							var tempS = conBoxSize-vis;
+							navObjSize=1+parseInt(tempS%scroll!=0?(tempS/scroll+1):(tempS/scroll)); 
+							if(navObjSize<=0)navObjSize=1; 
+					}
+				}
+				else{ navObjSize=1 }
+				
+				navObj.html(""); 
+				var str="";
+
+				if( opts.autoPage==true || opts.autoPage=="true" ){ for( var i=0; i<navObjSize; i++ ){ str+="<li>"+(i+1)+"</li>" } }
+				else{ for( var i=0; i<navObjSize; i++ ){ str+=opts.autoPage.replace("$",(i+1))  } }
+				navObj.html(str); 
+				
+				var navObj = navObj.children();//重置导航子元素对象
+			}
+
+
+			if(conBoxSize>=vis){ //当内容个数少于可视个数，不执行效果。
+				conBox.children().each(function(){ //取最大值
+					if( $(this).width()>selfW ){ selfW=$(this).width(); slideW=$(this).outerWidth(true);  }
+					if( $(this).height()>selfH ){ selfH=$(this).height(); slideH=$(this).outerHeight(true);  }
+				});
+
+				var _chr = conBox.children();
+				var cloneEle = function(){ 
+					for( var i=0; i<vis ; i++ ){ _chr.eq(i).clone().addClass("clone").appendTo(conBox); } 
+					for( var i=0; i<cloneNum ; i++ ){ _chr.eq(conBoxSize-i-1).clone().addClass("clone").prependTo(conBox); }
+				}
+				
+				switch(effect)
+				{
+					case "fold": conBox.css({"position":"relative","width":slideW,"height":slideH}).children().css( {"position":"absolute","width":selfW,"left":0,"top":0,"display":"none"} ); break;
+					case "top": conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; height:'+vis*slideH+'px"></div>').css( { "top":-(index*scroll)*slideH, "position":"relative","padding":"0","margin":"0"}).children().css( {"height":selfH} ); break;
+					case "left": conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+vis*slideW+'px"></div>').css( { "width":conBoxSize*slideW,"left":-(index*scroll)*slideW,"position":"relative","overflow":"hidden","padding":"0","margin":"0"}).children().css( {"float":"left","width":selfW} ); break;
+					case "leftLoop":
+					case "leftMarquee":
+						cloneEle();
+						conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; width:'+vis*slideW+'px"></div>').css( { "width":(conBoxSize+vis+cloneNum)*slideW,"position":"relative","overflow":"hidden","padding":"0","margin":"0","left":-(cloneNum+index*scroll)*slideW}).children().css( {"float":"left","width":selfW}  ); break;
+					case "topLoop":
+					case "topMarquee":
+						cloneEle();
+						conBox.wrap('<div class="tempWrap" style="overflow:hidden; position:relative; height:'+vis*slideH+'px"></div>').css( { "height":(conBoxSize+vis+cloneNum)*slideH,"position":"relative","padding":"0","margin":"0","top":-(cloneNum+index*scroll)*slideH}).children().css( {"height":selfH} ); break;
+				}
+			}
+
+
+
+			//针对leftLoop、topLoop的滚动个数
+			var scrollNum=function(ind){ 
+				var _tempCs= ind*scroll; 
+				if( ind==navObjSize ){ _tempCs=conBoxSize; }else if( ind==-1 && conBoxSize%scroll!=0){ _tempCs=-conBoxSize%scroll; }
+				return _tempCs;
+			}
+
+			//切换加载
+			var doSwitchLoad=function(objs){ 
+
+					var changeImg=function(t){
+						for ( var i= t; i<( vis+ t); i++ ){
+								objs.eq(i).find("img["+sLoad+"]").each(function(){ 
+									var _this =  $(this);
+									_this.attr("src",_this.attr(sLoad)).removeAttr(sLoad);
+									if( conBox.find(".clone")[0] ){ //如果存在.clone
+										var chir = conBox.children();
+										for ( var j=0 ; j< chir.length ; j++ )
+										{
+											chir.eq(j).find("img["+sLoad+"]").each(function(){
+												if( $(this).attr(sLoad)==_this.attr("src") ) $(this).attr("src",$(this).attr(sLoad)).removeAttr(sLoad) 
+											})
+										}
+									}
+								})
+							}
+					}
+
+					switch(effect)
+					{
+						case "fade": case "fold": case "top": case "left": case "slideDown":
+							changeImg( index*scroll );
+							break;
+						case "leftLoop": case "topLoop":
+							changeImg( cloneNum+scrollNum(_ind) );
+							break;
+						case "leftMarquee":case "topMarquee": 
+							var curS = effect=="leftMarquee"? conBox.css("left").replace("px",""):conBox.css("top").replace("px",""); 
+							var slideT = effect=="leftMarquee"? slideW:slideH; 
+							var mNum=cloneNum;
+							if( curS%slideT!=0 ){
+								var curP = Math.abs(curS/slideT^0);
+								if( index==1 ){ mNum=cloneNum+curP }else{  mNum=cloneNum+curP-1  }
+							}
+							changeImg( mNum );
+							break;
+					}
+			}//doSwitchLoad end
+
+
+			//效果函数
+			var doPlay=function(init){
+				 // 当前页状态不触发效果
+				if( defaultPlay && oldIndex==index && !init && !isMarq ) return;
+				
+				//处理页码
+				if( isMarq ){ if ( index>= 1) { index=1; } else if( index<=0) { index = 0; } }
+				else{ 
+					_ind=index; if ( index >= navObjSize) { index = 0; } else if( index < 0) { index = navObjSize-1; }
+				}
+
+				doStartFun();
+
+				//处理切换加载
+				if( sLoad!=null ){ doSwitchLoad( conBox.children() ) }
+
+				//处理targetCell
+				if(tarObj[0]){ 
+					_tar = tarObj.eq(index);
+					if( sLoad!=null ){ doSwitchLoad( tarObj ) }
+					if( effect=="slideDown" ){
+							tarObj.not(_tar).stop(true,true).slideUp(delayTime); 
+							_tar.slideDown( delayTime,easing,function(){ if(!conBox[0]) doEndFun() }); 
+					}
+					else{
+							tarObj.not(_tar).stop(true,true).hide();
+							_tar.animate({opacity:"show"},delayTime,function(){ if(!conBox[0]) doEndFun() }); 
+					}
+				}
+				
+				if(conBoxSize>=vis){ //当内容个数少于可视个数，不执行效果。
+					switch (effect)
+					{
+						case "fade":conBox.children().stop(true,true).eq(index).animate({opacity:"show"},delayTime,easing,function(){doEndFun()}).siblings().hide(); break;
+						case "fold":conBox.children().stop(true,true).eq(index).animate({opacity:"show"},delayTime,easing,function(){doEndFun()}).siblings().animate({opacity:"hide"},delayTime,easing);break;
+						case "top":conBox.stop(true,false).animate({"top":-index*scroll*slideH},delayTime,easing,function(){doEndFun()});break;
+						case "left":conBox.stop(true,false).animate({"left":-index*scroll*slideW},delayTime,easing,function(){doEndFun()});break;
+						case "leftLoop":
+							var __ind = _ind;
+							conBox.stop(true,true).animate({"left":-(scrollNum(_ind)+cloneNum)*slideW},delayTime,easing,function(){
+								if( __ind<=-1 ){ conBox.css("left",-(cloneNum+(navObjSize-1)*scroll)*slideW);  }else if( __ind>=navObjSize ){ conBox.css("left",-cloneNum*slideW); }
+								doEndFun();
+							});
+							break;//leftLoop end
+
+						case "topLoop":
+							var __ind = _ind;
+							conBox.stop(true,true).animate({"top":-(scrollNum(_ind)+cloneNum)*slideH},delayTime,easing,function(){
+								if( __ind<=-1 ){ conBox.css("top",-(cloneNum+(navObjSize-1)*scroll)*slideH);  }else if( __ind>=navObjSize ){ conBox.css("top",-cloneNum*slideH); }
+								doEndFun();
+							});
+							break;//topLoop end
+
+						case "leftMarquee":
+							var tempLeft = conBox.css("left").replace("px",""); 
+							if(index==0 ){
+									conBox.animate({"left":++tempLeft},0,function(){
+										if( conBox.css("left").replace("px","")>= 0){ conBox.css("left",-conBoxSize*slideW) }
+									});
+							}
+							else{
+									conBox.animate({"left":--tempLeft},0,function(){
+										if(  conBox.css("left").replace("px","")<= -(conBoxSize+cloneNum)*slideW){ conBox.css("left",-cloneNum*slideW) }
+									});
+							}break;// leftMarquee end
+
+							case "topMarquee":
+							var tempTop = conBox.css("top").replace("px",""); 
+							if(index==0 ){
+									conBox.animate({"top":++tempTop},0,function(){
+										if( conBox.css("top").replace("px","")>= 0){ conBox.css("top",-conBoxSize*slideH) }
+									});
+							}
+							else{
+									conBox.animate({"top":--tempTop},0,function(){
+										if(  conBox.css("top").replace("px","")<= -(conBoxSize+cloneNum)*slideH){ conBox.css("top",-cloneNum*slideH) }
+									});
+							}break;// topMarquee end
+
+					}//switch end
+				}
+
+					navObj.removeClass(titOn).eq(index).addClass(titOn);
+					oldIndex=index;
+					if( !pnLoop ){ //pnLoop控制前后按钮是否继续循环
+						nextBtn.removeClass("nextStop"); prevBtn.removeClass("prevStop");
+						if (index==0 ){ prevBtn.addClass("prevStop"); }
+						if (index==navObjSize-1 ){ nextBtn.addClass("nextStop"); }
+					}
+
+					pageState.html( "<span>"+(index+1)+"</span>/"+navObjSize);
+
+			};// doPlay end
+
+			//初始化执行
+			if( defaultPlay ){ doPlay(true); }
+
+			if (returnDefault)//返回默认状态
+			{
+				slider.hover(function(){ clearTimeout(rtnST) },function(){
+						rtnST = setTimeout( function(){
+							index=defaultIndex;
+							if(defaultPlay){ doPlay(); }
+							else{
+								if( effect=="slideDown" ){ _tar.slideUp( delayTime, resetOn ); }
+								else{ _tar.animate({opacity:"hide"},delayTime,resetOn ); }
+							}
+							oldIndex=index;
+						},300 );
+				});
+			}
+			
+			///自动播放函数
+			var setInter = function(time){ inter=setInterval(function(){  opp?index--:index++; doPlay() }, !!time?time:interTime);  }
+			var setMarInter = function(time){ inter = setInterval(doPlay, !!time?time:interTime);  }
+			// 处理mouseOverStop
+			var resetInter = function(){ if( !mouseOverStop && autoPlay &&  !playState.hasClass("pauseState") ){clearInterval(inter); setInter() } } /* 修复 mouseOverStop 和 autoPlay均为false下，点击切换按钮后会自动播放bug */
+			// 前后按钮触发
+			var nextTrigger = function(){ if ( pnLoop || index!=navObjSize-1 ){ index++; doPlay(); if(!isMarq)resetInter(); } }
+			var prevTrigger = function(){ if ( pnLoop || index!=0 ){ index--; doPlay(); if(!isMarq)resetInter(); } }
+			//处理playState
+			var playStateFun = function(){ clearInterval(inter); isMarq?setMarInter():setInter(); playState.removeClass("pauseState") }
+			var pauseStateFun = function(){ clearInterval(inter);playState.addClass("pauseState"); }
+
+			//自动播放
+			if (autoPlay) {
+					if( isMarq ){ 
+						opp?index--:index++; setMarInter();
+						if(mouseOverStop) conBox.hover(pauseStateFun,playStateFun);
+					}else{
+						setInter();
+						if(mouseOverStop) slider.hover( pauseStateFun,playStateFun );
+					}
+			}
+			else{ if( isMarq ){ opp?index--:index++; } playState.addClass("pauseState"); }
+
+
+			//暂停按钮
+			playState.click(function(){  playState.hasClass("pauseState")?playStateFun():pauseStateFun()  });
+
+			//titCell事件
+			if(opts.trigger=="mouseover"){
+				navObj.hover(function(){ var hoverInd = navObj.index(this);  mst = setTimeout(function(){  index=hoverInd; doPlay(); resetInter();  },opts.triggerTime); }, function(){ clearTimeout(mst) });
+			}else{ navObj.click(function(){ index=navObj.index(this); doPlay(); resetInter(); })  }
+
+			//前后按钮事件
+			if (isMarq){
+				
+				nextBtn.mousedown(nextTrigger);
+				prevBtn.mousedown(prevTrigger);
+				//前后按钮长按10倍加速
+				if (pnLoop)
+				{	
+					var st;
+					var marDown = function(){ st=setTimeout(function(){ clearInterval(inter); setMarInter( interTime/10^0 ) },150) }
+					var marUp = function(){ clearTimeout(st); clearInterval(inter); setMarInter() }
+					nextBtn.mousedown(marDown); nextBtn.mouseup(marUp);
+					prevBtn.mousedown(marDown); prevBtn.mouseup(marUp);
+				}
+				//前后按钮mouseover事件
+				if( opts.trigger=="mouseover"  ){ nextBtn.hover(nextTrigger,function(){}); prevBtn.hover(prevTrigger,function(){}); }
+			}else{
+				nextBtn.click(nextTrigger);
+				prevBtn.click(prevTrigger);
+			}
+
+
+			//检测设备尺寸变化
+			if ( opts.vis == "auto" && scroll==1  && ( effect=="left" || effect=="leftLoop" )  ){
+
+				var resizeTimer;
+				
+				var orientationChange = function(){ 
+					
+					if (isIE6){
+						conBox.width("auto"); 
+						conBox.children().width("auto");
+					}
+					conBox.parent().width("auto"); 
+					slideW = conBox.parent().width();
+
+					if (isIE6){  conBox.parent().width(slideW) }
+
+					conBox.children().width(slideW);
+
+					if ( effect=="left" ){
+						conBox.width( slideW * conBoxSize);
+						conBox.stop(true,false).animate({"left":-index*slideW},0);
+					}else{
+						conBox.width( slideW * (conBoxSize+2));
+						conBox.stop(true,false).animate({"left":-(index+1)*slideW},0);
+					}
+
+					if (!isIE6 && (slideW != conBox.parent().width()) ){
+						orientationChange();
+					}
+					
+				} 
+
+				$(window).resize(function(){
+
+					clearTimeout(resizeTimer);
+					resizeTimer = setTimeout(orientationChange, 100);
+				
+				});
+				orientationChange();
+			}
+
+
+    	});//each End
+
+	};//slide End
+
+})(jQuery);
+
+jQuery.easing['jswing'] = jQuery.easing['swing'];
+jQuery.extend( jQuery.easing,
+{
+	def: 'easeOutQuad',
+	swing: function (x, t, b, c, d) { return jQuery.easing[jQuery.easing.def](x, t, b, c, d); },
+	easeInQuad: function (x, t, b, c, d) {return c*(t/=d)*t + b;},
+	easeOutQuad: function (x, t, b, c, d) {return -c *(t/=d)*(t-2) + b},
+	easeInOutQuad: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t + b;return -c/2 * ((--t)*(t-2) - 1) + b},
+	easeInCubic: function (x, t, b, c, d) {return c*(t/=d)*t*t + b},
+	easeOutCubic: function (x, t, b, c, d) {return c*((t=t/d-1)*t*t + 1) + b},
+	easeInOutCubic: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t + b;return c/2*((t-=2)*t*t + 2) + b},
+	easeInQuart: function (x, t, b, c, d) {return c*(t/=d)*t*t*t + b},
+	easeOutQuart: function (x, t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b},
+	easeInOutQuart: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t + b;return -c/2 * ((t-=2)*t*t*t - 2) + b},
+	easeInQuint: function (x, t, b, c, d) {return c*(t/=d)*t*t*t*t + b},
+	easeOutQuint: function (x, t, b, c, d) {return c*((t=t/d-1)*t*t*t*t + 1) + b},
+	easeInOutQuint: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;return c/2*((t-=2)*t*t*t*t + 2) + b},
+	easeInSine: function (x, t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b},
+	easeOutSine: function (x, t, b, c, d) {return c * Math.sin(t/d * (Math.PI/2)) + b},
+	easeInOutSine: function (x, t, b, c, d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b},
+	easeInExpo: function (x, t, b, c, d) {return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b},
+	easeOutExpo: function (x, t, b, c, d) {return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b},
+	easeInOutExpo: function (x, t, b, c, d) {if (t==0) return b;if (t==d) return b+c;if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;return c/2 * (-Math.pow(2, -10 * --t) + 2) + b},
+	easeInCirc: function (x, t, b, c, d) {return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b},
+	easeOutCirc: function (x, t, b, c, d) {return c * Math.sqrt(1 - (t=t/d-1)*t) + b},
+	easeInOutCirc: function (x, t, b, c, d) {if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b},
+	easeInElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b},
+	easeOutElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b},
+	easeInOutElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b},
+	easeInBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*(t/=d)*t*((s+1)*t - s) + b},
+	easeOutBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b},
+	easeInOutBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158; 
+		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b},
+	easeInBounce: function (x, t, b, c, d) {return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b},
+	easeOutBounce: function (x, t, b, c, d) {if ((t/=d) < (1/2.75)) {	return c*(7.5625*t*t) + b;} else if (t < (2/2.75)) {	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;} else if (t < (2.5/2.75)) {	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;} else {	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;}},
+	easeInOutBounce: function (x, t, b, c, d) {if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;}
+});

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

@@ -1 +1,105 @@
-<header>footer</header>
+<footer xmlns:th="http://www.w3.org/1999/xhtml">
+    <div>
+        <div>
+            <img src="/img/base/foot_guo.png">
+            <span>国内首家美业共享平台</span>
+        </div>
+        <div>
+            <img src="/img/base/foot_zheng.png">
+            <span>采美正品联盟货源保证</span>
+        </div>
+        <div>
+            <img src="/img/base/foot_ru.png">
+            <span>5000+美容机构入驻</span>
+        </div>
+        <div>
+            <img src="/img/base/foot_sup.png">
+            <span>100+国际国内知名供应商</span>
+        </div>
+    </div>
+    <!--底部帮助页-->
+    <div>
+        <div th:each="type: ${helpPages}">
+            <span th:text="${type.name}"></span>
+            <a th:each="page: ${type.helpPages}" th:href="@{/help.html( id=${page.id} )}" th:text="${page.name}"></a>
+        </div>
+    </div>
+    <!--二维码-->
+    <div>
+        <div>
+            <div>
+                <img src="/img/base/qr_code_caimei.png"/>
+                <p>采美商城</p>
+                <div class="hover">
+                    <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
+                    <p>微信扫一扫<br/>关注采美365网</p>
+                </div>
+            </div>
+            <div>
+                <img src="/img/base/qr_code_applets.png"/>
+                <p>采美小程序</p>
+                <div class="hover">
+                    <img src="/img/base/qr_code_applets.png" alt="采美小程序"/>
+                    <p>微信扫一扫<br/>查看采美小程序</p>
+                </div>
+            </div>
+            <div>
+                <img src="/img/base/qr_code_hehe.png"/>
+                <p>呵呵商城</p>
+                <div class="hover">
+                    <img src="/img/base/qr_code_hehe.png" alt="采美小程序"/>
+                    <p>微信扫一扫<br/>关注呵呵商城</p>
+                </div>
+            </div>
+            <div>
+                <img src="/img/base/qr_code_kefu.png"/>
+                <p>采美客服</p>
+                <div class="hover">
+                    <img src="/img/base/qr_code_kefu.png" alt="采美小程序"/>
+                    <p>微信扫一扫<br/>添加客服了解更多</p>
+                </div>
+            </div>
+        </div>
+        <div>
+            <p>座机：0755-22907771</p>
+            <p>手机 : 153-3885-1365</p>
+            <p>（周一至周五 09:00-18:00）</p>
+        </div>
+    </div>
+
+    <div>
+        <p>合作品牌</p>
+        <a href="/supplier.html?sid=1237"><img src="/img/brands/1.png"/></a>
+        <a href="/supplier.html?sid=1172"><img src="/img/brands/2.png"/></a>
+        <a href="/supplier.html?sid=1173"><img src="/img/brands/3.png"/></a>
+        <a href="/supplier.html?sid=1040"><img src="/img/brands/4.png"/></a>
+        <a href="/supplier.html?sid=1208"><img src="/img/brands/5.png"/></a>
+        <a href="/supplier.html?sid=1242"><img src="/img/brands/6.png"/></a>
+        <a href="/supplier.html?sid=1234"><img src="/img/brands/7.png"/></a>
+        <a href="/supplier.html?sid=1205"><img src="/img/brands/8.png"/></a>
+        <a href="/supplier.html?sid=1241"><img src="/img/brands/9.png"/></a>
+        <a href="/supplier.html?sid=1225"><img src="/img/brands/10.png"/></a>
+        <a href="/supplier.html?sid=1218"><img src="/img/brands/11.png"/></a>
+        <a href="/supplier.html?sid=1211"><img src="/img/brands/12.png"/></a>
+        <a href="/supplier.html?sid=1193"><img src="/img/brands/13.png"/></a>
+        <a href="/supplier.html?sid=1184"><img src="/img/brands/14.png"/></a>
+    </div>
+
+    <div class="new-link-right">
+        <p>中华人民共和国增值电信业务经营许可证</p>
+        <p>粤B1-20160129 备案号 粤ICP备14019824号</p>
+        <p>深圳市采美信息技术有限公司</p>
+        <p>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved</p>
+    </div>
+
+    <!--友情链接-->
+    <div>
+        <a th:each="friend: ${friendLinks}" th:href="${friend.link}" th:text="${friend.name}"></a>
+    </div>
+
+
+</footer>
+<script type="text/javascript" src="/lib/jquery-3.5.1.js"></script>
+<script type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
+<script type="text/javascript" src="/lib/vue2.6.11.js"></script>
+<script type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>

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

@@ -0,0 +1,10 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<meta http-equiv="keywords" content="采美、易耗品商城、光电美容仪器项目、光电中心、皮肤管理中心、光电转型、美容院转型、光电美容">
+<meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
+<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
+
+

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

@@ -16,14 +16,14 @@
         <li class="qr-code">
             <a href="javascript:void(0);">采美365公众号</a>
             <div class="hover">
-                <img src="/img/home/qr_code_caimei365.jpg" alt="采美365网"/>
+                <img src="/img/base/qr_code_caimei.png" alt="采美365网"/>
                 <p>扫描关注<br/>获取更多优惠信息</p>
             </div>
         </li>
         <li class="qr-code">
             <a href="javascript:void(0);">呵呵商城</a>
             <div class="hover">
-                <img src="/img/home/qr_code_hehe.jpg" alt="呵呵商城"/>
+                <img src="/img/base/qr_code_hehe.png" alt="呵呵商城"/>
                 <p>扫描关注<br/>获取更多优惠信息</p>
             </div>
         </li>
@@ -32,7 +32,7 @@
     <div>
         <div>
             <a href="/" class="logo">
-                <img src="/img/logo.png" alt="采美"/>
+                <img src="/img/base/logo.png" alt="采美"/>
                 <span>生美/医美采购服务平台</span>
             </a>
             <div class="search">
@@ -57,12 +57,32 @@
         <div id="topMenu">
             <div>
                 <a href="javascript:void(0);">商品分类</a>
-                <div>
-
+                <!--商品分类（异步数据）-->
+                <div id="mainClassify">
+                    <div class="tab-tit">
+                        <template v-for="big in classify">
+                            <a v-if="big.validFlag==1" :href="'/product/category.shtml?category='+big.bigTypeID+'-0-0'" v-text="big.name"></a>
+                        </template>
+                    </div>
+                    <div class="tab-con">
+                        <div class="type-item" v-for="big in classify" :bid="big.bigTypeID">
+                            <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
+                                <div class="lft">
+                                    <a :href="'/product/category.shtml?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
+                                </div>
+                                <div class="rgt">
+                                    <template v-for="tiny in small.tinytypeList">
+                                        <a v-if="tiny.validFlag==1" :href="'/product/category.shtml?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <nav>
                 <ul>
+                    <!--导航菜单-->
                     <li th:each="menu: ${topMenuList}">
                         <a href="javascript:void(0);" th:text="${menu.name}"></a>
                         <div th:if="${not #lists.isEmpty(menu.subMenus)}">
@@ -74,32 +94,4 @@
         </div>
     </div>
     <input type="hidden" th:value="${spiServer}" id="spiServer">
-<style>
-    ul{
-        width:1200px;
-        margin:0 auto;
-        display:-webkit-box;
-        display:-webkit-flex;
-        display:-ms-flexbox;
-        display:flex;
-        -webkit-box-pack:end;
-        -webkit-justify-content:flex-end;
-        justify-content:end;
-    }
-    li {
-        position: relative;
-        display: inline-block;
-        /*height: 40px;*/
-        line-height: 40px;
-        cursor: pointer;
-        font-size: 12px;
-        padding: 0 10px;
-        vertical-align: top;
-        font-weight: bold;
-        color: #333;
-    }
-   .qr-code .hover {
-
-   }
-</style>
 </header>

src/main/resources/templates/index.html

@@ -1,26 +1,50 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="https://www.thymeleaf.org">
+<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>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <template th:replace="components/headLink"></template>
+    <link rel="stylesheet" th:href="@{/css/base.css(v=${version})}">
+    <link rel="stylesheet" th:href="@{/css/index.css(v=${version})}">
 </head>
 <body>
-    <!-- 引用头部 -->
-    <div th:replace="components/header"></div>
-    <div class="container">
-        欢迎
-        <p th:text="${msg}"></p>
-        <p th:text="${spiUrl}"></p>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!--首页图片轮播-->
+<div id="slideBox" class="slideBox">
+    <div class="bd">
+        <ul>
+            <li><img src="https://img.caimei365.com/group1/M00/03/AF/Cmis217Yi6KAXnQKAAP5ngp7sCA674.jpg"/></li>
+            <li><img src="https://img.caimei365.com/group1/M00/03/82/Cmis214ELu-AX44HAA9XWOOwD7A606.jpg"/></li>
+            <li><img src="https://img.caimei365.com/group1/M00/03/91/Cmis2F7scIiAJ6N5AAg-zSrJHJ8792.jpg"/></li>
+        </ul>
+    </div>
+    <div class="hd">
+        <ul>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+        </ul>
     </div>
-    <!-- 引入底部 -->
-    <div th:replace="components/footer"></div>
+    <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
+    <a class="prev" href="javascript:void(0)"></a>
+    <a class="next" href="javascript:void(0)"></a>
+</div>
+<!--页面主体数据-->
+<div class="container">
+    <hr>
+    <h1>首页</h1>
+    <p th:text="${msg}"></p>
+    <p th:text="${spiServer}"></p>
+    <h1>首页</h1>
+    <hr>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<script type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
 
 
-    <script type="text/javascript" src="/lib/jquery-3.5.1.js"></script>
-    <script type="text/javascript" src="/lib/vue2.6.11.js"></script>
-    <script type="text/javascript" src="/js/base.js"></script>
 </body>
 </html>

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

@@ -1,20 +1,25 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="https://www.thymeleaf.org">
+<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>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <template th:replace="components/headLink"></template>
+    <link rel="stylesheet" th:href="@{/css/base.css(v=${version})}">
+
 </head>
 <body>
-    <!-- 引用头部 -->
-    <div th:replace="components/header"></div>
-    <div class="container">
-        商品列表
-        <p th:text="${msg}"></p>
-    </div>
-    <!-- 引入底部 -->
-    <div th:replace="components/footer"></div>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!--页面主体数据-->
+<div class="container">
+    <hr>
+    <h1>商品列表</h1>
+    <hr>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+
 </body>
 </html>