|
@@ -0,0 +1,1523 @@
|
|
|
+<template>
|
|
|
+ <div class="home-page">
|
|
|
+ <div class="home-page-main">
|
|
|
+ <!-- 第一页轮播图 -->
|
|
|
+ <header
|
|
|
+ :class="
|
|
|
+ scrollTopNav > 10
|
|
|
+ ? 'lx-navigation__wrapper lx-navigation__shadow'
|
|
|
+ : 'lx-navigation__wrapper'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <nav>
|
|
|
+ <div class="nav">
|
|
|
+ <a class="navbar-brand" href="/">
|
|
|
+ <img src="@/assets/img/logow.png" loading="lazy" alt="轻马私域" />
|
|
|
+ </a>
|
|
|
+ <ul class="nav-header">
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="javascript:;" @click="scrollToSection($event, 'page1')"
|
|
|
+ >首页</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="javascript:;" @click="scrollToSection($event, 'page4')"
|
|
|
+ >产品</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="javascript:;" @click="scrollToSection($event, 'page3')"
|
|
|
+ >解决方案</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="javascript:;" @click="scrollToSection($event, 'page6')"
|
|
|
+ >客户案例</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a
|
|
|
+ href="javascript:;"
|
|
|
+ @click="scrollToSection($event, 'page10')"
|
|
|
+ >服务与支持</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a
|
|
|
+ href="javascript:;"
|
|
|
+ @click="scrollToSection($event, 'page10')"
|
|
|
+ >关于我们</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <ul class="nav-login">
|
|
|
+ <li class="reg-btn">
|
|
|
+ <a
|
|
|
+ class="clickform-navbar"
|
|
|
+ position="navbar"
|
|
|
+ href="https://gpts.gkscrm.com/"
|
|
|
+ >立即体验</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </header>
|
|
|
+ <el-carousel :interval="4000" autoplay id="page1" class="page1">
|
|
|
+ <el-carousel-item
|
|
|
+ v-for="(item, index) in banners"
|
|
|
+ :key="index"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${item})`,
|
|
|
+ backgroundSize: 'cover',
|
|
|
+ backgroundPosition: 'center' ,
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ }"
|
|
|
+ class="page1"
|
|
|
+ >
|
|
|
+ <!-- <img :src="item" alt="" loading="lazy" style="background-size: 100% 100%;background-repeat: no-repeat;"/> -->
|
|
|
+
|
|
|
+ <div class="home-banner">
|
|
|
+ <div class="title">
|
|
|
+ <span>轻马私域大模型AI员工</span><br />
|
|
|
+ <p>让5人团队干出50人结果,一个销冠秒变全员销冠</p>
|
|
|
+ </div>
|
|
|
+ <a class="to-consult-btn" href="https://gpts.gkscrm.com/"
|
|
|
+ >免费体验<img
|
|
|
+ class="icon-poly"
|
|
|
+ src="@/assets/img/icon_poly@2x.png"
|
|
|
+ loading="lazy"
|
|
|
+ alt=""
|
|
|
+ /></a>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ <div class="page1-connect">
|
|
|
+ <div class="title">全流程智能,助力业绩增长</div>
|
|
|
+ <div class="contant-box">
|
|
|
+ <span>微信</span>
|
|
|
+ <span>企业微信</span>
|
|
|
+ <span>抖音</span>
|
|
|
+ <span>小红书</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 第二页 4大板块 -->
|
|
|
+ <div class="page4" id="page4">
|
|
|
+ <div class="title">轻马大模型AI,如何赋能企业运营</div>
|
|
|
+ <div class="marketing-list">
|
|
|
+ <div class="marketing-item" ref="item1">
|
|
|
+ <div class="item-contant1">
|
|
|
+ <div class="contant1-box common-box">
|
|
|
+ <h3>真人级</h3>
|
|
|
+ <h3>互动体验</h3>
|
|
|
+ <p>
|
|
|
+ 模拟人脑思考模式,构建企业知识库,打造专属AI员工大模型,
|
|
|
+ 完全无痕的拟人化互动
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="contant1-bg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="marketing-item" ref="item2">
|
|
|
+ <div class="item-contant2">
|
|
|
+ <div class="contant2-box">
|
|
|
+ <h3>效率提升500倍+</h3>
|
|
|
+ <div class="content">
|
|
|
+ <p>从每分钟人工客服8-10次,到AI客服的5000次回复</p>
|
|
|
+ <p>毫秒级响应,多个聊天任务并行,可同时应对400-500人</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contant2-bg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="marketing-item" ref="item3">
|
|
|
+ <div class="item-contant3">
|
|
|
+ <div class="common-box">
|
|
|
+ <h3>更专业</h3>
|
|
|
+ <h3>低成本金牌员工</h3>
|
|
|
+ <p>
|
|
|
+ 7*24小时在线,执行力0折扣,无招聘/离职/团队磨合等管理成本,一次性投入,无需持续培训,100%忠诚,客户资源永不流失
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="contant3-border">
|
|
|
+ <div class="contant3-bg"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="marketing-item" ref="item4">
|
|
|
+ <div class="item-contant4">
|
|
|
+ <div class="contant2-box">
|
|
|
+ <h3>销冠级SOP自动成交</h3>
|
|
|
+ <div class="content">
|
|
|
+ <p>萃取销冠成交经验</p>
|
|
|
+ <p>主动触达完成激活/培育,千人千面推送定制内容</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contant4-bg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 第3页 客服与销售应用场景 -->
|
|
|
+ <div class="page2" id="page2">
|
|
|
+ <div class="title">轻马大模型AI员工应用场景</div>
|
|
|
+ <div class="text">AI客服与销售</div>
|
|
|
+ <div class="list" @mouseleave="keepCurrentActive">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in items"
|
|
|
+ :key="index"
|
|
|
+ :class="{ on: activeIndex === index }"
|
|
|
+ @mouseenter="setActive(index)"
|
|
|
+ class="item"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ height: 77.12%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img :src="item.icon" class="icon" loading="lazy" alt="" />
|
|
|
+ <div class="tit">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ <div class="icon-bg"></div>
|
|
|
+ {{ item.text1 }}
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ <div class="icon-bg"></div>
|
|
|
+ {{ item.text2 }}
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ <div class="icon-bg"></div>
|
|
|
+ {{ item.text3 }}
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ <div class="icon-bg"></div>
|
|
|
+ {{ item.text4 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-bg"></div>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 第4页 轻马私域AI数字员工 -->
|
|
|
+ <div class="page3" id="page3" @scroll="handleScrollPage3">
|
|
|
+ <div class="title">AI赋能企业应用</div>
|
|
|
+ <div class="anti-counterfeiting" :style="antiCounterfeitingStyle">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="title">轻马私域大模型AI员工</div>
|
|
|
+ <div class="text">能做什么?</div>
|
|
|
+ <div class="content">
|
|
|
+ <div>技术支持/客服服务</div>
|
|
|
+ <div>政策解答/信息咨询/业务流程问询</div>
|
|
|
+ <div>流程讲解/业务办理/人力/行政咨询</div>
|
|
|
+ <div>景区导游、医院医导、学校校导</div>
|
|
|
+ <div>任何在线咨询/知识问答等专家级数字员工</div>
|
|
|
+ <div>产品/业务咨询</div>
|
|
|
+ <div>引导留资/刺激购买</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ v-for="(item, index) in antiCounterfeitingList"
|
|
|
+ :key="index"
|
|
|
+ @mouseenter="handleMouseEnter(index)"
|
|
|
+ @mouseleave="handleMouseLeave"
|
|
|
+ :class="{ active: activeItemIndex === index }"
|
|
|
+ >
|
|
|
+ <div class="bg"></div>
|
|
|
+ <div
|
|
|
+ class="icon"
|
|
|
+ :style="{
|
|
|
+ background: activeItemIndex === index ? '#fff' : '#4E7FF3',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ loading="lazy"
|
|
|
+ style="width: 18px; height: 18px"
|
|
|
+ :src="activeItemIndex === index ? item.iconOn : item.icon"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <div class="content">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page5" id="page5">
|
|
|
+ <div class="ai-contrast">
|
|
|
+ <div class="title">使用AI之后的变化对比</div>
|
|
|
+ <div class="text">
|
|
|
+ 客服里面包括XX功能,销售里面包括XX功能。(以前人力怎么样,用上AI之后的好处)
|
|
|
+ </div>
|
|
|
+ <div class="right-bg"></div>
|
|
|
+ </div>
|
|
|
+ <div class="contant-bg">
|
|
|
+ <div class="contant">
|
|
|
+ <div class="tabs">
|
|
|
+ <div
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: activeTab === 'customerService' }"
|
|
|
+ @click="switchTab('customerService')"
|
|
|
+ >
|
|
|
+ 客服功能
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: activeTab === 'customerSales' }"
|
|
|
+ @click="switchTab('customerSales')"
|
|
|
+ >
|
|
|
+ 销售功能
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-bg">
|
|
|
+ <div class="title">
|
|
|
+ {{
|
|
|
+ activeTab === "customerService"
|
|
|
+ ? "使用AI后的客服功能"
|
|
|
+ : "使用AI后的销售功能"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div
|
|
|
+ class="content-item"
|
|
|
+ v-for="(item, index) in activeTabList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="tit">{{ item.title }}</div>
|
|
|
+ <div class="text">
|
|
|
+ {{ item.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-title">
|
|
|
+ {{
|
|
|
+ activeTab === "customerService"
|
|
|
+ ? "传统的客服功能"
|
|
|
+ : "传统的销售功能"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <div class="bottom-box">
|
|
|
+ <div
|
|
|
+ class="bottom-item"
|
|
|
+ :style="[
|
|
|
+ index === 1
|
|
|
+ ? {
|
|
|
+ borderLeft: '1px solid #D8D8D8',
|
|
|
+ borderRight: '1px solid #D8D8D8',
|
|
|
+ }
|
|
|
+ : {},
|
|
|
+ index !== 0 ? { paddingLeft: '35px' } : {},
|
|
|
+ ]"
|
|
|
+ v-for="(item, index) in activeTabList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <div class="text">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page6" id="page6">
|
|
|
+ <div class="title">AI数字大模型应用场景</div>
|
|
|
+ <div class="tabs-box">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleTabClick">
|
|
|
+ <el-tab-pane label="电商" name="first">
|
|
|
+ <template #label>
|
|
|
+ <span>电商</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="教培" name="second" @tab-click="handleTabClick">
|
|
|
+ <template #label>
|
|
|
+ <span>教培</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ label="大健康"
|
|
|
+ name="third"
|
|
|
+ @tab-click="handleTabClick"
|
|
|
+ >
|
|
|
+ <template #label>
|
|
|
+ <span>大健康</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="服饰" name="fourth" @tab-click="handleTabClick">
|
|
|
+ <template #label>
|
|
|
+ <span>服饰</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="美容" name="fiveth" @tab-click="handleTabClick">
|
|
|
+ <template #label>
|
|
|
+ <span>美容</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="食品" name="sixth" @tab-click="handleTabClick">
|
|
|
+ <template #label>
|
|
|
+ <span>食品</span>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <!-- 使用走马灯 -->
|
|
|
+ <el-carousel
|
|
|
+ ref="carouselRef"
|
|
|
+ :initial-index="tabActiveIndex"
|
|
|
+ :autoplay="false"
|
|
|
+ indicator-position="none"
|
|
|
+ >
|
|
|
+ <el-carousel-item v-for="(item, index) in contentList" :key="index">
|
|
|
+ <div class="content-box">
|
|
|
+ <img class="left-bg" :src="item.bg" loading="lazy" alt="" />
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="class-name">{{ item.className }}</div>
|
|
|
+ <div class="right-box-title">{{ item.title }}</div>
|
|
|
+ <div class="content">{{ item.content }}</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ v-for="(growthItem, index) in item.growthRateList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="item-rate">{{ growthItem.rate }}</div>
|
|
|
+ <div class="item-name">{{ growthItem.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ <div class="page7" id="page7">
|
|
|
+ <div class="title">强劲实力为客户持续创造价值</div>
|
|
|
+ <div
|
|
|
+ class="value-box"
|
|
|
+ ref="scrollBox"
|
|
|
+ :style="{
|
|
|
+ transform: `translate(-${scrollLeftRow}px,0px)`,
|
|
|
+ overflow: 'hidden',
|
|
|
+ position: 'relative',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ transition: transform 0.5s linear;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ ref="cardsBox"
|
|
|
+ class="value-item-box"
|
|
|
+ v-for="(item, index) in fullScrollList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="item.img"
|
|
|
+ alt=""
|
|
|
+ loading="lazy"
|
|
|
+ class="value-item-img"
|
|
|
+ />
|
|
|
+ <div class="item-content-box">
|
|
|
+ <div class="border-box"></div>
|
|
|
+ <div class="item-content">
|
|
|
+ {{ item.content }}
|
|
|
+ </div>
|
|
|
+ <div class="item-bottom-box">
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="title">{{ item.title }}</div>
|
|
|
+ <div class="industry">{{ item.industry }}</div>
|
|
|
+ </div>
|
|
|
+ <img class="logo1" loading="lazy" :src="item.logo" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-html="copyHtmlLeft"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page8" id="page8">
|
|
|
+ <div class="title">客户好评</div>
|
|
|
+ <div class="text">1000+家客户共同选择</div>
|
|
|
+ <div class="contant">
|
|
|
+ <div class="left-box">
|
|
|
+ 感谢各位伙伴的高度认可,我们一定不负期待,笃志前行!
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="echoes-down__right-wrapper">
|
|
|
+ <div class="top-bg"></div>
|
|
|
+ <!-- 第一个列表,向上滚动 -->
|
|
|
+ <div class="warp" @mouseenter="mEnter" @mouseleave="mLeave">
|
|
|
+ <div
|
|
|
+ class="scroll-container"
|
|
|
+ :style="{ transform: `translate(0px,-${scrollTop}px)` }"
|
|
|
+ >
|
|
|
+ <div class="scroll-content" ref="scrollItemBox">
|
|
|
+ <div
|
|
|
+ class="scroll-item"
|
|
|
+ v-for="(item, index) in fullWrapperList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <!-- 列表项内容 -->
|
|
|
+ <img
|
|
|
+ src="@/assets/img/yinhao@2x.png"
|
|
|
+ class="yinhao"
|
|
|
+ alt=""
|
|
|
+ loading="lazy"
|
|
|
+ />
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <img
|
|
|
+ :src="item.avater"
|
|
|
+ alt=""
|
|
|
+ loading="lazy"
|
|
|
+ class="avatar"
|
|
|
+ />
|
|
|
+ <div class="info-box">
|
|
|
+ <span>{{ item.nikeName }}</span>
|
|
|
+ <el-rate disabled v-model="startValue"></el-rate>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content">
|
|
|
+ <p class="item-text">{{ item.text }}</p>
|
|
|
+ <div class="time">{{ item.endTime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-html="copyHtml"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 第二个列表,向下滚动 -->
|
|
|
+ <div
|
|
|
+ class="warp"
|
|
|
+ @mouseenter="mEnterDown"
|
|
|
+ @mouseleave="mLeaveDown"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="scroll-container"
|
|
|
+ :style="{ transform: `translate(0px, ${scrollTopDown}px)` }"
|
|
|
+ >
|
|
|
+ <div class="scroll-content" ref="scrollItemBoxDown">
|
|
|
+ <div
|
|
|
+ class="scroll-item"
|
|
|
+ v-for="(item, index) in fullWrapperList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <!-- 列表项内容 -->
|
|
|
+ <img
|
|
|
+ src="@/assets/img/yinhao@2x.png"
|
|
|
+ class="yinhao"
|
|
|
+ alt=""
|
|
|
+ loading="lazy"
|
|
|
+ />
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <img
|
|
|
+ :src="item.avater"
|
|
|
+ alt=""
|
|
|
+ loading="lazy"
|
|
|
+ class="avatar"
|
|
|
+ />
|
|
|
+ <div class="info-box">
|
|
|
+ <span>{{ item.nikeName }}</span>
|
|
|
+ <el-rate disabled v-model="startValue"></el-rate>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content">
|
|
|
+ <p class="item-text">{{ item.text }}</p>
|
|
|
+ <div class="time">{{ item.endTime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-html="copyHtmlDown"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 第三个列表,向上滚动 -->
|
|
|
+ <div
|
|
|
+ class="warp"
|
|
|
+ @mouseenter="mEnterThird"
|
|
|
+ @mouseleave="mLeaveThird"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="scroll-container"
|
|
|
+ :style="{ transform: `translate(0px,-${scrollTopThird}px)` }"
|
|
|
+ >
|
|
|
+ <div class="scroll-content" ref="scrollItemBoxThird">
|
|
|
+ <div
|
|
|
+ class="scroll-item"
|
|
|
+ v-for="(item, index) in fullWrapperList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <!-- 列表项内容 -->
|
|
|
+ <img
|
|
|
+ src="@/assets/img/yinhao@2x.png"
|
|
|
+ class="yinhao"
|
|
|
+ alt=""
|
|
|
+ loading="lazy"
|
|
|
+ />
|
|
|
+ <div class="info-wrapper">
|
|
|
+ <img
|
|
|
+ :src="item.avater"
|
|
|
+ alt=""
|
|
|
+ loading="lazy"
|
|
|
+ class="avatar"
|
|
|
+ />
|
|
|
+ <div class="info-box">
|
|
|
+ <span>{{ item.nikeName }}</span>
|
|
|
+ <el-rate disabled v-model="startValue"></el-rate>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content">
|
|
|
+ <p class="item-text">{{ item.text }}</p>
|
|
|
+ <div class="time">{{ item.endTime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-html="copyHtmlThird"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-bg"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page9" id="page9">
|
|
|
+ <div class="title">行业销售专家小模型</div>
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="text-btn">
|
|
|
+ <div class="text">行业销售专家小模型</div>
|
|
|
+ <div class="btn1">自动成交转化</div>
|
|
|
+ <div class="btn2">提高人效</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ 自研行业销售专家小模型进一步反哺强化业务流,让AI员工具备更强大的自动化销售能力。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-carousel
|
|
|
+ indicator-position="outside"
|
|
|
+ class="carousel-box custom-carousel"
|
|
|
+ >
|
|
|
+ <el-carousel-item
|
|
|
+ style="display: flex"
|
|
|
+ class="modal-carousel"
|
|
|
+ v-for="(items, index) in modelList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="item-box" v-for="(item, index) in items" :key="index">
|
|
|
+ <div class="item-top">
|
|
|
+ <div class="ball"></div>
|
|
|
+ <div class="tit">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-bg">
|
|
|
+ <div class="link">
|
|
|
+ <span>目标人群</span>
|
|
|
+ <div
|
|
|
+ style="width: 87px; height: 1px; border: 1px dashed #7476ff"
|
|
|
+ ></div>
|
|
|
+ <span>建议能力范围</span>
|
|
|
+ <div
|
|
|
+ style="width: 87px; height: 1px; border: 1px dashed #7476ff"
|
|
|
+ ></div>
|
|
|
+ <span>开始转化</span>
|
|
|
+ <div
|
|
|
+ style="width: 87px; height: 1px; border: 1px dashed #7476ff"
|
|
|
+ ></div>
|
|
|
+ <span>赢单</span>
|
|
|
+ <div
|
|
|
+ style="width: 27px; height: 1px; border: 1px dashed #7476ff"
|
|
|
+ ></div>
|
|
|
+
|
|
|
+ <!-- <span class="dotted">目标人群</span>
|
|
|
+ <span class="divider" style="width: 10%; border-bottom: 1px dotted #7476FF;"></span>
|
|
|
+ <span class="dotted">建议能力范围</span>
|
|
|
+ <span class="divider" style="width: 10%;border-bottom: 1px dotted #7476FF;"></span>
|
|
|
+ <span class="dotted">开始转化</span>
|
|
|
+ <span class="divider" style="border-bottom: 1px dotted #7476FF;width: 10%;"></span>
|
|
|
+ <span class="dotted">赢单</span> -->
|
|
|
+ </div>
|
|
|
+ <div class="contant-bg"></div>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ <div class="page10" id="page10">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="title">快速创建企业专属AI应用场景</div>
|
|
|
+ <div class="text">
|
|
|
+ 轻马私域提供从数据准备到应用上线运营全流程保驾服务,全程无忧,让您轻松拥抱AI,提升业务效率。
|
|
|
+ </div>
|
|
|
+ <div class="page-contant-list">
|
|
|
+ <div
|
|
|
+ class="page-contant-item"
|
|
|
+ v-for="(item, index) in page_contant_list"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="drop-box"></div>
|
|
|
+ <div class="contant-box">
|
|
|
+ <div class="tit">{{ item.title }}</div>
|
|
|
+ <div class="content">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表单 -->
|
|
|
+ <!-- <div class="right-input-box">
|
|
|
+ <div class="right-input-title">AI运营专家</div>
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ label-width="80px"
|
|
|
+ class="custom-form"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20" class="row-flex">
|
|
|
+ <el-col :span="12" style="display: flex; justify-content: end">
|
|
|
+ <el-form-item style="width: 201px">
|
|
|
+ <el-input
|
|
|
+ v-model="form.name"
|
|
|
+ placeholder="您的姓名"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="display: flex; justify-content: start">
|
|
|
+ <el-form-item style="width: 201px">
|
|
|
+ <el-input
|
|
|
+ v-model="form.companyName"
|
|
|
+ placeholder="公司名"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="row-flex">
|
|
|
+ <el-col :span="12" style="display: flex; justify-content: end">
|
|
|
+ <el-form-item style="width: 201px">
|
|
|
+ <el-input
|
|
|
+ v-model="form.phone"
|
|
|
+ placeholder="您的电话/手机号"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="display: flex; justify-content: start">
|
|
|
+ <el-form-item style="width: 201px">
|
|
|
+ <el-select v-model="form.scale" placeholder="您的私域规模">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="display: flex; justify-content: center">
|
|
|
+ <el-form-item style="width: 423px; height: 97px">
|
|
|
+ <el-input
|
|
|
+ placeholder="您的留言"
|
|
|
+ type="textarea"
|
|
|
+ v-model="form.message"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="form-button">
|
|
|
+ <el-form-item style="display: flex; justify-content: center">
|
|
|
+ <el-button @click="onSubmit" size="large" class="submit-btn"
|
|
|
+ >马上获取</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Footer></Footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Footer from "@/components/footer/index.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Footer,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/icon_ai@2x.png"),
|
|
|
+ title: "大模型AI客服",
|
|
|
+ text1: "基于用户问答库,结合上下文语义的拟人化训练",
|
|
|
+ text2: "基于企业专业知识库,让AI自动理解的专项训练",
|
|
|
+ text3: "提供98%准确率的专业解答",
|
|
|
+ text4: "除微信外,还可介入各公域平台客服系统",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/icon_ai2@2x.png"),
|
|
|
+ title: "大模型AI销售",
|
|
|
+ text1: "承担销售中占用超80%时间的前期沟通环节",
|
|
|
+ text2: "快速判断客户成交意向,支持多种场景自动打标签",
|
|
|
+ text3: "根据不同运营场景,设置自动沟通的多层应对机制",
|
|
|
+ text4: "销冠级成交流程萃取,设置特定时间自动推送给客户",
|
|
|
+ },
|
|
|
+ ], // 列表数据
|
|
|
+ rotationX: 25, // 初始旋转角度
|
|
|
+ opacity: 0.8, // 初始不透明度
|
|
|
+ activeIndex: 0, // 当前悬停的元素索引
|
|
|
+ activeItemIndex: null,
|
|
|
+ scrollLeftRow: 0, // 初始滚动条位置
|
|
|
+ timerLeft: null, // 左侧列表滚动计时器
|
|
|
+ copyHtmlLeft: "", // 左侧列表的复制内容
|
|
|
+ scrollTop: 0, // 第一个列表的滚动高度
|
|
|
+ scrollTopDown: -700, // 第二个列表的滚动高度(向下)
|
|
|
+ scrollTopThird: 0, // 第三个列表的滚动高度
|
|
|
+ speed: 30, // 滚动速度
|
|
|
+ timer: null, // 第一个和第三个列表的滚动计时器
|
|
|
+ timerDown: null, // 第二个列表的滚动计时器
|
|
|
+ copyHtml: "", // 第一个列表的复制内容
|
|
|
+ copyHtmlThird: "", // 第三个列表的复制内容
|
|
|
+ copyHtmlDown: "", // 第二个列表的复制内容
|
|
|
+ scrollTopNav: 0,
|
|
|
+ banners: [
|
|
|
+ require("@/assets/img/banner1@2x.jpg"),
|
|
|
+ require("@/assets/img/banner1.2@2x.jpg"),
|
|
|
+ ],
|
|
|
+ antiCounterfeitingList: [
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/iconA@2x.png"),
|
|
|
+ iconOn: require("@/assets/img/icon_A@2x.png"),
|
|
|
+ title: "客户培育SOP",
|
|
|
+ content:
|
|
|
+ "想象你在花园里种下一颗种子,每天悉心照料,通过精心设计的步骤,我们逐步与客户建立联系,从初识到信任,最终成为我们的忠实拥趸。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/icon_ren@2x.png"),
|
|
|
+ iconOn: require("@/assets/img/icon_mes@2x.png"),
|
|
|
+ title: "客户旅程搭建",
|
|
|
+ content:
|
|
|
+ "好比为朋友规划一次旅行,从期待、惊喜到满足,我们为客户打造的是一段充满价值和愉悦的旅程,从初次接触到成为满意用户,每个阶段都精心安排。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/icon_meson@2x.png"),
|
|
|
+ iconOn: require("@/assets/img/icon_mes2@2x.png"),
|
|
|
+ title: "AI自动沟通",
|
|
|
+ content:
|
|
|
+ "就像你有个超级智能的助手,它能代替你24小时在线,无论是解答疑问还是传递信息,都能迅速且准确地完成。这样,即使你不在,客户也能感受到即时的关怀和服务。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/icon_saleon@2x.png"),
|
|
|
+ iconOn: require("@/assets/img/icon_sale@2x.png"),
|
|
|
+ title: "自动打标签",
|
|
|
+ content:
|
|
|
+ "想象你有一本通讯录,里面记录了每位朋友的生日、爱好等信息。自动打标签就像通讯录自动分类,记录每位客户的偏好,让我们能更精准地提供个性化服务。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/icon_pol@2x.png"),
|
|
|
+ iconOn: require("@/assets/img/icon_pol@2x.png"),
|
|
|
+ title: "自动群发消息",
|
|
|
+ content:
|
|
|
+ "就像你在节日时,一键群发祝福短信给所有亲朋好友,既高效又温馨。自动群发消息能帮助你轻松向大量客户传递重要通知或节日祝福,节省时间,维护良好关系。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require("@/assets/img/icon_link@2x.png"),
|
|
|
+ iconOn: require("@/assets/img/icon_linkOn@2x.png"),
|
|
|
+ title: "真人无缝衔接",
|
|
|
+ content:
|
|
|
+ "当AI助手完成初步沟通后,如果需要更深入的交流,真人客服会无缝接入,继续与客户进行高质量的对话,确保每一次交流都能让客户感受到温暖和专业。",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ activeTab: "customerService",
|
|
|
+ customerServiceList: [
|
|
|
+ {
|
|
|
+ title: "高效智能",
|
|
|
+ content: "7*24小时在线互动+98%准确率回答,运营效率提升10倍+",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "无忧管理",
|
|
|
+ content: "AI员工无情绪不摸鱼,0管理成本",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "释放价值",
|
|
|
+ content: "把重复枯燥的工作交给AI,让真人员工工作更有价值感",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ customerSalesList: [
|
|
|
+ {
|
|
|
+ title: "高效智能",
|
|
|
+ content: "7*24小时在线互动+98%准确率回答,运营效率提升10倍+",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "话术增效",
|
|
|
+ content: "销冠级话术萃取应用,平均提升20%+转化",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "效益倍增",
|
|
|
+ content: "5人团队干出50人结果,省掉80%基础员工",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // tabList: [
|
|
|
+ // {
|
|
|
+ // name: "电商",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "教培",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "大健康",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "服饰",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "母婴",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "食品",
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ activeName: "first",
|
|
|
+ tabActiveIndex: 0, // 走马灯的初始索引
|
|
|
+ contentList: [
|
|
|
+ {
|
|
|
+ className: "电商",
|
|
|
+ title: "某国货之光彩妆品牌",
|
|
|
+ content:
|
|
|
+ "用户增长红利见顶,获客成本增高,驱使品牌发展私域流量,深耕存量用户价值。助力品牌与顾客建立强连接,全场景,全时段,全方位的满足消费者需求,深度运营,持续挖掘消费者价值。",
|
|
|
+ growthRateList: [
|
|
|
+ { rate: "20%", name: "增长率1" },
|
|
|
+ { rate: "15%", name: "增长率2" },
|
|
|
+ ],
|
|
|
+ bg: require("@/assets/img/bg6@2x.jpg"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: "教培",
|
|
|
+ title: "教培机构",
|
|
|
+ content:
|
|
|
+ "用户增长红利见顶,获客成本增高,驱使品牌发展私域流量,深耕存量用户价值。助力品牌与顾客建立强连接,全场景,全时段,全方位的满足消费者需求,深度运营,持续挖掘消费者价值。",
|
|
|
+ growthRateList: [
|
|
|
+ { rate: "20%", name: "增长率1" },
|
|
|
+ { rate: "15%", name: "增长率2" },
|
|
|
+ ],
|
|
|
+ bg: require("@/assets/img/bg5@2x.jpg"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: "大健康",
|
|
|
+ title: "",
|
|
|
+ content:
|
|
|
+ "用户增长红利见顶,获客成本增高,驱使品牌发展私域流量,深耕存量用户价值。助力品牌与顾客建立强连接,全场景,全时段,全方位的满足消费者需求,深度运营,持续挖掘消费者价值。",
|
|
|
+ growthRateList: [
|
|
|
+ { rate: "20%", name: "增长率1" },
|
|
|
+ { rate: "15%", name: "增长率2" },
|
|
|
+ ],
|
|
|
+ bg: require("@/assets/img/bg6@2x.jpg"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: "服饰",
|
|
|
+ title: "",
|
|
|
+ content:
|
|
|
+ "用户增长红利见顶,获客成本增高,驱使品牌发展私域流量,深耕存量用户价值。助力品牌与顾客建立强连接,全场景,全时段,全方位的满足消费者需求,深度运营,持续挖掘消费者价值。",
|
|
|
+ growthRateList: [
|
|
|
+ { rate: "20%", name: "增长率1" },
|
|
|
+ { rate: "15%", name: "增长率2" },
|
|
|
+ ],
|
|
|
+ bg: require("@/assets/img/bg6@2x.jpg"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: "美容",
|
|
|
+ title: "",
|
|
|
+ content:
|
|
|
+ "用户增长红利见顶,获客成本增高,驱使品牌发展私域流量,深耕存量用户价值。助力品牌与顾客建立强连接,全场景,全时段,全方位的满足消费者需求,深度运营,持续挖掘消费者价值。",
|
|
|
+ growthRateList: [
|
|
|
+ { rate: "20%", name: "增长率1" },
|
|
|
+ { rate: "15%", name: "增长率2" },
|
|
|
+ ],
|
|
|
+ bg: require("@/assets/img/bg6@2x.jpg"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ className: "食品",
|
|
|
+ title: "",
|
|
|
+ content:
|
|
|
+ "用户增长红利见顶,获客成本增高,驱使品牌发展私域流量,深耕存量用户价值。助力品牌与顾客建立强连接,全场景,全时段,全方位的满足消费者需求,深度运营,持续挖掘消费者价值。",
|
|
|
+ growthRateList: [
|
|
|
+ { rate: "20%", name: "增长率1" },
|
|
|
+ { rate: "15%", name: "增长率2" },
|
|
|
+ ],
|
|
|
+ bg: require("@/assets/img/bg6@2x.jpg"),
|
|
|
+ },
|
|
|
+ // 其他标签对应的内容
|
|
|
+ ],
|
|
|
+ valueList: [
|
|
|
+ {
|
|
|
+ img: require("@/assets/img/xiaoguancha@2x.jpg"),
|
|
|
+ content:
|
|
|
+ '帮助小罐茶搭建并打通域外投放+企业微信+小程序商城+视频号运营"运营体系,通过私域社群运营和1对1追销提升了社群活跃度,实现私域GMV超预期增长',
|
|
|
+ title: "小罐茶",
|
|
|
+ industry: "餐饮行业",
|
|
|
+ logo: require("@/assets/img/xiaoguanchaLogo.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require("@/assets/img/ruixingkafei.png"),
|
|
|
+ content:
|
|
|
+ "帮助瑞幸咖啡搭建了企业微信+社群+小程序+视频号的私域运营体系,3个月沉淀180万私域客户、110万私域社群客户",
|
|
|
+ title: "瑞幸咖啡",
|
|
|
+ industry: "餐饮行业",
|
|
|
+ logo: require("@/assets/img/ruixingkafeiLogo.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require("@/assets/img/xiaoguancha@2x.jpg"),
|
|
|
+ content:
|
|
|
+ '帮助小罐茶搭建并打通域外投放+企业微信+小程序商城+视频号运营"运营体系,通过私域社群运营和1对1追销提升了社群活跃度,实现私域GMV超预期增长',
|
|
|
+ title: "小罐茶",
|
|
|
+ industry: "餐饮行业",
|
|
|
+ logo: require("@/assets/img/xiaoguanchaLogo.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require("@/assets/img/xiaoguancha@2x.jpg"),
|
|
|
+ content:
|
|
|
+ '帮助小罐茶搭建并打通域外投放+企业微信+小程序商城+视频号运营"运营体系,通过私域社群运营和1对1追销提升了社群活跃度,实现私域GMV超预期增长',
|
|
|
+ title: "小罐茶",
|
|
|
+ industry: "餐饮行业",
|
|
|
+ logo: require("@/assets/img/xiaoguanchaLogo.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require("@/assets/img/ruixingkafei.png"),
|
|
|
+ content:
|
|
|
+ "帮助瑞幸咖啡搭建了企业微信+社群+小程序+视频号的私域运营体系,3个月沉淀180万私域客户、110万私域社群客户",
|
|
|
+ title: "瑞幸咖啡",
|
|
|
+ industry: "餐饮行业",
|
|
|
+ logo: require("@/assets/img/ruixingkafeiLogo.png"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // scrollInterval: null,
|
|
|
+ scrollPosition: 0, // 当前滚动位置
|
|
|
+ scrollInterval: null, // 定时器
|
|
|
+ startValue: 5,
|
|
|
+ wrapperList: [
|
|
|
+ {
|
|
|
+ avater: require("@/assets/img/icon_ai2@2x.png"),
|
|
|
+ nikeName: "用户001",
|
|
|
+ text: "我们买过好几款scrm工具,真的用起来其实很难,这个训练完就能用,使用很友好,虽然需要训练,但是完全不用我们操心,直接训练好了交付给我们,关键是还便宜,性价比很高!",
|
|
|
+ endTime: "2024/06/02",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ avater: require("@/assets/img/icon_ai2@2x.png"),
|
|
|
+ nikeName: "用户001",
|
|
|
+ text: "我们买过好几款scrm工具,真的用起来其实很难,这个训练完就能用,使用很友好,虽然需要训练,但是完全不用我们操心,直接训练好了交付给我们,关键是还便宜,性价比很高!这个训练完就能用,使用很友好,虽然需要训练,但是完全不用我们操心,直接训练好了交付给我们,关键是还便宜,性价比很高!",
|
|
|
+ endTime: "2024/06/02",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ page_contant_list: [
|
|
|
+ {
|
|
|
+ title: "专属大模型",
|
|
|
+ content: "专属AI大模型员工帮训 知识库语料库完善升级",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "专业陪跑",
|
|
|
+ content: "高级客成专家实战陪跑 后台系统落地包教包会",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "行业案例",
|
|
|
+ content: "100+企业真实运营案例 AIGC行业情报实时更新",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ modelList: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ title: "自动聊单成交",
|
|
|
+ content:
|
|
|
+ "基于业务产品自动完成与客户的沟通 ,并推动进入成交环节,自动完成一般商品的聊单成交",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "辅助销售成交",
|
|
|
+ content:
|
|
|
+ "针对特殊商品 ,完成前期筛选 、需求收集,形成工单并转交真人销售,辅助完成销售成交动作",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ title: "自动聊单成交",
|
|
|
+ content:
|
|
|
+ "基于业务产品自动完成与客户的沟通 ,并推动进入成交环节,自动完成一般商品的聊单成交",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "辅助销售成交",
|
|
|
+ content:
|
|
|
+ "针对特殊商品 ,完成前期筛选 、需求收集,形成工单并转交真人销售,辅助完成销售成交动作",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ form: {
|
|
|
+ name: "",
|
|
|
+ companyName: "",
|
|
|
+ phone: "", // 添加 phone 字段
|
|
|
+ scale: "",
|
|
|
+ message: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initScrollLeft();
|
|
|
+ // // 当组件挂载时监听滚动事件
|
|
|
+ window.addEventListener("scroll", this.handleScroll);
|
|
|
+ // //导航条的滚动事件
|
|
|
+ window.addEventListener("scroll", this.handleScrollNav);
|
|
|
+ // // 自动开始滚动
|
|
|
+ this.initScroll();
|
|
|
+ this.initScrollDown();
|
|
|
+ this.initScrollThird();
|
|
|
+
|
|
|
+ window.addEventListener("scroll", this.handleScrollPage3); // 监听滚动事件
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener("scroll", this.handleScroll);
|
|
|
+ window.removeEventListener("scroll", this.handleScrollNav);
|
|
|
+ window.removeEventListener("scroll", this.handleScrollPage3); // 清理事件监听
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ activeTabList() {
|
|
|
+ return this.activeTab === "customerService"
|
|
|
+ ? this.customerServiceList
|
|
|
+ : this.customerSalesList;
|
|
|
+ },
|
|
|
+ // 克隆一份列表用于无缝滚动
|
|
|
+ fullWrapperList() {
|
|
|
+ return [...this.wrapperList, ...this.wrapperList];
|
|
|
+ },
|
|
|
+ // 克隆一份列表用于无缝滚动
|
|
|
+ fullScrollList() {
|
|
|
+ return [...this.valueList, ...this.valueList];
|
|
|
+ },
|
|
|
+ antiCounterfeitingStyle() {
|
|
|
+ return {
|
|
|
+ opacity: this.opacity,
|
|
|
+ transform: `perspective(1200px) translateX(0) translateY(0) scale(1) rotate(0deg) rotateX(${this.rotationX}deg) rotateY(0deg) skewX(0deg) skewY(0deg) translateZ(0)`,
|
|
|
+ transition: "transform 0.3s, opacity 0.3s",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleScrollNav(e) {
|
|
|
+ // this.scrollTopNav =
|
|
|
+ // window.pageYOffset ||
|
|
|
+ // document.documentElement.scrollTopNav ||
|
|
|
+ // document.body.scrollTopNav;
|
|
|
+
|
|
|
+ this.scrollTopNav =
|
|
|
+ window.pageYOffset ||
|
|
|
+ document.documentElement.scrollTop ||
|
|
|
+ document.body.scrollTop;
|
|
|
+ },
|
|
|
+ //第4页反转
|
|
|
+ handleScrollPage3() {
|
|
|
+ const page3 = document.getElementById("page3");
|
|
|
+ const rect = page3.getBoundingClientRect();
|
|
|
+ const windowHeight = window.innerHeight;
|
|
|
+
|
|
|
+ // 控制翻转开始的偏移量
|
|
|
+ const offset = windowHeight / 2;
|
|
|
+
|
|
|
+ // 仅在 page3 完全进入视口时才开始计算
|
|
|
+ if (rect.top <= windowHeight && rect.bottom >= 0) {
|
|
|
+ // 当前滚动距离
|
|
|
+ const scrollY = window.scrollY;
|
|
|
+
|
|
|
+ // 翻转开始的 scrollY 值,加入偏移量延迟翻转
|
|
|
+ const page3Start = scrollY + rect.top - windowHeight + offset;
|
|
|
+
|
|
|
+ // 缩短翻转的滚动范围,使翻转提前结
|
|
|
+ const page3End = page3Start + windowHeight * 0.3; // 翻转更早结束
|
|
|
+
|
|
|
+ // 计算滚动比例,确保在 0 到 1 之间,表示翻转完成的百分比
|
|
|
+ const scrollRatio = Math.min(
|
|
|
+ Math.max((scrollY - page3Start) / (page3End - page3Start), 0),
|
|
|
+ 1
|
|
|
+ );
|
|
|
+
|
|
|
+ // 根据滚动比例计算旋转和不透明度
|
|
|
+ this.rotationX = 25 - scrollRatio * 25; // 从 25deg 到 0deg
|
|
|
+ this.opacity = 0.8 + scrollRatio * 0.2; // 从 0.8 到 1.0
|
|
|
+ } else {
|
|
|
+ // 滚动不在 page3 内时,恢复初始状态
|
|
|
+ this.rotationX = 25; // 初始状态为 25deg
|
|
|
+ this.opacity = 0.8;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //横向滚动
|
|
|
+ initScrollLeft() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.copyHtmlLeft = this.$refs.scrollBox.innerHTML;
|
|
|
+ this.startScrollLeft();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initScroll() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.copyHtml = this.$refs.scrollItemBox.innerHTML;
|
|
|
+ this.startScroll();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 初始化第二个列表的向下滚动
|
|
|
+ initScrollDown() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.copyHtmlDown = this.$refs.scrollItemBoxDown.innerHTML;
|
|
|
+ // 克隆整个列表的内容到copyHtmlDown
|
|
|
+ // this.scrollTopDown = -700;
|
|
|
+ this.startScrollDown();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ scrollToSection(event, sectionId) {
|
|
|
+ const element = document.getElementById(sectionId);
|
|
|
+ if (element) {
|
|
|
+ element.scrollIntoView({ behavior: "smooth" });
|
|
|
+ }
|
|
|
+ event.preventDefault(); // 防止默认行为
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化第三个列表的滚动
|
|
|
+ initScrollThird() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.copyHtmlThird = this.$refs.scrollItemBoxThird.innerHTML;
|
|
|
+ this.startScrollThird();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 鼠标移入停止滚动
|
|
|
+ mEnter() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ },
|
|
|
+ // 鼠标移出继续滚动
|
|
|
+ mLeave() {
|
|
|
+ this.startScroll();
|
|
|
+ },
|
|
|
+ mEnterThird() {
|
|
|
+ clearInterval(this.timerThird);
|
|
|
+ },
|
|
|
+ mLeaveThird() {
|
|
|
+ this.startScrollThird();
|
|
|
+ },
|
|
|
+ // 开始滚动
|
|
|
+ startScrollLeft() {
|
|
|
+ this.timerLeft = setInterval(this.performScroll, this.speed);
|
|
|
+ },
|
|
|
+ // 开始滚动
|
|
|
+ startScroll() {
|
|
|
+ this.timer = setInterval(this.scroll, this.speed);
|
|
|
+ },
|
|
|
+ // 第二个列表的滚动处理
|
|
|
+ startScrollDown() {
|
|
|
+ this.timerDown = setInterval(this.scrollDown, this.speed);
|
|
|
+ },
|
|
|
+ // 第三个列表的滚动
|
|
|
+ startScrollThird() {
|
|
|
+ this.timerThird = setInterval(this.scrollThird, this.speed);
|
|
|
+ },
|
|
|
+
|
|
|
+ performScroll() {
|
|
|
+ this.scrollLeftRow++;
|
|
|
+ let cardWidth = this.$refs.cardsBox[0].offsetWidth; // 获取单张卡片的宽度
|
|
|
+ let scrollBoxLeft = this.valueList.length * cardWidth; // 卡片总数量乘以卡片宽度,得到滚动总宽度
|
|
|
+ // let scrollBoxLeft = this.$refs.scrollBox.scrollWidth /5;
|
|
|
+ if (this.scrollLeftRow >= scrollBoxLeft) {
|
|
|
+ // console.log(scrollBoxLeft, "")
|
|
|
+ this.scrollLeftRow = 0;
|
|
|
+ }
|
|
|
+ // this.$refs.scrollBox.scrollLeft = this.scrollLeftRow;
|
|
|
+ },
|
|
|
+ // 滚动处理方法
|
|
|
+ scroll() {
|
|
|
+ this.scrollTop++;
|
|
|
+ // 获取需要滚动的盒子的高度
|
|
|
+ let scrollItemBox = this.$refs.scrollItemBox.offsetHeight / 2;
|
|
|
+ // 当判断滚动的高度大于等于盒子高度时,从头开始滚动
|
|
|
+ if (this.scrollTop >= scrollItemBox) {
|
|
|
+ this.scrollTop = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 第二个列表的滚动(向下)
|
|
|
+ scrollDown() {
|
|
|
+ this.scrollTopDown++; // 向下滚动
|
|
|
+
|
|
|
+ // 获取整个scrollItemBoxDown的高度,包括克隆的部分
|
|
|
+ const scrollItemBoxDown = this.$refs.scrollItemBoxDown.scrollHeight / 2;
|
|
|
+
|
|
|
+ // 当滚动到克隆内容的末尾时,重置为0
|
|
|
+ if (this.scrollTopDown >= 0) {
|
|
|
+ this.scrollTopDown = -scrollItemBoxDown; // 无缝衔接到顶部
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 第三个列表滚动逻辑
|
|
|
+ scrollThird() {
|
|
|
+ this.scrollTopThird++;
|
|
|
+ const scrollItemBoxThird = this.$refs.scrollItemBoxThird.offsetHeight / 2;
|
|
|
+ if (this.scrollTopThird >= scrollItemBoxThird) {
|
|
|
+ this.scrollTopThird = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 鼠标悬停时暂停向下滚动
|
|
|
+ mEnterDown() {
|
|
|
+ clearInterval(this.timerDown);
|
|
|
+ },
|
|
|
+ // 鼠标移开时继续向下滚动
|
|
|
+ mLeaveDown() {
|
|
|
+ this.startScrollDown();
|
|
|
+ },
|
|
|
+ //第四页切换客服与销售tab
|
|
|
+ switchTab(tab) {
|
|
|
+ this.activeTab = tab;
|
|
|
+ },
|
|
|
+ //第二页4个板块3D旋转效果
|
|
|
+ // handleScroll() {
|
|
|
+ // const items = [
|
|
|
+ // this.$refs.item1,
|
|
|
+ // this.$refs.item2,
|
|
|
+ // this.$refs.item3,
|
|
|
+ // this.$refs.item4,
|
|
|
+ // ];
|
|
|
+ // const windowHeight = window.innerHeight;
|
|
|
+ // const scrollY = window.scrollY;
|
|
|
+
|
|
|
+ // items.forEach((item, index) => {
|
|
|
+ // const itemTop = item.getBoundingClientRect().top + scrollY;
|
|
|
+
|
|
|
+ // const start = index < 2 ? windowHeight * 0.3 : windowHeight * 0.6;
|
|
|
+ // const end = windowHeight * 1.2;
|
|
|
+
|
|
|
+ // if (scrollY + windowHeight >= itemTop + start) {
|
|
|
+ // const progress = Math.min(
|
|
|
+ // 1,
|
|
|
+ // (scrollY + windowHeight - itemTop) / (end - start)
|
|
|
+ // );
|
|
|
+
|
|
|
+ // if (index === 0 || index === 1) {
|
|
|
+ // item.style.opacity = 0.6 + progress * 0.4;
|
|
|
+ // item.style.transform = `perspective(1200px) translateX(${
|
|
|
+ // (1 - progress) * -48
|
|
|
+ // }px) translateY(${(1 - progress) * 48}px) rotateX(${
|
|
|
+ // (1 - progress) * 8
|
|
|
+ // }deg) rotateY(${(1 - progress) * 8}deg)`;
|
|
|
+ // }
|
|
|
+ // if (index === 2 || index === 3) {
|
|
|
+ // item.style.opacity = 0.6 + progress * 0.4;
|
|
|
+ // item.style.transform = `perspective(1200px) translateX(${
|
|
|
+ // (1 - progress) * 48
|
|
|
+ // }px) translateY(${(1 - progress) * 78}px) rotateX(${
|
|
|
+ // (1 - progress) * 14
|
|
|
+ // }deg) rotateY(${(1 - progress) * -13}deg)`;
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // if (index === 0 || index === 2) {
|
|
|
+ // item.style.opacity = 0.6;
|
|
|
+ // item.style.transform =
|
|
|
+ // "perspective(1200px) translateX(-48px) translateY(48px) rotate(-8deg) rotateX(8deg) rotateY(8deg)";
|
|
|
+ // } else {
|
|
|
+ // item.style.opacity = 0.7;
|
|
|
+ // item.style.transform =
|
|
|
+ // "perspective(1200px) translateX(48px) translateY(78px) rotate(7deg) rotateX(14deg) rotateY(-13deg)";
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ handleScroll() {
|
|
|
+ const items = [
|
|
|
+ this.$refs.item1,
|
|
|
+ this.$refs.item2,
|
|
|
+ this.$refs.item3,
|
|
|
+ this.$refs.item4,
|
|
|
+ ];
|
|
|
+ const windowHeight = window.innerHeight;
|
|
|
+ const scrollY = window.scrollY;
|
|
|
+
|
|
|
+ items.forEach((item, index) => {
|
|
|
+ const itemTop = item.getBoundingClientRect().top + scrollY;
|
|
|
+
|
|
|
+ // 调整 start 和 end 的值,确保动画时间更合理
|
|
|
+ const start = windowHeight * (index < 2 ? 0.2 : 0.4); // 第三、第四板块提早开始
|
|
|
+ const end = windowHeight * 0.5; // 延长动画的结束点
|
|
|
+
|
|
|
+ if (scrollY + windowHeight >= itemTop + start) {
|
|
|
+ const progress = Math.min(
|
|
|
+ 1,
|
|
|
+ (scrollY + windowHeight - itemTop) / (end - start)
|
|
|
+ );
|
|
|
+
|
|
|
+ // 处理第一、二和第三、四板块的动画
|
|
|
+ if (index === 0 || index === 1) {
|
|
|
+ item.style.opacity = 0.6 + progress * 0.4;
|
|
|
+ item.style.transform = `perspective(1200px) translateX(${
|
|
|
+ (1 - progress) * -48
|
|
|
+ }px) translateY(${(1 - progress) * 48}px) rotateX(${
|
|
|
+ (1 - progress) * 8
|
|
|
+ }deg) rotateY(${(1 - progress) * 8}deg)`;
|
|
|
+ } else if (index === 2 || index === 3) {
|
|
|
+ item.style.opacity = 0.6 + progress * 0.4;
|
|
|
+ item.style.transform = `perspective(1200px) translateX(${
|
|
|
+ (1 - progress) * 48
|
|
|
+ }px) translateY(${(1 - progress) * 78}px) rotateX(${
|
|
|
+ (1 - progress) * 14
|
|
|
+ }deg) rotateY(${(1 - progress) * -13}deg)`;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 重置样式
|
|
|
+ if (index === 0 || index === 2) {
|
|
|
+ item.style.opacity = 0.6;
|
|
|
+ item.style.transform =
|
|
|
+ "perspective(1200px) translateX(-48px) translateY(48px) rotate(-8deg) rotateX(8deg) rotateY(8deg)";
|
|
|
+ } else {
|
|
|
+ item.style.opacity = 0.7;
|
|
|
+ item.style.transform =
|
|
|
+ "perspective(1200px) translateX(48px) translateY(78px) rotate(7deg) rotateX(14deg) rotateY(-13deg)";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onSubmit() {
|
|
|
+ console.log(this.form);
|
|
|
+ // 表单提交逻辑
|
|
|
+ },
|
|
|
+ // 设置当前悬停的索引
|
|
|
+ setActive(index) {
|
|
|
+ this.activeIndex = index;
|
|
|
+ },
|
|
|
+ keepCurrentActive() {
|
|
|
+ // 这里不需要做任何处理,保留最后一个悬停的索引
|
|
|
+ },
|
|
|
+ handleMouseEnter(index) {
|
|
|
+ this.activeItemIndex = index;
|
|
|
+ },
|
|
|
+ handleMouseLeave() {
|
|
|
+ this.activeItemIndex = null; // 鼠标移出时重置索引
|
|
|
+ },
|
|
|
+ handleTabClick(tab, event) {
|
|
|
+ console.log(tab, event, "tab, event");
|
|
|
+ const tabMap = {
|
|
|
+ first: 0,
|
|
|
+ second: 1,
|
|
|
+ third: 2,
|
|
|
+ fourth: 3,
|
|
|
+ fiveth: 4,
|
|
|
+ sixth: 5,
|
|
|
+ };
|
|
|
+ this.tabActiveIndex = tabMap[tab.name]; // 切换到相应的走马灯项
|
|
|
+ // 检查 carouselRef 是否存在
|
|
|
+ if (this.$refs.carouselRef) {
|
|
|
+ this.$refs.carouselRef.setActiveItem(this.tabActiveIndex);
|
|
|
+ } else {
|
|
|
+ console.error("carouselRef is undefined");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+@import url("@/assets/styles/home/index.css");
|
|
|
+@import url("@/assets/styles/header/index.css");
|
|
|
+::v-deep .el-rate__icon {
|
|
|
+ color: #5e97ff !important;
|
|
|
+}
|
|
|
+.custom-carousel ::v-deep .el-carousel__container {
|
|
|
+ height: 368px;
|
|
|
+ background: #f6f8ff;
|
|
|
+ border-radius: 17px;
|
|
|
+ border: 1px solid #cdd7ff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.page1 ::v-deep .el-carousel__indicator--horizontal {
|
|
|
+ padding: 19px 2px;
|
|
|
+}
|
|
|
+.page1 ::v-deep .el-carousel__button {
|
|
|
+ width: 90px;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+.page1 ::v-deep .el-carousel__arrow {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.custom-carousel ::v-deep .el-carousel__button {
|
|
|
+ width: 55px !important;
|
|
|
+ height: 3px !important;
|
|
|
+}
|
|
|
+.custom-carousel ::v-deep .el-carousel__indicators--outside button {
|
|
|
+ /* background-color: #f1f1f1 !important; */
|
|
|
+}
|
|
|
+.custom-carousel ::v-deep .el-carousel__indicator.is-active button {
|
|
|
+ background-color: #5d8de8 !important;
|
|
|
+}
|
|
|
+::v-deep .el-form-item__content {
|
|
|
+ margin-left: 0px !important;
|
|
|
+}
|
|
|
+::v-deep .el-input__inner {
|
|
|
+ height: 43px;
|
|
|
+ line-height: 43px;
|
|
|
+}
|
|
|
+::v-deep .el-textarea__inner {
|
|
|
+ height: 97px;
|
|
|
+}
|
|
|
+.submit-btn {
|
|
|
+ width: 306px;
|
|
|
+ height: 38px;
|
|
|
+ background: #5b4dff;
|
|
|
+ border-radius: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.tabs-box ::v-deep .el-tabs {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.tabs-box ::v-deep .el-tabs__nav {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.tabs-box ::v-deep .el-tabs__item {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ width: 159px;
|
|
|
+ height: 49px;
|
|
|
+ line-height: 49px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.tabs-box ::v-deep .el-tabs__item.is-active {
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ border-radius: 15px;
|
|
|
+}
|
|
|
+.tabs-box ::v-deep .el-tabs__active-bar {
|
|
|
+ width: 76px !important;
|
|
|
+ height: 7px;
|
|
|
+ background: linear-gradient(270deg, #5e97ff 0%, #5e5be6 100%);
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-left: calc(159px / 2 - 76px / 2);
|
|
|
+}
|
|
|
+.tabs-box ::v-deep .el-tabs__nav-wrap::after {
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+.page6 ::v-deep .el-carousel--horizontal {
|
|
|
+ width: 987px;
|
|
|
+ height: 391px;
|
|
|
+}
|
|
|
+.page6 ::v-deep .el-carousel__container {
|
|
|
+ height: 391px;
|
|
|
+}
|
|
|
+.page6 ::v-deep .el-carousel__arrow {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|