基于Vue的响应式布局与图标展示-优快云博客

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/132564579

这篇文章介绍了使用Vue.js构建的一个自适应布局组件，包含五个模块，每个模块包含图片、标题和状态图标，展示了如何使用CSS和Scss进行样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<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>