front-end/glhs/src/admin/template/index.vue

<template>
	<div class="app-content">
		<div class="title">
			<span>请选择你喜欢的</span>
			<span class="app-price">商城风格</span>
		</div>
		<radio-group class="radio-group" name="template" @change="checkChange">
			<div class="list-wrap">
				<label class="list">
					<div class="list-img">
						<img :src="`${constant.imgUrl}/retail/template/1.png`" alt mode="widthFix" />
					</div>
					<div class="list-bottom">
						<div>基础模板</div>
						<div>
							<radio value="1" :checked="memberCheck" />
						</div>
					</div>
				</label>
				<label class="list">
					<div class="list-img">
						<img :src="`${constant.imgUrl}/retail/template/1.png`" alt mode="widthFix" />
					</div>
					<div class="list-bottom">
						<div>分类定制模板</div>
						<div>
							<radio value="1" :checked="memberCheck" />
						</div>
					</div>
				</label>
			</div>
		</radio-group>
	</div>
</template>

<script>
export default {
	name: 'sel-template',
	data() {
		return {
			constant: this.$constant
		}
	}
}
</script>

<style lang="scss" scoped>
    .title {
        text-align: center;
        font-size: 30px;
        padding-top: 44px;
        padding-bottom: 54px;
    }
	// list
	.list-wrap {
        @include disFlex(center, space-between);
        padding: 0 20px;
		.list {
            width: 48%;
            box-shadow: 6px 6px 20px #eee;
            border-radius: 10px;
            background-color: #fff;
            padding-right: 0;
            .list-bottom {
                @include disFlex(center, space-between);
                padding: 40px 20px;
                font-size: 28px;
            }
		}
	}
</style>