Merge branch 'developer' of http://git.caimei365.com/caimei365/caimei365-www into developer

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

@@ -143,9 +143,18 @@ iframe{width:320px !important;height: 280px !important}
     background-position: -180px 185px;
 }
 .baseHeadCenter .wechat_qrcode .newCarLink:hover .bg_car {
-    color: #FF5B00;
+    color: #FF5B00 !important;
     background-position: -78px 185px;
 }
+.baseHeadCenter .wechat_qrcode .newCarLink:hover .headCart a {
+    color: #FF5B00 !important;
+}
+.baseHeadCenter .wechat_qrcode .newMsgLink:hover .headmsg a {
+    color: #FF5B00 !important;
+}
+.baseHeadCenter .wechat_qrcode .newSupplierLink:hover a {
+    color: #FF5B00 !important;
+}
 .baseHeadCenter .wechat_qrcode .newMsgLink:hover .bg_msg {
     color: #FF5B00;
     background-position: -112px 185px;
@@ -383,13 +392,56 @@ iframe{width:320px !important;height: 280px !important}
 #scrollTop .item>span:hover{color:#FF5B00;}
 #scrollTop .item .phone{padding:4px 16px 4px 48px;line-height:16px;}
 #scrollTop .item .phone:before{width:32px;height:32px;background-position:0 -254px;position:absolute;top:4px;left:16px}
-#scrollTop .item .toTop{padding:12px 16px 12px 48px;line-height:16px;}
+#scrollTop .item .toTop{padding:12px 12px 12px 45px;line-height:16px;}
+#scrollTop .item .Iphone {padding:12px 12px 12px 45px;line-height:16px;}
+#scrollTop .item .qrCode_cx {
+    display: none;
+    width: 240px;
+    height: 150px;
+    background: #FFFFFF;
+    box-shadow: 0px 6px 10px 1px rgba(0,0,0,0.07);
+    opacity: 1;
+    position: absolute;
+    left: -260px;
+    top: -59px;
+    z-index: 999;
+    justify-content: space-around;
+    align-items: center;
+}
+#scrollTop .item .qrCode_cx:after {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    content: '';
+    background: #fff;
+    right: -8px;
+    top: 70px;
+    transform: rotate(45deg);
+}
+#scrollTop .item .qrCode_cx div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+#scrollTop .item .qrCode_cx span {
+    margin-top: 10px;
+}
+#scrollTop .item .qrCode_cx img{
+    width: 94px;
+    height: 94px;
+    border-radius: 2px 2px 2px 2px;
+    opacity: 1;
+    border: 1px solid #FFE6DC;
+}
 #scrollTop .item .toTop:before{width:32px;height:32px;background-position:-42px -254px;position:absolute;top:4px;left:16px}
+#scrollTop .item .Iphone:before{width:32px;height:32px;background-position:-326px -646px;position:absolute;top:4px;left:16px;}
 #scrollTop .item .phoneHover{display:none;position:absolute;left:-238px;top:-145px;z-index:999;width:240px;height:383px;background:url(/img/common/hotline.png) no-repeat left top;box-sizing:border-box;padding:100px 15px 0 0;line-height:28px;font-size:14px;white-space:nowrap;}
 #scrollTop .item .phoneHover a{color:#FF5B00}
 #scrollTop .item .phoneHover span{color:#93979F;margin-top:10px}
 #scrollTop .item .phoneHover a:hover{text-decoration:underline}
 #scrollTop .item:hover .phoneHover{display:block}
+#scrollTop .item:hover .qrCode_cx{display:flex}
 /* 活动标签，阶梯价格 */
 .priceTag{position:relative}
 .couponTag{display:inline-block;height:20px;line-height:20px;border:1px solid #f94b4b;border-radius:2px;font-size:12px;color:#f94b4b;background:#fff1eb;padding:0 2px;position:relative;font-style:normal}

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

@@ -6,22 +6,17 @@ body{
     opacity: 0;
 }
 .text_info {
-    padding-top: 10vh;
-    display: flex;
-    padding-bottom: 10vh;
-    justify-content: center;
-    align-items: center;
     width: 100vw;
-    height: 100vh;
+    height: 100%;
     box-sizing: border-box;
-    overflow: hidden;
+    overflow-y: scroll;
 }
 .text_info .text_info_contain {
-    height: 100vh;
-    overflow-y: scroll;
-    padding: 10vh 25vw;
+    height: auto;
+    padding: 10vh 24vw;
     box-sizing: border-box;
     width: 100%;
+    background: #fff;
 }
 .text_info .text_info_contain p {
     font-size: 16px;
@@ -323,7 +318,6 @@ body{
 #fullpage {
     scroll-behavior: smooth;
     width: 100vw;
-    overflow-y: scroll;
     scrollbar-width: none; /* Firefox 兼容*/
     -ms-overflow-style: none; /* IE 10+ 兼容*/
     position: absolute;
@@ -341,6 +335,7 @@ body{
     padding-top: 7vh;
     scroll-snap-align: start;
     box-sizing: border-box;
+    overflow: hidden;
 }
 #zeroPage .el-carousel__container {
     height: 40vh;
@@ -689,7 +684,8 @@ body{
     justify-content: space-around;
     flex-direction: column;
     width: 100%;
-    height: 15vh;
+    height: 11vh;
+    margin-top: 5vh;
 }
 .Title .text {
     font-size: 1.8vw;
@@ -1141,6 +1137,42 @@ body{
     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%;
@@ -1174,7 +1206,7 @@ body{
     display: flex !important;
 }
 #fourPage .pageInner_contain {
-    width: 90%;
+    width: 80%;
     height: 30vw;
     display: flex;
     justify-content: space-between;
@@ -1210,14 +1242,6 @@ body{
 #fourPage .el-carousel__item .four_logo_1 {
     width: 50%;
     height: 80%;
-    background: url(/img/supplier-login/SuccessCases/success_1.jpg) no-repeat center;
-    background-size: contain;
-}
-#fourPage .el-carousel__item .four_logo_2 {
-     width: 50%;
-     height: 80%;
-     background: url(/img/supplier-login/SuccessCases/success_2.jpg) no-repeat center;
-     background-size: contain;
 }
 #fourPage .el-carousel__item .logo_text {
     width: 45%;

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

@@ -32,10 +32,6 @@ new Vue({
                 id: 6,
                 title: '增长社区',
                 href: '#sixPage'
-            },{
-                id: 7,
-                title: '帮助中心',
-                href: '#sevenPage'
             }
         ],
         // 基础
@@ -127,12 +123,12 @@ new Vue({
             {
                 id: 1,
                 title: '美业企谈|西班牙ROSS中国区执行总裁评论——采美是第三方专业的美业采购平台',
-                video: '/video/ROSS_1.mp4',
+                video: 'https://static.caimei365.com/www/video/video_01.mp4',
                 bg: '/img/supplier-login/ROSS_1.jpg',
             },{
                 id: 2,
                 title: '美业企谈|米蓝米岚品牌负责人Mita评论——采美是综合性平台，是我们的优质伙伴',
-                video: '/video/mp4_2.mp4',
+                video: 'https://static.caimei365.com/www/video/video_02.mp4',
                 bg: '/img/supplier-login/mp4_2.jpg',
             }
         ],
@@ -163,6 +159,49 @@ new Vue({
                 bg: 'https://img-b.caimei365.com/group1/M00/04/30/rB-lHGRVyn6AaS32AAFQ2sc7xQw877.jpg',
             },
         ],
+        contain_list: [
+            {
+                id: 1,
+                title: '品牌店铺搭建',
+                content: '轻松开启线上交易',
+            },{
+                id: 2,
+                title: '品牌展露',
+                content: '彰显品牌示例，提升企业品牌价值',
+            },{
+                id: 3,
+                title: '商品SKU管理',
+                content: '提高决策效率',
+            },
+        ],
+        athor_contain_list: [
+            {
+                id: 1,
+                title: '易装易用免维护',
+                content: '独立后台账号体系、会打字就会用、公众号无缝衔接',
+            },{
+                id: 2,
+                title: '授权认证功能',
+                content: '机构认证查询、设备认证查询、医师认证查询',
+            },{
+                id: 3,
+                title: '品牌运营',
+                content: '与机构客户建立双向沟通渠道',
+            },
+        ],
+        el_carousel_list: [
+            {
+                id: 1,
+                title: '私域流量运营难',
+                content: "来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧无法精准触达用户、回收市场数据。</br>采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌曝光度。</br>并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获取客户资料，筛选出优质客户。</br>既提高该品牌的知名度，又保证了用户数据的精准度。",
+                bg: '/img/supplier-login/SuccessCases/success_1.jpg',
+            },{
+                id: 2,
+                title: '营销获客难',
+                content: '连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。</br>采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。</br>',
+                bg: '/img/supplier-login/SuccessCases/success_2.jpg',
+            },
+        ],
         userInfo: JSON.parse(localStorage.getItem('userInfo')) || '',
         showContent: true,
         textContent: '',
@@ -214,14 +253,14 @@ new Vue({
             }, 800)
             const nav_link_item = this.$refs.nav_link_item
             const fullPage = this.$refs.fullPage
-            if (this.activeLinkId >= 0 && this.activeLinkId<=7) {
+            if (this.activeLinkId >= 0 && this.activeLinkId<=6) {
                 nav_link_item.style.left = this.activeLinkId  * 7 +'vw'
             } else if(this.activeLinkId < 0) {
                 this.activeLinkId = 0
                 nav_link_item.style.left = '0'
-            } else if(this.activeLinkId > 7) {
+            } else if(this.activeLinkId > 6) {
                 this.activeLinkId = 7
-                nav_link_item.style.left = '49vw'
+                nav_link_item.style.left = '42vw'
             }
             fullPage.style.top = -this.activeLinkId * 100 + 'vh'
         },
@@ -323,7 +362,6 @@ new Vue({
             fullPage.removeEventListener('mousewheel', (e) => this.scrollChange(e))
             this.showContent = false
             const textInfoForm = this.community_article_list.filter(item => item.id === id)
-            console.log(textInfoForm)
             this.textContent = textInfoForm[0].text
         },
         goToIndex() {
@@ -335,14 +373,10 @@ new Vue({
         },
         // 解决方案
         selectionQus() {
-            if (this.userInfo && this.userInfo.userIdentity === 3) {
-                this.$alert('请使用微信或电话联系客服', '解决方案', {
-                    confirmButtonText: '确定',
-                    callback: action => {}
-                });
-            } else {
-                window.location.href = '/supplierlogin.html'
-            }
+            this.$alert('如有需要，可通过右下角电话或微信联系客服', '提示', {
+                confirmButtonText: '确定',
+                callback: action => {}
+            });
         },
     },
 })

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

@@ -5,7 +5,7 @@
                 <img class="pcOnly" src="/img/base/logo.png" alt="采美 生美/医美采购服务平台"/>
                 <img class="h5Only" src="/img/base/logo_m.png" alt="采美 生美/医美采购服务平台"/>
             </a>
-            <p class="accountLogin">已有账号？请直接<a href="/login.html" rel="nofollow">登录</a></p>
+            <p class="accountLogin">已有账号？请直接<a href="/supplierlogin.html" rel="nofollow">登录</a></p>
         </div>
     </div>
     <input type="hidden" th:value="${coreServer}" id="coreServer">

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

@@ -104,5 +104,25 @@
         <div class="item">
             <span class="toTop icon mIcon">TOP</span>
         </div>
+        <div class="item">
+            <span class="Iphone icon mIcon">手机端</span>
+            <div class="qrCode_cx">
+                <div>
+                    <img src="/img/common/qr_code_mini.jpg" alt="采美小程序">
+                    <span>采美小程序</span>
+                </div>
+                <div>
+                    <img src="/img/common/qr_code_caimei.jpg" alt="采美公众号">
+                    <span>采美公众号</span>
+                </div>
+            </div>
+<!--            <div class="phoneHover mFixed">-->
+<!--                <div>-->
+<!--                    <p><span>工作日</span></p>-->
+<!--                    <p>周一 ～ 周五 / 09:00～18:00</p>-->
+<!--                    <i class="close"></i>-->
+<!--                </div>-->
+<!--            </div>-->
+        </div>
     </div>
 </footer>

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

@@ -26,8 +26,8 @@
                                 </div>
                             </div>
                             <div class="cartBtm">
-                                <span>共计：<em v-text="headCart.productCount"></em> 件</span>
-                                <span>合计：<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
+                                <span>共计：<span v-text="headCart.productCount"></span> 件</span>
+                                <span>合计：<span v-text="parseFloat(headCart.priceTotal).toFixed(2)"></span> 元</span>
                                 <a class="btn" href="/shopping/cart.html" rel="nofollow">去购物车结算</a>
                             </div>
                         </div>
@@ -117,7 +117,7 @@
                 <div class="q_item newCarLink" v-if="userIdentity!=3" @click="goCartsLinkFn" >
                     <div class="headCart">
                         <div class="bg_car"></div>
-                        <a v-if="userIdentity!=3" href="javascript:void(0)" class="addBtn icon" onclick="_czc.push(['_trackEvent','顶部导航','购物车','点击','','Um_Event_Cart'])">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
+                        <a v-if="userIdentity!=3" href="javascript:void(0)" class="addBtn icon" onclick="_czc.push(['_trackEvent','顶部导航','购物车','点击','','Um_Event_Cart'])">购物车<span style="color: #FF5B00;" v-text="'('+headCart.cartCount+')'"></span></a>
                         <div class="cartData">
                             <div v-if="headCart.cartCount>0">
                                 <div class="cartMain">
@@ -133,8 +133,8 @@
                                     </div>
                                 </div>
                                 <div class="cartBtm">
-                                    <span>共计：<em v-text="headCart.productCount"></em> 件</span>
-                                    <span>合计：<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
+                                    <span>共计：<span v-text="headCart.productCount"></span> 件</span>
+                                    <span>合计：<span v-text="parseFloat(headCart.priceTotal).toFixed(2)"></span> 元</span>
                                     <a class="btn" href="/shopping/cart.html" rel="nofollow">去购物车结算</a>
                                 </div>
                             </div>
@@ -151,8 +151,8 @@
                 <div class="q_item newMsgLink" @click="goMsgLinkFn('/supplier/message/list.html')">
                     <div class="bg_msg"></div>
                     <div class="headmsg">
-                        <a v-if="userIdentity===3" href="javascript:void(0)" class="WEB-icon msg-btn">消息<em v-text="'('+noticeNum+')'"></em></a>
-                        <a v-else  @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0)" class="WEB-icon msg-btn">消息<em v-text="'('+noticeNum+')'"></em></a>
+                        <a v-if="userIdentity===3" href="javascript:void(0)" class="WEB-icon msg-btn">消息<span style="color: #FF5B00;" v-text="'('+noticeNum+')'"></span></a>
+                        <a v-else  @click="goMsgLinkFn('/user/message/list.html')" href="javascript:void(0)" class="WEB-icon msg-btn">消息<span style="color: #FF5B00;" v-text="'('+noticeNum+')'"></span></a>
                     </div>
                 </div>
                 <div class="q_item newSupplierLink" v-if="userIdentity===3 || !loginStatus" @click="goSupplierLink">

src/main/resources/templates/index.html

@@ -568,6 +568,7 @@
     <div id="sideNav" v-if="isPC">
         <div class="item">
             <a class="item-sideNav" href="javascript:void(0);" v-for="nav in asideNav" :data-id="nav.id" v-text="nav.value" ></a>
+            <a class="item-sideNav" href="javascript:void(0);"></a>
         </div>
     </div>
     <!--新用户优惠券弹窗-->

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

@@ -33,6 +33,12 @@
                 <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>
@@ -158,19 +164,19 @@
                             <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 v-else class="select_btn" @click="obstacles">立即开通</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">按需定制</span>
+                            <span class="title" style="margin-left: -36px;">按需定制</span>
                         </div>
                         <div class="bg1_text">
                             <div style="width: 100%">
-                                <div style="margin-bottom: 5vh;color: #666666;font-weight: bold">优先解决企业局部痛点，如：</div>
+                                <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>
@@ -185,7 +191,7 @@
                 <div class="selection_item animate__animated" :class="activeId === 1 ? 'animate__flipInY' : ''">
                     <div class="selection_item_contain">
                         <div class="contain_bg_03">
-                            <span class="title">全案定制</span>
+                            <span class="title" style="margin-left: -36px;">全案定制</span>
                         </div>
                         <div class="bg1_text">
                             <div style="width: 100%">
@@ -231,49 +237,23 @@
                     </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">
-                            <div class="list_item">
-                                <div></div>
-                                <div style="font-weight: bold;font-size: 20px;">品牌店铺搭建</div>
-                                <div style="font-size: 16px;text-align: center;color: #666666;">轻松开启线上交易</div>
-                            </div>
-                            <div class="list_item">
+                        <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;">品牌展露</div>
-                                <div style="font-size: 16px;text-align: center;color: #666666;">彰显品牌示例，提升企业品牌价值</div>
-                            </div>
-                            <div class="list_item">
-                                <div></div>
-                                <div style="font-weight: bold;font-size: 20px;">商品SKU管理</div>
-                                <div style="font-size: 16px;text-align: center;color: #666666;">提高决策效率</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">
-                            <div class="list_item">
-                                <div class="list_item_logo"></div>
-                                <div class="text_contain">
-                                    <div class="text_contain_item">易装易用免维护</div>
-                                    <div class="text_contain_item2"></div>
-                                    <div class="text_contain_item3">独立后台账号体系、会打字就会用、公众号无缝衔接</div>
-                                </div>
-                            </div>
-                            <div class="list_item">
-                                <div class="list_item_logo"></div>
-                                <div class="text_contain">
-                                    <div class="text_contain_item">授权认证功能</div>
-                                    <div class="text_contain_item2"></div>
-                                    <div class="text_contain_item3">机构认证查询、设备认证查询、医师认证查询</div>
-                                </div>
-                            </div>
-                            <div class="list_item">
+                        <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">品牌运营</div>
+                                    <div class="text_contain_item">{{item.title}}</div>
                                     <div class="text_contain_item2"></div>
-                                    <div class="text_contain_item3">与机构客户建立双向沟通渠道</div>
+                                    <div class="text_contain_item3">{{item.content}}</div>
                                 </div>
                             </div>
                         </div>
@@ -316,7 +296,7 @@
                 </div>
             </div>
         </div>
-        <div id="fourPage" class="page section" >
+        <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>
@@ -325,30 +305,13 @@
                 <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>
-                            <div class="four_logo_1 animate__animated" :class="activeId === 4 ? 'animate__rotateInUpRight' : ''"></div>
-                            <div class="logo_text animate__animated" :class="activeId === 4 ? 'animate__rotateInUpLeft' : ''">
-                                <div class="logo_title">私域流量运营难</div>
-                                <div class="analysis">来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧
-                                    无法精准触达用户、回收市场数据。</br>
-                                    采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的
-                                    优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌
-                                    曝光度。</br>并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端
-                                    客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采
-                                    美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获
-                                    取客户资料，筛选出优质客户。</br>既提高该品牌的知名度，又保证了用户数据的
-                                    精准度。
-                                </div>
+                        <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' : ''">
+                                <el-image fit="cover" :src="item.bg" style="width: 100%; height: 100%;"></el-image>
                             </div>
-                        </el-carousel-item>
-                        <el-carousel-item>
-                            <div class="four_logo_2"></div>
-                            <div class="logo_text">
-                                <div class="logo_title">营销获客难</div>
-                                <div class="analysis">
-                                    连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。</br>
-                                    采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。</br>
-                                </div>
+                            <div class="logo_text animate__animated" :class="activeId === 4 ? 'animate__rotateInUpLeft' : ''">
+                                <div class="logo_title">{{item.title}}</div>
+                                <div class="analysis" v-html="item.content"></div>
                             </div>
                         </el-carousel-item>
                     </el-carousel>
@@ -391,12 +354,12 @@
                 </div>
             </div>
         </div>
-        <div id="sixPage" class="page section">
-            <div class="Title">
+        <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" v-if="activeId === 6">
+            <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>
@@ -433,7 +396,7 @@
                 </div>
             </div>
         </div>
-        <div id="sevenPage" class="page section">
+        <div id="sevenPage" class="page section" style="padding-top: 19vh;background: #fff;">
             <!-- 底部区域 end -->
             <template th:replace="components/footer"></template>
             <template th:replace="components/foot-link"></template>
@@ -447,6 +410,10 @@
     </div>
     <div class="text_info" v-else>
         <div class="text_info_contain" v-html="textContent" v-if="textContent"></div>
+        <!-- 底部区域 end -->
+        <template th:replace="components/footer"></template>
+        <template th:replace="components/foot-link"></template>
+
     </div>
 </div>