话不多说先看效果再看代码，后期推出多选和其他的代码
<style lang="less" scoped>.CancelOrderCause-layout {font-family: PingFang SC;background: #f6f6f6;width: 100%;height: 100%;overflow-y: scroll;.cancel-list {width: 100%;height: auto;padding-bottom: 0.2rem;.cancel-title {background: #ffffff;margin-top: 0.2rem;width: 100%;height: 1.18rem;border-radius: 0.2rem 0.2rem 0 0;font-size: 0.36rem;font-stretch: normal;line-height: 0.98rem;box-sizing: border-box;padding-top: 0.2rem;padding-left: 0.32rem;letter-spacing: 0rem;color: #191f25;}.cancel-multiple-choice {.multiple-choice-list {width: 100%;height: 0.88rem;display: flex;// justify-content: center;align-items: center;position: relative;background-color: #ffffff;}.multiple-choice-img {width: 0.44rem;height: 0.44rem;margin-left: 0.24rem;margin-right: 0.4rem;}.multiple-choice-text {}.multiple-choice-line {position: absolute;height: 0.02rem;top: 0;left: 0.88rem;right: 0;background-color: #ededee;}}}}</style><template><div class="CancelOrderCause-layout"><div class="cancel-list"><h1 class="cancel-title">取消订单原因（必选）</h1><divclass="cancel-multiple-choice"v-for="(item, index) in arr":key="index"><div class="multiple-choice-list" @click="MultipleChoice(item, index)"><img :src="selects === index ? activeIcon : inactiveIcon" alt="" class="multiple-choice-img"/><span class="multiple-choice-text">选择{{ item }}</span><div class="multiple-choice-line"></div></div></div></div></div></template><script>export default {name: 'Cance',data () {return {arr: [11, 22, 33, 44, 55, 66],activeIcon: '///share/img/baoxian/icon_checked.svg',inactiveIcon: '///share/img/baoxian/icon_unchecked.svg',selects: 100}},mounted () {document.title = '取消原因'},methods: {MultipleChoice (item, index) {this.selects = index}}}</script>
