caimei-applets-caimei/pages/service/certificate-page.vue

<template>
    <view class="container clearfix">
        <view class="foot-list">
            <view class="list-cell-item">
                <view class="list-cell" v-for="(item,index) in certificates" :key="index" @click="handleClick(item.id)"
                    hover-class="cell-hover" :hover-stay-time="50">
                    <text class="cell-tit">{{ item.name }}</text>
                    <text class="cell-more">
                        <text class="iconfont icon-xiayibu"></text>
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                certificates: [
                    { name: '中华人民共和国增值电信业务经营许', id: 1 },
                    { name: '医疗器械网络交易服务第三方平台备案凭证', id: 2 },
                    { name: '互联网药品信息服务资格证编号(粤)-非经营性-2021-0339', id: 3 },
                ]
            }
        },
        onLoad(option) {

        },
        methods: {
            handleClick(id) { // 跳转资质证书
                this.$api.navigateTo(`/pages/service/certificate?id=${id}`)
            }
        },
        onShow() {}
    }
</script>

<style lang='scss'>
    page {
        height: auto;
    }

    page,
    .container {
        /* padding-bottom: 120upx; */
        background: #fff;
        /* border-top: 1px solid #EBEBEB; */
    }

    .foot-list {
        width: 100%;
        margin-top: 30rpx;
    }

    .list-cell-item {
        width: 702rpx;
        height: auto;
        margin-bottom: 24rpx;
        padding: 0 24rpx;
        background: $bg-color;
    }

    .list-cell {
        display: flex;
        width: 100%;
        align-items: baseline;
        line-height: 100rpx;
        position: relative;
        background: $bg-color;
        justify-content: center;
        border-bottom: 1px solid #EBEBEB;

        &.cell-hover {
            background: #fafafa;
        }

        .cell-more {
            align-self: baseline;
            font-size: $font-size-28;
            color: #b2b2b2;
            margin-left: 10rpx;

            .txt {
                color: #999999;
                padding-right: 10rpx;
            }
        }

        .cell-tit {
            flex: 1;
            font-size: $font-size-24;
            color: #666666;
            margin-right: 10rpx;
        }

        .cell-tip {
            font-size: $font-size-28;
            color: $text-color;
        }
    }

    .list-cell.last {
        border-bottom: none;
    }
</style>