updated

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

@@ -1,7 +1,14 @@
+html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 7vh;
+}
 body{
     width: 100vw;
     height: 100vh;
 }
+#scrollTop {
+    display: none !important;
+}
 [v-cloak] {
     opacity: 0;
 }
@@ -23,9 +30,6 @@ body{
     line-height: 30px;
     color: #777;
 }
-.text_info .text_info_contain p:nth-child(1) {
-    text-align: center;
-}
 .username {
     color: #FF5B00;
     position: relative;
@@ -124,7 +128,7 @@ body{
 
 .slide_icon .slide_icon_item .tooltip_1{
     width: 170px;
-    height: 110px;
+    height: 64px;
     padding: 10px;
     text-align: center;
     display: none;
@@ -228,7 +232,7 @@ body{
     display: flex;
     justify-content: center;
     align-items: end;
-    width: 7vw;
+    width: 6vw;
     height: 100%;
     transition: .3s;
 }
@@ -242,7 +246,7 @@ body{
 .header_link .header_link_itme {
     cursor: pointer;
     font-size: 0.84vw;
-    width: 7vw;
+    width: 6vw;
     height: 100%;
     display: flex;
     justify-content: center;
@@ -257,22 +261,22 @@ body{
     left: 0vw !important;
 }
 .header_link_itme:nth-child(2):hover ~ .nav_link {
-    left: 7vw !important;
+    left: 6vw !important;
 }
 .header_link_itme:nth-child(3):hover ~ .nav_link {
-    left: 14vw !important;
+    left: 12vw !important;
 }
 .header_link_itme:nth-child(4):hover ~ .nav_link {
-    left: 21vw !important;
+    left: 18vw !important;
 }
 .header_link_itme:nth-child(5):hover ~ .nav_link {
-    left: 28vw !important;
+    left: 24vw !important;
 }
 .header_link_itme:nth-child(6):hover ~ .nav_link {
-    left: 35vw !important;
+    left: 30vw !important;
 }
 .header_link_itme:nth-child(7):hover ~ .nav_link {
-    left: 42vw !important;
+    left: 36vw !important;
 }
 .header_link_itme:nth-child(8):hover ~ .nav_link {
     left: 49vw !important;
@@ -288,13 +292,19 @@ body{
     align-items: center;
     justify-content: center;
 }
-.login_header_container .iphone div{
-    width: 100%;
-    height: 50%;
-    background: url("/img/supplier-login/phone_new.png") no-repeat;
+.login_header_container .iphone div:nth-child(1){
+    width: 36px;
+    height: 36px;
+    background: url("/img/supplier-login/iPhone.png") no-repeat;
     background-size: contain;
     background-position: center;
 }
+.login_header_container .iphone div:nth-child(2) {
+    color: #FF5B00;
+    font-size: 18px;
+    margin-left: 5px;
+    font-weight: bold;
+}
 .login_header_container .login_regist {
     display: flex;
     justify-content: space-between;
@@ -312,33 +322,29 @@ body{
 #login_content {
     position: relative;
     width: 100vw;
-    height: 100vh;
-    overflow: hidden;
 }
 #fullpage {
-    scroll-behavior: smooth;
     width: 100vw;
-    scrollbar-width: none; /* Firefox 兼容*/
-    -ms-overflow-style: none; /* IE 10+ 兼容*/
     position: absolute;
     left: 0;
     top: 0;
-    transition: all 0.8s ease;
     height: 800vh;
-}
-::-webkit-scrollbar {
-    display: none; /* Chrome Safari 兼容*/
+    scroll-behavior: smooth;
+    transition: all 0.8s ease;
 }
 #fullpage .page {
     width: 100vw;
     height: 100vh;
-    padding-top: 7vh;
     scroll-snap-align: start;
     box-sizing: border-box;
     overflow: hidden;
 }
+#fullpage #zeroPage {
+    height: 140vh;
+    padding-top: 7vh;
+}
 #zeroPage .el-carousel__container {
-    height: 40vh;
+    height: 510px;
 }
 .el-carousel__item:nth-child(1) {
     display: flex;
@@ -355,15 +361,15 @@ body{
     align-items: center;
 }
 #zeroPage .banner01 .left {
-    height: 45%;
-    width: 50%;
+    height: 35%;
+    width: 40%;
     background: url(/img/supplier-login/01-banner/banner-02-left.png) no-repeat;
     background-size: contain;
     background-position: right;
 }
 #zeroPage .banner01 .right {
-    height: 70%;
-    width: 40%;
+    height: 63%;
+    width: 24%;
     background: url(/img/supplier-login/01-banner/banner-01-right.png) no-repeat;
     background-size: contain;
 }
@@ -418,14 +424,15 @@ body{
     justify-content: center;
     align-items: center;
     width: 100vw;
-    height: 35vh;
+    height: 45vh;
     box-sizing: border-box;
+    margin-top: 5vh;
 }
 .server .server_1,
 .server .server_2,
 .server .server_3 {
     height: 100%;
-    width: 15vw;
+    width: 400px;
     position: relative;
 }
 #zeroPage .server .box {
@@ -447,38 +454,39 @@ body{
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    font-size: 1.1vw;
-    padding: 4.5vw 0;
+    font-size: 18px;
+    padding: 60px;
     box-sizing: border-box;
 }
 #zeroPage .server .operate,
 #zeroPage .server .tourist,
 #zeroPage .server .sale {
-    width: 15vw;
+    width: 400px;
     height: 100%;
     transition: .5s;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    font-size: 1.1vw;
-    padding: 10px;
+    font-size: 18px;
+    padding: 30px;
     box-sizing: border-box;
     background: linear-gradient(0deg, #FF5B00, #FF9300);
     -webkit-transform: rotateY(-180deg);
     transform: rotateY(-180deg);
     color: #fff;
+    white-space: nowrap;
 }
 #zeroPage .server .tourist_logo {
-    width: 6vw;
-    height: 6vw;
+    width: 100px;
+    height: 100px;
     background: url("/img/supplier-login/cycle/-11.png") no-repeat;
     background-size: cover;
 }
 #zeroPage .server .tourist_bg_logo {
     background: url("/img/supplier-login/cycle/1.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 160px;
+    height: 160px;
     background-size: cover;
 }
 #zeroPage .server .tourist_bg_title {
@@ -513,46 +521,34 @@ body{
 }
 #zeroPage .server .operate_logo {
     background: url("/img/supplier-login/cycle/-22.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 100px;
+    height: 100px;
     background-size: cover;
 }
 #zeroPage .server .operate_bg_logo {
     background: url("/img/supplier-login/cycle/2.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 160px;
+    height: 160px;
     background-size: cover;
 }
 #zeroPage .server .operate_bg_title {
     color: black;
 }
 #zeroPage .server .all_cont {
-    font-size: 0.8vw;
+    font-size: 16px;
     box-sizing: border-box;
     text-align: center;
 }
-#zeroPage .server .operate_bg {
-    width: 15vw;
-    height: 100%;
-    transition: .5s;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 1.1vw;
-    padding: 4vw 0;
-    box-sizing: border-box;
-}
 #zeroPage .server .sale_logo {
     background: url("/img/supplier-login/cycle/-33.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 100px;
+    height: 100px;
     background-size: cover;
 }
 #zeroPage .server .sale_bg_logo {
     background: url("/img/supplier-login/cycle/3.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 160px;
+    height: 160px;
     background-size: cover;
 }
 #zeroPage .server .sale_bg_title {
@@ -568,7 +564,6 @@ body{
     align-items: center;
 }
 #firstPage .selection .selection_item{
-    width: 22vw;
     height: 65vh;
     padding-top: 2vh;
     box-sizing: border-box;
@@ -590,8 +585,8 @@ body{
     background-color: #fff;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_01 {
-    width: 100%;
-    height: 11vh;
+    width: 392px;
+    height: 120px;
     background: url("/img/supplier-login/selection/select_01.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -602,8 +597,8 @@ body{
     font-size: 2vw;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_02 {
-    width: 100%;
-    height: 11vh;
+    width: 392px;
+    height: 120px;
     background: url("/img/supplier-login/selection/select_02.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -614,8 +609,8 @@ body{
     font-size: 2vw;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_03 {
-    width: 100%;
-    height: 11vh;
+    width: 392px;
+    height: 120px;
     background: url("/img/supplier-login/selection/select_03.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -627,7 +622,7 @@ body{
 }
 #firstPage .selection_item_contain .bg1_text {
     width: 100%;
-    height: 60vh;
+    height: 57vh;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -995,7 +990,7 @@ body{
     width: 100%;
 }
 .pageInner .container {
-    width: 80vw;
+    width: 1200px;
     height: 20vw;
     display: flex;
     justify-content: space-between;
@@ -1072,12 +1067,12 @@ body{
 .container_item .container_item_active .item_contant {
     display: none;
     color: #666666;
-    font-size: 1.2vw;
+    font-size: 18px;
     width: 80%;
 }
 .container_item .container_item_active .item_logo {
-    width: 3vw;
-    height: 3vw;
+    width: 4vw;
+    height: 4vw;
 }
 .container_item .container_item_active .item_logo_box {
     width: 80%;
@@ -1283,13 +1278,13 @@ body{
 }
 #fivePage .inner_contain .inner .caimei_introduction {
     color: white;
-    font-size: 0.8vw;
-    width: 100%;
+    font-size: 18px;
+    width: 1200px;
     height: auto;
     padding: 3vh;
     background-color: rgba(255,255,255, 0.2);
     box-sizing: border-box;
-    line-height: 2vw;
+    line-height: 40px;
 }
 #fivePage .inner_contain .inner .caimei_report {
     width: 90%;
@@ -1363,7 +1358,7 @@ body{
 }
 
 #sixPage .community {
-    width: 70vw;
+    width: 1200px;
     height: 70vh;
     display: flex;
     justify-content: space-between;
@@ -1409,7 +1404,6 @@ body{
     align-items: center;
     transition: .2s;
     cursor: pointer;
-    overflow: hidden;
 }
 .community_list .article_list_item {
     width: 24%;
@@ -1444,13 +1438,13 @@ body{
     height: 60%;
     box-sizing: border-box;
     left: 0;
-    top: -100%;
+    top: 0;
     background: rgba(24, 23, 23, 0.4);
-    display: flex;
+    display: none;
     justify-content: center;
     align-items: center;
     transition: .2s;
-    z-index: 111;
+    z-index: 11;
 }
 .video_list_item_content .video_player {
     width: 100%;
@@ -1468,12 +1462,12 @@ body{
     width: 100%;
     height: 40%;
     box-sizing: border-box;
-    font-size: 0.8vw;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
-    line-height: 1.5vw;
-    padding: 6%;
+    line-height: 22px;
+    padding: 20px
 }
 .article_list_item_content .article_text {
     width: 100%;
@@ -1498,34 +1492,36 @@ body{
     padding: 0 0 5px 0;
 }
 .video_list_item:nth-child(1):hover .video_list_item_content {
-    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
     color: #FF5B00;
 }
 .video_list_item:nth-child(1):hover .player_bg {
-    top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(2):hover .player_bg {
-    top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(3):hover .player_bg {
     top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(4):hover .player_bg {
     top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(2):hover {
     padding: 0 0 5px 0;
 }
 .video_list_item:nth-child(2):hover .video_list_item_content {
-    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
-    color: #FF5B00;
+    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
+    color: #FF5B00 !important;
 }
 .video_list_item:nth-child(3):hover {
     padding: 0 0 5px 0;
 }
 .video_list_item:nth-child(3):hover .video_list_item_content {
     box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
-    color: #FF5B00;
+    color: #FF5B00 !important;
 }
 .video_list_item:nth-child(4):hover {
     padding: 0 0 5px 0;

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

@@ -1,7 +1,14 @@
+html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 7vh;
+}
 body{
     width: 100vw;
     height: 100vh;
 }
+#scrollTop {
+    display: none !important;
+}
 [v-cloak] {
     opacity: 0;
 }
@@ -23,9 +30,6 @@ body{
     line-height: 30px;
     color: #777;
 }
-.text_info .text_info_contain p:nth-child(1) {
-    text-align: center;
-}
 .username {
     color: #FF5B00;
     position: relative;
@@ -124,7 +128,7 @@ body{
 
 .slide_icon .slide_icon_item .tooltip_1{
     width: 170px;
-    height: 110px;
+    height: 64px;
     padding: 10px;
     text-align: center;
     display: none;
@@ -223,12 +227,12 @@ body{
 }
 .header_link .nav_link {
     position: absolute;
-    left: 42vw;
+    left: 36vw;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: end;
-    width: 7vw;
+    width: 6vw;
     height: 100%;
     transition: .3s;
 }
@@ -242,7 +246,7 @@ body{
 .header_link .header_link_itme {
     cursor: pointer;
     font-size: 0.84vw;
-    width: 7vw;
+    width: 6vw;
     height: 100%;
     display: flex;
     justify-content: center;
@@ -257,22 +261,22 @@ body{
     left: 0vw !important;
 }
 .header_link_itme:nth-child(2):hover ~ .nav_link {
-    left: 7vw !important;
+    left: 6vw !important;
 }
 .header_link_itme:nth-child(3):hover ~ .nav_link {
-    left: 14vw !important;
+    left: 12vw !important;
 }
 .header_link_itme:nth-child(4):hover ~ .nav_link {
-    left: 21vw !important;
+    left: 18vw !important;
 }
 .header_link_itme:nth-child(5):hover ~ .nav_link {
-    left: 28vw !important;
+    left: 24vw !important;
 }
 .header_link_itme:nth-child(6):hover ~ .nav_link {
-    left: 35vw !important;
+    left: 30vw !important;
 }
 .header_link_itme:nth-child(7):hover ~ .nav_link {
-    left: 42vw !important;
+    left: 36vw !important;
 }
 .header_link_itme:nth-child(8):hover ~ .nav_link {
     left: 49vw !important;
@@ -288,13 +292,19 @@ body{
     align-items: center;
     justify-content: center;
 }
-.login_header_container .iphone div{
-    width: 100%;
-    height: 50%;
-    background: url("/img/supplier-login/phone_new.png") no-repeat;
+.login_header_container .iphone div:nth-child(1){
+    width: 36px;
+    height: 36px;
+    background: url("/img/supplier-login/iPhone.png") no-repeat;
     background-size: contain;
     background-position: center;
 }
+.login_header_container .iphone div:nth-child(2) {
+    color: #FF5B00;
+    font-size: 18px;
+    margin-left: 5px;
+    font-weight: bold;
+}
 .login_header_container .login_regist {
     display: flex;
     justify-content: space-between;
@@ -312,33 +322,30 @@ body{
 #login_content {
     position: relative;
     width: 100vw;
-    height: 100vh;
-    overflow: hidden;
+    height: 100%;
 }
 #fullpage {
-    scroll-behavior: smooth;
     width: 100vw;
-    scrollbar-width: none; /* Firefox 兼容*/
-    -ms-overflow-style: none; /* IE 10+ 兼容*/
     position: absolute;
     left: 0;
     top: 0;
-    transition: all 0.8s ease;
     height: 800vh;
-}
-::-webkit-scrollbar {
-    display: none; /* Chrome Safari 兼容*/
+    scroll-behavior: smooth;
+    transition: all 0.8s ease;
 }
 #fullpage .page {
     width: 100vw;
     height: 100vh;
-    padding-top: 7vh;
     scroll-snap-align: start;
     box-sizing: border-box;
     overflow: hidden;
 }
+#fullpage #zeroPage {
+    height: 140vh;
+    padding-top: 7vh;
+}
 #zeroPage .el-carousel__container {
-    height: 40vh;
+    height: 510px;
 }
 .el-carousel__item:nth-child(1) {
     display: flex;
@@ -355,15 +362,15 @@ body{
     align-items: center;
 }
 #zeroPage .banner01 .left {
-    height: 45%;
-    width: 50%;
+    height: 35%;
+    width: 40%;
     background: url(/img/supplier-login/01-banner/banner-02-left.png) no-repeat;
     background-size: contain;
     background-position: right;
 }
 #zeroPage .banner01 .right {
-    height: 70%;
-    width: 40%;
+    height: 63%;
+    width: 24%;
     background: url(/img/supplier-login/01-banner/banner-01-right.png) no-repeat;
     background-size: contain;
 }
@@ -418,14 +425,15 @@ body{
     justify-content: center;
     align-items: center;
     width: 100vw;
-    height: 35vh;
+    height: 45vh;
     box-sizing: border-box;
+    margin-top: 5vh;
 }
 .server .server_1,
 .server .server_2,
 .server .server_3 {
     height: 100%;
-    width: 15vw;
+    width: 400px;
     position: relative;
 }
 #zeroPage .server .box {
@@ -447,38 +455,39 @@ body{
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    font-size: 1.1vw;
-    padding: 4.5vw 0;
+    font-size: 18px;
+    padding: 60px;
     box-sizing: border-box;
 }
 #zeroPage .server .operate,
 #zeroPage .server .tourist,
 #zeroPage .server .sale {
-    width: 15vw;
+    width: 400px;
     height: 100%;
     transition: .5s;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    font-size: 1.1vw;
-    padding: 10px;
+    font-size: 18px;
+    padding: 30px;
     box-sizing: border-box;
     background: linear-gradient(0deg, #FF5B00, #FF9300);
     -webkit-transform: rotateY(-180deg);
     transform: rotateY(-180deg);
     color: #fff;
+    white-space: nowrap;
 }
 #zeroPage .server .tourist_logo {
-    width: 6vw;
-    height: 6vw;
+    width: 100px;
+    height: 100px;
     background: url("/img/supplier-login/cycle/-11.png") no-repeat;
     background-size: cover;
 }
 #zeroPage .server .tourist_bg_logo {
     background: url("/img/supplier-login/cycle/1.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 160px;
+    height: 160px;
     background-size: cover;
 }
 #zeroPage .server .tourist_bg_title {
@@ -513,46 +522,34 @@ body{
 }
 #zeroPage .server .operate_logo {
     background: url("/img/supplier-login/cycle/-22.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 100px;
+    height: 100px;
     background-size: cover;
 }
 #zeroPage .server .operate_bg_logo {
     background: url("/img/supplier-login/cycle/2.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 160px;
+    height: 160px;
     background-size: cover;
 }
 #zeroPage .server .operate_bg_title {
     color: black;
 }
 #zeroPage .server .all_cont {
-    font-size: 0.8vw;
+    font-size: 16px;
     box-sizing: border-box;
     text-align: center;
 }
-#zeroPage .server .operate_bg {
-    width: 15vw;
-    height: 100%;
-    transition: .5s;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-    font-size: 1.1vw;
-    padding: 4vw 0;
-    box-sizing: border-box;
-}
 #zeroPage .server .sale_logo {
     background: url("/img/supplier-login/cycle/-33.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 100px;
+    height: 100px;
     background-size: cover;
 }
 #zeroPage .server .sale_bg_logo {
     background: url("/img/supplier-login/cycle/3.png") no-repeat;
-    width: 6vw;
-    height: 6vw;
+    width: 160px;
+    height: 160px;
     background-size: cover;
 }
 #zeroPage .server .sale_bg_title {
@@ -568,7 +565,6 @@ body{
     align-items: center;
 }
 #firstPage .selection .selection_item{
-    width: 22vw;
     height: 65vh;
     padding-top: 2vh;
     box-sizing: border-box;
@@ -590,8 +586,8 @@ body{
     background-color: #fff;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_01 {
-    width: 100%;
-    height: 11vh;
+    width: 392px;
+    height: 120px;
     background: url("/img/supplier-login/selection/select_01.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -602,8 +598,8 @@ body{
     font-size: 2vw;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_02 {
-    width: 100%;
-    height: 11vh;
+    width: 392px;
+    height: 120px;
     background: url("/img/supplier-login/selection/select_02.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -614,8 +610,8 @@ body{
     font-size: 2vw;
 }
 #firstPage .selection_item .selection_item_contain .contain_bg_03 {
-    width: 100%;
-    height: 11vh;
+    width: 392px;
+    height: 120px;
     background: url("/img/supplier-login/selection/select_03.png") no-repeat;
     background-size: 100%;
     display: flex;
@@ -627,7 +623,7 @@ body{
 }
 #firstPage .selection_item_contain .bg1_text {
     width: 100%;
-    height: 60vh;
+    height: 57vh;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -995,7 +991,7 @@ body{
     width: 100%;
 }
 .pageInner .container {
-    width: 80vw;
+    width: 1200px;
     height: 20vw;
     display: flex;
     justify-content: space-between;
@@ -1072,12 +1068,12 @@ body{
 .container_item .container_item_active .item_contant {
     display: none;
     color: #666666;
-    font-size: 1.2vw;
+    font-size: 18px;
     width: 80%;
 }
 .container_item .container_item_active .item_logo {
-    width: 3vw;
-    height: 3vw;
+    width: 4vw;
+    height: 4vw;
 }
 .container_item .container_item_active .item_logo_box {
     width: 80%;
@@ -1283,13 +1279,13 @@ body{
 }
 #fivePage .inner_contain .inner .caimei_introduction {
     color: white;
-    font-size: 0.8vw;
-    width: 100%;
+    font-size: 18px;
+    width: 1200px;
     height: auto;
     padding: 3vh;
     background-color: rgba(255,255,255, 0.2);
     box-sizing: border-box;
-    line-height: 2vw;
+    line-height: 40px;
 }
 #fivePage .inner_contain .inner .caimei_report {
     width: 90%;
@@ -1363,7 +1359,7 @@ body{
 }
 
 #sixPage .community {
-    width: 70vw;
+    width: 1200px;
     height: 70vh;
     display: flex;
     justify-content: space-between;
@@ -1409,7 +1405,6 @@ body{
     align-items: center;
     transition: .2s;
     cursor: pointer;
-    overflow: hidden;
 }
 .community_list .article_list_item {
     width: 24%;
@@ -1444,13 +1439,13 @@ body{
     height: 60%;
     box-sizing: border-box;
     left: 0;
-    top: -100%;
+    top: 0;
     background: rgba(24, 23, 23, 0.4);
-    display: flex;
+    display: none;
     justify-content: center;
     align-items: center;
     transition: .2s;
-    z-index: 111;
+    z-index: 11;
 }
 .video_list_item_content .video_player {
     width: 100%;
@@ -1468,12 +1463,12 @@ body{
     width: 100%;
     height: 40%;
     box-sizing: border-box;
-    font-size: 0.8vw;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
-    line-height: 1.5vw;
-    padding: 6%;
+    line-height: 22px;
+    padding: 20px
 }
 .article_list_item_content .article_text {
     width: 100%;
@@ -1498,34 +1493,36 @@ body{
     padding: 0 0 5px 0;
 }
 .video_list_item:nth-child(1):hover .video_list_item_content {
-    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
     color: #FF5B00;
 }
 .video_list_item:nth-child(1):hover .player_bg {
-    top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(2):hover .player_bg {
-    top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(3):hover .player_bg {
     top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(4):hover .player_bg {
     top: 0;
+    display: flex;
 }
 .video_list_item:nth-child(2):hover {
     padding: 0 0 5px 0;
 }
 .video_list_item:nth-child(2):hover .video_list_item_content {
-    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
-    color: #FF5B00;
+    box-shadow: 0px 6px 35px 0px rgba(255,157,102,0.12);
+    color: #FF5B00 !important;
 }
 .video_list_item:nth-child(3):hover {
     padding: 0 0 5px 0;
 }
 .video_list_item:nth-child(3):hover .video_list_item_content {
     box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
-    color: #FF5B00;
+    color: #FF5B00 !important;
 }
 .video_list_item:nth-child(4):hover {
     padding: 0 0 5px 0;

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

@@ -167,7 +167,7 @@ new Vue({
             },{
                 id: 2,
                 title: '品牌展露',
-                content: '彰显品牌示例，提升企业品牌价值',
+                content: '彰显品牌实力',
             },{
                 id: 3,
                 title: '商品SKU管理',
@@ -208,13 +208,14 @@ new Vue({
     },
     created() {},
     mounted() {
-        this.getPageSnap()
+        // this.getPageSnap()
+        this.goLinkActive()
     },
     filters: {
         textSubString(val, index) {
             if (val.length > index) {
                 let value = val.substring(0, index)
-                return value + '......'
+                return value + '...'
             }
             return val
         }
@@ -228,6 +229,20 @@ new Vue({
                 fullPage.addEventListener('mousewheel', (e) => this.scrollChange(e))
             }
         },
+        goLinkActive() {
+            const sections = document.querySelectorAll('.section')
+            const nav_link_item = this.$refs.nav_link_item
+            sections.forEach((item, index) => {
+                const observer = new IntersectionObserver((mutation) => {
+                    const status = mutation[0].isIntersecting
+                    if (status) {
+                        this.activeLinkId = index
+                        nav_link_item.style.left = index * 6 +'vw'
+                    }
+                })
+                observer.observe(item)
+            })
+        },
         // 滚动函数
         scrollChange(e) {
             if (this.showContent) {
@@ -252,33 +267,25 @@ new Vue({
                 this.activeId = this.activeLinkId
             }, 800)
             const nav_link_item = this.$refs.nav_link_item
-            const fullPage = this.$refs.fullPage
             if (this.activeLinkId >= 0 && this.activeLinkId<=6) {
-                nav_link_item.style.left = this.activeLinkId  * 7 +'vw'
+                nav_link_item.style.left = this.activeLinkId  * 6 +'vw'
             } else if(this.activeLinkId < 0) {
                 this.activeLinkId = 0
                 nav_link_item.style.left = '0'
             } else if(this.activeLinkId > 6) {
                 this.activeLinkId = 7
-                nav_link_item.style.left = '42vw'
+                nav_link_item.style.left = '36vw'
             }
-            fullPage.style.top = -this.activeLinkId * 100 + 'vh'
         },
         // 切换链接跳转
         handlerNav(options) {
             const nav_link_item = this.$refs.nav_link_item
             this.activeLinkId = options.id
-            nav_link_item.style.left = options.id * 7 +'vw'
+            nav_link_item.style.left = options.id * 6 +'vw'
             setTimeout(() => {
                 this.showContent = true
             }, 100)
-            setTimeout(() => {
-                const fullPage = this.$refs.fullPage
-                fullPage.style.top = -this.activeLinkId * 100 + 'vh'
-            }, 100)
-            setTimeout(() => {
-                this.activeId = this.activeLinkId
-            }, 800)
+            this.activeId = this.activeLinkId
         },
         // 移入动画
         mouseTitle(e) {

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

@@ -167,7 +167,7 @@ new Vue({
             },{
                 id: 2,
                 title: '品牌展露',
-                content: '彰显品牌示例，提升企业品牌价值',
+                content: '彰显品牌实力',
             },{
                 id: 3,
                 title: '商品SKU管理',
@@ -203,20 +203,20 @@ new Vue({
             },
         ],
         userInfo: JSON.parse(localStorage.getItem('userInfo')) || '',
-        showContent: false,
+        showContent: true,
         textContent: '',
     },
     created() {},
     mounted() {
         // this.getPageSnap()
+        // this.goLinkActive()
         this.showContent = false
-        console.log(this.showContent)
     },
     filters: {
         textSubString(val, index) {
             if (val.length > index) {
                 let value = val.substring(0, index)
-                return value + '......'
+                return value + '...'
             }
             return val
         }
@@ -230,6 +230,22 @@ new Vue({
                 fullPage.addEventListener('mousewheel', (e) => this.scrollChange(e))
             }
         },
+        goLinkActive() {
+            const sections = document.querySelectorAll('.section')
+            const nav_link_item = this.$refs.nav_link_item
+            if (sections) {
+                sections.forEach((item, index) => {
+                    const observer = new IntersectionObserver((mutation) => {
+                        const status = mutation[0].isIntersecting
+                        if (status) {
+                            this.activeLinkId = index
+                            nav_link_item.style.left = index * 6 +'vw'
+                        }
+                    })
+                    observer.observe(item)
+                })
+            }
+        },
         // 滚动函数
         scrollChange(e) {
             if (this.showContent) {
@@ -254,33 +270,26 @@ new Vue({
                 this.activeId = this.activeLinkId
             }, 800)
             const nav_link_item = this.$refs.nav_link_item
-            const fullPage = this.$refs.fullPage
             if (this.activeLinkId >= 0 && this.activeLinkId<=6) {
-                nav_link_item.style.left = this.activeLinkId  * 7 +'vw'
+                nav_link_item.style.left = this.activeLinkId  * 6 +'vw'
             } else if(this.activeLinkId < 0) {
                 this.activeLinkId = 0
                 nav_link_item.style.left = '0'
             } else if(this.activeLinkId > 6) {
                 this.activeLinkId = 7
-                nav_link_item.style.left = '42vw'
+                nav_link_item.style.left = '36vw'
             }
-            fullPage.style.top = -this.activeLinkId * 100 + 'vh'
         },
         // 切换链接跳转
         handlerNav(options) {
             const nav_link_item = this.$refs.nav_link_item
             this.activeLinkId = options.id
-            nav_link_item.style.left = options.id * 7 +'vw'
+            nav_link_item.style.left = options.id * 6 +'vw'
             setTimeout(() => {
                 this.showContent = true
             }, 100)
-            setTimeout(() => {
-                const fullPage = this.$refs.fullPage
-                fullPage.style.top = -this.activeLinkId * 100 + 'vh'
-            }, 100)
-            setTimeout(() => {
-                this.activeId = this.activeLinkId
-            }, 800)
+            this.activeId = this.activeLinkId
+            this.goLinkActive()
         },
         // 移入动画
         mouseTitle(e) {
@@ -362,8 +371,10 @@ new Vue({
         textInfo(id) {
             const fullPage = this.$refs.fullPage
             fullPage.removeEventListener('mousewheel', (e) => this.scrollChange(e))
+            this.activeLinkId = 6
+            const nav_link_item = this.$refs.nav_link_item
+            nav_link_item.style.left = '36vw'
             const textInfoForm = this.community_article_list.filter(item => item.id === id)
-
             this.textContent = textInfoForm[0]
             if(localStorage.getItem('text_info_from')) {
                 localStorage.removeItem('text_info_from')

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

@@ -157,7 +157,7 @@
                 </div>
                 <div class="q_item newSupplierLink" v-if="userIdentity===3 || !loginStatus" @click="goSupplierLink">
                     <div class="bg_supplier"></div>
-                    <a href="javascript:void(0)">商家服务</a>
+                    <a href="javascript:void(0)" style="white-space: nowrap;">供应商服务</a>
                 </div>
             </div>
         </div>

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

@@ -30,21 +30,22 @@
                 <div class="text">美业参谋</div>
             </div>
             <div class="header_link" v-cloak>
-                <a ref="link_item"  @click="handlerNav(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
+                <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">
                     {{item.title}}
                 </a>
-                <a href="https://www.caimei365.com/help/1044.html" target="_blank" style="font-size: 0.84vw;
-                        width: 7vw;
-                        height: 100%;
-                        justify-content: center;
-                        display: flex;
-                        align-items: center;">帮助中心</a>
+<!--                <a href="https://www.caimei365.com/help/1044.html" target="_blank" style="font-size: 0.84vw;-->
+<!--                        width: 7vw;-->
+<!--                        height: 100%;-->
+<!--                        justify-content: center;-->
+<!--                        display: flex;-->
+<!--                        align-items: center;">帮助中心</a>-->
                 <div class="nav_link" ref="nav_link_item" style="">
                     <div class="nav_link_item"></div>
                 </div>
             </div>
             <div class="iphone">
                 <div></div>
+                <div>153-3889-7365</div>
             </div>
             <div v-if="userInfo && userInfo.userIdentity === 3" v-cloak class="username">
                 <el-popover
@@ -70,8 +71,7 @@
             电话联系
             <div class="tooltip tooltip_1" :style="{bottom: activeId !== 0 ? '250px':'180px'}">
                 <div class="day">周一至周五 9:00~1800</div>
-                <div class="phone_number">0755-22907771</div>
-                <div class="phone_number">153-3885-1365</div>
+                <div class="phone_number">153-3889-7365</div>
             </div>
         </div>
         <div class="slide_icon_item slide_icon_qrcode">
@@ -80,11 +80,11 @@
                 <img src="/img/common/qr_code_kefu.png" alt="采美客服">
             </div>
         </div>
-        <a class="slide_icon_item goTop" @click="handlerNav({id: 0})" v-if="activeId !== 0"></a>
+        <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" v-if="activeId === 0">
+            <el-carousel arrow="always" :interval="4000">
                 <el-carousel-item>
                     <div class="banner01">
                         <div class="left animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''"></div>
@@ -95,12 +95,12 @@
                     <div class="banner02"></div>
                 </el-carousel-item>
             </el-carousel>
-            <div class="Title" v-if="activeId === 0">
-                <div class="text animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''">全生命周期陪跑服务</div>
-                <div class="title animate__animated" :class="activeId === 0 ? 'animate__backInRight' : ''">采美，更专业的美业数字化营销服务</div>
+            <div class="Title">
+                <div class="text animate__animated" >全生命周期陪跑服务</div>
+                <div class="title animate__animated" >采美，更专业的美业数字化营销服务</div>
             </div>
-            <div class="server" v-if="activeId === 0">
-                <div class="server_1 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
+            <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>
@@ -113,7 +113,7 @@
                         <div class="all_cont" >· 精准识别全渠道匿名用户线索 ·</div>
                     </div>
                 </div>
-                <div class="server_2 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
+                <div class="server_2 animate__animated" >
                     <div class="box operate_bg">
                         <div class="operate_bg_logo"></div>
                         <div class="operate_bg_title">潜客运营</div>
@@ -127,7 +127,7 @@
                         <div class="all_cont" >· 精准推送内容 ·</div>
                     </div>
                 </div>
-                <div class="server_3 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
+                <div class="server_3 animate__animated" >
                     <div class="box sale_bg">
                         <div class="sale_bg_logo"></div>
                         <div class="sale_bg_title">销售转化</div>
@@ -145,11 +145,11 @@
         </div>
         <div id="firstPage" class="page section" >
             <div class="Title">
-                <div v-if="activeId === 1" class="text animate__animated" :class="activeId === 1 ? 'animate__backInLeft' : ''">解决方案</div>
-                <div v-if="activeId === 1" class="title animate__animated" :class="activeId === 1 ? 'animate__backInRight' : ''">满足企业全方位需求</div>
+                <div class="text animate__animated" >解决方案</div>
+                <div class="title animate__animated" >满足企业全方位需求</div>
             </div>
-            <div class="selection" v-if="activeId === 1">
-                <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+            <div class="selection" >
+                <div class="selection_item animate__animated" >
                     <div class="selection_item_contain">
                         <div class="contain_bg_01">
                             <span class="title">基础版</span>
@@ -169,7 +169,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+                <div class="selection_item animate__animated" >
                     <div class="selection_item_contain">
                         <div class="contain_bg_02">
                             <span class="title" style="margin-left: -36px;">按需定制</span>
@@ -188,7 +188,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+                <div class="selection_item animate__animated" >
                     <div class="selection_item_contain">
                         <div class="contain_bg_03">
                             <span class="title" style="margin-left: -36px;">全案定制</span>
@@ -210,33 +210,33 @@
         </div>
         <div id="secondPage" class="page section" >
             <div class="Title">
-                <div v-if="activeId === 2" class="text animate__animated" :class="activeId === 2 ? 'animate__backInLeft' : ''">基础运营产品</div>
-                <div v-if="activeId === 2" class="title animate__animated" :class="activeId === 2 ? 'animate__backInRight' : ''">使企业走向数字化的基石</div>
+                <div class="text animate__animated" >基础运营产品</div>
+                <div class="title animate__animated">使企业走向数字化的基石</div>
             </div>
-            <div class="operationa" v-if="activeId === 2">
+            <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" v-if="activeId === 2">
-                        <div class="online_logo animate__animated" v-if="activeId === 2"></div>
-                        <div class="online_title" v-if="activeId === 2">在线商城</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" v-if="activeId === 2">
-                        <div class="online_logo" v-if="activeId === 2"></div>
-                        <div class="online_title" v-if="activeId === 2">在线商城</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" v-if="activeId === 2">
+                    <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" v-if="activeId === 2">
+                    <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" v-if="activeId === 2">
-                        <div class="contain_logo animate__animated" :class="activeId === 2 ? 'animate__lightSpeedInLeft' : ''"></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>
@@ -245,8 +245,8 @@
                             </div>
                         </div>
                     </div>
-                    <div class="athor_contain" v-show="isAthor" v-if="activeId === 2">
-                        <div class="athor_contain_logo animate__animated" :class="activeId === 2 ? 'animate__lightSpeedInRight' : ''"></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>
@@ -263,8 +263,8 @@
         </div>
         <div id="thirdPage" class="page section" >
             <div class="Title">
-                <div v-if="activeId === 3" class="text animate__animated" :class="activeId === 3 ? 'animate__backInLeft' : ''">场景营销工具</div>
-                <div v-if="activeId === 3" class="title animate__animated" :class="activeId === 3 ? 'animate__backInRight' : ''">多样化工具，全方位助力您的企业目标</div>
+                <div class="text animate__animated" >场景营销工具</div>
+                <div class="title animate__animated">多样化工具，全方位助力您的企业目标</div>
             </div>
             <div class="pageInner">
                 <div class="container" v-cloak>
@@ -273,9 +273,9 @@
                         <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" v-if="activeId === 3" @mouseleave="opacityTitle">
+                    <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" :class="activeId === 3 ? 'animate__zoomInLeft' : ''">
+                            <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">
@@ -283,7 +283,7 @@
                                 </div>
                                 <div class="item_title_p">{{i.title}}</div>
                             </div>
-                            <div class="container_item_hover2 animate__animated" v-else :class="activeId === 3 ? 'animate__zoomInRight' : ''">
+                            <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">
@@ -298,11 +298,11 @@
         </div>
         <div id="fourPage" class="page section" style="background: #fff;">
             <div class="Title">
-                <div v-if="activeId === 4" class="text animate__animated" :class="activeId === 4 ? 'animate__backInLeft' : ''">成功案例</div>
-                <div v-if="activeId === 4" class="title animate__animated" :class="activeId === 4 ? 'animate__backInRight' : ''">了解已合作品牌的真实推广案例，借鉴成功经验，助力有效推广，实现商业目标</div>
+                <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" v-if="activeId === 4">
+                <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">
@@ -321,22 +321,22 @@
         </div>
         <div id="fivePage" class="page section" >
             <div class="Title" style="color: white">
-                <div v-if="activeId === 5" style="color: white" class="text animate__animated" :class="activeId === 5 ? 'animate__backInLeft' : ''">关于采美</div>
-                <div v-if="activeId === 5" class="title animate__animated" :class="activeId === 5 ? 'animate__backInRight' : ''">了解采美，合作共赢</div>
+                <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" :class="activeId === 5 ? 'animate__zoomInDown' : ''" v-if="activeId === 5">
+                    <div class="caimei_introduction animate__animated" >
                         采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台，其核心资产包括采购 信息中心，媒体矩阵，数字运营以及线上交易和
                         供应链管理软件，建立了一个从信息引流到数字 运营到交易结算一体化平台，站外引流站内运营，采购转化的闭环生态，采美平台以创造客户价
                         值为核心，借助数字化营销的优  势，赋能美业供应链上下游企业，共同打造一站式美业双线融合的供应链新生态。
                     </div>
-                    <div class="caimei_report" v-cloak v-if="activeId === 5">
+                    <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" :class="activeId === 5 ? 'animate__heartBeat' : ''">
+                            <div class="report_logo animate__animated" >
                                 <span class="animate__animated" >{{item.contant}}</span>
                             </div>
-                            <div class="report_title animate__animated" :class="activeId === 5 ? 'animate__heartBeat' : ''">
+                            <div class="report_title animate__animated" >
                                 {{item.title}}
                             </div>
                             <div class="report_line">
@@ -356,10 +356,10 @@
         </div>
         <div id="sixPage" class="page section" style="background: #fff">
             <div class="Title" style="background: #fff">
-                <div v-if="activeId === 6" class="text animate__animated" :class="activeId === 6 ? 'animate__backInLeft' : ''">增长社区</div>
-                <div v-if="activeId === 6" class="title animate__animated" :class="activeId === 6 ? 'animate__backInRight' : ''">数十年资深美业运营经验，教你快速成长</div>
+                <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;" v-if="activeId === 6">
+            <div style="display:flex; justify-content: center;align-items: center;background: #fff;">
                 <div class="community">
                     <div class="community_video">
                         <div class="community_title">美业企谈</div>
@@ -372,7 +372,7 @@
                                     <div class="video_player">
                                         <el-image :src="item.bg" fit="contain"></el-image>
                                     </div>
-                                    <div class="video_title">{{item.title}}</div>
+                                    <div class="video_title">{{item.title | textSubString(45)}}</div>
                                 </div>
                             </div>
                         </div>
@@ -396,16 +396,16 @@
                 </div>
             </div>
         </div>
-        <div id="sevenPage" class="page section" style="display: flex;
+        <div id="sevenPage" class="page" style="display: flex;
                     flex-direction: column;
                     align-items: end;
-                    justify-content: end;background: #fff;">
+                    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%">
+            <video controls ref="cm_player" width="60%">
                 <source type="video/mp4">
                 您的浏览器不支持Video标签。
             </video>
@@ -420,7 +420,13 @@
     </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 charset="utf-8" type="text/javascript" src="/lib/swiper.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/login.js(v=${version})}"></script>
 </body>

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

@@ -30,21 +30,22 @@
         <div class="text">美业参谋</div>
       </div>
       <div class="header_link" v-cloak>
-        <a ref="link_item"  @click="handlerNav(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
+        <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">
           {{item.title}}
         </a>
-        <a href="https://www.caimei365.com/help/1044.html" target="_blank" style="font-size: 0.84vw;
-                        width: 7vw;
-                        height: 100%;
-                        justify-content: center;
-                        display: flex;
-                        align-items: center;">帮助中心</a>
+        <!--                <a href="https://www.caimei365.com/help/1044.html" target="_blank" style="font-size: 0.84vw;-->
+        <!--                        width: 7vw;-->
+        <!--                        height: 100%;-->
+        <!--                        justify-content: center;-->
+        <!--                        display: flex;-->
+        <!--                        align-items: center;">帮助中心</a>-->
         <div class="nav_link" ref="nav_link_item" style="">
           <div class="nav_link_item"></div>
         </div>
       </div>
       <div class="iphone">
         <div></div>
+        <div>153-3889-7365</div>
       </div>
       <div v-if="userInfo && userInfo.userIdentity === 3" v-cloak class="username">
         <el-popover
@@ -70,8 +71,7 @@
       电话联系
       <div class="tooltip tooltip_1" :style="{bottom: activeId !== 0 ? '250px':'180px'}">
         <div class="day">周一至周五 9:00~1800</div>
-        <div class="phone_number">0755-22907771</div>
-        <div class="phone_number">153-3885-1365</div>
+        <div class="phone_number">153-3889-7365</div>
       </div>
     </div>
     <div class="slide_icon_item slide_icon_qrcode">
@@ -80,11 +80,11 @@
         <img src="/img/common/qr_code_kefu.png" alt="采美客服">
       </div>
     </div>
-    <a class="slide_icon_item goTop" @click="handlerNav({id: 0})" v-if="activeId !== 0"></a>
+    <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" v-if="activeId === 0">
+      <el-carousel arrow="always" :interval="4000">
         <el-carousel-item>
           <div class="banner01">
             <div class="left animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''"></div>
@@ -95,12 +95,12 @@
           <div class="banner02"></div>
         </el-carousel-item>
       </el-carousel>
-      <div class="Title" v-if="activeId === 0">
-        <div class="text animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''">全生命周期陪跑服务</div>
-        <div class="title animate__animated" :class="activeId === 0 ? 'animate__backInRight' : ''">采美，更专业的美业数字化营销服务</div>
+      <div class="Title">
+        <div class="text animate__animated" >全生命周期陪跑服务</div>
+        <div class="title animate__animated" >采美，更专业的美业数字化营销服务</div>
       </div>
-      <div class="server" v-if="activeId === 0">
-        <div class="server_1 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
+      <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>
@@ -113,7 +113,7 @@
             <div class="all_cont" >· 精准识别全渠道匿名用户线索 ·</div>
           </div>
         </div>
-        <div class="server_2 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
+        <div class="server_2 animate__animated" >
           <div class="box operate_bg">
             <div class="operate_bg_logo"></div>
             <div class="operate_bg_title">潜客运营</div>
@@ -127,7 +127,7 @@
             <div class="all_cont" >· 精准推送内容 ·</div>
           </div>
         </div>
-        <div class="server_3 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
+        <div class="server_3 animate__animated" >
           <div class="box sale_bg">
             <div class="sale_bg_logo"></div>
             <div class="sale_bg_title">销售转化</div>
@@ -145,11 +145,11 @@
     </div>
     <div id="firstPage" class="page section" >
       <div class="Title">
-        <div v-if="activeId === 1" class="text animate__animated" :class="activeId === 1 ? 'animate__backInLeft' : ''">解决方案</div>
-        <div v-if="activeId === 1" class="title animate__animated" :class="activeId === 1 ? 'animate__backInRight' : ''">满足企业全方位需求</div>
+        <div class="text animate__animated" >解决方案</div>
+        <div class="title animate__animated" >满足企业全方位需求</div>
       </div>
-      <div class="selection" v-if="activeId === 1">
-        <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+      <div class="selection" >
+        <div class="selection_item animate__animated" >
           <div class="selection_item_contain">
             <div class="contain_bg_01">
               <span class="title">基础版</span>
@@ -169,7 +169,7 @@
             </div>
           </div>
         </div>
-        <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+        <div class="selection_item animate__animated" >
           <div class="selection_item_contain">
             <div class="contain_bg_02">
               <span class="title" style="margin-left: -36px;">按需定制</span>
@@ -188,7 +188,7 @@
             </div>
           </div>
         </div>
-        <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+        <div class="selection_item animate__animated" >
           <div class="selection_item_contain">
             <div class="contain_bg_03">
               <span class="title" style="margin-left: -36px;">全案定制</span>
@@ -210,33 +210,33 @@
     </div>
     <div id="secondPage" class="page section" >
       <div class="Title">
-        <div v-if="activeId === 2" class="text animate__animated" :class="activeId === 2 ? 'animate__backInLeft' : ''">基础运营产品</div>
-        <div v-if="activeId === 2" class="title animate__animated" :class="activeId === 2 ? 'animate__backInRight' : ''">使企业走向数字化的基石</div>
+        <div class="text animate__animated" >基础运营产品</div>
+        <div class="title animate__animated">使企业走向数字化的基石</div>
       </div>
-      <div class="operationa" v-if="activeId === 2">
+      <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" v-if="activeId === 2">
-            <div class="online_logo animate__animated" v-if="activeId === 2"></div>
-            <div class="online_title" v-if="activeId === 2">在线商城</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" v-if="activeId === 2">
-            <div class="online_logo" v-if="activeId === 2"></div>
-            <div class="online_title" v-if="activeId === 2">在线商城</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" v-if="activeId === 2">
+          <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" v-if="activeId === 2">
+          <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" v-if="activeId === 2">
-            <div class="contain_logo animate__animated" :class="activeId === 2 ? 'animate__lightSpeedInLeft' : ''"></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>
@@ -245,8 +245,8 @@
               </div>
             </div>
           </div>
-          <div class="athor_contain" v-show="isAthor" v-if="activeId === 2">
-            <div class="athor_contain_logo animate__animated" :class="activeId === 2 ? 'animate__lightSpeedInRight' : ''"></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>
@@ -263,8 +263,8 @@
     </div>
     <div id="thirdPage" class="page section" >
       <div class="Title">
-        <div v-if="activeId === 3" class="text animate__animated" :class="activeId === 3 ? 'animate__backInLeft' : ''">场景营销工具</div>
-        <div v-if="activeId === 3" class="title animate__animated" :class="activeId === 3 ? 'animate__backInRight' : ''">多样化工具，全方位助力您的企业目标</div>
+        <div class="text animate__animated" >场景营销工具</div>
+        <div class="title animate__animated">多样化工具，全方位助力您的企业目标</div>
       </div>
       <div class="pageInner">
         <div class="container" v-cloak>
@@ -273,9 +273,9 @@
             <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" v-if="activeId === 3" @mouseleave="opacityTitle">
+          <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" :class="activeId === 3 ? 'animate__zoomInLeft' : ''">
+              <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">
@@ -283,7 +283,7 @@
                 </div>
                 <div class="item_title_p">{{i.title}}</div>
               </div>
-              <div class="container_item_hover2 animate__animated" v-else :class="activeId === 3 ? 'animate__zoomInRight' : ''">
+              <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">
@@ -298,11 +298,11 @@
     </div>
     <div id="fourPage" class="page section" style="background: #fff;">
       <div class="Title">
-        <div v-if="activeId === 4" class="text animate__animated" :class="activeId === 4 ? 'animate__backInLeft' : ''">成功案例</div>
-        <div v-if="activeId === 4" class="title animate__animated" :class="activeId === 4 ? 'animate__backInRight' : ''">了解已合作品牌的真实推广案例，借鉴成功经验，助力有效推广，实现商业目标</div>
+        <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" v-if="activeId === 4">
+        <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">
@@ -321,22 +321,22 @@
     </div>
     <div id="fivePage" class="page section" >
       <div class="Title" style="color: white">
-        <div v-if="activeId === 5" style="color: white" class="text animate__animated" :class="activeId === 5 ? 'animate__backInLeft' : ''">关于采美</div>
-        <div v-if="activeId === 5" class="title animate__animated" :class="activeId === 5 ? 'animate__backInRight' : ''">了解采美，合作共赢</div>
+        <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" :class="activeId === 5 ? 'animate__zoomInDown' : ''" v-if="activeId === 5">
+          <div class="caimei_introduction animate__animated" >
             采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台，其核心资产包括采购 信息中心，媒体矩阵，数字运营以及线上交易和
             供应链管理软件，建立了一个从信息引流到数字 运营到交易结算一体化平台，站外引流站内运营，采购转化的闭环生态，采美平台以创造客户价
             值为核心，借助数字化营销的优  势，赋能美业供应链上下游企业，共同打造一站式美业双线融合的供应链新生态。
           </div>
-          <div class="caimei_report" v-cloak v-if="activeId === 5">
+          <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" :class="activeId === 5 ? 'animate__heartBeat' : ''">
+              <div class="report_logo animate__animated" >
                 <span class="animate__animated" >{{item.contant}}</span>
               </div>
-              <div class="report_title animate__animated" :class="activeId === 5 ? 'animate__heartBeat' : ''">
+              <div class="report_title animate__animated" >
                 {{item.title}}
               </div>
               <div class="report_line">
@@ -356,10 +356,10 @@
     </div>
     <div id="sixPage" class="page section" style="background: #fff">
       <div class="Title" style="background: #fff">
-        <div v-if="activeId === 6" class="text animate__animated" :class="activeId === 6 ? 'animate__backInLeft' : ''">增长社区</div>
-        <div v-if="activeId === 6" class="title animate__animated" :class="activeId === 6 ? 'animate__backInRight' : ''">数十年资深美业运营经验，教你快速成长</div>
+        <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;" v-if="activeId === 6">
+      <div style="display:flex; justify-content: center;align-items: center;background: #fff;">
         <div class="community">
           <div class="community_video">
             <div class="community_title">美业企谈</div>
@@ -372,7 +372,7 @@
                   <div class="video_player">
                     <el-image :src="item.bg" fit="contain"></el-image>
                   </div>
-                  <div class="video_title">{{item.title}}</div>
+                  <div class="video_title">{{item.title | textSubString(45)}}</div>
                 </div>
               </div>
             </div>
@@ -396,16 +396,16 @@
         </div>
       </div>
     </div>
-    <div id="sevenPage" class="page section" style="display: flex;
+    <div id="sevenPage" class="page" style="display: flex;
                     flex-direction: column;
                     align-items: end;
-                    justify-content: end;background: #fff;">
+                    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%">
+      <video controls ref="cm_player" width="60%">
         <source type="video/mp4">
         您的浏览器不支持Video标签。
       </video>
@@ -419,6 +419,14 @@
 
   </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 charset="utf-8" type="text/javascript" src="/lib/swiper.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>
 </body>