修改认证通首页

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

@@ -9,7 +9,7 @@
 .pcOnly,.jqSelect .pc,.baseHeadCenter .headCart,.baseHeadCenter .hotKey,.baseTopNav_nav{display:none!important;}
 .baseHeadTop .wrap ul>li,.baseHeadTop .header_top_left{display:none;}
 .mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/supplier-login/H5.png) no-repeat;background-size:100vw auto;}
-.H5-icon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/H5-icon.png) no-repeat;background-size:100vw auto;}
+.H5-icon:before{content:'';display:inline-block;font-size:0;background:url(/img/supplier-login/H5.png) no-repeat;background-size:100vw auto;}
 .icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:5.5vw;line-height:5.5vw}
 .icon.shop:before{width:7.5vw;height:6vw;background-position:-91vw -.5vw}
 .icon.heart:before{width:5.5vw;height:5.5vw;background-position:0 -17vw}
@@ -56,16 +56,37 @@
 .baseHeadCenter .mUserIcon,
 .baseHeadCenter .mAddCart,
 .baseHeadCenter .mNotice,
+.baseHeadCenter .supplier_H5,
 .classifyBox .clsHead .close{padding:3.5vw 1.4vw;width:6.4vw;height:6.4vw}
-.baseHeadCenter .mClassBtn:before,.classifyBox .mClassBtn:before,.baseHeadCenter .mUserIcon:before,.baseHeadCenter .mAddCart:before{content:'';display:block;width:6.4vw;height:6.4vw}
+.baseHeadCenter .mClassBtn:before,.baseHeadCenter .supplier_H5:before,.classifyBox .mClassBtn:before,.baseHeadCenter .mUserIcon:before,.baseHeadCenter .mAddCart:before{content:'';display:block;width:6.4vw;height:6.4vw}
 .baseHeadCenter .mClassBtn:before,.classifyBox .mClassBtn:before{background-position:0 0}
 .baseHeadCenter .mUserIcon:before{background-position:-8.6vw 0}
 .baseHeadCenter .mAddCart:before{background-position:-17vw 0}
+.baseHeadCenter .superVip:before{background-position:-32vw -93vw}
 .baseHeadCenter .mNotice:before{content:'';display:block;width:6.4vw;height:6.4vw;background-position:0 0}
 .baseHeadCenter .searchBox{position:absolute;top:13.4vw;left:0;width:100%;padding-top:1.8vw}
-.baseHeadCenter .search{width:93.4vw;height:9.6vw;margin:0 auto;border:1px solid #FFE6DC;border-radius:2px;position:relative}
-.baseHeadCenter .search .jqSelect{width:27vw;height:9.6vw;position:relative;font-size: 0;}
-.baseHeadCenter .search .jqSelect select{width:27vw;height:9.6vw;line-height:9.6vw;border:none;font-size:3.7vw;color:#4A4F58;padding:0 6vw 0 3vw}
+.baseHeadCenter .searchBox .supplierH5 {
+    float: right;
+    height: 9.6vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 1vw;
+}
+.baseHeadCenter .supplier_H5:before {
+    background-position: -49vw -93vw;
+}
+.baseHeadCenter .search {
+    width: 86.4vw;
+    height: 9.6vw;
+    border: 1px solid #FFE6DC;
+    border-radius: 2px;
+    position: relative;
+    float: left;
+    margin-left: 2vw;
+}
+.baseHeadCenter .search .jqSelect{width:20vw;height:9.6vw;position:relative;font-size: 0;}
+.baseHeadCenter .search .jqSelect select{width:20vw;height:9.6vw;line-height:9.6vw;border:none;font-size:3.7vw;color:#4A4F58;padding:0 6vw 0 3vw}
 .baseHeadCenter .search .jqSelect:before{right:4vw;line-height:9.6vw}
 .baseHeadCenter .search .jqSelect:after{content:'';position:absolute;right:0;top:3.4vw;width:.5vw;height:2.8vw;background:#BEC2C9}
 .baseHeadCenter .search .keyword{position:absolute;right:0;top:0;border:none;outline:none;width:66.4vw;height:8.6vw;line-height:8.6vw;font-size:3.7vw;color:#4A4F58;text-indent:2.6vw}

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

@@ -1,56 +1,80 @@
 [v-cloak] {
     opacity: 0;
 }
+
 html {
     scroll-behavior: smooth;
     scroll-padding-top: 13.6vw;
 }
+
 #scrollTop,
 .login_header_container .img_logo .text,
 .login_header_container .header_link,
 .login_header_container .iphone,
 .slide_icon .tooltip,
-#fivePage .caimei_report .report_line
-{
+#fivePage .caimei_report .report_line {
     display: none !important;
 }
+
 .v-modal {
     top: 13.6vw !important;
 }
+
 .el-drawer__header {
     display: none !important;
 }
+
 .el-drawer__wrapper {
     top: 13.6vw !important;
 }
+
 .el-drawer {
     width: 40% !important;
     padding: 3.2vw 9vw !important;
-    box-sizing: border-box !important;
+    -webkit-box-sizing: border-box !important;
+            box-sizing: border-box !important;
 }
+
 .drawer_box {
     height: 14vw;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     border-bottom: 1px solid #EAEAEA;
     font-size: 3.6vw;
     color: #333333;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .page {
     padding-top: 1px;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
-.H5_username{
+
+.H5_username {
     width: 9vw;
     height: 9vw;
     background: #FFF1E9;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     border-radius: 50%;
 }
+
 .login_header {
     width: 100%;
     height: 13.6vw;
@@ -60,45 +84,67 @@ html {
     top: 0;
     z-index: 114;
 }
+
 .login_header_container {
     width: 100%;
     height: 100%;
     background: #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     padding: 3.1vw 4vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
-.login_header_container .img_logo{
+
+.login_header_container .img_logo {
     width: 20.2vw;
     height: 7.4vw;
     background: url(/img/supplier-login/H5/logo_.png) no-repeat;
     background-size: 100% 100% !important;
 }
+
 .login_header_container .login_regist {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     width: 30vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .login_header_container .login_regist .login_btn {
     width: 14.8vw;
     height: 6.4vw;
     font-size: 3.2vw;
     line-height: 6.4vw;
     text-align: center;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .login_header_container .login_regist .login_btn:nth-child(1) {
     color: #808080;
     border: 1px solid;
     margin-right: 3vw;
 }
+
 .login_header_container .H5_header {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     height: 100%;
-    align-items: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
 }
+
 #login_content .slide_icon {
     width: 16vw;
     height: 49vw;
@@ -108,145 +154,234 @@ html {
     right: 1.7vw;
     bottom: 20vw;
     z-index: 111;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
 }
+
 .slide_icon .slide_icon_item {
     height: 33.3%;
-    box-sizing: border-box;
-    font-size:2.8vw;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    font-size: 2.8vw;
     color: white;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 3fr 1fr;
     width: 100%;
-    align-items: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     justify-items: center;
 }
-.slide_icon .slide_icon_item:nth-child(2) {
+
+.slide_icon .slide_icon_item div {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    height: 24px;
 }
+
 .slide_icon .slide_icon_item img {
     width: 5.4vw;
     height: 5.4vw;
 }
+
 .van-swipe__indicator--active {
     background: #FF5B00 !important;
 }
+
 .el-message-box {
     width: 310px !important;
 }
+
 #H5dialogVisible .showIphone {
     width: 60vw;
     height: 28vw;
     background: #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
     border-radius: 6px;
     padding: 6.667vw 0;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 #H5showPopup {
     width: 60vw;
     height: 36vw;
     background: #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
     border-radius: 6px;
     padding: 9vw 6vw 6vw 6vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     font-size: 3.2vw;
     color: #666666;
 }
+
 #H5showPopup .btn_popup {
     width: 22vw !important;
     height: 8.8vw !important;
     font-size: 3.7vw !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-}
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
 #H5dialogVisible .showIphone .showIphone_time {
     color: #666666;
     font-size: 2.8vw;
 }
+
 #H5dialogVisible .showIphone .showIphone_phone {
     color: #FF5B00;
     font-size: 4vw;
     font-weight: bold;
     border-bottom: 1px solid #FF5B00;
 }
+
 #zeroPage {
     background: #fff;
     margin-top: 13.6vw;
 }
+
 #zeroPage .H5-banner_1 {
     width: 100%;
     height: 100%;
     background: url(/img/supplier-login/H5/banner1_.png) no-repeat;
     background-size: 100% 100% !important;
 }
+
 #zeroPage .H5-banner_2 {
     width: 100%;
     height: 100%;
     background: url(/img/supplier-login/H5/banner2_.png) no-repeat;
     background-size: 100% 100% !important;
 }
+
 .Title {
     width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
     margin: 9.3vw 0 8.3vw 0;
     text-align: center;
 }
+
 .Title .text {
     font-size: 5.3vw;
     color: #333333;
     margin-bottom: 3.2vw;
 }
+
 .Title .title {
     font-size: 2.8vw;
     color: #707070;
 }
+
+.van-action-sheet__item {
+    font-size: 3.4vw !important;
+}
+
 #zeroPage .server {
     width: 100%;
     height: 76vw;
 }
+
 .server .van-swipe {
-    height: 65vw;
+    height: 70vw;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    align-items: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
 }
+
 .server .van-swipe__indicators {
     display: none;
 }
-.server .van-swipe__track{
+
+.server .van-swipe__track {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    height: 58vw;
+    height: 60vw;
 }
+
 .server .van-swipe-item {
     width: 55vw !important;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     margin-right: 2.4vw;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     padding-top: 10vw;
     background: #FFFFFF;
-    box-shadow: 0px 6px 18px 0px rgba(102,102,102,0.3);
+    -webkit-box-shadow: 0px 6px 18px 0px rgba(102, 102, 102, 0.3);
+            box-shadow: 0px 6px 18px 0px rgba(102, 102, 102, 0.3);
     overflow: hidden;
 }
+
 .van-swipe-item .title {
     font-size: 3.6vw;
     color: #333333;
     margin: 3.5vw 0;
 }
+
 .van-swipe-item .text {
     font-size: 2.4vw;
     color: #707070;
@@ -254,65 +389,116 @@ html {
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+
 .van-swipe-item .server_img {
     width: 21.6vw;
     height: 20vw;
 }
+
+#firstPage {
+    background: url(/img/supplier-login/H5/solution/bg.png) center no-repeat;
+    background-size: cover;
+}
+
 #firstPage .selection_item {
     width: 100%;
     height: 61.067vw;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     margin-bottom: 6vw;
 }
+
 .selection_item .selection_item_contain {
     width: 85.6vw;
     height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    border: 1px solid;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .selection_item_contain .contain_bg_01,
 .selection_item_contain .contain_bg_02,
-.selection_item_contain .contain_bg_03{
+.selection_item_contain .contain_bg_03 {
     width: 16vw;
     height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    writing-mode: vertical-rl;
-    align-items: center;
-    justify-content: center;
+    -webkit-writing-mode: vertical-rl;
+        -ms-writing-mode: tb-rl;
+            writing-mode: vertical-rl;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     font-size: 5.6vw;
     color: white;
-    box-sizing: border-box;
-    border: 1px solid;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+.selection_item_contain .contain_bg_01 {
+    background: url(/img/supplier-login/H5/solution/01.png) center no-repeat;
+    background-size: cover;
+}
+
+.selection_item_contain .contain_bg_02 {
+    background: url(/img/supplier-login/H5/solution/02.png);
+    background-size: cover;
+}
+
+.selection_item_contain .contain_bg_03 {
+    background: url(/img/supplier-login/H5/solution/03.png);
+    background-size: cover;
 }
+
 .selection_item_contain .title {
     margin: 0 !important;
 }
+
 .selection_item_contain .bg1_text {
     width: 69.6vw;
     height: 100%;
     padding: 6vw 7.2vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     position: relative;
     background: #fff;
 }
+
 .selection_item_contain .bg1_text .bg1_contain {
     height: 3.8vw;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    align-items: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     font-size: 3.2vw;
     color: #666666;
     margin-bottom: 3vw;
 }
+
 .selection_item_contain .bg1_text .square_icon {
     width: 1.33vw;
     height: 1.33vw;
     border: 1px solid #B2B2B2;
-    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
     margin-right: 1.5vw;
 }
+
 .selection_item_contain .bg1_text .select_btn {
     position: absolute;
     right: 4vw;
@@ -326,37 +512,46 @@ html {
     line-height: 8vw;
     border-radius: 3px;
 }
+
 #secondPage {
     background: #fff;
     padding: 1vw 0 15.33vw 0;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 #secondPage .operationa {
     width: 100%;
     padding: 0 8vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .operationa .H5_opera {
     width: 84vw;
     height: 66vw;
     position: relative;
 }
+
 .H5_opera .online_store,
-.H5_opera .author{
+.H5_opera .author {
     width: 84vw;
     height: 66vw;
     position: absolute;
 }
+
 .H5_opera .online_store {
     background: url(/img/supplier-login/H5/sotre_online.png) center no-repeat;
     background-size: contain;
 }
+
 .H5_opera .author {
     background: url(/img/supplier-login/H5/author_online.png) center no-repeat;
     background-size: contain;
 }
+
 .H5_opera .opera_online,
-.H5_opera .opera_author{
+.H5_opera .opera_author {
     z-index: 111;
     position: absolute;
     left: 0;
@@ -365,104 +560,148 @@ html {
     height: 8vw;
     background: #FAFAFA;
 }
+
 .H5_opera .opera_online {
     left: 9vw;
     top: 20vw;
 }
+
 #thirdPage .H5_pageInner {
     padding-bottom: 6.133vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
 }
+
 .H5_pageInner .H5_contant {
     width: 85.6vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 }
+
 .H5_contant .H5_contant_item {
     height: 44.933vw;
     border: 1px solid #F0F0F0;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     background: #fff;
-    padding: 5.333vw 4.667vw ;
+    padding: 5.333vw 4.667vw;
     position: relative;
 }
+
 .H5_contant .H5_contant_item .title {
     color: #202020;
     font-size: 4vw;
 }
+
 .H5_contant .H5_contant_item .content {
     font-size: 2.8vw;
     color: #666666;
     margin-top: 2.267vw;
 }
+
 .H5_contant .H5_contant_item img {
     position: absolute;
     bottom: 4vw;
     right: 10vw;
     width: 14.4vw;
-    height: 12.667vw;
+    height: 13.667vw;
 }
+
 .H5_contant .getMore {
     grid-column: span 2;
     height: 15.733vw;
     background: #fff;
     border: 1px solid #F0F0F0;
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     font-size: 2.8vw;
     color: #999999;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
 }
+
 #fourPage {
     padding: 1px 0 5.667vw 0;
 }
+
 #fourPage .H5_success .van-swipe {
     height: 150.467vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 #fivePage {
     background: url(/img/supplier-login/H5/five_bg.png) no-repeat;
     padding-top: 1px;
     background-size: cover;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .H5_success .van-swipe__track {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     margin-top: 3vw;
 }
+
 .H5_success .van-swipe .van-swipe-item .innerSuccess {
     width: 70vw;
     height: 140.467vw;
     margin-right: 2.4vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     padding: 6.667vw 6vw 6vw 6vw;
     background: #FFFFFF;
-    box-shadow: 0px 6px 24px 0px rgba(102,102,102,0.3);
+    -webkit-box-shadow: 0px 6px 24px 0px rgba(102, 102, 102, 0.3);
+            box-shadow: 0px 6px 24px 0px rgba(102, 102, 102, 0.3);
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     margin-left: 7.2vw;
     position: relative;
 }
-.H5_success .van-swipe .van-swipe__indicators{
+
+.H5_success .van-swipe .van-swipe__indicators {
     bottom: 0;
 }
+
 .H5_success .van-swipe .van-swipe-item .title {
     font-size: 4vw;
     color: #333333;
     text-align: center;
     margin: 0 0 4.667vw 0;
 }
+
 .H5_success .van-swipe-item .content {
     color: #666666;
     font-size: 2.8vw;
     line-height: 5.6vw;
 }
+
 .H5_success .van-swipe .van-swipe-item .innerSuccess .success_img {
     position: absolute;
     left: 6vw;
@@ -470,100 +709,165 @@ html {
     width: 58vw;
     height: 34vw;
 }
+
 #fivePage .inner_contain {
     width: 100%;
     padding: 0 7.2vw 7.2vw 7.2vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 #fivePage .inner_contain .caimei_introduction {
     padding: 5.067vw 3.2vw;
-    box-sizing: border-box;
-    background: rgba(255,255,255,0.5);
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    background: rgba(255, 255, 255, 0.5);
     font-size: 3.2vw;
     line-height: 6.4vw;
     color: #fff;
     margin-bottom: 4.8vw;
 }
+
 #fivePage .Title .title {
     color: #fff;
 }
+
 #fivePage .caimei_report {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
 }
+
 .caimei_report .report_item {
     padding: 2.533vw 5vw;
     height: 25vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    align-items: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     text-align: center;
-    flex-direction: column;
-    justify-content: center;
-}
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+}
+
 .caimei_report .report_item .report_logo {
     color: #fff;
     font-size: 4vw;
     font-weight: bold;
 }
+
 .caimei_report .report_item .report_title {
     color: #fff;
     font-size: 2.8vw;
 }
+
 .caimei_report .report_item .report_item_img {
     position: absolute;
     left: 5vw;
     top: 2.533vw;
     height: 20vw;
     width: 31.067vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 #sixPage {
     padding: 1px 0 0 0;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 #sixPage .community {
     padding-left: 7.2vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .community .community_title {
     font-size: 4vw;
     color: #333333;
     margin-bottom: 3.2vw;
 }
+
 .community .cm_taking {
     height: 48.6vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     width: 100%;
 }
+
 .cm_taking .my-swipe {
     height: 100%;
     width: 100%;
 }
+
 .cm_taking .my-swipe .van-swipe-item {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
-    align-items: start;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: start;
     padding-right: 3.2vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .my-swipe .van-swipe-item .video_item {
     height: 37.6vw;
     width: 100%;
     border: 1px solid #EAEAEA;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    position: relative;
 }
+
+.my-swipe .van-swipe-item .video_item .player_bg {
+    position: absolute;
+    width: 100%;
+    height: 21.733vw;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    left: 0;
+    top: 0;
+    background: rgba(24, 23, 23, 0.4);
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    z-index: 11;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
 .my-swipe .van-swipe-item .video_item .video_img {
     height: 21.733vw;
     width: 100%;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .my-swipe .van-swipe-item .video_item .video_title {
     height: calc(100% - 21.733vw);
     width: 100%;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     padding: 3.733vw;
     color: #333333;
     font-size: 3.2vw;
@@ -573,16 +877,20 @@ html {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
+
 .my-swipe .van-swipe-item .video_item .article_contant {
     height: calc(100% - 21.733vw);
     width: 100%;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
     padding: 2.4vw 0;
 }
+
 .my-swipe .van-swipe-item .video_item .article_contant .article_tit {
     color: #333333;
     font-size: 3.2vw;
 }
+
 .my-swipe .van-swipe-item .video_item .article_contant .article_text {
     color: #666666;
     font-size: 2.2vw;
@@ -592,31 +900,55 @@ html {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
+
 .my-swipe .article_tit,
 .my-swipe .article_text {
     padding: 0 2.4vw;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .my-swipe .article_tit {
     padding: 1px 2.4vw;
     border-left: 2px solid #FF5B00;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
 }
+
 .cm_video_player {
     width: 100vw;
     height: 100vh;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     position: fixed;
     left: 0;
     top: 0;
     background: rgba(0, 0, 0, 0.5);
+    z-index: 113;
 }
+
+.cm_video_player {
+    display: none;
+}
+
 video {
-    width: 90%;
+    width: 80%;
     height: 60vw;
 }
+
+.text_info_contain {
+    padding: 9.3vw 7.2vw;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    margin-top: 13.6vw;
+}

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

@@ -1,5 +1,5 @@
 html {
-    scroll-behavior: smooth;
+    /*scroll-behavior: smooth;*/
     scroll-padding-top: 7vh;
 }
 body{
@@ -340,6 +340,14 @@ body{
     scroll-snap-align: start;
     box-sizing: border-box;
     overflow: hidden;
+    position: relative;
+}
+.page #positionTab {
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    top: 50%;
+    transform: translateY(-50%);
 }
 #fullpage #zeroPage {
     height: auto;
@@ -1375,6 +1383,11 @@ body{
     margin-top: 2vw;
     flex-direction: column;
 }
+.contant_init {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .community .community_video{
     width: 100%;
     height: 45%;

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

@@ -170,6 +170,7 @@ var globalHead = new Vue({
                     }else{
                         _self.noticeNum = data.count
                     }
+                    localStorage.setItem('noticeNum', _self.noticeNum)
                 }else{
                    console.log('获取供应商通知消息数量异常')
                 }

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

@@ -204,11 +204,85 @@ new Vue({
         userInfo: JSON.parse(localStorage.getItem('userInfo')) || '',
         showContent: true,
         textContent: '',
+        isPC: true,
+        screenWidth: '', // 尺寸大小
+        swiperSideWidth: '', // 轮播滑块尺寸
+        successSideWidth: '', // 成功的轮播尺寸
+        communitySideWidth: '', // 增长社区视频和文章尺寸
+        H5ScenarioList: [
+            {
+                id: 1,
+                title: '信息平台',
+                contant: '集创作、发布、客户资源收集于一体的美业内容输出平台；',
+            },{
+                id: 2,
+
+                title: '媒体矩阵',
+                contant: '丰富媒体资源，助力品牌快速传播；',
+            },{
+                id: 3,
+                title: '正版图库',
+                contant: '永久商业授权的专业医美正版图库；',
+            },{
+                id: 4,
+                title: 'SEO关键词',
+                contant: '立足企业全局，进行关键词策划布局；',
+            },{
+                id: 5,
+                title: 'CRM系统',
+                contant: '客户全生命周期数字化管理系统；',
+            },{
+                id: 6,
+                title: '认证通',
+                contant: '一款专业的正品认证SaaS软件系统；',
+            },{
+                id: 7,
+                title: '美业社群',
+                contant: '更紧密的联动用户，提高客户转化率；',
+            },{
+                id: 8,
+                title: '私域直播',
+                contant: 'B2B企业直播平台，一键开启直播引流；',
+            },{
+                id: 9,
+                title: '分销体系',
+                contant: '快速解决多方分账难题；',
+            },{
+                id: 10,
+                title: '会议营销',
+                contant: '以客户体验为导向，促进现场商机转化成交；',
+            },{
+                id: 11,
+                title: '金融分期',
+                contant: '缓解客户现金流压力，促进大额交易；',
+            },{
+                id: 12,
+                title: '交易商城',
+                contant: '一站式管理客户资源，支持1V1线上交易；',
+            }
+        ],
+        // 截取的H5列表
+        filterH5ScenarioList: [],
+        drawer: false, // 抽屉开关
+        cShow: false, // 底部按钮
+        userActions: [{ name: '我的采美', href: '/user/dashboard.html' }, { name: '机构资料', href: '/user/setting/information.html' }, { name: '退出登录', id: 3 }],  // 底部菜单
+        supplierActions: [{ name: '我的采美', href: '/supplier/dashboard.html' }, { name: '店铺管理', id: 2 }, { name: `我的消息（${localStorage.getItem('noticeNum')}）`, href: '/supplier/message/list.html', id: 3 }, { name: '退出登录', id: 3 }], // 底部菜单
+        H5dialogVisible: false,
+        showIphone: false,
+        showPopup: false, // 是否拨打电话
+    },
+    created() {
+        this.screenWidth = document.body.clientWidth
+        window.onresize = () => {
+            return (() => {
+                this.screenWidth = document.body.clientWidth
+            })()
+        }
     },
-    created() {},
     mounted() {
         // this.getPageSnap()
         // this.goLinkActive()
+        this.ScenarioListFilter(6)
         this.showContent = false
     },
     filters: {
@@ -220,8 +294,45 @@ new Vue({
             return val
         }
     },
-    computed: {},
+    watch: {
+        screenWidth: {
+            handler(val) {
+                if (val > 750) {
+                    this.isPC = true
+                }else {
+                    this.isPC = false
+                    this.swiperSideWidth = val * 2 / 3
+                    this.successSideWidth = val * 0.8
+                    this.communitySideWidth = val * 0.416
+                }
+            }
+        },
+    },
     methods: {
+        // 底部切换
+        onSelect($event) {
+            this.drawer = false
+            if ($event.href) return (window.location.href = $event.href)
+            if ($event.id === 2) {
+                this.pageLinkSupplier()
+            } else {
+                this.userLogOut()
+            }
+        },
+        // 底部菜单
+        hideAction() {
+            this.cShow = true
+        },
+        handlerDialog(event) {
+            this.H5dialogVisible = !this.H5dialogVisible
+            this.showIphone = event
+            const diglog = document.getElementById('H5dialogVisible')
+            if (!this.H5dialogVisible) {
+                diglog.addEventListener('touchmove', (e) => {
+                    e.preventDefault()
+                })
+            }
+        },
         // 滚动事件
         getPageSnap() {
             const fullPage = this.$refs.fullPage
@@ -396,5 +507,46 @@ new Vue({
                 callback: action => {}
             });
         },
+        scrollintoview() {
+            document.getElementById('thirdPage').scrollIntoView()
+        },
+        // 截取运营产品
+        ScenarioListFilter(index) {
+            this.filterH5ScenarioList = this.H5ScenarioList.filter(item => item.id <= index)
+        },
+        setMore() {
+            this.ScenarioListFilter(12)
+        },
+        openDrawn() {
+            this.drawer = !this.drawer
+        },
+        H5link($event) {
+            // window.location.href = `/supplier-login/index.html?${$event.href}`
+            // this.scrollToDom(to, window)
+            window.history.go(-1)
+        },
+        // 滚动函数
+        scrollToDom(to, container) {
+            container.scrollTo({
+                left: 0,
+                top: 0,
+                behavior: "smooth"
+            })
+        },
+        callPhone() {
+            this.H5dialogVisible = false
+            setTimeout(() => {
+                this.showPopup = true
+            }, 100)
+        },
+        /*拨打电话*/
+        cancel() {
+            this.showPopup = false
+        },
+        // 拨打电话确定
+        confirm() {
+            window.location.href = 'tel:153-3889-7365';
+            this.showPopup = false
+        },
     },
 })

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

@@ -45,11 +45,13 @@
                     <div class="cShow" v-if="userIdentity == 4 || userIdentity == 2">
                         <a href="/user/dashboard.html" rel="nofollow">我的采美</a>
                         <a href="/user/setting/information.html" rel="nofollow">机构资料</a>
+                        <a @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0);">我的消息<span>（{{noticeNum}}）</span></a>
                         <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
                     </div>
                     <div class="cShow" v-if="userIdentity == 3">
                         <a href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
                         <a href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                        <a @click="goMsgLinkFn('/supplier/message/list.html')" href="javascript:void(0);">我的消息<span>（{{noticeNum}}）</span></a>
                         <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
                     </div>
                 </li>
@@ -70,17 +72,20 @@
             </a>
             <div class="mf h5Only mUserCenter">
                 <template v-if="loginStatus">
-                    <a href="/shopping/cart.html" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" title="购物车" rel="nofollow"></a>
-                    <a v-if="userIdentity===3" @click="goMsgLinkFn('/supplier/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>
-                    <a v-else @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>
+                    <a class="mUserIcon mIcon toLogin" href="/user/member.html" v-if="!isPC && userIdentity != 3" title="超级会员" rel="nofollow"></a>
+                    <a href="/shopping/cart.html" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" v-if="!isPC && userIdentity != 3" title="购物车" rel="nofollow"></a>
+<!--                    <a v-if="userIdentity===3" @click="goMsgLinkFn('/supplier/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>-->
+<!--                    <a v-else @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0);" :class="loginStatus?'mNotice H5-icon':'mNotice H5-icon toLogin'" title="消息" rel="nofollow"></a>-->
                     <a @click="showGlobalMenu()" class="mUserIcon mIcon" href="javascript:void(0);" title="个人中心" rel="nofollow"></a>
                 </template>
                 <template v-else>
+                    <a class="mUserIcon mIcon superVip" :href="GLOBAL_USER_ID === 0 ? '/login.html' : '/user/member.html'" title="超级会员" rel="nofollow"></a>
+                    <a href="/login.html" :class="loginStatus?'mAddCart mIcon':'mAddCart mIcon toLogin'" title="购物车" rel="nofollow"></a>
                     <a class="mUserIcon mIcon toLogin" href="javascript:void(0);" title="个人中心" rel="nofollow"></a>
                 </template>
             </div>
             <div class="searchBox" id="topSearch">
-                <div class="search auto-input" id="autoInput">
+                <div class="search auto-input" id="autoInput" :style="{float: (userIdentity !== 3 && loginStatus) ? 'none' : '', margin: (userIdentity !== 3 && loginStatus) ? '0 auto' : '' }">
                     <div class="jqSelect">
                         <div class="pc">
                             <span data-select="0">产品</span>
@@ -95,6 +100,9 @@
                     <input class="keyword" type="text" placeholder="请输入搜索关键词" maxlength="30"/>
                     <a class="searchBtn icon mIcon" href="javascript:void(0);" onclick="_czc.push(['_trackEvent','顶部导航','搜索按钮','点击','','Um_Event_SearchButton'])"></a>
                 </div>
+                <div class="supplierH5" v-if="!isPC && (userIdentity !== 4 && userIdentity !== 2)">
+                    <a class="mIcon supplier_H5" href="/supplier-login/index.html" title="供应商服务" rel="nofollow"></a>
+                </div>
                 <!-- 热门搜索关键词 -->
                 <div class="hotKey">
                     <span th:each="word,wordStat: ${searchHotWord}">

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

@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="https://www.thymeleaf.org " xmlns="http://www.w3.org/1999/html">
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://www.thymeleaf.org " xmlns="http://www.w3.org/1999/html">
+
 <head>
-    <meta charset="UTF-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
-    <meta name="format-detection" content="telephone=yes"/>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />
+    <meta name="format-detection" content="telephone=yes" />
     <title>美业参谋</title>
-    <link rel="canonical" href="https://www.caimei365.com/"/>
+    <link rel="canonical" href="https://www.caimei365.com/" />
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
@@ -15,557 +15,563 @@
     <link th:href="@{/css/supplier-login/login.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-login/login-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <!--element ui 样式表-->
-    <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"/>
+    <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" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
-    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>
-<!--    <template th:replace="components/analysis"></template>-->
+    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />coed
+    <!--    <template th:replace="components/analysis"></template>-->
 </head>
+
 <body>
-<div id="login_content" ref="login_content">
-    <div class="login_header">
-        <div class="login_header_container">
-            <div class="img_logo" @click="goToIndex">
-                <div class="logo" style="background-size: contain"></div>
-                <div class="text">美业参谋</div>
-            </div>
-            <div class="header_link" v-cloak>
-                <a ref="link_item" :href="item.href" @click="handlerNav(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
+    <div id="login_content" ref="login_content">
+        <div class="login_header">
+            <div class="login_header_container">
+                <div class="img_logo" @click="goToIndex">
+                    <div class="logo" style="background-size: contain"></div>
+                    <div class="text">美业参谋</div>
+                </div>
+                <div class="header_link" v-cloak>
+                    <a ref="link_item" @click="H5link(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
                     {{item.title}}
                 </a>
-                <div class="nav_link" ref="nav_link_item">
-                    <div class="nav_link_item"></div>
-                </div>
-            </div>
-            <div style="display: flex;justify-content: center;align-items: center">
-                <div class="iphone">
-                    <div></div>
-                    <div>153-3889-7365</div>
+                    <div class="nav_link" ref="nav_link_item">
+                        <div class="nav_link_item"></div>
+                    </div>
                 </div>
-                <div v-if="userInfo && userInfo.userIdentity === 3 && isPC" v-cloak class="username">
-                    <el-popover placement="bottom" width="50" trigger="hover" v-if="isPC">
-                        <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
-                            <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
-                            <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
-                            <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                <div style="display: flex;justify-content: center;align-items: center">
+                    <div class="iphone">
+                        <div></div>
+                        <div>153-3889-7365</div>
+                    </div>
+                    <div v-if="userInfo && userInfo.userIdentity === 3 && isPC" v-cloak class="username">
+                        <el-popover placement="bottom" width="50" trigger="hover" v-if="isPC">
+                            <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
+                                <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
+                                <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                                <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                            </div>
+                            <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 class="H5_username" @click="hideAction">
+                            <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw" />
                         </div>
-                        <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 class="H5_username" @click="hideAction">
-                        <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw"/>
+                        <div style="color: #FF5B00;font-size: 3.6vw;margin: 0 3.6vw;">菜单</div>
+                        <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 3.2vw;height: 3.2vw" />
+                        <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 3.2vw;height: 3.2vw" />
+                    </div>
+                    <div class="login_regist" v-if="!isPC && !userInfo">
+                        <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>
-                    <div style="color: #FF5B00;font-size: 3.6vw;margin: 0 3.6vw;">菜单</div>
-                    <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 3.2vw;height: 3.2vw"/>
-                    <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 3.2vw;height: 3.2vw"/>
-                </div>
-                <div class="login_regist" v-if="isPC && !userInfo">
-                    <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>
             </div>
         </div>
-    </div>
-    <div class="slide_icon" v-if="showContent && isPC">
-        <div class="slide_icon_item slide_icon_phone">
-            <img src="" />
-            电话联系
-            <div class="tooltip tooltip_1" :style="{bottom: activeLinkId!==0 ? '250px':'180px'}">
-                <div class="day">周一至周五 9:00~1800</div>
-                <div class="phone_number">153-3889-7365</div>
+        <div class="slide_icon" v-if="showContent && isPC">
+            <div class="slide_icon_item slide_icon_phone">
+                <img src="" /> 电话联系
+                <div class="tooltip tooltip_1" :style="{bottom: activeLinkId!==0 ? '250px':'180px'}">
+                    <div class="day">周一至周五 9:00~1800</div>
+                    <div class="phone_number">153-3889-7365</div>
+                </div>
             </div>
-        </div>
-        <div class="slide_icon_item slide_icon_qrcode">
-            <img src="" />
-            微信客服
-            <div class="tooltip tooltip_2" :style="{bottom: activeLinkId!==0 ? '50px':'0'}">
-                <img src="/img/common/qr_code_kefu.png" alt="采美客服">
+            <div class="slide_icon_item slide_icon_qrcode">
+                <img src="" /> 微信客服
+                <div class="tooltip tooltip_2" :style="{bottom: activeLinkId!==0 ? '50px':'0'}">
+                    <img src="/img/common/qr_code_kefu.png" alt="采美客服">
+                </div>
             </div>
+            <div class="slide_icon_item goTop" @click="H5link({href: '#zeroPage'})" v-if="activeLinkId!==0"></div>
         </div>
-        <div class="slide_icon_item goTop" @click="H5link({href: '#zeroPage'})" v-if="activeLinkId!==0"></div>
-    </div>
-    <div class="slide_icon" v-if="!isPC">
-        <div class="slide_icon_item slide_icon_phone" @click="handlerDialog(true)">
-            <img src="" />
-            电话联系
-        </div>
-        <div class="slide_icon_item slide_icon_qrcode" @click="handlerDialog(false)">
-            <img src="" />
-            微信客服
-        </div>
-        <div class="slide_icon_item goTop" @click="H5link({href: '#zeroPage'})">123</div>
-    </div>
-    <div id="fullpage" ref="fullPage" v-if="showContent">
-        <div id="zeroPage" class="page section">
-            <el-carousel arrow="always" :interval="4000" v-if="isPC">
-                <el-carousel-item>
-                    <div class="banner01">
-                        <div class="left animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''"></div>
-                        <div class="right animate__animated" :class="activeId === 0 ? 'animate__backInRight' : ''"></div>
-                    </div>
-                </el-carousel-item>
-                <el-carousel-item>
-                    <div class="banner02"></div>
-                </el-carousel-item>
-            </el-carousel>
-            <van-swipe style="height: 51vw;" v-else>
-                <van-swipe-item>
-                    <div class="H5-banner_1"></div>
-                </van-swipe-item>
-                <van-swipe-item>
-                    <div class="H5-banner_2"></div>
-                </van-swipe-item>
-            </van-swipe>
-            <div class="Title">
-                <div class="text animate__animated">全生命周期陪跑服务</div>
-                <div class="title animate__animated">采美，更专业的美业数字化营销服务</div>
+        <div class="slide_icon" v-if="!isPC">
+            <div class="slide_icon_item slide_icon_phone" @click="handlerDialog(true)">
+                <img src="/img/supplier-login/H5/phone.png" />
+                <div>电话联系</div>
             </div>
-            <div class="server" v-if="isPC">
-                <div class="server_1 animate__animated">
-                    <div class="box tourist_bg">
-                        <div class="tourist_bg_logo"></div>
-                        <div class="tourist_bg_title">全渠道获客</div>
-                    </div>
-                    <div class="box tourist">
-                        <div class="tourist_logo"></div>
-                        <div class="tourist_title">全渠道获客</div>
-                        <div class="tourist_li">|</div>
-                        <div class="all_cont">· 精准投放推广内容触达B端客户 ·</div>
-                        <div class="all_cont">· 精准识别全渠道匿名用户线索 ·</div>
-                    </div>
-                </div>
-                <div class="server_2 animate__animated">
-                    <div class="box operate_bg">
-                        <div class="operate_bg_logo"></div>
-                        <div class="operate_bg_title">潜客运营</div>
-                    </div>
-                    <div class="box operate">
-                        <div class="operate_logo"></div>
-                        <div class="operate_title">潜客运营</div>
-                        <div class="operate_li">|</div>
-                        <div class="all_cont">· 潜客筛选 ·</div>
-                        <div class="all_cont">· 精细化分层运营 ·</div>
-                        <div class="all_cont">· 精准推送内容 ·</div>
-                    </div>
-                </div>
-                <div class="server_3 animate__animated">
-                    <div class="box sale_bg">
-                        <div class="sale_bg_logo"></div>
-                        <div class="sale_bg_title">销售转化</div>
-                    </div>
-                    <div class="box sale">
-                        <div class="sale_logo"></div>
-                        <div class="sale_title">销售转化</div>
-                        <div class="sale_li">|</div>
-                        <div class="all_cont">· 全链条商机管理，用户线索流程清晰，高效流转 ·</div>
-                        <div class="all_cont">· 全场景交易平台，线上线下一体化把握每一条商机 ·</div>
-                        <div class="all_cont">· 全方位售后服务，延长客户生命周期、提高复购率 ·</div>
-                    </div>
-                </div>
+            <div class="slide_icon_item slide_icon_qrcode" @click="handlerDialog(false)">
+                <img src="/img/supplier-login/H5/qrcode.png" />
+                <div>微信客服</div>
             </div>
-            <div class="init server" v-if="!isPC">
-                <van-swipe :loop="false" :width="swiperSideWidth">
-                    <van-swipe-item style="margin-left: 7.2vw;">
-                        <img class="server_img"/>
-                        <div class="title">全渠道获客</div>
-                        <div class="text">精准投放推广内容触达B端客户</div>
-                        <div class="text">精准识别全渠道匿名用户线索</div>
-                    </van-swipe-item>
+            <div class="slide_icon_item goTop" @click="H5link({href: '#zeroPage'})">
+                <img src="/img/supplier-login/H5/scrolltop.png" style="grid-row: 1 / span 2;">
+            </div>
+        </div>
+        <div id="fullpage" ref="fullPage" v-if="showContent">
+            <div id="zeroPage" class="page section">
+                <el-carousel arrow="always" :interval="4000" v-if="isPC">
+                    <el-carousel-item>
+                        <div class="banner01">
+                            <div class="left animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''"></div>
+                            <div class="right animate__animated" :class="activeId === 0 ? 'animate__backInRight' : ''"></div>
+                        </div>
+                    </el-carousel-item>
+                    <el-carousel-item>
+                        <div class="banner02"></div>
+                    </el-carousel-item>
+                </el-carousel>
+                <van-swipe style="height: 51vw;" v-else>
                     <van-swipe-item>
-                        <img class="server_img"/>
-                        <div class="title">潜客运营</div>
-                        <div class="text">潜客筛选</div>
-                        <div class="text">精细化分层运营</div>
-                        <div class="text">精准推送内容</div>
+                        <div class="H5-banner_1"></div>
                     </van-swipe-item>
                     <van-swipe-item>
-                        <img class="server_img"/>
-                        <div class="title">销售转化</div>
-                        <div class="text">全链条商机管理，用户线索流程清晰，高效流转</div>
-                        <div class="text">全场景交易平台，线上线下一体化把握每一条商机</div>
-                        <div class="text">全方位售后服务，延长客户生命周期、提高复购率</div>
+                        <div class="H5-banner_2"></div>
                     </van-swipe-item>
                 </van-swipe>
-            </div>
-        </div>
-        <div id="firstPage" class="page section">
-            <div class="Title">
-                <div class="text animate__animated">解决方案</div>
-                <div class="title animate__animated">满足企业全方位需求</div>
-            </div>
-            <div class="selection">
-                <div class="selection_item animate__animated">
-                    <div class="selection_item_contain">
-                        <div class="contain_bg_01 ">
-                            <span class="title">基础版</span>
+                <div class="Title">
+                    <div class="text animate__animated">全生命周期陪跑服务</div>
+                    <div class="title animate__animated">采美，更专业的美业数字化营销服务</div>
+                </div>
+                <div class="server" v-if="isPC">
+                    <div class="server_1 animate__animated">
+                        <div class="box tourist_bg">
+                            <div class="tourist_bg_logo"></div>
+                            <div class="tourist_bg_title">全渠道获客</div>
                         </div>
-                        <div class="bg1_text">
-                            <div class="text_contain">
-                                <div class="bg1_contain" v-for="(item, id) in foundationList" :key="id">
-                                    <div class="square_icon"></div>
-                                    <div v-cloak>{{item}}</div>
-                                </div>
-                            </div>
-<!--                            <div v-cloak style="width: 100%;">-->
-<!--                                ￥<span style="font-size: 40px; font-weight: bold;">26800</span>/年-->
-<!--                            </div>-->
-                            <!--                            <div v-if="userInfo && userInfo.userIdentity === 3" class="select_btn_login">已登录</div>-->
-                            <div class="select_btn" @click="selectionQus">查看解决方案</div>
+                        <div class="box tourist">
+                            <div class="tourist_logo"></div>
+                            <div class="tourist_title">全渠道获客</div>
+                            <div class="tourist_li">|</div>
+                            <div class="all_cont">· 精准投放推广内容触达B端客户 ·</div>
+                            <div class="all_cont">· 精准识别全渠道匿名用户线索 ·</div>
                         </div>
                     </div>
-                </div>
-                <div class="selection_item animate__animated">
-                    <div class="selection_item_contain">
-                        <div class="contain_bg_02">
-                            <span class="title" style="margin-left: -36px;">高级版</span>
+                    <div class="server_2 animate__animated">
+                        <div class="box operate_bg">
+                            <div class="operate_bg_logo"></div>
+                            <div class="operate_bg_title">潜客运营</div>
                         </div>
-                        <div class="bg1_text">
-                            <div class="text_contain">
-                                <div class="bg1_contain" v-for="(item, id) in customizationList" :key="id">
-                                    <div class="square_icon"></div>
-                                    <div v-cloak>{{item}}</div>
-                                </div>
-                            </div>
-                            <div class="select_btn" @click="selectionQus">查看解决方案</div>
+                        <div class="box operate">
+                            <div class="operate_logo"></div>
+                            <div class="operate_title">潜客运营</div>
+                            <div class="operate_li">|</div>
+                            <div class="all_cont">· 潜客筛选 ·</div>
+                            <div class="all_cont">· 精细化分层运营 ·</div>
+                            <div class="all_cont">· 精准推送内容 ·</div>
                         </div>
                     </div>
-                </div>
-                <div class="selection_item animate__animated">
-                    <div class="selection_item_contain">
-                        <div class="contain_bg_03">
-                            <span class="title" style="margin-left: -36px;">战略版</span>
+                    <div class="server_3 animate__animated">
+                        <div class="box sale_bg">
+                            <div class="sale_bg_logo"></div>
+                            <div class="sale_bg_title">销售转化</div>
                         </div>
-                        <div class="bg1_text">
-                            <div class="text_contain">
-                                <div class="bg1_contain" v-for="(item, id) in caseList" :key="id">
-                                    <div class="square_icon"></div>
-                                    <div v-cloak>{{item}}</div>
-                                </div>
-                            </div>
-                            <div class="select_btn" @click="selectionQus">查看解决方案</div>
+                        <div class="box sale">
+                            <div class="sale_logo"></div>
+                            <div class="sale_title">销售转化</div>
+                            <div class="sale_li">|</div>
+                            <div class="all_cont">· 全链条商机管理，用户线索流程清晰，高效流转 ·</div>
+                            <div class="all_cont">· 全场景交易平台，线上线下一体化把握每一条商机 ·</div>
+                            <div class="all_cont">· 全方位售后服务，延长客户生命周期、提高复购率 ·</div>
                         </div>
                     </div>
                 </div>
+                <div class="init server" v-if="!isPC">
+                    <van-swipe :loop="false" :width="swiperSideWidth">
+                        <van-swipe-item style="margin-left: 7.2vw;">
+                            <img class="server_img" src="/img/supplier-login/H5/server/01.png" />
+                            <div class="title">全渠道获客</div>
+                            <div class="text">精准投放推广内容触达B端客户</div>
+                            <div class="text">精准识别全渠道匿名用户线索</div>
+                        </van-swipe-item>
+                        <van-swipe-item>
+                            <img class="server_img" src="/img/supplier-login/H5/server/02.png" />
+                            <div class="title">潜客运营</div>
+                            <div class="text">潜客筛选</div>
+                            <div class="text">精细化分层运营</div>
+                            <div class="text">精准推送内容</div>
+                        </van-swipe-item>
+                        <van-swipe-item>
+                            <img class="server_img" src="/img/supplier-login/H5/server/03.png" />
+                            <div class="title">销售转化</div>
+                            <div class="text">全链条商机管理，用户线索流程清晰，高效流转</div>
+                            <div class="text">全场景交易平台，线上线下一体化把握每一条商机</div>
+                            <div class="text">全方位售后服务，延长客户生命周期、提高复购率</div>
+                        </van-swipe-item>
+                    </van-swipe>
+                </div>
+                <div v-if="isPC" id="positionTab"></div>
             </div>
-        </div>
-        <div id="secondPage" class="page section">
-            <div class="Title">
-                <div class="text animate__animated">基础运营产品</div>
-                <div class="title animate__animated">使企业走向数字化的基石</div>
-            </div>
-            <div class="operationa" v-if="isPC">
-                <div class="operationa_contain">
-                    <div class="bg1 animate__animated" v-show="isStore"></div>
-                    <div class="bg2 animate__animated" v-show="isStore"></div>
-                    <div class="bg3" v-show="isAthor"></div>
-                    <div class="bg4" v-show="isAthor"></div>
-                    <div class="online_store" v-show="isStore">
-                        <div class="online_logo animate__animated"></div>
-                        <div class="online_title">在线商城</div>
-                    </div>
-                    <div class="online" v-show="isAthor" @click="changeModeAuthor">
-                        <div class="online_logo"></div>
-                        <div class="online_title">在线商城</div>
-                    </div>
-                    <div class="author" @click="changeModeAuthor" v-show="isStore">
-                        <div class="author_title">正品认证通</div>
-                        <div class="author_logo"></div>
-                    </div>
-                    <div class="author_active" v-show="isAthor">
-                        <div class="online_logo animate__animated"></div>
-                        <div class="online_title" style="color: white">正品认证通</div>
+            <div id="firstPage" class="page section">
+                <div class="Title">
+                    <div class="text animate__animated">解决方案</div>
+                    <div class="title animate__animated">满足企业全方位需求</div>
+                </div>
+                <div class="selection">
+                    <div class="selection_item animate__animated">
+                        <div class="selection_item_contain">
+                            <div class="contain_bg_01 ">
+                                <span class="title">基础版</span>
+                            </div>
+                            <div class="bg1_text">
+                                <div class="text_contain">
+                                    <div class="bg1_contain" v-for="(item, id) in foundationList" :key="id">
+                                        <div class="square_icon"></div>
+                                        <div v-cloak>{{item}}</div>
+                                    </div>
+                                </div>
+                                <div class="select_btn" @click="selectionQus">查看解决方案</div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="contain" v-show="isStore">
-                        <div class="contain_logo animate__animated"></div>
-                        <div class="contain_list" v-cloak>
-                            <div class="list_item" v-for="item in contain_list" :key="item.id">
-                                <div></div>
-                                <div style="font-weight: bold;font-size: 20px;">{{item.title}}</div>
-                                <div style="font-size: 16px;text-align: center;color: #666666; height: 15px;">{{item.content}}</div>
+                    <div class="selection_item animate__animated">
+                        <div class="selection_item_contain">
+                            <div class="contain_bg_02">
+                                <span class="title" style="margin-left: -36px;">高级版</span>
+                            </div>
+                            <div class="bg1_text">
+                                <div class="text_contain">
+                                    <div class="bg1_contain" v-for="(item, id) in customizationList" :key="id">
+                                        <div class="square_icon"></div>
+                                        <div v-cloak>{{item}}</div>
+                                    </div>
+                                </div>
+                                <div class="select_btn" @click="selectionQus">查看解决方案</div>
                             </div>
                         </div>
                     </div>
-                    <div class="athor_contain" v-show="isAthor">
-                        <div class="athor_contain_logo animate__animated"></div>
-                        <div class="athor_contain_list" v-cloak>
-                            <div class="list_item" v-for="item in athor_contain_list" :key="item.id">
-                                <div class="list_item_logo"></div>
+                    <div class="selection_item animate__animated">
+                        <div class="selection_item_contain">
+                            <div class="contain_bg_03">
+                                <span class="title" style="margin-left: -36px;">战略版</span>
+                            </div>
+                            <div class="bg1_text">
                                 <div class="text_contain">
-                                    <div class="text_contain_item">{{item.title}}</div>
-                                    <div class="text_contain_item2"></div>
-                                    <div class="text_contain_item3">{{item.content}}</div>
+                                    <div class="bg1_contain" v-for="(item, id) in caseList" :key="id">
+                                        <div class="square_icon"></div>
+                                        <div v-cloak>{{item}}</div>
+                                    </div>
                                 </div>
+                                <div class="select_btn" @click="selectionQus">查看解决方案</div>
                             </div>
                         </div>
                     </div>
                 </div>
+                <div v-if="isPC" id="positionTab"></div>
             </div>
-            <div class="operationa" v-else>
-                <div class="H5_opera">
-                    <div class="author"></div>
-                    <div class="online_store"></div>
-                    <div class="opera_online"></div>
-                    <div class="opera_author"></div>
+            <div id="secondPage" class="page section">
+                <div class="Title">
+                    <div class="text animate__animated">基础运营产品</div>
+                    <div class="title animate__animated">使企业走向数字化的基石</div>
                 </div>
-            </div>
-        </div>
-        <div id="thirdPage" class="page section">
-            <div class="Title">
-                <div class="text animate__animated">场景营销工具</div>
-                <div class="title animate__animated">多样化工具，全方位助力您的企业目标</div>
-            </div>
-            <div class="pageInner" v-if="isPC">
-                <div class="container" v-cloak>
-                    <div class="thirdPage_container_contant">
-                        <div class="container_title" ref="container_title_1">引流获客</div>
-                        <div class="container_title" ref="container_title_2">潜客运营</div>
-                        <div class="container_title" ref="container_title_3">销售转化</div>
-                    </div>
-                    <div class="container_item" v-for="(item, index) in ScenarioList" :key="index" @mouseleave="opacityTitle">
-                        <div class="container_item_active" v-for="i in item.contant" :key="i.id" @mouseenter="mouseTitle(index)">
-                            <div class="container_item_hover animate__animated" v-if="i.id % 2 !==0">
-                                <div class="item_title">{{i.title}}</div>
-                                <div class="item_contant">{{i.contant}}</div>
-                                <div class="item_logo_box">
-                                    <div class="item_logo" :id=`item_logo_${i.id}`></div>
+                <div class="operationa" v-if="isPC">
+                    <div class="operationa_contain">
+                        <div class="bg1 animate__animated" v-show="isStore"></div>
+                        <div class="bg2 animate__animated" v-show="isStore"></div>
+                        <div class="bg3" v-show="isAthor"></div>
+                        <div class="bg4" v-show="isAthor"></div>
+                        <div class="online_store" v-show="isStore">
+                            <div class="online_logo animate__animated"></div>
+                            <div class="online_title">在线商城</div>
+                        </div>
+                        <div class="online" v-show="isAthor" @click="changeModeAuthor">
+                            <div class="online_logo"></div>
+                            <div class="online_title">在线商城</div>
+                        </div>
+                        <div class="author" @click="changeModeAuthor" v-show="isStore">
+                            <div class="author_title">正品认证通</div>
+                            <div class="author_logo"></div>
+                        </div>
+                        <div class="author_active" v-show="isAthor">
+                            <div class="online_logo animate__animated"></div>
+                            <div class="online_title" style="color: white">正品认证通</div>
+                        </div>
+                        <div class="contain" v-show="isStore">
+                            <div class="contain_logo animate__animated"></div>
+                            <div class="contain_list" v-cloak>
+                                <div class="list_item" v-for="item in contain_list" :key="item.id">
+                                    <div></div>
+                                    <div style="font-weight: bold;font-size: 20px;">{{item.title}}</div>
+                                    <div style="font-size: 16px;text-align: center;color: #666666; height: 15px;">{{item.content}}</div>
                                 </div>
-                                <div class="item_title_p">{{i.title}}</div>
                             </div>
-                            <div class="container_item_hover2 animate__animated" v-else>
-                                <div class="item_title">{{i.title}}</div>
-                                <div class="item_contant">{{i.contant}}</div>
-                                <div class="item_logo_box">
-                                    <div class="item_logo" :id=`item_logo_${i.id}`></div>
+                        </div>
+                        <div class="athor_contain" v-show="isAthor">
+                            <div class="athor_contain_logo animate__animated"></div>
+                            <div class="athor_contain_list" v-cloak>
+                                <div class="list_item" v-for="item in athor_contain_list" :key="item.id">
+                                    <div class="list_item_logo"></div>
+                                    <div class="text_contain">
+                                        <div class="text_contain_item">{{item.title}}</div>
+                                        <div class="text_contain_item2"></div>
+                                        <div class="text_contain_item3">{{item.content}}</div>
+                                    </div>
                                 </div>
-                                <div class="item_title_p">{{i.title}}</div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div v-else class="H5_pageInner">
-                <div class="H5_contant">
-                    <div class="H5_contant_item" v-for="item in filterH5ScenarioList" :key="item.id">
-                        <div class="title">{{item.title}}</div>
-                        <div class="content">{{item.contant}}</div>
-                        <img />
-                    </div>
-                    <div class="getMore" v-if="filterH5ScenarioList.length < 12" @click="ScenarioListFilter(12)">
-                        展开查看更多
+                <div class="operationa" v-else>
+                    <div class="H5_opera">
+                        <div class="author"></div>
+                        <div class="online_store"></div>
+                        <div class="opera_online"></div>
+                        <div class="opera_author"></div>
                     </div>
                 </div>
+                <div v-if="isPC" id="positionTab"></div>
             </div>
-        </div>
-        <div id="fourPage" class="page section" style="background: #fff;">
-            <div class="Title">
-                <div class="text animate__animated">成功案例</div>
-                <div class="title animate__animated" v-if="isPC">
-                    了解已合作品牌的真实推广案例，借鉴成功经验，助力有效推广，实现商业目标
+            <div id="thirdPage" class="page section">
+                <div class="Title">
+                    <div class="text animate__animated">场景营销工具</div>
+                    <div class="title animate__animated">多样化工具，全方位助力您的企业目标</div>
                 </div>
-                <div class="title animate__animated" v-else>
-                    了解已合作品牌的真实推广案例，借鉴成功经验助力<br />有效推广，实现商业目标
-                </div>
-            </div>
-            <div style="display: flex;justify-content: center;align-items: center;margin-top: 10vh;" v-if="isPC">
-                <div class="pageInner_contain">
-                    <div class="nextChange" :class="isActiveNext ? 'isActiveNext' : ''" @click="nextPageCar">
-                        <</div>
-                    <el-carousel indicator-position="outside" ref="carousel" height="30vw" :interval="4000">
-                        <el-carousel-item v-for="item in el_carousel_list" :key="item.id">
-                            <div class="four_logo_1 animate__animated">
-                                <el-image fit="cover" :src="item.bg" style="width: 100%; height: 100%;"></el-image>
-                            </div>
-                            <div class="logo_text animate__animated">
-                                <div class="logo_title">{{item.title}}</div>
-                                <div class="analysis" v-html="item.content"></div>
+                <div class="pageInner" v-if="isPC">
+                    <div class="container" v-cloak>
+                        <div class="thirdPage_container_contant">
+                            <div class="container_title" ref="container_title_1">引流获客</div>
+                            <div class="container_title" ref="container_title_2">潜客运营</div>
+                            <div class="container_title" ref="container_title_3">销售转化</div>
+                        </div>
+                        <div class="container_item" v-for="(item, index) in ScenarioList" :key="index" @mouseleave="opacityTitle">
+                            <div class="container_item_active" v-for="i in item.contant" :key="i.id" @mouseenter="mouseTitle(index)">
+                                <div class="container_item_hover animate__animated" v-if="i.id % 2 !==0">
+                                    <div class="item_title">{{i.title}}</div>
+                                    <div class="item_contant">{{i.contant}}</div>
+                                    <div class="item_logo_box">
+                                        <div class="item_logo" :id=`item_logo_${i.id}`></div>
+                                    </div>
+                                    <div class="item_title_p">{{i.title}}</div>
+                                </div>
+                                <div class="container_item_hover2 animate__animated" v-else>
+                                    <div class="item_title">{{i.title}}</div>
+                                    <div class="item_contant">{{i.contant}}</div>
+                                    <div class="item_logo_box">
+                                        <div class="item_logo" :id=`item_logo_${i.id}`></div>
+                                    </div>
+                                    <div class="item_title_p">{{i.title}}</div>
+                                </div>
                             </div>
-                        </el-carousel-item>
-                    </el-carousel>
-                    <div class="nextChange" :class="isActiveNext ? '' : 'isActiveNext'" @click="prePageCar">></div>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div class="H5_success" v-else>
-                <van-swipe :loop="false" :width="successSideWidth">
-                    <van-swipe-item>
-                        <div class="innerSuccess">
-                            <div class="title">私域流量运营难</div>
-                            <div class="content">来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧无法精准触达用户、回收市场数据。采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌曝光度。并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获取客户资料，筛选出优质客户。既提高该品牌的知名度，又保证了用户数据的精准度。</div>
-                            <img class="success_img" src="/img/supplier-login/H5/success_1.jpg" />
+                <div v-else class="H5_pageInner">
+                    <div class="H5_contant">
+                        <div class="H5_contant_item" v-for="item in filterH5ScenarioList" :key="item.id">
+                            <div class="title">{{item.title}}</div>
+                            <div class="content">{{item.contant}}</div>
+                            <img :src="item.url" />
                         </div>
-                    </van-swipe-item>
-                    <van-swipe-item>
-                        <div class="innerSuccess" style="margin-left: 3vw;">
-                            <div class="title">营销获客难</div>
-                            <div class="content">连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。 采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。</div>
-                            <img class="success_img" src="/img/supplier-login/H5/success_2.jpg" />
+                        <div class="getMore" v-if="filterH5ScenarioList.length < 12" @click="ScenarioListFilter(12)">
+                            展开查看更多
                         </div>
-                    </van-swipe-item>
-                </van-swipe>
-            </div>
-        </div>
-        <div id="fivePage" class="page section">
-            <div class="Title" style="color: white">
-                <div style="color: white" class="text animate__animated">关于采美</div>
-                <div class="title animate__animated">了解采美，合作共赢</div>
+                    </div>
+                </div>
+                <div v-if="isPC" id="positionTab"></div>
             </div>
-            <div class="inner_contain">
-                <div class="inner">
-                    <div class="caimei_introduction animate__animated">
-                        采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台，其核心资产包括采购 信息中心，媒体矩阵，数字运营以及线上交易和 供应链管理软件，建立了一个从信息引流到数字 运营到交易结算一体化平台，站外引流站内运营，采购转化的闭环生态，采美平台以创造客户价 值为核心，借助数字化营销的优 势，赋能美业供应链上下游企业，共同打造一站式美业双线融合的供应链新生态。
+            <div id="fourPage" class="page section" style="background: #fff;">
+                <div class="Title">
+                    <div class="text animate__animated">成功案例</div>
+                    <div class="title animate__animated" v-if="isPC">
+                        了解已合作品牌的真实推广案例，借鉴成功经验，助力有效推广，实现商业目标
                     </div>
-                    <div class="caimei_report" v-cloak>
-                        <div class="report_item" v-for="item in report_list" :key="item.id">
-                            <img class="report_item_img" v-if="!isPC" src="/img/supplier-login/07-caimei/cirle.png"/>
-                            <div class="report_logo animate__animated">
-                                <span class="animate__animated">{{item.contant}}</span>
-                            </div>
-                            <div class="report_title animate__animated">
-                                {{item.title}}
-                            </div>
-                            <div class="report_line">
-                                <div class="box1 card4"></div>
-                                <div class="container">
-                                    <div class="box">
-                                        <span style="--i:1"></span>
-                                        <span style="--i:2"></span>
-                                        <span style="--i:3"></span>
-                                    </div>
-                                </div>
-                            </div>
+                    <div class="title animate__animated" v-else>
+                        了解已合作品牌的真实推广案例，借鉴成功经验助力<br />有效推广，实现商业目标
+                    </div>
+                </div>
+                <div style="display: flex;justify-content: center;align-items: center;margin-top: 10vh;" v-if="isPC">
+                    <div class="pageInner_contain">
+                        <div class="nextChange" :class="isActiveNext ? 'isActiveNext' : ''" @click="nextPageCar">
+                            <</div>
+                                <el-carousel indicator-position="outside" ref="carousel" height="30vw" :interval="4000">
+                                    <el-carousel-item v-for="item in el_carousel_list" :key="item.id">
+                                        <div class="four_logo_1 animate__animated">
+                                            <el-image fit="cover" :src="item.bg" style="width: 100%; height: 100%;"></el-image>
+                                        </div>
+                                        <div class="logo_text animate__animated">
+                                            <div class="logo_title">{{item.title}}</div>
+                                            <div class="analysis" v-html="item.content"></div>
+                                        </div>
+                                    </el-carousel-item>
+                                </el-carousel>
+                                <div class="nextChange" :class="isActiveNext ? '' : 'isActiveNext'" @click="prePageCar">></div>
                         </div>
                     </div>
+                    <div class="H5_success" v-else>
+                        <van-swipe :loop="false" :width="successSideWidth">
+                            <van-swipe-item>
+                                <div class="innerSuccess">
+                                    <div class="title">私域流量运营难</div>
+                                    <div class="content">来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧无法精准触达用户、回收市场数据。采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌曝光度。并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获取客户资料，筛选出优质客户。既提高该品牌的知名度，又保证了用户数据的精准度。</div>
+                                    <img class="success_img" src="/img/supplier-login/H5/success_1.jpg" />
+                                </div>
+                            </van-swipe-item>
+                            <van-swipe-item>
+                                <div class="innerSuccess" style="margin-left: 3vw;">
+                                    <div class="title">营销获客难</div>
+                                    <div class="content">连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。 采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。</div>
+                                    <img class="success_img" src="/img/supplier-login/H5/success_2.jpg" />
+                                </div>
+                            </van-swipe-item>
+                        </van-swipe>
+                    </div>
+                    <div v-if="isPC" id="positionTab"></div>
                 </div>
-            </div>
-        </div>
-        <div id="sixPage" class="page section" style="background: #fff">
-            <div class="Title" style="background: #fff">
-                <div class="text animate__animated">增长社区</div>
-                <div class="title animate__animated">数十年资深美业运营经验，教你快速成长</div>
-            </div>
-            <div class="contant_init">
-                <div class="community">
-                    <div class="community_video">
-                        <div class="community_title">美业企谈</div>
-                        <div class="community_list" v-cloak v-if="isPC">
-                            <div class="video_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_video_list" :key="item.id" @click="playerOn(item.video)">
-                                <div class="video_list_item_content">
-                                    <div class="player_bg">
-                                        <el-image style="width: 50px; height: 50px" src="/img/supplier-login/player.png" fit="contain"></el-image>
+                <div id="fivePage" class="page section">
+                    <div class="Title" style="color: white">
+                        <div style="color: white" class="text animate__animated">关于采美</div>
+                        <div class="title animate__animated">了解采美，合作共赢</div>
+                    </div>
+                    <div class="inner_contain">
+                        <div class="inner">
+                            <div class="caimei_introduction animate__animated">
+                                采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台，其核心资产包括采购 信息中心，媒体矩阵，数字运营以及线上交易和 供应链管理软件，建立了一个从信息引流到数字 运营到交易结算一体化平台，站外引流站内运营，采购转化的闭环生态，采美平台以创造客户价 值为核心，借助数字化营销的优 势，赋能美业供应链上下游企业，共同打造一站式美业双线融合的供应链新生态。
+                            </div>
+                            <div class="caimei_report" v-cloak>
+                                <div class="report_item" v-for="item in report_list" :key="item.id">
+                                    <img class="report_item_img" v-if="!isPC" src="/img/supplier-login/07-caimei/cirle.png" />
+                                    <div class="report_logo animate__animated">
+                                        <span class="animate__animated">{{item.contant}}</span>
                                     </div>
-                                    <div class="video_player">
-                                        <el-image :src="item.bg" fit="contain"></el-image>
+                                    <div class="report_title animate__animated">
+                                        {{item.title}}
                                     </div>
-                                    <div class="video_title">{{item.title | textSubString(45)}}</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div v-else class="cm_taking">
-                            <van-swipe class="my-swipe" :width="communitySideWidth" :show-indicators="false" :loop="false" indicator-color="#FF5B00">
-                                <van-swipe-item v-for="item in community_video_list" :key="item.id">
-                                    <div class="video_item">
-                                        <div class="video_img">
-                                            <img style="width: 100%;height: 100%" :src="item.bg"/>
+                                    <div class="report_line">
+                                        <div class="box1 card4"></div>
+                                        <div class="container">
+                                            <div class="box">
+                                                <span style="--i:1"></span>
+                                                <span style="--i:2"></span>
+                                                <span style="--i:3"></span>
+                                            </div>
                                         </div>
-                                        <div class="video_title">{{item.title | textSubString(17)}}</div>
                                     </div>
-                                </van-swipe-item>
-                            </van-swipe>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div class="community_article">
-                        <div class="community_title">干货知识</div>
-                        <div class="community_list" v-if="isPC" v-cloak>
-                            <div class="article_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_article_list" :key="item.id" @click="textInfo(item.id)">
-                                <div class="article_list_item_content">
-                                    <div class="article_bg">
-                                        <el-image :src="item.bg" fit="cover" style="width: 100%; height: 100%;"></el-image>
-                                    </div>
-                                    <div class="article_text">
-                                        <div class="text_title">{{item.title | textSubString(12)}}</div>
-                                        <div style="padding: 0 4%;">{{item.content | textSubString(50)}}</div>
+                    <div v-if="isPC" id="positionTab"></div>
+                </div>
+                <div id="sixPage" class="page section" style="background: #fff">
+                    <div class="Title" style="background: #fff">
+                        <div class="text animate__animated">增长社区</div>
+                        <div class="title animate__animated">数十年资深美业运营经验，教你快速成长</div>
+                    </div>
+                    <div class="contant_init">
+                        <div class="community">
+                            <div class="community_video">
+                                <div class="community_title">美业企谈</div>
+                                <div class="community_list" v-cloak v-if="isPC">
+                                    <div class="video_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_video_list" :key="item.id" @click="playerOn(item.video)">
+                                        <div class="video_list_item_content">
+                                            <div class="player_bg">
+                                                <el-image style="width: 50px; height: 50px" src="/img/supplier-login/player.png" fit="contain"></el-image>
+                                            </div>
+                                            <div class="video_player">
+                                                <el-image :src="item.bg" fit="contain"></el-image>
+                                            </div>
+                                            <div class="video_title">{{item.title | textSubString(45)}}</div>
+                                        </div>
                                     </div>
                                 </div>
+                                <div v-else class="cm_taking">
+                                    <van-swipe class="my-swipe" :width="communitySideWidth" :show-indicators="false" :loop="false" indicator-color="#FF5B00">
+                                        <van-swipe-item v-for="item in community_video_list" :key="item.id">
+                                            <div class="video_item">
+                                                <div class="player_bg" @click="playerOn(item.video)">
+                                                    <el-image style="width: 6vw; height: 6vw" src="/img/supplier-login/player.png" fit="contain"></el-image>
+                                                </div>
+                                                <div class="video_img">
+                                                    <img style="width: 100%;height: 100%" :src="item.bg" />
+                                                </div>
+                                                <div class="video_title">{{item.title | textSubString(17)}}</div>
+                                            </div>
+                                        </van-swipe-item>
+                                    </van-swipe>
+                                </div>
                             </div>
-                        </div>
-                        <div v-else class="cm_taking">
-                            <van-swipe class="my-swipe" :width="communitySideWidth" :loop="false" indicator-color="#FF5B00">
-                                <van-swipe-item v-for="item in community_article_list" :key="item.id">
-                                    <div class="video_item">
-                                        <div class="video_img">
-                                            <img style="width: 100%;height: 100%;object-fit: cover" :src="item.bg"/>
-                                        </div>
-                                        <div class="article_contant">
-                                            <div class="article_tit">{{item.title}}</div>
-                                            <div class="article_text">{{item.content}}</div>
+                            <div class="community_article">
+                                <div class="community_title">干货知识</div>
+                                <div class="community_list" v-if="isPC" v-cloak>
+                                    <div class="article_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_article_list" :key="item.id" @click="textInfo(item.id)">
+                                        <div class="article_list_item_content">
+                                            <div class="article_bg">
+                                                <el-image :src="item.bg" fit="cover" style="width: 100%; height: 100%;"></el-image>
+                                            </div>
+                                            <div class="article_text">
+                                                <div class="text_title">{{item.title | textSubString(12)}}</div>
+                                                <div style="padding: 0 4%;">{{item.content | textSubString(50)}}</div>
+                                            </div>
                                         </div>
                                     </div>
-                                </van-swipe-item>
-                            </van-swipe>
+                                </div>
+                                <div v-else class="cm_taking">
+                                    <van-swipe class="my-swipe" :width="communitySideWidth" :loop="false" indicator-color="#FF5B00">
+                                        <van-swipe-item v-for="item in community_article_list" :key="item.id" @click="textInfo(item.id)">
+                                            <div class="video_item">
+                                                <div class="video_img">
+                                                    <img style="width: 100%;height: 100%;object-fit: cover" :src="item.bg" />
+                                                </div>
+                                                <div class="article_contant">
+                                                    <div class="article_tit">{{item.title}}</div>
+                                                    <div class="article_text">{{item.content}}</div>
+                                                </div>
+                                            </div>
+                                        </van-swipe-item>
+                                    </van-swipe>
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    <div v-if="isPC" id="positionTab"></div>
                 </div>
-            </div>
-        </div>
-        <div v-if="isPC" id="sevenPage" class="page" style="display: flex;
+                <div v-if="isPC" id="sevenPage" class="page" style="display: flex;
                     flex-direction: column;
                     align-items: end;
                     justify-content: end;background: #fff;height: auto;">
-            <!-- 底部区域 end -->
-            <template th:replace="components/footer" ></template>
-            <template th:replace="components/foot-link"></template>
-        </div>
-        <div v-if="!isPC" id="sevenPage">
-            <!-- 底部区域 end -->
-            <template th:replace="components/footer" ></template>
-            <template th:replace="components/foot-link"></template>
-        </div>
-        <div class="cm_video_player" @click="playerOff" ref="Myplayer">
-            <video controls ref="cm_player" width="60%">
+                    <!-- 底部区域 end -->
+                    <template th:replace="components/footer"></template>
+                    <template th:replace="components/foot-link"></template>
+                </div>
+                <div v-if="!isPC" id="sevenPage">
+                    <!-- 底部区域 end -->
+                    <template th:replace="components/footer"></template>
+                    <template th:replace="components/foot-link"></template>
+                </div>
+                <div class="cm_video_player" @click="playerOff" ref="Myplayer">
+                    <video controls ref="cm_player" width="60%">
                 <source type="video/mp4">
                 您的浏览器不支持Video标签。
             </video>
-        </div>
-        <!--  微信电话弹窗  -->
-        <van-popup id="H5dialogVisible" round v-model="H5dialogVisible">
-            <div class="showIphone" v-if="showIphone">
-                <div class="showIphone_time">周一至周五 9:00~1800</div>
-                <div class="showIphone_phone" @click="callPhone">153-3889-7365</div>
-            </div>
-            <img style="width: 48vw; height: 48vw;" src="/img/common/qr_code_kefu.png" alt="采美客服" v-else/>
-        </van-popup>
-        <van-popup v-model="showPopup" round>
-            <div id="H5showPopup">
-                <div>确定拨打<span style="color: #FF5B00;font-weight: bold;">153-3889-7365 </span>吗？</div>
-                <div style="display: flex;justify-content: space-between;">
-                    <el-button class="btn_popup" @click="cancel">取消</el-button>
-                    <el-button class="btn_popup" type="primary" @click="confirm">确定</el-button>
                 </div>
+                <!--  微信电话弹窗  -->
+                <van-popup id="H5dialogVisible" round v-model="H5dialogVisible">
+                    <div class="showIphone" v-if="showIphone">
+                        <div class="showIphone_time">周一至周五 9:00~1800</div>
+                        <div class="showIphone_phone" @click="callPhone">153-3889-7365</div>
+                    </div>
+                    <img style="width: 48vw; height: 48vw;" src="/img/common/qr_code_kefu.png" alt="采美客服" v-else/>
+                </van-popup>
+                <van-popup v-model="showPopup" round>
+                    <div id="H5showPopup">
+                        <div>确定拨打<span style="color: #FF5B00;font-weight: bold;">153-3889-7365 </span>吗？</div>
+                        <div style="display: flex;justify-content: space-between;">
+                            <el-button class="btn_popup" @click="cancel">取消</el-button>
+                            <el-button class="btn_popup" type="primary" @click="confirm">确定</el-button>
+                        </div>
+                    </div>
+                </van-popup>
+            </div>
+            <div class="text_info" v-else style="background: #fff;">
+                <div class="text_info_contain" v-html="textContent" v-if="textContent"></div>
+                <!-- 底部区域 end -->
+                <template th:replace="components/footer"></template>
+                <template th:replace="components/foot-link"></template>
             </div>
-        </van-popup>
-    </div>
-    <div class="text_info" v-else style="background: #fff;">
-        <div class="text_info_contain" v-html="textContent" v-if="textContent"></div>
-        <!-- 底部区域 end -->
-        <template th:replace="components/footer"></template>
-        <template th:replace="components/foot-link"></template>
-    </div>
-    <!--  抽屉  -->
-    <el-drawer
-        :visible.sync="drawer"
-        v-if="!isPC">
-        <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
-    </el-drawer>
-    <!--    底部选项   -->
-    <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
-    <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
-</div>
+            <!--  抽屉  -->
+            <el-drawer :visible.sync="drawer" v-if="!isPC">
+                <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
+            </el-drawer>
+            <!--    底部选项   -->
+            <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
+            <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
+        </div>
 
 
-<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
-<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
-<!--<script charset="utf-8" type="text/javascript" src="/lib/lazyload.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/supplier-login/login.js(v=${version})}"></script>
+        <!--<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>-->
+        <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
+        <!--<script charset="utf-8" type="text/javascript" src="/lib/lazyload.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/supplier-login/login.js(v=${version})}"></script>
 </body>
-</html>
+
+</html>

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

@@ -1,427 +1,94 @@
 <!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="https://www.thymeleaf.org " xmlns="http://www.w3.org/1999/html">
-<head>
-  <meta charset="UTF-8"/>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
-  <title>美业参谋</title>
-  <link rel="canonical" href="https://www.caimei365.com/"/>
-  <template th:replace="components/head-link"></template>
-  <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
-  <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 th:href="@{/css/supplier-login/text_info.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
-  <link th:href="@{/css/supplier-login/components/fullPage.min.css(v=${version})}" rel="stylesheet" type="text/css">
+<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 " xmlns="http://www.w3.org/1999/html">
 
-  <!--element ui 样式表-->
-  <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"/>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
-  <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>
-  <template th:replace="components/analysis"></template>
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0" />
+    <meta name="format-detection" content="telephone=yes" />
+    <title>美业参谋</title>
+    <link rel="canonical" href="https://www.caimei365.com/" />
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
+    <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="@{/css/supplier-login/text_info.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier-login/login-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <!--element ui 样式表-->
+    <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" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
+    <!--    <template th:replace="components/analysis"></template>-->
 </head>
+
 <body>
-<div id="login_content" ref="login_content">
-  <div class="login_header">
-    <div class="login_header_container">
-      <div class="img_logo" @click="goToIndex">
-        <a href="javascript:void(0);"></a>
-        <div class="logo" style="background-size: contain"></div>
-        <div class="text">美业参谋</div>
-      </div>
-      <div class="header_link" v-cloak>
-        <a ref="link_item" :href="item.href" @click="handlerNav(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
+    <div id="login_content" ref="login_content">
+        <div class="login_header">
+            <div class="login_header_container">
+                <div class="img_logo" @click="goToIndex">
+                    <div class="logo" style="background-size: contain"></div>
+                    <div class="text">美业参谋</div>
+                </div>
+                <div class="header_link" v-cloak>
+                    <a ref="link_item" @click="H5link(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
           {{item.title}}
         </a>
-        <div class="nav_link" ref="nav_link_item">
-          <div class="nav_link_item"></div>
-        </div>
-      </div>
-      <div style="display: flex;justify-content: center;align-items: center">
-        <div class="iphone">
-          <div></div>
-          <div>153-3889-7365</div>
-        </div>
-        <div v-if="userInfo && userInfo.userIdentity === 3" v-cloak class="username">
-          <el-popover placement="bottom" width="50" trigger="hover">
-            <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
-              <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
-              <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
-              <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
-            </div>
-            <el-button slot="reference" type="text" style="font-size: 0.8vw;">{{userInfo.name}}</el-button>
-          </el-popover>
-        </div>
-        <div class="login_regist" v-else>
-          <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>
-      </div>
-    </div>
-  </div>
-  <div class="slide_icon" v-if="showContent">
-    <div class="slide_icon_item slide_icon_phone">
-      电话联系
-      <div class="tooltip tooltip_1" :style="{bottom: activeLinkId!==0 ? '250px':'180px'}">
-        <div class="day">周一至周五 9:00~1800</div>
-        <div class="phone_number">153-3889-7365</div>
-      </div>
-    </div>
-    <div class="slide_icon_item slide_icon_qrcode">
-      微信客服
-      <div class="tooltip tooltip_2" :style="{bottom: activeLinkId!==0 ? '50px':'0'}">
-        <img src="/img/common/qr_code_kefu.png" alt="采美客服">
-      </div>
-    </div>
-    <a href="#" class="slide_icon_item goTop" @click="handlerNav({id: 0})" v-if="activeLinkId!==0"></a>
-  </div>
-  <div id="fullpage" ref="fullPage" v-if="showContent">
-    <div id="zeroPage" class="page section">
-      <el-carousel arrow="always" :interval="4000">
-        <el-carousel-item>
-          <div class="banner01">
-            <div class="left animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''"></div>
-            <div class="right animate__animated" :class="activeId === 0 ? 'animate__backInRight' : ''"></div>
-          </div>
-        </el-carousel-item>
-        <el-carousel-item>
-          <div class="banner02"></div>
-        </el-carousel-item>
-      </el-carousel>
-      <div class="Title">
-        <div class="text animate__animated">全生命周期陪跑服务</div>
-        <div class="title animate__animated">采美，更专业的美业数字化营销服务</div>
-      </div>
-      <div class="server">
-        <div class="server_1 animate__animated">
-          <div class="box tourist_bg">
-            <div class="tourist_bg_logo"></div>
-            <div class="tourist_bg_title">全渠道获客</div>
-          </div>
-          <div class="box tourist">
-            <div class="tourist_logo"></div>
-            <div class="tourist_title">全渠道获客</div>
-            <div class="tourist_li">|</div>
-            <div class="all_cont">· 精准投放推广内容触达B端客户 ·</div>
-            <div class="all_cont">· 精准识别全渠道匿名用户线索 ·</div>
-          </div>
-        </div>
-        <div class="server_2 animate__animated">
-          <div class="box operate_bg">
-            <div class="operate_bg_logo"></div>
-            <div class="operate_bg_title">潜客运营</div>
-          </div>
-          <div class="box operate">
-            <div class="operate_logo"></div>
-            <div class="operate_title">潜客运营</div>
-            <div class="operate_li">|</div>
-            <div class="all_cont">· 潜客筛选 ·</div>
-            <div class="all_cont">· 精细化分层运营 ·</div>
-            <div class="all_cont">· 精准推送内容 ·</div>
-          </div>
-        </div>
-        <div class="server_3 animate__animated">
-          <div class="box sale_bg">
-            <div class="sale_bg_logo"></div>
-            <div class="sale_bg_title">销售转化</div>
-          </div>
-          <div class="box sale">
-            <div class="sale_logo"></div>
-            <div class="sale_title">销售转化</div>
-            <div class="sale_li">|</div>
-            <div class="all_cont">· 全链条商机管理，用户线索流程清晰，高效流转 ·</div>
-            <div class="all_cont">· 全场景交易平台，线上线下一体化把握每一条商机 ·</div>
-            <div class="all_cont">· 全方位售后服务，延长客户生命周期、提高复购率 ·</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="firstPage" class="page section">
-      <div class="Title">
-        <div class="text animate__animated">解决方案</div>
-        <div class="title animate__animated">满足企业全方位需求</div>
-      </div>
-      <div class="selection">
-        <div class="selection_item animate__animated">
-          <div class="selection_item_contain">
-            <div class="contain_bg_01">
-              <span class="title">基础版</span>
-            </div>
-            <div class="bg1_text">
-              <div class="text_contain">
-                <div class="bg1_contain" v-for="(item, id) in foundationList" :key="id">
-                  <div class="square_icon"></div>
-                  <div v-cloak>{{item}}</div>
+                    <div class="nav_link" ref="nav_link_item">
+                        <div class="nav_link_item"></div>
+                    </div>
                 </div>
-              </div>
-<!--              <div v-cloak style="width: 100%;">-->
-<!--                ￥<span style="font-size: 40px; font-weight: bold;">26800</span>/年-->
-<!--              </div>-->
-              <!--                            <div v-if="userInfo && userInfo.userIdentity === 3" class="select_btn_login">已登录</div>-->
-              <div class="select_btn" @click="selectionQus">查看解决方案</div>
-            </div>
-          </div>
-        </div>
-        <div class="selection_item animate__animated">
-          <div class="selection_item_contain">
-            <div class="contain_bg_02">
-              <span class="title" style="margin-left: -36px;">高级版</span>
-            </div>
-            <div class="bg1_text">
-              <div style="width: 100%">
-                <div class="text_contain">
-                  <div class="bg1_contain" v-for="(item, id) in customizationList" :key="id">
-                    <div class="square_icon"></div>
-                    <div v-cloak>{{item}}</div>
-                  </div>
+                <div style="display: flex;justify-content: center;align-items: center">
+                    <div class="iphone">
+                        <div></div>
+                        <div>153-3889-7365</div>
+                    </div>
+                    <div v-if="userInfo && userInfo.userIdentity === 3 && isPC" v-cloak class="username">
+                        <el-popover placement="bottom" width="50" trigger="hover" v-if="isPC">
+                            <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
+                                <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
+                                <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
+                                <a class="a_cm" href="javascript:void(0);" @click="userLogOut()">退出登录</a>
+                            </div>
+                            <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 class="H5_username" @click="hideAction">
+                            <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw" />
+                        </div>
+                        <div style="color: #FF5B00;font-size: 3.6vw;margin: 0 3.6vw;">菜单</div>
+                        <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 3.2vw;height: 3.2vw" />
+                        <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 3.2vw;height: 3.2vw" />
+                    </div>
+                    <div class="login_regist" v-if="!isPC && !userInfo">
+                        <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>
                 </div>
-              </div>
-              <div class="select_btn" @click="selectionQus">查看解决方案</div>
             </div>
-          </div>
         </div>
-        <div class="selection_item animate__animated">
-          <div class="selection_item_contain">
-            <div class="contain_bg_03">
-              <span class="title" style="margin-left: -36px;">战略版</span>
-            </div>
-            <div class="bg1_text">
-              <div style="width: 100%">
-                <div class="text_contain">
-                  <div class="bg1_contain" v-for="(item, id) in caseList" :key="id">
-                    <div class="square_icon"></div>
-                    <div v-cloak>{{item}}</div>
-                  </div>
-                </div>
-              </div>
-              <div class="select_btn" @click="selectionQus">查看解决方案</div>
-            </div>
-          </div>
+        <div class="text_info" v-if="!showContent" style="background: #fff;">
+            <div class="text_info_contain" v-html="JSON.parse(localStorage.getItem('text_info_from')).text"></div>
+            <!-- 底部区域 end -->
+            <template th:replace="components/footer" v-if="isPC"></template>
+            <template th:replace="components/foot-link" v-if="isPC"></template>
         </div>
-      </div>
+        <!--  抽屉  -->
+        <el-drawer :visible.sync="drawer" v-if="!isPC">
+            <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
+        </el-drawer>
+        <!--    底部选项   -->
+        <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
+        <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
     </div>
-    <div id="secondPage" class="page section">
-      <div class="Title">
-        <div class="text animate__animated">基础运营产品</div>
-        <div class="title animate__animated">使企业走向数字化的基石</div>
-      </div>
-      <div class="operationa">
-        <div class="operationa_contain">
-          <div class="bg1 animate__animated" v-show="isStore"></div>
-          <div class="bg2 animate__animated" v-show="isStore"></div>
-          <div class="bg3" v-show="isAthor"></div>
-          <div class="bg4" v-show="isAthor"></div>
-          <div class="online_store" v-show="isStore">
-            <div class="online_logo animate__animated"></div>
-            <div class="online_title">在线商城</div>
-          </div>
-          <div class="online" v-show="isAthor" @click="changeModeAuthor">
-            <div class="online_logo"></div>
-            <div class="online_title">在线商城</div>
-          </div>
-          <div class="author" @click="changeModeAuthor" v-show="isStore">
-            <div class="author_title">正品认证通</div>
-            <div class="author_logo"></div>
-          </div>
-          <div class="author_active" v-show="isAthor">
-            <div class="online_logo animate__animated"></div>
-            <div class="online_title" style="color: white">正品认证通</div>
-          </div>
-          <div class="contain" v-show="isStore">
-            <div class="contain_logo animate__animated"></div>
-            <div class="contain_list" v-cloak>
-              <div class="list_item" v-for="item in contain_list" :key="item.id">
-                <div></div>
-                <div style="font-weight: bold;font-size: 20px;">{{item.title}}</div>
-                <div style="font-size: 16px;text-align: center;color: #666666; height: 15px;">{{item.content}}</div>
-              </div>
-            </div>
-          </div>
-          <div class="athor_contain" v-show="isAthor">
-            <div class="athor_contain_logo animate__animated"></div>
-            <div class="athor_contain_list" v-cloak>
-              <div class="list_item" v-for="item in athor_contain_list" :key="item.id">
-                <div class="list_item_logo"></div>
-                <div class="text_contain">
-                  <div class="text_contain_item">{{item.title}}</div>
-                  <div class="text_contain_item2"></div>
-                  <div class="text_contain_item3">{{item.content}}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="thirdPage" class="page section">
-      <div class="Title">
-        <div class="text animate__animated">场景营销工具</div>
-        <div class="title animate__animated">多样化工具，全方位助力您的企业目标</div>
-      </div>
-      <div class="pageInner">
-        <div class="container" v-cloak>
-          <div class="thirdPage_container_contant">
-            <div class="container_title" ref="container_title_1">引流获客</div>
-            <div class="container_title" ref="container_title_2">潜客运营</div>
-            <div class="container_title" ref="container_title_3">销售转化</div>
-          </div>
-          <div class="container_item" v-for="(item, index) in ScenarioList" :key="index" @mouseleave="opacityTitle">
-            <div class="container_item_active" v-for="i in item.contant" :key="i.id" @mouseenter="mouseTitle(index)">
-              <div class="container_item_hover animate__animated" v-if="i.id % 2 !==0">
-                <div class="item_title">{{i.title}}</div>
-                <div class="item_contant">{{i.contant}}</div>
-                <div class="item_logo_box">
-                  <div class="item_logo" :id=`item_logo_${i.id}`></div>
-                </div>
-                <div class="item_title_p">{{i.title}}</div>
-              </div>
-              <div class="container_item_hover2 animate__animated" v-else>
-                <div class="item_title">{{i.title}}</div>
-                <div class="item_contant">{{i.contant}}</div>
-                <div class="item_logo_box">
-                  <div class="item_logo" :id=`item_logo_${i.id}`></div>
-                </div>
-                <div class="item_title_p">{{i.title}}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="fourPage" class="page section" style="background: #fff;">
-      <div class="Title">
-        <div class="text animate__animated">成功案例</div>
-        <div class="title animate__animated">了解已合作品牌的真实推广案例，借鉴成功经验，助力有效推广，实现商业目标</div>
-      </div>
-      <div style="display: flex;justify-content: center;align-items: center;margin-top: 10vh;">
-        <div class="pageInner_contain">
-          <div class="nextChange" :class="isActiveNext ? 'isActiveNext' : ''" @click="nextPageCar">
-            <</div>
-          <el-carousel indicator-position="outside" ref="carousel" height="30vw" :interval="4000">
-            <el-carousel-item v-for="item in el_carousel_list" :key="item.id">
-              <div class="four_logo_1 animate__animated">
-                <el-image fit="cover" :src="item.bg" style="width: 100%; height: 100%;"></el-image>
-              </div>
-              <div class="logo_text animate__animated">
-                <div class="logo_title">{{item.title}}</div>
-                <div class="analysis" v-html="item.content"></div>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
-          <div class="nextChange" :class="isActiveNext ? '' : 'isActiveNext'" @click="prePageCar">></div>
-        </div>
-      </div>
-    </div>
-    <div id="fivePage" class="page section">
-      <div class="Title" style="color: white">
-        <div style="color: white" class="text animate__animated">关于采美</div>
-        <div class="title animate__animated">了解采美，合作共赢</div>
-      </div>
-      <div class="inner_contain">
-        <div class="inner">
-          <div class="caimei_introduction animate__animated">
-            采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台，其核心资产包括采购 信息中心，媒体矩阵，数字运营以及线上交易和 供应链管理软件，建立了一个从信息引流到数字 运营到交易结算一体化平台，站外引流站内运营，采购转化的闭环生态，采美平台以创造客户价 值为核心，借助数字化营销的优 势，赋能美业供应链上下游企业，共同打造一站式美业双线融合的供应链新生态。
-          </div>
-          <div class="caimei_report" v-cloak>
-            <div class="report_item" v-for="item in report_list" :key="item.id">
-              <div class="report_logo animate__animated">
-                <span class="animate__animated">{{item.contant}}</span>
-              </div>
-              <div class="report_title animate__animated">
-                {{item.title}}
-              </div>
-              <div class="report_line">
-                <div class="box1 card4"></div>
-                <div class="container">
-                  <div class="box">
-                    <span style="--i:1"></span>
-                    <span style="--i:2"></span>
-                    <span style="--i:3"></span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="sixPage" class="page section" style="background: #fff">
-      <div class="Title" style="background: #fff">
-        <div class="text animate__animated">增长社区</div>
-        <div class="title animate__animated">数十年资深美业运营经验，教你快速成长</div>
-      </div>
-      <div style="display:flex; justify-content: center;align-items: center;background: #fff;">
-        <div class="community">
-          <div class="community_video">
-            <div class="community_title">美业企谈</div>
-            <div class="community_list" v-cloak>
-              <div class="video_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_video_list" :key="item.id" @click="playerOn(item.video)">
-                <div class="video_list_item_content">
-                  <div class="player_bg">
-                    <el-image style="width: 50px; height: 50px" src="/img/supplier-login/player.png" fit="contain"></el-image>
-                  </div>
-                  <div class="video_player">
-                    <el-image :src="item.bg" fit="contain"></el-image>
-                  </div>
-                  <div class="video_title">{{item.title | textSubString(45)}}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="community_article">
-            <div class="community_title">干货知识</div>
-            <div class="community_list" v-cloak>
-              <div class="article_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_article_list" :key="item.id" @click="textInfo(item.id)">
-                <div class="article_list_item_content">
-                  <div class="article_bg">
-                    <el-image :src="item.bg" fit="cover" style="width: 100%; height: 100%;"></el-image>
-                  </div>
-                  <div class="article_text">
-                    <div class="text_title">{{item.title | textSubString(12)}}</div>
-                    <div style="padding: 0 4%;">{{item.content | textSubString(50)}}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="sevenPage" class="page" style="display: flex;
-                    flex-direction: column;
-                    align-items: end;
-                    justify-content: end;background: #fff;height: auto;">
-      <!-- 底部区域 end -->
-      <template th:replace="components/footer"></template>
-      <template th:replace="components/foot-link"></template>
-    </div>
-    <div class="cm_video_player" @click="playerOff" ref="Myplayer">
-      <video controls ref="cm_player" width="60%">
-        <source type="video/mp4">
-        您的浏览器不支持Video标签。
-      </video>
-    </div>
-  </div>
-  <div class="text_info" v-else style="background: #fff;">
-    <div class="text_info_contain" v-html="JSON.parse(localStorage.getItem('text_info_from')).text"></div>
-    <!-- 底部区域 end -->
-    <template th:replace="components/footer"></template>
-    <template th:replace="components/foot-link"></template>
-
-  </div>
-</div>
 
 
-<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.6.0.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
-<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery-confirm.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/lazyload.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/supplier-login/text_info.js(v=${version})}"></script>
+    <script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
+    <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
+    <!--<script charset="utf-8" type="text/javascript" src="/lib/lazyload.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/supplier-login/text_info.js(v=${version})}"></script>
 </body>
-</html>
+
+</html>