official_revision/src/views/index.vue

<template>
  <div class="index-html">
    <div class="body">
      <div class="header-background">
        <!-- 头部导航条 -->
        <div class="headerList intro-x">
          <div class="floatLeft">
            <div class="left1">
              <img alt="" src="@/assets/images/logo.svg" />
            </div>

            <span class="left2">智莺</span>
            <span class="left3">方案解决 </span>
            <span class="left4">功能特色</span>
            <span class="left5">智莺联盟</span>
          </div>

          <div class="floatRihgt" @click="getLogin">
            <span class="span-img">
              <img
                draggable="false"
                src="@/assets/images/index/my.png"
                alt=""
              />
            </span>
            <span class="spanText">未登录</span>
          </div>
        </div>
        <!-- 头部内容 -->
        <div class="content-box">
          <div class="title-span">
            <div class="span1 intro-x">智莺系统</div>
            <div class="span2 -intro-x">ZHIYING SYSTEM</div>
            <div class="span3 intro-x">投入少·收益多 智慧创业选智莺</div>
            <div class="span4 -intro-x"><span>开启创业之路</span></div>
          </div>
        </div>
        <!-- 大图 -->
        <div class="indexBG2-box intro-Y">
          <img
            draggable="false"
            class="indexBG2"
            src="@/assets/images/index/bg2.png"
            alt=""
          />
        </div>
      </div>
      <!-- 方案解决 -->
      <div class="content-title intro-Y">
        <p class="p1">多终端产品线 全覆盖</p>
        <p class="p2">全面覆盖多终端产品线，智颖系统智能集成系</p>
      </div>
      <div class="scheme-box">
        <div class="scheme-left -intro-x">
          <div
            class="div-item"
            :class="{ 'div-item2': itemType == 1 }"
            @click="setItemType(1)"
          >
            <div class="item-img">
              <img
                draggable="false"
                src="@/assets/images/index/yuansheng.png"
                alt=""
              />
            </div>
            <div class="item-Text -intro-x">
              <div class="text1">全原生开发</div>
              <div class="text2">支持安卓，iOS，iPad终端全平台运营</div>
            </div>
          </div>
          <div
            class="div-item"
            :class="{ 'div-item2': itemType == 3 }"
            @click="setItemType(3)"
          >
            <div class="item-img">
              <img
                draggable="false"
                src="@/assets/images/index/pengyouquan.png"
                alt=""
              />
            </div>
            <div class="item-Text">
              <div class="text1">朋友圈</div>
              <div class="text2">每日精选素材，甄选爆款商品、优质活动</div>
            </div>
          </div>
          <div
            class="div-item"
            :class="{ 'div-item2': itemType == 5 }"
            @click="setItemType(5)"
          >
            <div class="item-img">
              <img
                draggable="false"
                src="@/assets/images/index/renwu.png"
                alt=""
              />
            </div>
            <div class="item-Text">
              <div class="text1">任务中心</div>
              <div class="text2">自由发布任务，设置奖励，促进活跃度</div>
            </div>
          </div>
        </div>
        <div class="scheme-centre intro-y">
          <div class="swiper-box">
            <el-carousel
              width="296px;"
              height="612px"
              :autoplay="false"
              ref="swiper"
            >
              <el-carousel-item
                v-for="item in carouselData"
                :key="item.name"
                :name="item.name"
              >
                <img
                  draggable="false"
                  class="isPhone"
                  :src="item.imgUrl"
                  alt=""
                />
              </el-carousel-item>
            </el-carousel>
          </div>

          <img
            draggable="false"
            class="phone"
            src="@/assets/images/index/phone.png"
            alt=""
          />
        </div>
        <div class="scheme-right intro-x">
          <div
            class="div-item"
            :class="{ 'div-item2': itemType == 2 }"
            @click="setItemType(2)"
          >
            <div class="item-img">
              <img
                draggable="false"
                src="@/assets/images/index/shuju.png"
                alt=""
              />
            </div>
            <div class="item-Text">
              <div class="text1">云发单</div>
              <div class="text2">全自动操作，一人搞定千群智能化管理与营销</div>
            </div>
          </div>
          <div
            class="div-item"
            :class="{ 'div-item2': itemType == 4 }"
            @click="setItemType(4)"
          >
            <div class="item-img">
              <img
                draggable="false"
                src="@/assets/images/index/xueyuan.png"
                alt=""
              />
            </div>
            <div class="item-Text">
              <div class="text1">商学院</div>
              <div class="text2">超多运营省钱技巧，教会每位用户领券省钱</div>
            </div>
          </div>
          <div
            class="div-item"
            :class="{ 'div-item2': itemType == 6 }"
            @click="setItemType(6)"
          >
            <div class="item-img">
              <img
                draggable="false"
                src="@/assets/images/index/qukuailian.png"
                alt=""
              />
            </div>
            <div class="item-Text">
              <div class="text1">9.9包邮</div>
              <div class="text2">筛选全网低价爆款，促进用户消费</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 功能特色 -->
      <div class="content-title intro-x">
        <p class="p1">行业多年沉淀，汇聚时代智慧</p>
        <p class="p2">功能种类齐全，想怎么玩就怎么玩</p>
      </div>

      <div class="teatureBox">
        <Swiper />
        <div class="teature-bottom">注册激活查看更多功能</div>
      </div>
      <!-- 后台管理 -->
      <div class="admin-box">
        <div class="content-title intro-x">
          <p class="p1">全新智能后台轻松管理</p>
          <p class="p2">2020全新智能人性化后台</p>
        </div>
        <div class="pcAdmin-box">
          <div class="png-box intro-x">
            <img
              draggable="false"
              class="intro-x"
              src="@/assets/images/index/pc.png"
              alt=""
            />
          </div>

          <div class="CarouselBox intro-x">
            <el-carousel
              indicator-position="none"
              height="367px"
              widht="618px"
              ref="admin"
              :interval="5000"
            >
              <el-carousel-item v-for="(item, index) in adminData" :key="index">
                <img
                  draggable="false"
                  class="itemImgUrl"
                  :src="item.imgUrl"
                  alt=""
                />
              </el-carousel-item>
            </el-carousel>

            <div
              class="indiButtom indicatorLeft el-icon-arrow-left intro-x"
              @click="onPrev"
            ></div>
            <div
              class="indiButtom indicatorRight el-icon-arrow-right intro-x"
              @click="onNext"
            ></div>
          </div>

          <div class="pcText-box">
            <p class="p1">智能助手</p>
            <p class="p2">自动检测后台配置，提供优化建议，为您的生意保驾护航</p>
          </div>
        </div>

        <div class="pcButtom">注册即可使用</div>
      </div>
      <!-- 适用人群 -->

      <div class="team-box">
        <div class="teamTitle">
          <div class="title1">适用人群</div>
          <div class="title2">适用大部分人群，不再担心面向哪些用户群体</div>
        </div>

        <div
          class="teamData4-box"
          v-for="(item, index) in teamData4"
          :key="index"
        >
          <img :src="item.imgUrl" alt="" />
          <div class="imgUrlTitle">
            {{
              index == 0
                ? "全职宝妈"
                : index == 1
                ? "上班一族"
                : index == 2
                ? "创业人群"
                : "微商代购"
            }}
          </div>

          <div class="itemContent">{{ item.content }}</div>
        </div>

        <div class="teamTitle">
          <div class="title1">好口碑源于强大技术研发团队</div>
          <div class="title2">
            8年的技术沉淀，平均每月4-6次的系统免费迭代更新，成就行业用户口碑
          </div>
        </div>

        <div class="titleNum">
          <div class="itemText">
            <div style="font-size: 32px; color: #1890ff">1000+</div>
            <div style="color: #4f5362; font-size: 20px">客户品牌数</div>
          </div>
          <div class="itemText">
            <div style="font-size: 32px; color: #1890ff">6000万人+</div>
            <div style="color: #4f5362; font-size: 20px">累计用户数</div>
          </div>
          <div class="itemText">
            <div style="font-size: 32px; color: #1890ff">1000亿元+</div>
            <div style="color: #4f5362; font-size: 20px">累计销售额</div>
          </div>
          <div class="itemText">
            <div style="font-size: 32px; color: #1890ff">99.99%</div>
            <div style="color: #4f5362; font-size: 20px">系统稳定性</div>
          </div>
        </div>

        <vue-seamless-scroll
          :data="newsList"
          :class-option="{
            direction: 2,
            limitMoveNum: 2,
          }"
          class="seamless-warp2 intro-x"
        >
          <div class="key-y">
            <div
              v-for="(item, index) in teamData4"
              :key="'item' + index"
              style="margin-left: 40px"
            >
              <img class="itemImgUrl" :src="item.imgUrl" alt="" />

              <p class="itemContent">{{ item.content }}</p>
            </div>
          </div>
        </vue-seamless-scroll>

        <vue-seamless-scroll
          :data="newsList"
          :class-option="{
            direction: 3,
            limitMoveNum: 2,
          }"
          class="seamless-warp2 intro-x"
        >
          <div class="key-y">
            <div
              v-for="(item, index) in teamData5"
              :key="'item' + index"
              style="margin-left: 40px"
            >
              <img class="itemImgUrl" :src="item.imgUrl" alt="" />

              <p class="itemContent">{{ item.content }}</p>
            </div>
          </div>
        </vue-seamless-scroll>

        <vue-seamless-scroll
          :data="newsList"
          :class-option="optionLeft"
          class="seamless-warp2 intro-x"
        >
          <div class="key-y">
            <div
              v-for="(item, index) in teamData6"
              :key="'item' + index"
              style="margin-left: 40px"
            >
              <img class="itemImgUrl" :src="item.imgUrl" alt="" />

              <p class="itemContent">{{ item.content }}</p>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>

      <div class="footer2">
        <div class="titleH1 color1 intro-x">超过2000+企业信赖选择</div>
        <div class="titleH2 color1 intro-x">简单三步开启您的智慧创业之路</div>
        <div class="footer-content intro-x">
          <div class="floatLeft">
            <img
              draggable="false"
              class="floatPng"
              src="@/assets/images/index/zhuce.png"
              alt=""
            />
            <div class="color1" style="font-size: 30px">1.注册账号</div>
            <div class="fontColor">注册账号填写资料直接前往创建应用</div>
          </div>
          <img
            draggable="false"
            class="ringPng"
            src="@/assets/images/index/right.png"
            alt=""
          />
          <div class="floaCentre">
            <img
              draggable="false"
              class="floatPng"
              src="@/assets/images/index/app.png"
              alt=""
            />
            <div class="color1" style="font-size: 30px">2.创建应用</div>
            <div class="fontColor">创建应用后选择想要使用的版本即可</div>
          </div>
          <img
            draggable="false"
            class="ringPng"
            src="@/assets/images/index/right.png"
            alt=""
          />
          <div class="floatLeft">
            <img
              draggable="false"
              class="floatPng"
              src="@/assets/images/index/zhuanqian.png"
              alt=""
            />
            <div class="color1" style="font-size: 30px">1.开始赚钱</div>
            <div class="fontColor">智能化后台帮您轻松管理，轻松赚钱</div>
          </div>
        </div>
      </div>

      <!-- 页脚 -->
      <footer class="footer-box">
        <div class="footerBody">
          <ul class="ul1">
            <li style="font-weight: bold">新手指南</li>
            <li><a href="#">新手指南</a></li>
            <li>
              <a href="#">快速选购</a>
            </li>
            <li>
              <a href="#">互动专区</a>
            </li>
            <li>
              <a href="#">有问必答</a>
            </li>
          </ul>
          <ul class="ul1">
            <li style="font-weight: bold">服务支持</li>
            <li>
              <a href="#">客服在线</a>
            </li>
            <li>
              <a href="#">购买咨询</a>
            </li>
            <li>
              <a href="#">联系智莺</a>
            </li>
            <li>
              <a href="#">帮助中心</a>
            </li>
          </ul>
          <ul class="ul1">
            <li style="font-weight: bold">常见问题</li>
            <li>
              <a href="#">智莺系统免费吗</a>
            </li>
            <li>
              <a href="#">如何购买插件</a>
            </li>
            <li>
              <a href="#">有几种模式可选</a>
            </li>
            <li>
              <a href="#">如何选购版本</a>
            </li>
          </ul>
          <ul class="ul1">
            <li style="font-weight: bold">用户中心</li>
            <li>
              <a href="#">会员管理</a>
            </li>

            <li>
              <a href="#">网站管理</a>
            </li>
            <li>
              <a href="#">插件订单</a>
            </li>
            <li>
              <a href="#">主机域名</a>
            </li>
          </ul>
          <ul class="ul1">
            <li style="font-weight: bold">关于智莺</li>
            <li>
              <a href="#">智莺首页</a>
            </li>
            <li>
              <a href="#">联系我们</a>
            </li>
            <li>
              <a href="#">人才招聘</a>
            </li>
            <li>
              <a href="#">帮助中心</a>
            </li>
          </ul>
        </div>
        <div class="footerBottom">
          <div style="margin-top: 20px">
            © 2008-2020 珠海方诺信息科技有限公司 版权所有 粤ICP备13020798号
          </div>
          <div>粤公网安备 44049002000552</div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import Swiper from "../modules/swiper";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  computed: {
    teamData4: function () {
      return this.teamData.slice(0, 4);
    },
    teamData5() {
      let arr = JSON.parse(JSON.stringify(this.teamData));
      for (let i = 0, len = arr.length; i < len; i++) {
        const ran = parseInt(Math.random() * len);
        const temp = arr[ran];
        arr[ran] = arr[i];
        arr[i] = temp;
      }
      return arr;
    },
    teamData6() {
      let arr = JSON.parse(JSON.stringify(this.teamData));
      for (let i = 0, len = arr.length; i < len; i++) {
        const ran = parseInt(Math.random() * len);
        const temp = arr[ran];
        arr[ran] = arr[i];
        arr[i] = temp;
      }
      return arr;
    },
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 2,
      };
    },
  },

  components: {
    Swiper,
    vueSeamlessScroll,
  },
  data() {
    return {
      itemType: 1,
      divTop: null,
      adminData: [
        {
          imgUrl: require("../assets/images/index/AppleTV1.png"),
        },
        {
          imgUrl: require("../assets/images/index/AppleTV2.png"),
        },
        {
          imgUrl: require("../assets/images/index/AppleTV3.png"),
        },
      ],
      carouselData: [
        {
          imgUrl: require("../assets/images/index/1.png"),
          name: "index1",
        },
        {
          imgUrl: require("../assets/images/index/3.png"),
          name: "index3",
        },
        {
          imgUrl: require("../assets/images/index/5.png"),
          name: "index5",
        },
        {
          imgUrl: require("../assets/images/index/2.png"),
          name: "index2",
        },
        {
          imgUrl: require("../assets/images/index/4.png"),
          name: "index4",
        },
        {
          imgUrl: require("../assets/images/index/6.png"),
          name: "index6",
        },
      ],
      teamData: [
        {
          imgUrl: require("../assets/images/touxiang/1.png"),
          content:
            "智莺平台有宝妈们中意的海量优质商品，商学院里面还有简单明了的教程，一看就懂，宝妈们在家带宝宝就能赚钱，还能发展自己的团队，比上班还赚得多！",
        },
        {
          imgUrl: require("../assets/images/touxiang/2.png"),
          content:
            "上班族很辛苦，用智莺平台0门槛入门，利用社交网发展团队，团队消费自己坐享收益。利用工作之余的时间就能实现双向收入，变身斜杠青年！",
        },
        {
          imgUrl: require("../assets/images/touxiang/3.png"),
          content:
            "初期创业有做APP的想法，但是招聘研发团队需要大量资金，使用智莺生活SaaS系统，没有库存压力，只需要将心思放到运营商就可以了，大大节省了成本！",
        },
        {
          imgUrl: require("../assets/images/touxiang/4.png"),
          content:
            "随着微商群体越来越多，竞争越来越激烈，收入难增加，使用智莺生活可以利用购物省钱福利刺激粉丝消费热情，将粉丝变成自己的团队，开启另一条造富之路!",
        },
        {
          imgUrl: require("../assets/images/touxiang/5.png"),
          content:
            "朋友使用购物返利软件比较多，我就了解了一下，没想到通过智莺，我居然拥有自己的返利App，不仅可以让朋友获得实惠，自己也能有一份可观收入，真是不错！",
        },
        {
          imgUrl: require("../assets/images/touxiang/6.png"),
          content:
            "一直以来都在考察导购软件系统，经朋友介绍接触了智莺系统，他们的系统界面使用起来比较舒服，功能也很强大，产品能够满足市场推广需要。",
        },
        {
          imgUrl: require("../assets/images/touxiang/7.png"),
          content:
            "有很多同行都有提到过智莺，自己也去了解一下，发现这个系统不管是从软件功能方面还是从整个服务体验来说都是一流的。",
        },
        {
          imgUrl: require("../assets/images/touxiang/8.png"),
          content:
            "在其他平台上接触过一些软件服务商，都只管功能不管用户体验的。智莺完全不同，他们软件都是自己团队开发的，多年市场基础，注重用户体验，整体感觉非常好。",
        },
        {
          imgUrl: require("../assets/images/touxiang/9.png"),
          content:
            "自从我选择智莺系统之后，我就知道自己没有选错，从软件购买到后面服务都是非常好的，每一步都有人性化引导，如果不明白也有专人指导，使用方便。",
        },
        {
          imgUrl: require("../assets/images/touxiang/10.png"),
          content:
            "想要做导购软件，优先考虑智莺系统，智莺系统给你的不仅仅是一个导购软件，它还能够给你更多的惊喜和意外，新功能的创新，软件的迭代速度等都非常优秀。",
        },
        {
          imgUrl: require("../assets/images/touxiang/11.png"),
          content:
            "做了多年的淘客，也用了好几家的软件，最后觉得还是智莺系统最好用。我们追求的是稳定.功能齐全.好管理，智莺就很好的满足了我的需求。",
        },
        {
          imgUrl: require("../assets/images/touxiang/12.png"),
          content:
            "第一次做导购软件，很多东西都不知道怎么办，好在他们的服务特别周到，需要的资料都会指导你申请，自己不会弄的也立马给你解决，办事效率高，关键是省心。",
        },
        {
          imgUrl: require("../assets/images/touxiang/13.png"),
          content:
            "前后对比了很多家，抱着试一试的想法，试用了智莺系统，发现他们功能、页面都比较符合我的要求。希望智莺越来越好",
        },
        {
          imgUrl: require("../assets/images/touxiang/14.png"),
          content:
            "其他软件主流的功能，智莺都有，而且体验更好！产品库很强大，代理模式也很棒！智莺系统的确很好用吗，省心效率又高！",
        },
        {
          imgUrl: require("../assets/images/touxiang/15.png"),
          content:
            "关于淘客软件哪个好用，我觉得还是智莺系统好用。最喜欢智莺App的界面，很简洁，容易操作，还可以根据我的需求自定义调整。",
        },
        {
          imgUrl: require("../assets/images/touxiang/16.png"),
          content:
            "使用智莺系统也有一段时间了，收入还是很不错的，这段时间来，行业有什么新政策调整，他们都会及时更新功能，让你的利益最大化，少踩雷，多赚钱。",
        },
      ],
      newsList: [
        {
          title: "A simple, seamless scrolling for Vue.js",
        },
        {
          title: "A curated list of awesome things related to Vue.js",
        },
      ],
    };
  },
  created() {
    document.body.style.padding = 0;
  },
  mounted() {
    cash("body").removeClass("login");

    this.divTop = document.getElementsByClassName("scheme-box")[0].offsetTop;
    window.onscroll = this.showDiv; //当页面滚动时触发该事件
  },
  methods: {
    setItemType: function (value) {
      console.log("index" + value);
      this.itemType = value;
      this.$refs.swiper.setActiveItem("index" + value);
    },
    onPrev: function () {
      this.$refs.admin.prev();
    },
    onNext: function () {
      this.$refs.admin.next();
    },

    // 去登录
    getLogin: function () {
      this.$router.push("/login");
    },

    showDiv() {
      //获取滚动条距离页面顶部的距离，如果滚动条距离页面距离大于目标元素距离页面顶部的距离，则目标元素已经往上滚动，且超出了当前可视区域，则给该元素添加fixed属性
      var scroolTop = document.documentElement.scrollTop;
      if (scroolTop >= this.divTop) {
        document
          .getElementsByClassName("feature-box")[0]
          .classList.add("intro-x");
      } else {
        document
          .getElementsByClassName("feature-box")[0]
          .classList.remove("intro-x");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
}
.index-html {
  background: #fff;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
}
.header-background {
  width: 100vw;
  height: 830px;
  overflow: hidden;
  background-image: url("../assets/images/index/bg3.png");
  background-repeat: no-repeat;
  background-size: 100% 636px;
  position: relative;
  .indexBG2-box {
    text-align: center;
    width: 100%;
    margin-top: 50px;
    .indexBG2 {
      width: 1200px;
      display: inline-block;
    }
  }

  .headerList {
    font-size: 14px;
    color: #fff;
    padding-top: 18px;
    overflow: hidden;
    height: 48px;
    span {
      display: inline-block;
      cursor: pointer;
    }
    .floatLeft {
      float: left;
      height: 100%;
      margin-left: 18%;

      .left1 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        vertical-align: -9px;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
          float: left;
        }
      }

      .left2,
      .left3,
      .left4 {
        margin-right: 30px;
      }
    }

    .floatRihgt {
      float: right;
      margin-right: 18%;
      .span-img {
        height: 30px;
        width: 30px;
        vertical-align: -9px;
        margin-right: 20px;
      }
    }
  }

  .content-box {
    margin: 130px 0 0;
    text-align: center;
  }

  .title-span {
    color: #ffffff;
    .span1 {
      font-size: 50px;
      line-height: 60px;
      letter-spacing: 2px;
      font-weight: bold;
    }
    .span2 {
      font-size: 26px;
      line-height: 36px;
      font-weight: bold;
    }
    .span3 {
      display: inline-block;
      font-size: 20px;
      padding: 7px 23px 5px 22px;
      border: 1px solid #ffffff;
      border-radius: 8px;
      margin-top: 10px;
    }
    .span4 > span {
      display: inline-block;
      width: 220px;
      height: 50px;
      background: #ffffff;
      box-shadow: 0px 5px 10px 0px rgba(0, 33, 176, 0.3);
      border-radius: 25px;
      color: #2f71ff;
      font-size: 18px;
      line-height: 50px;
      cursor: pointer;
      font-weight: bold;
    }

    .span4 {
      margin: 20px auto 0;
      width: 220px;
      height: 50px;
    }
    .span4 > span:active {
      background: rgb(238, 238, 238);
      zoom: 0.98;
    }
  }
}
.content-title {
  text-align: center;
  padding-top: 40px;
  width: 636px;
  margin: auto;
  .p1 {
    font-size: 32px;
    font-weight: bold;
    color: #333333;
    line-height: 45px;
  }
  .p2 {
    font-size: 16px;
    font-weight: 500;
    color: #b0b0b0;
    line-height: 21px;
    margin-top: 5px;
  }
}
.scheme-box {
  width: 1240px;
  margin: 70px auto 0;
  overflow: hidden;
  .scheme-left {
    float: left;
    margin-top: 38px;
    padding: 0 10px;
    .div-item {
      width: 398px;
      height: 124px;
      background: #fafafa;

      border-radius: 26px;
      margin-bottom: 82px;
      overflow: hidden;
      cursor: pointer;
      padding: 32px 0;
    }
  }
  .scheme-right {
    float: left;
    margin-top: 38px;
    padding: 0 10px;
    .div-item {
      width: 398px;
      height: 124px;
      background: #fafafa;
      border-radius: 26px;
      margin-bottom: 82px;
      overflow: hidden;
      cursor: pointer;
      padding: 32px 0;
    }
  }
  .scheme-centre {
    float: left;
    width: 296px;
    height: 612px;
    margin: 0 54px 0;
    overflow: hidden;
    position: relative;
    .swiper-box {
      width: 290px;
      height: 588px;
      overflow: hidden;
      position: absolute;
      width: 290px;
      height: 588px;
      top: 12px;
      left: 2px;
      z-index: 8;
      border-radius: 30px;
    }
    .isPhone {
      width: 290px;
      height: 588px;
    }
    .phone {
      width: 296px;
      height: 612px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
  }
  .item-img {
    width: 60px;
    height: 60px;
    background: linear-gradient(180deg, #75b5fd 0%, #1890ff 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    margin: 0 16px;
    float: left;
    img {
      width: 32px;
      display: inline-block;
      vertical-align: -12px;
    }
  }
  .item-Text {
    float: left;
    line-height: 30px;
    .text1 {
      color: #333333;
      font-size: 18px;
      font-weight: bold;
    }
    .text2 {
      font-size: 14px;
      color: #999999;
    }
  }
  .div-item2 {
    background: #fff !important;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.5s linear, box-shadow 0.5s linear;
  }
  .div-item:hover {
    background: #fff;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    transition: background-color 0.5s linear, box-shadow 0.5s linear;
  }
}

.teatureBox {
  padding-bottom: 70px;
  overflow: hidden;
}
.teature-bottom {
  width: 268px;
  height: 57px;
  background: linear-gradient(270deg, #1d7eea 0%, #1890ff 100%);
  box-shadow: 0px 5px 10px 0px rgba(29, 128, 237, 0.3);
  border-radius: 42px;
  font-size: 18px;
  color: #fff;
  line-height: 57px;
  text-align: center;
  margin: 0px auto 0;
  cursor: pointer;
}
.teature-bottom:hover {
  background: linear-gradient(270deg, #4399fc 0%, #4ba8ff 100%);
  transition: background-color 0.5s linear;
}
.teature-bottom:active {
  zoom: 0.98;
}

.admin-box {
  height: 810px;
  background: #f9f9f9;
  width: 100%;
  padding: 20px 0 40px;
  box-sizing: border-box;
}

.pcAdmin-box {
  width: 636px;
  height: 500px;
  position: relative;
  margin: 30px auto 0;
  .png-box {
    width: 636px;
    position: absolute;
    z-index: 1;
    img {
      width: 100%;
      vertical-align: middle;
      margin: 0;
    }
  }
}

.pcText-box {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0px;
  z-index: 8888;
  .p1 {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
  }
  .p2 {
    display: inline-block;
    width: 200px;
    font-size: 14px;
    color: #999999;
  }
}

.pcButtom {
  width: 180px;
  height: 57px;
  background: linear-gradient(270deg, #1d7eea 0%, #1890ff 100%);
  box-shadow: 0px 5px 10px 0px rgba(29, 128, 237, 0.3);
  border-radius: 29px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 40px auto 0;
  line-height: 57px;
}
.pcButtom:hover {
  background: linear-gradient(270deg, #4399fc 0%, #4ba8ff 100%);
  transition: background-color 0.5s linear;
}
.pcButtom:active {
  zoom: 0.98;
}

.CarouselBox {
  width: 618px;
  height: 367px;
  position: absolute;
  left: 9px;
  border-radius: 2px;
  top: 9px;
  .itemImgUrl {
    width: 100%;
    height: 100%;
  }
  .indiButtom {
    top: 160px;
    position: absolute;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: rgba(51, 51, 51, 0.3);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
  .indiButtom:hover {
    background: rgba(51, 51, 51, 0.2);
    font-size: 22px;
    transition: background-color 0.5s linear, font-size 0.5s linear;
  }

  .indiButtom:active {
    background: rgba(51, 51, 51, 0.1);
    transition: background-color 0.5s linear;
    zoom: 1.01;
  }

  .indicatorLeft {
    left: -100px;
  }
  .indicatorRight {
    right: -100px;
  }
}

// 适用人群
.team-box {
  text-align: center;
  padding-bottom: 90px;
  .teamTitle {
    text-align: center;
    height: 164px;
    box-sizing: border-box;
    padding-top: 50px;
    .title1 {
      color: #333333;
      font-size: 32px;
      font-weight: bold;
    }
    .title2 {
      color: #b0b0b0;
      font-size: 16px;
    }
  }
  .teamData4-box {
    width: 278px;
    height: 346px;
    background: #f9f9f9;
    border-radius: 16px;
    cursor: pointer;
    display: inline-block;
    margin-right: 30px;
    vertical-align: middle;
    color: #999999;

    img {
      height: 120px;
      width: 120px;
      margin: 30px auto 20px;
    }
  }
  .imgUrlTitle {
    color: #333333;
    font-size: 18px;
    font-weight: 900;
  }

  .itemContent {
    height: 104px;
    font-size: 13px;
    margin: auto;
    overflow: hidden;
    font-weight: 400;
    padding: 0 20px;
    margin-top: 15px;
  }

  .teamData4-box:last-child {
    margin-right: 0%;
  }
  .teamData4-box:hover {
    background-color: #1890ff !important;
    box-shadow: 0px 0px 20px 0px rgba(24, 144, 255, 0.4) !important;
    color: #fff !important;
    transition: background-color 1s ease, color 1s ease, box-shadow 1s ease;

    .imgUrlTitle {
      color: #fff !important;
    }
  }

  .titleNum {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
    .itemText {
      display: inline-block;
      margin-right: 230px;
      line-height: 35px;
    }
    .itemText:last-child {
      margin-right: 0;
    }
  }

  .key-y {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    margin-bottom: 20px;
    margin-top: 30px;

    .itemImgUrl {
      float: left;
      width: 80px;
      height: 80px;
    }

    .itemContent {
      font-size: 12px;
      float: left;
      color: #4f5362;
      max-width: 330px;
      white-space: normal;

      height: 100%;
      text-align: left;
    }

    div {
      display: inline-block;
      overflow: hidden;
      width: 434px;
      height: 96px;
      padding: 8px;
      background: #f9f9f9;
      border-radius: 51px;
    }
  }
}

//
.footer2 {
  width: 100%;
  height: 622px;
  background-image: url("../assets/images/index/bg1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  .fontColor {
    font-size: 22px;
    color: #fff;
    opacity: 0.7;
  }
  .color1 {
    text-align: center;
    color: #fff;
  }
  .titleH1 {
    font-size: 40px;
    margin-top: 80px;
  }
  .titleH2 {
    font-size: 22px;
    margin-top: 5px;
  }
  .footer-content {
    margin: 60px auto 0;
    width: 100%;
    text-align: center;

    .floatPng {
      width: 80px;
      height: 80px;
      margin: auto;
    }

    div {
      display: inline-block;
      width: 180px;
    }
    .ringPng {
      height: 26px;
      margin: 0 65px;
      display: inline-block;
      vertical-align: 126px;
    }
  }
}

// 页脚
.footer-box {
  padding-top: 50px;
  width: 1500px;
  box-sizing: border-box;
  margin: auto;

  overflow: hidden;
  .footerBody {
    height: 237px;
    width: 100%;
    text-align: center;
  }

  .footerBottom {
    text-align: center;
    height: 85px;
    width: 100%;
    border-top: 1px solid #f2f2f2;
    div {
      color: #666666;
      font-size: 14px;
      margin-top: 10px;
    }
  }
  ul {
    color: #666666;
    font-size: 13px;
    margin-top: 37px;
  }
  .ul1:last-child {
    margin: 0;
  }
  .ul1 {
    display: inline-block;
    text-align: left;
    margin-right: 70px;
    li {
      width: 100%;
      margin-bottom: 20px;
    }
  }
}

::-webkit-scrollbar {
  display: none;
}

.seamless-warp {
  width: 100%;
  height: calc(100% - 16px);
  overflow: hidden;
}

//  动画

.intro-Y {
  transform: translateY(100px);
  animation: 0.5s intro-y-animation linear 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 0;
  @apply opacity-0 relative;
}

@keyframes intro-y-animation {
  100% {
    @apply opacity-100;
    transform: translateY(0px);
  }
}
</style>