hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

模型logo位置更改

wangyi/feature-20250804103736-新需求
no99 4 weeks ago
parent
b55b232e21
commit
61fb71888f
2 changed files with 131 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      src/views/DBQBmodel.vue
  2. 85
      src/views/Emotionsmodel.vue

84
src/views/DBQBmodel.vue
View File

@ -1,53 +1,58 @@
<script setup> <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'
const router = useRouter()
const pageRef = ref(null)
const windowWidth = ref(window.innerWidth)
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";
const router = useRouter();
const pageRef = ref(null);
const windowWidth = ref(window.innerWidth);
// 响应式计算背景图片 // 响应式计算背景图片
const bgImage = computed(() => { const bgImage = computed(() => {
return windowWidth.value > 1024 ? bgImageLarge : bgImageSmall
})
return windowWidth.value > 1024 ? bgImageLarge : bgImageSmall;
});
// 监听窗口大小变化 // 监听窗口大小变化
const handleResize = () => { const handleResize = () => {
windowWidth.value = window.innerWidth
}
windowWidth.value = window.innerWidth;
};
onMounted(() => { onMounted(() => {
setHeight(pageRef.value)
window.addEventListener('resize', handleResize)
})
setHeight(pageRef.value);
window.addEventListener("resize", handleResize);
});
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
window.removeEventListener("resize", handleResize);
});
const goToHomePage = () => { const goToHomePage = () => {
// 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
sessionStorage.setItem("activeTabAI", "AIchat")
sessionStorage.setItem("activeIndexAI", "0")
router.push("/homePage")
}
sessionStorage.setItem("activeTabAI", "AIchat");
sessionStorage.setItem("activeIndexAI", "0");
router.push("/homePage");
};
</script> </script>
<template> <template>
<div ref="pageRef" class="homepage" :style="{ backgroundImage: `url(${bgImage})` }">
<div v-if="false"> </div>
<div
ref="pageRef"
class="homepage"
:style="{ backgroundImage: `url(${bgImage})` }"
>
<div v-if="false"></div>
<!-- 顶部图标 --> <!-- 顶部图标 -->
<img class="top-icon" :src="topIcon" alt="顶部图标" /> <img class="top-icon" :src="topIcon" alt="顶部图标" />
<!-- 副标题 --> <!-- 副标题 -->
<div class="bottom-icon">
<img class="sub-title" :src="subtitle" alt="构建场景化交易" /> <img class="sub-title" :src="subtitle" alt="构建场景化交易" />
<!-- 中间文字 --> <!-- 中间文字 -->
<div class="content-text"> <div class="content-text">
@ -62,7 +67,7 @@ const goToHomePage = () => {
<img :src="btnIcon" alt="按钮图片" /> <img :src="btnIcon" alt="按钮图片" />
</button> </button>
</div> </div>
</div>
</div> </div>
</template> </template>
@ -84,8 +89,19 @@ const goToHomePage = () => {
width: 80%; width: 80%;
max-width: 500px; max-width: 500px;
height: auto; height: auto;
margin-top: 20px;
/* margin-top: 20px; */
position: absolute;
top: 11vh;
}
.bottom-icon {
/* width: 100%; */
display: flex;
flex-direction: column;
position: absolute;
bottom: 10vh;
align-items: center;
} }
/* 副标题 */ /* 副标题 */
@ -94,7 +110,7 @@ const goToHomePage = () => {
width: 100%; width: 100%;
max-width: 350px; max-width: 350px;
height: auto; height: auto;
margin-top: 18rem;
/* margin-top: 18rem; */
} }
/* 中间三个描述图 */ /* 中间三个描述图 */
@ -124,8 +140,6 @@ const goToHomePage = () => {
/* 按钮区 */ /* 按钮区 */
.buttons-container { .buttons-container {
align-items: center; align-items: center;
} }
.btn-item { .btn-item {

85
src/views/Emotionsmodel.vue
View File

@ -4,9 +4,15 @@
<img class="top-icon" :src="topIcon" alt="顶部图标" /> <img class="top-icon" :src="topIcon" alt="顶部图标" />
<!-- 中间图示及说明 --> <!-- 中间图示及说明 -->
<div class="bottom-icon">
<div class="content-container"> <div class="content-container">
<!-- 副标题 - 只在屏幕宽度小于等于1024px时显示 --> <!-- 副标题 - 只在屏幕宽度小于等于1024px时显示 -->
<img v-if="screenWidth <= 1024" class="sub-title" :src="subtitle" alt="四维作战体系" />
<img
v-if="screenWidth <= 1024"
class="sub-title"
:src="subtitle"
alt="四维作战体系"
/>
<!-- 内容图 - 根据屏幕宽度动态切换 --> <!-- 内容图 - 根据屏幕宽度动态切换 -->
<img class="content-icon" :src="currentContentIcon" alt="四维情绪" /> <img class="content-icon" :src="currentContentIcon" alt="四维情绪" />
</div> </div>
@ -18,53 +24,54 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref, computed, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { onMounted, ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router";
// 移除背景图片的导入，改用CSS设置 // 移除背景图片的导入，改用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 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";
const router = useRouter()
const pageRef = ref(null)
const screenWidth = ref(window.innerWidth)
const router = useRouter();
const pageRef = ref(null);
const screenWidth = ref(window.innerWidth);
// 根据屏幕宽度选择内容图片 // 根据屏幕宽度选择内容图片
const currentContentIcon = computed(() => { const currentContentIcon = computed(() => {
return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall
})
return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall;
});
const handleResize = () => { const handleResize = () => {
screenWidth.value = window.innerWidth
}
screenWidth.value = window.innerWidth;
};
onMounted(() => { onMounted(() => {
setHeight(pageRef.value)
window.addEventListener('resize', handleResize)
})
setHeight(pageRef.value);
window.addEventListener("resize", handleResize);
});
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
window.removeEventListener("resize", handleResize);
});
const goToAiEmotion = () => { const goToAiEmotion = () => {
// 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
sessionStorage.setItem("activeTabAI", "AiEmotion")
sessionStorage.setItem("activeIndexAI", "2")
router.push("/homePage")
}
sessionStorage.setItem("activeTabAI", "AiEmotion");
sessionStorage.setItem("activeIndexAI", "2");
router.push("/homePage");
};
</script> </script>
<style scoped> <style scoped>
.homepage { .homepage {
min-height: 100vh; min-height: 100vh;
background-image: url('@/assets/img/DBQBmodel/电脑背景.png');
background-image: url("@/assets/img/DBQBmodel/电脑背景.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -79,6 +86,16 @@ const goToAiEmotion = () => {
width: 20vw; width: 20vw;
min-width: 300px; min-width: 300px;
height: auto; height: auto;
position: absolute;
top: 10vh;
}
.bottom-icon {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 0vh;
} }
/* 四维体系整体容器修复 */ /* 四维体系整体容器修复 */
@ -87,6 +104,8 @@ const goToAiEmotion = () => {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 80%;
height: auto;
} }
/* 副标题 */ /* 副标题 */
@ -129,11 +148,18 @@ const goToAiEmotion = () => {
height: auto; height: auto;
} }
@media (max-width: 1024px) {
/* 四维体系整体容器修复 */
.content-container {
width: 60%;
height: auto;
}
}
/* 手机适配 */ /* 手机适配 */
@media (max-width: 768px) { @media (max-width: 768px) {
.homepage { .homepage {
min-height: 100vh; min-height: 100vh;
background-image: url('@/assets/img/DBQBmodel/手机背景.png');
background-image: url("@/assets/img/DBQBmodel/手机背景.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -153,6 +179,11 @@ const goToAiEmotion = () => {
margin-top: -2vh; margin-top: -2vh;
} }
/* 四维体系整体容器修复 */
.content-container {
width: 80%;
height: auto;
}
.content-icon { .content-icon {
width: 87%; width: 87%;
} }

Write Preview
Loading…
Cancel
Save