|
@@ -30,7 +30,7 @@
|
|
<div class="text">美业参谋</div>
|
|
<div class="text">美业参谋</div>
|
|
</div>
|
|
</div>
|
|
<div class="header_link" v-cloak>
|
|
<div class="header_link" v-cloak>
|
|
- <a ref="link_item" :href="item.href" @click="handlerNav(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
|
|
|
|
|
|
+ <a ref="link_item" @click="H5link(item)" class="header_link_itme" :class="activeLinkId === item.id ? 'isActiveLink' : ''" v-for="item in activeLinks" :key="item.id">
|
|
{{item.title}}
|
|
{{item.title}}
|
|
</a>
|
|
</a>
|
|
<div class="nav_link" ref="nav_link_item">
|
|
<div class="nav_link" ref="nav_link_item">
|
|
@@ -67,491 +67,11 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <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>
|
|
|
|
- <div class="phone_number">153-3889-7365</div>
|
|
|
|
- </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>
|
|
|
|
- <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" v-if="isPC">
|
|
|
|
- <el-carousel-item>
|
|
|
|
- <div class="banner01">
|
|
|
|
- <div class="left animate__animated" :class="activeId === 0 ? 'animate__backInLeft' : ''"></div>
|
|
|
|
- <div class="right animate__animated" :class="activeId === 0 ? 'animate__backInRight' : ''"></div>
|
|
|
|
- </div>
|
|
|
|
- </el-carousel-item>
|
|
|
|
- <el-carousel-item>
|
|
|
|
- <div class="banner02"></div>
|
|
|
|
- </el-carousel-item>
|
|
|
|
- </el-carousel>
|
|
|
|
- <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" v-if="isPC">
|
|
|
|
- <div class="server_1 animate__animated">
|
|
|
|
- <div class="box tourist_bg">
|
|
|
|
- <div class="tourist_bg_logo"></div>
|
|
|
|
- <div class="tourist_bg_title">全渠道获客</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="box tourist">
|
|
|
|
- <div class="tourist_logo"></div>
|
|
|
|
- <div class="tourist_title">全渠道获客</div>
|
|
|
|
- <div class="tourist_li">|</div>
|
|
|
|
- <div class="all_cont">· 精准投放推广内容触达B端客户 ·</div>
|
|
|
|
- <div class="all_cont">· 精准识别全渠道匿名用户线索 ·</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="server_2 animate__animated">
|
|
|
|
- <div class="box operate_bg">
|
|
|
|
- <div class="operate_bg_logo"></div>
|
|
|
|
- <div class="operate_bg_title">潜客运营</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="box operate">
|
|
|
|
- <div class="operate_logo"></div>
|
|
|
|
- <div class="operate_title">潜客运营</div>
|
|
|
|
- <div class="operate_li">|</div>
|
|
|
|
- <div class="all_cont">· 潜客筛选 ·</div>
|
|
|
|
- <div class="all_cont">· 精细化分层运营 ·</div>
|
|
|
|
- <div class="all_cont">· 精准推送内容 ·</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="server_3 animate__animated">
|
|
|
|
- <div class="box sale_bg">
|
|
|
|
- <div class="sale_bg_logo"></div>
|
|
|
|
- <div class="sale_bg_title">销售转化</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="box sale">
|
|
|
|
- <div class="sale_logo"></div>
|
|
|
|
- <div class="sale_title">销售转化</div>
|
|
|
|
- <div class="sale_li">|</div>
|
|
|
|
- <div class="all_cont">· 全链条商机管理,用户线索流程清晰,高效流转 ·</div>
|
|
|
|
- <div class="all_cont">· 全场景交易平台,线上线下一体化把握每一条商机 ·</div>
|
|
|
|
- <div class="all_cont">· 全方位售后服务,延长客户生命周期、提高复购率 ·</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div 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">
|
|
|
|
- <div class="text animate__animated">解决方案</div>
|
|
|
|
- <div class="title animate__animated">满足企业全方位需求</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="selection">
|
|
|
|
- <div class="selection_item animate__animated">
|
|
|
|
- <div class="selection_item_contain">
|
|
|
|
- <div class="contain_bg_01 ">
|
|
|
|
- <span class="title">基础版</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="bg1_text">
|
|
|
|
- <div class="text_contain">
|
|
|
|
- <div class="bg1_contain" v-for="(item, id) in foundationList" :key="id">
|
|
|
|
- <div class="square_icon"></div>
|
|
|
|
- <div v-cloak>{{item}}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <!-- <div v-cloak style="width: 100%;">-->
|
|
|
|
- <!-- ¥<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>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="selection_item animate__animated">
|
|
|
|
- <div class="selection_item_contain">
|
|
|
|
- <div class="contain_bg_02">
|
|
|
|
- <span class="title" style="margin-left: -36px;">高级版</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="bg1_text">
|
|
|
|
- <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>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="selection_item animate__animated">
|
|
|
|
- <div class="selection_item_contain">
|
|
|
|
- <div class="contain_bg_03">
|
|
|
|
- <span class="title" style="margin-left: -36px;">战略版</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="bg1_text">
|
|
|
|
- <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>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div id="secondPage" class="page section">
|
|
|
|
- <div class="Title">
|
|
|
|
- <div class="text animate__animated">基础运营产品</div>
|
|
|
|
- <div class="title animate__animated">使企业走向数字化的基石</div>
|
|
|
|
- </div>
|
|
|
|
- <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>
|
|
|
|
- <div class="bg3" v-show="isAthor"></div>
|
|
|
|
- <div class="bg4" v-show="isAthor"></div>
|
|
|
|
- <div class="online_store" v-show="isStore">
|
|
|
|
- <div class="online_logo animate__animated"></div>
|
|
|
|
- <div class="online_title">在线商城</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="online" v-show="isAthor" @click="changeModeAuthor">
|
|
|
|
- <div class="online_logo"></div>
|
|
|
|
- <div class="online_title">在线商城</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="author" @click="changeModeAuthor" v-show="isStore">
|
|
|
|
- <div class="author_title">正品认证通</div>
|
|
|
|
- <div class="author_logo"></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="author_active" v-show="isAthor">
|
|
|
|
- <div class="online_logo animate__animated"></div>
|
|
|
|
- <div class="online_title" style="color: white">正品认证通</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="contain" v-show="isStore">
|
|
|
|
- <div class="contain_logo animate__animated"></div>
|
|
|
|
- <div class="contain_list" v-cloak>
|
|
|
|
- <div class="list_item" v-for="item in contain_list" :key="item.id">
|
|
|
|
- <div></div>
|
|
|
|
- <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">
|
|
|
|
- <div class="athor_contain_logo animate__animated"></div>
|
|
|
|
- <div class="athor_contain_list" v-cloak>
|
|
|
|
- <div class="list_item" v-for="item in athor_contain_list" :key="item.id">
|
|
|
|
- <div class="list_item_logo"></div>
|
|
|
|
- <div class="text_contain">
|
|
|
|
- <div class="text_contain_item">{{item.title}}</div>
|
|
|
|
- <div class="text_contain_item2"></div>
|
|
|
|
- <div class="text_contain_item3">{{item.content}}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div 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" v-if="isPC">
|
|
|
|
- <div class="container" v-cloak>
|
|
|
|
- <div class="thirdPage_container_contant">
|
|
|
|
- <div class="container_title" ref="container_title_1">引流获客</div>
|
|
|
|
- <div class="container_title" ref="container_title_2">潜客运营</div>
|
|
|
|
- <div class="container_title" ref="container_title_3">销售转化</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="container_item" v-for="(item, index) in ScenarioList" :key="index" @mouseleave="opacityTitle">
|
|
|
|
- <div class="container_item_active" v-for="i in item.contant" :key="i.id" @mouseenter="mouseTitle(index)">
|
|
|
|
- <div class="container_item_hover animate__animated" v-if="i.id % 2 !==0">
|
|
|
|
- <div class="item_title">{{i.title}}</div>
|
|
|
|
- <div class="item_contant">{{i.contant}}</div>
|
|
|
|
- <div class="item_logo_box">
|
|
|
|
- <div class="item_logo" :id=`item_logo_${i.id}`></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="item_title_p">{{i.title}}</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="container_item_hover2 animate__animated" v-else>
|
|
|
|
- <div class="item_title">{{i.title}}</div>
|
|
|
|
- <div class="item_contant">{{i.contant}}</div>
|
|
|
|
- <div class="item_logo_box">
|
|
|
|
- <div class="item_logo" :id=`item_logo_${i.id}`></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="item_title_p">{{i.title}}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div 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" 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;" v-if="isPC">
|
|
|
|
- <div class="pageInner_contain">
|
|
|
|
- <div class="nextChange" :class="isActiveNext ? 'isActiveNext' : ''" @click="nextPageCar">
|
|
|
|
- <</div>
|
|
|
|
- <el-carousel indicator-position="outside" ref="carousel" height="30vw" :interval="4000">
|
|
|
|
- <el-carousel-item v-for="item in el_carousel_list" :key="item.id">
|
|
|
|
- <div class="four_logo_1 animate__animated">
|
|
|
|
- <el-image fit="cover" :src="item.bg" style="width: 100%; height: 100%;"></el-image>
|
|
|
|
- </div>
|
|
|
|
- <div class="logo_text animate__animated">
|
|
|
|
- <div class="logo_title">{{item.title}}</div>
|
|
|
|
- <div class="analysis" v-html="item.content"></div>
|
|
|
|
- </div>
|
|
|
|
- </el-carousel-item>
|
|
|
|
- </el-carousel>
|
|
|
|
- <div class="nextChange" :class="isActiveNext ? '' : 'isActiveNext'" @click="prePageCar">></div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div 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">
|
|
|
|
- <div style="color: white" class="text animate__animated">关于采美</div>
|
|
|
|
- <div class="title animate__animated">了解采美,合作共赢</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="inner_contain">
|
|
|
|
- <div class="inner">
|
|
|
|
- <div class="caimei_introduction animate__animated">
|
|
|
|
- 采美网是一个生活美容和医疗美容行业B2B数字化营销和供应链服务平台,其核心资产包括采购 信息中心,媒体矩阵,数字运营以及线上交易和 供应链管理软件,建立了一个从信息引流到数字 运营到交易结算一体化平台,站外引流站内运营,采购转化的闭环生态,采美平台以创造客户价 值为核心,借助数字化营销的优 势,赋能美业供应链上下游企业,共同打造一站式美业双线融合的供应链新生态。
|
|
|
|
- </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>
|
|
|
|
- <div class="report_title animate__animated">
|
|
|
|
- {{item.title}}
|
|
|
|
- </div>
|
|
|
|
- <div class="report_line">
|
|
|
|
- <div class="box1 card4"></div>
|
|
|
|
- <div class="container">
|
|
|
|
- <div class="box">
|
|
|
|
- <span style="--i:1"></span>
|
|
|
|
- <span style="--i:2"></span>
|
|
|
|
- <span style="--i:3"></span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div id="sixPage" class="page section" style="background: #fff">
|
|
|
|
- <div class="Title" style="background: #fff">
|
|
|
|
- <div class="text animate__animated">增长社区</div>
|
|
|
|
- <div class="title animate__animated">数十年资深美业运营经验,教你快速成长</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="contant_init">
|
|
|
|
- <div class="community">
|
|
|
|
- <div class="community_video">
|
|
|
|
- <div class="community_title">美业企谈</div>
|
|
|
|
- <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">
|
|
|
|
- <el-image style="width: 50px; height: 50px" src="/img/supplier-login/player.png" fit="contain"></el-image>
|
|
|
|
- </div>
|
|
|
|
- <div class="video_player">
|
|
|
|
- <el-image :src="item.bg" fit="contain"></el-image>
|
|
|
|
- </div>
|
|
|
|
- <div class="video_title">{{item.title | textSubString(45)}}</div>
|
|
|
|
- </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-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">
|
|
|
|
- <el-image :src="item.bg" fit="cover" style="width: 100%; height: 100%;"></el-image>
|
|
|
|
- </div>
|
|
|
|
- <div class="article_text">
|
|
|
|
- <div class="text_title">{{item.title | textSubString(12)}}</div>
|
|
|
|
- <div style="padding: 0 4%;">{{item.content | textSubString(50)}}</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div 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 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/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">
|
|
|
|
- <video controls ref="cm_player" width="60%">
|
|
|
|
- <source type="video/mp4">
|
|
|
|
- 您的浏览器不支持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-if="!showContent" 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>
|
|
<div class="text_info_contain" v-html="JSON.parse(localStorage.getItem('text_info_from')).text"></div>
|
|
<!-- 底部区域 end -->
|
|
<!-- 底部区域 end -->
|
|
-<!-- <template th:replace="components/footer" v-if="isPC"></template>-->
|
|
|
|
-<!-- <template th:replace="components/foot-link" v-if="isPC"></template>-->
|
|
|
|
|
|
+ <template th:replace="components/footer" v-if="isPC"></template>
|
|
|
|
+ <template th:replace="components/foot-link" v-if="isPC"></template>
|
|
</div>
|
|
</div>
|
|
<!-- 抽屉 -->
|
|
<!-- 抽屉 -->
|
|
<el-drawer
|
|
<el-drawer
|