aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局修改 部分bug修复

Browse Source
This commit is contained in:
X1627315083
2025-08-22 10:27:48 +08:00
parent 141821a843
commit 594bf5ce0a
275 changed files with 5675 additions and 13049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/views/HomeRecommend.vue
View File

@@ -1,6 +1,21 @@
<template>
<div class="homeRecommend_max">
<div class="left">
<div class="header">
<div class="gallery_btn" @click="setLogin">Login</div>
<div class="gallery_btn white" @click="signUp">Sign up</div>
</div>
<img class="bg" src="@/assets/images/homePage/squareBg.png" alt="">
<div class="beForm">Developed by AiDLab<br />
Commercialized by Code-Create</div>
<div class="learnMore">
<img src="@/assets/images/homePage/learnMore.png" alt="">
<!-- <div class="title">AiDA</div>
<div class="info">
AI-based Interactive Design Assistant for Fashion
</div> -->
<!-- <div class="btn gallery_btn" @click="goLearnMore">Learn More</div> -->
</div>
<!-- <div class="left">
<div class="logoBox">
<img
class="aiDalogo"
@@ -19,21 +34,19 @@
</div>
<div class="continue gallery_btn gallery_btn_radius" @click="setLogin" style="min-width: 14rem;">
Login
<!-- <i class="fi fi-rr-arrow-right"></i> -->
</div>
</div>
</div>
<div class="right">
<img class="model" src="@/assets/images/homePage/squareLeftImgModel.png" alt="">
<img class="text" src="@/assets/images/homePage/squareLeftImgText.png" alt="">
</div>
</div> -->
</div>
</template>
<script >
import { defineComponent, toRefs, reactive, ref , nextTick,computed, onMounted, onBeforeUnmount } from "vue";
import { isEmail } from "@/tool/util";
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
@@ -45,7 +58,6 @@ import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components: {
VerificationCodeInput,
},
setup(){
const store = useStore();
@@ -83,15 +95,15 @@ export default defineComponent({
const signUp = ()=>{
router.push('/register');
}
const goLearnMore = ()=>{
window.open('https://www.aida.com.hk/Square/works', '_blank');
}
onMounted(()=>{
window.addEventListener('resize',updataIsMoblie)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', updataIsMoblie);
});
const turnToNewPage = (url)=>{
window.open(url);
}
return {
...toRefs(data),
userDetail,
@@ -99,8 +111,8 @@ export default defineComponent({
registerModel,
logout,
goHome,
turnToNewPage,
signUp,
goLearnMore,
}
},
data() {
@@ -149,9 +161,6 @@ export default defineComponent({
// })
},
methods: {
turnToNewPage(url) {
window.open(url);
},
turnToWindow(url) {
window.open(url);
},
@@ -164,85 +173,144 @@ export default defineComponent({
width: 100%;
height: 100%;
display: flex;
font-family: Satoshi;
> .left,> .right{
position: relative;
> .header{
padding: 3.2rem 4rem;
position: relative;
z-index: 2;
margin-left: auto;
> .gallery_btn{
margin-right: 2rem;
border: none;
font-size: 1.7rem;
width: 13rem;
line-height: 6rem;
font-weight: 500;
border-radius: 4rem;
&:last-child{
margin-right: 0;
}
}
}
> .bg{
width: 100%;
height: 100%;
display: flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
object-fit: cover;
}
> .left{
// width: 79rem;
width: 45%;
// position: absolute;
// right: 0;
align-items: center;
justify-content: center;
position: relative;
> .logoBox{
height: 4rem;
position: absolute;
left: 2rem;
top: 2rem;
img{
height: 100%;
margin-left: 2rem;
}
.codeCreatelogo{
cursor: pointer;
}
}
> .text{
width: 68rem;
> .title{
// font-size: 4rem;
font-size: 6.4rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 3.2rem;
p{
margin-bottom: 0;
}
}
> .info{
font-size: 2.4rem;
// margin-bottom: 4rem;
margin-bottom: 1.6rem;
line-height: 1.2;
> span{
color: #0070c9;
cursor: pointer;
&:hover{
text-decoration: underline;
}
}
}
> .continue{
font-size: 2.4rem;
> i{
margin-left: 1rem;
}
}
}
> .beForm{
position: absolute;
font-size: 2.1rem;
bottom: 10rem;
left: 10rem;
}
> .right{
// width: 58%;
position: relative;
width: 55%;
background: #d7d6d5;
display: flex;
align-items: center;
justify-content: flex-end;
> .learnMore{
position: absolute;
bottom: 29rem;
right: 10rem;
width: 53.4rem;
text-align: right;
z-index: 2;
> img{
object-fit: cover;
height: 19.5rem;
margin-bottom: 2rem;
}
> .model{
height: 100%;
position: absolute;
left: 0;
}
> .text{
height: 45rem;
text-align: right;
// > .title{
// margin-bottom: .8rem;
// font-size: 11.8rem;
// font-weight: 500;
// }
// > .info{
// font-family: 'pingfang_regular';
// font-size: 2.8rem;
// font-weight: 400;
// margin-bottom: 2rem;
// }
> .btn{
line-height: 6rem;
width: 18rem;
font-size: 2rem;
font-weight: 500;
}
}
// > .left,> .right{
// height: 100%;
// display: flex;
// display: none;
// }
// > .left{
// width: 45%;
// align-items: center;
// justify-content: center;
// position: relative;
// > .logoBox{
// height: 4rem;
// position: absolute;
// left: 2rem;
// top: 2rem;
// img{
// height: 100%;
// margin-left: 2rem;
// }
// .codeCreatelogo{
// cursor: pointer;
// }
// }
// > .text{
// width: 68rem;
// > .title{
// font-size: 6.4rem;
// font-weight: 900;
// line-height: 1.2;
// margin-bottom: 3.2rem;
// p{
// margin-bottom: 0;
// }
// }
// > .info{
// font-size: 2.4rem;
// margin-bottom: 1.6rem;
// line-height: 1.2;
// > span{
// color: #0070c9;
// cursor: pointer;
// &:hover{
// text-decoration: underline;
// }
// }
// }
// > .continue{
// font-size: 2.4rem;
// > i{
// margin-left: 1rem;
// }
// }
// }
// }
// > .right{
// position: relative;
// width: 55%;
// background: #d7d6d5;
// display: flex;
// align-items: center;
// justify-content: flex-end;
// > img{
// object-fit: cover;
// }
// > .model{
// height: 100%;
// position: absolute;
// left: 0;
// }
// > .text{
// height: 45rem;
// text-align: right;
// }
// }
}
</style>