ShouBo/webM/src/views/Publications/Magazines.vue

<template>
  <div class="PuMagazines">
    <!-- 1 -->
    <div class="box1" id="PMbox1">
      <h3 class="biaoji">Introduction of Magazine</h3>
      <p>
        The Museum is a national academic journal for museum studies supervised
        by the Chinese Academy of Sciences, hosted by the Science Press and
        sponsored by the Capital Museum (Beijing), Tianjin Museum and the Hebei
        Museum. The bimonthly journal was launched in February, 2017.
      </p>
      <p>
        The Museum, taking the study of culture and museums, and the spread of
        culture as one of its responsibility in line with the national policy of
        “Integrated Development of Beijing, Tianjin and Hebei Province”, aims to
        provide a platform for exchange and learning among national culture and
        museum circles, relevant professional college teachers and students, and
        the masses of cultural enthusiasts.
      </p>
      <div v-if="box1Show">
        <p>
          The Museum features three sections - thematic exploration, theoretical
          research, and museum practice. It mainly covers museum-related
          academic research results on the gathering and preservation of
          collections, restoration and preservation of collections, collection
          research, exhibition and evaluation, museum education, publication and
          cultural creation, museum management, openness and security, museum
          architecture, museum digitalization and informatization, monographs
          and essays, historical and archeological research related to museums,
          protection and research of ancient buildings and ancient ruins and
          other related research results.
        </p>
        <p>
          The Museum Editorial Board<br />
          Director: Lin Peng<br />
          Deputy Directors: Chen Zhuo, Cheng Caihong, Bai Jie, Shi Qiang<br />
          Editor: Guo Xiaoling<br />
          Executive Editor: Yan Xiangdong<br />
          Associate Editors: Huang Xueyin, Wang Jianping, Xu Lumei
        </p>
        <p>
          The Editorial Department of The Museum<br />
          Directors: Zhang Yana, Zhang Liang<br />
          Editors: Fan Xin, Zhou Zhou, Zhang Ruiyang, Yan Guangyu, Zheng Zuoyi,
          Gong Xiangjun, Li Jiguang, Li Lanfang, Zang Tianjie, Zhao Xiaojiao<br />
          Art Director: Li Meng
        </p>
      </div>
      <div class="more" @click="box1Show = !box1Show">
        {{ box1Show ? "Hide" : "See More" }}
      </div>
    </div>
    <!-- 2 -->
    <div class="box1" id="PMbox2">
      <h3 class="biaoji">Notice to Contributors</h3>
      <p>
        The Museum is a national academic journal on museums published at home
        and abroad. It features three sections - thematic exploration,
        theoretical research, and museum practice - mainly devoted to
        museum-related academic research results: gathering and preservation of
        collections, restoration and preservation of collections, collections
        research, exhibition and evaluation, museum education, propaganda and
        literary creation, museum management, openness and security, museum
        architecture, museum digitalization and informatization, monographs and
        essays, historical and archeological research related to museums,
        protection and research of ancient buildings and ancient ruins and other
        related research results. Domestic and foreign authors are welcome to
        submit articles. In doing so, the following requirements should be
        followed.
      </p>
      <div v-if="box2Show">
        <p>
          1. You should refine and condense your article to 5000-8000 words, and
          attach an abstract of 100-300 words and 3-5 key words in both Chinese
          and English at the head of the article.
        </p>
        <p>
          2. The written form of your article’s words, punctuation, years and
          numbers should be in line with the common criteria established by the
          General Administration of Press and Publication of the PRC.
        </p>
        <p>
          3. Illustrations and tables should be concise and the text in them
          should be modifiable. Please try to provide pictures with clarity of
          over 300 dpi. You should specify the name and source of your
          illustrations and tables.
        </p>
        <p>
          4. Articles must be original and not previously published in any other
          medium. Quotations must be clearly marked or licensed. Authors will be
          held fully responsible for the consequences of any violations of the
          copyright of others.
        </p>
        <p>
          5. For a translated draft, you need to get the copyright beforehand
          and attach relevant explanation. In case of copyright controversies,
          the translators will be held responsible for the consequences.
        </p>
        <p>
          6. Please specify the author's name, organization, mailing address,
          telephone number and e-mail address.
        </p>
        <p>
          7. Please do not send any article that has been submitted to other
          publishers, and please keep the original. If you do not get a
          notification of acceptance within six months, please contact us. Once
          the article is published, we will pay remuneration in accordance with
          our pay standard. Besides, we have the right to use it in digital ways
          such as copy, compilation, distribution and dissemination of the full
          article through an information network. The fee for the changing
          copyright will be paid with the remuneration.
        </p>
        <p>
          All colleagues of cultural and museum circles are welcome to submit
          articles.<br />
          The contact information is as follow,<br />
          Address: No. 16, Donghuangchenggen North Street, Dongcheng District,
          Beijing, 100717<br />
          Editorial Department: +86 (10) 64033878、64034135、64030141（fax）<br />
          Email: bowuyuan@mail.sciencep.com<br />
          Review Platform: http://ees.scichina.com/user/login.action
        </p>
      </div>
      <div class="more" @click="box2Show = !box2Show">
        {{ box2Show ? "Hide" : "See More" }}
      </div>
    </div>
    <!-- 3 -->
    <div class="box2" id="PMbox3">
      <h3 class="biaoji">
        Contact<span>(Contact information of the journal)</span>
      </h3>
      <p class="cur">Tel</p>
      <p>+86 (10) 64033878、64034135、63370450</p>
      <p class="cur">Fax</p>
      <p>+86 (10) 64030141</p>
      <p class="cur">Email</p>
      <p>bowuyuan@mail.sciencep.com</p>
      <p class="cur">Review Platform</p>
      <p>http://ees.scichina.com/user/login.action</p>
      <p class="cur">Address</p>
      <p>No. 16, Donghuangchenggen North Street, Beijing.</p>
      <p class="cur">Postcode</p>
      <p>100717</p>
    </div>
    <!-- 4 -->
    <div class="box3">
      <h2 class="title">Our Magazines</h2>
      <div class="xian">
        <div
          class="xian_son"
          @click="cutAge(item)"
          :class="{ active: item === dateInd }"
          v-for="item in dateData"
          :key="item"
        >
          <div></div>
          <p>{{ item }}</p>
        </div>
      </div>
      <!-- 书籍卡片 -->
      <div class="card">
        <div
          class="row"
          v-for="(item, index) in imgList"
          :key="item.id"
          :style="`left:${index * 15}px;height:${100 - index * 5}%;opacity:${
            1 - index * 0.2 <= 0 ? 0.1 : 1 - index * 0.2
          }; z-index: ${imgList.length - index};`"
        >
          <v-touch
            @click.native="toInfo(info.id)"
            v-if="index === 0"
            tag="img"
            @swipeleft="moveSwiper(1)"
            @swiperight="moveSwiper(0)"
            :src="info.imgUrl"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Magazines } from "./data";
export default {
  name: "PuMagazines",
  components: {},
  data() {
    //这里存放数据
    return {
      box1Show: false,
      box2Show: false,
      dateInd: 2025,
      dateData: [2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017],
      imgList: [],
      info: {},
      infoInd: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 切换年份
    cutAge(age) {
      this.dateInd = age;
      this.imgList = Magazines[age];
      this.infoInd = 0;
      this.info = this.imgList[this.infoInd];

      this.$route.meta.pageAge = age;
    },
    toInfo(id) {
      this.$router.push({
        name: "PublicationsInfo",
        query: { id },
      });
    },
    // 封装一个滑动的方法
    moveSwiper(val) {
      let dom = document.querySelector(".card");
      dom.style.opacity = 0;
      setTimeout(() => {
        if (val === 0) {
          // 右滑减小
          if (this.infoInd === 0) this.infoInd = this.imgList.length - 1;
          else this.infoInd--;
        } else {
          //左滑增加
          if (this.infoInd < this.imgList.length - 1) this.infoInd++;
          else this.infoInd = 0;
        }
        this.info = this.imgList[this.infoInd];
        dom.style.opacity = 1;
        this.$route.meta.pageSize = this.infoInd;
      }, 300);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.$route.meta.pageAge) this.dateInd = this.$route.meta.pageAge;
    if (this.$route.meta.pageSize) {
      this.infoInd = this.$route.meta.pageSize;
      this.$nextTick(() => {
        setTimeout(() => {
          // 获取滚动的总元素
          // 获取元素距离顶部的距离
          let dom = document.querySelector(".box3");
          // 获取主滚动元素
          let domScroll = document.querySelector(".Layout");
          if (dom && domScroll) domScroll.scrollTo({ top: dom.offsetTop - 70 });
        }, 100);
      });
    }

    this.imgList = Magazines[this.dateInd];
    this.info = this.imgList[this.infoInd];
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.PuMagazines {
  padding: 0 20px 40px;
  background: url("../../assets/img/bgPu.png");
  background-size: 100% 100%;
  .more {
    margin: 40px auto;
    width: 117px;
    height: 37px;
    background: url("../../assets/img/Layout/see.png");
    background-size: 100% 100%;
    color: #c1aa7b;
    line-height: 40px;
    text-align: center;
  }
  .biaoji {
    font-size: 22px;
    padding-left: 30px;
    background: url("../../assets/img/Layout/chosen.png") left 4px no-repeat;
    background-size: 22px 18px;
    margin-bottom: 20px;
    margin-top: 20px;
    & > span {
      display: block;
      font-size: 14px;
      font-weight: 400;
      color: #6a6a6a;
    }
  }
  .box1 {
    padding-top: 20px;
    border-bottom: 1px solid #ccc;
    p {
      font-size: 16px;
      line-height: 20px;
      margin-bottom: 15px;
      color: #6a6a6a;
    }
  }
  .box2 {
    padding-top: 20px;
    border-bottom: 1px solid #ccc;
    .cur {
      font-size: 20px;
      color: #bc1c24;
      line-height: 20px;
      margin-bottom: 0;
    }
    & > p {
      color: #6a6a6a;
      font-size: 16px;
      margin-bottom: 15px;
    }
  }
  .box3 {
    padding-top: 40px;
    .title {
      height: 30px;
      line-height: 30px;
      background: url("../../assets/img/Layout/title.png") left center no-repeat;
      background-size: 41px 29px;
      color: #c1aa7b;
      font-size: 22px;
      padding-left: 50px;
      margin-bottom: 20px;
      font-weight: 700;
    }
    .xian {
      margin-top: 40px;
      position: relative;
      width: 100%;
      margin-bottom: 30px;
      display: flex;
      flex-wrap: wrap;

      .xian_son {
        position: relative;
        top: -8px;
        padding: 0 2px 0 14px;
        margin-bottom: 15px;
        &::before {
          content: "";
          position: absolute;
          top: 7px;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: #c1aa7b;
        }
        & > div {
          position: relative;
          z-index: 10;
          width: 17px;
          height: 17px;
          border-radius: 50%;
          border: 2px solid #c1aa7b;
          background-color: #fff;
        }
        & > p {
          color: #1f1f1f;
          font-size: 16px;
          font-weight: 700;
          margin-top: 5px;
          margin-left: -8px;
        }
      }
      .active {
        & > div {
          background-color: #c1aa7b;
        }
        & > p {
          color: #bc1c24;
        }
      }
    }
    .card {
      margin-top: 30px;
      margin-bottom: 20px;
      width: 100%;
      height: 400px;
      position: relative;
      transition: all 0.3s;
      .row {
        border-radius: 8px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 80%;
        height: 400px;
        background: url("../../assets/img/PuBc.jpg");
        background-size: 100% 100%;
        & > img {
          touch-action: pan-y !important;
          border-radius: 8px;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>