序文
今日は会社がモバイルページをアレンジしてくれます.普段は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>
デザイン
効果
やっと
記事が良いと思われる場合は、注意を払い、フォローしてブックマークすることを忘れないでください. 間違っている場合は修正してください. 転載する必要がある場合は、ソースを示してください, ありがとう! ! !