调整注册页面在手机端的布局

This commit is contained in:
X1627315083
2025-08-07 17:48:38 +08:00
parent 16c7a113f4
commit 3e17074bae
2 changed files with 39 additions and 14 deletions

View File

@@ -3,21 +3,24 @@
<div class="selectSignUp" v-show="!isSelectSignUp"> <div class="selectSignUp" v-show="!isSelectSignUp">
<div class="title">{{ productList[0].Advantages }}</div> <div class="title">{{ productList[0].Advantages }}</div>
<!-- <div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div> --> <!-- <div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div> -->
<div class="gallery_list product_list"> <div class="gallery_list_box">
<div class="gallery_item" v-for="item in productList" :key="item"> <div class="gallery_list product_list">
<div class="product_signUp_box"> <div class="gallery_item" v-for="item in productList" :key="item">
<div class="title">{{ item?.title }}</div> <div class="product_signUp_box">
<div class="info">{{ item?.info }}</div> <div class="title">{{ item?.title }}</div>
<div class="detail">{{ item?.detail }}</div> <div class="info">{{ item?.info }}</div>
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div> <div class="detail">{{ item?.detail }}</div>
<div class="gallery_btn gallery_btn_radius" v-if="item?.info != '/'" @click="createAccount">{{ item?.btn }}</div> <div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">Contact us</a> <div class="gallery_btn gallery_btn_radius" v-if="item?.info != '/'" @click="createAccount">{{ item?.btn }}</div>
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">Contact us</a>
</div>
<ul class="product_detail">
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
</div> </div>
<ul class="product_detail">
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="introductDetail" v-show="isSelectSignUp"> <div class="introductDetail" v-show="isSelectSignUp">
<div class="title">Product Features</div> <div class="title">Product Features</div>
@@ -176,6 +179,10 @@
.signUp{ .signUp{
flex: 1; flex: 1;
padding: 0rem 4rem; padding: 0rem 4rem;
@media (max-width: 768px) {
display: flex;
flex-direction: column;
}
.back{ .back{
font-size: 1.6rem; font-size: 1.6rem;
margin-bottom: 3rem; margin-bottom: 3rem;
@@ -193,6 +200,19 @@
.introduce{ .introduce{
font-size: 2.4rem; font-size: 2.4rem;
text-decoration: underline; text-decoration: underline;
}
.selectSignUp{
height: 100%;
display: flex;
flex-direction: column;
@media (max-width: 768px) {
display: flex;
flex-direction: column;
justify-content: center;
}
}
.gallery_list_box{
} }
.gallery_list{ .gallery_list{
display: flex; display: flex;
@@ -200,7 +220,10 @@
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
.gallery_item{ .gallery_item{
width: calc(33.333% - 3rem); width: 100%;
@media (min-width: 768px) {
width: calc(33.333% - 3rem);
}
.title,.info,.highlight{ .title,.info,.highlight{
font-weight: 600; font-weight: 600;
} }

View File

@@ -700,6 +700,8 @@ export default defineComponent({
padding-right: 20rem; padding-right: 20rem;
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;
padding-right: 0;
padding: 0 10rem;
} }
.login_form_email { .login_form_email {
position: relative; position: relative;