更新记录

0.0.1（2026-01-04） 下载此版本

基于业务样式抽取样式，页面显示效果就是组件全部内容，如不符合那就是不符合

平台兼容性

uni-app(4.0)

wm-card

<!-- 使用方式 （主要就是 圆角度数和背景色渐变）-->
<template>
    <view class="wm-main">
        <view class="wm-card">
            <view class="wm-card-item" v-for="(item, index) in 5">
                <!-- 默认 使用 -->
                <WmCard v-if="index == 0">123</WmCard>
                <!-- 带阴影使用 -->
                <WmCard v-if="index == 1" showBoxShadow backgroundTwo="#e8e7e7">456</WmCard>
                <!-- 子盒子带渐变 -->
                <WmCard
                    v-if="index == 2"
                    background="#f8f7f7"
                    backgroundTwo="linear-gradient(180deg, #EFF4F8, transparent)"
                >
                    789
                </WmCard>
                <!-- 盒子自定义样式 -->
                <WmCard
                    v-if="index == 3"
                    background="#f8f7f7"
                    backgroundTwo="linear-gradient(180deg, #1A9CF2, transparent)"
                    :customStyle="{ padding: '10px' }"
                    :customStyleTwo="{ minHeight: '100px' }"
                >
                    333
                </WmCard>
                <!-- 盒子自定义样式 -->
                <WmCard
                    v-if="index == 4"
                    background="linear-gradient(180deg, #1A9CF2, #EFF4F8)"
                    backgroundTwo="linear-gradient(180deg, #EFF4F8, #1A9CF2)"
                    :customStyleTwo="{ minHeight: '100px' }"
                >
                    444
                </WmCard>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.wm-main {
    width: 100%;
    height: 100vh;
    background: lavender;

    .wm-card {
        width: 96%;
        margin: 0rpx auto;
        padding-top: 20rpx;
        &-item {
            margin-top: 20rpx;
        }
        &-item:first-child {
            margin-top: 0;
        }
    }
}
</style>