zhengjinyi %!s(int64=4) %!d(string=hai) anos
pai
achega
fed90b15cc

+ 77 - 53
src/main/resources/static/css/base/base.pc.css

@@ -56,9 +56,10 @@ iframe{width:320px !important;height: 280px !important}
 .content-model .model-content .model-button .button{width: 120px;height: 32px;border-radius: 2px;background-color: #e15616;text-align: center;line-height: 32px;font-size: 14px;float: right;color: #FFFFFF;cursor: pointer;}
 
 /* 头部 */
-.baseHeadTop{width:100%;font-size:14px;background:#FBFBFB}
-.baseHeadTop ul{height:40px;line-height:40px}
-.baseHeadTop ul li{float:right;margin-left:12px;position:relative}
+.baseHeadTop{width:100%;font-size:14px;background:#F7F7F7;}
+.baseHeadTop .header_top_left{float: left;font-size: 14px;line-height: 40px;color: #909090;}
+.baseHeadTop .header_top_ul{height:40px;line-height:40px;float: right;}
+.baseHeadTop .header_top_ul li{float:right;margin-left:12px;position:relative}
 .baseHeadTop li > a{display:inline-block;padding:0 6px;height:40px;border-bottom:1px solid transparent}
 .baseHeadTop li > a:hover,.baseHeadTop li > a.on{color:#E15616;border-color:#E15616}
 .baseHeadTop li .qrCode{display:none;position:absolute;right:calc((100% - 72px)/2);width:72px;height:96px;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;z-index:9}
@@ -70,10 +71,37 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadTop li .cShow{display:none;position:absolute;right:calc((100% - 90px)/2);width:90px;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;z-index: 995;}
 .baseHeadTop li .cShow a{display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:center}
 .baseHeadTop li .cShow a:hover{background:#FEF6F3;color:#E15616}
+
+
+/* 购物车 */
+.baseHeadTop li.headCart{position:relative;}
+.baseHeadTop li.headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
+.baseHeadTop li.headCart .addBtn:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
+.baseHeadTop li.headCart .addBtn em{color:#E15616;font-style:normal;margin-left:4px;}
+.baseHeadTop .cartData{display:none;position:absolute;right:0;top:40px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.2);border-radius:2px}
+.baseHeadTop .cartData .empty{padding:72px 10px;text-align:center;font-size:16px;line-height:26px;}
+.baseHeadTop .cartData .empty a{color:#E15616;margin:0 5px;border-bottom:1px solid #e15616}
+.baseHeadTop .cartData .empty img{display:block;margin:0 auto 28px auto;width:160px;height:136px}
+.baseHeadTop .cartMain{max-height:424px;overflow:auto}
+.baseHeadTop .cartItem{width:100%;height:auto;box-sizing:border-box;padding:10px 10px 10px 106px;position:relative}
+.baseHeadTop .cartItem img{position:absolute;left:10px;top:10px;width:86px;height:86px;box-shadow:0 0 2px #eee}
+.baseHeadTop .cartItem span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px}
+.baseHeadTop .cartItem span.unit{color:#93979F}
+.baseHeadTop .cartItem span.price{color:#F94B4B;margin-top:14px}
+.baseHeadTop .cartItem .delBtn{position:absolute;right:10px;bottom:0;width:30px;line-height:30px;text-align:center;font-size:0;cursor: pointer;}
+.baseHeadTop .cartItem .delBtn:before{content:'\2715';color:#93979F;font-size:14px}
+.baseHeadTop .cartBtm{border-top:1px solid #EBECEF;box-sizing:border-box;height:60px;line-height:24px;padding:6px 10px;position:relative;}
+.baseHeadTop .cartBtm .btn{position:absolute;right:10px;top:10px;height:40px;line-height:40px;border-radius:2px;padding:0 20px;background:#E15616;color:#FFF;font-size:14px}
+.baseHeadTop .cartBtm .btn:hover{opacity:.8}
+.baseHeadTop .cartBtm>span{display:block}
+.baseHeadTop .cartBtm>span em{font-style:normal;color:#F94B4B}
+.baseHeadTop .headCart:hover .cartData{display:block;-webkit-animation:fadeInDown .4s;animation:fadeInDown .4s}
+
+
 .baseHeadCenter,.baseTopNav{width:100%;background:#FFF}
-.baseHeadCenter .wrap{height:82px;box-sizing:border-box;padding-top:10px}
+.baseHeadCenter .wrap{height: 100px;box-sizing: border-box;padding: 10px 0;}
 .baseHeadCenter .logo{float:left;width:178px;height:44px;margin-right:122px}
-.baseHeadCenter .searchBox{width:684px;float:left}
+.baseHeadCenter .searchBox{width:668px;float:left}
 .baseHeadCenter .search{width:100%;height:44px;line-height:44px;border:1px solid #FFE6DC;position:relative}
 .baseHeadCenter .search:before{content:'';position:absolute;left:104px;top:16px;height:12px;border-right:2px solid #C0C6D1}
 .baseHeadCenter .search .jqSelect{width:104px;height:44px;line-height:44px;border:none}
@@ -83,9 +111,18 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadCenter .keyword:focus{outline:none;border:none}
 .baseHeadCenter .searchBtn{position:absolute;right: 0;top: 0;font-size:0;padding: 7px 12px;height: 30px;line-height: 30px;}
 .baseHeadCenter .searchBtn:before{width: 30px;height: 30px;background-position: 4px 4px;}
-.baseHeadCenter .hotKey{color:#FFB496;font-size:12px;line-height:24px}
+.baseHeadCenter .hotKey{color:#FFB496;font-size:12px;line-height:28px}
 .baseHeadCenter .hotKey .word{padding:0 5px;font-style:normal;cursor:pointer;}
 .baseHeadCenter .hotKey .word:hover{color:#E15616}
+.baseHeadCenter .wechat_qrcode{width: 180px;height: 100%;float: left;margin-left: 33px;}
+.baseHeadCenter .wechat_qrcode .q_item{width: 60px;height: 100%;float: left;margin: 0 15px;position: relative;cursor: pointer;}
+.baseHeadCenter .wechat_qrcode .q_item:hover .q_item_code{display: block;}
+.baseHeadCenter .wechat_qrcode .q_item p{font-size: 12px;color: #909090;line-height: 20px;text-align: center;}
+.baseHeadCenter .wechat_qrcode .q_item_icon{width: 48px;height: 48px;border: 1px solid #ffe6dc;border-radius: 2px;margin: 0 auto;}
+.baseHeadCenter .wechat_qrcode .q_item_code{width: 128px;height: 128px;border-radius: 2px;position: absolute;top: 20px;left:24px;z-index: 999;display: none;box-shadow: 0px 3px 6px 0px rgba(74, 79, 88, 0.1);}
+.baseHeadCenter .wechat_qrcode .q_item_icon img{width: 48px;height: 48px;display: block;border-radius: 2px;}
+.baseHeadCenter .wechat_qrcode .q_item_code img{width: 128px;height: 128px;display: block;border-radius: 2px;}
+
 .baseHeadCenter.account{border-bottom:1px solid #E15616}
 .baseHeadCenter.account .wrap{padding-top:20px}
 .baseHeadCenter.account .accountLogin{font-size:20px;float:right;line-height:44px}
@@ -103,29 +140,6 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadCenter.article .search:before{display:none}
 .baseHeadCenter.article .keyword{width:100%}
 
-/* 购物车 */
-.baseHeadCenter .headCart{width:184px;height:44px;float:right;position:relative;}
-.baseHeadCenter .headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;border:1px solid #FFE6DC;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
-.baseHeadCenter .headCart .addBtn:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
-.baseHeadCenter .headCart .addBtn em{color:#E15616;font-style:normal;margin-left:4px;}
-.baseHeadCenter .cartData{display:none;position:absolute;right:0;top:44px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.2);border-radius:2px}
-.baseHeadCenter .cartData .empty{padding:72px 10px;text-align:center;font-size:16px;line-height:26px;}
-.baseHeadCenter .cartData .empty a{color:#E15616;margin:0 5px;border-bottom:1px solid #e15616}
-.baseHeadCenter .cartData .empty img{display:block;margin:0 auto 28px auto;width:160px;height:136px}
-.baseHeadCenter .cartMain{max-height:424px;overflow:auto}
-.baseHeadCenter .cartItem{width:100%;height:auto;box-sizing:border-box;padding:10px 10px 10px 106px;position:relative}
-.baseHeadCenter .cartItem img{position:absolute;left:10px;top:10px;width:86px;height:86px;box-shadow:0 0 2px #eee}
-.baseHeadCenter .cartItem span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px}
-.baseHeadCenter .cartItem span.unit{color:#93979F}
-.baseHeadCenter .cartItem span.price{color:#F94B4B;margin-top:14px}
-.baseHeadCenter .cartItem .delBtn{position:absolute;right:10px;bottom:0;width:30px;line-height:30px;text-align:center;font-size:0;cursor: pointer;}
-.baseHeadCenter .cartItem .delBtn:before{content:'\2715';color:#93979F;font-size:14px}
-.baseHeadCenter .cartBtm{border-top:1px solid #EBECEF;box-sizing:border-box;height:60px;line-height:24px;padding:6px 10px;position:relative;}
-.baseHeadCenter .cartBtm .btn{position:absolute;right:10px;top:10px;height:40px;line-height:40px;border-radius:2px;padding:0 20px;background:#E15616;color:#FFF;font-size:14px}
-.baseHeadCenter .cartBtm .btn:hover{opacity:.8}
-.baseHeadCenter .cartBtm>span{display:block}
-.baseHeadCenter .cartBtm>span em{font-style:normal;color:#F94B4B}
-.baseHeadCenter .headCart:hover .cartData{display:block;-webkit-animation:fadeInDown .4s;animation:fadeInDown .4s}
 /* 导航栏 */
 .baseTopNav{position:relative;height:44px;border-top:1px solid #E15616}
 .baseTopNav>.wrap{height:44px;box-sizing:border-box;position:relative;z-index:991;}
@@ -137,6 +151,7 @@ iframe{width:320px !important;height: 280px !important}
 .baseTopNav .nav.home:after{background-position:-30px -31px}
 .baseTopNav .classBtn:after{background-position:0 -31px;transition: all .5s;}
 .baseTopNav .classBtn.on:after{transform:rotate(90deg);}
+.baseTopNav .classBtn:hover .baseTopNav .classifyBox{display: block;}
 .baseTopNav .navBox li:nth-of-type(1) .nav:after{background-position:-60px -31px}
 .baseTopNav .navBox li:nth-of-type(2) .nav:after{background-position:-90px -31px}
 .baseTopNav .navBox li:nth-of-type(3) .nav:after{background-position:-120px -31px}
@@ -148,37 +163,46 @@ iframe{width:320px !important;height: 280px !important}
 .baseTopNav .navBox{width:500px}
 .baseTopNav .navBox ul{width:980px;}
 .baseTopNav .navBox li{float:left;position:relative}
-.baseTopNav .navBox li>div{display:none;position:absolute;left:0;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:0 0 2px 2px;z-index:990}
-.baseTopNav .navBox li:hover div{display:block}
-.baseTopNav .navBox li>div a{display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:center;box-sizing:border-box;padding:0 15px}
-.baseTopNav .navBox li>div a:hover{background:#FEF6F3;color:#E15616}
-.baseTopNav .classifyBox{display:none;position:absolute;left:50%;top:44px;z-index:990;transform:translateX(-50%);box-shadow:0 3px 6px rgba(45,48,54,.2);}
+.baseTopNav .classifyBox{display:none;position:absolute;left:0;top:44px;z-index:990;min-height: 510px;padding: 0 0 20px 0;}
 /* 分类 */
-.classifyBox{width:1184px;margin:0 auto;box-sizing:border-box;padding:8px 16px;background:#FFF;border-radius:0 0 2px 2px}
-.classifyBox .clsTab{height:56px;line-height:56px;white-space:nowrap;border-bottom:1px solid #FFE6DC}
-.classifyBox .clsTab a{display:inline-block;cursor:default;height:100%;padding:0 10px 0 10px;font-size:16px;font-weight:bold;color:#2D3036;border-bottom:1px solid transparent;margin-right: 30px}
+.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;}
+.classifyBox .clsTab a{display:inline-block;height:100%;padding:0 10px 0 10px;font-size:16px;font-weight:bold;color:#2D3036;border-bottom:1px solid transparent;margin-right: 30px}
 .classifyBox .clsTab a:hover,.classifyBox .clsTab a.on{color:#E15616;border-color:#E15616}
-.classifyBox .clsCon{padding:10px 0}
-.classifyBox .line{position:relative;padding-left:100px;line-height:32px}
-.classifyBox .line:after{content:'';position:absolute;left:100px;top:0;border-right:1px solid #FFE6DC;height:100%}
-.classifyBox .lft{position:absolute;top:0;left:0;width:100px;color:#000}
-.classifyBox .lft a{display:inline-block;width:100%;line-height:24px;padding:10px;box-sizing:border-box;color: #627386;}
-.classifyBox .rgt{color:#666;padding:6px 0 6px 6px;position:relative}
-.classifyBox .rgt a{display:inline-block;height:32px;line-height:32px;padding:0 22px;cursor:pointer;color: #627386;}
-.classifyBox .rgt a.on,.classifyBox .clsCon .rgt a:hover{color:#e15616;background:#fbe7de}
-.classifyBox .line:hover .rgt:after,.classifyBox .line.on .rgt:after{content:'';position:absolute;left:0;top:0;z-index:1;border-right:1px solid #E15616;height:100%}
-.classifyBox .line:hover .lft a,.classifyBox .line.on .lft a{color:#E15616}
-.classifyBox .line:hover{background:#fbfafa}
+.classifyBox .clsCon{padding:20px 0;box-sizing: border-box;}
+.classifyBox .tabItem_lift{width: 152px;float: left;border-right: 1px solid #FFE6DC;}
+.classifyBox .tabItem_lift a{display:inline-block;width:100%;line-height:40px;box-sizing:border-box;color: #627386;padding:10px 0 10px 30px;float: left;transform: translateX(-3px);}
+.classifyBox .tabItem_lift .tabItem_lift_icon{width: 20px;height: 20px;display: block;float: left;}
+.classifyBox .tabItem_lift .tabItem_lift_p{float: left;margin-left: 8px;line-height: 20px;}
+.classifyBox .tabItem_lift a.on{background: #fef6f3;color: #E15616;border-color: #ffffff;transform: translateX(0);transition: all 0.8s;}
+.classifyBox .tabItem_right{float: left;box-sizing: border-box;min-width: 280px;}
+.classifyBox .tabItem_right .tabItem_right_content {display: none;}
+.classifyBox .tabItem_right .tabItem_right_content.on{display: block;}
+.classifyBox .tabItem_right .line{position:relative;line-height:40px;height: 40px;}
+.classifyBox .tabItem_right .lft{float: left;color:#000;line-height:40px;height: 40px;width: 150px;box-sizing: border-box;padding: 0 16px;font-weight: bold;}
+.classifyBox .tabItem_right .lft.none{width: 100px;}
+.classifyBox .tabItem_right .lft.none a{color: #E15616;}
+.classifyBox .tabItem_right .lft a{display:inline-block;width:100%;line-height:40px;box-sizing:border-box;color: #627386;}
+.classifyBox .tabItem_right .lft a p{text-align: left;float: left;}
+.classifyBox .tabItem_right .lft a span{text-align: right;float: right;display: inline-block;}
+.classifyBox .tabItem_right .rgt{color:#666;position:relative;box-sizing: border-box;padding: 0 10px;height: 100%;line-height: 40px;float: left;}
+.classifyBox .tabItem_right .rgt a{display:inline-block;height:44x;line-height:44px;padding:0 22px;cursor:pointer;color: #627386;box-sizing: border-box;border-bottom: 1px solid #FFFFFF;}
+.classifyBox .tabItem_right .rgt a.on,.classifyBox .clsCon .rgt a:hover{color:#e15616;border-color: #E15616;}
+.classifyBox .tabItem_right .rgt a p{text-align: left;float: left;}
+.classifyBox .tabItem_right .rgt a span{text-align: right;float: right;display: inline-block;}
+/*.classifyBox .line:hover .rgt:after,.classifyBox .line.on .rgt:after{content:'';position:absolute;left:0;top:0;z-index:1;border-right:1px solid #E15616;height:100%}*/
+.classifyBox .tabItem_right .line:hover .lft a,.classifyBox .line.on .lft a{color:#E15616}
+.classifyBox .tabItem_right .line:hover{background:#fbfafa}
 /* 底部 */
 .footTop{width:100%;height:60px;padding:20px 0;margin-top:30px;background:#FFF}
 .footTop .wrap{text-align:justify;font-size:0;}
 .footTop .wrap:after{content: '';display:inline-block;width:100%;}
-.footTop .wrap span{display:inline-block;height:60px;line-height:60px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
+.footTop .wrap span{display:inline-block;height:60px;line-height:60px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center;}
 .footTop .wrap span:before{width:60px;height:60px;vertical-align:middle;margin-right:5px;}
-.footTop .wrap span:nth-of-type(1):before{background-position:-5px -65px}
-.footTop .wrap span:nth-of-type(2):before{background-position:-85px -65px}
-.footTop .wrap span:nth-of-type(3):before{background-position:-165px -65px}
-.footTop .wrap span:nth-of-type(4):before{background-position:-245px -65px}
+.footTop .wrap span:nth-of-type(1):before{background-position:-5px -65px;}
+.footTop .wrap span:nth-of-type(2):before{background-position:-85px -65px;}
+.footTop .wrap span:nth-of-type(3):before{background-position:-165px -65px;}
+.footTop .wrap span:nth-of-type(4):before{background-position:-245px -65px;}
 .footMain{width:100%;background:#4A4F58}
 .footLink{display:table;padding:12px 0}
 .footLink>div{display:table-cell;width:171px}

+ 1 - 1
src/main/resources/static/css/index/index.pc.css

@@ -4,7 +4,7 @@
  */
 li{list-style:none;}
 /* 轮播 */
-#swiper-container{width:100%;height:510px;min-width:1184px;overflow:hidden;position:relative}
+#swiper-container{width:100%;height:510px;min-width:1184px;overflow:hidden;position:relative;}
 #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
 #swiper-container .tempWrap{margin:0 auto;}
 #swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}

+ 371 - 0
src/main/resources/static/css/index/index_new.pc.css

@@ -0,0 +1,371 @@
+@charset "utf-8";
+/**
+ * PC端
+ */
+li{list-style:none;}
+/* 轮播 */
+#swiper-container{width:100%;height:510px;min-width:1184px;overflow:hidden;position:relative;float: left;}
+#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
+#swiper-container .tempWrap{margin:0 auto;}
+#swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}
+#swiper-container .swiper-wrapper img{width:auto;height:510px;max-width:none;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
+#swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(255,230,220,.2);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
+#swiper-container .swiper-button-prev{left:5px;right:auto}
+#swiper-container .swiper-button-next{left:auto;right:5px}
+#swiper-container .swiper-button-prev:after{content:"\276C"}
+#swiper-container .swiper-button-next:after{content:"\276D"}
+#swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)}
+#swiper-container .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:15px;z-index:1;text-align:center;font-size:0}
+#swiper-container .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
+#swiper-container .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
+#swiper-container .swiper-pagination span.on:before{width:28px;background:#fff}
+
+.section_container{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.section_container .inner{
+    width:1184px;
+    margin: 0 auto;
+}
+/*左右楼层*/
+.section_left{
+    width: 900px;
+    float:left;
+}
+.section_page{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.section_page .section_page_title{
+    width: 100%;
+    height: 103px;
+    box-sizing: border-box;
+    padding: 31px 0 16px 0;
+}
+.section_page .section_page_title h1{
+    font-size: 24px;
+    line-height: 31px;
+    text-align: left;
+    color: #4a4f58;
+}
+.section_page .section_page_title p{
+    font-size: 14px;
+    line-height: 19px;
+    text-align: left;
+    color: #93979f;
+    margin-top: 6px;
+}
+.section_page .section_page_main{
+    width: 100%;
+    float: left;
+    height: 568px;
+    overflow: hidden;
+    transition: all 0.6s;
+}
+.section_page .section_page_main.type_03{
+    height: 704px;
+}
+.section_page .section_page_main.max{
+    height:auto;
+}
+.section_page  .page_main_item{
+    width: 164px;
+    height: 268px;
+    float: left;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    background-color: #FFFFFF;
+    transition:all 0.4s;
+    display: block;
+}
+.section_page  .page_main_item.ad_04{
+    border-radius: 2px;
+}
+.section_page  .page_main_item.ad_04:hover{
+    transform:translateY(-5px);
+    box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);
+}
+.section_page .page_main_item.ad_01{
+    width: 884px;
+    height: 120px;
+}
+.section_page .page_main_item.ad_02{
+    width: 524px;
+}
+.section_page .page_main_item.ad_03{
+    width: 344px;
+}
+.section_page .page_main_item_adv{
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+.section_page .page_main_image{
+    width: 164px;
+    height: 164px;
+    display: block;
+    float: left;
+    border-radius: 2px 2px 0 0;
+}
+.section_page .page_main_text{
+    width: 100%;
+    height: 42px;
+    float: left;
+    box-sizing: border-box;
+    margin-top: 8px;
+    padding: 0 8px;
+    white-space: normal;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 21px;
+}
+.section_page .section_page_more{
+    width: 100%;
+    height: 32px;
+    float: left;
+}
+.section_page .section_page_more .more{
+    width: 98px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+    margin:  0 auto;
+    border-radius: 2px;
+    border: 1px solid #cccccc;
+    color: #909090;
+    text-align: center;
+    transition: all 0.2s;
+    cursor: pointer;
+}
+.section_page .section_page_more .more:hover{
+    color: #E15616;
+    border-color: #E15616;
+}
+/*地库供应商*/
+.section_page .section_page_bottom{
+    width: 100%;
+    float: left;
+    height: auto;
+}
+.section_page  .page_main_li{
+    width: 134px;
+    height: 166px;
+    float: left;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    background-color: #FFFFFF;
+    transition:all 0.4s;
+    display: block;
+}
+.section_page .page_main_li.ad_01{
+    width: 884px;
+    height: 184px;
+}
+.section_page  .page_main_li.ad_02:hover{
+    transform:translateY(-5px);
+    box-shadow:0 12px 12px rgba(102,102,102,0.1),0 14px 14px rgba(102,102,102,0.1),0 16px 16px rgba(102,102,102,0.1);
+}
+.section_page  .page_main_li.ad_02:hover .page_main_name{
+    color: #E15616;
+    font-weight: bold;
+}
+.section_page  .page_main_li .page_main_logo{
+    width: 100%;
+    height: 134px;
+    display: block;
+    float: left;
+}
+.section_page  .page_main_li .page_main_name{
+    width: 100%;
+    height: 32px;
+    float: left;
+    line-height: 32px;
+    text-align: center;
+    font-size: 14px;
+    color: #4a4f58;
+    background-color: #f9f9f9;
+}
+/*右边区域*/
+.section_right{
+    width: 284px;
+    float: right;
+    box-sizing: border-box;
+    padding-top: 103px;
+}
+.section_right .section_right_item{
+    width: 100%;
+    height: auto;
+    background-color: #FFFFFF;
+    float: left;
+    margin-bottom: 16px;
+    padding: 16px;
+    box-sizing: border-box;
+    border-radius: 2px;
+}
+.section_right .right_item_title{
+    width: 100%;
+    height: 22px;
+    line-height: 22px;
+    float: left;
+    margin-bottom: 8px;
+}
+.section_right .right_item_title p{
+    float: left;
+    font-size: 16px;
+    font-weight: bold;
+    color: #4a4f58;
+    text-align: left;
+}
+.section_right .right_item_title a{
+    display: inline-block;
+    float: right;
+    font-size: 12px;
+    color: #909090;
+    text-align: right;
+}
+.section_right .right_item_title a:hover{
+    color: #E15616;
+    text-decoration: underline;
+}
+.section_right .right_item_main{
+    width: 100%;
+    height: auto;
+}
+.section_right .item_banner{
+    width: 252px;
+    height: 252px;
+    display: block;
+    float: left;
+    position: relative;
+    margin-bottom: 10px;
+}
+.section_right .item_banner img{
+    width: 252px;
+    height: 252px;
+    display: block;
+}
+.section_right .item_banner .name{
+    width: 100%;
+    height: 32px;
+    position: absolute;
+    bottom: 0;
+    background: rgba(0,0,0,0.4);
+    line-height: 32px;
+    font-size: 16px;
+    color: #ffffff;
+    text-align: left;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+.section_right .item_banner .statu{
+    width: 72px;
+    height: 22px;
+    border-radius: 11px;
+    background: rgba(0,0,0,0.4);
+    position: absolute;
+    left: 8px;
+    top: 8px;
+}
+.section_right .item_banner .statu i{
+    display: block;
+    width: 14px;
+    height: 14px;
+    float: left;
+    margin: 4px 0 0 4px;
+}
+.section_right .item_banner .statu .icon-wart{
+    background: url("/img/live/icon-live.png");
+    background-size: cover;
+}
+.section_right .item_banner .statu .icon-live{
+    background: url("/img/live/icon-liveing.gif");
+    background-size: cover;
+}
+.section_right .item_banner .statu .icon-end{
+    width: 11px;
+    height: 12px;
+    margin: 5px 0 0 5px;
+    background: url("/img/live/icon-lives.png");
+    background-size: cover;
+}
+.section_right .item_banner .statu p{
+    float: left;
+    width: 50px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 22px;
+    color: #FFF;
+}
+.section_right  .item_text{
+    display: block;
+    width: 100%;
+    height:26px;
+    line-height: 26px;
+    font-size: 14px;
+    color: #4a4f58;
+    margin: 3px 0;
+}
+.section_right  .item_text .item_text_name{
+    width: 164px;
+    text-align: left;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    padding-left: 12px;
+    box-sizing: border-box;
+    float: left;
+    position: relative;
+}
+.section_right  .item_text .item_text_name:before{
+    content: '';
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: #cccccc;
+    position: absolute;
+    left: 0;
+    top: 11px;
+}
+.section_right  .item_text .item_text_time{
+    float: right;
+}
+.section_right  .item_text:hover{
+    color: #E15616;
+    text-decoration: underline;
+}
+.section_right  .item_text:hover .item_text_name:before{
+    background-color: #E15616;
+}
+footer{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+
+
+
+
+/* 首页右侧导航 */
+#sideNav{display:none;position:fixed;right:50%;margin-right:-700px;width:88px;z-index:9999;bottom:220px;}
+#sideNav .item{width:100%;background-color:#fff;box-sizing:border-box;text-align:center;box-shadow:0 2px 4px rgb(254,246,243);border-radius:2px;margin-bottom:10px;font-size:12px;position:relative}
+#sideNav .item>a{display:block;width:100%;box-sizing:border-box;padding:8px 6px;line-height:14px;position:relative}
+#sideNav .item>a:before{content:'';position:absolute;width:70px;left:9px;top:0;border-top:1px solid #FEF6F3}
+#sideNav .item>a:first-child:before{display:none}
+#sideNav .item>a.on{background:#FEF6F3;color:#E15616}
+
+
+/* 中屏导航与广告显示 */
+@media screen and (max-width:1420px){
+    #sideNav,#scrollTop{right:10px;margin-right:0;opacity:.9;}
+    #advertising{left:10px;margin-left:0;opacity:.9;}
+}

+ 2 - 1
src/main/resources/static/css/single-page/topic.css

@@ -8,9 +8,10 @@ li{list-style:none}
 .pageTop img{width:100%;height:auto}
 .pageTop p{padding:16px;color:#93979F;font-size:16px;line-height:26px}
 
-.pageFloor .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;margin:32px 0 16px 0;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left;}
+.pageFloor .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;margin:32px 0 16px 0;font-size:24px;color:#4A4F58;font-weight:bold;text-align:left;position: relative;}
 .pageFloor .title .more {float:right;color:#627386;font-size:18px;font-weight:normal;}
 .pageFloor .title .more:hover{color:#E15616}
+.pageFloor .title .talk_link{display: block;width: 120px;height: 40px;border-radius: 2px;border: 1px solid #E15616;background-color: #ffe6dc;line-height: 40px;text-align: center;font-size: 14px;color: #E15616;position: absolute;right: 0;top: -16px;}
 .pageFloor .content{width:1202px}
 .pageFloor .content li{float:left;width:284px;height:334px;margin:0 16px 16px 0;background:#FFF}
 .pageFloor .content li img{display:block;width:284px;height:284px}

BIN=BIN
src/main/resources/static/img/common/qr_code_mini.jpg


BIN=BIN
src/main/resources/static/img/investment/icon-back.png


BIN=BIN
src/main/resources/static/img/investment/icon-bank.png


BIN=BIN
src/main/resources/static/img/investment/icon-more.png


BIN=BIN
src/main/resources/static/img/live/icon-live.png


BIN=BIN
src/main/resources/static/img/live/icon-liveing.gif


BIN=BIN
src/main/resources/static/img/live/icon-lives.png


+ 152 - 7
src/main/resources/static/js/base.js

@@ -43,7 +43,145 @@ var globalHead = new Vue({
         },
         shopId:'',
         userIdentity:'',
-        articleType: ''
+        articleType: '',
+        NavsList:[
+            {
+                name:'产品',
+                validFlag:1,
+                smalltypeList:[
+                    {
+                        name:'中胚层产品',
+                        icon:'/img/info/mall.png',
+                        validFlag:1,
+                        tinytypeList:[
+                            {name:'水光针/动能素',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'玻尿酸(小分子)',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'导入液',validFlag:1,threeList:[{name:'3级分类'}]}
+                        ]
+                    },
+                    {
+                        name:'抗衰除皱',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'术后修复',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'SPA产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'私密产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'紧致',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'修复',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'消炎',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'美化',validFlag:1,threeList:[{name:'3级分类'}]},
+                        ]
+                    },
+                    {
+                        name:'服务类产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'耗材',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'针剂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'线材',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'假体',validFlag:1,threeList:[]}
+                        ]
+                    },
+                    {
+                        name:'临期产品',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                ]
+            },{
+                name:'仪器',
+                validFlag:1,
+                smalltypeList:[
+                    {
+                        name:'面部抗衰',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'超声',validFlag:1},
+                            {name:'射频',validFlag:1},
+                            {name:'激光',validFlag:1}
+                        ]
+                    },
+                    {
+                        name:'瘦身塑型',
+                        validFlag:1,
+                        icon:'/img/info/kuqi.jpg',
+                        tinytypeList:[
+                            {name:'光纤溶脂抽脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'射频溶脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'超声溶脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'隔空溶脂',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'增肌溶脂',validFlag:1,threeList:[{name:'3级分类'}]}
+                        ]
+                    },
+                    {
+                        name:'产后修复',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[]
+                    },
+                    {
+                        name:'私密',
+                        validFlag:1,
+                        icon:'/img/info/kuqi.jpg',
+                        tinytypeList:[
+                            {name:'抗衰保健',validFlag:1},
+                            {name:'美化',validFlag:1},
+                            {name:'检测',validFlag:1}
+                        ]
+                    },
+                    {
+                        name:'皮肤管理',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'小气泡清洁',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'激光祛斑美肤',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'光子嫩肤',validFlag:1,threeList:[{name:'3级分类'}]},
+                            {name:'黄金微针',validFlag:1,threeList:[]},
+                            {name:'微针美塑',validFlag:1},
+                            {name:'水光针',validFlag:1},
+                            {name:'射频紧肤',validFlag:1},
+                            {name:'激光祛皱',validFlag:1},
+                            {name:'超声HIFU',validFlag:1}
+                        ]
+                    },
+                    {
+                        name:'耗材',
+                        validFlag:1,
+                        icon:'/img/info/mall.png',
+                        tinytypeList:[
+                            {name:'针剂',validFlag:1},
+                            {name:'线材',validFlag:1},
+                            {name:'假体',validFlag:1}
+                        ]
+                    }
+                ]
+            }
+        ]
     },
     methods: {
         // 导航分类数据
@@ -55,17 +193,24 @@ var globalHead = new Vue({
                     if(isPC){
                         setTimeout(function(){
                             $('#mainClassify').slide({
-                                mainCell:".clsCon"
-                                ,titCell:".clsTab a"
-                                ,trigger: "mouseover"
+                                mainCell:".clsCon",
+                                titCell:".clsTab a",
+                                trigger: "mouseover"
+                            });
+                        },500);
+                        setTimeout(function(){
+                            $('#mainClassify').slide({
+                                mainCell:".tabItem_right",
+                                titCell:".tabItem_lift a",
+                                trigger: "mouseover"
                             });
                         },500);
                     }else{
                         setTimeout(function(){
                             $('#mainClassify').slide({
-                                mainCell:".clsCon"
-                                ,titCell:".clsTab a"
-                                ,trigger: "click"
+                                mainCell:".clsCon",
+                                titCell:".clsTab a",
+                                trigger: "click"
                             });
                         },500);
                     }

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 995 - 1
src/main/resources/static/js/index.js


+ 1 - 1
src/main/resources/templates/components/footer.html

@@ -51,7 +51,7 @@
                     <div class="foot-icon mini">
                         <i class="icon mIcon icon-mini"></i>
                     </div>
-                    <div class="foot-code"><img src="/img/common/qr_code_mini.png"/></div>
+                    <div class="foot-code"><img src="/img/common/qr_code_mini.jpg"/></div>
                     <P>采美小程序</P>
                 </div>
             </div>

+ 132 - 100
src/main/resources/templates/components/header.html

@@ -1,40 +1,58 @@
 <header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
     <!--顶部导航-->
     <div class="baseHeadTop">
-        <ul class="wrap clear">
-            <li>
-                <a href="javascript:void(0);">采美365网</a>
-                <div class="qrCode">
-                    <img src="/img/common/qr_code_caimei.png" alt="采美365网"/>
-                    <p>扫描关注</p>
-                </div>
-            </li>
-            <li>
-                <a href="javascript:void(0);">呵呵商城</a>
-                <div class="qrCode">
-                    <img src="/img/common/qr_code_hehe.png" alt="呵呵商城"/>
-                    <p>扫描关注</p>
-                </div>
-            </li>
-            <li v-if="loginStatus" id="mGlobalMenu" @click="hideGlobalMenu()">
-                <a class="cTab" href="javascript:void(0);" v-if="userIdentity == 3" v-text="userData.name"></a>
-                <a class="cTab" href="javascript:void(0);" v-else v-text="userData.userName"></a>
-                <div class="cShow" v-if="userIdentity == 4 || userIdentity == 2">
-                    <a href="/user/dashboard.html">我的采美</a>
-                    <a href="/user/setting/information.html">机构资料</a>
-                    <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
-                </div>
-                <div class="cShow" v-if="userIdentity == 3">
-                    <a href="/supplier/dashboard.html">我的采美</a>
-                    <a href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
-                    <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
-                </div>
-            </li>
-            <template v-else>
-                <li><a href="/register.html">注册</a></li>
-                <li><a href="/login.html">登录</a></li>
-            </template>
-        </ul>
+        <div class="wrap clear">
+            <div class="header_top_left">欢迎来到采美采购服务平台</div>
+            <ul class="header_top_ul">
+                <li class="headCart">
+                    <a href="javascript:void(0)" class="addBtn icon" @click="goCartsLinkFn">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
+                    <div class="cartData">
+                        <div v-if="headCart.cartCount>0">
+                            <div class="cartMain">
+                                <div class="cartItem" v-for="cart in headCart.cartList">
+                                    <a href="javascript:void(0)" @click="productDetailsFn(cart.id)">
+                                        <img :src="cart.image" >
+                                        <span class="name" v-text="cart.name"></span>
+                                        <span class="unit" v-text="'包装规格:'+cart.unit"></span>
+                                        <span class="unit" v-text="'数量:'+cart.number"></span>
+                                        <span class="price" v-text="'¥'+parseFloat(cart.price).toFixed(2)"></span>
+                                    </a>
+                                    <span class="delBtn" @click="DeleteCartProducts(cart.id)"></span>
+                                </div>
+                            </div>
+                            <div class="cartBtm">
+                                <span>共计:<em v-text="headCart.productCount"></em> 件</span>
+                                <span>合计:<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
+                                <a class="btn" href="/shopping/cart.html">去购物车结算</a>
+                            </div>
+                        </div>
+                        <div v-else class="empty">
+                            <img src="/img/common/empty_cart.png">
+                            <p>购物车暂无商品</p>
+                            <p v-if="!loginStatus">请先<a href="/login.html">登录</a>添加商品到购物车</p>
+                        </div>
+                    </div>
+                </li>
+                <li v-if="loginStatus" id="mGlobalMenu" @click="hideGlobalMenu()">
+                    <a class="cTab" href="javascript:void(0);" v-if="userIdentity == 3" v-text="userData.name"></a>
+                    <a class="cTab" href="javascript:void(0);" v-else v-text="userData.userName"></a>
+                    <div class="cShow" v-if="userIdentity == 4 || userIdentity == 2">
+                        <a href="/user/dashboard.html">我的采美</a>
+                        <a href="/user/setting/information.html">机构资料</a>
+                        <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                    </div>
+                    <div class="cShow" v-if="userIdentity == 3">
+                        <a href="/supplier/dashboard.html">我的采美</a>
+                        <a href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                        <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                    </div>
+                </li>
+                <template v-else>
+                    <li><a href="/register.html">注册</a></li>
+                    <li><a href="/login.html">登录</a></li>
+                </template>
+            </ul>
+        </div>
     </div>
     <!--搜索及购物车-->
     <div class="baseHeadCenter">
@@ -73,33 +91,16 @@
                     </span>
                 </div>
             </div>
-            <div class="headCart">
-                <a href="javascript:void(0)" class="addBtn icon" @click="goCartsLinkFn">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
-                <div class="cartData">
-                    <div v-if="headCart.cartCount>0">
-                        <ul class="cartMain">
-                            <li class="cartItem" v-for="cart in headCart.cartList">
-                                <a href="javascript:void(0)" @click="productDetailsFn(cart.id)">
-                                    <img :src="cart.image" >
-                                    <span class="name" v-text="cart.name"></span>
-                                    <span class="unit" v-text="'包装规格:'+cart.unit"></span>
-                                    <span class="unit" v-text="'数量:'+cart.number"></span>
-                                    <span class="price" v-text="'¥'+parseFloat(cart.price).toFixed(2)"></span>
-                                </a>
-                                <span class="delBtn" @click="DeleteCartProducts(cart.id)"></span>
-                            </li>
-                        </ul>
-                        <div class="cartBtm">
-                            <span>共计:<em v-text="headCart.productCount"></em> 件</span>
-                            <span>合计:<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
-                            <a class="btn" href="/shopping/cart.html">去购物车结算</a>
-                        </div>
-                    </div>
-                    <div v-else class="empty">
-                        <img src="/img/common/empty_cart.png">
-                        <p>购物车暂无商品</p>
-                        <p v-if="!loginStatus">请先<a href="/login.html">登录</a>添加商品到购物车</p>
-                    </div>
+            <div class="wechat_qrcode">
+                <div class="q_item">
+                    <div class="q_item_icon"><img src="/img/common/qr_code_caimei.png" alt=""></div>
+                    <div class="q_item_code"><img src="/img/common/qr_code_caimei.png" alt=""></div>
+                    <p>采美公众号</p>
+                </div>
+                <div class="q_item">
+                    <div class="q_item_icon"><img src="/img/common/qr_code_mini.jpg" alt=""></div>
+                    <div class="q_item_code"><img src="/img/common/qr_code_mini.jpg" alt=""></div>
+                    <p>采美小程序</p>
                 </div>
             </div>
         </div>
@@ -107,49 +108,80 @@
     <!--商品分类及主导航菜单-->
     <div class="baseTopNav">
         <div class="wrap clear">
-            <a class="classBtn nav" href="javascript:void(0);">商品分类</a>
-            <a class="home nav" href="/">首页</a>
-            <div class="navBox">
-                <ul class="clear">
-                    <!--导航菜单-->
-                    <li th:each="menu: ${topMenuList}">
-                        <a th:if="${menu.link}" class="nav" th:href="${menu.link}" th:text="${menu.name}"></a>
-                        <a th:unless="${menu.link}" class="nav" href="javascript:void(0);" th:text="${menu.name}"></a>
-                        <div th:if="${not #lists.isEmpty(menu.subMenus)}">
-                            <a th:each="sub: ${menu.subMenus}" th:href="${sub.link}" th:text="${sub.name}"></a>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <a class="service nav" href="/repair.html">维修</a>
-        </div>
-        <div id="mainClassify" class="classifyBox mFixed">
-            <div v-if="!isPC" class="clsHead clear">
-                <a href="javascript:void(0);" class="mClassBtn mIcon" title="分类"></a>
-                <a href="/" class="logo">
-                    <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
-                </a>
-                <a href="javascript:void(0);" class="close" title="关闭"></a>
-            </div>
-            <div class="clsTab">
-                <template v-for="(big,i) in classify">
-                    <a :class="{'on':i==0}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>
-                </template>
+            <div class="baseTopNav_nav">
+                <a class="classBtn nav" href="javascript:void(0);">商品分类</a>
+                <a class="home nav" href="/">首页</a>
+                <div class="navBox">
+                    <ul class="clear">
+                        <!--导航菜单-->
+                        <li th:each="menu: ${topMenuList}">
+                            <a th:if="${menu.link}" class="nav" th:href="${menu.link}" th:text="${menu.name}"></a>
+                            <a th:unless="${menu.link}" class="nav" href="javascript:void(0);" th:text="${menu.name}"></a>
+                        </li>
+                    </ul>
+                </div>
+                <a class="service nav" href="/repair.html">维修</a>
             </div>
-            <div class="clsCon">
-                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID" style="display: none;">
-                    <div class="line" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
-                        <div class="lft">
-                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
-                        </div>
-                        <div class="rgt mfw">
-                            <template v-for="tiny in small.tinytypeList">
-                                <a v-if="tiny.validFlag==1" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID">
-                                    <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
-                                    <span v-text="tiny.name"></span>
+            <div id="mainClassify" class="classifyBox mFixed">
+                <div v-if="!isPC" class="clsHead clear">
+                    <a href="javascript:void(0);" class="mClassBtn mIcon" title="分类"></a>
+                    <a href="/" class="logo">
+                        <img src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
+                    </a>
+                    <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>
+                </div>
+                <div class="clsCon">
+                    <div class="tabItem" v-for="big in NavsList" :bid="big.bigTypeID" style="display: none;">
+                        <div class="tabItem_lift">
+                            <template v-for="(small,index) in big.smalltypeList" v-if="small.validFlag==1">
+                                <a :class="{'on':index==0}" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'">
+                                    <img class="tabItem_lift_icon" :src="small.icon ? small.icon : '/img/info/kuqi.jpg'" alt="">
+                                    <p class="tabItem_lift_p" v-text="small.name"></p>
                                 </a>
                             </template>
                         </div>
+                        <div class="tabItem_right">
+                            <div class="tabItem_right_content" v-for="(small,i) in big.smalltypeList" v-if="small.validFlag==1" :class="{'on':i==0}">
+                                <div class="line" v-if="small.tinytypeList.length>0"   v-for="tiny in small.tinytypeList">
+                                    <div class="lft">
+                                        <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'">
+                                            <p>{{ tiny.name }}</p>
+                                            <span> > </span>
+                                        </a>
+                                    </div>
+                                    <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">
+                                                <span v-text="three.name"></span>
+                                            </a>
+                                        </template>
+                                        <template v-if="tiny.threeList && tiny.threeList.length==0">
+                                            <a href="">
+                                                <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
+                                                <p>全部商品</p>
+                                                <span> > </span>
+                                            </a>
+                                        </template>
+                                    </div>
+                                </div>
+                                <template v-if="small.tinytypeList && small.tinytypeList.length==0">
+                                    <div class="line">
+                                        <div class="lft none">
+                                            <a href="">
+                                                <img v-if="!isPC" :src="tiny.icon" alt="tiny.name">
+                                                <span>全部商品></span>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

+ 190 - 154
src/main/resources/templates/index.html

@@ -6,14 +6,13 @@
     <meta name="baidu-site-verification" content="KbkRJg9357"/>
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/index/index.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/index/index.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
-
 <!-- 首页 -->
-<div id="container">
+<div id="container" v-cloak>
     <!--首页图片轮播-->
     <div id="swiper-container" class="swiper-container">
         <ul class="swiper-wrapper">
@@ -25,178 +24,215 @@
         <a class="swiper-button-prev" href="javascript:void(0)"></a>
         <a class="swiper-button-next" href="javascript:void(0)"></a>
     </div>
-    <!--移动端首页导航-->
-    <div class="mNavBox h5Only">
-        <ul class="mfw">
-            <!--导航菜单-->
-            <li class="first" th:each="menu: ${topMenuList}">
-                <a th:if="${menu.link}" class="nav mIcon" th:href="${menu.link}"><span th:text="${menu.name}"></span></a>
-                <a th:unless="${menu.link}" class="nav mIcon" href="javascript:void(0);" @click="showSubNav($event)">
-                    <span th:text="${menu.name}"></span>
-                </a>
-                <div class="navItem" th:if="${not #lists.isEmpty(menu.subMenus)}">
-                    <div class="mfw">
-                        <a class="second" th:each="sub: ${menu.subMenus}" th:href="${sub.link}">
-                            <img th:src="${sub.image}">
-                            <span th:text="${sub.name}"></span>
-                        </a>
+    <!--首页楼层主体数据-->
+    <div class="section_container">
+        <div class="inner">
+            <div class="section_left">
+                <div class="section_page" v-for="(page,index) in pageList">
+                    <div class="section_page_title">
+                        <h1>{{ page.title }}</h1>
+                        <p>{{ page.content }}</p>
                     </div>
-                </div>
-            </li>
-            <li class="first"><a class="nav mIcon" href="/repair.html"><span>维修</span></a></li>
-        </ul>
-    </div>
-    <!--页面主体数据-->
-    <div class="wrap">
-        <div>
-            <div class="floorTit toLogin">
-                <h2 v-for="item in pageFloors" v-if="item.type==1" v-text="item.title" data-id="1"></h2>
-                <h2 v-else-if="pageFloors.length==0" data-id="1">推荐专区</h2>
-            </div>
-            <div class="floorCon">
-                <div id="recommendBox" class="swiper-container">
-                    <ul class="swiper-wrapper" v-cloak>
-                        <li class="swiper-slide productItem mfc" v-for="p in recommends">
-                            <div class="item">
-                                <a class="image" :href="'/product-'+p.id+'.html'">
-                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
-                                    <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
-                                </a>
-                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
-                                    <span v-html="p.name"></span>
-                                </a>
-                                <div class="price mfhc">
-                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
-                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
-                                        <template v-if="p.priceFlag==1">
-                                            <em>¥价格未公开</em>
-                                            <div class="btnBox">
-                                                <a href="javascript:void(0)" class="btn cat">价格未公开,请联系 0755-22907771</a>
-                                            </div>
-                                        </template>
-                                        <template v-else>
-                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
-                                                <em class="p" v-text="'¥'+parseFloat(p.price).toFixed(2)"></em>
-                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                            </template>
-                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
-                                                <em>¥会员可见</em>
-                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                                <div class="btnBox">
-                                                    <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
-                                                </div>
-                                            </template>
-                                            <template v-else>
-                                                <em>¥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
-                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                            </template>
-                                        </template>
-                                    </template>
-                                    <template v-else>
-                                        <em>¥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
-                                        <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
-                                    </template>
+                    <template v-if="page.type == 1">
+                        <div class="section_page_main" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_02"><img :src="page.advertisement" alt=""></a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)">
+                                查看更多∨
+                            </div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 2">
+                        <div class="section_page_main" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_02"><img class="page_main_item_adv" :src="page.advertisement" alt=""> </a>
+                            <a href="" class="page_main_item ad_03"><img class="page_main_item_adv" :src="page.advertisement1" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)">
+                                查看更多∨
+                            </div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 3">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                            <a href="" class="page_main_item ad_02"><img class="page_main_item_adv" :src="page.advertisement" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+
                                 </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)">
+                                查看更多∨
                             </div>
-                        </li>
-                    </ul>
-                    <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 4">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                            <a href="" class="page_main_item ad_02"><img class="page_main_item_adv" :src="page.advertisement" alt=""> </a>
+                            <a href="" class="page_main_item ad_03"><img class="page_main_item_adv" :src="page.advertisement1" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)">
+                                查看更多∨
+                            </div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 5">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+
+                                </div>
+                            </a>
+                        </div>
+                        <div class="section_page_more" v-if="!page.isPageMore">
+                            <div class="more" @click="showMorePageFn(page)">
+                                查看更多∨
+                            </div>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 6">
+                        <div class="section_page_main type_03" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+
+                                </div>
+                            </a>
+                            <a href="" class="page_main_item ad_01"><img class="page_main_item_adv" :src="page.banner" alt=""> </a>
+                        </div>
+                    </template>
+                    <template v-if="page.type == 7">
+                        <div class="section_page_main" :class="page.isPageMore ? 'max' : ''">
+                            <a href="" class="page_main_item ad_04" v-for="(pros,index) in page.productList">
+                                <img class="page_main_image" :src="pros.image" alt="">
+                                <div class="page_main_text">{{ pros.name }}</div>
+                                <div class="page_main_price">
+
+                                </div>
+                            </a>
+                        </div>
+                    </template>
                 </div>
-            </div>
-        </div>
-        <div v-for="item in pageFloors">
-            <div v-if="item.type==6">
-                <!--大专题-->
-                <div v-for="bigTopic in item.subFloors">
-                    <div class="floorTit">
-                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
-                        <h5 v-text="bigTopic.detail"></h5>
+                <div class="section_page">
+                    <div class="section_page_title">
+                        <h1>优质供应商</h1>
+                        <p>采美正品联盟 质量保证</p>
                     </div>
-                    <div class="floorCon">
-                        <ul class="floorList clear mfw">
-                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
-                                <a :href="floor.link">
-                                    <img src="/img/base/placeholder.png" :data-original="floor.image" :alt="floor.title">
-                                    <p v-text="floor.title"></p>
-                                </a>
-                            </li>
-                        </ul>
+                    <div class="section_page_bottom">
+                        <a href="" class="page_main_li ad_01"><img class="page_main_item_adv" src="https://www.caimei365.com/img/common/goodsup.png" alt=""> </a>
+                        <a href="" class="page_main_li ad_02" v-for="(shop,index) in supplierList">
+                            <img class="page_main_logo" :src="shop.logo" alt="">
+                            <div class="page_main_name">{{ shop.name }}</div>
+                        </a>
                     </div>
                 </div>
             </div>
-            <div v-if="item.type==4">
-                <div class="floorTit">
-                    <h2 v-text="item.title" data-id="4">专题</h2>
-                    <a class="more" href="/promotions.html">更多商品专题</a>
-                </div>
-                <div class="floorCon">
-                    <div id="goodsTopic" class="swiper-container">
-                        <ul class="swiper-wrapper" v-cloak>
-                            <li class="swiper-slide mfc" v-for="topic in item.floorData">
-                                <a :href="topic.link">
-                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in item.floorData.length"></span></div>
-                        <a class="swiper-button-prev" href="javascript:void(0)"></a>
-                        <a class="swiper-button-next" href="javascript:void(0)"></a>
+            <div class="section_right">
+                <div class="section_right_item">
+                    <div class="right_item_title">
+                        <p>精彩直播</p>
+                        <a href="" target="_blank">更多></a>
+                    </div>
+                    <div class="right_item_main" v-for="(live,index) in liveList">
+                        <a href="" class="item_banner" v-if="index === 0" target="_blank">
+                            <img :src="live.banner" alt="">
+                            <div class="name">{{ live.title }}</div>
+                            <div class="statu">
+                                <i :class="live.status | statusTypeClass"></i>
+                                <p>{{ live.status | statusType }}</p>
+                            </div>
+                        </a>
+                        <a href="" class="item_text" v-if="index > 0" target="_blank">
+                            <p class="item_text_name">{{ live.title }}</p>
+                            <p class="item_text_time">{{ live.time }}</p>
+                        </a>
                     </div>
                 </div>
-            </div>
-            <div v-if="item.type==5" class="floorCon smallTopic">
-                <!--小专题-->
-                <ul class="mfw">
-                    <li v-for="topic in item.floorData" style="display: inline-block">
-                        <a :href="topic.link">
-                            <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
-                            <p v-text="topic.title"></p>
+                <div class="section_right_item">
+                    <div class="right_item_title">
+                        <p>热门文章</p>
+                        <a href="https://www.caimei365.com/info/center-3-1.html" target="_blank">更多></a>
+                    </div>
+                    <div class="right_item_main" v-for="(live,index) in liveList">
+                        <a href="" class="item_banner" v-if="index === 0" target="_blank">
+                            <img :src="live.banner" alt="">
+                            <div class="name">{{ live.title }}</div>
                         </a>
-                    </li>
-                </ul>
-            </div>
-            <div v-if="item.type==3">
-                <div class="floorTit">
-                    <h2 v-text="item.title" data-id="3">优质供应商</h2>
-                    <h5>采美正品联盟 质量保证</h5>
+                        <a href="" class="item_text" v-if="index > 0" target="_blank">
+                            <p class="item_text_name">{{ live.title }}</p>
+                            <p class="item_text_time">{{ live.time }}</p>
+                        </a>
+                    </div>
                 </div>
-                <div class="floorCon">
-                    <div class="supplierList">
-                        <ul class="clear mfw">
-                            <li><img src="/img/common/goodsup.png"/></li>
-                            <li v-for="topic in item.floorData" style="display: inline-block">
-                                <a :href="topic.link">
-                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
-                                    <p v-text="topic.title"></p>
-                                </a>
-                            </li>
-                        </ul>
+                <div class="section_right_item">
+                    <div class="right_item_title">
+                        <p>最新活动</p>
+                        <a href="/promotions.html" target="_blank">更多></a>
+                    </div>
+                    <div class="right_item_main" v-for="(live,index) in liveList">
+                        <a href="" class="item_banner" v-if="index === 0" target="_blank">
+                            <img :src="live.banner" alt="">
+                            <div class="name">{{ live.title }}</div>
+                        </a>
+                        <a href="" class="item_text" v-if="index > 0" target="_blank">
+                            <p class="item_text_name">{{ live.title }}</p>
+                            <p class="item_text_time">{{ live.time }}</p>
+                        </a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <!--右侧边栏导航-->
-    <div id="sideNav">
-        <div class="item">
-            <a v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" href="javascript:void(0);"></a>
-        </div>
-    </div>
-    <!--左侧广告图-->
-    <div id="advertising">
-        <div class="item" v-for="ad in advertising">
-            <a :href="ad.link" target="_blank">
-                <img :src="ad.image" :alt="ad.title">
-            </a>
-            <span class="close"></span>
-        </div>
-    </div>
 </div>
 
+
+
+
+
+
+
+
+
+
+
+
+
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
 </body>
-</html>
+</html>

+ 202 - 0
src/main/resources/templates/index_old.html

@@ -0,0 +1,202 @@
+<!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>
+    <meta name="baidu-site-verification" content="KbkRJg9357"/>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/index/index.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/index/index.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 首页 -->
+<div id="container">
+    <!--首页图片轮播-->
+    <div id="swiper-container" class="swiper-container">
+        <ul class="swiper-wrapper">
+            <li class="swiper-slide mfc" v-for="img in images">
+                <a :href="img.link"><img :src="img.image" :alt="img.title"></a>
+            </li>
+        </ul>
+        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in images.length"></span></div>
+        <a class="swiper-button-prev" href="javascript:void(0)"></a>
+        <a class="swiper-button-next" href="javascript:void(0)"></a>
+    </div>
+    <!--移动端首页导航-->
+    <div class="mNavBox h5Only">
+        <ul class="mfw">
+            <!--导航菜单-->
+            <li class="first" th:each="menu: ${topMenuList}">
+                <a th:if="${menu.link}" class="nav mIcon" th:href="${menu.link}"><span th:text="${menu.name}"></span></a>
+                <a th:unless="${menu.link}" class="nav mIcon" href="javascript:void(0);" @click="showSubNav($event)">
+                    <span th:text="${menu.name}"></span>
+                </a>
+                <div class="navItem" th:if="${not #lists.isEmpty(menu.subMenus)}">
+                    <div class="mfw">
+                        <a class="second" th:each="sub: ${menu.subMenus}" th:href="${sub.link}">
+                            <img th:src="${sub.image}">
+                            <span th:text="${sub.name}"></span>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li class="first"><a class="nav mIcon" href="/repair.html"><span>维修</span></a></li>
+        </ul>
+    </div>
+    <!--页面主体数据-->
+    <div class="wrap">
+        <div>
+            <div class="floorTit toLogin">
+                <h2 v-for="item in pageFloors" v-if="item.type==1" v-text="item.title" data-id="1"></h2>
+                <h2 v-else-if="pageFloors.length==0" data-id="1">推荐专区</h2>
+            </div>
+            <div class="floorCon">
+                <div id="recommendBox" class="swiper-container">
+                    <ul class="swiper-wrapper" v-cloak>
+                        <li class="swiper-slide productItem mfc" v-for="p in recommends">
+                            <div class="item">
+                                <a class="image" :href="'/product-'+p.id+'.html'">
+                                    <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                                    <span v-if="p.actType==1||p.actType==2" :class="p.actType==1?'icon mIcon hot':'icon mIcon new'"></span>
+                                </a>
+                                <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                                    <span v-html="p.name"></span>
+                                </a>
+                                <div class="price mfhc">
+                                    <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                        <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                                        <template v-if="p.priceFlag==1">
+                                            <em>¥价格未公开</em>
+                                            <div class="btnBox">
+                                                <a href="javascript:void(0)" class="btn cat">价格未公开,请联系 0755-22907771</a>
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                                <em class="p" v-text="'¥'+parseFloat(p.price).toFixed(2)"></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                            <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
+                                                <em>¥会员可见</em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                                <div class="btnBox">
+                                                    <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <em>¥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                                <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                            </template>
+                                        </template>
+                                    </template>
+                                    <template v-else>
+                                        <em>¥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                        <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                        <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
+                                    </template>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+                </div>
+            </div>
+        </div>
+        <div v-for="item in pageFloors">
+            <div v-if="item.type==6">
+                <!--大专题-->
+                <div v-for="bigTopic in item.subFloors">
+                    <div class="floorTit">
+                        <h3 v-text="bigTopic.title" :data-id="'6-'+bigTopic.id"></h3>
+                        <h5 v-text="bigTopic.detail"></h5>
+                    </div>
+                    <div class="floorCon">
+                        <ul class="floorList clear mfw">
+                            <li v-for="floor in bigTopic.floorData" style="display: inline-block">
+                                <a :href="floor.link">
+                                    <img src="/img/base/placeholder.png" :data-original="floor.image" :alt="floor.title">
+                                    <p v-text="floor.title"></p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div v-if="item.type==4">
+                <div class="floorTit">
+                    <h2 v-text="item.title" data-id="4">专题</h2>
+                    <a class="more" href="/promotions.html">更多商品专题</a>
+                </div>
+                <div class="floorCon">
+                    <div id="goodsTopic" class="swiper-container">
+                        <ul class="swiper-wrapper" v-cloak>
+                            <li class="swiper-slide mfc" v-for="topic in item.floorData">
+                                <a :href="topic.link">
+                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
+                                </a>
+                            </li>
+                        </ul>
+                        <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in item.floorData.length"></span></div>
+                        <a class="swiper-button-prev" href="javascript:void(0)"></a>
+                        <a class="swiper-button-next" href="javascript:void(0)"></a>
+                    </div>
+                </div>
+            </div>
+            <div v-if="item.type==5" class="floorCon smallTopic">
+                <!--小专题-->
+                <ul class="mfw">
+                    <li v-for="topic in item.floorData" style="display: inline-block">
+                        <a :href="topic.link">
+                            <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
+                            <p v-text="topic.title"></p>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div v-if="item.type==3">
+                <div class="floorTit">
+                    <h2 v-text="item.title" data-id="3">优质供应商</h2>
+                    <h5>采美正品联盟 质量保证</h5>
+                </div>
+                <div class="floorCon">
+                    <div class="supplierList">
+                        <ul class="clear mfw">
+                            <li><img src="/img/common/goodsup.png"/></li>
+                            <li v-for="topic in item.floorData" style="display: inline-block">
+                                <a :href="topic.link">
+                                    <img src="/img/base/placeholder.png" :data-original="topic.image" :alt="topic.title">
+                                    <p v-text="topic.title"></p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--右侧边栏导航-->
+    <div id="sideNav">
+        <div class="item">
+            <a v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" href="javascript:void(0);"></a>
+        </div>
+    </div>
+    <!--左侧广告图-->
+    <div id="advertising">
+        <div class="item" v-for="ad in advertising">
+            <a :href="ad.link" target="_blank">
+                <img :src="ad.image" :alt="ad.title">
+            </a>
+            <span class="close"></span>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/index.js(v=${version})}"></script>
+</body>
+</html>

+ 17 - 15
src/main/resources/templates/single-page/investment.html

@@ -6,22 +6,22 @@
     <template th:replace="components/head-link"></template>
     <style type="text/css">
         /** PC */
-        @media screen and (min-width:768px){#investment .wrap{width:1184px;margin:0 auto -30px auto}
-            #investment .wrap img{display:block;width:100%}
-            #investment .wrap .btn{position:fixed;right:50%;margin-right:-510px;width:235px;top:200px}
-            #investment .wrap .btn a{display:block;width:235px;height:45px;margin-bottom:16px}
-            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
-            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
-            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
+        @media screen and (min-width:768px){#investment .wrap{width:1184px;margin:0 auto -30px auto;}
+            #investment .wrap img{display:block;width:100%;}
+            #investment .wrap .btn{position:fixed;right:50%;margin-right:-510px;width:152px;top:250px;}
+            #investment .wrap .btn a{display:block;width:152px;height:42px;margin-bottom:16px;}
+            #investment .more{background:url(/img/investment/icon-more.png) no-repeat center center;}
+            #investment .back{background:url(/img/investment/icon-back.png) no-repeat center center;}
+            #investment .bank{background:url(/img/investment/icon-bank.png) no-repeat center center;}
         }
         /** 移动端 */
-        @media screen and (max-width:768px){#investment .wrap{width:100vw;margin:0 auto;position:relative}
+        @media screen and (max-width:768px){#investment .wrap{width:100vw;margin:0 auto;position:relative;}
             #investment .wrap img{display:block;width:100%}
-            #investment .wrap .btn{position:absolute;left:23vw;bottom:4vw}
-            #investment .wrap .btn a{display:inline-block;width:54vw;height:12vw;background-size:100%}
-            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
-            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
-            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
+            #investment .wrap .btn{position:absolute;left:50%;bottom:4vw}
+            #investment .wrap .btn a{display:inline-block;width:39vw;height:12vw;background-size:100%;}
+            #investment .more{background:url(/img/investment/icon-more.png) no-repeat center center;}
+            #investment .back{background:url(/img/investment/icon-back.png) no-repeat center center;}
+            #investment .bank{background:url(/img/investment/icon-bank.png) no-repeat center center;}
         }
     </style>
 </head>
@@ -39,14 +39,14 @@
                 <img src="/img/investment/pc_3.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="more" @click="showMore()"></a>
-                    <!--<a href="javascript:void(0);" class="down" @click="toDownload()"></a>-->
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank" target="_blank"></a>
                 </div>
             </template>
             <template v-else>
                 <img src="/img/investment/pc_4.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="back" @click="goBack()"></a>
-                    <!--<a href="javascript:void(0);" class="down" @click="toDownload()"></a>-->
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank" target="_blank"></a>
                 </div>
             </template>
         </div>
@@ -57,6 +57,7 @@
                 <img src="/img/investment/h5_3.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="more" @click="showMore()"></a>
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank"></a>
                 </div>
             </template>
             <template v-else>
@@ -64,6 +65,7 @@
                 <img src="/img/investment/h5_5.jpg">
                 <div class="btn">
                     <a href="javascript:void(0);" class="back" @click="goBack()"></a>
+                    <a href="https://www.caimei365.com/page.html?id=223" class="bank"></a>
                 </div>
             </template>
         </div>

+ 1 - 0
src/main/resources/templates/single-page/topic.html

@@ -23,6 +23,7 @@
             <div class="title">
                 <span v-text="floor.title"></span>
                 <a v-if="floor.link" :href="floor.link" class="more">查看更多>>></a>
+                <a v-if="pageType==6" class="talk_link" href="https://www.caimei365.com/info/detail-5856-1.html" target="_blank">超皮秒防伪查询</a>
             </div>
             <ul class="content clear">
                 <li v-for="item in floor.floorData">

Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio