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

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="title">{{ productList[0].Advantages }}</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_item" v-for="item in productList" :key="item">
<div class="product_signUp_box">
<div class="title">{{ item?.title }}</div>
<div class="info">{{ item?.info }}</div>
<div class="detail">{{ item?.detail }}</div>
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
<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 class="gallery_list_box">
<div class="gallery_list product_list">
<div class="gallery_item" v-for="item in productList" :key="item">
<div class="product_signUp_box">
<div class="title">{{ item?.title }}</div>
<div class="info">{{ item?.info }}</div>
<div class="detail">{{ item?.detail }}</div>
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
<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>
<ul class="product_detail">
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="introductDetail" v-show="isSelectSignUp">
<div class="title">Product Features</div>
@@ -176,6 +179,10 @@
.signUp{
flex: 1;
padding: 0rem 4rem;
@media (max-width: 768px) {
display: flex;
flex-direction: column;
}
.back{
font-size: 1.6rem;
margin-bottom: 3rem;
@@ -193,6 +200,19 @@
.introduce{
font-size: 2.4rem;
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{
display: flex;
@@ -200,7 +220,10 @@
justify-content: center;
flex-wrap: wrap;
.gallery_item{
width: calc(33.333% - 3rem);
width: 100%;
@media (min-width: 768px) {
width: calc(33.333% - 3rem);
}
.title,.info,.highlight{
font-weight: 600;
}

View File

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