fls-asp-qr-cunke-intelligent-tutoring/src/views/HomeView.vue

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import banner1 from "../assets/banner1.jpg";
import banner2 from "../assets/banner2.jpg";
import banner3 from "../assets/banner3.jpg";
import banner4 from "../assets/banner4.jpg";
const active = ref(0);
const value = ref("");
const images = ref([
  { url: banner1 },
  { url: banner2 },
  { url: banner3 },
  { url: banner4 },
]);
const router = useRouter();
const handleDetail = () => {
  router.push("/detail");
};
onMounted(() => {
  localStorage.removeItem("chatHistory");
  localStorage.removeItem("status");
});
</script>
<template>
  <div class="home">
    <!-- 人物头像 -->
    <div class="avatar">
      <header>
        <img src="../assets/head.jpg" alt="" />
        <div class="head_content">
          <span>Chris B</span>
          <span>探索未知，发现自我～</span>
        </div>
      </header>
      <div class="search">
        <van-search v-model="value" placeholder="搜索" />
      </div>
      <div class="banner">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <div class="image-wrapper">
              <img :src="image.url" alt="轮播图片" />
              <div class="text-wrapper">
                <div>模拟对话场景，提升业务能力</div>
                <button>查看任务</button>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="card_list">
        <p>陪练课程</p>
        <div class="card_content">
          <div class="card_item" @click="handleDetail()">
            <img src="../assets/role3.jpg" alt="" />
            <p>电话销售</p>
            <span>电话销售场景</span>
          </div>
          <div class="card_item">
            <img src="../assets/role2.jpg" alt="" />
            <p>电话销售</p>
            <span>电话销售场景</span>
          </div>
          <div class="card_item">
            <img src="../assets/role1.jpg" alt="" />
            <p>电话销售</p>
            <span>电话销售场景</span>
          </div>
          <div class="card_item">
            <img src="../assets/role.jpg" alt="" />
            <p>电话销售</p>
            <span>电话销售场景</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar -->
    <div style="visibility: hidden; height: 50px"></div>
    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="friends" icon="contact-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped lang="less">
p {
  margin: 0;
  padding: 0;
}

html {
  touch-action: manipulation;
  /* 禁止双指缩放 */
}

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

.avatar {
  padding: 0 1.38rem;

  header {
    padding: 1.31rem 0;
    display: flex;
    align-items: center;

    img {
      width: 3.13rem;
      height: 3.13rem;
      border-radius: 6.25rem;
      background-color: rgba(229, 229, 229, 1);
      box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(92, 117, 169, 0.4);
      margin-right: 1.25rem;
    }

    .head_content {
      display: flex;
      flex-direction: column;

      span {
        line-height: 1.44rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1rem;
        text-align: left;
        font-family: PingFangSC-medium;
      }

      span:nth-child(2) {
        color: rgba(102, 102, 102, 0.7);
        font-size: 0.88rem;
        line-height: 1.25rem;
      }
    }
  }

  .search {
    .van-search {
      width: 100%;
      height: 2.5rem;
      padding: 0;
    }

    :deep(.van-search__content) {
      border-radius: 0.5rem;
    }
  }

  .banner {
    margin: 1.25rem 0 1.25rem 0;
  }

  .image-wrapper {
    position: relative;
    width: 100%;
    height: 8.75rem;
    border-radius: 0.75rem;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .text-wrapper {
      position: absolute;
      left: 0.88rem;
      top: 2.19rem;
      line-height: 1.56rem;
      color: rgba(255, 255, 255, 1);
      font-size: 1.13rem;
      text-align: left;
      font-family: Times New Roman-regular;

      button {
        margin-top: 1.44rem;
        width: 5.25rem;
        height: 1.75rem;
        border: 1px solid rgba(255, 255, 255, 1);
        line-height: 1.06rem;
        border-radius: 0.38rem;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(9, 52, 74, 1);
        font-size: 0.75rem;
        text-align: center;
        font-family: -regular;
      }
    }
  }

  .card_list {
    p {
      line-height: 1.44rem;
      color: rgba(16, 16, 16, 1);
      font-size: 1rem;
      text-align: left;
      font-family: Times New Roman-regular;
      margin-bottom: 0.38rem;
    }

    .card_content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      /* margin-top: 1.25rem; */
    }

    .card_item {
      width: 47%;
      height: 13.75rem;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0rem 0.06rem 0.88rem 0rem rgba(0, 1, 130, 0.08);
      border-radius: 0.75rem;
      overflow: hidden;
      margin-bottom: 1rem;

      img {
        width: 100%;
        height: 9.75rem;
        object-fit: cover;
      }

      p {
        margin: 0.63rem 0 0 0.63rem;
        line-height: 1.25rem;
        color: rgba(16, 16, 16, 1);
        font-size: 0.88rem;
        text-align: left;
        font-family: PingFangSC-medium;
      }

      span {
        line-height: 1.06rem;
        color: rgba(102, 102, 102, 1);
        font-size: 0.75rem;
        text-align: left;
        font-family: PingFangSC-regular;
        margin-left: 0.63rem;
      }
    }
    // @media (min-width: 600px) {
    //   .card {
    //     width: 50%;
    //     height: 400px;
    //   }
    // }
  }
}
</style>