superstar-dice/_src/components/popup/rules/rules.vue

<template>
  <transition name="msgbox-fade">
    <div class="popup-wrap" v-show="visible">
      <div class="popup-modal"></div>
      <div class="popup-box">
        <div class="popup-hd">
          <div class="popup-hd-title"><em>{{$t(`rules.${showTitle}`)}}</em></div>
          <span class="popup-close" @click="visible = false"></span>
        </div>
        <div class="popup-bd">
          <div class="rules-text">
            <pre>{{$t(`rules.${showContent}`)}}</pre>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

export default {
  name: 'popupRules'
}
</script>

<style lang="scss">
.rules-text{
  padding: px2rem(20);
  background-color: rgba(0, 0, 0, 0.2);
  pre{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
    font-size: px2rem(16);
    line-height: px2rem(28);
    @include wrap;
    @media #{$phone} {
      font-size: px2rem(24);
      line-height: px2rem(44);
    }
  }
}
</style>