website/src/components/pages/solution/solution.vue

<template>
  <div class="solution">
    <headerTab></headerTab>
    <div class="title">
      <!-- <div class="cover-bg">
        <img src="../../../assets/image/program/bannerbg.png" alt>
      </div> -->
      <div>
        <p class="tit">{{title}}</p>
      <p class="label">{{desc}}</p>
      <p class="label">{{desc2}}</p>
      <p class="desc">{{engdesc}}</p>
      </div>
    </div>
    <div class="solution-main">
      <el-tabs class="tab-bar" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
          <span slot="label">
            <img src="../../../assets/image/program/building.png" alt>智慧案场
          </span>
          <div class="problem-box">
            <div class="main-box">
              <p class="con-tit">痛点描述</p>
              <span class="con-desc">Existing problem</span>
              <div class="img-box">
                <div class="discribe_box">
                  <div class="dis_box_img">
                    <img src="../../../assets/image/wisdom/wisdom01.jpg" alt>
                  </div>
                  <div class="box_dis">
                    <p class="dis_p1">营销费用高效果差</p>
                  </div>
                </div>
                <div class="discribe_box">
                  <div class="dis_box_img">
                    <img src="../../../assets/image/wisdom/wisdom02.jpg" alt>
                  </div>
                  <div class="box_dis">
                    <p class="dis_p1">营销手段传统、数据反馈慢</p>
                  </div>
                </div>
                <div class="discribe_box">
                  <div class="dis_box_img">
                    <img src="../../../assets/image/wisdom/wisdom03.jpg" alt>
                  </div>
                  <div class="box_dis">
                    <p class="dis_p1">渠道商载客、大量飞单</p>
                  </div>
                </div>
                <div class="discribe_box">
                  <div class="dis_box_img">
                    <img src="../../../assets/image/wisdom/wisdom04.jpg" alt>
                  </div>
                  <div class="box_dis">
                    <p class="dis_p1">客户归属、划分不清</p>
                  </div>
                </div>
                
              </div>
            </div>
            <div class="programme-box">
              <p class="con-tit">解决方案</p>
              <span class="con-desc">The solution</span>
              <div class="programme-con">
                <img class="hudong" src="../../../assets/image/wisdom/group01.png" alt>
                <img class="shuzi" src="../../../assets/image/wisdom/group02.png" alt>
                <img class="zhineng" src="../../../assets/image/wisdom/group03.png" alt>
                <img class="yunduan" src="../../../assets/image/wisdom/group04.png" alt>
                <img class="line-one" src="../../../assets/image/wisdom/line/3.png" alt>
                <img class="line-two" src="../../../assets/image/wisdom/line/2.png" alt>
                <img class="line-three" src="../../../assets/image/wisdom/line/1.png" alt>
                <div class="con-one text-con">
                  <img src="../../../assets/image/wisdom/hudong.png" alt>
                  <p class="text-tit">刷脸互动，精准营销</p>
                  <p class="text-desc">多点部署刷脸广告机，以增加趣味性</p>
                  <p class="text-desc">楼盘信息精准推送</p>
                </div>
                <div class="con-two text-con">
                  <img src="../../../assets/image/wisdom/yinxiao.png" alt>
                  <p class="text-tit">数字化营销手段更易传播</p>
                  <p class="text-desc">自媒体时代新工具</p>
                  <p class="text-desc">楼盘信息小程序一键分享，不受时间空间限制、线上预约更方便</p>
                </div>
                <div class="con-three text-con">
                  <img src="../../../assets/image/wisdom/zhuapai.png" alt>
                  <p class="text-tit">智能人脸、车牌抓拍</p>
                  <p class="text-desc">无感自适应识别，准确率达99%、专业地产案场场景设计</p>
                  <p class="text-desc">VIP迎宾，提升接待服务</p>
                </div>
                <div class="con-four text-con">
                  <img src="../../../assets/image/wisdom/pipei.png" alt>
                  <p class="text-tit">云端智能匹配到数据库</p>
                  <p class="text-desc">自动识别标记自然访客与渠道客户、有效防止截客、飞单</p>
                  <p class="text-desc">低成本，高效率</p>
                </div>
              </div>
            </div>
            <div class="best-box">
              <p class="con-tit">最佳实践</p>
              <span class="con-desc">Successful cases</span>
              <div class="best-con">
                <div class="logo">
                  <img src="../../../assets/image/logoicon/Bitmap.png" alt style="height:40px">
                  <span>智慧大屏机</span>
                </div>
                <div class="logo">
                  <img src="../../../assets/image/logoicon/yinchenglogo.png" alt>
                  <span>全案发布平台</span>
                </div>
                <div class="logo">
                  <img src="../../../assets/image/logoicon/aicustomer.png" alt>
                  <span>AI迎宾判客系统</span>
                </div>
              </div>
            </div>
          </div>
          <footerNav></footerNav>
        </el-tab-pane>

        <el-tab-pane name="second">
          <span slot="label">
            <img src="../../../assets/image/program/house.png" alt>智慧社区
          </span>
          <div class="second-box">
            <div class="community-box">
              <p class="con-tit">智慧社区组成</p>
              <p class="con-desc">Smart community composition</p>
              <div class="community-con">
                <div class="make-up">
                  <div class="make-img">
                    <img src="../../../assets/image/program/community/group10.png" alt>
                  </div>
                  <p>智能门禁</p>
                </div>
                <div class="make-up">
                  <div class="make-img">
                    <img src="../../../assets/image/program/community/group01.png" alt>
                  </div>
                  <p>智慧出行</p>
                </div>
                <div class="make-up">
                  <div class="make-img">
                    <img src="../../../assets/image/program/community/group07.png" alt>
                  </div>
                  <p>智慧家居</p>
                </div>
                <div class="make-up">
                  <div class="make-img">
                    <img src="../../../assets/image/program/community/group02.png" alt>
                  </div>
                  <p>智慧安防</p>
                </div>
                <div class="make-up">
                  <div class="make-img">
                    <img src="../../../assets/image/program/community/group09.png" alt>
                  </div>
                  <p>智慧空间</p>
                </div>
                <div class="make-up">
                  <div class="make-img">
                    <img src="../../../assets/image/program/community/group04.png" alt>
                  </div>
                  <p>自助大堂</p>
                </div>
                <div class="make-up">
                  <div class="make-img">
                    <img src="../../../assets/image/program/community/group05.png" alt>
                  </div>
                  <p>智慧管家</p>
                </div>
              </div>
            </div>
            <div class="page-main main-first">
              <p class="con-tit">智慧社区拓扑图</p>
              <p class="con-desc">Topology of smart community</p>
              <div class="page-box">
                <img class="smart-img" src="../../../assets/image/program/community/Resource01.png" alt>
              </div>
            </div>
            <div class="page-main">
              <p class="con-tit" style="width:135px">解决方案</p>
              <p class="con-desc">The solution</p>
              <img class="solution-img" src="../../../assets/image/program/community/G2.png" alt>
            </div>
            <div class="page-main super-box">
              <p class="con-tit" style="width:60px;">超脑</p>
              <p class="con-desc">Super brain</p>
              <div class="page-box">
                
                
                <img class="super-img" src="../../../assets/image/program/community/Resource02.png" alt>
                <div class="super-con super-one">
                  <img class="img-up" src="../../../assets/image/program/community/group03.png" alt>
                  <p class="super-tit">整合操作系统</p>
                  <p class="super-desc">超脑平台一方面可以整合Windows和linux两个操作系统，通过操作系统内部署硬件厂商的软件系统来管理硬件。</p>
                </div>
                <div class="super-con super-two">
                  <img class="img-down" src="../../../assets/image/program/community/group06.png" alt>
                  <p class="super-tit">软件整合便于管理</p>
                  <p class="super-desc">超脑平台通过荟房自主研发技术整合各个厂商的软件系统，形成统一的界面，便于管理社区各个硬件。</p>
                </div>
                <div class="super-con super-three">
                  <img src="../../../assets/image/program/community/group08.png" alt>
                  <p class="super-tit">加快建设步伐</p>
                  <p class="super-desc">不同的社区采购的硬件类别可能不同，厂商也可能不同。此时，只需接入超脑平台，即可打破各协议标准的屏障，加快智慧社区建设步伐。</p>
                </div>
                <div class="super-con super-four">
                  <img src="../../../assets/image/program/community/group11.png" alt>
                  <p class="super-tit">方便用户使用</p>
                  <p class="super-desc">对物业工作人员而言，不光免除需记住多个厂商的账号密码来进入社区各管理系统的繁杂。对于社区居民则大大提高了其用户体验，只需通过一个APP，即可在社区内畅行无阻。</p>
                </div>
              </div>
              <p class="super-text">智慧社区作为新形势下社会管理创新的一种新模式，充分利用物联网、云计算、移动互联网等新一代信息技术的集成应用，为社区居民提供一个安全、舒适、便利的现代化、智慧化生活环境。而作为智慧社区不可或缺的智能硬件品类繁多，产品开发还面临多种协议标准的抉择，导致归属不同厂商的的不同硬件很难做到相互兼容，限制了各智能硬件的协同集成发展，故而提出“智慧社区超脑计划”。</p>
              <p class="super-text">为了更加快速有效的进行硬件对接及调试，我们倾尽开发能力打造了“超脑平台”。该平台可实现不同品牌、不同类型、不同接口的硬件设备轻松对接，对接完成后，再由超脑对接云端。在智慧社区建设中可以减轻后期开发量，缩短开发时间，提升效率。</p>
            </div>
            <div class="page-main">
              <p class="con-tit" style="width:120px;">智慧家居</p>
              <p class="con-desc">Intelligent household</p>
              <img class="solution-img" src="../../../assets/image/program/community/Resource08.jpg" alt>
            </div>
            <div class="page-main">
              <p class="con-tit">美好生活畅想</p>
              <p class="con-desc">Imagine a better life</p>
              <img class="life-img" style="margin-top:40px;" src="../../../assets/image/program/community/Resource06.jpg" alt>
              <img class="life-img" src="../../../assets/image/program/community/Resource05.jpg" alt>
              <img class="life-img" src="../../../assets/image/program/community/Resource07.jpg" alt>
              <img class="life-img" src="../../../assets/image/program/community/Resource04.jpg" alt>
              <img class="life-img" style="margin-bottom:60px;" src="../../../assets/image/program/community/Resource03.jpg" alt>
            </div>
          </div>
          <footerNav></footerNav>
        </el-tab-pane>
        <el-tab-pane name="third">
          <span slot="label">
            <img src="../../../assets/image/program/orderImg.png" alt>产品定制
          </span>
          <div class="third-box">
            <div class="main-box">
              <p class="con-tit">痛点描述</p>
              <span class="con-desc">Existing problem</span>
              <div class="img-box">
                <div class="img-con">
                  <img src="../../../assets/image/program/order/Bitmap.jpg" alt>自建团队费时费力成本高
                </div>
                <div class="img-con">
                  <img src="../../../assets/image/program/order/Bitmap2.jpg" alt>存在技术壁垒，项目周期长
                </div>
                <div class="img-con">
                  <img src="../../../assets/image/program/order/Bitmap3.jpg" alt>企业业务分散，难专注
                </div>
              </div>
            </div>
            <div class="main-box">
              <p class="con-tit">解决方案</p>
              <span class="con-desc">The solution</span>
              <div class="label-box">
                <div class="label-con" :class="bgHover==1?'hover-div':''" @mouseenter="divHover(1)" @mouseleave="leaveHover(1)">
                  <div class="label-img">
                    <img v-if="bgHover==1" src="../../../assets/image/program/order/team1.png" alt>
                    <img  v-if="bgHover!=1" src="../../../assets/image/program/order/team.png" alt>
                  </div>
                  <p class="label-tit">专业开发团队</p>
                  <p class="label-desc">团队拥有丰富实战经验，千万金额成功项目，实力不容小觑</p>
                </div>
                <div class="label-con" :class="bgHover==2?'hover-div':''" @mouseenter="divHover(2)" @mouseleave="leaveHover(2)">
                  <div class="label-img">
                    <img v-if="bgHover==2" src="../../../assets/image/program/order/cost1.png" alt>
                    <img   v-else src="../../../assets/image/program/order/cost.png" alt>
                  </div>
                  <p class="label-tit">开发费用透明</p>
                  <p class="label-desc">消除行业壁垒，信息不对称问题，价格透明，比肩行业水平</p>
                </div>
                <div class="label-con" :class="bgHover==3?'hover-div':''" @mouseenter="divHover(3)" @mouseleave="leaveHover(3)">
                  <div class="label-img">
                    <img v-if="bgHover==3" src="../../../assets/image/program/order/time1.png" alt>
                    <img  v-else src="../../../assets/image/program/order/time.png" alt>
                  </div>
                  <p class="label-tit">高质按时交付</p>
                  <p class="label-desc">不随意拖延开发工期，保证高质量按时交付成品</p>
                </div>
                <div class="label-con" :class="bgHover==4?'hover-div':''" @mouseenter="divHover(4)"  @mouseleave="leaveHover(4)">
                  <div class="label-img">
                    <img v-if="bgHover==4" src="../../../assets/image/program/order/Operation.png" alt>
                    <img  v-else src="../../../assets/image/program/order/Operation1.png" alt>
                  </div>
                  <p class="label-tit">持续运营支持</p>
                  <p class="label-desc">按需提供软件上线后运营支持，修复漏洞服务</p>
                </div>
                <div class="label-con" :class="bgHover==5?'hover-div':''" @mouseenter="divHover(5)" @mouseleave="leaveHover(5)">
                  <div class="label-img">
                    <img v-if="bgHover==5" src="../../../assets/image/program/order/afterSale1.png" alt>
                    <img  v-else src="../../../assets/image/program/order/afterSale.png" alt>
                  </div>
                  <p class="label-tit">售后服务周到</p>
                  <p class="label-desc">秉承顾客至上理念，全方位跟进需求，专业解答您的所有疑惑</p>
                </div>
              </div>
            </div>
            <div class="main-box">
              <p class="con-tit">业务范围</p>
              <span class="con-desc">The business scope</span>
              <div class="business-box">
                <div class="business-con" >
                  <img src="../../../assets/image/program/order/web.png" alt>
                  <p class="business-tit">web应用程序</p>
                  <p class="business-desc">基于互联网，浏览器端的应用程序</p>
                </div>
                <div class="business-con">
                  <img src="../../../assets/image/program/order/app.png" alt>
                  <p class="business-tit">APP软件开发</p>
                  <p class="business-desc">基于iOS/Android应用开发 掌控智能终端时代</p>
                </div>
                <div class="business-con">
                  <img src="../../../assets/image/program/order/wx.png" alt>
                  <p class="business-tit">微信二次开发</p>
                  <p class="business-desc">定制手机网站 制作 布局移动互联网</p>
                </div>
                <div class="business-con">
                  <img src="../../../assets/image/program/order/pro.png" alt>
                  <p class="business-tit">小程序/H5定制</p>
                  <p class="business-desc">满足各类移动营销需求</p>
                </div>
                <div class="business-con">
                  <img src="../../../assets/image/program/order/software.png" alt>
                  <p class="business-tit">系统软件开发</p>
                  <p class="business-desc">CRM\ERP\OA等软件系统的设计开发</p>
                </div>
                <div class="business-con">
                  <img src="../../../assets/image/program/order/UI.png" alt>
                  <p class="business-tit">界面品牌设计</p>
                  <p class="business-desc">专业高端视角页面设计 树立品牌形象</p>
                </div>
              </div>
              <div class="main-box">
                <p class="con-tit">最佳实践</p>
                <span class="con-desc">Successful cases</span>
                <div class="cases-box">
                  <div class="cases-con">
                    <img src="../../../assets/image/program/order/huiju.png" alt>二手房
                  </div>
                  <div class="cases-con">
                    <img src="../../../assets/image/program/order/quan.png" alt>全渠道在线平台
                  </div>
                  <div class="cases-con">
                    <img style="height:40px;margin:50px auto;" src="../../../assets/image/program/order/yuejian.png" alt>微楼书
                  </div>
                  <div class="cases-con">
                    <img src="../../../assets/image/program/order/h5.png" alt>H5
                  </div>
                  <div class="cases-con">
                    <img src="../../../assets/image/program/order/Applets.png" alt>小程序
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footerNav></footerNav>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import headerTab from "@/components/commonComponents/headerTab";
import footerNav from "@/components/commonComponents/footerNav";

export default {
  components: { headerTab, footerNav },

  data () {
    return {
      activeName: "first",
      title: "智慧案场",
      desc: "精准营销、人脸抓取、智能判客",
      desc2: "",
      engdesc: "Intelligent face risk control system",
      colorHover: 2,
      bgHover: 3,
     
    };
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event);
      if (this.activeName === "second") {
        this.title = "智慧社区服务平台 ";
        this.desc = "一个全系平台，四大集群系统";
        this.desc2 = "";
        this.engdesc = "Intelligent face risk control system";
      } else if (this.activeName === "third") {
        this.title = "按需定制";
        this.desc = "软件开发 我们更懂你 ";
        this.desc2 = "我们提供的就是您想要的服务";
        this.engdesc = "We provide the service you want";
      } else {
        this.title = "智慧案场";
        this.desc = "精准营销、人脸抓取、智能判客";
        this.desc2 = "";
        this.engdesc = "Intelligent face risk control system";
      }
    },
    leaveHover(index){
      this.bgHover != index;
      this.bgHover = '';
    },
    spanHover (index) {
      this.colorHover = index;
      
    },
    divHover (index) {
      this.bgHover = index;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" >
.solution {
  height: 100%;
  width: 100%;
  .title {
    width: 100%;
    min-width: 1260px;
    height: 90%;
    background: url('../../../assets/image/program/bannerbg.png') no-repeat center;
    background-size: 100% 100%;
    // border-radius: 0 0 200% 200%;
    opacity: 1 !important;
    color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .cover-bg {
      position: absolute;
      top: 0;
      z-index: -1;
      overflow: hidden;
      img {
        width: 100%;
        height: 779px;
      }
    }

    .tit {
      font-size: 64px;
      // padding-top: 20%;
      font-weight: 100;
      line-height: 100px;
    }
    .label {
      font-size: 40px;
      line-height: 60px;
      font-weight: 100;
    }
    .desc {
      font-size: 12px;
      letter-spacing: 4px;
      line-height: 50px;
    }
    .bc_rai {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 70px;
      background-color: #fff;
    }
    .bc_radian {
      width: 100%;
      height: 70px;
      border-radius: 0 0 50% 50%;
      position: absolute;
      bottom: 0;
      background-color: red;
    }
  }
  .solution .solution-main .tab-bar {
  }

  .solution-main {
    width: 100%;
    min-width: 1260px;
    margin-top: -4%;
    .tab-bar {
      height: 110px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 1px 4px 0px #4165f2;
      // margin-top: -255px;
      .problem-box {
        background-size: 100% 7300px;
        background-image: -webkit-linear-gradient(#ebf1fc, #fdfcff, #e9f0fe);
        background: url("../../../assets/image/bg.png") no-repeat 0 70px;
      }
      .el-tabs__header {
        height: 100px;
        margin: 0;
        .el-tabs__active-bar {
          left: 10%;
          top: 0;
          // width: 95px !important;

          display: flex;
          justify-content: center;
          // text-align: center;
          width: 90px !important;
          height: 12px;
          border-radius: 0px 0px 100px 100px;
          background-color: #4e84ff;
          // width: 250px;
        }
        .el-tabs__item.is-active {
          color: #4e84ff;
        }
        
    
        .el-tabs__item {
          height: 100px;
          width: 250px;
          // padding: 0 0 0 20px;
          img {
            display: block;
            width: 22px;
            height: 22px;
            margin: 30px auto 0 auto;
          }
        }
      }
      .main-box {
        width: 100%;
        margin-top: -120px;
        padding: 110px 0;
        .con-tit {
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 50%,
            #4e84ff 50%
          );
          width: 135px;
          margin: 0 auto;
          font-size: 30px;
          color: #000;
          margin-top: 80px;
        }
        .con-desc {
          font-size: 13px;
          letter-spacing: 4px;
          line-height: 40px;
          color: #4e84ff;
        }
        .img-box {
          margin: 20px auto 0 auto;
          width:1260px;
          display: flex;
          justify-content: space-between;
          .img-con {
            width: 288px;
            height: 250px;
            border-radius: 6px;
            background-color: rgb(243, 240, 240);
            margin: 0 5px;
            display: inline-block;
            line-height: 50px;
            color: #808080;
            img {
              display: block;
              width: 100%;
              border-radius: 6px 6px 0 0;
            }
          }
        }
        .label-box {
          margin: 20px auto 0 auto;
          width: 1300px;
          .label-con {
            width: 230px;
            height: 160px;
            box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
            border-radius:10px;
            display: inline-block;
            border-radius: 5px;
            background-color: #fff;
            margin: 0 10px;
            .label-img {
              width: 40px;
              height: 40px;
              background-color: #4e84ff;
              border-radius: 20px;
              margin: -20px auto 0 auto;
              img {
                width: 22px;
                margin-top: 9px;
              }
            }
            .label-tit {
              font-size: 17px;
              color: #000;
              font-weight: 600;
              margin-top: 20px;
              line-height: 34px;
            }
            .label-desc {
              font-size: 13px;
              color: #808080;
              text-align: left;
              padding: 0 20px;
              line-height: 20px;
            }
          }
          .label-con:hover{
            background-color: #4e84ff;
            .label-tit {
              color: #fff;
            }
            .label-desc {
              color: #fff;
            }
            .label-img {
              background-color: #fff;
              box-shadow: 0px 0px 4px 0px #4181f2;
            }
          }
          .hover-div {
            // background-color: #4e84ff;
            // .label-tit {
            //   color: #fff;
            // }
            // .label-desc {
            //   color: #fff;
            // }
            // .label-img {
            //   background-color: #fff;
            //   box-shadow: 0px 0px 4px 0px #4181f2;
            // }
          }
        }
        .business-box {
          margin: 30px auto;
          width: 816px;
          height: 360px;
          .business-con {
            width: 230px;
            height: 150px;
            margin: 10px 20px;
            float: left;
            border-radius: 4px;
            img {
              height: 38px;
              margin-top: 12px;
            }
            .business-tit {
              font-size: 18px;
              color: #000;
              font-weight: 600;
              line-height: 36px;
            }
            .business-desc {
              font-size: 13px;
              color: #444;
              line-height: 20px;
              width: 130px;
              margin: 0 auto;
            }
          }
          .business-con:hover{
            box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
            border-radius:10px;
          }
          
        }
        .cases-box {
          margin: 40px auto;
          width: 1050px;
          height: 30px;
          .cases-con:hover{
            box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
            border-radius:10px;
          }
          .cases-con {
            width: 190px;
            height: 186px;
            border-radius: 6px;
            margin: 0 10px;
            
            font-size: 18px;
            color: #000;
            float: left;
            img {
              display: block;
              height: 60px;
              margin: 40px auto;
            }
          }
        }
      }
      .programme-box {
        // background-color: #e3e9fd;
        min-height: 1000px;
        padding-top: 80px;
        .con-tit {
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 50%,
            #4e84ff 50%
          );
          width: 135px;
          margin: 0 auto;
          font-size: 30px;
          color: #000;
        }
        .con-desc {
          font-size: 13px;
          letter-spacing: 4px;
          line-height: 40px;
          color: #4e84ff;
        }
        .programme-con {
          width: 940px;
          min-height: 1160px;
          margin: 40px auto 0 auto;
          position: relative;
          .hudong {
            width: 300px;
            position: absolute;
            left: 80px;
          }
          .shuzi {
            width: 340px;
            position: absolute;
            right: 0;
            top: 230px;
          }
          .zhineng {
            width: 330px;
            position: absolute;
            left: 0;
            top: 550px;
          }
          .yunduan {
            width: 280px;
            position: absolute;
            right: 100px;
            top: 840px;
          }
          .line-one {
            width: 490px;
            height: 230px;
            position: absolute;
            right: 360px;
            top: 60px;
          }
          .line-two {
            width: 484px;
            position: absolute;
            left: 88px;
            top: 320px;
          }
          .line-three {
            width: 530px;
            position: absolute;
            right: 360px;
            top: 560px;
          }
          .text-con {
            text-align: left;
            img {
              width: 36px;
            }
            .text-tit {
              font-size: 22px;
              color: #000;
              line-height: 40px;
            }
            .text-desc {
              font-size: 17px;
              color: #808080;
            }
          }
          .con-one {
            position: absolute;
            right: 100px;
            top: 20px;
          }
          .con-two {
            position: absolute;
            left: 70px;
            top: 290px;
          }
          .con-three {
            position: absolute;
            right: -40px;
            top: 580px;
          }
          .con-four {
            position: absolute;
            left: 40px;
            top: 870px;
          }
        }
      }
      .best-box {
        padding-top: 100px;
        .con-tit {
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 50%,
            #4e84ff 50%
          );
          width: 135px;
          margin: 0 auto;
          font-size: 30px;
          color: #000;
        }
        .con-desc {
          font-size: 13px;
          letter-spacing: 4px;
          line-height: 40px;
          color: #4e84ff;
        }
        .best-con {
          width: 1260px;
          height: 240px;
          margin: 60px auto 0 auto;
          display: flex;
          justify-content: space-between;
          .logo {
            // float: left;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            width: 255px;
            height: 140px;
            box-shadow: 0px 0px 5px 0 #4171f2;
            border-radius: 10px;
            img {
              height: 80px;
            }
            span {
              // margin-left:
              font-size: 18px;
            }
          }
        }
      }
      .second-box {
        background: url("../../../assets/image/bg.png") no-repeat 0 100%;
        
        width: 100%;
      }
      .community-box {
        width: 100%;
        margin-top: -120px;
        background-image: -webkit-linear-gradient(#ebf1fc, #fdfcff, #e9f0fe);
        padding: 110px 0;
        z-index: 1;
        .con-tit {
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 50%,
            #4e84ff 50%
          );
          width: 195px;
          font-size: 30px;
          color: #000;
          margin: 90px auto 0 auto;
        }
        .con-desc {
          font-size: 13px;
          letter-spacing: 4px;
          line-height: 40px;
          color: #4e84ff;
        }
        .community-con {
          width: 980px;
          margin: 60px auto 0 auto;
          height: 120px;

          .make-up {
            width: 100px;
            float: left;
            margin: 0 20px;
            .make-img {
              width: 50px;
              margin: 0 auto;
              height: 46px;
              img {
                width: 40px;
                max-height: 46px;
                display: block;
                margin: 0 auto;
              }
            }

            p {
              line-height: 40px;
              font-size: 18px;
              color: #000;
              height: 40px;
            }
          }
        }
      }

      .page-main {
        width: 100%;
        padding: 20px 0;
        .con-tit {
          background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 50%,
            #4e84ff 50%
          );
          width: 225px;
          font-size: 30px;
          color: #000;
          margin: 50px auto 0 auto;
        }
        .con-desc {
          font-size: 13px;
          letter-spacing: 4px;
          line-height: 40px;
          color: #4e84ff;
        }
        .page-box {
          width:1225px;
height:563px;
background:rgba(255,255,255,1);
box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
          padding: 26px 0;
          margin: 40px auto;
          .smart-img {
            width: 928px;
          }
        }
        .solution-img {
          width: 1000px;
          margin: 20px auto;
        }
        .life-img {
          width: 1000px;
        }
      }
      .main-first {
        padding-top: 60px;
      }
      .super-box {
        .page-box {
          position: relative;
          padding: 20px;
          margin: 40px auto 20px auto;
          
          .super-img {
            height: 512px;
          }
          .super-con {
            position: absolute;
            width: 260px;
            text-align: left;
            .super-tit {
              font-size: 16px;
              color: #000;
              line-height: 30px;
            }
            .super-desc {
              font-size: 13px;
              color: #666;
            }
            img {
              width: 34px;
            }
          }
          .super-one {
            left: 30px;
            top: 93px;
          }
          .super-two {
            left: 30px;
            top: 293px;
          }
          .super-three {
            right: 30px;
            top: 93px;
          }
          .super-four {
            right: 20px;
            top: 293px;
          }
        }
        .super-text {
          font-size: 13px;
          color: #666;
          width: 1265px;
          margin: 0 auto;
          text-align: left;
          line-height: 20px;
        }
      }
      .third-box {
        background: url("../../../assets/image/bg.png") no-repeat 100% 100%;
        // background-size: 100% 7100px;
        width: 100%;
        .img-box {
          .img-con {
            margin: 0 26px;
          }
        }
      }
    }
  }
}
.discribe_box {
  width: 288px;
  height: 267px;
  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
  border-radius: 6px;
  .dis_box_img {
    img {
      width: 288px;
      height: 191px;
    }
  }
  .box_dis {
    margin: 14px;
    .dis_p1,
    .dis_p2 {
      color: rgba(128, 128, 128, 1);
      font-size: 16px;
    }
  }
}
</style>