caimei-applets-caimei/pages/goods/components/cm-return-instructions.vue

<template>
    <view class="goods-return-instructions">
        <view class="section" @click="onShowDetail">
            <view class="label">特殊商品退货须知</view>
            <view class="iconfont icon-chakangengduo more"></view>
        </view>
        <tui-bottom-popup backgroundColor="#fff" :height="400"  :show="popupShow">
        	<view class="popup-content">
        	    <view class="close iconfont icon-iconfontguanbi" @click="close"></view>
        	    <view class="title">特殊商品退货须知</view>
                <scroll-view :scroll-y="true" class="content">
                    <view>
                        为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
                    </view>
                </scroll-view>
        	</view>
        </tui-bottom-popup>
    </view>
</template>

<script> 
export default {
    data(){
        return {
            popupShow: false
        }
    },
    methods: {
        onShowDetail() {
            this.popupShow = true
        },
        close() {
            this.popupShow = false
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-return-instructions {
    background-color: #fff;
    .section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        line-height: 90rpx;
        color: #666666;

        .iconfont {
            font-size: 28rpx;
            color: #666;
        }
    }
}

.popup-content {
    position: relative;
    padding: 50rpx;
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;

    .close {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        color: #999;
        font-size: 32rpx;
    }
    .title {
        text-align: center;
        font-size: 34rpx;
        color: #333;
        font-weight: bold;
    }
    .content {
        line-height: 42rpx;
        font-size: 26rpx;
        margin-top: 50rpx;
        max-height: 200rpx;
        color: #333333;
    }
}
</style>