<template>
  <div>
    <div class="cbusAB">
      <video class="hKbpCH" height="600" src="../../../static/top_video.mp4" autoplay="autoplay" loop muted
             playsinline></video>
      <div class="home-img">
        <img src="../../../static/txt.png" alt="">
        <div class="home-text">一款超方便的软装销售软件</div>
        <img class="home-img" style="top: 140%" src="../../../static/btn_on.png" alt="">
      </div>
    </div>
    <div class="main">
      <el-row :gutter="20" style="margin-top: -55px">
        <el-col :span="8">
          <el-card class="box-card">
            <div class="text_item">
              <div style="margin-right: 20px">
                <img src="../../../static/ic_01.png" alt="">
              </div>
              <div style="margin-top: 10px">
                <h1>丰富场景，VR漫游</h1>
                <div class="text_item_text">天花板级3D设计效果，给客户带 来全新沉浸式购物体验</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div class="text_item">
              <div style="margin-right: 20px">
                <img src="../../../static/ic_02.png" alt="">
              </div>
              <div style="margin-top: 10px">
                <h1>3D随心搭配</h1>
                <div class="text_item_text">无需设计师，导购也可轻松搭配 软装效果，可见即可售</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div class="text_item">
              <div style="margin-right: 20px">
                <img src="../../../static/ic_03.png" alt="">
              </div>
              <div style="margin-top: 10px">
                <h1>精选货源，一键报价</h1>
                <div class="text_item_text">自带货源，支持自营商品，一键 生成报价清单</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--title1-->
      <div>
        <div class="title1">
          <h1>现场设计，3D随心搭配</h1>
          <p>零门槛轻松上手参与设计，快速替换软装、更换材质颜色，满足客户对家的设计需求</p>
        </div>
        <video style="object-fit: fill;max-height: unset;width: 100%" height="675" src="../../../static/top_video.mp4" autoplay="autoplay" loop muted
               playsinline></video>
        <div style="text-align: center;margin-top: 18px;cursor: pointer">
          <img src="../../../static/btn_on.png" alt="">
        </div>
      </div>
    </div>
    <!--title2-->
    <div class="main2" style="padding-bottom: 100px">
      <div class="main">
        <div class="title1" style="margin-top: 10px">
          <h1 style="padding-top: 80px">电影级写实场景3D漫游</h1>
          <p>海量免费场景随意走动、720°全景漫游、8K级视觉体验，让您的店铺超越空间界限</p>
        </div>
        <el-row :gutter="10">
          <el-col :span="12" style="text-align: right">
            <img src="../../../static/home/1.png" alt="">
            <img style="margin-top: 8px" src="../../../static/home/3.png" alt="">
          </el-col>
          <el-col :span="12">
            <img src="../../../static/home/2.png" alt="">
            <img style="margin-top: 8px" src="../../../static/home/4.png" alt="">
          </el-col>
        </el-row>
      </div>
    </div>
    <!--<title3></title3>-->
    <div class="main">
      <!--title3-->
      <div>
        <div class="title1">
          <h1>多种效果呈现，快速引流</h1>
          <p>搭配好设计方案，秒出报价清单，多种获客引流方式，实时获取客户电话信息，锁客如此简单！</p>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="box-card">
              <div>
                <div style="text-align: center">
                  <img src="../../../static/home/i1.png" alt="">
                </div>
                <div style="margin-top: 10px">
                  <h1>高清效果图</h1>
                  <div class="text_item_text">支持场景作品分享，自动镜头捕捉 一秒批量导出4K高清效果图</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div>
                <div style="text-align: center">
                  <img src="../../../static/home/i2.png" alt="">
                </div>
                <div style="margin-top: 10px">
                  <h1>VR全景图</h1>
                  <div class="text_item_text">支持分享VR全景，搭配小程序，随 时随地精准获客</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div>
                <div style="text-align: center">
                  <img src="../../../static/home/i3.png" alt="">
                </div>
                <div style="margin-top: 10px">
                  <h1>漫游视频</h1>
                  <div class="text_item_text">支持以漫游形式输出视频，随时可 在抖音、小红书等平台传播</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div>
                <div style="text-align: center">
                  <img src="../../../static/home/i4.png" alt="">
                </div>
                <div style="margin-top: 10px">
                  <h1>一键报价</h1>
                  <div class="text_item_text">现场极速配货，支持快速报价、快 速打印商品清单</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div style="text-align: center;margin-top: 60px;cursor: pointer">
          <img src="../../../static/btn_on.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
  };
</script>

<style scoped>
  .title1{
    margin-top: 120px;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 800;
    margin-bottom: 40px;
  }
  .title1 h1{
    font-size: 32px;
    color: #333333;
  }
  .title1 p{
    margin-top: 15px;
    font-size: 15px;
    color: #9f9f9f;
  }
  .text_item_text{
    margin-top: 14px;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
  }
  .text_item{
    display: flex;
  }
  .cbusAB {
    position: relative;
    height: 610px;
    background-size: cover;
    color: rgb(255, 255, 255);
    box-sizing: border-box;
  }

  .hKbpCH {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 610px;
    transform: translateX(-50%);
    cursor: default;
    object-fit: fill;
    max-height: unset;
  }

  .home-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
    z-index: 99999
  }

  .home-text {
    width: 390px;
    height: 28px;
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    margin: 30px auto;
  }

  .main {
    width: 1300px;
    margin: 0 auto;
  }
  .main2{
    background: #f5f6fa;
  }

</style>
