Table of contents
foreword
Today, the company arranges the mobile page. I usually write all the pages on the PC side. Today, there is a mobile page with margins. At first glance, I was dumbfounded. It took me a long time to get it right. Use width: calc( ) This attribute can also adjust the margin, let's look at the code directly~
source code
<template>
<div class="index2">
<div class="index2_content">
<div class="left">
<div class="left_nav">E</div>
<div class="menu">
<div class="menu_list">
<img src="../../assets/image/education/apps.png" alt="">
</div>
<div class="menu_list">
<img src="../../assets/image/education/graph.png" alt="">
</div>
<div class="menu_list">
<img src="../../assets/image/education/chat.png" alt="">
</div>
<div class="menu_list">
<img src="../../assets/image/education/cog.png" alt="">
</div>
</div>
<div class="left_btn"><img src="../../assets/image/education/headset.png" alt=""></div>
</div>
<div class="right">
<div class="right_box">
<div class="right_nav">
<div class="right_nav_ipt">
<img src="../../assets/image/education/search.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.index2 {
width: 100%;
height: 100vh;
background: #503e9d;
justify-content: center;
display: flex;
align-items: center;
overflow: hidden;
.index2_content {
width: 100%;
height: calc(100% - 24px);
display: flex;
box-sizing: content-box;
overflow: hidden;
border: 1px solid red;
.left {
width: 15%; // 左边没有边距若是有的话也用 width: calc(85% - 15px); 这种写法 和右边.right 写法相同
border: 1px solid aqua;
justify-content: center;
display: flex;
align-items: center;
// justify-content: space-between;
flex-direction: column;
flex-shrink: 0;
.left_nav {
width: 56px;
height: 56px;
background: #6553b2;
border-radius: 8px;
color: #fff;
font-size: 28px;
justify-content: center;
display: flex;
align-items: center;
cursor: pointer;
}
.menu {
margin-top: 200px;
.menu_list {
margin-top: 20px;
cursor: pointer;
}
}
.left_btn {
width: 56px;
height: 56px;
border-radius: 8px;
background: #5b49a9;
align-items: center;
display: flex;
justify-content: center;
margin-top: 400px;
cursor: pointer;
}
}
.right {
width: calc(85% - 13px); // 这里想半天才想出来的！！！边距
border: 1px solid rgb(221, 28, 60);
background: salmon;
flex-shrink: 0;
border-radius: 50px;
.right_box {
// 这里加个div细节问题
padding: 45px 45px;
.right_nav {
width: 85%;
height: 60px;
display: flex;
justify-content: space-between;
border: 1px solid red;
.right_nav_ipt {
align-items: center;
display: flex;
img {
width: 24px;
height: 24px;
margin-left: 25px;
cursor: pointer;
}
}
}
}
}
}
}
</style>
design
Effect
At last
If you think the article is good, remember to pay attention, follow and bookmark it. Please correct me if I am wrong. If you need to reprint, please indicate the source, thank you! ! !