imt-micro/src/components/Process.vue

<template>
    <div class="process" :class="'process-' + (index + 1)">
        <div class="process-top">
            <img :src="icon" alt="" />
            <div class="title">
                <span class="text1">{{ preTitle }}</span>
                <span class="text2">{{ title }}</span>
            </div>
        </div>

        <div class="content">
            <div class="stepInfo" v-for="(item, index) in steps" :key="index">
                <span>{{ getName(item.text) }}</span>
                <van-icon
                    @click="show"
                    name="question-o"
                    class="tips"
                    v-if="item.tips"
                    :size="18"
                    :color="$colors.warn"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Process',
    props: {
        icon: {
            type: String,
            default: ''
        },
        preTitle: {
            type: String,
            default: '阶段一 '
        },
        title: {
            type: String,
            default: '入驻申请 '
        },
        steps: {
            type: Array,
            default: () => {
                return [
                    {
                        text: '查询确认入驻资格',
                        isRight: true
                    },
                    {
                        text: '填写账号/企业信息进行注册'
                    },
                    {
                        text: '确认在线服务协议'
                    }
                ];
            }
        },
        index: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            position: [''],
            colors: ['#2a90a0', '#3b5996', '#ca923a', '#c66152']
        };
    },
    methods: {
        show() {
            this.$emit('show');
        }
    }
};
</script>

<style lang="less">
@list: #2a90a0, #3b5996, #ca923a, #c66152;
.process {
    width: 280px;
    height: 360px;
    flex-shrink: 0;
    margin: 0 8px;

    .process-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 9px 0 30px;

        img {
            width: 100px;
            height: 100px;
            display: block;
        }

        .title {
            display: flex;
            align-items: center;
            margin-top: 6px;
            .text1 {
                font-size: 14px;
                font-weight: bold;
                color: #ffffff;
                line-height: 20px;
                display: flex;
                align-items: center;

                &::after {
                    content: '';
                    width: 1px;
                    height: 16px;
                    background-color: #f2f3f5;
                    margin: 0 18px 0 14px;
                }
            }

            .text2 {
                font-size: 18px;
                font-weight: bold;
                color: #ffffff;
                line-height: 25px;
            }
        }
    }

    .content {
        padding: 26px 40px;

        .stepInfo {
            // max-width: 270px;
            display: flex;
            align-items: center;
            position: relative;
            font-size: 14px;
            color: #292c33;
            line-height: 20px;
            &:not(:last-child) {
                padding-bottom: 30px;
                &::after {
                    content: '';
                    width: 1px;
                    height: 100%;
                    position: absolute;
                    left: -13px;
                    top: 10px;
                }
            }

            &::before {
                content: '';
                width: 7px;
                height: 7px;
                position: absolute;
                left: -16px;
                top: 7px;
                border-radius: 7px;
            }
        }
    }
}
each(@list, {
  .process-@{index} {
background-color:fade(@value,10%);
        .process-top {
            background-color: @value;
        }
        .content {
            .stepInfo {
                &::before {
                    background-color: @value;
                }
                &:not(:last-child) {
                    &::after {
                        background-color:@value;
                    }
                }
            }
        }
  }
});
// @for $indexi from 1 through 4 {
//     .process-#{$i} {
//         background-color: rgba(nth($primarys, $i), 10%);
//         .process-top {
//             background-color: nth($primarys, $i);
//         }
//         .content {
//             .stepInfo {
//                 &::before {
//                     background-color: nth($primarys, $i);
//                 }
//                 &:not(:last-child) {
//                     &::after {
//                         background-color: nth($primarys, $i);
//                     }
//                 }
//             }
//         }
//     }
// }

.tips {
    margin-left: 5px;
}
</style>