AIxiaocaishen/src/views/Emotionsmodel.vue

<template>
  <div ref="pageRef" class="homepage">
    <BackToHomeButton />
    <!-- 顶部图标 -->
    <img class="top-icon" :src="topIcon" alt="顶部图标" />

    <!-- 中间图示及说明 -->
    <div class="bottom-icon">
      <div class="content-container">
        <!-- 副标题 - 只在屏幕宽度小于等于1024px时显示 -->
        <img
          v-if="screenWidth <= 1024"
          class="sub-title"
          :src="subtitle"
          alt="四维作战体系"
        />
        <!-- 内容图 - 根据屏幕宽度动态切换 -->
        <img class="content-icon" :src="currentContentIcon" alt="四维情绪" />
      </div>

      <!-- 按钮区域 -->
      <div class="buttons-container">
        <button class="btn-item" @click="goToAiEmotion">
          <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>

<script setup>
import { onMounted, ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router";
// 移除背景图片的导入，改用CSS设置
import topIcon from "@/assets/img/Emotionsmodel/大标题.png";
import subtitle from "@/assets/img/Emotionsmodel/-s-标题 拷贝.png";
import conteniconLarge from "@/assets/img/Emotionsmodel/_s_四维 拷贝.png";
import conteniconSmall from "@/assets/img/Emotionsmodel/-s-四维.png";
import btnIcon from "@/assets/img/Emotionsmodel/-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 screenWidth = ref(window.innerWidth);

// 根据屏幕宽度选择内容图片
const currentContentIcon = computed(() => {
  return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall;
});

const handleResize = () => {
  screenWidth.value = window.innerWidth;
};

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

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

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

    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", "AiEmotion");
      sessionStorage.setItem("activeIndexAI", "1");
      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>

<style scoped>
.homepage {
  min-height: 100vh;
  background-image: url("@/assets/img/DBQBmodel/电脑背景.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

/* 顶部图标 */
.top-icon {
  width: 20vw;
  min-width: 300px;
  height: auto;
  position: absolute;
  top: 10vh;
}

.bottom-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 0vh;
}

/* 四维体系整体容器修复 */
.content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: auto;
}

/* 副标题 */
.sub-title {
  width: 90%;
  max-width: 480px;
  height: auto;
  margin-top: 30px;
}

/* 内容图 */
.content-icon {
  width: 100%;
  height: auto;
}

/* 按钮区域 */
.buttons-container {
  margin-top: auto;
  margin-bottom: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.btn-item {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.btn-item:hover {
  transform: scale(1.05);
}

.btn-item img {
  width: 60%;
  height: auto;
}

.noPermissionDialog {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 15%;
  /* 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 (max-width: 1024px) {
  /* 四维体系整体容器修复 */
  .content-container {
    width: 60%;
    height: auto;
  }
}
/* 手机适配 */
@media (max-width: 768px) {
  .homepage {
    min-height: 100vh;
    background-image: url("@/assets/img/DBQBmodel/手机背景.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  .top-icon {
    width: 80vw;
    margin-top: -1vh;
  }

  .sub-title {
    width: 95%;
    margin-top: -2vh;
  }

  /* 四维体系整体容器修复 */
  .content-container {
    width: 80%;
    height: auto;
  }
  .content-icon {
    width: 87%;
  }

  .buttons-container {
    margin-top: 4vh;
    margin-bottom: 4vh;
  }

  .btn-item img {
    width: 50%;
    height: auto;
  }
}
</style>