<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import HeimaPage from "./components/HeimaPage.vue";

const router = useRouter();
// 跳转到详情页
const handleDetail = () => {
  router.push("/detail");
};
const handleAudio = () => {
  router.push("/audio");
}
</script>
<template>
  <div class="home">
    <div class="logo">
      <img src="../assets/logqian.png" alt="">
      <div class="logo_title">
        <span>科驱数智创新室AI中台</span>
      </div>
    </div>
    <div class="main">
      <div class="banner">
        <div class="product">
          <p><span>智能陪练</span> <span class="separator"></span></p>
          <span>高效提升</span>
        </div>
        <div class="btn">
          <div>定制对话</div>
          <div>拟真复盘</div>
        </div>
      </div>
      <div class="card_list">
        <div class="card_item bg w">
          <p>1.定制专属训练场景</p>
          <!-- <div class="dingzhi"></div> -->
          <img src="../assets/dingzhi2.png" alt="">
        </div>
        <div class="card_item tg w1">
          <p>2.自由设定客户角色</p>
          <div class="scence"></div>
        </div>
        <div class="card_item voice w">
          <p>3.拟真语音深度对话</p>
        </div>
        <div class="card_item bg w1 h">
          <HeimaPage></HeimaPage>
        </div>
      </div>
      <div class="produce">
        <div class="left_img">
          <p>5.智能陪练应用场景</p>
          <div class="triangle">
            <div class="triangle-left"></div>
            <div class="text">汽融直客-客户经理电话邀约</div>
          </div>
          <div class="triangle">
            <div class="triangle-left"></div>
            <div class="text">汽融客服-在线坐席结清挽留</div>
          </div>
          <div class="triangle">
            <div class="triangle-left"></div>
            <div class="text">小微新回-客户经理授信拜访</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <van-button size="small" @click="handleDetail" class="w">立即体验</van-button>
        <van-button size="small" @click="handleAudio" class="w">视频演示</van-button>
      </div>
    </div>


  </div>
</template>

<style scoped lang="less">
html {
  touch-action: manipulation;
}

.home {
  min-width: 100vw;
  min-height: 100vh;
  background-image: url(../assets/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  // padding: 0;
  // margin: 0;
  box-sizing: border-box;
  // overflow: hidden;
}

.logo {
  padding: 1.5rem 1.3rem;
  display: flex;
  align-items: center;

  img {
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 3px;

  }

  .logo_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  span {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    // font-family: cursive;
  }
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.banner {
  box-sizing: border-box;
  margin: 1.3rem 0 0.65rem 1.3rem;

  .product {
    display: flex;
    font-weight: 700;
    color: #fff;
    font-size: 2.5rem;

    p {
      display: flex;
      align-items: center;
    }

    .separator {
      margin: 0 0.5rem;
      display: inline-block;
      width: 0.8rem;
      height: 0.8rem;
      background: #fff;
    }
  }

  .btn {
    display: flex;
    color: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    margin-top: 1.2rem;

    div {
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 0.33rem;
      padding: 0.25rem 0.33rem;
      font-size: 0.65rem;
    }

    div:nth-child(1) {
      margin-right: 0.65rem;
    }
  }

}

.card_list {
  // flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1.3rem 1.3rem 0 1.3rem;

  .card_item {
    width: 48%;
    box-sizing: border-box;
    padding: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;

    p {
      font-size: 0.88rem;
      // text-align: center;
    }

    img {
      // width: 100%;
      height: 10.5rem;
      object-fit: cover;
      max-height: auto;
      max-width: 100%;
      // height: auto;
    }

    .scence {
      height: 100%;
      width: 100%;
      background-image: url(../assets/role_scene2.png);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      background-repeat: no-repeat;
      background-size: 90% auto;
      background-position: center;
    }

    //  .dingzhi {
    //   min-height: 10.5rem;
    //   height: 100%;
    //   width: 100%;
    //   background-image: url(../assets/dingzhi.webp);
    //   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    //   background-repeat: no-repeat;
    //   background-size: cover;
    //   background-position: center;
    // }
  }

  .bg {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  .tg {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    color: #fff;
  }

  .voice {
    max-height: 11.5rem;
    height: 9.5rem;
    background-image: url(../assets/sence2.png);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    padding-top: 0.5rem;
    font-size: 0.88rem;
    text-align: center;

    p {
      color: #fff;
    }
  }

  .w {
    width: 46%;
  }

  .w1 {
    width: 52%
  }

  .h {
    max-height: 11.5rem;
    height: 9.5rem;
  }
}

.produce {
  padding: 0 1.3rem;
  display: flex;
  justify-content: space-between;
  // background-color: #fff;

  .left_img {
    // width: 60%;
    flex: 1;
    background-image: url(../assets/优化文字展示.png);
    background-repeat: no-repeat;
    background-size: cover;
    // background-position: left center;
    background-position: center;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: #fff;
    box-sizing: border-box;
    padding: 1.13rem;

    p {
      font-size: 0.88rem;
      text-align: right;
    }

    span {
      font-size: 0.6rem;
      text-align: right;
    }

    .triangle {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      // margin-right: 6.5rem;

      .text {
        margin-left: 3px;
        font-size: 0.6rem;
        // line-height: 2rem;
      }
    }

    .triangle-left {
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-bottom: 5px solid white;
    }
  }

  .right {
    // width: 52%;
    flex: 1;
    background-color: #fff;
    // border-radius: 8px;
    box-sizing: border-box;
    padding: 0.5rem;

    p {
      font-size: .88rem;
      text-align: center;
      margin-bottom: 0.5rem;
    }

    ul li {
      font-size: 0.8rem;
      color: #666;
    }
  }
}

.test {
  height: 10rem;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 1.3rem;
  color: #fff;
  text-align: right;

  ul {
    list-style-type: disc;
    padding-left: 8.2rem;
    margin: 1em 0;
    font-size: 0.8rem;
  }

  span {
    text-align: right;
  }
}

.bottom {
  // flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;

  .w {
    width: 7rem;
    height: 2.5rem;
    font-size: 1rem;
    background-color: rgb(255, 102, 51);
    color: #fff;
    margin-right: 1.2rem;
  }
}

@media (max-width: 767px) {
  html {
    touch-action: pan-y;
    /* 允许垂直滚动，禁止水平滚动和缩放 */
  }
}

@media (min-width: 1001px) {

  /* 在这里编写你的样式规则 */
  .logo {
    padding: 2rem;

    img {
      width: 3rem;
      height: 3rem;
      margin-right: 5px;
    }

    span {
      font-size: 1.5rem;
    }
  }

  .banner {
    margin: 1rem 0 1.13rem 2rem;

    .product {
      font-size: 3.3rem;
    }

    .separator {
      margin-left: 3vw;
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
    }

    .btn {
      margin-top: 1.8rem;
    }
  }

  .card_list {
    padding: 1.3rem 2rem 0 2rem;

    .card_item {
      padding: 1.2rem 0 0;
      margin-bottom: 1.3rem;

      p {
        font-size: 1.3rem;
      }

      img {
        max-width: 100%;
        height: 26rem;
      }
    }

    .voice {
      height: 18rem;
      max-height: 18rem;
    }

    .h {
      height: 18rem;
      max-height: 18rem;
    }
  }

  .produce {
    padding: 0 2rem;
    height: 16rem;

    .left_img {
      p {
        font-size: 1.3rem;
        text-align: right;
        margin-right: 9.9rem;
        margin-bottom: 1.13rem;
        margin-top: 2rem;
      }
      .triangle {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 6.5rem;

        .text {
          margin-left: 5px;
          font-size: 1.1rem;
          line-height: 2rem;
        }
      }

      .triangle-left {
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 13px solid white;
      }
    }


  }

  .test {
    height: 20rem;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 1.3rem;
    color: #fff;
    text-align: right;

    ul {
      list-style-type: disc;
    }
  }

  .test {
    height: 15rem;
    background-size: 100% auto;
  }

  .bottom {
    margin-top: 2.5rem;

    .w {
      width: 10rem;
      height: 3.2rem;
      font-size: 1.3rem;
    }
  }
}
</style>
