css 畫一個(gè)步驟條,帶箭頭指向

<template>
    <div >
        <!-- class="container" -->
        <div v-for="(item,index) in combinationList" >
            <div style="display:flex;justify-content:space-between;">
            <div v-for="(it,idx) in item.items" :key="idx">
                      <div
                class="item"
                :key="index" >
                       
                <div style="display:flex;">
                    <tile
                        :key="idx" 
                        :id="it.id"
                        v-model="item.items[idx]"></tile>
                  // v-if="(item.items.length-1)!=idx"  最后一個(gè)不顯示   向左指向性 
                    <div class="arrowContent" v-if="(item.items.length-1)!=idx">  
                        <el-image 
                            style=" width:50px; height:50px;"
                            class="arrowicone"
                            src="/img/project/rightflat.png"
                            :fit="fit">
                        </el-image>
                    </div>
                </div>
            </div>
            </div>
        </div>
          // v-if="(combinationList.length-1)!=index"  判斷最后一個(gè)不顯示 尾首指向線
         <pointingSrrow  v-if="(combinationList.length-1)!=index"></pointingSrrow>

        </div>
    </div>
</template>

<script>
  import func from "@/util/func";
export default {
    props: {
  
    },
    components: {

        tile: () => import('@/views/pjm/lifecycle/components/phases/components/phase/tileV2'),
    },
    data() {
        return {
            data: [{n:1},{n:2},{n:3},{n:4},{n:5},{n:6},{n:1},{n:2},{n:3},{n:4},{n:5},{n:6},{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}], //原數(shù)據(jù)
            combinationList:[ //結(jié)構(gòu)后的數(shù)據(jù)
            {group:0,items:[{n:1},{n:2},{n:3},]},
  {group:1,items:[{n:1},{n:2},{n:3},]},
  {group:2,items:[{n:1},{n:2},{n:3},]},
          ],
        }
    },
    watch: {
      
    },
    computed: { 
    },
    created() {

    },
    mounted() {

    },
    beforeDestroy() {

    },
    methods: {
      
        setData() {
            this.data = this.value.filter(item => {
                return item.pid === 0;
            });

            console.log('---transformArray---',func.transformArray(this.data,5))
            this.combinationList=func.transformArray(this.data,5) //結(jié)構(gòu)后的數(shù)據(jù)
             console.log(' this.data----', this.data)
        },

        transformArray(array, size) {  
            const result = []; 
            for (let i = 0; i < array.length; i += size) {  
                const chunk = array.slice(i, i + size);  
                result.push({ group: i / size, items: chunk }); // 這里將當(dāng)前組的索引作為鍵  
            }  
            return result;  
        },

    }
};
</script>

<style lang="scss" scoped>
.container {
    // box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;

    .item {
        //box-sizing: border-box;
        //flex: none;
        //padding: 10px;
        // position: relative;
        width:20%;
        // padding-bottom: 20px; 


    }

    
}

 .arrowContent{
            width:100%;
             position: relative;
            .arrowicone{
                position: absolute;
                top: 50%; 
                transform: translateY(-50%);
                left: 50%;  
                transform: translate(100%, -50%);
            }
        }

</style>

tile 組件 純樣式 ```

<template>
<el-card
:shadow="shadow"
:class="phaseClass"
@click.native.stop="handleClick"
>
<div class="container" :class="{ 'unActive': isUnActive}">
<div v-if="!isUnActive">
<div v-if="isUnAuth" :class="{'masking unAuth':isUnAuth }">
<i class=" el-icon-lock"> 暫無權(quán)限</i>
</div>
</div>

        <div class="badges">
            <el-badge type="danger" :value="count" v-if="count" class="top-end"></el-badge>
        </div>

        <div class="content">
            <i :class="phaseIcon"></i>
            <div>{{phaseName }}</div>
            <div>{{phaseDuration=='' ?'無 開始時(shí)間-無 結(jié)束時(shí)間':phaseDuration}}</div>
        </div>
    </div>
</el-card>

</template>

<script>

export default {

components: {
},
data() {
    return {

    }
},
watch: {

},
computed: {

},
created() {

},
mounted() {

},
beforeDestroy() {

},
methods: {
 
    },
}

};
</script>

<style lang="scss" scoped>
.el-card {
overflow: visible;

::v-deep .el-card__body {
    padding: 0;
}

}

.unActive {
color: #bcbec2;
border-color: #e9e9eb;
background: #f4f4f5 linear-gradient(
to bottom right,
rgba(244, 244, 245, 0.1) 0%,
rgba(244, 244, 245, 0.1) calc(50% - 2px),
rgba(200, 200, 200, 1) 50%,
rgba(244, 244, 245, 0.1) calc(50% + 2px),
rgba(244, 244, 245, 0.1) 100%
);
cursor: default !important;
}

.masking {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
left: 0;
border-radius: 1px;
color: #fff;
padding: 2px 0;
}

.masking.unAuth {
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
cursor: not-allowed;
}

.container {
position: relative;
padding: 10px;
cursor: pointer;

.badges {
    > .el-badge {
        position: absolute;

        ::v-deep sup {
            top: 0
        }
    }

    > .el-badge.top-start {
        top: 0;
        left: 0;
        transform: translateY(-50%);
    }

    > .el-badge.top {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    > .el-badge.top-end {
        top: 0;
        right: 0;
        transform: translateY(-50%);
    }

    > .el-badge.left {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    > .el-badge.right {
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    > .el-badge.bottom-start {
        bottom: 0;
        left: 0;
        transform: translateY(50%);
    }

    > .el-badge.bottom {
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    > .el-badge.bottom-end {
        bottom: 0;
        right: 0;
        transform: translateY(50%);
    }
}

.content {
    text-align: center;
    line-height: 1.5;

    > .iconfont-custom {
        font-size: 52px;
    }

    div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.info {
    color: #909399;
    background: #f4f4f5;
    border-color: #d3d4d6;
}

.normal {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
}

.success {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
}

.warning {
    color: #f56c6c;
}

.danger {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
}

}
</style>

###效果圖
![image.png](https://upload-images.jianshu.io/upload_images/16629650-a5dc576197ebf5ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末猜嘱,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子嫁艇,更是在濱河造成了極大的恐慌朗伶,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件步咪,死亡現(xiàn)場離奇詭異论皆,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)猾漫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門点晴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人悯周,你說我怎么就攤上這事粒督。” “怎么了禽翼?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵坠陈,是天一觀的道長萨惑。 經(jīng)常有香客問我捐康,道長仇矾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任解总,我火速辦了婚禮贮匕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘花枫。我一直安慰自己刻盐,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布劳翰。 她就那樣靜靜地躺著敦锌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪佳簸。 梳的紋絲不亂的頭發(fā)上乙墙,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音生均,去河邊找鬼听想。 笑死,一個(gè)胖子當(dāng)著我的面吹牛马胧,可吹牛的內(nèi)容都是我干的汉买。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼佩脊,長吁一口氣:“原來是場噩夢啊……” “哼蛙粘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起威彰,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬榮一對情侶失蹤出牧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后抱冷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體崔列,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年旺遮,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了赵讯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡耿眉,死狀恐怖边翼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鸣剪,我是刑警寧澤组底,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布丈积,位于F島的核電站,受9級(jí)特大地震影響债鸡,放射性物質(zhì)發(fā)生泄漏江滨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一厌均、第九天 我趴在偏房一處隱蔽的房頂上張望唬滑。 院中可真熱鬧,春花似錦棺弊、人聲如沸晶密。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽稻艰。三九已至,卻和暖如春侈净,著一層夾襖步出監(jiān)牢的瞬間尊勿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來泰國打工用狱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留运怖,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓夏伊,卻偏偏與公主長得像摇展,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子溺忧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容