zhuishuyun_ios_wap_front/src/view/reader.vue

<template>
  <div
    ref="reader-wrap"
    :class="[
      'reader',
      { 'reader-fixed': five_template && !five_template_clicked }
    ]"
  >
    <x-reader
      ref="reader"
      :class="{
        'x-reader--subscribe': weakSubscribe,
        'x-reader--subscribe__qrcode':
          (subscribeQRcode && !subscribeQRcodeHorizontal) || active
      }"
      :text="text"
      :ad="showAdStatus"
      :adframe="showAdIframe"
      :gift="true"
      :shelf="is_on"
      :showFans="showFans"
      @route="go"
      @addShelf="addShelf"
      @next="next"
      @prev="prev"
      @direction="direction"
      @horizontal-mounted="horizontalMounted"
      @closeBanner="closeBanner"
      @vertical-mounted="verticalMounted"
    >
      <!-- 底部标题 -->
      <template v-if="text.push_title && text.push_title.length">
        <v-touch slot="ufooter" class="title_list">
          <div class="title">猜你喜欢</div>
          <div class="title-list-box">
            <v-touch
              class="title-item"
              v-for="(t, i) in text.push_title"
              :key="i"
              @tap="jumpNovel(t.link)"
            >
              <p>{{ t.title }}</p>
              <img :src="t.img" :alt="t.title" />
            </v-touch>
          </div>
        </v-touch>
      </template>

      <!-- 活动添加 -->
      <template v-if="banners.length">
        <mt-swipe
          slot="ufooter"
          v-show="!loading"
          class="reader-footer__banners"
        >
          <mt-swipe-item v-for="(b, index) in banners" :key="index">
            <v-touch @tap="activeEv(index)">
              <img v-lazy="b.img" alt="" />
            </v-touch>
          </mt-swipe-item>
        </mt-swipe>
      </template>

      <!--  <template>
        <v-touch class="click-toCollection" @tap="showCollectionWrap = true"
          >&gt;&gt;点击此处，收藏本书&lt;&lt;</v-touch
        >
      </template> -->

      <!-- 引导文字链 -->
      <template v-if="bannerSubText.title">
        <v-touch class="click-toCollection" @tap="bannerSubEv">{{
          bannerSubText.title
        }}</v-touch>
      </template>
    </x-reader>
    <div class="reader-loading" v-show="loading">
      <mt-spinner
        class="reader-loading-icon"
        type="fading-circle"
        color="#32a1ff"
      ></mt-spinner>
    </div>
    <div class="reader-guide" v-if="new_reader && !hideGuide">
      <transition name="fade" @after-leave="new_reader_guide2 = true">
        <div
          class="reader-guide-1"
          v-if="new_reader_guide1"
          @click="new_reader_guide1 = false"
        >
          <div class="reader-guide-1-1"></div>
          <div class="reader-guide-1-2"></div>
          <div class="reader-guide-1-3"></div>
          <div class="reader-guide-1-4">
            <img
              src="https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/static/img/uppage.png"
            />
          </div>
          <div class="reader-guide-1-5">
            <img
              src="https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/static/img/readermiddel.png"
            />
          </div>
          <div class="reader-guide-1-6">
            <img
              src="https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/static/img/downpage.png"
            />
          </div>
          <div class="reader-guide-1-7"></div>
          <div class="reader-guide-1-8"></div>
          <div class="reader-guide-1-9"></div>
        </div>
      </transition>
      <transition name="fade" @after-leave="new_reader = false">
        <div
          v-if="new_reader_guide2"
          @click="new_reader_guide2 = false"
          class="reader-guide-2"
        >
          <img
            src="https://zhuishuyun.oss-cn-hangzhou.aliyuncs.com/static/img/readremind.png"
          />
        </div>
      </transition>
    </div>
    <div class="add_desk" @touchmove.prevent v-if="addDesktop && !isStandalone">
      <div class="addgif">
        <template v-if="modes == 'B' ">
          <div class="addpng">
            <img src="../../src/assets/addtips.png" width="100%" />
          </div>
          <div class="add-gif">
            <img src="../../src/assets/adddeskot.gif" />
          </div>
        </template>
        <template v-else>
          <div class="popimg">
            <img src="../assets/popimg.png" width="100%" />
          </div>
        </template>
      </div>
    </div>
    <div
      class="share"
      @touchmove.prevent
      v-show="isshowshare"
      @click="isshowshare = !isshowshare"
    >
      <img src="../assets/分享.png" />
    </div>

    <!-- 签到提示入口 -->
    <!-- <template v-if="showSignNoticeWrap">
      <div class="sign-notice__wrap" @click="showSignNoticeWrap = false" @touchmove.prevent>
        <img src="../assets/sign_notice__wrap.png"
            alt="">
      </div>
    </template> -->
  </div>
</template>
<script>
import {
  Reader,
  BookCity,
  BookStock,
  Rank,
  BookDetail,
  BookCatalog,
  BookRecommend,
  Pay,
  Subscribe,
  BookShare,
  BookRecent
} from "./namespace.js";
import Vue from 'vue';
import {
  SingActive,
  Book1,
  Book2,
  Book3,
  Book4,
  Chapter1,
  Chapter2,
  WeakSubscribe,
  Sign
} from "../components/prompt";
import { popupGift } from "../components/popup";
import {
  getContent,
  addShelf,
  getDetail,
  getError,
  subscribeByRMB,
  subscribeByBalance,
  getweakSubscribeQR,
  chapterComment,
  getChapterComment,
  getGiftList,
  sendGift,
  getSendGiftRecord,
  getRecordShare,
  getWechatJsConfig,
  recordAdClickStatus,
  getReaderAdBanner,
  getRecentReader,
  getUserInfo,
  setUserMode,
  changeAddMode
} from "../api";
import {
  clearStorageChapter,
  loadIframeAsync,
  removeIframe,
  crmBannerRandom,
  getRandomCode,
  clipboard,
  needToCopy,
  recordCode
} from "../util";
import XReader from "../components/reader";
import bus from "../components/reader/bus.js";
import goLogin from "../../src/components/gologin";
export default {
  name: Reader.name,
  components: {
    "x-reader": XReader
  },
  data() {
    return {
      showFans: false,
      readerOptions: bus.preset,
      text: {},
      is_on: true,
      loading: true,
      new_reader: false,
      new_reader_guide1: false,
      new_reader_guide2: false,
      active: window.options.is_show_activity,
      active_img: window.options.activity_img,
      active_horizontal: false,
      weakSubscribe: false,
      weakSubscribeHorizontal: false,
      weakSubscribeHorizontalNum: 0,
      weakSubscribeStyle: {},
      firstReader: false,
      modes: "A",
      weakSubscribeText: [
        "【更多精彩内容  请点击阅读】",
        "【点击阅读海量小说】"
      ],
      subscribeQRcode: true,
      subscribeQRcodeHorizontal: true,
      isChannel123: window.options.distribution_channel_id === 123,
      subscribeQrcodeImg: window.options.special_bottom_sub_banner,
      chooseTap: "",
      canTap: true,
      hideGuide: window.options.hidden_reader_bootstrap,
      showComment: false,
      showGift: false,
      isshowshare: false,
      bookdetail: {},
      href: "",
      showAdStatus: false,
      showAdIframe: false,
      canBeClickToNext: true,
      isFree: require("../assets/to_free.png"),
      isOrder: require("../assets/to_pay.png"),
      freeTimes: 0,
      randomBannerIndex: 0,
      guidepersonalaccount: window.options.guidepersonalaccount,
      banners: window.options.banners,
      showSignNoticeWrap: false,
      collectAndroidBg:
        "//zhuishuyun.oss-cn-hangzhou.aliyuncs.com/h5/android_collect.png",
      collectIOSBg:
        "//zhuishuyun.oss-cn-hangzhou.aliyuncs.com/h5/iphone_collect.png",
      bannerSubText: {},
      five_template: "",
      five_template_clicked: true,
      copyVal: "",
      uuids: "",
      addDesktop: false,
      yun: 0,
      isStandalone:
        Number(localStorage.getItem("userMode")) || window.navigator.standalone
    };
  },
  computed: {
    chapterText() {
      return this.text.content;
    }
  },

  methods: {
    closeBanner() {
      let readQuery = localStorage.getItem("readQuery");
      if (readQuery) {
        readQuery = JSON.parse(readQuery);
        readQuery.isClose = true;
        localStorage.setItem("readQuery", JSON.stringify(readQuery));
      }
      this.showFans = false;
    },
    share() {
      /* this.isshowshare = !this.isshowshare;
      getRecordShare(this.$route.query.bid, this.$route.query.cid).then(r => {
      }); */
    },
    activeEv(index) {
      window.location.href = `${
        this.banners[index].jump_url
      }&redirect_url=${encodeURIComponent(window.location.href)}`;
    },
    bannerSubEv() {
      window.location.href = `${
        this.bannerSubText.jump_url
      }&redirect_url=${encodeURIComponent(window.location.href)}`;
    },
    getUuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    go(name) {
      switch (name) {
        case "back":
          history.back(-1);
          break;
        case "home":
          this.$router.push({
            name: BookCity.route,
            query: {
              uuids: this.uuids
            }
          });
          break;
        case "category":
          this.$router.push({
            name: BookStock.route,
            query: {
              uuids: this.uuids,
              sendid: this.$route.query.sendid
            }
          });
          break;
        case "rank":
          this.$router.push({
            name: Rank.route,
            query: {
              uuids: this.uuids
            }
          });
          break;
        case "detail":
          this.$router.push({
            name: BookDetail.name,
            query: { id: this.text.bid, uuids: this.uuids }
          });
          break;
        case "catalog":
          this.$router.push({
            name: BookCatalog.name,
            query: this.text.bid
              ? {
                  id: this.text.bid,
                  sequence: this.text.sequence,
                  uuids: this.uuids,
                  sendid: this.$route.query.sendid,
                  yun: this.yun
                }
              : {
                  id: this.$route.query.bid,
                  uuids: this.uuids,
                  sendid: this.$route.query.sendid,
                  yun: this.yun
                }
          });
          break;
      }
    },
    addShelf() {
      addShelf(this.text.bid).then(r => {
        this.is_on = true;
        this.$Toast("加入书架成功");
      });
    },
    next() {
      // 静默复制
      if (this.text.next_jump) {
        location.href = this.text.next_jump_url;
      } else {
        if (this.text.next_cid) {
          this.$router.replace({
            path: `/reader/${this.getUuid()}/`,
            query: {
              bid: this.text.bid,
              cid: this.text.next_cid,
              uuids: this.uuids,
              sendid:
                this.$route.query.sendid || localStorage.getItem("sendid"),
              yun: this.yun,
              last_bid: this.text.bid,
              last_cid: this.text.prev_cid,
              from_detail_catalog:3
            }
          });
        } else if (this.text.next_cid === 0) {
          this.$router.push({
            name: BookRecommend.name,
            query: { bid: this.$route.query.bid, uuids: this.uuids }
          });
        } else {
          this.$Toast("系统错误");
        }
      }
    },
    prev() {
      if (this.text.prev_cid) {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: this.text.bid,
            cid: this.text.prev_cid,
            uuids: this.uuids,
            sendid: this.$route.query.sendid || localStorage.getItem("sendid"),
            yun: this.yun,
            from_detail_catalog:3
          },
          params: {
            jump: -1
          }
        });
      } else {
        this.$Toast("第一章！");
      }
    },
    direction(val) {
      if (val === "horizontal" && !localStorage.getItem("old_reader")) {
        this.bus.$emit("menu");
        localStorage.setItem("old_reader", "true");
        this.new_reader = true;
        this.$nextTick(() => {
          this.new_reader_guide1 = true;
        });
      }
      this.weakSubscribeStyle = {};
    },
    subscribe({ bid, chapter_id: cid }) {
      if (this.$route.query.bid == bid && this.$route.query.cid == cid) {
        this.getContent(this.$route.query.bid, this.$route.query.cid)
          .then(r => {
            this.text = r;
            if (this.text.force_add_desk_type) {
              if (!this.addDesktop) this.addDesktop = true;
            }
          })
          .catch(r => {
            this.text = {};
          });
      } else {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: bid,
            cid: cid,
            uuids: this.uuids
          }
        });
      }
    },
    getContent(bid, cid, next, from, code) {
      //由于beforeRouteUpdate钩子函数会调用getContent，所以路由或者页面跳转不应该在在此函数，不然会造beforeRouteUpdate钩子函数的next不被调用
      /*
        错误处理
        10012       未关注
        10014       全本订阅余额不足（rmb）
        10015       章订余额不足（充值）
        10016       购买章节(书币)
        10017       购买图书（书币）
        10019       全本订阅余额不足（充值）
        10023       未关注 (跳转渠道接诶)
        ----- 以上是弹窗  -------
        10020       全本订阅余额不足,直接进入充值页
        10021       章节订阅余额不足,直接进入充值页
        10022       进入版权站
        */
      this.loading = true;
      let adStatus = 0;
      return getContent(bid, cid, adStatus, from, code)
        .catch(r => {
          this.loading = false;
          const data = r.data.data;
          const sequence = this.$route.query.sequence
          const last_bid = this.$route.query.bid
          const last_cid = this.$route.query.cid
          const from_detail_catalog = this.$route.query.from_detail_catalog
          const sendid = this.$route.query.sendid
          const yun = this.$route.query.yun
          switch (r.data.code) {
            case 10012:
              if (this.is_update) {
                r.url = data.src;
              } else {
                // this.$router.push({
                //   name: Subscribe.name,
                //   query: { src: data.src, head_img: data.head_img }
                // });
                location.replace(data.src);
              }
              break;
            case 10014:
              Book2(data)
                .then(r => {
                  subscribeByRMB(data);
                })
                .catch(e => {
                  if (e === "close") {
                    if (!localStorage.getItem("rc")) {
                      // this.$router.back();
                      history.back();
                    }
                  }
                });
              break;
            case 10015:
              Chapter1(data).then(r => {
                this.$router.push({ name: Pay.name, query: data, sequence, last_bid, last_cid, sendid, yun, from_detail_catalog });
              });
              break;
            case 10016:
              Chapter2(data).then(r => {
                this.loading = true;
                subscribeByBalance(
                  data.book_id,
                  data.chapter_id,
                  r.checked
                ).then(r => {
                  this.subscribe(r);
                });
              });
              break;
            case 10017:
              Book4(data)
                .then(r => {
                  this.loading = true;
                  subscribeByBalance(data.book_id, data.chapter_id).then(r => {
                    this.subscribe(r);
                  });
                })
                .catch(e => {
                  if (!localStorage.getItem("rc")) {
                    // this.$router.back();
                    history.back();
                  }
                });
              break;
            case 10019:
              Book3(r.data.data)
                .then(r => {
                  this.$router.push({ name: Pay.name, query: data, sequence, last_bid, last_cid, sendid, yun, from_detail_catalog });
                })
                .catch(e => {
                  if (e === "close") {
                    if (!localStorage.getItem("rc")) {
                      // this.$router.back();
                      history.back();
                    }
                  }
                });
              break;
            case 10020:
            case 10021:
              this.$router.push({
                name: Pay.name,
                query: { ...data, code: r.data.code, sequence, last_bid, last_cid, sendid, yun, from_detail_catalog }
              });
              break;
            case 10022:
              location.replace(
                `${data.url}&yun=${this.yun}&isreplace=${
                  window.navigator.standalone ? 1 : 0
                }`
              );
              break;
            case 10023:
              location.assign(data.url);
              break;
            default:
              break;
          }
          return Promise.reject(r);
        })
        .then(r => {
          this.subscribeQRcode = r.is_had_subscribe;
          this.loading = false;
          this.weakSubscribe = !!r.is_show_subscribe_link;
          this.canTap = !!r.chapter_comment;
          this.chooseTap = r.chapter_comment;
          this.recordReadChapter();
          //是否显示个人banner

          let readQuery = localStorage.getItem("readQuery");
          if (readQuery) {
            readQuery = JSON.parse(readQuery);
            let cur = new Date().toDateString();
            let time = new Date(readQuery.lastReadTime).toDateString();
            if (cur != time) {
              localStorage.removeItem("readTemp");
              readQuery.lastReadTime = new Date();
              readQuery.isClose = false;
              localStorage.setItem("readQuery", JSON.stringify(readQuery));
            }
          } else {
            let data = {
              lastReadTime: new Date(),
              firstReadTime: new Date(),
              isClose: false
            };
            localStorage.setItem("readQuery", JSON.stringify(data));
          }
          let readerTemp = localStorage.getItem("readTemp");
          if (readerTemp) {
            let temp = JSON.parse(readerTemp);
            let same = false;
            let allweek = false;
            temp.map(item => {
              if (item.bid == bid && item.cid == cid) same = true;
            });
            if (!same) {
              temp.push({ bid: bid, cid: cid });
              localStorage.setItem("readTemp", JSON.stringify(temp));
            }
            if (readQuery) {
              let firstTime = new Date(
                JSON.parse(localStorage.getItem("readQuery")).firstReadTime
              );
              let firstTimeZero = new Date(firstTime.toLocaleDateString());
              if (Math.abs(firstTimeZero - new Date()) < 7 * 24 * 3600 * 1000) {
                allweek = false;
              } else {
                allweek = true;
              }
              if (
                temp.length >= 4 &&
                temp.length <= 22 &&
                temp.length % 2 == 0 &&
                !readQuery.isClose &&
                !allweek
              ) {
                this.showFans = true;
              } else {
                this.showFans = false;
              }
            }
          } else {
            let temp = [
              { bid: this.$route.query.bid, cid: this.$route.query.cid }
            ];
            localStorage.setItem("readTemp", JSON.stringify(temp));
          }
          return r;
        });
    },
    weakSubscribeTextRandom() {
      return this.weakSubscribeText[Math.floor(Math.random() * 3)];
    },
    weakSubscribeEv() {
      WeakSubscribe();
    },

    horizontalMounted(page) {
      if (this.weakSubscribe) {
        this.weakSubscribeHorizontal = true;
        this.weakSubscribeStyle = {
          width: page.scrollWidth + "px"
        };
        this.weakSubscribeHorizontalNum = page.total;
      }
      if (this.subscribeQRcode) this.subscribeQRcodeHorizontal = true;
      if (this.active) this.active_horizontal = true;
    },
    verticalMounted() {
      this.weakSubscribeHorizontal = false;
      this.subscribeQRcodeHorizontal = false;
      this.active_horizontal = false;
    },

    getChapterComment(bid, cid) {
      return getChapterComment(bid, cid);
    },

    jumpNovel(url) {
      let options = {
        bg: this.readerOptions.bg,
        font: this.readerOptions.font.default,
        night: this.readerOptions.night
      };
      location.href = `${url}&bg=${options.bg}&font=${options.font}&night=${options.night}`;
    },
    justifyRouter(router) {
      if (!router.query.bid) {
        this.$router.replace({ path: "/", query: { uuids: this.uuids } });
        return false;
      }
      if (typeof router.query.bid !== "string") {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: router.query.bid[0],
            cid: router.query.cid,
            uuids: this.uuids
          }
        });
        return false;
      } else if (router.query.bid.split(",").length > 1) {
        this.$router.replace({
          name: Reader.name,
          query: {
            bid: router.query.bid.split(",")[0],
            cid: router.query.cid,
            uuids: this.uuids,
            yun: this.yun
          }
        });
        return false;
      }
      return true;
    },
    isIphone() {
      const u = navigator.userAgent;
      // return u.indexOf("iPhone") !== -1;
      return true;
    },

    recordReadChapter() {
      localStorage.setItem("rc", this.$route.query.cid);
    },
    clearReadChapter() {
      localStorage.removeItem("rc");
    },
    changeFirst(val) {
      this.firstReader = val;
    },
    replaceURLAfterChange(cid, newCid) {
      console.log("cid", cid);
      console.log("newCid", newCid);
      let url = window.location.href.replace(`cid=${cid}`, `cid=${newCid}`);
      console.log("replace url", url);
      window.history.replaceState({}, "", url);
    }
  },
  async created() {
    let uuid = localStorage.getItem("uuids");
    let { yun, bid, cid, uuids, sendid = 0, isreplace = 0 } = this.$route.query;
    if (sendid){
      localStorage.setItem("sendid", this.$route.query.sendid);
      sessionStorage.setItem("sendid", this.$route.query.sendid);
       Vue.prototype.sendid = sendid;
    } 
    this.uuids = uuids || uuid;
    if (yun) this.yun = yun;

    let data = await getUserInfo();
    if (!data.bind_phone && window.navigator.standalone) {
      goLogin();
    }

    const token = localStorage.getItem("token");
    if (token) {
      setUserMode(
        Number(window.navigator.standalone) || 0,
        sendid
      ).then(res => {});
    }

    if (
      yun == "1" &&
      window.firstName == this.$route.name &&
      window.navigator.standalone &&
      isreplace != "1"
    ) {
      let sare = await getRecentReader();

      if (sare.bid && sare.cid != cid) {
        this.$router.replace(
          `/reader?bid=${sare.bid}&cid=${sare.cid}&yun=${yun}&uuids=${this.uuids}&sendid=${sendid}`
        );
        return;
      }
    }
    if (!this.justifyRouter(this.$route)) return;
    this.href = window.location.href;
    // 获取书籍详情

    //获取AB测试
    let modes = await changeAddMode();
    this.modes = modes.type;

    getDetail(this.$route.query.bid).then(m => {
      this.bookdetail = m;
      this.is_on = !!m.is_on_user_shelf;
    });

    // 获取章节内容
    let isFromCatalog = !!~window.prevPage.indexOf("/catalog");
    let page_from = isFromCatalog ? "chapter_dir" : "";

    this.getContent(this.$route.query.bid, this.$route.query.cid, "", page_from)
      .then(r => {
        this.text = r;
        this.isFromSubscribe = false;
        if (this.text.force_add_desk_type) {
          if (!this.addDesktop) this.addDesktop = true;
        }
        if (r.sign_status) {
          this.showSignNoticeWrap = true;
        }
      })
      .catch(r => {
        console.log("get content err", r);
        this.text = {
          content: r.msg
        };
      });
  },
  async beforeRouteEnter(to, from, next) {
    if (from.name !== BookCatalog.name && from.name !== Subscribe.name) {
      // 清除所有和章节相关的缓存
      clearStorageChapter();
    }
    if (!from.name) {
      next(vm => {
        vm.changeFirst(true);
      });
    }
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // * 移除iframe
    removeIframe();

    if (!this.justifyRouter(to)) return;
    this.is_update = true;
    localStorage.removeItem("is_views");
    this.getContent(
      to.query.bid,
      to.query.cid,
      "",
      "chapter_info",
      this.copyVal
    )
      .then(r => {
        // * 重新加载iframe
        loadIframeAsync();
        r.jump = to.params.jump;
        this.text = r;
        if (this.text.force_add_desk_type) {
          if (!this.addDesktop) this.addDesktop = true;
        }
        this.$nextTick(() => {
          this.$nextTick(() => {
            delete this.text.jump;
          });
        });
        next();
      })
      .catch(r => {
        next(false);
        if (r.url) {
          location.assign(r.url);
          // location.href = r.url
        }
        // if (r.url) {
        //   let a = document.createElement('a')
        //   a.href = r.url
        //   a.click()
        // }
      });
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== BookCatalog.name && to.name !== Subscribe.name) {
      // 清除所有和章节相关的缓存
      clearStorageChapter();
    }
    this.clearReadChapter();
    localStorage.removeItem("is_views");
    // * 离开阅读器后移除iframe
    removeIframe();
    next();
  },
  beforeMount() {
    // 重置lazyload设置
    this.$Lazyload.config({
      preLoad: 1.3,
      loading: "",
      error: ""
    });
  },
  mounted() {
    this.bus = this.$refs.reader.getBus();
  },
  destroyed() {
    document.title = window.options.title;
  }
};
</script>
<style lang="scss">
.reader-active {
  font-size: 17px;
  color: #ff3b00;
  text-align: center;
  margin-top: 0.8em;
}

.x-reader--subscribe {
  .weak-subscribe {
    text-align: center;
    font-size: 17px;
    color: #2572ff;
  }
  .x-reader-text--horizontal {
    .x-reader-text-wrap {
      padding-bottom: 1.3rem;
    }
    .weak-subscribe-wrap--horizontal {
      position: fixed;
      bottom: 0.7rem;
      left: 0;
    }
    .weak-subscribe--horizontal {
      width: 7.5rem;
      float: left;
    }
  }
  .weak-subscribe--vertical {
    margin-top: 0.8em;
  }
}

.reader .qr_img {
  height: 4rem;
  width: 4rem;
  padding: 1rem;
  display: block;
  margin: 0 auto;
}

.x-reader--subscribe__qrcode {
  .x-reader-text--vertical {
    padding-bottom: 0;
  }
}

.subscribe-qrcode {
  font-size: 0;

  img {
    width: 100%;
    margin-top: 0.4rem;
  }
}

.active_img {
  font-size: 0;
  margin: 0.3rem 0.24rem 0.2rem;

  img {
    width: 100%;
  }
}

.click-box {
  margin: 0.24rem 0.24rem 0;
  padding: 0.24rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #dadada;

  .click-box__item {
    flex: 1;
    text-align: center;
    font-size: 0.28rem;
    color: #333;

    &:not(:last-child) {
      border-right: 1px solid #333;
    }

    span {
      width: 0.36rem;
      height: 0.36rem;
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.2rem;
      vertical-align: sub;
    }

    .tap-icon {
      background: url("~@/assets/tap.png") center / contain no-repeat;
    }

    .zan-icon {
      background: url("~@/assets/zan.png") center / contain no-repeat;
    }
  }

  .click-box__item.cur {
    .tap-icon {
      background: url("~@/assets/tap-check.png") center / contain no-repeat;
    }

    .zan-icon {
      background: url("~@/assets/zan-check.png") center / contain no-repeat;
    }
  }
}
</style>

<style lang="scss" scoped>
.share {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  text-align: center;
  padding: 0 0.2rem;
  img {
    width: 100%;
  }
}
.send-gift {
  display: flex;
  justify-content: flex-end;
  font-size: 0.28rem;
  margin: 0.3rem 0.24rem;

  .send-gift__btn {
    padding: 0.05rem 0.3rem;
    border: 1px solid #dca46a;
    border-radius: 0.3rem;
    background: #ecddd3;
    color: #826b50;
  }
}

.title_list {
  margin: 1rem 0.24rem 0.1rem;
  background: rgba(#fff, 0.4);

  .title {
    font-size: 0.36rem;
    font-weight: bold;
    margin: 0 0.24rem;
    padding: 0.3rem 0;
    color: #333;
    border-bottom: 1px solid rgba(#000, 0.04);
  }

  .title-list-box {
    margin: 0 0.24rem;

    .title-item {
      padding: 0.3rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.3rem;
      color: #666;
      cursor: pointer;

      img {
        width: 30%;
        margin-left: 0.3rem;
        border-radius: 2px;
      }

      &:not(:last-child) {
        border-bottom: 1px solid rgba(#000, 0.04);
      }
    }
  }
}

.reader {
  position: relative;
}

.ad-status {
  position: fixed;
  width: 1.14rem;
  height: 1.14rem;
  right: 0.24rem;
  bottom: 50%;
  font-size: 0;
  z-index: 9999;

  &.with-no-activity {
    bottom: 50%;
  }

  img {
    width: 100%;
  }
}

.to-share__entry {
  text-align: right;
  margin: 0 0.24rem;
  font-size: 0;

  img {
    width: 1.8rem;
  }
}

.weak-subscribe {
  text-align: center;
  font-size: 17px;
  color: #2572ff;
}

.weak-subscribe--vertical {
  margin-top: 0.8em;
}

.coupon-entry__wrap {
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0;
  border-radius: 50%;
  position: fixed;
  bottom: 30%;
  right: 2%;

  img {
    width: 100%;
  }
}

.reader-footer__banners {
  height: 1.9rem;
  font-size: 0;
  margin: 0.3rem 0.24rem 0.2rem;

  &:not(:first-child) {
    margin-top: 0;
  }

  img {
    width: 100%;
    height: 1.9rem;
  }
}

.sign-notice__wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba($color: #000000, $alpha: 0.8);
  z-index: 999;

  img {
    width: 100%;
  }
}

.click-toCollection {
  font-size: 0.34rem;
  color: #2572ff;
  text-align: center;
  margin-top: 0.8em;
}

.reader-fixed {
  padding-top: 2.6rem;
  transition: all 0.3s;
}

.add_desk {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  .addgif {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    height: 9.8rem;
    margin: auto;
    .addpng {
      margin-bottom: 0.2rem;
    }
    .add-gif {
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      img {
        width: 100%;
      }
    }
    .add-title {
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      background-color: #ff6920;
      justify-content: space-between;
      > p {
        font-size: 0.4rem;
        color: #fff;
        font-weight: bold;
        text-align: center;
        flex-grow: 1;
      }
      .closed {
        width: 0.36rem;
        height: 0.36rem;
        background: url("../assets/close_pop.png");
        margin-right: 0.3rem;
        background-size: cover;
      }
    }
  }
}

.five_template_entry {
  font-size: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 2.6rem;
  transition: height 0.3s;
  overflow: hidden;

  img {
    width: 100%;
  }

  .close-area {
    position: absolute;
    right: 0.15rem;
    top: 0.12rem;
    width: 0.85rem;
    height: 0.4rem;
  }

  .close-text-area {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.4rem;
    width: 100%;
  }
}
</style>