|
|
@@ -1,417 +1,417 @@
|
|
|
-<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: 2023,
|
|
|
- dateData: [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%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+<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: 2024,
|
|
|
+ dateData: [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>
|
chenlei
