qjkankan_v1.1.1/packages/qjkankan-editor/src/components/notify.vue

<template>
  <div class="upgrade-popup" @click.stop="" v-if="status">
    <h2 class="upgrade-text">
      {{ $i18n.locale == "zh" ? upgradeInfo.title : upgradeInfo.titleEn }}
    </h2>
    <div
      class="upgrade-image"
      :style="`background-image:url(${
        $i18n.locale == 'zh' ? upgradeInfo.imageUrl : upgradeInfo.imageUrlEn
      });`"
    ></div>
    <div class="upgrade-content">
      <div class="info">
        <span class="info-text">{{
          $i18n.t("components.user_guid.upgradeInfo")
        }}</span>
      </div>
      <div
        class="desc"
        style="white-space: pre-wrap"
        v-html="
          $i18n.locale == 'zh'
            ? upgradeInfo.description
            : upgradeInfo.descriptionEn
        "
      ></div>
    </div>
    <div class="upgrade-btn">
      <button class="ui-button primary" @click="close">
        {{ $i18n.t("components.user_guid.set") }}
      </button>

      <button
        class="ui-button submit"
        @click.stop="
          gotoView(
            $i18n.locale == 'zh' ? upgradeInfo.infoUrl : upgradeInfo.infoUrlEn
          )
        "
      >
        {{ $i18n.t("components.user_guid.seeMore") }}
      </button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "notify",
  props: {},
  computed: {
    ...mapGetters({
      upgradeInfo: "notice/content",
      status: "notice/status",
    }),
  },
  methods: {
    gotoView(url) {
      window.open(url);
      close();
    },
    close() {
      this.$store.commit("notice/setStatus", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.upgrade-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(27, 27, 28, 0.9);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
    inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  color: #fff;
  overflow-y: auto;
  z-index: 10000000001;
  .upgrade-text {
    width: 560px;
    font-size: 24px;
    margin-bottom: 40px;
    word-break: break-all;
  }
  .upgrade-image {
    width: 560px;
    height: 320px;
    // background: #f2f2f2;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .upgrade-content {
    width: 560px;
    margin-top: 30px;
    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-text {
        font-size: 16px;
      }
      .info-time {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        .time {
          margin-left: 5px;
        }
      }
    }

    .desc {
      margin-top: 10px;
      word-break: break-all;
      font-size: 14px;
      line-height: 28px;
      max-height: 200px;
      overflow: auto;
    }
  }
  .upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    .ui-button {
      width: 160px;
      height: 40px;
      &:first-child {
        margin-right: 30px;
      }
    }
  }
}
</style>