快捷运营更新

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

@@ -55,6 +55,11 @@ public class ProductController extends BaseController {
      */
     private static final String BEAUTY_TOP_PATH = "product/beautytopic";
 
+    /**
+     * 快捷运营
+     */
+    private static final String QUICK_OPERATION = "quickOperation/index";
+
     private ProductService productService;
 
     private SinglePageService singlePageService;
@@ -410,5 +415,17 @@ public class ProductController extends BaseController {
         return ACTIVITY_APPROVE_IFRAME;
     }
 
-
+    /**
+     * 快捷运营
+     */
+    @GetMapping("/quickOperation/operation-{id}.html")
+    public String getQuickOperation(final Model model, @PathVariable("id") Integer id) {
+        // 活动专题页
+        Integer pageId = singlePageService.getBeautyPageIdById(id);
+        if (pageId == null) {
+            return super.errorPath();
+        }
+        model.addAttribute("pageId", id);
+        return QUICK_OPERATION;
+    }
 }

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

@@ -13,7 +13,82 @@
 #swiper-container .swiper-pagination .swiper-pagination-bullet{display:block;width:2vw;border-width:1vw 1px;border-color:transparent;cursor:pointer;background:none;font-size:0;opacity:.2}
 #swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:block;width:100%;height:.6vw;background:#FFF;border-radius:.3vw}
 #swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width:3.8vw;opacity:1}
- /*公告*/
+ /* 快捷运营 */
+ .quickOperation {
+ }
+ .quickOperation .my-swipe .van-swipe-item {
+  height: 57.8vw;
+ }
+ .carousel-list {
+  padding: 2.4vw;
+  display: grid !important;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-gap: 2.4vw;
+ }
+ .quickOperation .van-swipe-item .list {
+  width: 45.6vw;
+  height: 20vw;
+  display: flex;
+  align-items: center;
+  border: 1px solid;
+ }
+ .quickOperation .van-swipe__indicator {
+  width: 1.867vw;
+  height: 5px;
+  background: #E15621;
+  border-radius: 8px 8px 8px 8px;
+  opacity: 0.2;
+ }
+ .quickOperation .van-swipe__indicator--active {
+  background-color: #E15621;
+  opacity: 1;
+  width: 3.6vw;
+  height: 5px;
+  border-radius: 8px;
+ }
+ .quickOperation .list .list-content {
+  height: 11.067vw;
+  margin-left: 3.2vw;
+  display: flex;
+  justify-content: space-between;
+ }
+ .quickOperation .list .list-content .list-icon {
+  width: 11.067vw;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid;
+ }
+ .quickOperation .list .list-content .list-title {
+  margin-left: 2.4vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+ }
+ .quickOperation .list .list-content .list-title .title-1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+ }
+ .quickOperation .list .list-content .list-title .title-1 .title-1-item {
+  font-size: 3.6vw;
+  font-weight: bold;
+ }
+ .quickOperation .list .list-content .list-title .title-1 .title-2-item {
+  width: 8vw;
+  height: 4vw;
+  background-color: #FF5B00;
+  border-radius: 2px;
+  font-size: 2.8vw;
+  color: white;
+  text-align: center;
+  line-height:4vw;
+ }
+ .quickOperation .list .list-content .list-title .title-2 {
+  color: #999999;
+  font-size: 2.8vw;
+ }
+  /*公告*/
  #new-container{height: 12vw;background-color: #F7F7F7;padding:4vw 3.2vw 0 3.2vw;box-sizing: border-box;}
  #new-container .inner{width: 100%;height: 100%;background: url("/img/base/icon-newbgh5@2x.png");background-size: cover;box-sizing: border-box;padding:0 3vw;border-radius: 1vw;}
  #new-container .new-list{float: left;width: 62vw;}

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

@@ -21,6 +21,127 @@ li{list-style:none;}
 #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}
 .swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
+/* 快捷运营 */
+.quickOperation {
+    float: left;
+    width: 100%;
+    padding-top: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.quickOperation .el-carousel {
+    width: 1300px;
+}
+.quickOperation .el-carousel .el-carousel__button {
+    width: 14px;
+    height: 5px;
+}
+.quickOperation .el-carousel__indicators--outside button {
+    background-color: #FF5B00 !important;
+    border-radius: 10px;
+}
+.quickOperation .el-carousel__indicator.is-active button {
+    width: 28px;
+}
+.quickOperation .el-carousel__arrow {
+    height: 68px;
+    width: 44px;
+    background-color: #666666;
+    border-radius: 0;
+    opacity: 0.2;
+    font-size: 24px;
+}
+.quickOperation .el-carousel__arrow--left {
+    left: 0;
+}
+.quickOperation .el-carousel__arrow--right {
+    right: 0;
+}
+.quickOperation .el-carousel__container {
+    height: 150px !important;
+}
+.quickOperation .carousel-list {
+    width: 1180px;
+    height: 100%;
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 14px;
+}
+.quickOperation .el-carousel__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.quickOperation .el-carousel__item .list {
+    padding-top: 20px;
+    transition: .3s;
+}
+.quickOperation .carousel-list .list .card {
+    border: 1px solid;
+    height: 120px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.quickOperation .carousel-list .list:hover {
+    padding: 0;
+}
+.quickOperation .carousel-list .list:hover .card {
+    border: 1px solid #FF5B00;
+}
+.quickOperation .carousel-list .list .card .card-content {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    padding-left: 28px;
+}
+.carousel-list .card-content .card-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    border: 1px solid;
+}
+.carousel-list .card-content .card-title{
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 64px;
+}
+.carousel-list .card-content .card-title .title-1 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.carousel-list .card-content .card-title .title-1 .title-1-item {
+    font-size: 18px;
+    font-weight: bold;
+    color: #4A4F58;
+}
+.carousel-list .card-content .card-title .title-1 .title-2-item {
+    width: 38px;
+    height: 18px;
+    border-radius: 2px;
+    border: 1px solid #B2B2B2;
+    font-size: 12px;
+    color: #B2B2B2;
+    text-align: center;
+    line-height: 18px;
+}
+.carousel-list .card-content .card-title .title-2 {
+    font-size: 14px;
+    color: #999999;
+}
+.quickOperation .carousel-list .list:hover .card-content .card-title .title-1 .title-1-item {
+    color: #FF5B00;
+}
+.quickOperation .carousel-list .list:hover .card-content .card-title .title-1 .title-2-item {
+    background-color: #FE452D;
+    color: white;
+    border: 1px solid #FE452D;
+}
 /*公告*/
 #new-container{height: 48px;background: url("/img/base/icon-newbg@2x.png");background-size: cover;}
 #new-container .new-list{float: left;}

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

@@ -0,0 +1,780 @@
+body{background:#f5f5f5}
+#globalFot #scrollTop {
+    display: none !important;
+}
+a{color:#333;text-decoration:none}
+[v-cloak] {
+    opacity: 0;
+}
+.swiper-wrapper{height: auto;}
+.cm-left{float:left}
+.cm-right{float:right}
+.cm-clearfix::after,.cm-container::after,.cm-row::after{content:'';display:block;clear:both}
+.cm-hidden,.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{overflow:hidden}
+.cm-none{display:none}
+.cm-not-visible{visibility:hidden}
+.cm-flex,.cm-flex-j-between{display:-webkit-box;display:-ms-flexbox;display:flex}
+.bg-white{background-color:#fff}
+.cm-flex-j-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.cm-flex-1{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.text-justify{text-align:justify}
+.cm-radius-4{border-radius:4px;overflow:hidden}
+.cm-absolute{position:absolute}
+.cm-relative{position:relative}
+.cm-top,.cm-top-left,.cm-top-right{top:0}
+.cm-bottom,.cm-bottom-right,.cm-bottom-left{bottom:0}
+.cm-left,.cm-top-left,.cm-bottom-left{left:0}
+.cm-right,.cm-top-right,.cm-bottom-right{right:0}
+.bg-white{background-color:#fff}
+.cm-text-ellipsis-1,.cm-text-ellipsis-2,.cm-text-ellipsis-3,.cm-text-ellipsis-4{display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}
+.cm-text-ellipsis-1{-webkit-line-clamp:1}
+.cm-text-ellipsis-2{-webkit-line-clamp:2}
+.cm-text-ellipsis-3{-webkit-line-clamp:3}
+.cm-text-ellipsis-4{-webkit-line-clamp:4}
+.cm-img-responsive{max-width:100%;height:auto;display:block}
+.cm-container{width:100%;margin:0 auto}
+[class*='cm-col-']{float:left;-webkit-box-sizing:border-box;box-sizing:border-box}
+.cm-floor .swiper-slide{ height: auto;}
+.cm-product-item .cm-prodcut-price .price.none{color: #999;text-decoration: line-through;}
+.cm-product-item .cm-prodcut-price .price.none .red{color: #999;}
+@media (max-width:560px){
+    .cm-col-xs-1{width:1.66667%}
+    .cm-col-xs-2{width:3.33333%}
+    .cm-col-xs-3{width:5%}
+    .cm-col-xs-4{width:6.66667%}
+    .cm-col-xs-5{width:8.33333%}
+    .cm-col-xs-6{width:10%}
+    .cm-col-xs-7{width:11.66667%}
+    .cm-col-xs-8{width:13.33333%}
+    .cm-col-xs-9{width:15%}
+    .cm-col-xs-10{width:16.66667%}
+    .cm-col-xs-11{width:18.33333%}
+    .cm-col-xs-12{width:20%}
+    .cm-col-xs-13{width:21.66667%}
+    .cm-col-xs-14{width:23.33333%}
+    .cm-col-xs-15{width:25%}
+    .cm-col-xs-16{width:26.66667%}
+    .cm-col-xs-17{width:28.33333%}
+    .cm-col-xs-18{width:30%}
+    .cm-col-xs-19{width:31.66667%}
+    .cm-col-xs-20{width:33.33333%}
+    .cm-col-xs-21{width:35%}
+    .cm-col-xs-22{width:36.66667%}
+    .cm-col-xs-23{width:38.33333%}
+    .cm-col-xs-24{width:40%}
+    .cm-col-xs-25{width:41.66667%}
+    .cm-col-xs-26{width:43.33333%}
+    .cm-col-xs-27{width:45%}
+    .cm-col-xs-28{width:46.66667%}
+    .cm-col-xs-29{width:48.33333%}
+    .cm-col-xs-30{width:50%}
+    .cm-col-xs-31{width:51.66667%}
+    .cm-col-xs-32{width:53.33333%}
+    .cm-col-xs-33{width:55%}
+    .cm-col-xs-34{width:56.66667%}
+    .cm-col-xs-35{width:58.33333%}
+    .cm-col-xs-36{width:60%}
+    .cm-col-xs-37{width:61.66667%}
+    .cm-col-xs-38{width:63.33333%}
+    .cm-col-xs-39{width:65%}
+    .cm-col-xs-40{width:66.66667%}
+    .cm-col-xs-41{width:68.33333%}
+    .cm-col-xs-42{width:70%}
+    .cm-col-xs-43{width:71.66667%}
+    .cm-col-xs-44{width:73.33333%}
+    .cm-col-xs-45{width:75%}
+    .cm-col-xs-46{width:76.66667%}
+    .cm-col-xs-47{width:78.33333%}
+    .cm-col-xs-48{width:80%}
+    .cm-col-xs-49{width:81.66667%}
+    .cm-col-xs-50{width:83.33333%}
+    .cm-col-xs-51{width:85%}
+    .cm-col-xs-52{width:86.66667%}
+    .cm-col-xs-53{width:88.33333%}
+    .cm-col-xs-54{width:90%}
+    .cm-col-xs-55{width:91.66667%}
+    .cm-col-xs-56{width:93.33333%}
+    .cm-col-xs-57{width:95%}
+    .cm-col-xs-58{width:96.66667%}
+    .cm-col-xs-59{width:98.33333%}
+    .cm-col-xs-60{width:100%}
+    .cm-m-a-1{margin:0.25vw}
+    .cm-p-a-1{padding:0.25vw}
+    .cm-m-t-1{margin-top:0.25vw}
+    .cm-p-t-1{padding-top:0.25vw}
+    .cm-m-b-1{margin-bottom:0.25vw}
+    .cm-p-b-1{padding-bottom:0.25vw}
+    .cm-m-l-1{margin-left:0.25vw}
+    .cm-p-l-1{padding-left:0.25vw}
+    .cm-m-r-1{margin-right:0.25vw}
+    .cm-p-r-1{padding-right:0.25vw}
+    .cm-m-a-2{margin:0.5vw}
+    .cm-p-a-2{padding:0.5vw}
+    .cm-m-t-2{margin-top:0.5vw}
+    .cm-p-t-2{padding-top:0.5vw}
+    .cm-m-b-2{margin-bottom:0.5vw}
+    .cm-p-b-2{padding-bottom:0.5vw}
+    .cm-m-l-2{margin-left:0.5vw}
+    .cm-p-l-2{padding-left:0.5vw}
+    .cm-m-r-2{margin-right:0.5vw}
+    .cm-p-r-2{padding-right:0.5vw}
+    .cm-m-a-3{margin:0.75vw}
+    .cm-p-a-3{padding:0.75vw}
+    .cm-m-t-3{margin-top:0.75vw}
+    .cm-p-t-3{padding-top:0.75vw}
+    .cm-m-b-3{margin-bottom:0.75vw}
+    .cm-p-b-3{padding-bottom:0.75vw}
+    .cm-m-l-3{margin-left:0.75vw}
+    .cm-p-l-3{padding-left:0.75vw}
+    .cm-m-r-3{margin-right:0.75vw}
+    .cm-p-r-3{padding-right:0.75vw}
+    .cm-m-a-4{margin:1vw}
+    .cm-p-a-4{padding:1vw}
+    .cm-m-t-4{margin-top:1vw}
+    .cm-p-t-4{padding-top:1vw}
+    .cm-m-b-4{margin-bottom:1vw}
+    .cm-p-b-4{padding-bottom:1vw}
+    .cm-m-l-4{margin-left:1vw}
+    .cm-p-l-4{padding-left:1vw}
+    .cm-m-r-4{margin-right:1vw}
+    .cm-p-r-4{padding-right:1vw}
+    .cm-m-a-5{margin:1.25vw}
+    .cm-p-a-5{padding:1.25vw}
+    .cm-m-t-5{margin-top:1.25vw}
+    .cm-p-t-5{padding-top:1.25vw}
+    .cm-m-b-5{margin-bottom:1.25vw}
+    .cm-p-b-5{padding-bottom:1.25vw}
+    .cm-m-l-5{margin-left:1.25vw}
+    .cm-p-l-5{padding-left:1.25vw}
+    .cm-m-r-5{margin-right:1.25vw}
+    .cm-p-r-5{padding-right:1.25vw}
+    .cm-m-a-6{margin:1.5vw}
+    .cm-p-a-6{padding:1.5vw}
+    .cm-m-t-6{margin-top:1.5vw}
+    .cm-p-t-6{padding-top:1.5vw}
+    .cm-m-b-6{margin-bottom:1.5vw}
+    .cm-p-b-6{padding-bottom:1.5vw}
+    .cm-m-l-6{margin-left:1.5vw}
+    .cm-p-l-6{padding-left:1.5vw}
+    .cm-m-r-6{margin-right:1.5vw}
+    .cm-p-r-6{padding-right:1.5vw}
+    .cm-m-a-7{margin:1.75vw}
+    .cm-p-a-7{padding:1.75vw}
+    .cm-m-t-7{margin-top:1.75vw}
+    .cm-p-t-7{padding-top:1.75vw}
+    .cm-m-b-7{margin-bottom:1.75vw}
+    .cm-p-b-7{padding-bottom:1.75vw}
+    .cm-m-l-7{margin-left:1.75vw}
+    .cm-p-l-7{padding-left:1.75vw}
+    .cm-m-r-7{margin-right:1.75vw}
+    .cm-p-r-7{padding-right:1.75vw}
+    .cm-m-a-8{margin:2vw}
+    .cm-p-a-8{padding:2vw}
+    .cm-m-t-8{margin-top:2vw}
+    .cm-p-t-8{padding-top:2vw}
+    .cm-m-b-8{margin-bottom:2vw}
+    .cm-p-b-8{padding-bottom:2vw}
+    .cm-m-l-8{margin-left:2vw}
+    .cm-p-l-8{padding-left:2vw}
+    .cm-m-r-8{margin-right:2vw}
+    .cm-p-r-8{padding-right:2vw}
+    .cm-m-a-9{margin:2.25vw}
+    .cm-p-a-9{padding:2.25vw}
+    .cm-m-t-9{margin-top:2.25vw}
+    .cm-p-t-9{padding-top:2.25vw}
+    .cm-m-b-9{margin-bottom:2.25vw}
+    .cm-p-b-9{padding-bottom:2.25vw}
+    .cm-m-l-9{margin-left:2.25vw}
+    .cm-p-l-9{padding-left:2.25vw}
+    .cm-m-r-9{margin-right:2.25vw}
+    .cm-p-r-9{padding-right:2.25vw}
+    .cm-m-a-10{margin:2.5vw}
+    .cm-p-a-10{padding:2.5vw}
+    .cm-m-t-10{margin-top:2.5vw}
+    .cm-p-t-10{padding-top:2.5vw}
+    .cm-m-b-10{margin-bottom:2.5vw}
+    .cm-p-b-10{padding-bottom:2.5vw}
+    .cm-m-l-10{margin-left:2.5vw}
+    .cm-p-l-10{padding-left:2.5vw}
+    .cm-m-r-10{margin-right:2.5vw}
+    .cm-p-r-10{padding-right:2.5vw}
+    .cm-m-a-11{margin:2.75vw}
+    .cm-p-a-11{padding:2.75vw}
+    .cm-m-t-11{margin-top:2.75vw}
+    .cm-p-t-11{padding-top:2.75vw}
+    .cm-m-b-11{margin-bottom:2.75vw}
+    .cm-p-b-11{padding-bottom:2.75vw}
+    .cm-m-l-11{margin-left:2.75vw}
+    .cm-p-l-11{padding-left:2.75vw}
+    .cm-m-r-11{margin-right:2.75vw}
+    .cm-p-r-11{padding-right:2.75vw}
+    .cm-m-a-12{margin:3vw}
+    .cm-p-a-12{padding:3vw}
+    .cm-m-t-12{margin-top:3vw}
+    .cm-p-t-12{padding-top:3vw}
+    .cm-m-b-12{margin-bottom:3vw}
+    .cm-p-b-12{padding-bottom:3vw}
+    .cm-m-l-12{margin-left:3vw}
+    .cm-p-l-12{padding-left:3vw}
+    .cm-m-r-12{margin-right:3vw}
+    .cm-p-r-12{padding-right:3vw}
+    .cm-m-a-13{margin:3.25vw}
+    .cm-p-a-13{padding:3.25vw}
+    .cm-m-t-13{margin-top:3.25vw}
+    .cm-p-t-13{padding-top:3.25vw}
+    .cm-m-b-13{margin-bottom:3.25vw}
+    .cm-p-b-13{padding-bottom:3.25vw}
+    .cm-m-l-13{margin-left:3.25vw}
+    .cm-p-l-13{padding-left:3.25vw}
+    .cm-m-r-13{margin-right:3.25vw}
+    .cm-p-r-13{padding-right:3.25vw}
+    .cm-m-a-14{margin:3.5vw}
+    .cm-p-a-14{padding:3.5vw}
+    .cm-m-t-14{margin-top:3.5vw}
+    .cm-p-t-14{padding-top:3.5vw}
+    .cm-m-b-14{margin-bottom:3.5vw}
+    .cm-p-b-14{padding-bottom:3.5vw}
+    .cm-m-l-14{margin-left:3.5vw}
+    .cm-p-l-14{padding-left:3.5vw}
+    .cm-m-r-14{margin-right:3.5vw}
+    .cm-p-r-14{padding-right:3.5vw}
+    .cm-m-a-15{margin:3.75vw}
+    .cm-p-a-15{padding:3.75vw}
+    .cm-m-t-15{margin-top:3.75vw}
+    .cm-p-t-15{padding-top:3.75vw}
+    .cm-m-b-15{margin-bottom:3.75vw}
+    .cm-p-b-15{padding-bottom:3.75vw}
+    .cm-m-l-15{margin-left:3.75vw}
+    .cm-p-l-15{padding-left:3.75vw}
+    .cm-m-r-15{margin-right:3.75vw}
+    .cm-p-r-15{padding-right:3.75vw}
+    .cm-m-a-16{margin:4vw}
+    .cm-p-a-16{padding:4vw}
+    .cm-m-t-16{margin-top:4vw}
+    .cm-p-t-16{padding-top:4vw}
+    .cm-m-b-16{margin-bottom:4vw}
+    .cm-p-b-16{padding-bottom:4vw}
+    .cm-m-l-16{margin-left:4vw}
+    .cm-p-l-16{padding-left:4vw}
+    .cm-m-r-16{margin-right:4vw}
+    .cm-p-r-16{padding-right:4vw}
+    .cm-m-a-17{margin:4.25vw}
+    .cm-p-a-17{padding:4.25vw}
+    .cm-m-t-17{margin-top:4.25vw}
+    .cm-p-t-17{padding-top:4.25vw}
+    .cm-m-b-17{margin-bottom:4.25vw}
+    .cm-p-b-17{padding-bottom:4.25vw}
+    .cm-m-l-17{margin-left:4.25vw}
+    .cm-p-l-17{padding-left:4.25vw}
+    .cm-m-r-17{margin-right:4.25vw}
+    .cm-p-r-17{padding-right:4.25vw}
+    .cm-m-a-18{margin:4.5vw}
+    .cm-p-a-18{padding:4.5vw}
+    .cm-m-t-18{margin-top:4.5vw}
+    .cm-p-t-18{padding-top:4.5vw}
+    .cm-m-b-18{margin-bottom:4.5vw}
+    .cm-p-b-18{padding-bottom:4.5vw}
+    .cm-m-l-18{margin-left:4.5vw}
+    .cm-p-l-18{padding-left:4.5vw}
+    .cm-m-r-18{margin-right:4.5vw}
+    .cm-p-r-18{padding-right:4.5vw}
+    .cm-m-a-19{margin:4.75vw}
+    .cm-p-a-19{padding:4.75vw}
+    .cm-m-t-19{margin-top:4.75vw}
+    .cm-p-t-19{padding-top:4.75vw}
+    .cm-m-b-19{margin-bottom:4.75vw}
+    .cm-p-b-19{padding-bottom:4.75vw}
+    .cm-m-l-19{margin-left:4.75vw}
+    .cm-p-l-19{padding-left:4.75vw}
+    .cm-m-r-19{margin-right:4.75vw}
+    .cm-p-r-19{padding-right:4.75vw}
+    .cm-m-a-20{margin:5vw}
+    .cm-p-a-20{padding:5vw}
+    .cm-m-t-20{margin-top:5vw}
+    .cm-p-t-20{padding-top:5vw}
+    .cm-m-b-20{margin-bottom:5vw}
+    .cm-p-b-20{padding-bottom:5vw}
+    .cm-m-l-20{margin-left:5vw}
+    .cm-p-l-20{padding-left:5vw}
+    .cm-m-r-20{margin-right:5vw}
+    .cm-p-r-20{padding-right:5vw}
+    .p-icon{display:inline-block;width:66px;height:22px;vertical-align:middle}
+    .p-icon::before{content:'';display:inline-block;width:66px;height:22px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+    .p-icon.i1::before{background-position-y:-714px}
+    .p-icon.i2::before{background-position-y:-744px}
+    .p-icon.i3::before{background-position-y:-774px}
+    .p-icon.i4::before{background-position-y:-804px}
+    .p-icon.i5::before{background-position-y:-834px}
+    .cm-container{padding-left:1vw;padding-right:1vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .cm-floor{padding:2.2vw 0}
+    .cm-p-a{padding:1vw}
+    .cm-m-a{padding:1vw}
+    .cm-floor-title .cm-title{font-size:5vw;color:#4a4f58;font-weight:700;line-height:7.5vw;padding-top:1vw;padding-bottom:1vw}
+    .cm-floor-title .cm-subtitle{font-size:4vw;color:#93979f;padding-top:1vw;padding-bottom:1vw}
+    .cm-article-item{overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .cm-article-item .cm-article-title{font-size:3.5vw;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+    .cm-article-item .cm-article-desc{font-size:2.5vw;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
+    .cm-article-item .cm-article-desc.h56{height:10.5vw}
+    .cm-article-item .cm-article-cover.cover-168-168{width:27vw;height:27vw}
+    .cm-article-item.h200{height:33vw}
+    .cm-article-item .cm-line{display:none;height:1px;background-color:#f0f0f0}
+    .cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+    .cm-product-item .cm-product-title{font-size:3vw;color:#4a4f58;line-height:5vw;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-product-item .cm-prodcut-price{font-size:3vw;font-weight:bold}
+    .cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
+    .cm-product-item .h20{height:20px}
+    .cm-product-item .h24{height:24px;line-height: 24px;}
+    .cm-product-item .h44{height:10vw}
+    .swiper-container{padding-bottom:8vw}
+    .cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+    .cm-scroll-container::-webkit-scrollbar{display:none}
+    .cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+    .cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+    .cm-cover-tag{width:11vw;height:4vw;font-size:3vw;line-height:4vw;padding:0.5vw 1vw;border-radius:4px}
+    .cm-tabs{height:6vw}
+    .cm-tabs .cm-tab{font-size:3vw;width:12vw;height:6vw;line-height:6vw;text-align:center}
+    .cm-btn-box{text-align:center}
+    .cm-btn-box .cm-toggle-btn{width:20vw;height:6vw;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:6vw;font-size:3vw;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:10px;height:16px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
+    .cm-btn-box .cm-toggle-btn.down::after{background-position-x:-96px}
+    .cm-btn-box .cm-toggle-btn.up::after{background-position-x:-125px}
+    .cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
+    .cm-float-container .cm-regexp{ background: #fff; font-size: 2.4vw;line-height: 1.4;display: flex;justify-content: center;align-items: center;text-align: center;color: #666;}
+    .cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:12vw;height:12vw;margin:0.8vw 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
+    .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
+    .cm-float-container .cm-slide:hover .cm-tooltop{display:block}
+    .cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+    .cm-float-container .cm-slide:nth-child(1){height:13.2vw;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:12vw}
+    .cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+    .cm-float-container .cm-tooltop{position:absolute;padding:3.5vw;background:#ff5c00;top:0;right:16vw;border-radius:6px;display:none}
+    .cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content{font-size:3.2vw;color:#fff}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:51.6vw}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:2.5vw 0}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{text-align:center;width:44.8vw;}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:11vw;margin:3vw 3vw 0;width:1px;background:#f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:inline-block;width:16.4vw;height:16.4vw}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:2vw}
+    .cm-float-container .cm-mobile-tooltop .cm-tooltop-content .cm-item{ font-size: 1.8vw; }
+    .cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+    .cm-entry .cm-icon-content{position:absolute;width:75.1vw;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+    .cm-entry .cm-icon-content img{width:100%}
+    .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:6.45vw;height:6.45vw;right:5vw;top:-8vw;background:url(/img/activity/pc_close.png) no-repeat center center;background-size:6.4vw}
+    .cm-entry .cm-icon-content .btn{display: block;width: 10vw;height: 10vw;background: #666;position: absolute;right: 8vw;z-index: 999;cursor: pointer;opacity: 0;}
+    .cm-entry .cm-icon-content .btn1{top: 24vw;}
+    .cm-entry .cm-icon-content .btn2{top: 47.5vw;}
+    .cm-footer{padding:4vw 0 2vw;background-color:#4a4f58;text-align:center;color:#fff;font-size:2.4vw;overflow:hidden}
+    .cm-footer img{width:12vw}
+    .banner-container{position:relative;width:100vw;height:45vw;overflow:hidden}
+    .banner-container .banner{width:100vw;position:absolute;height:100%;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
+    .banner-container .cm-container{height:100%;padding: 0;}
+    .banner-container img{display:block;height:100%;width: 100%;}
+    .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
+    .has-player::before{content:'';cursor: pointer; display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6vw;height:6vw; background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 6vw;}
+    .cm-to-top{width:12vw;height:12vw;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar:nth-child(1){width:6vw;height:1vw;background:#999999;margin-top:4vw;}
+    .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:3vw solid transparent;border-right:3vw solid transparent;border-bottom:2vw solid #999999}
+    .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
+}
+@media (max-width:992px){
+    .cm-swiper-button-prev,.cm-swiper-button-next{display:none}
+}
+@media (min-width:560px){
+    .cm-col-md-1{width:1.66667%}
+    .cm-col-md-2{width:3.33333%}
+    .cm-col-md-3{width:5%}
+    .cm-col-md-4{width:6.66667%}
+    .cm-col-md-5{width:8.33333%}
+    .cm-col-md-6{width:10%}
+    .cm-col-md-7{width:11.66667%}
+    .cm-col-md-8{width:13.33333%}
+    .cm-col-md-9{width:15%}
+    .cm-col-md-10{width:16.66667%}
+    .cm-col-md-11{width:18.33333%}
+    .cm-col-md-12{width:20%}
+    .cm-col-md-13{width:21.66667%}
+    .cm-col-md-14{width:23.33333%}
+    .cm-col-md-15{width:25%}
+    .cm-col-md-16{width:26.66667%}
+    .cm-col-md-17{width:28.33333%}
+    .cm-col-md-18{width:30%}
+    .cm-col-md-19{width:31.66667%}
+    .cm-col-md-20{width:33.33333%}
+    .cm-col-md-21{width:35%}
+    .cm-col-md-22{width:36.66667%}
+    .cm-col-md-23{width:38.33333%}
+    .cm-col-md-24{width:40%}
+    .cm-col-md-25{width:41.66667%}
+    .cm-col-md-26{width:43.33333%}
+    .cm-col-md-27{width:45%}
+    .cm-col-md-28{width:46.66667%}
+    .cm-col-md-29{width:48.33333%}
+    .cm-col-md-30{width:50%}
+    .cm-col-md-31{width:51.66667%}
+    .cm-col-md-32{width:53.33333%}
+    .cm-col-md-33{width:55%}
+    .cm-col-md-34{width:56.66667%}
+    .cm-col-md-35{width:58.33333%}
+    .cm-col-md-36{width:60%}
+    .cm-col-md-37{width:61.66667%}
+    .cm-col-md-38{width:63.33333%}
+    .cm-col-md-39{width:65%}
+    .cm-col-md-40{width:66.66667%}
+    .cm-col-md-41{width:68.33333%}
+    .cm-col-md-42{width:70%}
+    .cm-col-md-43{width:71.66667%}
+    .cm-col-md-44{width:73.33333%}
+    .cm-col-md-45{width:75%}
+    .cm-col-md-46{width:76.66667%}
+    .cm-col-md-47{width:78.33333%}
+    .cm-col-md-48{width:80%}
+    .cm-col-md-49{width:81.66667%}
+    .cm-col-md-50{width:83.33333%}
+    .cm-col-md-51{width:85%}
+    .cm-col-md-52{width:86.66667%}
+    .cm-col-md-53{width:88.33333%}
+    .cm-col-md-54{width:90%}
+    .cm-col-md-55{width:91.66667%}
+    .cm-col-md-56{width:93.33333%}
+    .cm-col-md-57{width:95%}
+    .cm-col-md-58{width:96.66667%}
+    .cm-col-md-59{width:98.33333%}
+    .cm-col-md-60{width:100%}
+    .cm-m-a-1{margin:2px}
+    .cm-p-a-1{padding:2px}
+    .cm-m-t-1{margin-top:2px}
+    .cm-p-t-1{padding-top:2px}
+    .cm-m-b-1{margin-bottom:2px}
+    .cm-p-b-1{padding-bottom:2px}
+    .cm-m-l-1{margin-left:2px}
+    .cm-p-l-1{padding-left:2px}
+    .cm-m-r-1{margin-right:2px}
+    .cm-p-r-1{padding-right:2px}
+    .cm-m-a-2{margin:4px}
+    .cm-p-a-2{padding:4px}
+    .cm-m-t-2{margin-top:4px}
+    .cm-p-t-2{padding-top:4px}
+    .cm-m-b-2{margin-bottom:4px}
+    .cm-p-b-2{padding-bottom:4px}
+    .cm-m-l-2{margin-left:4px}
+    .cm-p-l-2{padding-left:4px}
+    .cm-m-r-2{margin-right:4px}
+    .cm-p-r-2{padding-right:4px}
+    .cm-m-a-3{margin:6px}
+    .cm-p-a-3{padding:6px}
+    .cm-m-t-3{margin-top:6px}
+    .cm-p-t-3{padding-top:6px}
+    .cm-m-b-3{margin-bottom:6px}
+    .cm-p-b-3{padding-bottom:6px}
+    .cm-m-l-3{margin-left:6px}
+    .cm-p-l-3{padding-left:6px}
+    .cm-m-r-3{margin-right:6px}
+    .cm-p-r-3{padding-right:6px}
+    .cm-m-a-4{margin:8px}
+    .cm-p-a-4{padding:8px}
+    .cm-m-t-4{margin-top:8px}
+    .cm-p-t-4{padding-top:8px}
+    .cm-m-b-4{margin-bottom:8px}
+    .cm-p-b-4{padding-bottom:8px}
+    .cm-m-l-4{margin-left:8px}
+    .cm-p-l-4{padding-left:8px}
+    .cm-m-r-4{margin-right:8px}
+    .cm-p-r-4{padding-right:8px}
+    .cm-m-a-5{margin:10px}
+    .cm-p-a-5{padding:10px}
+    .cm-m-t-5{margin-top:10px}
+    .cm-p-t-5{padding-top:10px}
+    .cm-m-b-5{margin-bottom:10px}
+    .cm-p-b-5{padding-bottom:10px}
+    .cm-m-l-5{margin-left:10px}
+    .cm-p-l-5{padding-left:10px}
+    .cm-m-r-5{margin-right:10px}
+    .cm-p-r-5{padding-right:10px}
+    .cm-m-a-6{margin:12px}
+    .cm-p-a-6{padding:12px}
+    .cm-m-t-6{margin-top:12px}
+    .cm-p-t-6{padding-top:12px}
+    .cm-m-b-6{margin-bottom:12px}
+    .cm-p-b-6{padding-bottom:12px}
+    .cm-m-l-6{margin-left:12px}
+    .cm-p-l-6{padding-left:12px}
+    .cm-m-r-6{margin-right:12px}
+    .cm-p-r-6{padding-right:12px}
+    .cm-m-a-7{margin:14px}
+    .cm-p-a-7{padding:14px}
+    .cm-m-t-7{margin-top:14px}
+    .cm-p-t-7{padding-top:14px}
+    .cm-m-b-7{margin-bottom:14px}
+    .cm-p-b-7{padding-bottom:14px}
+    .cm-m-l-7{margin-left:14px}
+    .cm-p-l-7{padding-left:14px}
+    .cm-m-r-7{margin-right:14px}
+    .cm-p-r-7{padding-right:14px}
+    .cm-m-a-8{margin:16px}
+    .cm-p-a-8{padding:16px}
+    .cm-m-t-8{margin-top:16px}
+    .cm-p-t-8{padding-top:16px}
+    .cm-m-b-8{margin-bottom:16px}
+    .cm-p-b-8{padding-bottom:16px}
+    .cm-m-l-8{margin-left:16px}
+    .cm-p-l-8{padding-left:16px}
+    .cm-m-r-8{margin-right:16px}
+    .cm-p-r-8{padding-right:16px}
+    .cm-m-a-9{margin:18px}
+    .cm-p-a-9{padding:18px}
+    .cm-m-t-9{margin-top:18px}
+    .cm-p-t-9{padding-top:18px}
+    .cm-m-b-9{margin-bottom:18px}
+    .cm-p-b-9{padding-bottom:18px}
+    .cm-m-l-9{margin-left:18px}
+    .cm-p-l-9{padding-left:18px}
+    .cm-m-r-9{margin-right:18px}
+    .cm-p-r-9{padding-right:18px}
+    .cm-m-a-10{margin:20px}
+    .cm-p-a-10{padding:20px}
+    .cm-m-t-10{margin-top:20px}
+    .cm-p-t-10{padding-top:20px}
+    .cm-m-b-10{margin-bottom:20px}
+    .cm-p-b-10{padding-bottom:20px}
+    .cm-m-l-10{margin-left:20px}
+    .cm-p-l-10{padding-left:20px}
+    .cm-m-r-10{margin-right:20px}
+    .cm-p-r-10{padding-right:20px}
+    .cm-m-a-11{margin:22px}
+    .cm-p-a-11{padding:22px}
+    .cm-m-t-11{margin-top:22px}
+    .cm-p-t-11{padding-top:22px}
+    .cm-m-b-11{margin-bottom:22px}
+    .cm-p-b-11{padding-bottom:22px}
+    .cm-m-l-11{margin-left:22px}
+    .cm-p-l-11{padding-left:22px}
+    .cm-m-r-11{margin-right:22px}
+    .cm-p-r-11{padding-right:22px}
+    .cm-m-a-12{margin:24px}
+    .cm-p-a-12{padding:24px}
+    .cm-m-t-12{margin-top:24px}
+    .cm-p-t-12{padding-top:24px}
+    .cm-m-b-12{margin-bottom:24px}
+    .cm-p-b-12{padding-bottom:24px}
+    .cm-m-l-12{margin-left:24px}
+    .cm-p-l-12{padding-left:24px}
+    .cm-m-r-12{margin-right:24px}
+    .cm-p-r-12{padding-right:24px}
+    .cm-m-a-13{margin:26px}
+    .cm-p-a-13{padding:26px}
+    .cm-m-t-13{margin-top:26px}
+    .cm-p-t-13{padding-top:26px}
+    .cm-m-b-13{margin-bottom:26px}
+    .cm-p-b-13{padding-bottom:26px}
+    .cm-m-l-13{margin-left:26px}
+    .cm-p-l-13{padding-left:26px}
+    .cm-m-r-13{margin-right:26px}
+    .cm-p-r-13{padding-right:26px}
+    .cm-m-a-14{margin:28px}
+    .cm-p-a-14{padding:28px}
+    .cm-m-t-14{margin-top:28px}
+    .cm-p-t-14{padding-top:28px}
+    .cm-m-b-14{margin-bottom:28px}
+    .cm-p-b-14{padding-bottom:28px}
+    .cm-m-l-14{margin-left:28px}
+    .cm-p-l-14{padding-left:28px}
+    .cm-m-r-14{margin-right:28px}
+    .cm-p-r-14{padding-right:28px}
+    .cm-m-a-15{margin:30px}
+    .cm-p-a-15{padding:30px}
+    .cm-m-t-15{margin-top:30px}
+    .cm-p-t-15{padding-top:30px}
+    .cm-m-b-15{margin-bottom:30px}
+    .cm-p-b-15{padding-bottom:30px}
+    .cm-m-l-15{margin-left:30px}
+    .cm-p-l-15{padding-left:30px}
+    .cm-m-r-15{margin-right:30px}
+    .cm-p-r-15{padding-right:30px}
+    .cm-m-a-16{margin:32px}
+    .cm-p-a-16{padding:32px}
+    .cm-m-t-16{margin-top:32px}
+    .cm-p-t-16{padding-top:32px}
+    .cm-m-b-16{margin-bottom:32px}
+    .cm-p-b-16{padding-bottom:32px}
+    .cm-m-l-16{margin-left:32px}
+    .cm-p-l-16{padding-left:32px}
+    .cm-m-r-16{margin-right:32px}
+    .cm-p-r-16{padding-right:32px}
+    .cm-m-a-17{margin:34px}
+    .cm-p-a-17{padding:34px}
+    .cm-m-t-17{margin-top:34px}
+    .cm-p-t-17{padding-top:34px}
+    .cm-m-b-17{margin-bottom:34px}
+    .cm-p-b-17{padding-bottom:34px}
+    .cm-m-l-17{margin-left:34px}
+    .cm-p-l-17{padding-left:34px}
+    .cm-m-r-17{margin-right:34px}
+    .cm-p-r-17{padding-right:34px}
+    .cm-m-a-18{margin:36px}
+    .cm-p-a-18{padding:36px}
+    .cm-m-t-18{margin-top:36px}
+    .cm-p-t-18{padding-top:36px}
+    .cm-m-b-18{margin-bottom:36px}
+    .cm-p-b-18{padding-bottom:36px}
+    .cm-m-l-18{margin-left:36px}
+    .cm-p-l-18{padding-left:36px}
+    .cm-m-r-18{margin-right:36px}
+    .cm-p-r-18{padding-right:36px}
+    .cm-m-a-19{margin:38px}
+    .cm-p-a-19{padding:38px}
+    .cm-m-t-19{margin-top:38px}
+    .cm-p-t-19{padding-top:38px}
+    .cm-m-b-19{margin-bottom:38px}
+    .cm-p-b-19{padding-bottom:38px}
+    .cm-m-l-19{margin-left:38px}
+    .cm-p-l-19{padding-left:38px}
+    .cm-m-r-19{margin-right:38px}
+    .cm-p-r-19{padding-right:38px}
+    .cm-m-a-20{margin:40px}
+    .cm-p-a-20{padding:40px}
+    .cm-m-t-20{margin-top:40px}
+    .cm-p-t-20{padding-top:40px}
+    .cm-m-b-20{margin-bottom:40px}
+    .cm-p-b-20{padding-bottom:40px}
+    .cm-m-l-20{margin-left:40px}
+    .cm-p-l-20{padding-left:40px}
+    .cm-m-r-20{margin-right:40px}
+    .cm-p-r-20{padding-right:40px}
+    .p-icon{display:inline-block;width:80px;height:24px;vertical-align:middle}
+    .p-icon::before{content:'';display:inline-block;width:80px;height:24px;background:url(/img/activity/icon.png) no-repeat;background-position-x:0px}
+    .p-icon.i1::before{background-position-y:-714px}
+    .p-icon.i2::before{background-position-y:-744px}
+    .p-icon.i3::before{background-position-y:-774px}
+    .p-icon.i4::before{background-position-y:-804px}
+    .p-icon.i5::before{background-position-y:-834px}
+    .cm-container{width:960px;padding-left:8px;padding-right:8px}
+    .cm-container .cm-row{margin-left:-8px;margin-right:-8px}
+    .cm-floor{padding:10px 0}
+    .cm-p-a{padding:8px}
+    .cm-m-a{padding:8px}
+    .cm-floor-title .cm-title{font-size:24px;color:#4a4f58;line-height:30px;font-weight:700;padding-top:4px;padding-bottom:4px}
+    .cm-floor-title .cm-subtitle{font-size:14px;color:#93979f;padding-top:4px;padding-bottom:4px}
+    .cm-article-item{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+    .cm-article-item .cm-article-title{font-size:18px;color:#4a4f58;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-article-item .cm-article-title.has-border{border-left:2px solid #fff}
+    .cm-article-item .cm-article-desc{font-size:14px;color:#93979f;line-height:2em;text-align:justify;word-break: break-all;}
+    .cm-article-item .cm-article-desc.h56{height:56px}
+    .cm-article-item .cm-article-cover.cover-168-168{width:168px;height:168px}
+    .cm-article-item:hover .cm-article-title{color:#ff5c00}
+    .cm-article-item:hover .cm-article-title.has-border{border-color:#ff5c00}
+    .cm-article-item.h200{height:200px}
+    .cm-article-item .cm-line{height:1px;background-color:#f0f0f0}
+    .cm-article-item .cm-line::before{content:'';display:block;height:2px;width:16px;background-color:#ff5c00}
+    .cm-product-item .cm-product-title{font-size:14px;color:#4a4f58;line-height:20px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-product-item .cm-prodcut-price .price-tag .tag{display:inline-block;height:20px;line-height:20px;border:1px solid #ffe6dc;border-radius:2px;font-size:12px;color:#FF5B00;cursor:pointer;background:#fff;padding:0 4px;position:relative;font-style:normal}
+    .cm-product-item .h20{height:20px}
+    .cm-product-item .h24{height:24px}
+    .cm-product-item .h44{height:44px}
+    .swiper-container{padding-bottom:30px}
+    .swiper-container.no-bottom{padding-bottom:0 !important}
+    .cm-cover-tag{width:72px;height:32px;font-size:16px;line-height:32px;border-radius:4px}
+    .cm-tabs .cm-tab{font-size:16px;width:60px;height:30px;line-height:30px;text-align:center}
+    .hover-class{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .hover-class:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 15px rgba(0,0,0,0.2)}
+    .has-player{position:absolute;top:0;left:0;width:100%;height:100%;}
+    .has-player::before{content:'';cursor: pointer;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px;height:40px;background:url(/img/activity/pc-palyer.png) no-repeat center center;background-size: 40px 40px; }
+    .cm-btn-box{text-align:center}
+    .cm-btn-box .cm-toggle-btn{width:98px;height:32px;border:1px solid #ccc;color:#909090;display:inline-block;text-align:center;line-height:32px;font-size:14px;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+    .cm-btn-box .cm-toggle-btn::after{content:'';display:inline-block;width:20px;height:16px;margin-right:2px;vertical-align:middle;background:url(/img/activity/icon.png) no-repeat;background-position-y:-2px}
+    .cm-btn-box .cm-toggle-btn.down::after{background-position-x:-90px}
+    .cm-btn-box .cm-toggle-btn.up::after{background-position-x:-119px}
+    .cm-btn-box .cm-toggle-btn:hover{color:#ff5c00;border-color:#ff5c00}
+    .cm-btn-box .cm-toggle-btn:hover.down::after{background-position-x:-150px}
+    .cm-btn-box .cm-toggle-btn:hover.up::after{background-position-x:-180px}
+    .cm-float-container{position:fixed;z-index:999;bottom:12%;right:15px}
+    .cm-float-container .cm-regexp{display: flex;justify-content: center;align-items: center;text-align: center; background: #fff;font-size: 14px;color: #666;line-height: 1.4}
+    .cm-float-container .cm-regexp:hover{ color: #fff; background:#ff5c00 }
+    .cm-float-container .cm-regexp,.cm-float-container .cm-slide{position:relative;width:64px;height:64px;margin:6px 0;border-radius:6px;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;cursor:pointer}
+    .cm-float-container .cm-slide .cm-toggle-btn{top:0;right:0;position:absolute;width:100%;height:100%}
+    .cm-float-container .cm-slide:hover .cm-tooltop{display:block}
+    .cm-float-container .cm-slide:hover .cm-toggle-btn{width:150%}
+    .cm-float-container .cm-slide:nth-child(1){height:70px;background:url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;background-size:64px}
+    .cm-float-container .cm-slide:nth-child(2){background:#fff url(/img/activity/pc_01.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(2):hover{background:#ff5c00 url(/img/activity/pc_a1.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3){background:#fff url(/img/activity/pc_02.png) no-repeat center}
+    .cm-float-container .cm-slide:nth-child(3):hover{background:#ff5c00 url(/img/activity/pc_a2.png) no-repeat center}
+    .cm-float-container .cm-tooltop{position:absolute;padding:15px;background:#ff5c00;top:0;right:80px;border-radius:6px;display: none}
+    .cm-float-container .cm-tooltop::after{position:absolute;content:'';width:15px;height:15px;-webkit-transform:rotateZ(45deg);-ms-transform:rotate(45deg);transform:rotateZ(45deg);background:#ff5c00;right:-7px;top:15px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content{font-size:14px;color:#fff}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1{width:190px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 i{display:block;border-top:1px solid #f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-1 .cm-item{padding:8px 0}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2{width:262px}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 .line{height:72px;margin:15px 15px 0;width:1px;background:#f1f1f1}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 img{display:block}
+    .cm-float-container .cm-tooltop .cm-tooltop-content.cm-tooltop-2 span{text-align:center;display:block;margin-top:8px}
+    .cm-footer{padding:25px 0 12px;background-color:#4a4f58;text-align:center;color:#fff;font-size:12px;overflow:hidden}
+    .cm-entry{z-index:9999;position:fixed;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+    .cm-entry .cm-icon-content{width: 400px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+    .cm-entry .cm-icon-content img{display: block; width: 100%;}
+    .cm-entry .cm-icon-content .cm-close{cursor:pointer;position:absolute;width:32px;height:32px;right:20px;top:-40px;background:url(/img/activity/pc_close.png) no-repeat center center}
+    .cm-entry .cm-icon-content .btn{display: block;width: 60px;height: 60px;background: #666;position: absolute;right: 40px;z-index: 999;cursor: pointer;opacity: 0;}
+    .cm-entry .cm-icon-content .btn1{top: 122px;}
+    .cm-entry .cm-icon-content .btn2{top: 250px;}
+    .banner-container{display: flex;justify-content: center; height:480px;background:pink;width: 100%;overflow: hidden;}
+    .banner-container .banner{ height: 480px;}
+    .banner-container .banner img{display: block;min-width: 1920px}
+    .cm-to-top{width:64px;height:64px;position:fixed;z-index:999;bottom:5%;right:15px;border-radius:6px;text-align:center;background:#fff;cursor:pointer;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar{display:block;margin:0 auto;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+    .cm-to-top .cm-icon-bar:nth-child(1){width:28px;height:4px;background:#999999;margin-top:20px}
+    .cm-to-top .cm-icon-bar:nth-child(2){width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:10px solid #999999}
+    .cm-to-top .cm-icon-bar:nth-child(3){width:10px;height:10px;background:#999999}
+    .cm-to-top:hover{background:#ff5c00}
+    .cm-to-top:hover .cm-icon-bar:nth-child(1),.cm-to-top:hover .cm-icon-bar:nth-child(3){background:#fff !important}
+    .cm-to-top:hover .cm-icon-bar:nth-child(2){border-bottom-color:#fff}
+}
+@media (min-width:1200px){
+    .cm-container{width:1140px}
+}
+.cm-tags{white-space:nowrap}
+.cm-tags .cm-tag{display:inline-block;padding:1px 4px;font-size:12px;border:1px solid #999;border-radius:2px}
+.cm-tags .cm-tag.color1{border-color:#aaa;background-color:#fff;color:#888}
+.cm-tags .cm-tag.color2{border-color:#f94b4b;background-color:#fff1eb;color:#f94b4b}
+.cm-tags .cm-tag.color3{border-color:rgba(225,86,22,0.24);background-color:#fff;color:#FF5B00}
+.cm-meibohui-tag{font-size:12px;display:inline-block;padding:2px 4px;text-align:center;color:#ffffff !important;background-image:-webkit-gradient(linear,right top,left top,from(#f9c023),to(#f83600));background-image:-o-linear-gradient(right,#f9c023 0%,#f83600 100%);background-image:linear-gradient(270deg,#f9c023 0%,#f83600 100%);border-radius:0px 10px 0px 0px}
+.cm-swiper .cm-swiper-button-prev,.cm-swiper .cm-swiper-button-next{visibility:hidden;width:44px;height:100px;background:rgba(102,102,102,0.74) no-repeat center;z-index:20;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;border-radius:6px;opacity:0;-webkit-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;background-size:30px !important}
+.cm-swiper .cm-swiper-button-prev{background-image:url(/img/activity/prev-icon.png);left:-60px}
+.cm-swiper .cm-swiper-button-next{background-image:url(/img/activity/next-icon.png);right:-60px}
+.cm-swiper:hover .cm-swiper-button-prev,.cm-swiper:hover .cm-swiper-button-next{opacity:1;visibility:visible}
+.swiper-container .swiper-pagination-bullet-active{width:28px !important;background:#ff5c00}
+.swiper-container .swiper-pagination-bullet{width:14px;height:4px;display:inline-block;border-radius:2px}
+.cm-scroll-container{overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
+.cm-scroll-container .cm-scroll-item{max-width:41vw;display:inline-block;margin-right:2vw}
+.cm-scroll-container .cm-scroll-item:last-child{margin-right:0}
+.cm-cover-tag{display:block;background:#000;text-align:center;color:#fff}
+.cm-cover-tag.color1{background:rgba(0,0,0,0.5)}
+.cm-cover-tag.color2{background:#1ece70}
+.cm-cover-tag.color3{background:#ff5c00}
+.cm-tabs{text-align:right}
+.cm-tabs .cm-tab-content{display:inline-block;overflow:hidden;border-radius:4px}
+.cm-tabs .cm-tab{position:relative;display:inline-block;color:#4a4f58;cursor:pointer;background:#fff}
+.cm-tabs .cm-tab.on{color:#fff;background-color:#ff5c00}
+.cm-loading{z-index:99999;width:100vw;height:100vh;position:fixed;top:0;background:#fff}
+.cm-prodcut-price .red { color: #f94b4b;}
+
+@media screen and (min-width: 768px) {
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: rgba(0,0,0,0.8);z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 944px;height: 642px; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 30px;top: 30px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+}
+
+@media screen and (max-width: 768px) {
+    .video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+    /*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+    .video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+    .video-popup .content video{width: 100%;height: 100%;display: block;}
+    .video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+}

src/main/resources/static/css/supplier-login/login.css

@@ -218,6 +218,7 @@ body{
     font-size: 1.2vw;
     font-weight: 400;
     color: #272727;
+    margin-left: 10px;
 }
 .header_link{
     align-items: center;

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

@@ -13,13 +13,33 @@ var homeData = new Vue({
         popupFlag:false,
         couponEntry:2,// 活动优惠券弹窗显示控制
         hotListPageFloor:[],// 新皮橱窗
-        homePageFloor:[]//楼层
+        homePageFloor:[],//楼层
+        quickoperaList: [1,2,4,53,3,5,677,2], // 快捷运营入口列表
     },
     filters: {
         NumFormat: function(value) {//处理金额
             return Number(value).toFixed(2);
         },
     },
+    computed: {
+        // 快捷运营列表
+        footList() {
+            let newArr = [],
+                a = []
+            this.quickoperaList.map((item, index) => {
+                if (index !== 0 && index % 4 === 0) {
+                    newArr.push(a)
+                    a = []
+                    a.push(item)
+                }
+                else a.push(item)
+                if (this.quickoperaList.length === (index + 1)) {
+                    newArr.push(a)
+                }
+            })
+            return newArr
+        },
+    },
     methods: {
         // 是否显示vip标签价格
         showVipPriceTag: function(pros){
@@ -351,7 +371,13 @@ var homeData = new Vue({
                     });
                 }
             });
-        }
+        },
+        getQuickOpreationList() {
+        },
+        // 快捷运营跳转
+        goQuickOpera($event) {
+            window.location.href = '/quickOperation/operation-324.html'
+        },
     },
     created: function() {
         if(GLOBAL_TOKEN){
@@ -375,6 +401,7 @@ var homeData = new Vue({
             this.swiperFloor();
             this.GetHomeInit();
         }
+        this.getQuickOpreationList() // 获取快捷运营列表
         // Dom加载后
         this.$nextTick(function(){
             // 图片懒加载

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

@@ -0,0 +1,259 @@
+let quickOpreationMain = new Vue({
+    el: '#app',
+    mixins: [swiperMixin, showMoreMixin, cmSysVitaMixins],
+    data: {
+        isMobile: window.innerWidth < 992,
+        showCouponEntry: false,
+        isActive: true,
+        isRequest: true,
+        isLoading: true,
+        showPhoneNum: false,
+        showWechat: false,
+        // showScrollTop: false,
+        activityEntryVisiable: false,
+        contactVisiable: false,
+        scrollTopSize: 0,
+        msg: 'hello world',
+        src: './img/test.jpg',
+        // 显示个数
+        countMap: {},
+        size: 10,
+        swiperList: {},
+        needReload: false,
+        floorList: [],
+        pageInfo: null,
+        params: {
+            //请求参数
+            pageId: '293',
+            userId: '',
+            source: 1
+        },
+        selectVideoTabMap: {},
+        //用户权限
+        globalUserData: '',
+        GLOBAL_USER_ID: 0,
+        GLOBAL_USER_IDENTITY: 0,//2-会员机构；3-供应商；4-普通机构
+        GLOBAL_SHOP_ID: 0,
+    },
+    filters: {
+        NumFormat: function NumFormat(value) {//处理金额
+            return Number(value).toFixed(2);
+        }
+        ,
+        tabTime: function tabTime(val) { // 处理时间
+            // 2021-08-16 00:00:00
+            const first = val.split(' ')[0];
+            const second = first.split('-');
+            return second[1] + '-' + second[2];
+        }
+    },
+    watch: {
+        isMobile: function isMobile() {
+            // if (this.needReload) window.location.reload()
+            this.isLoading = true;
+            window.location.reload();
+        }
+    },
+    computed: {
+        showScrollTop: function () {
+            return this.scrollTopSize > 600
+        }
+    },
+    created() {
+        this.cmSysParams.pageType = 13;
+        this.initUserInfo();
+        this.getQuickOpreationList();
+    },
+    mounted() {
+        // this.getQuickOpreationList() // 快捷运营信息
+        this.pageLoaded();
+        // this.showCouponEntry = true 优惠券弹窗入口2
+        // 关闭视频播放
+        this.$nextTick(function(){
+            $('#video-popup .close').on('click', function(){
+                $(this).parents('#video-popup').hide();
+            });
+        })
+    },
+    methods: {
+        // 获取快捷运营信息
+        getQuickOpreationList() {
+            const paramsArr = window.location.pathname.split(".")[0].split("-");
+            this.params.pageId = paramsArr.length >= 1 ? paramsArr[1] : '';
+            ProductApi.getActivityData(this.params, (res) => {
+                if (res.code === 0) {
+                    this.floorList = res.data.floorList;
+                    this.pageInfo = res.data.page;
+                    this.cmSysParams.pageLabel = this.pageInfo.contentLabel;
+                    this.isRequest = false;
+                    this.makeVideoFetchMap();
+                    this.contactVisiable = res.data.page.infoBarStatus === 1;
+                }
+            })
+        },
+        //    初始化用户信息
+        initUserInfo () {
+            const userInfo = localStorage.getItem('userInfo');
+            if (!userInfo) {
+                console.log('用户未登录...');
+                return false
+            }
+            this.globalUserData = JSON.parse(localStorage.getItem('userInfo'));
+            this.GLOBAL_USER_ID = this.globalUserData.userId * 1;
+            this.GLOBAL_USER_IDENTITY = this.globalUserData.userIdentity * 1;
+            this.GLOBAL_SHOP_ID = this.globalUserData.shopId * 1;
+            this.params.userId = this.globalUserData.userId;
+            if (this.GLOBAL_USER_ID === 5261 || this.GLOBAL_USER_ID === 10947 || this.GLOBAL_USER_ID === 11579) {
+                this.GLOBAL_USER_IDENTITY = 1;
+            }
+            console.log('已获取用户登录信息')
+        },
+        fetchTemplate: function fetchTemplate(list, type) {
+            return list.indexOf(parseInt(type)) !== -1;
+        },
+        //促销活动类型数据处理
+        PromotionsFormat: function (promo) {
+            if (promo !== null) {
+                if (promo.type === 1 && promo.mode === 1) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+            return false;
+        },
+        // 创建tab与轮播图的对应关系
+        makeVideoFetchMap: function makeVideoFetchMap() {
+            const videoList = [22, 23, 24, 25];
+            const videoMap = {};
+            this.floorList.forEach((item, index) => {
+                if (videoList.indexOf(parseInt(item["floorContent"]["templateType"])) !== -1) {
+                    videoMap[item["floorContent"]["templateType"] + '-' + index] = 0;
+                }
+            });
+            this.selectVideoTabMap = videoMap;
+        },
+        // tab点击事件
+        handleTabClick(type, index, val) {
+            const swiperId = 'swiper-template-' + index + '-' + type + '-' + val;
+            this.selectVideoTabMap[type + '-' + index] = val;
+            if (this.swiperList[swiperId]) this.swiperList[swiperId].destroy();
+            setTimeout(() => {
+                this.swiperList[swiperId] = utils.createSwiperId(swiperId, swiperConfig);
+                utils.responsive('.aspect', 'scalc');
+                console.log('轮播图切换');
+            });
+        },
+        // 当前选中的轮播图
+        currentVideoSwiper(type, index) {
+            return this.selectVideoTabMap[type + '-' + index];
+        },
+        getFloorImageListType(index) {
+            return index === 0 ? 'floorImageList' : 'floorImageList' + (index + 1);
+        },
+        // 获取直播状态
+        makeVideoStatus(floorData, index) {
+            const displayDate = new Date(floorData.floorContent['displayDate' + index].replace(/-/g, '/')).getTime();
+            const nowDate = new Date().getTime();
+            // 一天的时间戳
+            const oneDay = 60 * 60 * 24 * 1000;
+            // 直播开始时间：displayDate
+            // 直播结束时间：displayDate + oneDay
+            if (nowDate < displayDate) return 0; // 未开始
+            if (nowDate >= displayDate && nowDate <= displayDate + oneDay) return 1; // 已开始
+            if (nowDate - oneDay > displayDate) return 2; // 已结束
+        },
+        // 使用产品楼层的布局
+        getProductScalcMap(templateId) {
+            const current = this.isMobile ? 'mobile' : 'pc';
+            const scalcLayout = layoutMapping.productScalcMap['template-' + templateId];
+            return {
+                scalc: scalcLayout[current].scalc,
+                col: scalcLayout[current].col
+            };
+        },
+        // 使用文章楼层的布局
+        getArticleScalcMap(templateId) {
+            const current = this.isMobile ? 'mobile' : 'pc';
+            const scalcLayout = layoutMapping.articleScalcMap['template-' + templateId];
+            return {
+                scalc: scalcLayout[current],
+                swiper: scalcLayout['swiper']
+            };
+        },
+        // 使用图片楼层的布局
+        getImageScalcMap(templateId) {
+            const current = this.isMobile ? 'mobile' : 'pc';
+            const scalcLayout = layoutMapping.imageScalcMap['template-' + templateId];
+            return {
+                scalc: scalcLayout[current],
+                swiper: scalcLayout['swiper']
+            };
+        },
+        // 使用直播楼层的布局
+        getVideoScalcMap(templateId) {
+            const current = this.isMobile ? 'mobile' : 'pc';
+            const scalcLayout = layoutMapping.videoScalcMap['template-' + templateId];
+            return {
+                scalc: scalcLayout[current],
+                swiper: scalcLayout['swiper']
+            };
+        },
+        // 播放视频
+        onPlayVideo(link) {
+            $('#video-popup video').attr('src', link);
+            $('#video-popup').show();
+        },
+        // 处理link
+        reallink(link) {
+            if(!link) return 'javascript:void(0)';
+            return link;
+        },
+        handleToggleActive(flag) {
+            this.isActive = flag;
+        },
+        // 页面挂载完毕
+        pageLoaded() {
+            // 轮播图配置
+            const options = {
+                el: '.swiper-container',
+                split: '-',
+                config: swiperConfig,
+                protertyFix: 'swiper-template-'
+            };
+            let resizeTimer = null;
+            // 延迟处理
+            let timer;
+            timer = setInterval(() => {
+                if (!this.isRequest) {
+                    this.swiperList = utils.createSwiper(options);
+                    // console.log(that.swiperList);
+                    console.log('轮播图创建完毕...');
+                    this.initCountMap(countMapping);
+                    // console.log(that.countMap);
+                    console.log('商品列表处理完毕...');
+                    utils.responsive('.aspect', 'scalc');
+                    this.isLoading = false;
+                    clearInterval(timer);
+                    this.$nextTick(() => {
+                        $('img[data-original]').lazyload();
+                    });
+                    console.log('页面图片初始化完成...');
+                }
+            }, 500);
+            // 监听window窗口大小
+            window.addEventListener('resize', () => {
+                clearTimeout(resizeTimer);
+                resizeTimer = setTimeout(() => {
+                    utils.responsive('.aspect', 'scalc');
+                    console.log('图片大小已刷新...');
+                }, 200);
+                quickOpreationMain.$set(quickOpreationMain.$data, 'isMobile', window.innerWidth < 560);
+            });
+            window.addEventListener('scroll', (event) => {
+                this.scrollTopSize = $('body').scrollTop();
+            });
+            console.log('窗口resize事件注册完毕...');
+        },
+    }
+})

src/main/resources/static/js/supplier-login/login.js

@@ -199,6 +199,7 @@ new Vue({
         showContent: true,
         textContent: '',
         isPC: true,
+        isLoading: false,
         screenWidth: '', // 尺寸大小
         swiperSideWidth: '', // 轮播滑块尺寸
         successSideWidth: '', // 成功的轮播尺寸
@@ -325,14 +326,16 @@ new Vue({
         },
         getSupplierInfoLanding() {
             if(this.isPC) {
-                SupplierApi.supplierLoading({source: 1},({data}) => {
+                SupplierApi.supplierLoading({source: 1},({ data }) => {
+                    this.isLoading = true
                     this.bannerList = data.banner
                     this.successList = data.landing.filter(e => e.type == '1')
                     this.videoList = data.landing.filter(e => e.type == '2')
                     this.articelList = data.landing.filter(e => e.type == '3')
                 })
             } else {
-                SupplierApi.supplierLoading({source: 2},({data}) => {
+                SupplierApi.supplierLoading({source: 2},({ data }) => {
+                    this.isLoading = true
                     this.bannerList = data.banner
                     this.successList = data.landing.filter(e => e.type == '1')
                     this.videoList = data.landing.filter(e => e.type == '2')

src/main/resources/templates/index.html

@@ -12,6 +12,9 @@
     <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-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">
     <link th:href="@{/lib/css/swiper-bundle.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css" />
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -49,6 +52,47 @@
             <a href="/news.html" class="new-more"> 更多>> </a>
         </div>
     </div>
+    <!--  快捷运营  -->
+    <div class="quickOperation" v-if="footList" v-cloak>
+        <el-carousel v-if="isPC" :autoplay="false" indicator-position="outside">
+            <el-carousel-item v-for="(item, index) in footList" :key="item">
+                <div class="carousel-list">
+                    <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(item)">
+                        <div class="card">
+                            <div class="card-content">
+                                <div class="card-icon"></div>
+                                <div class="card-title">
+                                    <div class="title-1">
+                                        <div class="title-1-item">豪礼专区</div>
+                                        <div class="title-2-item">GO></div>
+                                    </div>
+                                    <div class="title-2">量大优惠 豪礼相送</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-carousel-item>
+        </el-carousel>
+        <van-swipe v-else class="my-swipe" :autoplay="false">
+            <van-swipe-item v-for="(item, index) in footList" :key="item">
+                <div class="carousel-list">
+                    <div class="list" v-for="(i, o) in item" :key="o" @click="goQuickOpera(item)">
+                        <div class="list-content">
+                            <div class="list-icon"></div>
+                            <div class="list-title">
+                                <div class="title-1">
+                                    <div class="title-1-item">豪礼专区</div>
+                                    <div class="title-2-item">GO></div>
+                                </div>
+                                <div class="title-2">量大优惠 豪礼相送</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </van-swipe-item>
+        </van-swipe>
+    </div>
     <!--首页楼层主体数据-->
     <div class="section_container">
         <div class="inner">
@@ -585,6 +629,8 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
+<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmsMixins.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/mixins/cmSysMixins.js(v=${version})}"></script>

src/main/resources/templates/quickOperation/index.html

@@ -0,0 +1,826 @@
+<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>快捷运营</title>
+  <meta charset="utf-8"/>
+  <meta name="referrer" content="never">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <template th:replace="components/head-link"></template>
+  <link href="/css/activity/normalize.css" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="/css/activity/swiper.min.css"/>
+  <link th:href="@{/css/quickOperation/index.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+  <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<input type="hidden" th:value="${agent}" id="userAgent">
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<div id="app">
+  <!-- 大图 -->
+  <div class="banner-container">
+    <a :href="pageInfo && pageInfo.headLink" class="banner">
+      <img :src="pageInfo && pageInfo.crmHeadImage" alt="" v-if="isMobile"/>
+      <img :src="pageInfo && pageInfo.headImage" alt="" v-else/>
+    </a>
+  </div>
+  <template v-for="(floorData,index) in floorList">
+    <div class="cm-floor">
+      <div class="cm-container">
+        <!-- 楼层标题 -->
+        <div
+                class="cm-row cm-floor-title cm-p-l-4 cm-m-b-4"
+                :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-p-r-4','cm-relative']:''"
+        >
+          <div :class="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)?['cm-col-md-40', 'cm-col-xs-36']:''">
+            <div class="cm-title cm-text-ellipsis-1">{{floorData.title}}</div>
+            <div class="cm-subtitle cm-text-ellipsis-1">{{floorData.detail}}</div>
+          </div>
+          <div
+                  class="cm-tabs cm-p-t-12 cm-absolute cm-bottom-right"
+                  v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)"
+          >
+            <div class="cm-tab-content cm-p-r-4">
+              <div
+                      class="cm-tab"
+                      :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 0}"
+                      @click="handleTabClick(floorData.floorContent.templateType,index,0)"
+              >
+                <span>{{floorData.floorContent.displayDate1 | tabTime}}</span>
+              </div>
+              <div
+                      class="cm-tab"
+                      :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 1}"
+                      @click="handleTabClick(floorData.floorContent.templateType,index, 1)"
+              >
+                <span>{{floorData.floorContent.displayDate2 | tabTime}}</span>
+              </div>
+              <div    v-if="floorData.floorContent.templateType !== '25'"
+                      class="cm-tab"
+                      :class="{on:currentVideoSwiper(floorData.floorContent.templateType,index) === 2}"
+                      @click="handleTabClick(floorData.floorContent.templateType,index, 2)"
+              >
+                <span>{{floorData.floorContent.displayDate3 | tabTime}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 商品楼层11-21 -->
+        <template v-if="fetchTemplate([11,12,13,14,15,16,17,18,19,20,21],floorData.floorContent.templateType)">
+          <!-- 轮播图 -->
+          <div class="cm-row cm-relative cm-swiper" v-if="floorData.floorContent.templateType == 21">
+            <div class="cm-p-a-4">
+              <div class="swiper-container" :id="'swiper-template-' + index" data-swiper-type="1-6-2-2">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide" v-for="(pros , index) in floorData.floorImageList">
+                    <a :target="pros.link ? '_blank' : ''" :href="reallink(pros.link)">
+                      <div class="cm-product-item hover-class bg-white">
+                        <div class="aspect">
+                          <img width="100%" height="100%" src="/img/activity/placeholder.png"
+                               :data-original="pros.image" alt=""/>
+                        </div>
+                        <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
+                          <div class="cm-tags cm-p-b-2">
+                            <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
+                          </div>
+                          <div class="cm-product-title cm-text-ellipsis-2 h44">
+                                                        <span class="cm-meibohui-tag"
+                                                              v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
+                            {{pros.name}}
+                          </div>
+                          <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
+                            <!--                                                        <span class="cm-tag color2" v-if="pros.product.couponsLogo">优惠券</span>-->
+                            <span class="cm-tag color3" v-if="pros.listType == 2">{{ pros.label }}</span>
+                            <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                            <span class="cm-tag color3" v-if="pros.product.actStatus==1">
+                                                              {{pros.product.promotions.name}}
+                                                              <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:￥{{pros.product.price | NumFormat}}</span>
+                                                            </span>
+                            </template>
+                          </div>
+                          <div class="cm-prodcut-price h24">
+                            <div class="pro-price" v-if="pros.listType == 1">
+                              <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                <template v-if="pros.product.productCategory==1">
+                                  <!-- 样式1 价格未公开-->
+                                  <template v-if="pros.product.priceFlag==1">
+                                    <div class="price-tag cm-left"></div>
+                                    <div class="price cm-left">￥价格未公开</div>
+                                  </template>
+                                  <template v-else>
+                                    <!-- 样式2-->
+                                    <template  v-if="(pros.product.priceFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                      <div class="price-tag cm-left"></div>
+                                      <div class="price cm-left"
+                                           :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                                <span class="red">
+                                                                                  ￥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
+                                                                                  : pros.product.price) | NumFormat }}
+                                                                                </span>
+                                      </div>
+                                    </template>
+                                    <!-- 样式3 -->
+                                    <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
+                                      <div class="price-tag cm-left"></div>
+                                      <div class="price cm-left">
+                                        <span>￥会员可见</span></div>
+                                    </template>
+                                    <!-- 样式4 -->
+                                    <template v-else>
+                                      <div class="price-tag cm-left"></div>
+                                      <div class="price cm-left">
+                                        <span>￥</span>
+                                        <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
+                                      </div>
+                                    </template>
+                                  </template>
+                                </template>
+                                <!-- 样式5 -->
+                                <template v-else>
+                                  <div class="price-tag cm-left"></div>
+                                  <div class="price"  v-if="pros.product.detailTalkFlag == '2'">￥价格详聊</div>
+                                  <div class="price cm-left" v-else>
+                                    <span class="red">￥{{ pros.product.price | NumFormat }}</span>
+                                  </div>
+                                </template>
+                              </template>
+                              <template v-else>
+                                <!-- 样式6 -->
+                                <template v-if="pros.product.productCategory == 1">
+                                  <div class="price-tag cm-left" v-if="params.userId>0"></div>
+                                  <div class="price cm-left ">
+                                    <span>￥</span>
+                                    <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
+                                  </div>
+                                </template>
+                                <!-- 样式7 -->
+                                <template v-else>
+                                  <div class="price-tag cm-left"></div>
+                                  <div class="price  cm-left"><span>￥登录可见</span></div>
+                                </template>
+                              </template>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+                <!-- Add Pagination -->
+                <div class="swiper-pagination"></div>
+                <!-- Add Navigation -->
+                <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                <div class="swiper-button-next swiper-button-white cm-none"></div>
+              </div>
+            </div>
+          </div>
+          <!-- 普通列表 -->
+          <div class="cm-row" v-else>
+            <div class="fold-box cm-clearfix"
+                 :data-floor-type="floorData.floorContent.templateType + '-' + index">
+              <!-- banner -->
+              <template v-for="(i,index) in 5">
+                <div
+                        class="cm-p-a-4"
+                        :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index],  'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
+                        v-if="floorData.floorContent['pcAdsImage' + (index + 1)] && floorData.floorContent.templateType != 20"
+                >
+                  <div class="aspect"
+                       :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
+                    <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
+                       :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
+                      <img
+                              width="100%"
+                              height="100%"
+                              :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
+                              alt="/banner.jpg"
+                              v-if="isMobile"
+                      />
+                      <img
+                              width="100%"
+                              height="100%"
+                              :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
+                              alt="/banner.jpg"
+                              v-else
+                      />
+                    </a>
+                  </div>
+                </div>
+              </template>
+              <!-- banner END -->
+              <div class="cm-col-md-10 cm-col-xs-30" v-for="(pros , index) in makeList(floorData,index)">
+                <div class="cm-p-a-4">
+                  <a :target="pros.link ? '_blank' : ''" :href="pros.link">
+                    <div class="cm-product-item hover-class bg-white">
+                      <div class="aspect">
+                        <img width="100%" height="100%" src="/img/activity/placeholder.png"
+                             :data-original="pros.image" alt=""/>
+                      </div>
+                      <div class="cm-p-l-8 cm-p-r-8 cm-p-t-8 cm-p-b-4">
+                        <div class="cm-tags cm-p-b-2">
+                          <span class="cm-tag color1" v-if="pros.listType == 2">{{ pros.label }}</span>
+                        </div>
+                        <div class="cm-product-title cm-text-ellipsis-2 h44">
+                                                    <span class="cm-meibohui-tag"
+                                                          v-if="pros.product!=null && pros.product.beautyActFlag==1">美博会</span>
+                          {{pros.name}}
+                        </div>
+                        <div class="cm-tags cm-p-t-2 cm-p-b-2 h20">
+                          <!--                                                     <span class="cm-tag color3" v-if="pros.product.couponsLogo">优惠券</span>-->
+                          <span class="cm-tag color2" v-if="pros.listType == 2">{{ pros.label }}</span>
+                          <template v-if="(pros.product.productCategory == 1 && params.userId>0) || GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                                                        <span class="cm-tag color3" v-if="pros.product.actStatus==1">
+                                                          {{pros.product.promotions.name}}
+                                                          <span class="red" v-if="pros.priceFlag != 1 && PromotionsFormat(pros.product.promotions)">:￥{{pros.product.price | NumFormat}}</span>
+                                                        </span>
+                          </template>
+                        </div>
+                        <div class="cm-prodcut-price h24">
+                          <div class="pro-price cm-clearfix" v-if="pros.listType == 1">
+                            <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                              <template v-if="pros.product.productCategory == 1">
+                                <!-- 样式1 价格未公开-->
+                                <template v-if="pros.product.priceFlag == 1">
+                                  <div class="price-tag cm-left"></div>
+                                  <div class="price cm-left">￥价格未公开</div>
+                                </template>
+                                <template v-else>
+                                  <!-- 样式2-->
+                                  <template v-if="(pros.product.priceFlag==0 && pros.product.userIdentity!=3) || pros.product.userIdentity==2 || (pros.product.userIdentity==3 && pros.product.shopID==GLOBAL_SHOP_ID)">
+                                    <div class="price-tag  cm-left"></div>
+                                    <div class="price  cm-left" :class="PromotionsFormat(pros.product.promotions) ? 'none' : ''">
+                                                                                <span class="red">
+                                                                                  ￥{{(PromotionsFormat(pros.product.promotions) ? pros.product.originalPrice
+                                                                                  : pros.product.price) | NumFormat }}
+                                                                                </span>
+                                    </div>
+                                  </template>
+                                  <!-- 样式3 -->
+                                  <template v-else-if="pros.product.priceFlag==2 && pros.product.userIdentity==4 && GLOBAL_VIP_FLAG!=1">
+                                    <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
+                                    <div class="price cm-left"><span>￥会员可见</span></div>
+                                  </template>
+                                  <!-- 样式4 -->
+                                  <template v-else>
+                                    <div class="price-tag cm-left" v-if="pros.product.actStatus==1"></div>
+                                    <div class="price cm-left"><span>￥</span>
+                                      <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
+                                    </div>
+                                  </template>
+                                </template>
+                              </template>
+                              <!-- 样式5 -->
+                              <template v-else>
+                                <div class="price-tag cm-left"></div>
+                                <div class="price"  v-if="pros.product.detailTalkFlag == '2'">￥价格详聊</div>
+                                <div class="price cm-left" v-else>
+                                  <span class="red">￥{{ pros.product.price | NumFormat }}</span>
+                                </div>
+                              </template>
+                            </template>
+                            <template v-else>
+                              <!-- 样式6 -->
+                              <template v-if="pros.product.productCategory == 1">
+                                <div class="price-tag cm-left" v-if="params.userId>0"></div>
+                                <div class="price cm-left ">
+                                  <span>￥</span>
+                                  <span class="p-icon" :class="'i'+pros.product.priceGrade"></span>
+                                </div>
+                              </template>
+                              <!-- 样式7 -->
+                              <template v-else>
+                                <div class="price-tag cm-left"></div>
+                                <div class="price  cm-left"><span>￥登录可见</span></div>
+                              </template>
+                            </template>
+                          </div>
+
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+              <template v-for="(i,index) in 5">
+                <div
+                        class="cm-p-a-4"
+                        :class="[ 'cm-col-md-'+ getProductScalcMap(floorData.floorContent.templateType).col[index],  'cm-col-xs-'+ getProductScalcMap(floorData.floorContent.templateType).col[index]]"
+                        v-if="floorData.floorContent.templateType == 20"
+                >
+                  <div class="aspect"
+                       :data-scalc="getProductScalcMap(floorData.floorContent.templateType).scalc[index]">
+                    <a :target="floorData.floorContent['adsLink' + (index + 1)] ? '_blank' : ''"
+                       :href="reallink(floorData.floorContent['adsLink' + (index + 1)])">
+                      <img
+                              width="100%"
+                              height="100%"
+                              :src="floorData.floorContent['appletsAdsImage' + (index + 1)]"
+                              alt="/banner.jpg"
+                              v-if="isMobile"
+                      />
+                      <img
+                              width="100%"
+                              height="100%"
+                              :src="floorData.floorContent['pcAdsImage' + (index + 1)]"
+                              alt="/banner.jpg"
+                              v-else
+                      />
+                    </a>
+                  </div>
+                </div>
+              </template>
+            </div>
+            <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
+              <div
+                      class="cm-toggle-btn"
+                      :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
+                      @click="toggleMore(floorData.floorContent.templateType, index)"
+              >
+                查看更多
+              </div>
+            </div>
+          </div>
+        </template>
+        <!-- 文章楼层3-6 -->
+        <!-- fetchTemplate([3,4,5,6],floorData.floorContent.templateType) -->
+        <template v-if="fetchTemplate([3,4,5,6],floorData.floorContent.templateType)">
+          <!-- 轮播式 pc -->
+          <div class="cm-row cm-relative cm-swiper" v-show="!isMobile">
+            <div class="cm-p-a-4">
+              <template v-if="fetchTemplate([4,5],floorData.floorContent.templateType)">
+                <div class="cm-swiper-button-prev cm-absolute cm-pc-only"
+                     @click="handlePrevClick(index)"></div>
+                <div class="cm-swiper-button-next cm-absolute cm-pc-only"
+                     @click="handleNextClick(index)"></div>
+              </template>
+              <div
+                      class="swiper-container"
+                      :class="{'no-bottom':fetchTemplate([4,5],floorData.floorContent.templateType)}"
+                      :id="'swiper-template-' + index"
+                      :data-swiper-type="getArticleScalcMap(floorData.floorContent.templateType).swiper"
+              >
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
+                       :key="item_index">
+                    <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
+                      <!-- 模板3 -->
+                      <div
+                              class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
+                              v-if="floorData.floorContent.templateType == 3"
+                      >
+                        <div class="cm-left cm-article-cover cover-168-168">
+                          <img width="100%" height="100%" :src="item.appletsImage"
+                               :alt="item.name" v-if="isMobile"/>
+                          <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                               v-else/>
+                        </div>
+                        <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
+                          <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
+                            {{item.name}}
+                          </div>
+                          <div class="cm-line"></div>
+                          <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
+                            {{item.content}}
+                          </div>
+                        </div>
+                      </div>
+                      <!-- 模板4 5 6 -->
+                      <div class="cm-article-item bg-white" v-else>
+                        <div class="cm-article-cover aspect"
+                             :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
+                          <img width="100%" height="100%" :src="item.appletsImage"
+                               :alt="item.name" v-if="isMobile"/>
+                          <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                               v-else/>
+                        </div>
+                        <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
+                          {{item.name}}
+                        </div>
+                        <div class="cm-m-a-8">
+                          <div class="cm-article-desc cm-text-ellipsis-2 h56">
+                            {{item.content}}
+                          </div>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+                <!-- Add Pagination -->
+                <div class="swiper-pagination"
+                     v-show="isMobile || !fetchTemplate([4,5],floorData.floorContent.templateType)"></div>
+                <!-- Add Navigation -->
+                <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                <div class="swiper-button-next swiper-button-white cm-none"></div>
+              </div>
+            </div>
+          </div>
+          <!-- 列表式 mobile 3 4 6 -->
+          <div class="cm-row"
+               v-show="isMobile && fetchTemplate([3,4,6],floorData.floorContent.templateType)">
+            <div class="fold-box cm-clearfix"
+                 :data-floor-type="floorData.floorContent.templateType + '-' + index">
+              <div
+                      class="cm-col-md-30"
+                      :class="floorData.floorContent.templateType == 6 ? 'cm-col-xs-30' : 'cm-col-xs-60'"
+                      v-for="(item, item_index) in makeList(floorData,index)"
+                      :key="item_index"
+              >
+                <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
+                  <div class="cm-p-a-4">
+                    <!-- 3 -->
+                    <div
+                            class="cm-article-item h200 bg-white cm-p-a-8 cm-flex-j-between"
+                            v-if="floorData.floorContent.templateType == 3"
+                    >
+                      <div class="cm-left cm-article-cover cover-168-168">
+                        <img width="100%" height="100%" :src="item.appletsImage"
+                             :alt="item.name" v-if="isMobile"/>
+                        <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                             v-else/>
+                      </div>
+                      <div class="cm-right cm-article-content cm-p-l-8 cm-flex-1">
+                        <div class="cm-article-title cm-m-b-10 cm-text-ellipsis-1">
+                          {{item.name}}
+                        </div>
+                        <div class="cm-line"></div>
+                        <div class="cm-article-desc cm-m-t-10 cm-text-ellipsis-4">
+                          {{item.content}}
+                        </div>
+                      </div>
+                    </div>
+                    <!-- 4 6  -->
+                    <div class="cm-article-item bg-white" v-else>
+                      <div class="cm-article-cover aspect"
+                           :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
+                        <img width="100%" height="100%" :src="item.appletsImage"
+                             :alt="item.name" v-if="isMobile"/>
+                        <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                             v-else/>
+                      </div>
+                      <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
+                        {{item.name}}
+                      </div>
+                      <div class="cm-m-a-8">
+                        <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+            <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
+            <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
+              <div
+                      class="cm-toggle-btn"
+                      :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
+                      @click="toggleMore(floorData.floorContent.templateType, index)"
+              >
+                查看更多
+              </div>
+            </div>
+          </div>
+          <!-- 左右滑动式 mobile 5-->
+          <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 5">
+            <div class="cm-p-a-4">
+              <div class="cm-scroll-container">
+                <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
+                     :key="item_index">
+                  <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
+                    <div class="cm-article-item bg-white">
+                      <div class="cm-article-cover aspect"
+                           :data-scalc="getArticleScalcMap(floorData.floorContent.templateType).scalc">
+                        <img width="100%" height="100%" :src="item.appletsImage"
+                             :alt="item.name" v-if="isMobile"/>
+                        <img width="100%" height="100%" :src="item.image" :alt="item.name"
+                             v-else/>
+                      </div>
+                      <div class="cm-article-title has-border cm-m-t-8 cm-m-r-8 cm-m-b-8 cm-p-l-6 cm-text-ellipsis-1">
+                        {{item.name}}
+                      </div>
+                      <div class="cm-m-a-8">
+                        <div class="cm-article-desc cm-text-ellipsis-2 h56">{{item.content}}
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <!-- 图片楼层1 2 7 8 9 10  -->
+        <!-- fetchTemplate([1,2,7,8,9,10],floorData.floorContent.templateType) -->
+        <template v-if="fetchTemplate([1,2,7,8,9,10,26,27,28,29,30,31,32,33],floorData.floorContent.templateType)">
+          <!-- 轮播式 mobile(1 2 9) pc(全部)-->
+          <div
+                  class="cm-row cm-relative cm-swiper"
+                  v-show="!isMobile || (fetchTemplate([1,2,9,26,28,29,30,32,33],floorData.floorContent.templateType) && isMobile)"
+          >
+            <div class="cm-p-a-4">
+              <template v-if="fetchTemplate([7,8,10],floorData.floorContent.templateType)">
+                <div class="cm-swiper-button-prev cm-absolute" @click="handlePrevClick(index)"></div>
+                <div class="cm-swiper-button-next cm-absolute" @click="handleNextClick(index)"></div>
+              </template>
+              <div
+                      class="swiper-container"
+                      :id="'swiper-template-' + index"
+                      :class="{'no-bottom':fetchTemplate([7,8,10],floorData.floorContent.templateType)}"
+                      :data-swiper-type="getImageScalcMap(floorData.floorContent.templateType).swiper"
+              >
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide" v-for="(item, item_index) in floorData.floorImageList"
+                       :key="item_index">
+                    <div
+                            class="bg-white hover-class aspect cm-relative"
+                            :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc"
+                    >
+                      <div v-if="fetchTemplate([30,31,32,33],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
+                        <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                             v-if="isMobile"/>
+                        <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                        <div class="has-player"
+                             v-if="floorData.floorContent.templateClassify == 4"></div>
+                      </div>
+                      <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
+                        <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                             v-if="isMobile"/>
+                        <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                        <div class="has-player"
+                             v-if="floorData.floorContent.templateClassify == 4"></div>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <!-- Add Pagination -->
+                <div class="swiper-pagination"
+                     v-show="isMobile || !fetchTemplate([7,8,10],floorData.floorContent.templateType)"></div>
+                <!-- Add Navigation -->
+                <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                <div class="swiper-button-next swiper-button-white cm-none"></div>
+              </div>
+            </div>
+          </div>
+          <!-- 列表式 mobile 8 10 -->
+          <div class="cm-row" v-show="fetchTemplate([8,10],floorData.floorContent.templateType) && isMobile">
+            <div class="fold-box cm-clearfix"
+                 :data-floor-type="floorData.floorContent.templateType + '-' + index">
+              <div class="cm-col-md-30 cm-col-xs-60">
+                <div class="cm-p-a-4" v-for="(item, item_index) in makeList(floorData,index)"
+                     :key="item_index">
+                  <div class="bg-white aspect"
+                       :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
+                    <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
+                      <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                           v-if="isMobile"/>
+                      <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 查看更多 v-if="showToggleBtn(floorData,index)"-->
+            <div class="cm-btn-box cm-p-t-12" v-if="showToggleBtn(floorData,index)">
+              <div
+                      class="cm-toggle-btn"
+                      :class="toggleState(floorData.floorContent.templateType, index) ? 'up':'down'"
+                      @click="toggleMore(floorData.floorContent.templateType, index)"
+              >
+                查看更多
+              </div>
+            </div>
+          </div>
+          <!-- 左右滑动式 mobile 7 27 31-->
+          <div class="cm-row" v-show="fetchTemplate([7,27,31],floorData.floorContent.templateType) && isMobile">
+            <div class="cm-p-a-4">
+              <div class="cm-scroll-container">
+                <div class="cm-scroll-item" v-for="(item, item_index) in floorData.floorImageList"
+                     :key="item_index">
+                  <div class="bg-white aspect cm-relative"
+                       :data-scalc="getImageScalcMap(floorData.floorContent.templateType).scalc">
+                    <div v-if="fetchTemplate([31],floorData.floorContent.templateType)" @click="onPlayVideo(item.link)">
+                      <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                           v-if="isMobile"/>
+                      <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                      <div class="has-player"
+                           v-if="floorData.floorContent.templateClassify == 4"></div>
+                    </div>
+                    <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)" v-else>
+                      <img width="100%" height="100%" :src="item.appletsImage || item.image" alt=""
+                           v-if="isMobile"/>
+                      <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                      <div class="has-player"
+                           v-if="floorData.floorContent.templateClassify == 4"></div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <!-- 直播楼层22 23 24 25 -->
+        <!-- v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)" -->
+        <template v-if="fetchTemplate([22,23,24,25],floorData.floorContent.templateType)">
+          <!-- 轮播式 && tab切换 22 24 25 -->
+          <!-- 选项卡 -->
+          <div class="cm-row"
+               v-show="!isMobile || (fetchTemplate([22,24,25],floorData.floorContent.templateType) && isMobile)">
+            <div class="cm-p-a-4">
+              <div class="cm-relative cm-swiper">
+                <template v-for="(i,i_index) in 3">
+                  <div v-show="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
+                    <div
+                            class="swiper-container"
+                            :id="'swiper-template-' + index + '-' + floorData.floorContent.templateType + '-' + i_index"
+                            :data-swiper-type="getVideoScalcMap(floorData.floorContent.templateType).swiper"
+                    >
+                      <div class="swiper-wrapper">
+                        <div
+                                class="swiper-slide"
+                                v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]"
+                                :key="item_index"
+                        >
+                          <div
+                                  class="bg-white aspect cm-relative"
+                                  :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
+                          >
+                            <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
+																<span
+                                                                        class="cm-cover-tag color1 cm-absolute cm-top-right"
+                                                                        v-if="makeVideoStatus(floorData,i_index + 1) === 2"
+                                                                >已结束</span
+                                                                >
+                              <span
+                                      class="cm-cover-tag color2 cm-absolute cm-top-right"
+                                      v-if="makeVideoStatus(floorData,i_index + 1) === 0"
+                              >未开始</span
+                              >
+                              <span
+                                      class="cm-cover-tag color3 cm-absolute cm-top-right"
+                                      v-if="makeVideoStatus(floorData,i_index + 1) === 1"
+                              >已开始</span
+                              >
+                              <img width="100%" height="100%" :src="item.appletsImage"
+                                   alt="" v-if="isMobile"/>
+                              <img width="100%" height="100%" :src="item.image" alt=""
+                                   v-else/>
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- Add Pagination -->
+                      <div class="swiper-pagination"></div>
+                      <!-- Add Navigation -->
+                      <div class="swiper-button-prev swiper-button-white cm-none"></div>
+                      <div class="swiper-button-next swiper-button-white cm-none"></div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </div>
+          <!-- 左右滑动式 mobile 23-->
+          <div class="cm-row" v-show="isMobile && floorData.floorContent.templateType == 23">
+            <div class="cm-p-a-4">
+              <template v-for="(i,i_index) in 3">
+                <div class="cm-scroll-container"
+                     v-if="currentVideoSwiper(floorData.floorContent.templateType,index) === i_index">
+                  <div class="cm-scroll-item"
+                       v-for="(item, item_index) in floorData[getFloorImageListType(i_index)]">
+                    <div
+                            class="bg-white aspect cm-relative cm-radius-4"
+                            :data-scalc="getVideoScalcMap(floorData.floorContent.templateType).scalc"
+                    >
+                      <a :target="item.link ? '_blank' : ''" :href="reallink(item.link)">
+                        <span class="cm-cover-tag color2 cm-absolute cm-top-right">已开始</span>
+                        <img width="100%" height="100%" :src="item.appletsImage" alt=""
+                             v-if="isMobile"/>
+                        <img width="100%" height="100%" :src="item.image" alt="" v-else/>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </template>
+<!--   侧边浮窗-->
+  <div class="cm-float-container" v-if="activityEntryVisiable || contactVisiable">
+<!--    <a class="cm-regexp" href="/help/1038.html" target="_blank">优惠券<br />规则</a>-->
+    <div>
+      <div class="cm-slide" v-show="activityEntryVisiable">
+        <div class="cm-toggle-btn" @click="handleToggleActive(true)"></div>
+      </div>
+      <template v-if="contactVisiable">
+        <div class="cm-slide">
+          <div class="cm-toggle-btn"></div>
+          <div class="cm-tooltop">
+            <div class="cm-tooltop-content cm-tooltop-1">
+              <div class="cm-item">展会咨询电话：15338897365</div>
+              <i></i>
+              <div class="cm-item">客服咨询电话：15338851365</div>
+            </div>
+          </div>
+        </div>
+        <div class="cm-slide">
+          <div class="cm-toggle-btn"></div>
+          <div class="cm-tooltop cm-mobile-tooltop">
+            <div class="cm-tooltop-content cm-tooltop-2 cm-clearfix">
+              <div class="cm-item cm-left">
+                <img width="108" height="108"
+                     src="https://static.caimei365.com/app/img/icon2/cm_wechat_02.png" alt=""/>
+                <span>展会咨询微信</span>
+              </div>
+              <div class="cm-left line"></div>
+              <div class="cm-item cm-left">
+                <img width="108" height="108"
+                     src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png" alt=""/>
+                <span>客服咨询微信</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+<!--   活动弹窗入口1-->
+<!--  <div class="cm-entry" v-show="activityEntryVisiable && isActive">-->
+<!--    <div id="cm-icon-content" class="cm-icon-content" onclick="_czc.push(['_trackEvent','云上美博会','红包弹窗点击','红包弹窗点击',1,'cm-icon-content'])">-->
+<!--      <span class="cm-close" @click="handleToggleActive(false)"></span>-->
+<!--      <div @click="handleToggleCoupon(false)" style="cursor: pointer">-->
+<!--        <a href="/info/detail-7657-1.html" target="_blank">-->
+<!--          <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
+<!--          <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
+<!--        </a>-->
+<!--        &lt;!&ndash;                <img src="/img/activity/pc_entry.png" alt="" v-if="!isMobile"/>&ndash;&gt;-->
+<!--        &lt;!&ndash;                <img src="/img/activity/h5_entry.png" alt="" v-else/>&ndash;&gt;-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
+
+<!--   活动弹窗入口2-->
+<!--  <div class="cm-entry" v-show="showCouponEntry">-->
+<!--    <div class="cm-icon-content" @click="handleToggleCoupon(false)" style="cursor: pointer">-->
+<!--      &lt;!&ndash;            <a href="/product-6898.html" id="conpun" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券弹窗点击','优惠券弹窗点击',1,'conpun'])"><span class="btn btn1"></span></a>&ndash;&gt;-->
+<!--      &lt;!&ndash;            <a href="/product/couponExp.html" id="conpunDetail" target="_blank" onclick="_czc.push(['_trackEvent','云上美博会','优惠券说明弹窗点击','优惠券说明弹窗点击',1,'conpunDetail'])"><span class="btn btn2"></span></a>&ndash;&gt;-->
+<!--      <span class="cm-close" @click.stop="handleToggleCoupon(false)"></span>-->
+<!--      &lt;!&ndash;            <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>&ndash;&gt;-->
+<!--      &lt;!&ndash;            <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>&ndash;&gt;-->
+<!--      <a href="/info/detail-7657-1.html" target="_blank">-->
+<!--        <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-h5.png" alt="" v-if="!isMobile"/>-->
+<!--        <img src="https://static.caimei365.com/app/img/icon2/coupon-entry-pc.png" alt="" v-else/>-->
+<!--      </a>-->
+<!--    </div>-->
+<!--  </div>-->
+
+  <!-- 视频播放弹窗 -->
+  <div class="video-popup" style="display: none;" id="video-popup">
+    <div class="mask"></div>
+    <span class="close"></span>
+    <div class="content">
+      <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
+    </div>
+  </div>
+
+  <!-- 返回顶部 -->
+  <div class="cm-to-top" id="cm-to-top" v-show="showScrollTop">
+    <span class="cm-icon-bar"></span>
+    <span class="cm-icon-bar"></span>
+    <span class="cm-icon-bar"></span>
+  </div>
+  <!-- loading动画 -->
+  <div class="cm-loading" v-if="isLoading"></div>
+</div>
+<!-- 底部区域 end -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/swiper.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/base.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/utils.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/layout.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/activity/beautyTopic/mixin.js(v=${version})}"></script>
+
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/quickOpreation/index.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
+
+<script>
+  var isFormal = window.location.href.indexOf('www.caimei365.com') !== -1;
+  if (isFormal) {
+    document.write(unescape("%3Cspan id='cnzz_stat_icon_1279558759'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1279558759%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
+    var _czc = _czc || [];
+    _czc.push(["_setAccount", "1279558759"]);
+  }
+  $('#cm-to-top').on("click", function () {
+    $("html,body").animate({scrollTop: 0}, 500);
+  });
+</script>
+</body>
+</html>

src/main/resources/templates/supplier_login/index.html

@@ -26,7 +26,7 @@
 <body>
 <input type="hidden" th:value="${coreServer}" id="coreServer">
 <input type="hidden" th:value="${agent}" id="userAgent">
-    <div id="login_content" ref="login_content">
+    <div id="login_content" ref="login_content" v-if="isLoading">
         <div class="login_header">
             <div class="login_header_container">
                 <div class="img_logo" @click="goToIndex">
@@ -56,7 +56,7 @@
                             <el-button slot="reference" type="text" style="font-size: 0.8vw;">{{userInfo.name}}</el-button>
                         </el-popover>
                     </div>
-                    <div v-if="!isPC && userInfo" class="H5_header">
+                    <div v-if="!isPC && userInfo" class="H5_header" v-cloak>
                         <div class="H5_username" @click="hideAction">
                             <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw" />
                         </div>
@@ -64,7 +64,7 @@
                         <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 4.2vw;height: 4.2vw" />
                         <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 4.2vw;height: 4.2vw" />
                     </div>
-                    <div class="login_regist" v-if="!userInfo">
+                    <div class="login_regist" v-if="!userInfo" v-cloak>
                         <div class="login_btn"><a rel="nofollow" href="/supplier/register.html">注册</a></div>
                         <div class="login_btn" style="background: #FF5B00;"><a class="login_a" style="color:white" href="/supplierlogin.html" rel="nofollow">登录</a></div>
                     </div>