EEP_BookPreview/src/views/book/courseware/preview/components/dialogue_article/index.vue

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

    <div class="main">
      <div class="NPC-ArticleView NPC-ArticleView-container">
        <div class="ArticleView-header">
          <a class="ArticleView-full" @click="fullScreen" title="全屏">
            <svg-icon
              icon-class="icon-full"
              size="24"
              :style="{
                color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
              }"
            />
          </a>
          <div>
            <div
              v-if="
                (tokenData && tokenData.popedom_code_list && tokenData.popedom_code_list.indexOf(2100001) != -1) ||
                (tokenData && tokenData.user_type === 'APP')
              "
              class="left"
              :style="{ marginLeft: '40px' }"
              @click="submit"
              title="文本分析"
            >
              <!-- <img src="@/assets/wbfx-icon.png" alt="" /> -->
              <svg-icon
                icon-class="icon-wbfx"
                size="24"
                :style="{
                  color: data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                }"
              />
            </div>
          </div>
          <div class="right">
            <!-- <template v-if="data.property.is_enable_new_word === 'true'">
              <el-switch
                v-model="showPhrases"
                style="display: block"
                :active-color="bookInfo.theme_color"
                inactive-color="rgba(0,0,0,0.1)"
                active-text=""
                inactive-text="本课生词"
                @change="handleSwitchChange('showPractice', 'showWord')"
              />
            </template>
            <template v-if="data.property.is_enable_read === 'true'">
              <el-switch
                v-model="showPractice"
                style="display: block"
                :active-color="bookInfo.theme_color"
                inactive-color="rgba(0,0,0,0.1)"
                active-text=""
                inactive-text="语音练习"
                @change="handleSwitchChange('showPhrases', 'showWord')"
              />
            </template>
            <template v-if="data.property.is_enable_word === 'true'">
              <el-switch
                v-model="showWord"
                style="display: block"
                :active-color="bookInfo.theme_color"
                inactive-color="rgba(0,0,0,0.1)"
                active-text=""
                inactive-text="取词"
                @change="handleSwitchChange('showPhrases', 'showPractice')"
              />
            </template> -->
            <a
              v-if="data.property.is_enable_new_word === 'true'"
              @click="handleSwitchChange('showPractice', 'showWord', 'showPhrases')"
              :style="{
                color:
                  showPhrases && data.unified_attrib && data.unified_attrib.topic_color
                    ? data.unified_attrib.topic_color
                    : '',
              }"
              ><svg-icon icon-class="icon-article-ci" size="24" />本课生词</a
            >
            <a
              v-if="data.property.is_enable_read === 'true'"
              @click="handleSwitchChange('showPhrases', 'showWord', 'showPractice')"
              :style="{
                color:
                  showPractice && data.unified_attrib && data.unified_attrib.topic_color
                    ? data.unified_attrib.topic_color
                    : '',
              }"
              ><svg-icon icon-class="icon-article-practice" size="24" />语音练习</a
            >
            <a
              v-if="data.property.is_enable_word === 'true'"
              @click="handleSwitchChange('showPhrases', 'showPractice', 'showWord')"
              :style="{
                color:
                  showWord && data.unified_attrib && data.unified_attrib.topic_color
                    ? data.unified_attrib.topic_color
                    : '',
              }"
              ><svg-icon icon-class="icon-article-phrase" size="24" />取词</a
            >
          </div>
        </div>
        <div ref="ArticleViewbody" class="ArticleView-body">
          <NormalModelChs
            v-if="!showPhrases && !showPractice && !showWord"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :body-left="bodyLeft"
            :body-width="bodyWidth"
            :attrib="data.unified_attrib"
            :no-font="noFont"
            :config="config"
            :NNPEAnnotationList="NNPEAnnotationList"
            :col-length="colLength"
            :multilingual="showLang && getLang() ? getLang() : ''"
            @changeConfig="changeConfig"
          />
          <PhraseModel
            v-if="showPhrases"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :NNPENewWordList="NNPENewWordList"
            :attrib="data.unified_attrib"
            :no-font="noFont"
            :body-left="bodyLeft"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :NNPEAnnotationList="NNPEAnnotationList"
            :col-length="colLength"
            :NpcNewWordMp3="NpcNewWordMp3"
            :multilingual="showLang && getLang() ? getLang() : ''"
            @changeConfig="changeConfig"
          />
          <Practice
            v-if="showPractice"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :attrib="data.unified_attrib"
            :no-font="noFont"
            :NNPENewWordList="NNPENewWordList"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :col-length="colLength"
            :NpcNewWordMp3="NpcNewWordMp3"
            :is-full="isFull"
            :multilingual="showLang && getLang() ? getLang() : ''"
            @changeConfig="changeConfig"
          />
          <WordModel
            v-if="showWord"
            :cur-que="data"
            :title-fontsize="titleFontsize"
            :word-fontsize="wordFontsize"
            :body-left="bodyLeft"
            :body-width="bodyWidth"
            :NNPENewWordList="NNPENewWordList"
            :attrib="data.unified_attrib"
            :no-font="noFont"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :col-length="colLength"
            :multilingual="showLang && getLang() ? getLang() : ''"
            @changeConfig="changeConfig"
          />
        </div>
        <div :id="'screen-' + mathNum" class="voice-full-screen">
          <Voicefullscreen
            v-if="isFull && resObj"
            :theme-color="bookInfo.theme_color"
            :cur-que="data"
            :sent-list="resObj.sentList"
            :sent-index="0"
            :mp3="data.mp3_list && data.mp3_list[0] ? data.mp3_list[0].url : ''"
            :no-font="noFont"
            :NNPENewWordList="NNPENewWordList"
            :is-full="isFull"
            :config="config"
            :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
            :NpcNewWordMp3="NpcNewWordMp3"
            :attrib="data.unified_attrib"
            @handleWav="handleWav"
            @changePinyin="changePinyins"
            @changeEN="changeENs"
            @exitFullscreen="exitFullscreen"
            @changeIsFull="changeIsFull"
          />
        </div>
      </div>
      <template v-if="data.new_word_list.new_word_list.length > 0">
        <NewWordPreview :new-data="data.new_word_list" />
      </template>
      <template v-if="data.other_word_list.new_word_list.length > 0">
        <NewWordPreview :new-data="data.other_word_list" />
      </template>
      <template v-if="data.notes_list.option.length > 0">
        <NotesPreview :notes-data="data.notes_list" />
      </template>
    </div>
  </div>
</template>

<script>
import { getArticleData } from '@/views/book/courseware/data/dialogueArticle';

import PreviewMixin from '../common/PreviewMixin';

import PhraseModel from './PhraseModelChs.vue';
import NormalModelChs from './NormalModelChs.vue';
import Practice from './Practicechs.vue'; // 语音练习模式
import WordModel from './WordModelChs.vue'; // 语音练习模式
import Voicefullscreen from '../article/Voicefullscreen.vue';
import { getToken } from '@/utils/auth';
import { analysSubmit, GetFileURLMap } from '@/api/app';
import NewWordPreview from '../new_word/NewWordPreview.vue';
import NotesPreview from '../notes/NotesPreview.vue';

export default {
  name: 'DialogueArticlePreview',
  components: {
    NormalModelChs,
    Practice,
    WordModel,
    PhraseModel,
    Voicefullscreen,
    NewWordPreview,
    NotesPreview,
  },
  mixins: [PreviewMixin],
  inject: ['bookInfo'],
  data() {
    return {
      data: getArticleData(),
      showPreview: true, // 全文预览
      showPhrases: false, // 显示单词和短语
      showPractice: false, // 语音练习

      showWord: false, // 取词
      titleFontsize: 20, // 标题字号初始值
      wordFontsize: 16, // 文章内容字号初始值
      bodyLeft: 0,
      bodyWidth: 0,
      noFont: ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '/'],
      config: {
        isShowEN: false,
        isHasEN: false,
        isShowPY: false,
        isHasPY: false,
      },
      userAnswer: {
        normalModel: {
          recordList: [],
        },
        writeModel: {}, // 生词/取词模式
        practiceModel: {}, // 练习模式
        wordModel: {
          recordList: [],
        },
      },
      tokenData: getToken(),
      mathNum: Math.random().toString(36).substr(2),
      isFull: false,
      resObj: null,
      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
      highWords: null,
      highWordsArr: [],
      highIndex: 0,
      newWordList: [],
      NNPEAnnotationList: [],
      NNPENewWordList: [],
      NpcNewWordMp3: [],
      colLength: 1,
      multilingualTextList: {},
    };
  },
  computed: {},
  watch: {
    showLang: {
      handler(val) {
        if (val) {
          this.data.multilingual.forEach((item) => {
            let trans_arr = item.translation.split('\n');
            this.data.detail.forEach((items) => {
              let items_trans_arr = [];
              if (!items.hasOwn('multilingualTextList')) {
                this.$set(items, 'multilingualTextList', {});
              }
              if (items.para) {
                items_trans_arr = trans_arr.splice(0, items.sentences.length);
              }
              this.$set(items.multilingualTextList, item.type, items_trans_arr);
            });
          });
        }
      },
      deep: true,
      immediate: true,
    },
    'data.detail.length': {
      handler(val) {
        if (val) {
          this.handleData();
          let _this = this;
          // if (!this.isJudgingRightWrong) {
          // let userAnswer = JSON.parse(JSON.stringify(_this.userAnswer));
          // _this.$set(this.data, 'Bookanswer', userAnswer);
          // }
          _this.$nextTick(() => {
            _this.bodyLeft = _this.$refs.ArticleViewbody.getBoundingClientRect().left;
          });
          for (let i = 0; i < this.data.detail.length; i++) {
            let enStr = this.data.detail[i].sentencesEn ? this.data.detail[i].sentencesEn.join('') : '';
            if (enStr) {
              this.config.isShowEN = false;
              this.config.isHasEN = true;
            }
            let pinyin = this.handleObj(this.data.detail[i].wordsList);
            if (pinyin && this.isEnable(this.data.property.view_pinyin)) {
              this.config.isShowPY = true;
              this.config.isHasPY = true;
            }
            if (enStr && pinyin) {
              break;
            }
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    changeConfig(obj) {
      this.config[obj] = !this.config[obj];
    },
    changeIsFull() {
      this.isFull = false;
    },
    // 拼音的显示和隐藏
    changePinyins() {
      if (this.config.isHasPY) {
        this.changeConfig('isShowPY');
      }
    },
    // 英文的显示和隐藏
    changeENs() {
      if (this.config.isHasEN) {
        this.changeConfig('isShowEN');
      }
    },
    // 处理字体大小
    handleFontsize(symbol) {
      if (symbol == '+') {
        if (this.wordFontsize < 24) {
          this.titleFontsize += 2;
          this.wordFontsize += 2;
        }
      } else if (symbol == '-') {
        if (this.wordFontsize > 12) {
          this.titleFontsize -= 2;
          this.wordFontsize -= 2;
        }
      }
    },
    // 切换开关
    handleSwitchChange(obj1, obj2, obj3) {
      this[obj1] = false;
      this[obj2] = false;
      this[obj3] = !this[obj3];
      this.showPreview = false;
    },
    handleObj(list) {
      let pinyin = '';
      list.forEach((item) => {
        item.forEach((items) => {
          if (items.pinyin) pinyin += items.pinyin;
        });
      });
      return pinyin;
    },
    submit() {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      analysSubmit({
        app_user_id: '',
        text: this.data.content,
      })
        .then((res) => {
          window.open(`${window.location.origin}/GCLS-TC/#/textanalysis/Result?id=${res.record.id}&type=文本分析`);
          loading.close();
        })
        .catch((res) => {
          loading.close();
        });
    },
    // 语音全屏
    fullScreen() {
      this.pauseAudio();
      this.pauseVideo();
      this.isFull = true;
      this.goFullscreen();
    },
    pauseAudio() {
      let audio = document.getElementsByTagName('audio');
      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1 && audio.forEach) {
        audio.forEach((item) => {
          item.pause();
        });
      }
    },
    pauseVideo() {
      let video = document.getElementsByTagName('video');
      if (video && video.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1 && video.forEach) {
        video.forEach((item) => {
          item.pause();
        });
      }
    },
    goFullscreen() {
      let id = `screen-${this.mathNum}`;
      let element = document.getElementById(id);
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    exitFullscreen() {
      this.isFull = false;
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    handleData() {
      if (this.data.new_word_list) {
        this.$set(this.data.new_word_list, 'unified_attrib', this.data.unified_attrib);
      }
      if (this.data.other_word_list) {
        this.$set(this.data.other_word_list, 'unified_attrib', this.data.unified_attrib);
      }
      if (this.data.notes_list) {
        this.$set(this.data.notes_list, 'unified_attrib', this.data.unified_attrib);
      }
      if (this.showLang) {
        this.data.multilingual.forEach((item) => {
          let trans_arr = item.translation.split('\n');
          this.data.detail.forEach((items) => {
            let items_trans_arr = [];
            if (!items.hasOwn('multilingualTextList')) {
              this.$set(items, 'multilingualTextList', {});
            }
            if (items.para) {
              items_trans_arr = trans_arr.splice(0, items.sentences.length);
            }
            this.$set(items.multilingualTextList, item.type, items_trans_arr);
          });
        });
      }
      let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
      this.$set(this.data, 'Bookanswer', userAnswer);
      if (this.data.mp3_list && this.data.mp3_list.length > 0) {
        GetFileURLMap({ file_id_list: [this.data.mp3_list[0].file_id] }).then(({ url_map }) => {
          this.data.mp3_list[0].url = url_map[this.data.mp3_list[0].file_id];
        });
      }
      this.NNPENewWordList = (
        this.data.new_word_list_other_component_input ? this.data.new_word_list_other_component_input : []
      )
        .concat(this.data.new_word_list.new_word_list)
        .concat(this.data.other_word_list.new_word_list);
      this.NNPEAnnotationList = this.data.notes_list.option;
      let resArr = [];
      let sentArrTotal = [];
      let timeArr = [];
      let curQue = JSON.parse(JSON.stringify(this.data));
      let wordTimeList = curQue.wordTime;
      let dhaspinyin = false; // 每段是否有拼音
      let dhaspinyinArr = [];
      curQue.detail.forEach((dItem, dIndex) => {
        dhaspinyin = false;
        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentArr = [];
          let sentence = dItem.sentences[sIndex];
          sItem.forEach((wItem, wIndex) => {
            let startIndex = wIndex == 0 ? 0 : sentArr[wIndex - 1].startIndex + sentArr[wIndex - 1].chs.length;
            let endIndex = wIndex == 0 ? wItem.chs.length : sentArr[wIndex - 1].endIndex + wItem.chs.length;
            // this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbol(wItem);
            let words = '';
            if (this.newWordList.length > 0) {
              if (!this.highWords) {
                this.findLightWord(wItem, wIndex, sentence, sItem);
                words = this.highWords ? this.highWords.words : '';
              } else if (wIndex > this.highWords.endIndex - 1) {
                this.highWords = null;
                this.findLightWord(wItem, wIndex, sentence, sItem);
                words = this.highWords ? this.highWords.words : '';
              } else {
                words = this.highWords ? this.highWords.words : '';
              }
            }
            let obj = {
              paraIndex: dIndex, // 段落索引
              sentIndex: sIndex, // 在段落中句子索引
              wordIndex: wIndex, // 单词的索引
              pinyin: wItem.pinyin,
              chs: wItem.chs,
              padding: true,
              className: wItem.className,
              isShow: wItem.isShow,
              startIndex,
              endIndex,
              leg: wItem.chs.length,
              timeList: [],
              words,
              config: {
                fontFamily: wItem.fontFamily,
              },
            };
            sentArr.push(obj);
            if (wItem.pinyin) dhaspinyin = true;
          });
          let objs = {
            sentArr,
            enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/\'/g, '’'),
          };
          sentArrTotal.push(sentArr);
          resArr.push(objs);
        });
        timeArr.push(dItem.timeList);
        if (this.isEnable(curQue.property.view_pinyin)) {
          dhaspinyinArr.push(dhaspinyin);
        }
      });
      if (wordTimeList && wordTimeList.length > 0) {
        this.mergeWordTime(sentArrTotal, wordTimeList);
      }
      let timeList = [];
      timeArr.forEach((item) => {
        item.forEach((aItem) => {
          if (timeList.indexOf(aItem) < 0) {
            timeList.push(aItem);
          }
        });
      });
      this.resObj = {
        sentList: resArr,
        timeList,
        dhaspinyinArr,
      };
    },
    mergeWordTime(resArr, wordTimeList) {
      resArr.forEach((item, index) => {
        let wordsResultList = wordTimeList[index].wordsResultList;
        item.forEach((wItem) => {
          let startIndex = wItem.startIndex;
          let endIndex = wItem.endIndex;
          wItem.timeList = wordsResultList.slice(startIndex, endIndex);
        });
      });
    },
    findLightWord(wItem, startIndex, sentence, sItem) {
      let endIndex = 0;
      let words = '';
      this.newWordList.forEach((item) => {
        if (item.length == 1) {
          if (item == wItem.chs && !wItem.banLight) {
            words = wItem.chs;
            endIndex = startIndex + 1;
          }
        } else if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
          let index = null;
          let chsStr = '';
          for (let i = startIndex; i < sItem.length + 1; i++) {
            index = i;
            if (chsStr.length == item.length) {
              break;
            } else {
              chsStr += sItem[i] ? sItem[i].chs : '';
            }
          }
          if (chsStr == item && !wItem.banLight) {
            words = item;
            endIndex = index;
          }
        } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
          words = item;
          endIndex = startIndex + 1;
        }
      });
      if (words) {
        this.highWords = { words, endIndex };
      } else {
        this.highWords = null;
      }
    },
    // 词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.indexOf(wItem.chs) > -1) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    handleWav(list, tmIndex) {
      tmIndex = tmIndex || 0;
      this.data.Bookanswer.practiceModel[tmIndex] = {
        recordList: [],
      };
      this.$set(this.data.Bookanswer.practiceModel[tmIndex], 'recordList', list);
    },
    handleNewword() {
      let NewWordList = [];
      this.NNPENewWordList.forEach((wItem) => {
        // item.forEach((wItem) => {
        if (wItem.new_word) {
          NewWordList.push(wItem.new_word);
        } else if (wItem.detail && wItem.detail.sentence) {
          NewWordList.push(wItem.detail.sentence);
        }
        // });
      });
      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
    },
  },
};
</script>

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

.article-preview {
  @include preview-base;

  .main {
    display: grid;
    row-gap: 24px;
    align-items: center;
  }

  .NPC-ArticleView {
    width: 100%;

    .ArticleView-full {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      font-size: 16px;
      font-weight: bold;
      line-height: 24px;
      color: #000;
      cursor: pointer;

      // background: url('@/assets/full-screen-red.png') left center no-repeat;
      // background-size: 20px 20px;
    }

    .ArticleView-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 24px;
      margin-bottom: 16px;

      .left {
        display: flex;
        align-items: center;
        justify-content: center;

        // padding-left: 24px;
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        cursor: pointer;

        // background: url('@/assets/wbfx-icon.png') left center no-repeat;
        // background-size: 20px;

        img {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }

      .right {
        display: flex;
        gap: 24px;

        a {
          display: flex;
          gap: 4px;
          align-items: center;
          color: rgba(0, 0, 0, 65%);
          cursor: pointer;
        }
      }

      .setting-fontsize {
        display: flex;
        margin-left: 24px;

        a {
          box-sizing: border-box;
          display: block;
          width: 24px;
          height: 24px;
          border: 1px solid rgba(0, 0, 0, 10%);
          border-radius: 4px;
        }

        img {
          width: 100%;
        }

        > img {
          width: 24px;
          margin: 0 8px;
        }
      }
    }

    .ArticleView-body {
      box-sizing: border-box;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-radius: 8px;

      .aduioLine-box {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 10%);

        &-bottom {
          border-top: 1px solid rgba(0, 0, 0, 10%);
          border-bottom: none;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.NPC-ArticleView {
  .ArticleView-header {
    .el-switch {
      margin-left: 24px;
    }

    .el-switch__core {
      width: 44px !important;
      height: 24px;
      border-radius: 20px;
    }

    .el-switch__core::after {
      top: 3px;
      left: 3px;
    }

    .el-switch.is-checked .el-switch__core::after {
      left: 100%;
      margin-left: -19px;
    }

    .el-switch__label {
      color: #000;
    }

    .el-switch__label.is-active {
      color: rgba($color: #000, $alpha: 30%);
    }

    .el-switch__label--left {
      margin-right: 8px;
    }
  }

  .pinyin-16 {
    cursor: pointer;

    // background: url('@/assets/icon/pinyin-16-normal-red.png') no-repeat left top;
    // background-size: 100% 100%;

    // &.disabled {
    //   background: url('@/assets/icon/pinyin-16-disable-Black.png') no-repeat left top;
    //   background-size: 100% 100%;
    // }
  }

  .EN-16 {
    cursor: pointer;

    // background: url('@/assets/icon/EN-16-normal-red.png') no-repeat left top;
    // background-size: 100% 100%;

    // &.disabled {
    //   background: url('@/assets/icon/EN-16-disable-Black.png') no-repeat left top;
    //   background-size: 100% 100%;
    // }
  }
}

.ArticleView-body {
  .aduioLine-box {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 10%);

    &-bottom {
      border-top: 1px solid rgba(0, 0, 0, 10%);
      border-bottom: none;
    }
  }
}
</style>