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

style: 移动端注册页面顶部logo

Browse Source
This commit is contained in:
zhangyahui
2025-11-26 17:08:53 +08:00
parent 0657037748
commit b7360d7e71
1 changed files with 302 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/views/Register.vue
View File

@@ -13,7 +13,18 @@
@click="turnToNewPage('https://www.aidlab.hk/en/')" @click="turnToNewPage('https://www.aidlab.hk/en/')"
src="@/assets/images/loginPage/aida_Logo_login.png" src="@/assets/images/loginPage/aida_Logo_login.png"
/> --> /> -->
<div class="mobile_logo_group" v-if="isMoblie" @click="turnToNewPage('/')">
<img <img
class="homeRecommend_logo aid"
src="@/assets/images/loginPage/aida_logo.png"
/>
<img
class="homeRecommend_logo code"
src="@/assets/images/loginPage/aida_Logo_login.png"
/>
</div>
<img
v-else
class="homeRecommend_logo" class="homeRecommend_logo"
@click="turnToNewPage('/')" @click="turnToNewPage('/')"
src="@/assets/images/homePage/aidaIcon.png" src="@/assets/images/homePage/aidaIcon.png"
@@ -43,131 +54,136 @@
<div class="homeRecommend_right"> <div class="homeRecommend_right">
<!-- <div class="homeRecommend_right" v-if="userDetail.systemUser == -1"> --> <!-- <div class="homeRecommend_right" v-if="userDetail.systemUser == -1"> -->
<div class="cutLangue"> <div class="cutLangue">
<div @click="()=>isSelectSuccessively = !isSelectSuccessively"> <div @click="() => (isSelectSuccessively = !isSelectSuccessively)">
<i class="fi fi-rr-globe"></i> <i class="fi fi-rr-globe"></i>
<!-- <a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="EN" un-checked-children="CN"/> --> <!-- <a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="EN" un-checked-children="CN"/> -->
{{ isSelectSuccessively? 'CN':'EN'}} {{ isSelectSuccessively ? 'CN' : 'EN' }}
</div> </div>
</div> </div>
<div class="gallery_btn" @click="setLogin">{{ isSelectSuccessively?'登录':'Login' }}</div> <div class="gallery_btn" @click="setLogin">
{{ isSelectSuccessively ? '登录' : 'Login' }}
</div>
</div> </div>
</header> </header>
<div class="content"> <div class="content">
<signUp ref="signUp" :isSelectSuccessively="isSelectSuccessively"></signUp> <signUp ref="signUp" :isSelectSuccessively="isSelectSuccessively"></signUp>
</div> </div>
</div> </div>
</template> </template>
<script > <script>
import { defineComponent, toRefs, reactive, ref , nextTick,computed, onMounted, onBeforeUnmount } from "vue"; import {
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie"; defineComponent,
import { Https } from "@/tool/https"; toRefs,
import { useStore } from "vuex"; reactive,
import { useRouter } from 'vue-router'; ref,
nextTick,
computed,
onMounted,
onBeforeUnmount
} from 'vue'
import { setCookie, getCookie, WriteCookie, clonAllCookie } from '@/tool/cookie'
import { Https } from '@/tool/https'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import signUp from '@/component/mainPage/signUp/index.vue' import signUp from '@/component/mainPage/signUp/index.vue'
export default defineComponent({ export default defineComponent({
components: { components: {
signUp, signUp
}, },
setup(){ setup() {
const store = useStore(); const store = useStore()
const router = useRouter(); const router = useRouter()
let data = reactive({ let data = reactive({
homeRecommendMax:null, homeRecommendMax: null,
signUp:null, signUp: null,
isSelectSuccessively:false, isSelectSuccessively: false
}) })
let isMoblie = ref(false) let isMoblie = ref(false)
let userDetail = computed(()=>{ let userDetail = computed(() => {
return store.state.UserHabit.userDetail return store.state.UserHabit.userDetail
}) })
let setLogin = ()=>{ let setLogin = () => {
router.push("/login"); router.push('/login')
} }
let logout = ()=>{ let logout = () => {
let userInfo = store.state.UserHabit.userDetail; let userInfo = store.state.UserHabit.userDetail
let data = { let data = {
userId: userInfo?.userId, userId: userInfo?.userId
}; }
store.commit('createDetail') store.commit('createDetail')
store.commit('createProbject') store.commit('createProbject')
if(!data.userId) return if (!data.userId) return
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => { Https.axiosPost(Https.httpUrls.accountLogout, data).then(rv => {
clonAllCookie(); clonAllCookie()
}); })
} }
let goHome = ()=>{ let goHome = () => {
router.push('/home'); router.push('/home')
} }
let time let time
let updataIsMoblie = ()=>{ let updataIsMoblie = () => {
clearTimeout(time) clearTimeout(time)
time = setTimeout(()=>{ time = setTimeout(() => {
if(window.innerWidth < 768){ if (window.innerWidth < 768) {
isMoblie.value = true isMoblie.value = true
}else{ } else {
isMoblie.value = false isMoblie.value = false
} }
},500) }, 500)
} }
onMounted(()=>{ onMounted(() => {
window.addEventListener('resize',updataIsMoblie) updataIsMoblie()
window.addEventListener('resize', updataIsMoblie)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener('resize', updataIsMoblie); window.removeEventListener('resize', updataIsMoblie)
})
});
return { return {
...toRefs(data), ...toRefs(data),
userDetail, userDetail,
setLogin, setLogin,
logout, logout,
goHome, goHome,
isMoblie, isMoblie
} }
}, },
data() { data() {
return { return {}
};
}, },
watch: { watch: {
// credits.value(newVal,oldVal){ // credits.value(newVal,oldVal){
// console.log(String(newVal).length); // console.log(String(newVal).length);
// } // }
}, },
mounted() { mounted() {},
},
methods: { methods: {
turnToNewPage(url) { turnToNewPage(url) {
window.open(url); window.open(url)
}, },
turnToWindow(url) { turnToWindow(url) {
window.open(url); window.open(url)
}, }
}, }
}); })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.homeRecommend_max{ .homeRecommend_max {
position: relative; position: relative;
display: flex; display: flex;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
&.openSignUp {
&.openSignUp{ .homeRecommend_heade {
.homeRecommend_heade{
position: relative; position: relative;
background: #fff !important; background: #fff !important;
.login_footer_item_text{ .login_footer_item_text {
display: block; display: block;
} }
} }
.homeRecommend_content_adminTop{ .homeRecommend_content_adminTop {
display: none; display: none;
} }
} }
@@ -185,17 +201,17 @@ export default defineComponent({
position: absolute; position: absolute;
align-items: center; align-items: center;
z-index: 2; z-index: 2;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #ddd;
@media (max-width: 768px) { @media (max-width: 768px) {
z-index: 1000; z-index: 1000;
padding: 1.4rem 2.1rem; padding: 1.4rem 2.1rem;
} }
.homeRecommend_right{ .homeRecommend_right {
width: 33%; width: 33%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
.gallery_btn{ .gallery_btn {
// color: #000; // color: #000;
// background: #fff; // background: #fff;
// border: 2px solid #000; // border: 2px solid #000;
@@ -207,66 +223,60 @@ export default defineComponent({
padding: 0; padding: 0;
display: none; display: none;
} }
&.gallery_btn:nth-child(1){ &.gallery_btn:nth-child(1) {
margin-right: 3rem; margin-right: 3rem;
@media (max-width: 768px) { @media (max-width: 768px) {
margin-right: 1.8rem; margin-right: 1.8rem;
} }
} }
} }
> .cutLangue{ > .cutLangue {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 4rem; margin-right: 4rem;
@media (max-width: 768px) { @media (max-width: 768px) {
margin-right: 2.8rem; margin-right: 2.8rem;
} }
> i{ > i {
font-size: 5rem; font-size: 5rem;
} }
> div{ > div {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 1.5rem; font-size: 1.5rem;
} }
> i{ > i {
font-size: 3.5rem; font-size: 3.5rem;
display: flex; display: flex;
margin-right: 1rem; margin-right: 1rem;
@media (max-width: 768px) { @media (max-width: 768px) {
margin-right: .7rem; margin-right: 0.7rem;
font-size: 2rem; font-size: 2rem;
} }
} }
} }
> button{ > button {
height: 4rem; height: 4rem;
min-width: 8rem; min-width: 8rem;
} }
> .text{ > .text {
margin-right: 1rem; margin-right: 1rem;
} }
} }
} }
.homeRecommend_logo { .homeRecommend_logo {
// width: 14.4rem;
height: 8rem; height: 8rem;
// height: 4rem;
margin-top: 0; margin-top: 0;
margin-right: 2rem; margin-right: 2rem;
@media (max-width: 768px) { @media (max-width: 768px) {
// height: 1.76rem; // height: 1.76rem;
height: 4.5rem; height: 4.5rem;
margin-right: .9rem; margin-right: 0.9rem;
} }
// &:last-child{
// margin-right: 2rem;
// }
} }
.login_footer_item_text{ .login_footer_item_text {
// margin-left: 5rem; // margin-left: 5rem;
margin-right: 2rem; margin-right: 2rem;
font-size: 1.6rem; font-size: 1.6rem;
@@ -287,7 +297,23 @@ export default defineComponent({
align-items: center; align-items: center;
position: relative; position: relative;
height: 3.7rem; height: 3.7rem;
&.marLeft2{ .mobile_logo_group {
display: flex;
align-items: center;
cursor: pointer;
column-gap: 0.9rem;
.homeRecommend_logo {
&.aid {
width: 8rem;
height: 1.75rem;
}
&.code {
width: 5rem;
height: 1.98rem;
}
}
}
&.marLeft2 {
margin-left: 2rem; margin-left: 2rem;
} }
.username { .username {
@@ -295,14 +321,14 @@ export default defineComponent({
color: #1a1a1a; color: #1a1a1a;
margin: 0 0.8rem; margin: 0 0.8rem;
font-weight: 900; font-weight: 900;
span{ span {
margin: .7rem; margin: 0.7rem;
} }
} }
.icon-xiala { .icon-xiala {
font-size: 1.4rem; font-size: 1.4rem;
cursor: pointer; cursor: pointer;
transition: .3s all; transition: 0.3s all;
} }
.icon_rotate { .icon_rotate {
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg);
@@ -312,9 +338,8 @@ export default defineComponent({
} }
} }
} }
} }
.content{ .content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }