AIxiaocaishen/src/views/DBQBmodel.vue

<script setup>
import { onMounted, ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import bgImageSmall from "@/assets/img/DBQBmodel/手机背景.png";
import bgImageLarge from "@/assets/img/DBQBmodel/电脑背景.png";
import topIcon from "@/assets/img/DBQBmodel/大标题.png";
import subtitle from "@/assets/img/DBQBmodel/-s-构建场景.png";
import text1 from "@/assets/img/DBQBmodel/-s-数据可计算.png";
import text2 from "@/assets/img/DBQBmodel/-s-场景可预演.png";
import text3 from "@/assets/img/DBQBmodel/-s-交易可掌控.png";
import btnIcon from "@/assets/img/DBQBmodel/-s-开启财运.png";
import { setHeight } from "@/utils/setHeight";
import { checkStatusAPI } from "../api/AIxiaocaishen";
import BackToHomeButton from "@/views/components/BackToHomeButton.vue";
const router = useRouter();
const pageRef = ref(null);
const windowWidth = ref(window.innerWidth);

// 响应式计算背景图片
const bgImage = computed(() => {
  return windowWidth.value > 1024 ? bgImageLarge : bgImageSmall;
});

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => {
  setHeight(pageRef.value);
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const noPermissonDialogVisible = ref(false);
const noPermissonDialogObj = ref({});
const goToHomePage = async () => {
  try {
    let params = {
      token: localStorage.getItem("localToken"),
      model: 1,
    };

    const userAgent = navigator.userAgent;
    let isMobile =
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        userAgent
      );

    let Client = "pc";

    if (isMobile) {
      if (/iPhone|iPad|iPod/i.test(userAgent)) {
        Client = "ios";
      } else if (/Android/i.test(userAgent)) {
        Client = "android";
      } else {
        Client = "android"; // 其他移动设备
      }
    }

    let headers = {
      Client: Client,
    };

    const res = await checkStatusAPI(headers, params);
    if (res.code == 200) {
      // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
      sessionStorage.setItem("activeTabAI", "AIchat");
      sessionStorage.setItem("activeIndexAI", "0");
      // 设置标记表示从外部页面跳转过来
      sessionStorage.setItem("fromExternalPage", "true");
      router.push("/homePage");
    } else {
      console.log("无权限");
      noPermissonDialogVisible.value = true;
      noPermissonDialogObj.value.msg = res.msg;

      console.log("noPermissonDialogVisible", noPermissonDialogVisible.value);
      console.log("noPermissonDialogObj", noPermissonDialogObj.value);
    }
  } catch (e) {
    console.error("获取权限失败", e);
  }
};

const closeNoPermissionDialog = () => {
  noPermissonDialogVisible.value = false;
};
</script>

<template>
  <div
    ref="pageRef"
    class="homepage"
    :style="{ backgroundImage: `url(${bgImage})` }"
  >
    <BackToHomeButton />

    <div v-if="false"></div>
    <!-- 顶部图标 -->
    <img class="top-icon" :src="topIcon" alt="顶部图标" />
    <!-- 副标题 -->
    <div class="bottom-icon">
      <img class="sub-title" :src="subtitle" alt="构建场景化交易" />
      <!-- 中间文字 -->
      <div class="content-text">
        <img class="content-text1" :src="text1" alt=" 数据可计算" />
        <img class="content-text2" :src="text2" alt=" 场景可预演" />
        <img class="content-text3" :src="text3" alt=" 交易可掌控" />
      </div>

      <!-- 底部按钮 -->
      <div class="buttons-container">
        <button class="btn-item" @click="goToHomePage">
          <img :src="btnIcon" alt="按钮图片" />
        </button>
      </div>
    </div>
  </div>

  <div v-if="noPermissonDialogVisible" class="noPermissionDialog">
    <div class="noPermissionContent" @click="closeNoPermissionDialog">
      <div class="noPermissionCloseBtn">
        <el-icon class="noPermissionIcon"><Close /></el-icon>
      </div>
      {{ noPermissonDialogObj.msg }}
    </div>
  </div>
</template>

<style scoped>
.homepage {
  /* background-image: url("@/assets/img/DBQBmodel/bg.png"); */
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* 顶部标题图 */
.top-icon {
  width: 80%;
  max-width: 500px;
  height: auto;
  /* margin-top: 20px; */
  position: absolute;
  top: 11vh;
}

.bottom-icon {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 10vh;
  left: 0;
  right: 0;
  margin: 0 auto;
  align-items: center;
}

/* 副标题 */
.sub-title {
  /* padding-top: 40px; */
  width: 100%;
  max-width: 350px;
  height: auto;
  /* margin-top: 18rem; */
}

/* 中间三个描述图 */
.content-text {
  display: flex;
  flex-direction: row;
  /* 改为横向排列 */
  align-items: center;
  justify-content: center;
  /* 添加水平居中 */
  /* gap: 23px; */
  margin-bottom: 10px;
  flex-wrap: wrap;
  /* 添加换行支持，防止小屏幕溢出 */
}

.content-text img {
  width: 80%;
  max-width: 300px;
  height: auto;
  flex: 1;
  /* 让图片平均分配空间 */
  min-width: 200px;
  /* 设置最小宽度 */
}

/* 按钮区 */
.buttons-container {
  align-items: center;
}

.btn-item {
  width: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.btn-item img {
  width: 200%;
  max-width: 350px;
  height: auto;
}

.noPermissionDialog {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 15%;
  left: 0;
  right: 0;
  /* margin: auto auto; */
  color: white;
}

.noPermissionCloseBtn {
  border-radius: 5px;
  border: 1px solid white;
  background-color: #8621d9;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10px;
  right: -10px;
}

.noPermissionContent {
  position: relative;
  border-radius: 5px;
  border: 1px solid white;
  padding: 10px 30px;
  background-color: #261176;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 手机适配 - 小屏幕时保持纵向排列 */
@media screen and (max-width: 768px) {
  .homepage {
    width: 100%;
    overflow-x: hidden;
  }
  
  .top-icon {
    margin-top: 12%;
    width: 90%;
  }

  .sub-title {
    width: 80%;
    margin-top: 25%;
  }

  .content-text {
    flex-direction: column;
    /* 小屏幕时恢复纵向排列 */
  }

  .content-text img {
    width: 70%;
    flex: none;
    /* 取消flex布局 */
  }

  .btn-item img {
    width: 50%;
    /* margin-top: 20px; */
  }
}
@media screen and (min-width: 375px) and (max-width: 400px) {
  .top-icon {
    margin-top: 2%;
    width: 90%;
  }
}
</style>