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: 'defalut',
    },
  },
  methods: {
    onClick(item) {
      this.$emit('change', item.value)
    },
  },
}
</script>

<style lang="scss" scoped>
// pc端
@media screen and (min-width: 768px) {
  .simple-radio {
    @include useTheme() {
      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 {
            border-color: fetch('color');

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

              color: #fff;
              transform: rotateZ(45deg);
              background: fetch('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 {
                background: fetch('color');
              }
            }
          }

          .simple-radio__con {
            position: absolute;
            left: 0;
            top: 50%;
            width: 18px;
            height: 18px;
            box-sizing: border-box;
            border-radius: 50%;
            transform: translateY(-50%);
            border: 1px solid fetch('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 {
    @include useTheme() {
      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;

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

          &.active {
            border-color: fetch('color');

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

              color: #fff;
              transform: rotateZ(45deg);
              background: fetch('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;

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

          &.active {
            .simple-radio__con {
              &::before {
                background: fetch('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%);
            border: 1px solid fetch('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>