遇見這樣的數型結構圖我是這樣畫的

遇見這樣的結構圖

我的制作的思路

我是将視圖分成左右兩部分
右邊隻負責清單内容；
左側相對而言要複雜一些
左側主要是有 【垂直的線】 以及【最上面的橫線】和【中間的線】【最下面的線的橫線】
如何處理垂直的線了[linedotted]
我是這樣操作的
進行定位，主要的是控制高度我是使用height: calc(100% - 60px);
來控制線的高度的
.linedotted {
    position: absolute;
    height: calc(100% - 60px);
    left: 212px;
    width: 1px;
    top: 22px;
    border: 1px dashed #dddddd;
}
父級元素使用相對定位哈 【需要注意的】


中間的橫線[row-lin] 
由于仍然在文檔流中。
是以我沒有使用定位,正常顯示即可。
.row-line {
    width: 40px;
    height: 1px;
    border: 1px dashed #dddddd;
    // 往上偏移居中
    margin-top: -16px;
}


最上面的橫線[right-top-line]
我是使用的定位來處理的
.right-top-line {
    position: absolute;
    left: 212px;
    top: 18px;
    width: 41px;
    height: 1px;
    border: 1px dashed #dddddd;
}


最下面的橫線，[right-bottom-lin]
.right-bottom-line {
    position: absolute;
    left: 212px;
    bottom: 34px;
    width: 41px;
    height: 1px;
    border: 1px dashed #dddddd;
}


我在制作的過程中遇見的問題
主要是垂直的那一根線的高度不好控制
後來經過思考
我是用的是 calc來動态控制

最上面的拿一根線和最下面的拿一根線
使用定位就可以解決位置了

這樣的流程展示我還是很少遇見的，
感覺還是很有意思的
是以想記錄一下
可能下一次還回遇見的哈
           

代碼如下

<template>
    <div class="com-scholl">
        <div
            class="item-flex-flex"
            v-for="(item, index) in ListArr.arr"
            :key="index"
        >
            <div class="left-part">
                <div class="mudule">{{ item.name }}</div>
                <div class="row-line" v-show="item.listMenu"></div>
                <div class="linedotted" v-show="item.listMenu"></div>
                <div class="right-top-line" v-show="item.listMenu"></div>
                <div class="right-bottom-line" v-show="item.listMenu"></div>
            </div>
            <div class="right-part">
                <div
                    class="right-cont"
                    v-for="(itemName, myindex) in item.listMenu"
                    :key="myindex"
                >
                    <p class="dec-name">{{ itemName.itemName }}</p>
                    <ys-icon
                        iconClass="icon--arrow-down-copy"
                        class="right-arrow"
                    ></ys-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    setup() {
        let ListArr = reactive({
            arr: [
                {
                    name: '學校字典管理',
                    listMenu: [
                        { itemName: '學段管理' },
                        { itemName: '科目管理' },
                        { itemName: '招生設定' },
                        { itemName: '生源設定' },
                        { itemName: '就讀類型' },
                    ],
                },

                {
                    name: '學校字典管理',
                    listMenu: [
                        { itemName: '學段管理' },
                        { itemName: '科目管理' },
                    ],
                },

                {
                    name: '校曆設定',
                },
                {
                    name: '作息時間',
                },
                {
                    name: '學屆（年級）管理',
                },
                {
                    name: '班級管理',
                },
            ],
        })
        return { ListArr }
    },
})
</script>
<style lang="scss" scoped>
.com-scholl {
    padding-left: 159px;
    padding-top: 25px;
    padding-bottom: 40px;
}

.item-flex-flex {
    display: flex;
    position: relative;
    margin-bottom: 32px; //48-16=32
    .left-part {
        margin-right: 43px;
        align-items: center;
        display: flex;
        .mudule {
            width: 172px;
            height: 40px;
            background: #f5f7fa;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.45);
            align-items: center;
            display: flex;
            justify-content: center;
            // 往上偏移居中
            margin-top: -16px;
        }
        // 左側的橫線
        .row-line {
            width: 40px;
            height: 1px;
            border: 1px dashed #dddddd;
            // 往上偏移居中
            margin-top: -16px;
        }
        .linedotted {
            position: absolute;
            height: calc(100% - 60px);
            left: 212px;
            width: 1px;
            top: 22px;
            border: 1px dashed #dddddd;
        }
        .right-top-line {
            position: absolute;
            left: 212px;
            top: 18px;
            width: 41px;
            height: 1px;
            border: 1px dashed #dddddd;
        }
        .right-bottom-line {
            position: absolute;
            left: 212px;
            bottom: 34px;
            width: 41px;
            height: 1px;
            border: 1px dashed #dddddd;
        }
    }
    // 172+40=212

    .right-cont {
        width: 540px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding-right: 16px;
        padding-left: 24px;
        box-sizing: border-box;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .dec-name {
            width: 68px;
            height: 19px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.65);
        }
        .right-arrow {
            transform: rotate(-90deg);
            font-size: 16px;
            color: rgba(0, 0, 0, 0.25);
        }
    }
}
</style>
           

我們公司正在尋找前端和後端，感興趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，請帶我們飛

如果你是菜鳥，我們帶你飛

僅限成都

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。