css 三列布局

css 三列布局_第1张图片

<template>
    <div class="auth-box">
        <div class="flex-basis" v-for="(v, i) in 5" :key="i">
            <div class="box">
                <img class="icon" src="https://file.wonder-link.net/ccb3185c076846e2bea760396a2ed02a.png" alt="">
                <span class="text">一个标题span>
                <img class="status" src="https://file.wonder-link.net/1a260f60e5be439e989e0d6895e8b395.png" alt="">
            div>
        div>
    div>
template>

<style lang='scss' scoped>
    .auth-box {
        min-height: 100vh;
        padding: 0 30rpx;
        overflow: hidden;
        background-color: #fff;
        .flex-basis {
            float: left;
            width: 33.33%;
            display: flex;
            justify-content: center;
            .box {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 187rpx;
                height: 241rpx;
                border: 2rpx solid #FF6634;
                margin-top: 65rpx;
                .icon {
                    width: 132rpx;
                    height: 132rpx;
                    border-radius: 5px;
                    overflow: hidden;
                    margin: 10rpx 0 20rpx;
                }
                .text {
                    width: 104rpx;
                    height: 37rpx;
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    line-height: 37rpx;
                    margin-bottom: 17rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .status {
                    position: absolute;
                    top: -25px;
                    right: -25px;
                    width: 132rpx;
                    height: 132rpx;
                }
            }
        }
    }
style>

你可能感兴趣的:(css,前端,javascript)