fls-asp-xw-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";
import role1 from "../assets/role1.png";
import role2 from "../assets/role2.png";
import role3 from "../assets/role3.png";
import role from "../assets/role.png";

const images = ref([
  { url: banner1 },
  { url: banner2 },
  { url: banner3 },
  { url: banner4 },
]);

const router = useRouter();

const active = ref(0);
const value = ref("");

const cardlist = ref([
  {
    title: "新客触达",
    image: role3,
    subTitle: "白名单新客触达",
    description: "通过电话联系同业存客、或白户客户，摸排客户融资需求，寻找商机",
    sceneType:"XIAOWEI",
    roleOption:[
      {text: '同业存客', value: '同业存客'},
      {text: '白户客户', value: '白户客户'}
    ]
  },
  {
    title: "初次拜访",
    image: role2,
    subTitle: "判断意向营销推广",
    description:'HY金属模具有限公司，为平安已结清直租旧户，联系到了前笔承做时的公司负责人，了解到他已退休，现为二代接手，女儿赵总为法人，儿儿赵经理负责公司后勤杂务，对接银行以及租赁公司，姐弟共同经营公司。你与赵经理取得了联系，并按照公司的标准提供了价格范围，赵经理对价格有异议，你约了赵经理今天去HY公司拜访，沟通合作机会。',
    sceneType:"XIAOWEI_RONGZI",
    roleOption:[
      {text: '客户经理', value: '客户经理'},
    ]
  },
  {
    title: "存量客户（待解锁）",
    image: role1,
    subTitle: "存量客户名单",
    description: "通过电话联系已有的存量客户名单，开展营销，寻找商机",
    roleOption:[
      {text: '存量客户', value: '存量客户'},
    ]
  },
  {
    title: "区域陌拜（待解锁）",
    image: role,
    subTitle: "地推周边企业陌拜",
    description:"通过地推的方式搜索新客户，并进行现场陌拜，建立关系，挖掘商机",
    roleOption:[
      {text: '周边企业', value: '周边企业'},
    ]
  }
])

const handleDetail = (item,index) => { 
  if(index === 0 || index === 1){
    localStorage.setItem("role", JSON.stringify(item));
    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 v-for="(item, index) in cardlist" :key="index" class="card_item" @click="handleDetail(item,index)">
            <img :src="item.image" alt="" />
            <p>{{ item.title }}</p>
            <span>{{ item.subTitle }}</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>