生活随笔
收集整理的這篇文章主要介紹了
自定义步骤条
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
展示圖:
<template
><div
class='createorder'><!-- 頂部步驟條
--><div
class="createorder_top"><div
class="createorder_top_left"><!-- 0 --><span
class="createorder_left_set" :class="value == 0||value ==1||value ==2||value ==3||value ==4?'activeSet':''"><span
class="look" v
-if="value ==1||value ==2||value ==3||value ==4">√
</span
><span
class="look" v
-else>1</span
>店長信息
</span
><span
class="createorder_left_setdivision" :class="value ==1||value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span
><!-- 1 --><span
class="createorder_left_set" :class="value ==1||value ==2||value ==3||value ==4?'activeSet':''"><span
class="look" v
-if="value ==2||value ==3||value ==4">√
</span
><span
class="look" v
-else>2</span
>企業(yè)及法人信息
</span
><span
class="createorder_left_setdivision" :class="value ==2||value ==3||value ==4?'createorder_left_setdivisions':''"></span
><!-- 2 --><span
class="createorder_left_set" :class="value ==2||value ==3||value ==4?'activeSet':''"><span
class="look" v
-if="value ==3||value ==4">√
</span
><span
class="look" v
-else>3</span
>藥店信息
</span
><span
class="createorder_left_setdivision" :class="value ==3||value ==4?'createorder_left_setdivisions':''"></span
><!-- 3 --><span
class="createorder_left_set" :class="value ==3||value ==4?'activeSet':''"><span
class="look" v
-if="value ==4">√
</span
><span
class="look" v
-else>4</span
>服務(wù)能力
</span
><span
class="createorder_left_setdivision" :class="value ==4?'createorder_left_setdivisions':''"></span
><!-- 4 --><span
class="createorder_left_set" :class="value ==4?'activeSet':''"><span
class="look" v
-if="value ==4">√
</span
><span
class="look" v
-else>5</span
>入駐成功
</span
></div
></div
></div
>
</template
><script
>
export default {props
: {value
: {type
: Number
,default: "",},},data(){return{}},created(){},mounted () {},methods
: {}
}</script
><style scoped lang
='less'>
.look
{text
-align
: center
;font
-size
: 20px
;display
: inline
-block
;width
: 25px
;height
: 25px
;line
-height
: 25px
;border
-radius
: 42px
;border
: 2px solid
;margin
-right
: 5px
;
}
.createorder_top
{background
-color
: #
F9F9F9;border
-radius
:50px
;width
: 99%;margin
: 0 auto
;margin
-top
: 10px
;
}
.createorder_top
.createorder_top_left
{padding
: 20px
30px
;display
: flex
;justify
-content
: space
-between
;align
-items
: center
;}
.createorder_top
.createorder_top_left
.createorder_left_set
{font
-size
: 18px
;color
: #
ABACB3;
}.createorder_top
.createorder_top_left
.activeSet
{color
: #
2846FF
;
}.createorder_top
.createorder_top_left
.createorder_left_setdivision
{display
: inline
-block
;background
-color
: #
F1EFF2;width
: 123px
;height
: 2px
;margin
: 10px
25px
;margin
-bottom
: 5px
;
}
.createorder_top
.createorder_top_left
.createorder_left_setdivisions
{display
: inline
-block
;background
-color
: #
2846FF
;width
: 123px
;height
: 2px
;margin
: 10px
25px
;margin
-bottom
: 5px
;
}</style
>
總結(jié)
以上是生活随笔為你收集整理的自定义步骤条的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。