updated

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

@@ -554,6 +554,20 @@ html {
     width: 100%;
     border: 1px solid #EAEAEA;
     box-sizing: border-box;
+    position: relative;
+}
+.my-swipe .van-swipe-item .video_item .player_bg {
+    position: absolute;
+    width: 100%;
+    height: 21.733vw;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    background: rgba(24, 23, 23, 0.4);
+    justify-content: center;
+    align-items: center;
+    z-index: 11;
+    display: flex;
 }
 .my-swipe .van-swipe-item .video_item .video_img {
     height: 21.733vw;
@@ -615,8 +629,17 @@ html {
     left: 0;
     top: 0;
     background: rgba(0, 0, 0, 0.5);
+    z-index: 113;
+}
+.cm_video_player {
+    display: none;
 }
 video {
-    width: 90%;
+    width: 80%;
     height: 60vw;
 }
+.text_info_contain {
+    padding: 9.3vw 7.2vw;
+    box-sizing: border-box;
+    margin-top: 13.6vw;
+}

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

@@ -294,7 +294,6 @@ new Vue({
             return val
         }
     },
-    computed: {},
     watch: {
         screenWidth: {
             handler(val) {

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

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

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

@@ -464,6 +464,9 @@
                             <van-swipe class="my-swipe" :width="communitySideWidth" :show-indicators="false" :loop="false" indicator-color="#FF5B00">
                                 <van-swipe-item v-for="item in community_video_list" :key="item.id">
                                     <div class="video_item">
+                                        <div class="player_bg" @click="playerOn(item.video)">
+                                            <el-image style="width: 6vw; height: 6vw" src="/img/supplier-login/player.png" fit="contain"></el-image>
+                                        </div>
                                         <div class="video_img">
                                             <img style="width: 100%;height: 100%" :src="item.bg"/>
                                         </div>
@@ -490,7 +493,7 @@
                         </div>
                         <div v-else class="cm_taking">
                             <van-swipe class="my-swipe" :width="communitySideWidth" :loop="false" indicator-color="#FF5B00">
-                                <van-swipe-item v-for="item in community_article_list" :key="item.id">
+                                <van-swipe-item v-for="item in community_article_list" :key="item.id" @click="textInfo(item.id)">
                                     <div class="video_item">
                                         <div class="video_img">
                                             <img style="width: 100%;height: 100%;object-fit: cover" :src="item.bg"/>

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

@@ -5,27 +5,27 @@
   <meta charset="UTF-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
+  <meta name="format-detection" content="telephone=yes"/>
   <title>美业参谋</title>
   <link rel="canonical" href="https://www.caimei365.com/"/>
   <template th:replace="components/head-link"></template>
   <link th:href="@{/css/base/floor.css(v=${version})}" rel="stylesheet" type="text/css">
   <link th:href="@{/css/index/index_new.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
   <link th:href="@{/css/index/index_new.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
-  <link th:href="@{/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">
+  <link th:href="@{/css/supplier-login/login-h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
   <!--element ui 样式表-->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
   <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
-  <template th:replace="components/analysis"></template>
+  <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>
+  <!--    <template th:replace="components/analysis"></template>-->
 </head>
 <body>
 <div id="login_content" ref="login_content">
   <div class="login_header">
     <div class="login_header_container">
       <div class="img_logo" @click="goToIndex">
-        <a href="javascript:void(0);"></a>
         <div class="logo" style="background-size: contain"></div>
         <div class="text">美业参谋</div>
       </div>
@@ -42,8 +42,8 @@
           <div></div>
           <div>153-3889-7365</div>
         </div>
-        <div v-if="userInfo && userInfo.userIdentity === 3" v-cloak class="username">
-          <el-popover placement="bottom" width="50" trigger="hover">
+        <div v-if="userInfo && userInfo.userIdentity === 3 && isPC" v-cloak class="username">
+          <el-popover placement="bottom" width="50" trigger="hover" v-if="isPC">
             <div class="cShow" v-if="userInfo && userInfo.userIdentity === 3">
               <a class="a_cm" href="/supplier/dashboard.html" rel="nofollow">我的采美</a>
               <a class="a_cm" href="javascript:void(0);" @click="pageLinkSupplier()">店铺管理</a>
@@ -52,15 +52,24 @@
             <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 v-if="!isPC && userInfo" class="H5_header">
+          <div class="H5_username" @click="hideAction">
+            <img src="/img/supplier-login/H5/userdefault.png" style="width: 5vw;height: 5vw"/>
+          </div>
+          <div style="color: #FF5B00;font-size: 3.6vw;margin: 0 3.6vw;">菜单</div>
+          <img src="/img/supplier-login/H5/openMenu.png" @click="openDrawn" v-if="!drawer" style="width: 3.2vw;height: 3.2vw"/>
+          <img src="/img/supplier-login/H5/close.png" v-else @click="openDrawn" style="width: 3.2vw;height: 3.2vw"/>
+        </div>
+        <div class="login_regist" v-if="!isPC && !userInfo">
           <div class="login_btn"><a rel="nofollow" href="/supplier/register.html">注册</a></div>
           <div class="login_btn" style="background: #FF5B00;"><a class="login_a" style="color:white" href="/supplierlogin.html" rel="nofollow">登录</a></div>
         </div>
       </div>
     </div>
   </div>
-  <div class="slide_icon" v-if="showContent">
+  <div class="slide_icon" v-if="showContent && isPC">
     <div class="slide_icon_item slide_icon_phone">
+      <img src="" />
       电话联系
       <div class="tooltip tooltip_1" :style="{bottom: activeLinkId!==0 ? '250px':'180px'}">
         <div class="day">周一至周五 9:00~1800</div>
@@ -68,16 +77,28 @@
       </div>
     </div>
     <div class="slide_icon_item slide_icon_qrcode">
+      <img src="" />
       微信客服
       <div class="tooltip tooltip_2" :style="{bottom: activeLinkId!==0 ? '50px':'0'}">
         <img src="/img/common/qr_code_kefu.png" alt="采美客服">
       </div>
     </div>
-    <a href="#" class="slide_icon_item goTop" @click="handlerNav({id: 0})" v-if="activeLinkId!==0"></a>
+    <div class="slide_icon_item goTop" @click="H5link({href: '#zeroPage'})" v-if="activeLinkId!==0"></div>
+  </div>
+  <div class="slide_icon" v-if="!isPC && showContent">
+    <div class="slide_icon_item slide_icon_phone" @click="handlerDialog(true)">
+      <img src="" />
+      电话联系
+    </div>
+    <div class="slide_icon_item slide_icon_qrcode" @click="handlerDialog(false)">
+      <img src="" />
+      微信客服
+    </div>
+    <div class="slide_icon_item goTop" @click="H5link({href: '#zeroPage'})">123</div>
   </div>
   <div id="fullpage" ref="fullPage" v-if="showContent">
     <div id="zeroPage" class="page section">
-      <el-carousel arrow="always" :interval="4000">
+      <el-carousel arrow="always" :interval="4000" v-if="isPC">
         <el-carousel-item>
           <div class="banner01">
             <div class="left animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''"></div>
@@ -88,11 +109,19 @@
           <div class="banner02"></div>
         </el-carousel-item>
       </el-carousel>
+      <van-swipe style="height: 51vw;" v-else>
+        <van-swipe-item>
+          <div class="H5-banner_1"></div>
+        </van-swipe-item>
+        <van-swipe-item>
+          <div class="H5-banner_2"></div>
+        </van-swipe-item>
+      </van-swipe>
       <div class="Title">
         <div class="text animate__animated">全生命周期陪跑服务</div>
         <div class="title animate__animated">采美，更专业的美业数字化营销服务</div>
       </div>
-      <div class="server">
+      <div class="server" v-if="isPC">
         <div class="server_1 animate__animated">
           <div class="box tourist_bg">
             <div class="tourist_bg_logo"></div>
@@ -135,6 +164,30 @@
           </div>
         </div>
       </div>
+      <div class="init server" v-if="!isPC">
+        <van-swipe :loop="false" :width="swiperSideWidth">
+          <van-swipe-item style="margin-left: 7.2vw;">
+            <img class="server_img"/>
+            <div class="title">全渠道获客</div>
+            <div class="text">精准投放推广内容触达B端客户</div>
+            <div class="text">精准识别全渠道匿名用户线索</div>
+          </van-swipe-item>
+          <van-swipe-item>
+            <img class="server_img"/>
+            <div class="title">潜客运营</div>
+            <div class="text">潜客筛选</div>
+            <div class="text">精细化分层运营</div>
+            <div class="text">精准推送内容</div>
+          </van-swipe-item>
+          <van-swipe-item>
+            <img class="server_img"/>
+            <div class="title">销售转化</div>
+            <div class="text">全链条商机管理，用户线索流程清晰，高效流转</div>
+            <div class="text">全场景交易平台，线上线下一体化把握每一条商机</div>
+            <div class="text">全方位售后服务，延长客户生命周期、提高复购率</div>
+          </van-swipe-item>
+        </van-swipe>
+      </div>
     </div>
     <div id="firstPage" class="page section">
       <div class="Title">
@@ -144,7 +197,7 @@
       <div class="selection">
         <div class="selection_item animate__animated">
           <div class="selection_item_contain">
-            <div class="contain_bg_01">
+            <div class="contain_bg_01 ">
               <span class="title">基础版</span>
             </div>
             <div class="bg1_text">
@@ -154,9 +207,9 @@
                   <div v-cloak>{{item}}</div>
                 </div>
               </div>
-              <div v-cloak style="width: 100%;">
-                ￥<span style="font-size: 40px; font-weight: bold;">26800</span>/年
-              </div>
+              <!--                            <div v-cloak style="width: 100%;">-->
+              <!--                                ￥<span style="font-size: 40px; font-weight: bold;">26800</span>/年-->
+              <!--                            </div>-->
               <!--                            <div v-if="userInfo && userInfo.userIdentity === 3" class="select_btn_login">已登录</div>-->
               <div class="select_btn" @click="selectionQus">查看解决方案</div>
             </div>
@@ -168,12 +221,10 @@
               <span class="title" style="margin-left: -36px;">高级版</span>
             </div>
             <div class="bg1_text">
-              <div style="width: 100%">
-                <div class="text_contain">
-                  <div class="bg1_contain" v-for="(item, id) in customizationList" :key="id">
-                    <div class="square_icon"></div>
-                    <div v-cloak>{{item}}</div>
-                  </div>
+              <div class="text_contain">
+                <div class="bg1_contain" v-for="(item, id) in customizationList" :key="id">
+                  <div class="square_icon"></div>
+                  <div v-cloak>{{item}}</div>
                 </div>
               </div>
               <div class="select_btn" @click="selectionQus">查看解决方案</div>
@@ -186,12 +237,10 @@
               <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 class="text_contain">
+                <div class="bg1_contain" v-for="(item, id) in caseList" :key="id">
+                  <div class="square_icon"></div>
+                  <div v-cloak>{{item}}</div>
                 </div>
               </div>
               <div class="select_btn" @click="selectionQus">查看解决方案</div>
@@ -205,7 +254,7 @@
         <div class="text animate__animated">基础运营产品</div>
         <div class="title animate__animated">使企业走向数字化的基石</div>
       </div>
-      <div class="operationa">
+      <div class="operationa" v-if="isPC">
         <div class="operationa_contain">
           <div class="bg1 animate__animated" v-show="isStore"></div>
           <div class="bg2 animate__animated" v-show="isStore"></div>
@@ -252,13 +301,21 @@
           </div>
         </div>
       </div>
+      <div class="operationa" v-else>
+        <div class="H5_opera">
+          <div class="author"></div>
+          <div class="online_store"></div>
+          <div class="opera_online"></div>
+          <div class="opera_author"></div>
+        </div>
+      </div>
     </div>
     <div id="thirdPage" class="page section">
       <div class="Title">
         <div class="text animate__animated">场景营销工具</div>
         <div class="title animate__animated">多样化工具，全方位助力您的企业目标</div>
       </div>
-      <div class="pageInner">
+      <div class="pageInner" v-if="isPC">
         <div class="container" v-cloak>
           <div class="thirdPage_container_contant">
             <div class="container_title" ref="container_title_1">引流获客</div>
@@ -287,13 +344,30 @@
           </div>
         </div>
       </div>
+      <div v-else class="H5_pageInner">
+        <div class="H5_contant">
+          <div class="H5_contant_item" v-for="item in filterH5ScenarioList" :key="item.id">
+            <div class="title">{{item.title}}</div>
+            <div class="content">{{item.contant}}</div>
+            <img />
+          </div>
+          <div class="getMore" v-if="filterH5ScenarioList.length < 12" @click="ScenarioListFilter(12)">
+            展开查看更多
+          </div>
+        </div>
+      </div>
     </div>
     <div id="fourPage" class="page section" style="background: #fff;">
       <div class="Title">
         <div class="text animate__animated">成功案例</div>
-        <div class="title animate__animated">了解已合作品牌的真实推广案例，借鉴成功经验，助力有效推广，实现商业目标</div>
+        <div class="title animate__animated" v-if="isPC">
+          了解已合作品牌的真实推广案例，借鉴成功经验，助力有效推广，实现商业目标
+        </div>
+        <div class="title animate__animated" v-else>
+          了解已合作品牌的真实推广案例，借鉴成功经验助力<br />有效推广，实现商业目标
+        </div>
       </div>
-      <div style="display: flex;justify-content: center;align-items: center;margin-top: 10vh;">
+      <div style="display: flex;justify-content: center;align-items: center;margin-top: 10vh;" v-if="isPC">
         <div class="pageInner_contain">
           <div class="nextChange" :class="isActiveNext ? 'isActiveNext' : ''" @click="nextPageCar">
             <</div>
@@ -311,6 +385,24 @@
           <div class="nextChange" :class="isActiveNext ? '' : 'isActiveNext'" @click="prePageCar">></div>
         </div>
       </div>
+      <div class="H5_success" v-else>
+        <van-swipe :loop="false" :width="successSideWidth">
+          <van-swipe-item>
+            <div class="innerSuccess">
+              <div class="title">私域流量运营难</div>
+              <div class="content">来自西班牙的明星品牌，在进入中国市场后行了大量的运营资源投放，却依旧无法精准触达用户、回收市场数据。采美采用B2B2C私域运营模式对该品牌及竞品进行全面分析，对比两者之间的优势和劣势，为需要宣传的品牌进行关键词组布局，在采美商城优先进行品牌曝光度。并通过认证通、采美社群等工具，向B端客户推送相关活动，刺激B端客户向C端客户进一步传播品牌形象和实力，从而吸引更多的B端客户来访；采美CRM系统对来访客户做用户行为轨迹跟踪，完善用户画像，帮助品牌精准获取客户资料，筛选出优质客户。既提高该品牌的知名度，又保证了用户数据的精准度。</div>
+              <img class="success_img" src="/img/supplier-login/H5/success_1.jpg" />
+            </div>
+          </van-swipe-item>
+          <van-swipe-item>
+            <div class="innerSuccess" style="margin-left: 3vw;">
+              <div class="title">营销获客难</div>
+              <div class="content">连续七年专注敏感肌肤的皮肤管理品牌,在法国荣获全球护肤品创新品牌大奖，品牌实力不容小觑，但由于对B端机构宣传不足,在营销获客上十分艰难。 采美团队通过前期市场调研分析后提炼了B端关键词并进行布局，将品牌专利技术的相关内容在采美媒体矩阵同步分发，最终形成全渠道、全链路整合内容营销；将旗下产品搭配导入仪器做联合活动，双向锁定潜在客户，客户询盘量显著增长，解决了单一产品销售难的问题。</div>
+              <img class="success_img" src="/img/supplier-login/H5/success_2.jpg" />
+            </div>
+          </van-swipe-item>
+        </van-swipe>
+      </div>
     </div>
     <div id="fivePage" class="page section">
       <div class="Title" style="color: white">
@@ -324,6 +416,7 @@
           </div>
           <div class="caimei_report" v-cloak>
             <div class="report_item" v-for="item in report_list" :key="item.id">
+              <img class="report_item_img" v-if="!isPC" src="/img/supplier-login/07-caimei/cirle.png"/>
               <div class="report_logo animate__animated">
                 <span class="animate__animated">{{item.contant}}</span>
               </div>
@@ -350,11 +443,11 @@
         <div class="text animate__animated">增长社区</div>
         <div class="title animate__animated">数十年资深美业运营经验，教你快速成长</div>
       </div>
-      <div style="display:flex; justify-content: center;align-items: center;background: #fff;">
+      <div class="contant_init">
         <div class="community">
           <div class="community_video">
             <div class="community_title">美业企谈</div>
-            <div class="community_list" v-cloak>
+            <div class="community_list" v-cloak v-if="isPC">
               <div class="video_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_video_list" :key="item.id" @click="playerOn(item.video)">
                 <div class="video_list_item_content">
                   <div class="player_bg">
@@ -367,10 +460,25 @@
                 </div>
               </div>
             </div>
+            <div v-else class="cm_taking">
+              <van-swipe class="my-swipe" :width="communitySideWidth" :show-indicators="false" :loop="false" indicator-color="#FF5B00">
+                <van-swipe-item v-for="item in community_video_list" :key="item.id">
+                  <div class="video_item">
+                    <div class="player_bg" @click="playerOn(item.video)">
+                      <el-image style="width: 6vw; height: 6vw" src="/img/supplier-login/player.png" fit="contain"></el-image>
+                    </div>
+                    <div class="video_img">
+                      <img style="width: 100%;height: 100%" :src="item.bg"/>
+                    </div>
+                    <div class="video_title">{{item.title | textSubString(17)}}</div>
+                  </div>
+                </van-swipe-item>
+              </van-swipe>
+            </div>
           </div>
           <div class="community_article">
             <div class="community_title">干货知识</div>
-            <div class="community_list" v-cloak>
+            <div class="community_list" v-if="isPC" v-cloak>
               <div class="article_list_item" :style="{marginLeft: item.id!==1 ? '1%' : '0'}" v-for="item in community_article_list" :key="item.id" @click="textInfo(item.id)">
                 <div class="article_list_item_content">
                   <div class="article_bg">
@@ -383,16 +491,36 @@
                 </div>
               </div>
             </div>
+            <div v-else class="cm_taking">
+              <van-swipe class="my-swipe" :width="communitySideWidth" :loop="false" indicator-color="#FF5B00">
+                <van-swipe-item v-for="item in community_article_list" :key="item.id" @click="textInfo(item.id)">
+                  <div class="video_item">
+                    <div class="video_img">
+                      <img style="width: 100%;height: 100%;object-fit: cover" :src="item.bg"/>
+                    </div>
+                    <div class="article_contant">
+                      <div class="article_tit">{{item.title}}</div>
+                      <div class="article_text">{{item.content}}</div>
+                    </div>
+                  </div>
+                </van-swipe-item>
+              </van-swipe>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div id="sevenPage" class="page" style="display: flex;
+    <div v-if="isPC" id="sevenPage" class="page" style="display: flex;
                     flex-direction: column;
                     align-items: end;
                     justify-content: end;background: #fff;height: auto;">
       <!-- 底部区域 end -->
-      <template th:replace="components/footer"></template>
+      <template th:replace="components/footer" ></template>
+      <template th:replace="components/foot-link"></template>
+    </div>
+    <div v-if="!isPC" id="sevenPage">
+      <!-- 底部区域 end -->
+      <template th:replace="components/footer" ></template>
       <template th:replace="components/foot-link"></template>
     </div>
     <div class="cm_video_player" @click="playerOff" ref="Myplayer">
@@ -401,24 +529,45 @@
         您的浏览器不支持Video标签。
       </video>
     </div>
+    <!--  微信电话弹窗  -->
+    <van-popup id="H5dialogVisible" round v-model="H5dialogVisible">
+      <div class="showIphone" v-if="showIphone">
+        <div class="showIphone_time">周一至周五 9:00~1800</div>
+        <div class="showIphone_phone" @click="callPhone">153-3889-7365</div>
+      </div>
+      <img style="width: 48vw; height: 48vw;" src="/img/common/qr_code_kefu.png" alt="采美客服" v-else/>
+    </van-popup>
+    <van-popup v-model="showPopup" round>
+      <div id="H5showPopup">
+        <div>确定拨打<span style="color: #FF5B00;font-weight: bold;">153-3889-7365 </span>吗？</div>
+        <div style="display: flex;justify-content: space-between;">
+          <el-button class="btn_popup" @click="cancel">取消</el-button>
+          <el-button class="btn_popup" type="primary" @click="confirm">确定</el-button>
+        </div>
+      </div>
+    </van-popup>
   </div>
-  <div class="text_info" v-else style="background: #fff;">
+  <div class="text_info" v-if="!showContent" style="background: #fff;">
     <div class="text_info_contain" v-html="JSON.parse(localStorage.getItem('text_info_from')).text"></div>
     <!-- 底部区域 end -->
-    <template th:replace="components/footer"></template>
-    <template th:replace="components/foot-link"></template>
-
+<!--    <template th:replace="components/footer" v-if="isPC"></template>-->
+<!--    <template th:replace="components/foot-link" v-if="isPC"></template>-->
   </div>
+  <!--  抽屉  -->
+  <el-drawer
+          :visible.sync="drawer"
+          v-if="!isPC">
+    <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
+  </el-drawer>
+  <!--    底部选项   -->
+  <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
+  <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
 </div>
 
 
-<script charset="utf-8" type="text/javascript" src="/lib/jquery-3.6.0.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/swiper.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery-confirm.min.js"></script>
 <script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></script>
+<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
+<!--<script charset="utf-8" type="text/javascript" src="/lib/lazyload.js"></script>-->
 <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-login/text_info.js(v=${version})}"></script>
 </body>