caimei-authentic-www/components/SimpleRadio/index.vue

<template>
  <div class="simple-radio">
    <template v-for="(item, index) in list">
      <div
        class="simple-radio__item"
        :class="[
          'simple-radio-theme-' + type,
          { active: item.value === value },
        ]"
        :key="index"
        @click="onClick(item)"
      >
        <span class="simple-radio__con"></span>
        <span class="simple-radio__label" v-text="item.name"></span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: [],
    },
    type: {
      type: String,
      default: 'rect',
    },
  },
  methods: {
    onClick(item) {
      this.$emit('change', item.value)
    },
  },
}
</script>

<style lang="scss" scoped>
// pc端
@media screen and (min-width: 768px) {
  .simple-radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .simple-radio__item {
      cursor: pointer;
      margin-right: 40px;

      &:last-child {
        margin-right: 0;
      }

      .simple-radio__label {
        font-size: 14px;
        color: #666;
      }

      &.simple-radio-theme-rect {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 117px;
        height: 46px;
        box-sizing: border-box;
        border: 1px solid #c2c2c2;
        border-radius: 2px;
        position: relative;
        overflow: hidden;

        &.active {
          @include themify($themes) {
            border-color: themed('color');
          }

          .simple-radio__con {
            position: absolute;
            right: -20px;
            bottom: -20px;
            width: 40px;
            height: 40px;

            color: #fff;
            transform: rotateZ(45deg);
            @include themify($themes) {
              background: themed('color');
            }

            &::after {
              content: '选中';
              position: absolute;
              left: -5px;
              top: 0;
              display: block;
              font-size: 10px;
              transform: rotateZ(-90deg) scale(0.8);
            }
          }
        }
      }

      &.simple-radio-theme-defalut {
        position: relative;
        padding-left: 24px;

        &.active {
          .simple-radio__con {
            &::before {
              @include themify($themes) {
                background: themed('color');
              }
            }
          }
        }

        .simple-radio__con {
          position: absolute;
          left: 0;
          top: 50%;
          width: 18px;
          height: 18px;
          box-sizing: border-box;
          border-radius: 50%;
          transform: translateY(-50%);

          @include themify($themes) {
            border: 1px solid themed('color');
          }

          &::before {
            display: block;
            content: '';
            width: 8px;
            height: 8px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
          }
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 768px) {
  .simple-radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .simple-radio__item {
      cursor: pointer;

      .simple-radio__label {
        font-size: 3.4vw;
        color: #666;
      }

      &.simple-radio-theme-rect {
        margin-right: 2.4vw;
        margin-bottom: 2.4vw;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 27vw;
        height: 11.8vw;
        box-sizing: border-box;
        border: 1px solid #c2c2c2;
        border-radius: 0.4vw;
        position: relative;
        overflow: hidden;

        &:nth-child(3n) {
          margin-right: 0;
        }

        &.active {
          @include themify($themes) {
            border-color: themed('color');
          }

          .simple-radio__con {
            position: absolute;
            right: -20px;
            bottom: -20px;
            width: 40px;
            height: 40px;

            color: #fff;
            transform: rotateZ(45deg);
            @include themify($themes) {
              background: themed('color');
            }

            &::after {
              content: '选中';
              position: absolute;
              left: -5px;
              top: 0;
              display: block;
              font-size: 10px;
              transform: rotateZ(-90deg) scale(0.8);
            }
          }
        }
      }

      &.simple-radio-theme-defalut {
        position: relative;
        padding-left: 6vw;
        margin-right: 7.2vw;

        &:nth-child(4n) {
          margin-right: 0;
        }

        &.active {
          .simple-radio__con {
            &::before {
              @include themify($themes) {
                background: themed('color');
              }
            }
          }
        }

        .simple-radio__con {
          position: absolute;
          left: 0;
          top: 50%;
          width: 3.6vw;
          height: 3.6vw;
          box-sizing: border-box;
          border-radius: 50%;
          transform: translateY(-50%);

          @include themify($themes) {
            border: 1px solid themed('color');
          }

          &::before {
            display: block;
            content: '';
            width: 1.8vw;
            height: 1.8vw;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
          }
        }
      }
    }
  }
}
</style>