updated

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

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

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

@@ -104,7 +104,7 @@ new Vue({
             {
                 id: 1,
                 contant: '100+',
-                title: '供应商品牌'
+                title: '供应商品牌',
             },{
                 id: 2,
                 contant: '1万+',
@@ -205,11 +205,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)
     },
     filters: {
         textSubString(val, index) {
@@ -221,7 +295,44 @@ new Vue({
         }
     },
     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
@@ -390,5 +501,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

@@ -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/login.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">
+        <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,22 @@
                                 </div>
                             </div>
                         </div>
+                        <div v-else class="cm_taking">
+                            <van-swipe class="my-swipe" :width="communitySideWidth" :show-indicators="false" :loop="false" indicator-color="#FF5B00">
+                                <van-swipe-item v-for="item in community_video_list" :key="item.id">
+                                    <div class="video_item">
+                                        <div class="video_img">
+                                            <img style="width: 100%;height: 100%" :src="item.bg"/>
+                                        </div>
+                                        <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 +488,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">
+                                    <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 +526,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_contain" v-html="textContent" v-if="textContent"></div>
         <!-- 底部区域 end -->
         <template th:replace="components/footer"></template>
         <template th:replace="components/foot-link"></template>
-
     </div>
+    <!--  抽屉  -->
+    <el-drawer
+            :visible.sync="drawer"
+            v-if="!isPC">
+        <div class="drawer_box" @click="H5link(item)" v-for="item in activeLinks" :key="item.id">{{item.title}}</div>
+    </el-drawer>
+    <!--    底部选项   -->
+    <van-action-sheet v-model="cShow" :actions="supplierActions" @select="onSelect" v-if="userInfo.userIdentity === 3" />
+    <van-action-sheet v-model="cShow" :actions="userActions" @select="onSelect" v-if="userInfo.userIdentity === 2 || userInfo.userIdentity === 4" />
 </div>
 
 
-<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/login.js(v=${version})}"></script>
 </body>