Browse Source

链接跳转优化

xiebaomin 2 years ago
parent
commit
fc8ceb53d8

+ 10 - 0
src/main/java/com/caimei/www/controller/authorized/AccountController.java

@@ -16,6 +16,8 @@ public class AccountController extends BaseController {
 	private static final String LOGIN_PATH = "account/login";
     private static final String SUPPLIER_LOGIN_PATH = "account/supplierTologin";
     private static final String REGISTER_SUPPLIER_LOGIN = "supplier_login/index";
+    private static final String REGISTER_SUPPLIER_LOGIN_TEXTINFO = "supplier_login/text_info";
+
     /** 注册 */
 	private static final String REGISTER_PATH = "account/register";
 	private static final String REGISTER_SUPPLIER = "account/register-supplier";
@@ -70,6 +72,14 @@ public class AccountController extends BaseController {
         return REGISTER_SUPPLIER_LOGIN;
     }
 
+    /**
+     * 详情页
+     */
+    @GetMapping("/supplier-login/text_info.html")
+    public String signUpSupplierLoginTextInfo() {
+        return REGISTER_SUPPLIER_LOGIN_TEXTINFO;
+    }
+
     /**
      * 注册选择页
      */

+ 1598 - 0
src/main/resources/static/css/supplier-login/text_info.css

@@ -0,0 +1,1598 @@
+body{
+    width: 100vw;
+    height: 100vh;
+}
+[v-cloak] {
+    opacity: 0;
+}
+.text_info {
+    width: 100vw;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: scroll;
+}
+.text_info .text_info_contain {
+    height: auto;
+    padding: 10vh 24vw;
+    box-sizing: border-box;
+    width: 100%;
+    background: #fff;
+}
+.text_info .text_info_contain p {
+    font-size: 16px;
+    line-height: 30px;
+    color: #777;
+}
+.text_info .text_info_contain p:nth-child(1) {
+    text-align: center;
+}
+.username {
+    color: #FF5B00;
+    position: relative;
+    cursor: pointer;
+    box-sizing: border-box;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.username::after {
+    content: '\276F';
+    font-weight: normal;
+    position: absolute;
+    right: -14px;
+    top: 0;
+    transform: rotate(90deg);
+    transition: .3s;
+}
+.username:hover {
+    border-bottom: 1px solid;
+}
+.username:hover::after{
+    transform: rotate(270deg);
+}
+.el-popover {
+    padding: 5px !important;
+    min-width: 90px !important;
+}
+.el-popover .cShow {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.el-popover__reference{
+    font-size: 0.8vw;
+}
+.a_cm {
+    padding: 10px;
+}
+.login_a:hover {
+    color: white;
+}
+.slide_icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: fixed;
+    right: 1vw;
+    bottom: 90px;
+    background: #FF5B00;
+    border-radius: 4px;
+    padding: 4px;
+    height: auto;
+    z-index: 999;
+}
+.slide_icon .slide_icon_item {
+    width: 100%;
+    height: 65px;
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    color: #FFFFFF;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 0.4vw 0;
+    box-sizing: border-box;
+}
+.slide_icon_item:nth-child(1){
+    background: url(/img/supplier-login/float/d.png) center no-repeat;
+    background-position: top;
+}
+.slide_icon_item:nth-child(3){
+    background: url(/img/supplier-login/float/z.png) center no-repeat;
+}
+.slide_icon_item:nth-child(2){
+    border-top: 1px solid rgb(255,255,255, 0.3);
+    border-bottom: 1px solid rgb(255,255,255, 0.3);
+    background: url(/img/supplier-login/float/w.png) center no-repeat;
+    background-position: top;
+}
+.tooltip {
+    background: #FFFFFF;
+    box-shadow: 0px 4px 16px 0px rgba(51,51,51,0.12);
+    border-radius: 4px;
+    z-index: 999;
+    position: fixed;
+    transition: .3s;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    right: 90px;
+}
+
+.slide_icon .slide_icon_item .tooltip_1{
+    width: 170px;
+    height: 110px;
+    padding: 10px;
+    text-align: center;
+    display: none;
+    opacity: 0;
+}
+.slide_icon .slide_icon_item .tooltip_1 .day {
+    color: #666666;
+    font-size: 16px;
+}
+.slide_icon .slide_icon_item .tooltip_1 .phone_number {
+    color: #FF5B00;
+    font-size: 20px;
+}
+.slide_icon .slide_icon_item .tooltip_1::after {
+    content: '';
+    height: 0;
+    width: 0;
+    border: 10px solid transparent;
+    border-left: 15px solid white;
+    display: block;
+    position: absolute;
+    right: -20px;
+    bottom: 0;
+}
+.slide_icon .slide_icon_item .tooltip_2::after {
+    content: '';
+    height: 0;
+    width: 0;
+    border: 10px solid transparent;
+    border-left: 15px solid white;
+    display: block;
+    position: absolute;
+    right: -20px;
+    top: 0;
+}
+.slide_icon .slide_icon_item .tooltip_2{
+    width: 150px;
+    height: 150px;
+    display: none;
+    opacity: 0;
+}
+.slide_icon .slide_icon_phone:hover .tooltip_1 {
+    opacity: 1;
+    display: flex;
+}
+.slide_icon .slide_icon_qrcode:hover .tooltip_2 {
+    opacity: 1;
+    display: flex;
+}
+.slide_icon_item .slide_icon_phone .slide_icon_text {
+    color:#666666;
+}
+.slide_icon .slide_icon_item .slide_icon_phone .slid_phonenumber {
+    font-size: 1vw;
+    color: #FF5B00;
+}
+.login_header{
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    height: 7vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #fff;
+    z-index: 999;
+}
+.login_header_container{
+    width: 95vw;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.img_logo {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+.img_logo .logo {
+    width: 5.5vw;
+    height: 4vh;
+    background: url("/img/supplier-login/logo.png") no-repeat;
+    background-size: 100% 100%;
+}
+.text {
+    font-size: 1.2vw;
+    font-weight: 400;
+    color: #272727;
+}
+.header_link{
+    align-items: center;
+    position: relative;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+}
+.header_link .nav_link {
+    position: absolute;
+    left: 42vw;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    width: 7vw;
+    height: 100%;
+    transition: .3s;
+}
+.header_link .nav_link .nav_link_item{
+    width: 1.2vw;
+    height: 0.2vh;
+    background: #FF5B00;
+    border-radius: 8px;
+    margin-bottom: 1vh;
+}
+.header_link .header_link_itme {
+    cursor: pointer;
+    font-size: 0.84vw;
+    width: 7vw;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+.header_link .header_link_itme:hover{
+    color: #FF5B00;
+    transform: scale(1.1);
+}
+.header_link_itme:nth-child(1):hover ~ .nav_link {
+    left: 0vw !important;
+}
+.header_link_itme:nth-child(2):hover ~ .nav_link {
+    left: 7vw !important;
+}
+.header_link_itme:nth-child(3):hover ~ .nav_link {
+    left: 14vw !important;
+}
+.header_link_itme:nth-child(4):hover ~ .nav_link {
+    left: 21vw !important;
+}
+.header_link_itme:nth-child(5):hover ~ .nav_link {
+    left: 28vw !important;
+}
+.header_link_itme:nth-child(6):hover ~ .nav_link {
+    left: 35vw !important;
+}
+.header_link_itme:nth-child(7):hover ~ .nav_link {
+    left: 42vw !important;
+}
+.header_link_itme:nth-child(8):hover ~ .nav_link {
+    left: 49vw !important;
+}
+.isActiveLink {
+    color: #FF5B00;
+    transform: scale(1.1);
+}
+.login_header_container .iphone {
+    width: 12vw;
+    height: 100%;
+    display: flex;
+    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;
+    background-size: contain;
+    background-position: center;
+}
+.login_header_container .login_regist {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 8vw;
+    height: 100%;
+}
+.login_header_container .login_regist .login_btn{
+    width: 40%;
+    font-size: 0.7vw;
+    border: 1px solid #ccc;
+    text-align: center;
+    padding: 0.2vw;
+}
+#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 兼容*/
+}
+#fullpage .page {
+    width: 100vw;
+    height: 100vh;
+    padding-top: 7vh;
+    scroll-snap-align: start;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+#zeroPage .el-carousel__container {
+    height: 40vh;
+}
+.el-carousel__item:nth-child(1) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#zeroPage .banner01 {
+    background: url("/img/supplier-login/01-banner/banner-01.png") no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#zeroPage .banner01 .left {
+    height: 45%;
+    width: 50%;
+    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%;
+    background: url(/img/supplier-login/01-banner/banner-01-right.png) no-repeat;
+    background-size: contain;
+}
+#zeroPage .banner02 {
+    background: url("/img/supplier-login/banner-2/banner-02.png") no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-position: center;
+}
+#zeroPage .banner02 .left {
+    height: 45%;
+    width: 50%;
+    background: url(/img/supplier-login/banner-2/banner-02-left.png) no-repeat;
+    background-size: contain;
+    background-position: right;
+}
+#zeroPage .banner02 .right {
+    height: 70%;
+    width: 40%;
+    background: url(/img/supplier-login/banner-2/banner-02-right.png) no-repeat;
+    background-size: contain;
+}
+.el-carousel__item:nth-child(2) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url("/img/supplier-login/01-banner/banner-01.png");
+}
+.el-carousel__indicator--horizontal .el-carousel__button {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #ccc;
+    opacity: 1;
+}
+.el-carousel__indicator--horizontal.is-active .el-carousel__button{
+    width: 6px;
+    height: 6px;
+    background: #FF5B00;
+    border-radius: 50%;
+    opacity: 1;
+}
+#zeroPage {
+    background-color: #fff;
+}
+#zeroPage .server {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 35vh;
+    box-sizing: border-box;
+}
+.server .server_1,
+.server .server_2,
+.server .server_3 {
+    height: 100%;
+    width: 15vw;
+    position: relative;
+}
+#zeroPage .server .box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+    -webkit-transition: ease-in-out 600ms;
+    -o-transition: ease-in-out 600ms;
+    transition: .5s;
+}
+#zeroPage .server .tourist_bg,
+#zeroPage .server .sale_bg,
+#zeroPage .server .operate_bg {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 1.1vw;
+    padding: 4.5vw 0;
+    box-sizing: border-box;
+}
+#zeroPage .server .operate,
+#zeroPage .server .tourist,
+#zeroPage .server .sale {
+    width: 15vw;
+    height: 100%;
+    transition: .5s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 1.1vw;
+    padding: 10px;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, #FF5B00, #FF9300);
+    -webkit-transform: rotateY(-180deg);
+    transform: rotateY(-180deg);
+    color: #fff;
+}
+#zeroPage .server .tourist_logo {
+    width: 6vw;
+    height: 6vw;
+    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;
+    background-size: cover;
+}
+#zeroPage .server .tourist_bg_title {
+    color: black;
+}
+#zeroPage .server .tourist_title {
+    color: #fff;
+}
+#zeroPage .server .server_1:hover .tourist_bg{
+    -webkit-transform: rotateY(180deg) !important;
+    transform: rotateY(180deg) !important;
+}
+#zeroPage .server .server_1:hover .tourist {
+    -webkit-transform: rotateY(0deg) !important;
+    transform: rotateY(0deg) !important;
+}
+#zeroPage .server .server_2:hover .operate_bg{
+    -webkit-transform: rotateY(180deg) !important;
+    transform: rotateY(180deg) !important;
+}
+#zeroPage .server .server_2:hover .operate {
+    -webkit-transform: rotateY(0deg) !important;
+    transform: rotateY(0deg) !important;
+}
+#zeroPage .server .server_3:hover .sale_bg{
+    -webkit-transform: rotateY(180deg) !important;
+    transform: rotateY(180deg) !important;
+}
+#zeroPage .server .server_3:hover .sale {
+    -webkit-transform: rotateY(0deg) !important;
+    transform: rotateY(0deg) !important;
+}
+#zeroPage .server .operate_logo {
+    background: url("/img/supplier-login/cycle/-22.png") no-repeat;
+    width: 6vw;
+    height: 6vw;
+    background-size: cover;
+}
+#zeroPage .server .operate_bg_logo {
+    background: url("/img/supplier-login/cycle/2.png") no-repeat;
+    width: 6vw;
+    height: 6vw;
+    background-size: cover;
+}
+#zeroPage .server .operate_bg_title {
+    color: black;
+}
+#zeroPage .server .all_cont {
+    font-size: 0.8vw;
+    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;
+    background-size: cover;
+}
+#zeroPage .server .sale_bg_logo {
+    background: url("/img/supplier-login/cycle/3.png") no-repeat;
+    width: 6vw;
+    height: 6vw;
+    background-size: cover;
+}
+#zeroPage .server .sale_bg_title {
+    color: black;
+}
+#firstPage {
+    background: url("/img/supplier-login/selection/select_bg.png") no-repeat;
+    background-size: cover;
+}
+#firstPage .selection {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#firstPage .selection .selection_item{
+    width: 22vw;
+    height: 65vh;
+    padding-top: 2vh;
+    box-sizing: border-box;
+    transition: .3s;
+}
+#firstPage .selection .selection_item:hover {
+    padding-top: 0;
+}
+#firstPage .selection .selection_item:hover .select_btn {
+    background-color: #FF5B00;
+    color: white;
+}
+#firstPage .selection .selection_item:nth-child(2){
+    margin: 2vh;
+}
+#firstPage .selection_item .selection_item_contain {
+    width: 100%;
+    height: 71vh;
+    background-color: #fff;
+}
+#firstPage .selection_item .selection_item_contain .contain_bg_01 {
+    width: 100%;
+    height: 11vh;
+    background: url("/img/supplier-login/selection/select_01.png") no-repeat;
+    background-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 2vw;
+}
+#firstPage .selection_item .selection_item_contain .contain_bg_02 {
+    width: 100%;
+    height: 11vh;
+    background: url("/img/supplier-login/selection/select_02.png") no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 2vw;
+}
+#firstPage .selection_item .selection_item_contain .contain_bg_03 {
+    width: 100%;
+    height: 11vh;
+    background: url("/img/supplier-login/selection/select_03.png") no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 2vw;
+}
+#firstPage .selection_item_contain .bg1_text {
+    width: 100%;
+    height: 60vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.8vw;
+    padding: 2vh;
+    box-sizing: border-box;
+}
+.bg1_contain {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 0.8vw;
+    height: 3.5vh;
+    white-space: nowrap;
+}
+.square_icon {
+    width: 0.2vw;
+    height: 0.2vw;
+    border: 1px solid #B2B2B2;
+    margin: 0 0.5vw;
+    transform: rotate(45deg);
+}
+.text_contain {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+.select_btn {
+    width: 100%;
+    height: 5vh;
+    border: 1px solid #E2E2E2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.select_btn_login {
+    width: 100%;
+    height: 5vh;
+    border: 1px solid #E2E2E2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    background: #cccccc;
+}
+.Title {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: column;
+    width: 100%;
+    height: 11vh;
+    margin-top: 5vh;
+}
+.Title .text {
+    font-size: 1.8vw;
+}
+.Title .title {
+    font-size: 0.9vw;
+}
+#secondPage .operationa{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 4vh;
+}
+#secondPage .operationa_contain {
+    width: 940px;
+    height: 570px;
+    position: relative;
+}
+#secondPage .operationa_contain .bg2{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: url("/img/supplier-login/oprate/bg_1.png") no-repeat;
+    background-size: cover;
+}
+#secondPage .operationa_contain .bg3{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: url("/img/supplier-login/oprate/author/bg_2.png") no-repeat;
+    background-size: cover;
+}
+#secondPage .operationa_contain .bg1 {
+    position: absolute;
+    left: 0;
+    top: 10px;
+    width: 97.8%;
+    height: 90%;
+    background: url(/img/supplier-login/oprate/bg_2.png) no-repeat;
+    background-size: contain;
+    background-position: right;
+}
+#secondPage .operationa_contain .bg4 {
+    left: 6px;
+    top: 14px;
+    width: 70%;
+    height: 100%;
+    background: url(/img/supplier-login/oprate/bg_1.png) no-repeat;
+    background-size: contain;
+    position: absolute;
+    z-index: -1;
+}
+.operationa_contain .online_store {
+    width: 400px;
+    height: 70px;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    left: 75px;
+    top: 45px;
+    border-bottom: 2px solid #FFCEAF;
+}
+.operationa_contain .online_store .online_logo {
+    width: 62px;
+    height: 100%;
+    border-bottom: 6px solid #FFC39A;
+    border-radius: 4px;
+    background: url(/img/supplier-login/oprate/house.png) no-repeat;
+    background-size: contain;
+    background-position: top;
+}
+.online_title {
+    font-size: 1.8vw;
+    font-weight: bold;
+    margin-left: 20px;
+}
+.operationa_contain .author_active {
+    width: 400px;
+    height: 70px;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 75px;
+    top: 45px;
+    border-bottom: 2px solid #FFCEAF;
+    flex-direction: row-reverse;
+}
+.operationa_contain .author_active .online_logo {
+    width: 62px;
+    height: 100%;
+    border-bottom: 6px solid #FFC39A;
+    border-radius: 4px;
+    background: url(/img/supplier-login/oprate/z.png) no-repeat;
+    background-size: contain;
+    background-position: top;
+}
+.online_title {
+    font-size: 1.8vw;
+    font-weight: bold;
+    margin-right: 20px;
+}
+.operationa_contain .online {
+    width: 383px;
+    height: 53px;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    left: 56px;
+    top: 37px;
+}
+.online_title {
+    font-size: 28px;
+    font-weight: bold;
+    margin-right: 20px;
+}
+.operationa_contain .online .online_logo{
+    width: 62px;
+    height: 100%;
+    border-radius: 4px;
+    background: url(/img/supplier-login/oprate/house.png) no-repeat;
+    background-size: contain;
+    background-position: top;
+}
+.operationa_contain .author {
+    width: 222px;
+    height: 65px;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 40px;
+    top: 20px;
+}
+.operationa_contain .author .author_logo {
+    height: 65px;
+    width: 65px;
+    background: url(/img/supplier-login/oprate/z.png) no-repeat;
+    background-size: contain;
+}
+.operationa_contain .author .author_title {
+    font-size: 28px;
+    color: #FFFFFF;
+}
+.operationa_contain .contain {
+    width: 690px;
+    height: 400px;
+    position: absolute;
+    left: 120px;
+    top: 133px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+.operationa_contain .contain .contain_logo {
+    width: 100%;
+    height: 150px;
+    background: url(/img/supplier-login/oprate/title.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .contain .contain_list {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.operationa_contain .contain .contain_list .list_item {
+    width: 200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 2px solid white;
+    justify-content: space-around;
+    align-items: center;
+    background: #FDF0E9;
+    box-shadow: 0px 6px 50px 0px rgba(255,91,0,0.24);
+    border-radius: 16px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(2){
+    margin: 0 1%;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(1) div:nth-child(1) {
+    width: 80px;
+    height: 50px;
+    background: url(/img/supplier-login/oprate/p.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(2) div:nth-child(1) {
+    width: 80px;
+    height: 50px;
+    background: url(/img/supplier-login/oprate/l.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .contain .contain_list .list_item:nth-child(3) div:nth-child(1) {
+    width: 80px;
+    height: 50px;
+    background: url(/img/supplier-login/oprate/s.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .athor_contain {
+    width: 690px;
+    height: 400px;
+    position: absolute;
+    left: 120px;
+    top: 133px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+}
+.operationa_contain .athor_contain .athor_contain_logo {
+    width: 100%;
+    height: 150px;
+    background: url(/img/supplier-login/oprate/author/logo.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+.operationa_contain .athor_contain .athor_contain_list {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+}
+.athor_contain_list .list_item {
+    width: 97%;
+    height: 25%;
+    border: 1px solid #FFC9A9;
+    border-radius: 50px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.athor_contain_list .list_item:nth-child(1) .list_item_logo  {
+    background: url(/img/supplier-login/oprate/author/02.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 42px;
+    height: 50px;
+    position: absolute;
+    left: 10px;
+    top: 0;
+}
+.athor_contain_list .list_item:nth-child(2) .list_item_logo  {
+    background: url(/img/supplier-login/oprate/author/03.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 42px;
+    height: 50px;
+    position: absolute;
+    left: 10px;
+    top: 0;
+}
+.athor_contain_list .list_item:nth-child(3) .list_item_logo  {
+    background: url(/img/supplier-login/oprate/author/04.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 42px;
+    height: 50px;
+    position: absolute;
+    left: 10px;
+    top: 0;
+}
+
+.athor_contain_list .list_item .text_contain{
+    width: 80%;
+    height: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-direction: row;
+    color: #FFC9A9;
+}
+.athor_contain_list .list_item .text_contain .text_contain_item {
+    font-size: 16px;
+    font-weight: bold;
+}
+.athor_contain_list .list_item .text_contain .text_contain_item2 {
+    width: 1px;
+    height: 20px;
+    background: #ffe2d3;
+    margin: 0 10px;
+}
+.athor_contain_list .list_item .text_contain .text_contain_item3 {
+    font-size: 16px;
+}
+#thirdPage {
+    background: #fff;
+}
+.pageInner {
+    height: 80vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.pageInner .container {
+    width: 80vw;
+    height: 20vw;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+.pageInner .thirdPage_container_contant {
+    position: absolute;
+    width: 100%;
+    height: 5vw;
+    left: 0;
+    top: -6vw;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.pageInner .thirdPage_container_contant .container_title {
+    width: 33%;
+    height: 100%;
+    border-bottom: 1px solid #FF5B00;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    font-weight: bold;
+    font-size: 1.5vw;
+    color: #FF5B00;
+    opacity: 0;
+}
+.pageInner .container .container_item {
+    height: 100%;
+    width: 18%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.container_item .container_item_active .container_item_hover {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    font-size: 0.8vw;
+    color: #202020;
+    transition: .3s;
+    justify-content: space-around;
+    align-items: center;
+    padding: 1vw 0;
+    box-sizing: border-box;
+}
+.container_item .container_item_active .container_item_hover2 {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    font-size: 0.8vw;
+    color: #202020;
+    transition: .3s;
+    justify-content: space-around;
+    align-items: center;
+    padding: 1vw 0;
+    box-sizing: border-box;
+    bottom: 0;
+}
+.container_item .container_item_active .item_title {
+    display: none;
+    font-size: 1.5vw;
+    color: #FF5B00;
+    font-weight: bold;
+    width: 80%;
+}
+.container_item .container_item_active .item_contant {
+    display: none;
+    color: #666666;
+    font-size: 1.2vw;
+    width: 80%;
+}
+.container_item .container_item_active .item_logo {
+    width: 3vw;
+    height: 3vw;
+}
+.container_item .container_item_active .item_logo_box {
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#item_logo_1 {
+    background: url(/img/supplier-login/05-page/信.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_2 {
+    background: url(/img/supplier-login/05-page/矩.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_3 {
+    background: url(/img/supplier-login/05-page/正.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_4 {
+    background: url(/img/supplier-login/05-page/SEO.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_5 {
+    background: url(/img/supplier-login/05-page/CRM.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_6 {
+    background: url(/img/supplier-login/05-page/认.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_7 {
+    background: url(/img/supplier-login/05-page/美.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_8 {
+    background: url(/img/supplier-login/05-page/私.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_9 {
+    background: url(/img/supplier-login/05-page/分.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_10 {
+    background: url(/img/supplier-login/05-page/会.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_11 {
+    background: url(/img/supplier-login/05-page/金.png) center no-repeat;
+    background-size: contain;
+}
+#item_logo_12 {
+    background: url(/img/supplier-login/05-page/交.png) center no-repeat;
+    background-size: contain;
+}
+#thirdPage .container_item .container_item_active {
+    height: 50%;
+    width: 100%;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_1 {
+    background: url(/img/supplier-login/05-page/slide/01.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_2 {
+    background: url(/img/supplier-login/05-page/slide/02.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_3 {
+    background: url(/img/supplier-login/05-page/slide/03.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_4 {
+    background: url(/img/supplier-login/05-page/slide/04.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_5 {
+    background: url(/img/supplier-login/05-page/slide/05.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_6 {
+    background: url(/img/supplier-login/05-page/slide/06.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_7 {
+    background: url(/img/supplier-login/05-page/slide/07.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_8 {
+    background: url(/img/supplier-login/05-page/slide/08.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_9 {
+    background: url(/img/supplier-login/05-page/slide/09.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_10 {
+    background: url(/img/supplier-login/05-page/slide/10.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_11 {
+    background: url(/img/supplier-login/05-page/slide/11.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover #item_logo_12 {
+    background: url(/img/supplier-login/05-page/slide/12.png) center no-repeat;
+}
+#thirdPage .container_item .container_item_active:hover .container_item_hover {
+    background: #F7F7F7 !important;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 111;
+}
+#thirdPage .container_item .container_item_active:hover .container_item_hover2 {
+    background: #F7F7F7 !important;
+    height: 100%;
+    left: 0;
+    z-index: 111;
+}
+#thirdPage .container_item .container_item_active:hover .item_logo_box {
+    justify-content: end;
+}
+#thirdPage .container_item .container_item_active:hover .item_logo {
+    width: 5.2vw;
+    height: 5.2vw;
+}
+#thirdPage .container_item .container_item_active:hover .item_title {
+    display: block !important;
+}
+#thirdPage .container_item .container_item_active:hover .item_title_p {
+    display: none !important;
+}
+#thirdPage .container_item .container_item_active:hover .item_contant {
+    display: block !important;
+}
+#thirdPage .container_item .container_item_active:hover .container_title:nth-child(1){
+    display: flex !important;
+}
+#fourPage .pageInner_contain {
+    width: 80%;
+    height: 30vw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+#fourPage .pageInner_contain .nextChange {
+    width: 40px;
+    height: 48px;
+    border: 1px solid #E2E2E2;
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #E2E2E2;
+    cursor: pointer;
+}
+#fourPage .pageInner_contain .isActiveNext{
+    border: 1px solid #FF5B00;
+    color: #FF5B00;
+}
+#fourPage .el-carousel--horizontal {
+    width: 90%;
+}
+#fourPage .el-carousel__arrow{
+    display: none;
+}
+#fourPage .el-carousel__item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    box-sizing: border-box;
+}
+#fourPage .el-carousel__item .four_logo_1 {
+    width: 50%;
+    height: 80%;
+}
+#fourPage .el-carousel__item .logo_text {
+    width: 45%;
+    height: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    overflow: hidden;
+}
+#fourPage .el-carousel__item .logo_text .logo_title {
+    font-size: 1.25vw;
+    color: black;
+    font-weight: bold;
+    margin-bottom: 2vw;
+}
+#fourPage .el-carousel__item .logo_text .analysis {
+    font-size: 0.8vw;
+    line-height: 2vw;
+}
+#fivePage {
+    background: url(/img/supplier-login/07-caimei/bg.png) no-repeat;
+    background-size: 100% 100%;
+}
+#fivePage .inner_contain {
+    width: 100%;
+    height: 67vh;
+    margin-top: 7vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#fivePage .inner_contain .inner {
+    width: 64%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+}
+#fivePage .inner_contain .inner .caimei_introduction {
+    color: white;
+    font-size: 0.8vw;
+    width: 100%;
+    height: auto;
+    padding: 3vh;
+    background-color: rgba(255,255,255, 0.2);
+    box-sizing: border-box;
+    line-height: 2vw;
+}
+#fivePage .inner_contain .inner .caimei_report {
+    width: 90%;
+    height: 55%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.caimei_report .report_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    width: 20%;
+}
+.caimei_report .report_item .report_logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.6vw;
+    width: 12vw;
+    height: 9vw;
+    background: url(/img/supplier-login/07-caimei/cirle.png) no-repeat center;
+    background-size: contain;
+    font-weight: bold;
+    color: white;
+}
+.caimei_report .report_item .report_title {
+    font-size: 0.8vw;
+    color: #fff;
+}
+.caimei_report .report_item .report_line{
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+}
+.caimei_report .report_item .report_line .box1 {
+    padding: 0.52vw 1px;
+    height: 5.2vw;
+}
+.caimei_report .report_item .report_line .card4 {
+    background-image: linear-gradient(#fff 35%, rgba(255,255,255,0) 0%);
+    background-position: left;
+    background-size: 1px 10px;
+    background-repeat: repeat-y;
+}
+.caimei_report .report_item .report_line .container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+}
+.caimei_report .report_item .report_line .container .box {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.caimei_report .report_item .report_line .container .box span {
+    position: absolute;
+    box-sizing: border-box;
+    border: none;
+    background: #FFFFFF;
+    border-radius: 50%;
+    animation: animate 1s linear infinite;
+    animation-delay: calc(0.5s * var(--i))
+}
+
+#sixPage .community {
+    width: 70vw;
+    height: 70vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2vw;
+    flex-direction: column;
+}
+.community .community_video{
+    width: 100%;
+    height: 45%;
+    font-size: 1vw;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+.community .community_article {
+    width: 100%;
+    height: 45%;
+    font-size: 1vw;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+.community_title {
+    padding: 1% 0;
+    font-size: 1vw;
+}
+.community .community_list {
+    width: 100%;
+    display: flex;
+    /*justify-content: space-between;*/
+    align-items: center;
+    height: 90%;
+}
+.community_list .video_list_item {
+    width: 24%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    transition: .2s;
+    cursor: pointer;
+    overflow: hidden;
+}
+.community_list .article_list_item {
+    width: 24%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    transition: .2s;
+    cursor: pointer;
+}
+.article_list_item .article_list_item_content {
+    height: 100%;
+    width: 100%;
+    border: 1px solid #EAEAEA;
+    box-sizing: border-box;
+    color: #202020;
+}
+.video_list_item .video_list_item_content {
+    height: 100%;
+    width: 100%;
+    border: 1px solid #EAEAEA;
+    box-sizing: border-box;
+    color: #202020;
+    position: relative;
+}
+.video_list_item .video_list_item_content .player_bg {
+    position: absolute;
+    width: 100%;
+    height: 60%;
+    box-sizing: border-box;
+    left: 0;
+    top: -100%;
+    background: rgba(24, 23, 23, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: .2s;
+    z-index: 111;
+}
+.video_list_item_content .video_player {
+    width: 100%;
+    height: 60%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.article_list_item_content .article_bg {
+    width: 100%;
+    height: 60%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.video_list_item_content .video_title {
+    width: 100%;
+    height: 40%;
+    box-sizing: border-box;
+    font-size: 0.8vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1.5vw;
+    padding: 6%;
+}
+.article_list_item_content .article_text {
+    width: 100%;
+    height: 40%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    font-size: 0.7vw;
+    color: #808080;
+}
+.article_list_item_content .text_title {
+    color: #202020;
+    font-size: 1vw;
+    width: 100%;
+    box-sizing: border-box;
+    border-left: 3px solid #FF5B00;
+    padding: 0 4%;
+}
+.video_list_item:nth-child(1):hover {
+    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);
+    color: #FF5B00;
+}
+.video_list_item:nth-child(1):hover .player_bg {
+    top: 0;
+}
+.video_list_item:nth-child(2):hover .player_bg {
+    top: 0;
+}
+.video_list_item:nth-child(3):hover .player_bg {
+    top: 0;
+}
+.video_list_item:nth-child(4):hover .player_bg {
+    top: 0;
+}
+.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;
+}
+.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;
+}
+.video_list_item:nth-child(4):hover {
+    padding: 0 0 5px 0;
+}
+.video_list_item:nth-child(4):hover .video_list_item_content{
+    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    color: #FF5B00;
+}
+.article_list_item:nth-child(1):hover {
+    padding: 0 0 5px 0;
+}
+.article_list_item:nth-child(1):hover .article_list_item_content {
+    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    color: #FF5B00 !important;
+}
+.article_list_item:nth-child(2):hover .article_list_item_content {
+    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    color: #FF5B00 !important;
+}
+.article_list_item:nth-child(3):hover .article_list_item_content {
+    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    color: #FF5B00 !important;
+}
+.article_list_item:nth-child(4):hover .article_list_item_content {
+    box-shadow: 0px 6px 20px 0px rgba(255,157,102,0.12);
+    color: #FF5B00 !important;
+}
+.article_list_item:nth-child(2):hover {
+    padding: 0 0 5px 0;
+}
+.article_list_item:nth-child(3):hover {
+    padding: 0 0 5px 0;
+}
+.article_list_item:nth-child(4):hover {
+    padding: 0 0 5px 0;
+}
+.article_list_item:nth-child(1):hover .text_title,
+.article_list_item:nth-child(2):hover .text_title,
+.article_list_item:nth-child(3):hover .text_title,
+.article_list_item:nth-child(4):hover .text_title {
+    color: #FF5B00 !important;
+}
+@keyframes animate {
+    0% {
+        width: 0;
+        height: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        width: 50px;
+        height: 50px;
+        opacity: 0;
+    }
+}
+.cm_video_player {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(24, 23, 23, 0.5);
+    display: none;
+    z-index: 999;
+    justify-content: center;
+    align-items: center;
+}

+ 7 - 2
src/main/resources/static/js/supplier-login/login.js

@@ -360,9 +360,14 @@ new Vue({
         textInfo(id) {
             const fullPage = this.$refs.fullPage
             fullPage.removeEventListener('mousewheel', (e) => this.scrollChange(e))
-            this.showContent = false
             const textInfoForm = this.community_article_list.filter(item => item.id === id)
-            this.textContent = textInfoForm[0].text
+
+            this.textContent = textInfoForm[0]
+            if(localStorage.getItem('text_info_from')) {
+                localStorage.removeItem('text_info_from')
+            }
+            localStorage.setItem('text_info_from', JSON.stringify(this.textContent))
+            window.location.href = '/supplier-login/text_info.html'
         },
         goToIndex() {
             window.location.href = '/'

File diff suppressed because it is too large
+ 139 - 0
src/main/resources/static/js/supplier-login/text_info.js


+ 12 - 12
src/main/resources/templates/supplier_login/index.html

@@ -306,10 +306,10 @@
                     <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" :class="activeId === 4 ? 'animate__rotateInUpRight' : ''">
+                            <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" :class="activeId === 4 ? 'animate__rotateInUpLeft' : ''">
+                            <div class="logo_text animate__animated">
                                 <div class="logo_title">{{item.title}}</div>
                                 <div class="analysis" v-html="item.content"></div>
                             </div>
@@ -381,15 +381,15 @@
                         <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 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 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>
@@ -399,7 +399,7 @@
         <div id="sevenPage" class="page section" style="display: flex;
                     flex-direction: column;
                     align-items: end;
-                    justify-content: end;">
+                    justify-content: end;background: #fff;">
             <!-- 底部区域 end -->
             <template th:replace="components/footer"></template>
             <template th:replace="components/foot-link"></template>
@@ -411,7 +411,7 @@
             </video>
         </div>
     </div>
-    <div class="text_info" v-else>
+    <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>

+ 425 - 0
src/main/resources/templates/supplier_login/text_info.html

@@ -0,0 +1,425 @@
+<!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">
+  <!--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" />
+  <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"  @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>
+        <div class="nav_link" ref="nav_link_item" style="">
+          <div class="nav_link_item"></div>
+        </div>
+      </div>
+      <div class="iphone">
+        <div></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 class="slide_icon" v-if="showContent">
+    <div class="slide_icon_item slide_icon_phone">
+      电话联系
+      <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>
+    </div>
+    <div class="slide_icon_item slide_icon_qrcode">
+      微信客服
+      <div class="tooltip tooltip_2" :style="{bottom: activeId !== 0 ? '50px':'0'}">
+        <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>
+  </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-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" 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>
+      <div class="server" v-if="activeId === 0">
+        <div class="server_1 animate__animated" :class="activeId === 0 ? 'animate__backInUp' : ''">
+          <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" :class="activeId === 0 ? 'animate__backInUp' : ''">
+          <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" :class="activeId === 0 ? 'animate__backInUp' : ''">
+          <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 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>
+      <div class="selection" v-if="activeId === 1">
+        <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+          <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 v-cloak style="width: 100%;height: 6vh;">
+                ¥<span style="font-size: 2vw; 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" :class="activeId === 1 ? 'animate__flipInY' : ''">
+          <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 style="margin-bottom: 3vh;color: #666666;font-weight: bold">优先解决企业局部痛点,如:</div>
+                <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>
+              <div class="select_btn" @click="selectionQus">查看解决方案</div>
+            </div>
+          </div>
+        </div>
+        <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
+          <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>
+      </div>
+    </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>
+      <div class="operationa" v-if="activeId === 2">
+        <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>
+          <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>
+          <div class="author" @click="changeModeAuthor" v-show="isStore" v-if="activeId === 2">
+            <div class="author_title">正品认证通</div>
+            <div class="author_logo"></div>
+          </div>
+          <div class="author_active" v-show="isAthor" v-if="activeId === 2">
+            <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_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" v-if="activeId === 2">
+            <div class="athor_contain_logo animate__animated" :class="activeId === 2 ? 'animate__lightSpeedInRight' : ''"></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 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>
+      <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" v-if="activeId === 3" @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="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 :class="activeId === 3 ? 'animate__zoomInRight' : ''">
+                <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 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>
+      <div style="display: flex;justify-content: center;align-items: center;margin-top: 10vh;">
+        <div class="pageInner_contain" v-if="activeId === 4">
+          <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 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>
+      <div class="inner_contain">
+        <div class="inner">
+          <div class="caimei_introduction animate__animated" :class="activeId === 5 ? 'animate__zoomInDown' : ''" v-if="activeId === 5">
+            采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台,其核心资产包括采购 信息中心,媒体矩阵,数字运营以及线上交易和
+            供应链管理软件,建立了一个从信息引流到数字 运营到交易结算一体化平台,站外引流站内运营,采购转化的闭环生态,采美平台以创造客户价
+            值为核心,借助数字化营销的优  势,赋能美业供应链上下游企业,共同打造一站式美业双线融合的供应链新生态。
+          </div>
+          <div class="caimei_report" v-cloak v-if="activeId === 5">
+            <div class="report_item" v-for="item in report_list" :key="item.id">
+              <div class="report_logo animate__animated" :class="activeId === 5 ? 'animate__heartBeat' : ''">
+                <span class="animate__animated" >{{item.contant}}</span>
+              </div>
+              <div class="report_title animate__animated" :class="activeId === 5 ? 'animate__heartBeat' : ''">
+                {{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 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>
+      <div style="display:flex; justify-content: center;align-items: center;background: #fff;" v-if="activeId === 6">
+        <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}}</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 section" style="display: flex;
+                    flex-direction: column;
+                    align-items: end;
+                    justify-content: end;background: #fff;">
+      <!-- 底部区域 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 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>

Some files were not shown because too many files changed in this diff