eep_page/src/views/book/courseware/preview/components/character/CharacterPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="character-preview" :style="[getAreaStyle(), getComponentStyle()]">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <template v-if="data.property.model === 'write'">
        <div
          v-for="(item, index) in data.option_list"
          :key="index"
          class="item-box"
          :class="[!item.is_margin ? 'item-box-write' : '']"
        >
          <div
            class="number-box"
            :style="{
              marginTop: isEnable(data.property.view_pinyin) ? '30px' : '',
            }"
          >
            <span
              class="number"
              :style="{
                background:
                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
              }"
              >{{ index + 1 }}</span
            >
          </div>
          <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
            <div
              v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
              class="pinyin"
              :style="{
                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
              }"
            >
              {{ item.pinyin }}
            </div>
            <div class="items-flex">
              <div v-for="(items, indexs) in item.content_list" :key="indexs" class="items">
                <div
                  v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin"
                  class="pinyin"
                  :style="{
                    fontSize:
                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                  }"
                >
                  {{ items.pinyin }}
                </div>
                <div class="items-content">
                  <template v-if="items && items.type === 'img'">
                    <el-image
                      v-if="items.file_list[0]"
                      class="items-image"
                      :src="items.file_list[0].file_url"
                      fit="contain"
                      :style="{
                        borderColor:
                          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                      }"
                    />
                  </template>
                  <template v-else-if="items && items.type === 'lian'">
                    <span
                      class="items-lian"
                      :style="{
                        color:
                          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                      }"
                      >{{ items.con }}</span
                    >
                  </template>
                  <Strockplayredline
                    v-if="items && items.type === 'hanzi'"
                    :Book_text="items.con"
                    :play-storkes="isEnable(data.property.is_enable_play_structure)"
                    :cur-item="
                      isEnable(data.property.is_enable_high_strokes)
                        ? data.property.model === 'input'
                          ? items.high_strokes
                          : userAnswer[index].item[indexs]
                        : null
                    "
                    :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
                    :target-div="'newWordTemplate-character' + items.con + index + indexs + randomId"
                    :hz_json="items.hz_info[0].hzDetail.hz_json"
                    :bg-type="data.property.frame_type"
                    class="hanzi-storck"
                    :class="[
                      !item.is_margin && item.content_list.length > 1 && indexs == 0 ? 'leftBorderRadius' : '',

                      !item.is_margin && item.content_list.length > 1 && indexs == item.content_list.length - 1
                        ? 'rightBorderRadius'
                        : '',
                      !item.is_margin &&
                      item.content_list.length > 1 &&
                      indexs != item.content_list.length - 1 &&
                      indexs != 0
                        ? 'NoborderRadius'
                        : '',
                      !item.is_margin &&
                      item.content_list.length > 1 &&
                      indexs != item.content_list.length - 1 &&
                      item.content_list[indexs + 1].type !== 'lian'
                        ? 'NoborderRight'
                        : '',
                    ]"
                    :play-color="
                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                    "
                    :style="{
                      borderColor:
                        data.unified_attrib && data.unified_attrib.topic_color
                          ? data.unified_attrib.topic_color
                          : '#346cda',
                    }"
                  />

                  <div
                    v-if="items && items.type === 'write'"
                    :class="[
                      'strockplay-newWord',
                      !item.is_margin && item.content_list.length > 1 && indexs == 0 ? 'leftBorderRadius' : '',

                      !item.is_margin && item.content_list.length > 1 && indexs == item.content_list.length - 1
                        ? 'rightBorderRadius'
                        : '',
                      !item.is_margin &&
                      item.content_list.length > 1 &&
                      indexs != item.content_list.length - 1 &&
                      indexs != 0
                        ? 'NoborderRadius'
                        : '',
                      !item.is_margin &&
                      item.content_list.length > 1 &&
                      indexs != item.content_list.length - 1 &&
                      item.content_list[indexs + 1].type !== 'lian'
                        ? 'NoborderRight'
                        : '',
                    ]"
                    :style="{
                      borderColor:
                        data.unified_attrib && data.unified_attrib.topic_color
                          ? data.unified_attrib.topic_color
                          : '#346cda',
                    }"
                    @click="
                      freeWrite(
                        userAnswer[index][indexs].imgArr ? userAnswer[index][indexs].imgArr : null,
                        index,
                        indexs,
                      )
                    "
                  >
                    <SvgIcon
                      v-if="data.property.frame_type === 'tian'"
                      icon-class="hanzi-writer-bg"
                      class="character-target-bg"
                    />
                    <SvgIcon
                      v-else-if="data.property.frame_type === 'mi'"
                      icon-class="mi"
                      class="character-target-bg"
                    />
                    <img
                      v-if="
                        !play_status &&
                        userAnswer[index][indexs].imgArr &&
                        userAnswer[index][indexs].imgArr.strokes_image
                      "
                      class="hanzi-writer-img"
                      :src="userAnswer[index][indexs].imgArr.strokes_image"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="en-common">{{ convertText(item.shiyi) }}</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div :class="['words-box']">
          <div v-for="(item, index) in data.option_list" :key="index" :class="['words-item']">
            <div class="words-top">
              <div class="words-left" :style="{}">
                <AudioPlay
                  v-if="isEnable(data.property.is_enable_voice)"
                  :file-id="item.audio_file_id ? item.audio_file_id.file_url : ''"
                  :theme-color="
                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                  "
                />
                <span
                  v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
                  class="pinyin"
                  :style="{
                    fontSize:
                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                  }"
                  >{{ item.pinyin }}</span
                >
              </div>
            </div>
            <div class="card-box">
              <!-- 描红 -->
              <template v-for="(items, indexs) in item.content_list">
                <div v-if="item.is_show_ben" :key="'miao' + indexs">
                  <!-- <div v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin" class="pinyin">
                    {{ items.pinyin }}
                  </div> -->
                  <Strockplayredline
                    :Book_text="items.con"
                    :play-storkes="isEnable(data.property.is_enable_stroke)"
                    :cur-item="null"
                    :target-div="'newWordTemplate-character-answer' + items.con + index + indexs + randomId"
                    :hz_json="
                      items.hz_info && items.hz_info[0].hzDetail.hz_json ? items.hz_info[0].hzDetail.hz_json : []
                    "
                    class="hanzi-storck"
                    :class="['strock-chinese', 'border-right-none']"
                    :bg-type="data.property.frame_type"
                    :play-color="
                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                    "
                    :style="{
                      borderColor:
                        data.unified_attrib && data.unified_attrib.topic_color
                          ? data.unified_attrib.topic_color
                          : '#346cda',
                    }"
                  />
                </div>
              </template>

              <div
                v-for="(itemI, indexI) in item.miao_arr"
                :key="indexI + index"
                style="display: flex"
                :style="{
                  borderColor:
                    data.unified_attrib && data.unified_attrib.topic_color
                      ? data.unified_attrib.topic_color
                      : '#346cda',
                }"
                @click="miaoStorkes(index, indexI, item.mark, item.content, itemI.strokes)"
              >
                <Strockplayredlines
                  v-if="
                    userAnswer[index].strokes_content_list[indexI] &&
                    userAnswer[index].strokes_content_list[indexI].flag === 'true'
                  "
                  :play-storkes="false"
                  :book-text="item.content"
                  :target-div="'write-praT-1' + indexI + index + randomId"
                  :book-strokes="itemI.strokes"
                  :class="['strock-chinese']"
                  :bg-type="data.property.frame_type"
                  :play-color="
                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                  "
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color
                        ? data.unified_attrib.topic_color
                        : '#346cda',
                  }"
                />
                <Strockplayredlines
                  v-else
                  :play-storkes="false"
                  :book-text="item.content"
                  :target-div="'write-praT-2' + indexI + index + randomId"
                  :book-strokes="itemI.strokes"
                  :stroke-color="'#ddd'"
                  :class="['strock-chinese']"
                  :bg-type="data.property.frame_type"
                  :play-color="
                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                  "
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color
                        ? data.unified_attrib.topic_color
                        : '#346cda',
                  }"
                />
              </div>
              <!-- 书写 -->
              <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
                <div
                  :class="['strockplay-newWord']"
                  :style="{
                    borderColor:
                      data.unified_attrib && data.unified_attrib.topic_color
                        ? data.unified_attrib.topic_color
                        : '#346cda',
                  }"
                  @click="
                    freeWrite(
                      userAnswer[index].strokes_content_list[indexs].imgArr
                        ? userAnswer[index].strokes_content_list[indexs].imgArr
                        : null,
                      index,
                      indexs,
                    )
                  "
                >
                  <SvgIcon
                    v-if="data.property.frame_type === 'tian'"
                    icon-class="hanzi-writer-bg"
                    class="character-target-bg"
                  />
                  <SvgIcon v-else-if="data.property.frame_type === 'mi'" icon-class="mi" class="character-target-bg" />
                  <img
                    v-if="
                      !play_status &&
                      items &&
                      userAnswer[index].strokes_content_list[indexs].imgArr &&
                      userAnswer[index].strokes_content_list[indexs].imgArr.strokes_image
                    "
                    class="hanzi-writer-img"
                    :src="userAnswer[index].strokes_content_list[indexs].imgArr.strokes_image"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div v-if="item.shiyi && isEnable(data.property.is_enable_shiyi)" class="words-bottom">
              {{ convertText(item.shiyi) }}
            </div>
          </div>
        </div>
      </template>
      <div v-if="if_free_show" class="practiceBox practice-box-strock">
        <FreewriteLettle
          ref="freePaint"
          :current-tree-i-d="'1234456'"
          :current-hz="current_hz"
          :curren-hz-data="current_hz_data"
          :row-index="active_index"
          :col-index="active_col_index"
          :disabled="disabled"
          :show-play="isEnable(data.property.is_enable_play_back)"
          :bg-type="data.property.frame_type"
          :attrib="data.unified_attrib"
          @closeIfFreeShow="closeIfFreeShow"
          @changePraShow="changePraShow"
          @changeCurQue="changeCurQue"
          @deleteWriteRecord="deleteWriteRecord"
        />
      </div>
      <div v-if="if_miao_show" class="practiceBox practice-box-strock">
        <div class="miao-box">
          <i class="el-icon-close close-icon" @click="if_miao_show = false"></i>
          <Strockplayredlines
            v-if="
              (userAnswer[active_index].strokes_content_list[active_col_index].flag &&
                userAnswer[active_index].strokes_content_list[active_col_index].flag === 'true') ||
              disabled
            "
            :play-storkes="false"
            :book-text="current_hz"
            :target-div="'write-praT-3' + current_hz + active_col_index + active_index + randomId"
            :book-strokes="current_hz_data"
            :stroke-color="
              disabled &&
              (!userAnswer[active_index].strokes_content_list[active_col_index].flag ||
                (userAnswer[active_index].strokes_content_list[active_col_index].flag &&
                  userAnswer[active_index].strokes_content_list[active_col_index].flag === 'false'))
                ? '#ddd'
                : ''
            "
            :bg-type="data.property.frame_type"
            :play-color="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
          />
          <Strockred
            ref="strockRed"
            :class="[
              'strock-red',
              userAnswer[active_index].strokes_content_list[active_col_index].flag &&
              userAnswer[active_index].strokes_content_list[active_col_index].flag === 'true'
                ? 'strock-red-zindex'
                : '',
            ]"
            :book-text="current_hz"
            :hanzi-color="hanzi_color"
            :target-div="'write-praT' + current_hz + active_col_index + active_index + randomId"
            :book-strokes="current_hz_data"
            :is-answer.sync="userAnswer[active_index].strokes_content_list[active_col_index].flag"
            :show-error-tip="isEnable(data.property.is_enable_error)"
            :bg-type="data.property.frame_type"
          />
          <div v-if="!disabled" :class="['reset-box']" @click="resetHanzi">
            <SvgIcon icon-class="reset" class="reset-btn" />
          </div>
        </div>
      </div>
      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
      <AnswerCorrect
        :answer-correct="data?.answer_correct"
        :visible.sync="visibleAnswerCorrect"
        @closeAnswerCorrect="closeAnswerCorrect"
      />
      <AnswerAnalysis
        :visible.sync="visibleAnswerAnalysis"
        :answer-list="data.answer_list"
        :analysis-list="data.analysis_list"
        @closeAnswerAnalysis="closeAnswerAnalysis"
      />
    </div>
  </div>
</template>

<script>
import { getCharacterData } from '@/views/book/courseware/data/character';

import PreviewMixin from '../common/PreviewMixin';
import AudioPlay from '../character_base/components/AudioPlay.vue';
import Strockplayredline from '../newWord_template/components/Strockplayredline.vue';
import Strockplayredlines from '../character_base/components/Strockplayredline.vue';
import Strockred from '../character_base/components/Strockred.vue';
import FreewriteLettle from '../character_base/components/FreewriteLettle.vue';

export default {
  name: 'CharacterPreview',
  components: {
    AudioPlay,
    Strockplayredline,
    Strockred,
    FreewriteLettle,
    Strockplayredlines,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getCharacterData(),
      userAnswer: [],
      hanzi_color: '#404040', // 描红汉字底色
      writer_number_yuan: 15,
      writer_number: null, // 书写个数
      miao_number: null, // 描红个数
      if_free_show: false,
      free_img: [],
      active_index: null,
      active_col_index: null,
      current_hz: '', // 当前汉字
      current_hz_data: null, // 当前汉字数据
      play_status: false, // 播放状态
      active_mark: '',
      option_list: [],
      show_preview: false,
      miao_arr: [],
      if_miao_show: false, // 描红模块
      randomId: Math.random().toString(36).substring(2, 12),
    };
  },
  computed: {},
  watch: {
    'data.option_list': {
      handler(val) {
        if (val) {
          this.handleData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleData() {
      let answer_list = [];
      this.data.option_list.forEach((item, index) => {
        if (this.data.property.model === 'write') {
          let arr = [];
          item.content_list.forEach((items) => {
            let obj = null;
            if (items.type === 'write') {
              obj = {
                imgArr: null,
              };
            }
            arr.push(obj);
          });
          answer_list.push(arr);
        } else {
          let miao_arr = [];
          let arr = [];
          if (item.content.trim()) {
            for (let i = 0; i < this.data.property.write_number; i++) {
              item.content_list.forEach((items) => {
                arr.push({ imgArr: null, flag: null });
              });
            }
            for (let i = 0; i < this.data.property.miao_number; i++) {
              item.content_list.forEach((items) => {
                miao_arr.push({
                  strokes: items && items.hz_info && items.hz_info[0] ? items.hz_info[0].hzDetail.hz_json : null,
                  length: item.content_list.length,
                });
              });
            }
            item.imgArr = arr;
            item.miao_arr = miao_arr;
            // if (this.isJudgingRightWrong) {
            //   item.imgArr = this.userAnswer.find(
            //     (items) => items.mark === item.mark,
            //   )?.strokes_content_list;
            // }
          }
          let obj = {
            // mark: item.mark,
            strokes_content_list: arr,
            miao_arr,
          };
          // if (!this.isJudgingRightWrong) {
          //   this.userAnswer.push(obj);
          // }
          answer_list.push(obj);
        }
      });
      this.userAnswer = answer_list;
    },
    changePraShow() {
      this.if_free_show = false;
    },
    closeIfFreeShow(data, rowIndex, colIndex, mark) {
      // this.option_list[rowIndex].imgArr[colIndex] = JSON.stringify(data);
      this.if_free_show = false;
      this.freeWrite(data, rowIndex, colIndex);
      this.$forceUpdate();
    },
    freeWrite(imgUrl, index, indexs) {
      this.if_free_show = true;
      this.active_index = index;
      this.active_col_index = indexs;

      this.current_hz =
        this.data.option_list[index] &&
        this.data.option_list[index].content_list[indexs] &&
        this.data.option_list[index].content_list[indexs].con
          ? this.data.option_list[index].content_list[indexs].con
          : '';
      this.current_hz_data = imgUrl;
    },
    // 删除记录
    deleteWriteRecord(rowIndex, colIndex) {
      this.$set(this.option_list[rowIndex].imgArr, colIndex, JSON.stringify({}));
      this.changeCurQue(null, rowIndex, colIndex);
      this.current_hz_data = null;
      this.active_mark = '';
      this.$forceUpdate();
    },
    changeCurQue(answer, rowIndex, colIndex) {
      if (answer) {
        if (this.data.property.model === 'write') {
          this.userAnswer[rowIndex][colIndex].imgArr = answer;
        } else {
          this.userAnswer[rowIndex].strokes_content_list[colIndex].imgArr = answer;
        }

        this.$forceUpdate();
      }
    },
    // 点击描红模块
    miaoStorkes(index, indexs, mark, content, storkes) {
      this.if_miao_show = true;
      this.active_index = index;
      this.active_col_index = indexs;
      this.current_hz = content;
      this.current_hz_data = storkes;
    },
    // 保存描红
    saveComplete(flag) {
      this.answer.answer_list[this.active_index].strokes_content_list[this.active_col_index] = flag;
    },
    resetHanzi() {
      this.$refs.strockRed.resetHanzi();
    },
    updateColor(color) {
      this.writer.updateColor('strokeColor', color);
      this.writer.updateColor('drawingColor', color);
    },
    // 重做
    retry() {
      this.handleData();
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.character-preview {
  @include preview-base;

  display: block;

  .main {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    justify-content: start;
  }

  .content-box {
    width: max-content;
  }

  .audio-wrapper-nobg {
    height: 24px;

    :deep .audio-play {
      width: 24px;
      height: 24px;

      // color: #000;
      background-color: initial;
    }

    :deep .audio-play.not-url {
      color: #a1a1a1;
    }

    :deep .voice-play {
      width: 16px;
      height: 16px;
    }
  }

  .main-top {
    display: flex;
    column-gap: 4px;
    align-items: center;
    justify-content: center;
  }

  .pinyin {
    font-family: 'League';
    font-size: 12px;
    font-weight: 500;
    color: #000;
  }

  .strock-chinese-box {
    display: flex;
    flex-wrap: wrap;
    margin: 8px 0;
  }

  .strockplay-newWord {
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border: 2px solid #346cda;
    border-radius: 4px;

    .character-target-bg,
    .hanzi-writer-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: #dedede;
    }

    .hanzi-writer-img {
      z-index: 1;
    }
  }

  .border-right-none {
    border-right: none;
  }

  .item-box {
    display: flex;
    gap: 5px;
  }

  .number-box {
    display: flex;
    align-items: center;
    height: 80px;
    margin-right: 16px;

    .number {
      display: block;
      width: 24px;
      height: 24px;
      font-family: 'arial';
      font-size: 14px;
      font-weight: bold;
      line-height: 24px;
      color: #fff;
      text-align: center;
      background: #346cda;
      border-radius: 100%;
    }
  }

  .items {
    font-size: 0;
  }

  .pinyin {
    height: 30px;
    min-height: 16px;
    font-family: 'League';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: rgba(0, 0, 0, 50%);
    text-align: center;
  }

  .items-image,
  .hanzi-storck {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 2px solid #346cda;
    border-radius: 4px;
  }

  .items-lian {
    display: block;
    height: 80px;
    padding: 0 10px;
    font-size: 34px;
    line-height: 80px;
    color: #346cda;
  }

  .items-flex {
    display: flex;
    gap: 5px;
  }

  .item-box-write {
    .items-flex {
      gap: 0;
    }

    .NoborderRadius {
      border-radius: 0;
    }

    .rightBorderRadius {
      border-radius: 0;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .leftBorderRadius {
      border-radius: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .NoborderRight {
      border-right: none;
    }
  }

  .pinyin-common {
    margin-bottom: 5px;

    :deep .edit-div {
      font-family: 'League';
    }
  }

  .en-common {
    margin-top: 8px;

    // text-align: center;
    word-break: break-word;
  }

  .practiceBox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background: rgba(0, 0, 0, 19%);

    &.practice-box-strock {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 0;
    }

    .miao-box {
      position: relative;
      width: 332px;
      height: 360px;
      padding: 30px 16px;
      margin: 0 auto;
      background: #f3f3f3;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);

      .close-icon {
        position: absolute;
        top: 0;
        right: 8px;
        z-index: 2;
        width: 32px;
        height: 32px;
        padding: 8px;
        cursor: pointer;
      }

      .strockredBox,
      .strockplay-redInner {
        width: 300px;
        height: 300px;
        margin: 0 auto;
      }

      .strock-red {
        position: absolute;
        top: 30px;
        left: 16px;

        &-zindex {
          z-index: -1;
        }
      }

      .reset-box {
        position: absolute;
        right: 22px;
        bottom: 22px;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 11px;
        height: 11px;
        color: $text-color;
        cursor: pointer;

        &:hover {
          color: #000;
        }
      }
    }
  }

  .card-box {
    display: flex;
    flex-flow: wrap;
    gap: 5px;
  }

  .words-left {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
  }

  :deep .strockplay-redInner {
    width: 80px;
    height: 80px;
    border-width: 2px !important;
    border-radius: 4px;
  }

  .words-item {
    margin-bottom: 10px;
  }

  .words-bottom {
    margin-top: 3px;
    word-break: break-word;
  }

  .operation {
    width: 100%;
  }
}
</style>