eep_page/src/views/book/courseware/preview/components/common/SerialNumberPosition.vue

<template>
  <div :class="['sn-position', property.sn_style ? 'sn-box' : '']" :style="getJustifyContentStyle()">
    {{ property.serial_number }}
  </div>
</template>

<script>
export default {
  name: 'SerialNumberPosition',
  props: {
    property: {
      type: Object,
      required: true,
    },
  },
  methods: {
    /**
     * 得到序号位置样式
     */
    getJustifyContentStyle() {
      const position = this.property.sn_position;
      let placeSelf = '';

      if (position.includes('start')) {
        placeSelf = 'flex-start';
      } else if (position.includes('end')) {
        placeSelf = 'flex-end';
      } else {
        placeSelf = 'center';
      }

      const snStyle = this.property.sn_style;
      if (snStyle) {
        return this.serialNumberStyle(snStyle, placeSelf);
      }

      return {
        placeSelf,
      };
    },

    // 题干与描述序号样式
    serialNumberStyle(styleType, placeSelf) {
      let serialNumberStyle = {
        placeSelf,
      };

      const _color = `${this.property.sn_background_color}`;
      switch (styleType) {
        case 'solidBlockStyle':
          serialNumberStyle = {
            ...serialNumberStyle,
            borderRadius: '4px',
            backgroundColor: _color,
            color: '#fff',
          };
          break;
        case 'solidCircleStyle':
          serialNumberStyle = {
            ...serialNumberStyle,
            borderRadius: '40px',
            backgroundColor: _color,
            color: '#fff',
          };
          break;
        case 'hollowBlockStyle':
          serialNumberStyle = {
            ...serialNumberStyle,
            border: `1px solid ${_color}`,
            borderRadius: '4px',
            color: _color,
          };
          break;
        case 'hollowCircleStyle':
          serialNumberStyle = {
            ...serialNumberStyle,
            border: `1px solid ${_color}`,
            borderRadius: '40px',
            color: _color,
          };
          break;
        case 'defaultStyle':
          serialNumberStyle = {
            ...serialNumberStyle,
            color: _color,
          };
          break;
        default:
          break;
      }

      return serialNumberStyle;
    },
  },
};
</script>

<style lang="scss" scoped>
.sn-position {
  grid-area: position;
}

.sn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: 500;
}
</style>