前端移动端布局带边距案例(带源码)

前言

今天公司安排移动端页面,我平时写的全是PC端页面,今天突然来个移动端页面,还有边距，乍一看，我都傻眼了,弄半天才弄好, 用width: calc()这个属性,也可以调边距,咱们直接看代码吧~

源码

<template>
    <div class="index2">
        <div class="index2_content">
            <div class="left">
                <div class="left_nav">Ediv>
                <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>

设计

效果

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！