Browse Source

更改小财神pc端首页背景图和图标

dongqian/feature-20250702094358-小财神适配
dongqian 17 hours ago
parent
commit
3f833ef46a
  1. 54
      src/views/Selectmodel.vue

54
src/views/Selectmodel.vue

@ -65,9 +65,9 @@ const goToEmotionsmodel = () => {
.homepage { .homepage {
/* height: 100vh; */ /* height: 100vh; */
/* width: 100vw; */ /* width: 100vw; */
/* min-height: 100vh; */
/* min-height: 100vw; */
/* background-color: #000cfc; */ /* background-color: #000cfc; */
background-image: url("@/assets/img/Selectmodel/-s-bg.png");
background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/49a45ea0e9ff44e9a965cc1de8059a77.png");
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -84,14 +84,14 @@ const goToEmotionsmodel = () => {
width: 28vw; width: 28vw;
/* max-width: 280px; */ /* max-width: 280px; */
height: auto; height: auto;
margin-top: calc(600px - 30vw);
margin-top:39vw;
} }
/* ===== 默认(PC端)按钮区域 ===== */ /* ===== 默认(PC端)按钮区域 ===== */
.buttons-container { .buttons-container {
margin-top: 5vh;
margin-top: 4vh;
display: flex; display: flex;
gap: 30vw;
gap: 50vw;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -167,10 +167,10 @@ const goToEmotionsmodel = () => {
} }
.footer-text1 { .footer-text1 {
width: 100vh;
max-width: 100vh;
height: 9vh;
background-image: url("@/assets/img/Selectmodel/智能体.png");
width: 200vw;
max-width: 200vw;
height: 6vw;
background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/3e36a5a3d676f86e022f7cd41a2fa0a6.png");
background-size: 100% 100%; background-size: 100% 100%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -191,6 +191,7 @@ const goToEmotionsmodel = () => {
/* 手机适配 */ /* 手机适配 */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.homepage { .homepage {
background-image: url("@/assets/img/Selectmodel/-s-bg.png");
/* height: auto; */ /* height: auto; */
/* 解决底部留白 */ /* 解决底部留白 */
/* width: 100%; */ /* width: 100%; */
@ -241,6 +242,7 @@ const goToEmotionsmodel = () => {
} }
.footer-text1 { .footer-text1 {
background-image: url("@/assets/img/Selectmodel/智能体.png");
width: 100vw; width: 100vw;
height: 60px; height: 60px;
margin-top: 10px; margin-top: 10px;
@ -257,9 +259,9 @@ const goToEmotionsmodel = () => {
/* 平板适配 */ /* 平板适配 */
@media screen and (min-width: 601px) and (max-width: 1024px) { @media screen and (min-width: 601px) and (max-width: 1024px) {
/* .homepage {
height: 120vh;
} */
.homepage {
background-image: url("@/assets/img/Selectmodel/-s-bg.png");
}
.main-icon { .main-icon {
margin-top: calc(650px - 30vw); margin-top: calc(650px - 30vw);
@ -270,7 +272,10 @@ const goToEmotionsmodel = () => {
width: 300vw; width: 300vw;
position: relative; position: relative;
} }
.buttons-container{
gap:30vw;
margin-top: 5vh;
}
.btn-icon, .btn-icon,
.btn-ball { .btn-ball {
height: 100px; height: 100px;
@ -286,6 +291,7 @@ const goToEmotionsmodel = () => {
} }
.footer-text1 { .footer-text1 {
background-image: url("@/assets/img/Selectmodel/智能体.png");
width: 100vw; width: 100vw;
max-width: 900px; max-width: 900px;
height: 200px; height: 200px;
@ -296,4 +302,26 @@ const goToEmotionsmodel = () => {
height: 26px; height: 26px;
} }
} }
/* 大屏幕适配 - 背景图铺满整个屏幕 */
@media screen and (min-width: 1025px) {
.homepage {
background-size: cover;
min-height: 100vh;
}
/* .main-icon {
max-width: 350px;
width: 28vw;
height: auto;
margin-top:48vw;
} */
}
@media screen and (min-width: 1025px) and (max-width: 1700px){
.main-icon {
max-width: 350px;
width: 28vw;
height: auto;
margin-top:40rem;
}
}
</style> </style>
Loading…
Cancel
Save