起始

项目中常用到优惠券的镂空效果，要考虑“镂空遇到阴影”哦。 baby~ 来瞅一眼你的西雅图

预览

实现

1.考虑的点

1.布局方式
2.镂空效果
3.阴影效果(有镂空的前提下)

1.注意的点

调整两个镂空半圆inset的阴影效果，尽量让其和盒子的阴影融合，但是也不是很完美，边缘还能看到痕迹。

2.代码

1>.page

<View className='listBox'>
    <View className='item'>
        <View className='left'>
            <Text className='tipBox'>满减券</Text>
            <View className='infoBox'>
                <View className='info'>￥<Text className='num'>40</Text></View>
                <View className='desc'>满300可用</View>
            </View>
        </View>
        <View className='shape'>
            <View className='color color1'></View>
            <View className='color color2'></View>
        </View>
        <View className='right'>
            <View className='infoBox'>
                <View className='name'>满300减40</View>
                <View className='time'>有效期至2020-12-18</View>
                <View className='desc'>所有商品可用</View>
            </View>
            <View className='bt'>领取</View>
        </View>
    </View>
    <View className='item disItem'>
        <View className='left'>
            <Text className='tipBox'>满减券</Text>
            <View className='infoBox'>
                <View className='info'>￥<Text className='num'>40</Text></View>
                <View className='desc'>满300可用</View>
            </View>
        </View>
        <View className='shape'>
            <View className='color color1'></View>
            <View className='color color2'></View>
        </View>
        <View className='right'>
            <View className='infoBox'>
                <View className='name'>满300减40</View>
                <View className='time'>有效期至2020-12-18</View>
                <View className='desc'>所有商品可用</View>
            </View>
            <View className='bt'>已过期</View>
        </View>
    </View>
</View>

2>.scss

.listBox{
    height: calc(100vh - 340px);
    padding: 40px 30px;
    .item{
        @include flex-direction;
        margin-bottom: 30px;
        >.left{
            @include flex-center;
            position: relative;
            width: 188px;
            height: 200px;
            border-radius: 8px 0 0 8px;
            box-shadow: 0 8px 15px 0 rgba($color: #000, $alpha: .1);
            background: linear-gradient(to right, #ff9249 0%, #ff5e16 90%);
            overflow: hidden;
            .tipBox{
                @include position-way-tl(absolute, 0, 0);
                padding: 6px 12px;
                border-top-left-radius: 10px;
                border-bottom-right-radius: 10px;
                background-color: rgba($color: #fff, $alpha: .2);
                @include font-sc(22, white);
            }
            .infoBox{
                @include flex-center(column);
                .info{
                    @include position-way-tl(relative, 0, -10px);
                    @include font-sc(28, white);
                    .num{
                        font-size: 56px;
                        font-weight: bold;
                    }
                }
                .desc{
                    @include font-sc(28, white);
                }
            }
        }
        >.right{
            @include position-way-tl(relative, 0, -2px);
            width: 420px;
            height: 200px;
            padding: 0 30px;
            background-color: #fff;
            border-radius: 0 8px 8px 0;
            box-shadow: 0 8px 15px 0 rgba($color: #000, $alpha: .1);
            overflow: hidden;
            .infoBox{
                @include flex-direction(column);
                margin-top: 30px;
                .name{
                    @include font-sc(30, theme);
                    font-weight: bold;
                    margin-bottom: 15px;
                }
                .time, .desc{
                    @include font-sc(26, desc);
                    margin-bottom: 10px;
                }
            }
            .bt{
                @include position-way-tr(absolute, 76px, 30px);
                width: 140px;
                height: 54px;
                border-radius: 30px;
                background: linear-gradient(to right, #ff9249 0%, #ff5e16 100%);
                @include font-sc(30, white);
                line-height: 54px;
                text-align: center;
                z-index: 1;
            }
            &::before, &::after{
                display: block;
                content: '';
                border-radius: 50%;
                background-color: rgba($color: $color-theme, $alpha: .1);
            }
            &::before{
                @include position-way-tr(absolute, -15px, 100px);
                width: 70px;
                height: 70px;
            }
            &::after{
                @include position-way-br(absolute, -42px, -20px);
                width: 170px;
                height: 170px;
            }
        }
        >.shape{
            position: relative;
            @include flex-direction;
            width: 24px;
            height: 200px;
            z-index: 1;
            .color{
                width: 12px;
                height: 200px;
                &1{
                    background: linear-gradient(to right, #ff5e16 90%, #ff5e16 100%);
                }
                &2{
                    background: #fff;
                }
            }
            &::before, &::after{
                display: block;
                content: '';
                width: 24px;
                height: 12px;
                background-color: $color-bg;
            }
            &::before{
                @include position-way-tr(absolute, 0, 0);
                border-bottom-left-radius: 24px;
                border-bottom-right-radius: 24px;
                box-shadow: 0 -5px 2px rgba(0,0,0, .1) inset;
            }
            &::after{
                @include position-way-br(absolute, 0, 0);
                border-top-left-radius: 24px;
                border-top-right-radius: 24px;
                box-shadow: 0 5px 2px rgba(0,0,0, .1) inset;
            }
        }
        // disabled状态
        &.disItem{
            .left{
                background: linear-gradient(to right, #dbdbdb 0%, #bbb 90%);
                .tipBox{
                    @include font-sc(22, desc);
                }
            }
            >.shape{
                .color1{
                    background: linear-gradient(to right, #bbb 90%, #bbb 100%);
                }
            }
            .right{
                .infoBox{
                    .name{
                        @include font-sc(30, info);
                    }
                }
                .bt{
                    background: linear-gradient(to right, #dbdbdb 0%, #bbb 100%);
                }
                &::before, &::after{
                    background-color: rgba($color: #bbb, $alpha: .15);
                }
            }
        }
    }
}