html+vant 信息卡片

最新推荐文章于 2024-07-02 16:15:40 发布

=^_^=银爪

最新推荐文章于 2024-07-02 16:15:40 发布

阅读量493

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_65635437/article/details/130807653

版权

头部引入

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 信息卡片 </title>
    <script src="Scripts/jquery-1.9.1-min.js"></script>
    <link href="css/font.css" rel="stylesheet" />
    <link href="Scripts/vant/index.css" rel="stylesheet" />
    <script src="Scripts/vue@3.js"></script>
    <script src="Scripts/vant/vant.min.js"></script>
</head>

正文

<body>
    <div id="app">
        <div class="container">
            <div class="card-container" v-for="(value, i) in cardList">
                <div class="card">
                    <div class="box">
                        <div class="box-left">
                            <div class="box-head">
                                <div class="label">{{value.diskSource}}</div>
                                <van-divider :style="{ borderColor: '#ccc',}" class="dividerBottom" />
                            </div>
                            <div class="box-content" v-for="(col, i) in value.categoryList">
                                <div class="category">
                                    <img :src="col.img" alt="Your Image" class="category-icon">
                                    <p class="category-text">{{col.label}}</p>
                                </div>
                                <div class="category-value">
                                    <span class="groupValue">{{col.group}}</span> <span class="name">{{col.name}}</span>
                                </div>
                            </div>
 </div>
                        <div class="box-right">
                            <img :src="value.checkImg" alt="" style="width: 100%;height: 100%;">
                        </div>
                    </div>
                    <div class="box-content">
                        <div class="category">
                            <img :src="value.categoryList1.describeIcon" alt="Your Image" class="category-icon">
                            <p class="category-text">申请描述</p>
                        </div>
                        <div class="category-value">
                            <span class="groupValue">{{value.categoryList1.describe}}</span>
                        </div>
                        <van-divider :style="{ borderColor: '#ccc',}" class="dividerTop" />
                    </div>
                    <div style="display: flex;">
                        <van-button :class="col.chuckBtnType == '0' ?  'chuckBtnPrimary':  'chuckBtnPlain'  "
                            v-for="(col, i) in value.buttonList" class="chuckBtn">{{col.buttonText}}</van-button>
                    </div>
                </div>
            </div>
        </div>
</body>

script部分

<script>
    var vue;
    loadData();
    function loadData() {

        var app = {
            data() {
                return {
                    cardList: [
                        {
                            diskSource: '盘源反签',
                            checkImg: './images/com_stamp_daishenhe.png',
                            categoryList: [
                                { img: "./images/com_bumen.png", label: '申请部门', group: '系统管理组', name: '王小明' },
                                { img: "./images/com_shijian.png", label: '申请时间', group: '2023-05-09', name: '14:33:36' },
                            ],
                            categoryList1: {
                                departmentIcon: "./images/com_bumen.png",
                                group: '系统管理组',
                                name: '王小明',
                                timeIcon: './images/com_shijian.png',
                                applyDate: '2023-05-09',
                                applyTime: '14:33:36',
                                describeIcon: './images/com_miaoshu.png',
                                describe: '王小明 提交了盘源(天地国际大厦A座1108(出租))的反签申请,请尽快审批!',
                            },
                            buttonList: [
                            { buttonText: "审批",chuckBtnType: '0'},
                            ]

                        },
                        {
                            diskSource: '盘源正签',
                            checkImg: './images/com_stamp_tongguo.png',
                            categoryList: [
                                { img: "./images/com_bumen.png", label: '申请部门', group: '系统管理组', name: '王小明' },
                                { img: "./images/com_shijian.png", label: '申请时间', group: '2023-05-09', name: '14:33:36' },
                            ],
                            categoryList1: {
                                departmentIcon: "./images/com_bumen.png",
                                group: '系统管理组',
                                name: '王小明',
                                timeIcon: './images/com_shijian.png',
                                applyDate: '2023-05-09',
                                applyTime: '14:33:36',
                                describeIcon: './images/com_miaoshu.png',
                                describe: '王小明 提交了盘源(天地国际大厦A座1108(出租))的反签申请,请尽快审批!',
                            },
                            buttonList: [
                                { buttonText: "审批",chuckBtnType: '0'},
                                { buttonText: "浏览申请",chuckBtnType: '1' },
                                { buttonText: "查看记录" ,chuckBtnType: '1'},
                            ]
                        },
                    ]
                }
            },
            computed: {
                fields() {

                },
            },
            created() { },
            mounted() { },
        };

        vue = Vue.createApp(app);
        vue.use(vant);
        vue.use(vant.Lazyload);
        vue.mount('#app');
    }

</script>

样式

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        width: 100vw;
        height: 100vh;
        background-color: #f6f6f6;
        overflow: auto;
    }

    /* 和屏幕边缘产生间距 */
    .card-container {
        padding: 1rem;
        width: 100%;
        height: 300px;
    }

    /* 填充卡片所有背景为白色 */
    .card {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
    }

    .box {
        display: flex;
        justify-content: space-between;
    }

    .box-left {
        width: 85%;
    }

    .box-right {
        width: 64px;
        height: 64px;
    }

    .box-head {}

    .label {
        width: 100%;
        font-weight: bold;
        font-size: 16px;
        color: rgb(51, 51, 51);
        position: relative;
        padding-left: 10px;
    }

    .label::before {
        content: '';
        display: block;
        width: 2px;
        height: 16px;
        background-color: rgb(255, 82, 82);
        ;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .box-content {
        margin-top: 10px;
    }

    .dividerBottom {
        margin-bottom: 0px;
    }

    .dividerTop {
        margin-top: 3px;
    }

    .category {
        display: flex;
        align-items: center;
    }

    .category-icon {
        max-width: 100%;
        /* 设置图标大小和间距 */
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

    .category-text {
        /* 设置文本样式 */
        font-size: 16px;
        width: 100%;
        font-size: 14px;
        color: rgb(153, 153, 153);
        flex: 1;
    }

    .category-value {
        color: rgb(51, 51, 51);
        font-size: 14px;
        margin-top: 5px
    }

    .chuckBtn {
        flex: 1;
        height: 32px;
        margin: 0px 5px;
    }
    .chuckBtnPlain {
        background: #FFF;
        color: rgb(255, 82, 82);
        border-color: 1px solid rgb(255, 82, 82);
    }
    .chuckBtnPrimary{
        background: rgb(255, 82, 82);
        color: #ffffff;
    }
</style>

运行效果：