前言
今天公司安排移动端页面,我平时写的全是PC端页面,今天突然来个移动端页面,还有边距，乍一看，我都傻眼了,弄半天才弄好, 用width: calc()这个属性,也可以调边距,咱们直接看代码吧~
源码
<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>
设计
效果
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！