首页改版

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

@@ -24,6 +24,8 @@ public class ProductController extends BaseController {
 	private static final String PROMOTIONS_LIST_PATH = "product/promotions";
     private static final String INSTRUMENT_PAGE_PATH = "product/instrument";
     private static final String INSTRUMENT_LIST_PATH = "product/instruelist";
+    private static final String PRODUCT_PRODUCE = "product/produce";
+    private static final String PRODUCT_PRODUCE_LIST = "product/produce-list";
 
     private ProductService productService;
     @Autowired
@@ -76,4 +78,20 @@ public class ProductController extends BaseController {
     public String instruelist(){
         return INSTRUMENT_LIST_PATH;
     }
+
+    /**
+     * 仪器页
+     */
+    @GetMapping("/product/produce.html")
+    public String produce(){
+        return PRODUCT_PRODUCE;
+    }
+
+    /**
+     * 仪器列表页
+     */
+    @GetMapping("/product/produce-list.html")
+    public String producelist(){
+        return PRODUCT_PRODUCE_LIST;
+    }
 }

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

@@ -163,7 +163,7 @@ iframe{width:320px !important;height: 280px !important}
 .baseTopNav .navBox{width:500px}
 .baseTopNav .navBox ul{width:980px;}
 .baseTopNav .navBox li{float:left;position:relative}
-.baseTopNav .classifyBox{display:none;position:absolute;left:0;top:44px;z-index:990;min-height: 510px;padding: 0 0 20px 0;}
+.baseTopNav .classifyBox{display:block;position:absolute;left:0;top:44px;z-index:990;min-height: 510px;padding: 0 0 20px 0;}
 /* 分类 */
 .classifyBox{margin:0 auto;box-sizing:border-box;background:rgba(255,255,255,0.90);border-radius:0 0 2px 2px}
 .classifyBox .clsTab{height:56px;line-height:56px;white-space:nowrap;border-bottom:1px solid #FFE6DC;padding:0 30px;}
@@ -312,8 +312,8 @@ iframe{width:320px !important;height: 280px !important}
 #scrollTop .item:hover .phoneHover{display:block}
 /* 活动标签，阶梯价格 */
 .priceTag{position:relative}
-.priceTag .tag,.listTag{display:inline-block;height:24px;line-height:24px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#E15616;cursor:pointer;background:#fff;padding:0 24px 0 10px;position:relative;font-style:normal}
-.listTag{float:right;padding:0 12px;margin:12px 15px 0 0;}
+.priceTag .tag,.listTag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#E15616;cursor:pointer;background:#fff;padding:0 24px 0 10px;position:relative;font-style:normal}
+.listTag{float:right;padding:0 5px;margin:12px 15px 0 0;}
 .priceTag .tag:before{width:24px;height:24px;background-position:-88px 3px;position:absolute;right:0;top:0}
 .priceTag .tag.on:before{background-position:-117px 3px}
 .priceTag .ladder,.priceTag .promotion{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:28px;z-index:9;transition:all .8s;display:none}

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

@@ -126,6 +126,93 @@ li{list-style:none;}
     -webkit-line-clamp: 2;
     line-height: 21px;
 }
+.section_page .page_main_price{
+    width: 100%;
+    height: 54px;
+    float: left;
+    box-sizing: border-box;
+    padding: 0 8px;
+}
+.section_page .page_main_price .main_price_text{
+    width: 100%;
+    height: 54px;
+    float: left;
+    box-sizing: border-box;
+}
+.section_page .page_main_price .main_price_unde{
+    width: 100%;
+    height: 31px;
+    line-height: 31px;
+    font-size: 14px;
+    color: #4a4f58;
+    text-align: left;
+    float: left;
+}
+.section_page .page_main_price .main_price_show{
+    width: 100%;
+    height: 31px;
+    line-height: 31px;
+    font-size: 14px;
+    color: #f94b4b;
+    text-align: left;
+    float: left;
+}
+.section_page .page_main_price .main_price_show.none{
+    color: #999999;
+    text-decoration: line-through;
+}
+.section_page .page_main_price .price_text_tag{
+    width: 100%;
+    height: 22px;
+    box-sizing: border-box;
+    float: left;
+    margin-top: 3px;
+}
+.section_page .page_main_price .price_text_tag .listTag{
+    margin:0;
+    float: left;
+}
+.section_page .page_main_price .main_price_none{
+    width: 100%;
+    height: 54px;
+    padding: 16px 0;
+    box-sizing: border-box;
+}
+.section_page .page_main_price .main_price_none .listTag{
+    margin:0;
+}
+.section_page .page_main_price .price_grade{
+    float: left;
+    margin:0;
+    height: 22px;
+    line-height: 22px;
+    color: #4A4F58;
+    font-style: normal;
+    font-size: 14px;
+}
+.section_page .page_main_price .price_grade span{
+    display: inline-block;
+    float: left;
+}
+.section_page .page_main_price .icon:before{
+    width: 67px;
+    height: 22px;
+}
+.section_page .page_main_price .price_grade_1:before{
+    background-position:0 -714px;
+}
+.section_page .page_main_price .price_grade_2:before{
+    background-position:0 -744px;
+}
+.section_page .page_main_price .price_grade_3:before{
+    background-position:0 -774px;
+}
+.section_page .page_main_price .price_grade_4:before{
+    background-position:0 -804px;
+}
+.section_page .page_main_price .price_grade_5:before{
+    background-position:0 -834px;
+}
 .section_page .section_page_more{
     width: 100%;
     height: 32px;
@@ -140,14 +227,27 @@ li{list-style:none;}
     border-radius: 2px;
     border: 1px solid #cccccc;
     color: #909090;
-    text-align: center;
+    text-align: left;
     transition: all 0.2s;
     cursor: pointer;
+    padding-left: 15px;
+    box-sizing: border-box;
+    position: relative;
+}
+.section_page .section_page_more .more .icon:before{
+    background-position: -93px 7px;
+    width: 20px;
+    height: 32px;
+    right: 0;
+    position: absolute;
 }
 .section_page .section_page_more .more:hover{
     color: #E15616;
     border-color: #E15616;
 }
+.section_page .section_page_more .more:hover .icon:before{
+    background-position: -153px 7px;
+}
 /*地库供应商*/
 .section_page .section_page_bottom{
     width: 100%;

src/main/resources/static/css/product/produce-list.css

@@ -0,0 +1,201 @@
+@media screen and (min-width:768px) {
+#container {
+    width: 1184px;
+    margin: 32px auto;
+    overflow: hidden;
+}
+
+.instrue-left {
+    width: 884px;
+    float: left;
+    margin-right: 16px;
+}
+
+.instrue-left .top-category .normal-nav .nav-list {
+    display: inline-block;
+    margin: 0 16px 16px 0;
+    width: 134px;
+    height: 88px;
+    background: #fff;
+    text-align: center;
+    color: #4a4f58;
+    font-size: 16px;
+    line-height: 130px;
+    cursor: pointer;
+}
+
+.instrue-left .top-category .normal-nav .nav-list.active {
+    border: 1px solid #e15616;
+    color: #e15616;
+}
+
+.instrue-left .top-category .normal-nav .nav-list:nth-child(6) {
+    margin-right: 0
+}
+
+.instrue-right {
+    float: right;
+    width: 252px;
+    background: #fff;
+    padding: 16px;
+}
+.instrue-right .wrap_tittle{
+    padding-bottom: 10px;
+    color: #4a4f58;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #f5f5f5;
+    position: relative;
+}
+.instrue-right .hot-search{
+    padding:24px 0px 0px 0px;
+}
+.instrue-right .hot-search ul .hot-list{
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    background: #f7f7f7;
+    margin: 0 12px 12px 0;
+    padding: 0 13px;
+    color: #4a4f58;
+    cursor: pointer;
+}
+.line{
+    height: 2px;
+    width: 16px;
+    background: #e15616;
+    display: block;
+    position: absolute;
+    bottom: 0
+}
+.floorTit {
+    padding: 24px 0 16px 0;
+    position: relative;
+}
+.floorTit h2, .floorTit h3 {
+    font-weight: bold;
+    color: #4a4f58;
+    font-size: 24px;
+    line-height: 40px;
+}
+.floorTit h5 {
+    font-weight: normal;
+    color:#93979f;
+    font-size: 14px;
+    line-height: 16px;
+}
+.recommend ul li:first-child {
+    width: 524px;
+}
+
+.hotList ul li img {
+    width: 100%;
+    height: 100%;
+}
+.hotList ul{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    height: 560px;
+    overflow: hidden;
+}
+.hotList ul.height{
+    height: auto;
+}
+.hotList ul:after{
+    display:block;
+    content:"";
+    width: 164px;
+    height:0px;
+}
+.hotList ul li {
+    width: 164px;
+    height: 268px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 0 16px 0;
+    overflow: hidden;
+    display: inline-block;
+}
+.collocation ul li{
+    height: 218px;
+}
+.swiper-container ul li{
+    margin-right: 16px;
+}
+.swiper-container ul{
+   height: auto;
+}
+.collocation ul{
+    height: 468px;
+}
+.hotList ul li a{
+    display: block;
+}
+.hotList ul .productItem img{
+    width: 100%;
+    height: 164px;
+}
+.productItem .name {
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.listTag{
+   margin: 12px 8px 0 0;
+   padding: 0 2px;
+}
+.productItem .price .icon:before{
+    width: 63px;
+}
+.productItem .price .icon.i5:before {
+    background-position: -2px -832px;
+}
+.productItem .price .icon.i1:before {
+    background-position: -2px -712px;
+}
+.productItem .price .icon.i2:before {
+    background-position: -2px -742px;
+}
+.productItem .price .icon.i3:before {
+    background-position: -2px -772px;
+}
+.productItem .price .icon.i4:before {
+    background-position: -2px -802px;
+}
+.unfold{
+    width: 83px;
+    height: 32px;
+    border: 1px solid #cccccc;
+    line-height: 32px;
+    margin: 32px auto;
+    border-radius: 2px;
+    color: #909090;
+    padding-left: 13px;
+    cursor: pointer;
+    position: relative;
+}
+.icon.more:before{
+    background-position: -93px 7px;
+    width: 20px;
+    height: 32px;
+    right: 0;
+    position: absolute
+}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+}

src/main/resources/static/css/product/produce.css

@@ -0,0 +1,201 @@
+@media screen and (min-width:768px) {
+#container {
+    width: 1184px;
+    margin: 32px auto;
+    overflow: hidden;
+}
+
+.instrue-left {
+    width: 884px;
+    float: left;
+    margin-right: 16px;
+}
+
+.instrue-left .top-category .normal-nav .nav-list {
+    display: inline-block;
+    margin: 0 16px 16px 0;
+    width: 134px;
+    height: 88px;
+    background: #fff;
+    text-align: center;
+    color: #4a4f58;
+    font-size: 16px;
+    line-height: 130px;
+    cursor: pointer;
+}
+
+.instrue-left .top-category .normal-nav .nav-list.active {
+    border: 1px solid #e15616;
+    color: #e15616;
+}
+
+.instrue-left .top-category .normal-nav .nav-list:nth-child(6) {
+    margin-right: 0
+}
+
+.instrue-right {
+    float: right;
+    width: 252px;
+    background: #fff;
+    padding: 16px;
+}
+.instrue-right .wrap_tittle{
+    padding-bottom: 10px;
+    color: #4a4f58;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #f5f5f5;
+    position: relative;
+}
+.instrue-right .hot-search{
+    padding:24px 0px 0px 0px;
+}
+.instrue-right .hot-search ul .hot-list{
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    background: #f7f7f7;
+    margin: 0 12px 12px 0;
+    padding: 0 13px;
+    color: #4a4f58;
+    cursor: pointer;
+}
+.line{
+    height: 2px;
+    width: 16px;
+    background: #e15616;
+    display: block;
+    position: absolute;
+    bottom: 0
+}
+.floorTit {
+    padding: 24px 0 16px 0;
+    position: relative;
+}
+.floorTit h2, .floorTit h3 {
+    font-weight: bold;
+    color: #4a4f58;
+    font-size: 24px;
+    line-height: 40px;
+}
+.floorTit h5 {
+    font-weight: normal;
+    color:#93979f;
+    font-size: 14px;
+    line-height: 16px;
+}
+.recommend ul li:first-child {
+    width: 524px;
+}
+
+.hotList ul li img {
+    width: 100%;
+    height: 100%;
+}
+.hotList ul{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    height: 560px;
+    overflow: hidden;
+}
+.hotList ul.height{
+    height: auto;
+}
+.hotList ul:after{
+    display:block;
+    content:"";
+    width: 164px;
+    height:0px;
+}
+.hotList ul li {
+    width: 164px;
+    height: 268px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 0 16px 0;
+    overflow: hidden;
+    display: inline-block;
+}
+.collocation ul li{
+    height: 218px;
+}
+.swiper-container ul li{
+    margin-right: 16px;
+}
+.swiper-container ul{
+   height: auto;
+}
+.collocation ul{
+    height: 468px;
+}
+.hotList ul li a{
+    display: block;
+}
+.hotList ul .productItem img{
+    width: 100%;
+    height: 164px;
+}
+.productItem .name {
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.listTag{
+   margin: 12px 8px 0 0;
+   padding: 0 2px;
+}
+.productItem .price .icon:before{
+    width: 63px;
+}
+.productItem .price .icon.i5:before {
+    background-position: -2px -832px;
+}
+.productItem .price .icon.i1:before {
+    background-position: -2px -712px;
+}
+.productItem .price .icon.i2:before {
+    background-position: -2px -742px;
+}
+.productItem .price .icon.i3:before {
+    background-position: -2px -772px;
+}
+.productItem .price .icon.i4:before {
+    background-position: -2px -802px;
+}
+.unfold{
+    width: 83px;
+    height: 32px;
+    border: 1px solid #cccccc;
+    line-height: 32px;
+    margin: 32px auto;
+    border-radius: 2px;
+    color: #909090;
+    padding-left: 13px;
+    cursor: pointer;
+    position: relative;
+}
+.icon.more:before{
+    background-position: -93px 7px;
+    width: 20px;
+    height: 32px;
+    right: 0;
+    position: absolute
+}
+#recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2;}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination span.on{width:28px;opacity:1;}
+}

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

@@ -44,6 +44,10 @@ var globalHead = new Vue({
         shopId:'',
         userIdentity:'',
         articleType: '',
+        TabList:[
+            {name:'产品',link:''},
+            {name:'仪器',link:''}
+        ],
         NavsList:[
             {
                 name:'产品',
@@ -187,9 +191,10 @@ var globalHead = new Vue({
         // 导航分类数据
         getClassify: function() {
             var _self = this;
-            $.getJSON(spiServer+"/product/classify").done(function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.classify = r.data;
+            // PublicApi.GetProductClassify({},function(response){
+            //     if(response.code == 0){
+            //         _self.classify = response.data;
+            //         console.log('22222222222222222');
                     if(isPC){
                         setTimeout(function(){
                             $('#mainClassify').slide({
@@ -214,8 +219,10 @@ var globalHead = new Vue({
                             });
                         },500);
                     }
-                }
-            });
+            //     }else{
+            //         CAIMEI.Alert(response.msg, '确定');
+            //     }
+            // });
         },
         // 头部购物车数据
         getHeadCart: function(userId) {

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -7,6 +7,12 @@ var PublicApi = {
         uploadimg: function (params, callback) {//供应商添加物流上传图片
             Http.uploadImage({ url:'/formData/MultiPictareaddData',data:params},callback)
         },
+        GetProductClassify:function(params,callback){ //获取分类
+            Http.AjaxService({ url:'/product/classify', type:'get', data:params, json:false})
+                .then(function(res){
+                    callback(res)
+                });
+        },
         GetProvince:function(params,callback){ //获取省份信息
             Http.AjaxService({ url:'/club/province', type:'get', data:params, json:false})
                 .then(function(res){

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

@@ -0,0 +1,93 @@
+ var instrueMent = new Vue({
+    el:'#instrueMent',
+    data:{
+        categorylist:[
+            {name:'中胚层产品',value:'0'},
+            {name:'中胚层产品',value:'1'},
+            {name:'中胚层产品',value:'2'},
+            {name:'中胚层产品',value:'3'},
+            {name:'中胚层产品',value:'4'},
+            {name:'中胚层产品',value:'5'},
+            {name:'中胚层产品',value:'6'},
+            {name:'中胚层产品',value:'7'},
+            ],
+        hotlist:[
+            {name:'玻尿酸',value:'0'},
+            {name:'械字号',value:'1'},
+            {name:'导入液',value:'2'},
+            {name:'热门仪器',value:'3'},
+            {name:'除皱',value:'4'},
+            {name:'微整形 ',value:'5'},
+            {name:'纹绣',value:'6'},
+            {name:'美白嫩肤',value:'7'},
+        ],
+         recommendPage: 1,
+         recommends: [],
+         userId:0,
+         moreflag:true,
+    },
+    methods:{
+        seeMore:function(){
+            this.moreflag = false
+        },
+         getRecommends: function(){
+            var _self = this;
+            $.getJSON("/home/recommend").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommends = r.data;
+                    _self.recommendPage = Math.ceil(r.data.length / 5);
+                        setTimeout(function(){
+                        if (isPC) {
+                            $('#recommendBox').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,scroll:5
+                                ,vis:5
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#recommendBox', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                spaceBetween: 0,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination'
+                                }
+                            });
+                        }
+                    },500);
+                      setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500)
+                        // 获取价格
+                    var productIdArr = [];
+                    _self.recommends.map(function (item) {
+                        // 0公开价格 1不公开价格 2仅对会员机构公开
+                        if (item.priceFlag !== 1) {
+                            productIdArr.push(item.id)
+                        }
+                    });
+                    setProductPrice(_self.recommends, productIdArr.join(","), _self.userId, function () {
+                        _self.$forceUpdate();
+                    });
+                }
+            });
+        },
+    },
+    created: function() {
+    var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
+    this.getRecommends();
+    }
+ })

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

@@ -0,0 +1,93 @@
+ var instrueMent = new Vue({
+    el:'#instrueMent',
+    data:{
+        categorylist:[
+            {name:'中胚层产品',value:'0'},
+            {name:'中胚层产品',value:'1'},
+            {name:'中胚层产品',value:'2'},
+            {name:'中胚层产品',value:'3'},
+            {name:'中胚层产品',value:'4'},
+            {name:'中胚层产品',value:'5'},
+            {name:'中胚层产品',value:'6'},
+            {name:'中胚层产品',value:'7'},
+            ],
+        hotlist:[
+            {name:'玻尿酸',value:'0'},
+            {name:'械字号',value:'1'},
+            {name:'导入液',value:'2'},
+            {name:'热门仪器',value:'3'},
+            {name:'除皱',value:'4'},
+            {name:'微整形 ',value:'5'},
+            {name:'纹绣',value:'6'},
+            {name:'美白嫩肤',value:'7'},
+        ],
+         recommendPage: 1,
+         recommends: [],
+         userId:0,
+         moreflag:true,
+    },
+    methods:{
+        seeMore:function(){
+            this.moreflag = false
+        },
+         getRecommends: function(){
+            var _self = this;
+            $.getJSON("/home/recommend").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommends = r.data;
+                    _self.recommendPage = Math.ceil(r.data.length / 5);
+                        setTimeout(function(){
+                        if (isPC) {
+                            $('#recommendBox').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,scroll:5
+                                ,vis:5
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#recommendBox', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                spaceBetween: 0,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination'
+                                }
+                            });
+                        }
+                    },500);
+                      setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500)
+                        // 获取价格
+                    var productIdArr = [];
+                    _self.recommends.map(function (item) {
+                        // 0公开价格 1不公开价格 2仅对会员机构公开
+                        if (item.priceFlag !== 1) {
+                            productIdArr.push(item.id)
+                        }
+                    });
+                    setProductPrice(_self.recommends, productIdArr.join(","), _self.userId, function () {
+                        _self.$forceUpdate();
+                    });
+                }
+            });
+        },
+    },
+    created: function() {
+    var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+        }
+    this.getRecommends();
+    }
+ })

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

@@ -131,8 +131,8 @@
                     <a href="javascript:void(0);" class="close" title="关闭"></a>
                 </div>
                 <div class="clsTab">
-                    <template v-for="(big,i) in NavsList">
-                        <a :class="{'on':i==0}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>
+                    <template v-for="(tab,i) in TabList">
+                        <a :class="{'on':i==0}" href="javascript:void(0);" v-text="tab.name"></a>
                     </template>
                 </div>
                 <div class="clsCon">
@@ -157,7 +157,7 @@
                                     <div class="rgt mfw">
                                         <template v-if="tiny.threeList && tiny.threeList.length>0"   v-for="three in tiny.threeList">
                                             <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+three.tinyTypeID">
-                                                <img v-if="!isPC" :src="tiny.icon" alt="three.name">
+                                                <img v-if="!isPC" :src="three.icon" alt="three.name">
                                                 <span v-text="three.name"></span>
                                             </a>
                                         </template>

src/main/resources/templates/index.html

@@ -40,15 +40,61 @@
                                 <img class="page_main_image" :src="pros.image" alt="">
                                 <div class="page_main_text">{{ pros.name }}</div>
                                 <div class="page_main_price">
-
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                 <div class="main_price_text">
+                                                     <div class="price_text_tag">
+                                                         <p class="listTag" v-if="pros.actStatus==1">
+                                                             {{pros.promotions.name}}
+                                                             <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                         </p>
+                                                     </div>
+                                                     <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                         ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                     </div>
+                                                 </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
                                 </div>
                             </a>
                         </div>
                         <div class="section_page_more" v-if="!page.isPageMore">
-                            <div class="more" @click="showMorePageFn(page)">
-                                查看更多∨
-                            </div>
-                        </div>
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
+                         </div>
                     </template>
                     <template v-if="page.type == 2">
                         <div class="section_page_main" :class="page.isPageMore ? 'max' : ''">
@@ -58,14 +104,60 @@
                                 <img class="page_main_image" :src="pros.image" alt="">
                                 <div class="page_main_text">{{ pros.name }}</div>
                                 <div class="page_main_price">
-
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
                                 </div>
                             </a>
                         </div>
                         <div class="section_page_more" v-if="!page.isPageMore">
-                            <div class="more" @click="showMorePageFn(page)">
-                                查看更多∨
-                            </div>
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
                         </div>
                     </template>
                     <template v-if="page.type == 3">
@@ -76,14 +168,60 @@
                                 <img class="page_main_image" :src="pros.image" alt="">
                                 <div class="page_main_text">{{ pros.name }}</div>
                                 <div class="page_main_price">
-
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
                                 </div>
                             </a>
                         </div>
                         <div class="section_page_more" v-if="!page.isPageMore">
-                            <div class="more" @click="showMorePageFn(page)">
-                                查看更多∨
-                            </div>
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
                         </div>
                     </template>
                     <template v-if="page.type == 4">
@@ -95,14 +233,60 @@
                                 <img class="page_main_image" :src="pros.image" alt="">
                                 <div class="page_main_text">{{ pros.name }}</div>
                                 <div class="page_main_price">
-
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
                                 </div>
                             </a>
                         </div>
                         <div class="section_page_more" v-if="!page.isPageMore">
-                            <div class="more" @click="showMorePageFn(page)">
-                                查看更多∨
-                            </div>
+                            <div class="more" @click="showMorePageFn(page)"><i class="icon mIcon"></i>查看更多</div>
                         </div>
                     </template>
                     <template v-if="page.type == 5">
@@ -112,14 +296,60 @@
                                 <img class="page_main_image" :src="pros.image" alt="">
                                 <div class="page_main_text">{{ pros.name }}</div>
                                 <div class="page_main_price">
-
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
                                 </div>
                             </a>
                         </div>
                         <div class="section_page_more" v-if="!page.isPageMore">
-                            <div class="more" @click="showMorePageFn(page)">
-                                查看更多∨
-                            </div>
+                            <div class="more" @click="showMorePageFn(page)"> <i class="icon mIcon"></i>查看更多</div>
                         </div>
                     </template>
                     <template v-if="page.type == 6">
@@ -128,7 +358,55 @@
                                 <img class="page_main_image" :src="pros.image" alt="">
                                 <div class="page_main_text">{{ pros.name }}</div>
                                 <div class="page_main_price">
-
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
                                 </div>
                             </a>
                             <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
@@ -140,7 +418,55 @@
                                 <img class="page_main_image" :src="pros.image" alt="">
                                 <div class="page_main_text">{{ pros.name }}</div>
                                 <div class="page_main_price">
-
+                                    <template v-if="!GLOBAL_USER_ID && !GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="pros.priceFlag==1">
+                                            <!--价格未公开-->
+                                            <div class="main_price_text">
+                                                <div class="price_text_tag">
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                                <div class="main_price_unde">￥价格未公开</div>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <!--可见价格-->
+                                            <template v-if="(pros.priceFlag==0 && pros.userIdentity!=3) || pros.userIdentity==2 || (pros.userIdentity==3 && pros.supplierId==GLOBAL_SHOP_ID)">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">
+                                                            {{pros.promotions.name}}
+                                                            <span v-if="pros.priceFlag != 1">:￥{{pros.price | NumFormat}}</span>
+                                                        </p>
+                                                    </div>
+                                                    <div class="main_price_show" :class="PromotionsFormat(pros.promotions) ? 'none' : ''">
+                                                        ￥{{ (PromotionsFormat(pros.promotions) ? pros.originalPrice : pros.price ) | NumFormat  }}
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <!--仅会员机构可见-->
+                                            <template v-else-if="pros.priceFlag==2 && pros.userIdentity==4">
+                                                <div class="main_price_text">
+                                                    <div class="price_text_tag">
+                                                        <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                    </div>
+                                                    <div class="main_price_unde">￥会员可见</div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="main_price_none">
+                                                    <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                                    <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <div class="main_price_none">
+                                            <em class="price_grade"><span>￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i></em>
+                                            <p class="listTag" v-if="pros.actStatus==1">{{pros.promotions.name}}</p>
+                                        </div>
+                                    </template>
                                 </div>
                             </a>
                         </div>
@@ -217,19 +543,6 @@
         </div>
     </div>
 </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>

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

@@ -0,0 +1,17 @@
+<!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/head-link"></template>
+    <link th:href="@{/css/equipment/list.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <!-- 引用头部 -->
+    <template th:replace="components/header"></template>
+
+    <!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+</body>
+

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

@@ -0,0 +1,17 @@
+<!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/head-link"></template>
+    <link th:href="@{/css/equipment/list.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+    <!-- 引用头部 -->
+    <template th:replace="components/header"></template>
+
+    <!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+</body>
+