|
|
@@ -1,171 +1,175 @@
|
|
|
-<!-- -->
|
|
|
-<template>
|
|
|
- <div class="Publications2" data-aria-viewport-area tabindex="0"
|
|
|
- aria-label aria-description="You've reached the content area of the Exhibition Catalogues page, please use the tab key to go through the content."
|
|
|
- >
|
|
|
- <div class="title" tabindex="-1">
|
|
|
- <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
|
|
|
- <span tabindex="0">{{ $route.meta.nameAll }}</span>
|
|
|
- <div class="xian aria-theme-independent"></div>
|
|
|
- </div>
|
|
|
- <div class="conten" tabindex="-1">
|
|
|
- <img src="/data/Publications/heng.png" alt="" />
|
|
|
- <ul>
|
|
|
- <li v-for="(item, index) in list" :key="index">
|
|
|
- <img :src="`/data/Publications/Exhibition/${index + 1}.jpg`" alt=""
|
|
|
- tabindex="0"
|
|
|
- :aria-description="item.title"
|
|
|
- />
|
|
|
- <div class="show">
|
|
|
- <a :href="item.url" target="_blank" tabindex="0">
|
|
|
- <img src="/data/Publications/Exhibition/href.png" />
|
|
|
- <p>Click here to open the catalogue</p>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
-//例如：import 《组件名称》 from '《组件路径》';
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "Publications2",
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- //这里存放数据
|
|
|
- return {
|
|
|
- list: [
|
|
|
- {
|
|
|
- url: "http://download.china.cn/idc/pdf/A_brief_history_of_Beijing.pdf",
|
|
|
- title: 'A Brief History of Beijing',
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://images.china.cn/images1/en/pdf/Geneva.pdf",
|
|
|
- title: 'Geneva at the Heart of Time – Origin of Swiss Watchmaking Culture',
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://download.china.cn/idc/pdf/Renaissance.pdf",
|
|
|
- title: 'Art, Culture and Daily Life in Renaissance Italy',
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://download.china.cn/idc/pdf/TheMetropolisesandtheProsperities.pdf",
|
|
|
- title: 'The Metropolises and the Prosperities within — Tokyo and Beijing in the 18th Century',
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://images.china.cn/images1/en/pdf/Andes.pdf",
|
|
|
- title: 'ANCIENT CIVILIZATION OF THE ANDES',
|
|
|
- },
|
|
|
- {
|
|
|
- url: "http://images.china.cn/images1/en/pdf/smileofkhmer.pdf",
|
|
|
- title: 'Smile of Khmer: Cambodian Ancient Cultural Relics and Arts',
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- //方法集合
|
|
|
- methods: {},
|
|
|
- //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
- //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- this.$eventBus.$emit('request-read', `You've reached the Exhibition Catalogues page of the Publications section. This page contains one navigation section, six window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
|
|
|
- },
|
|
|
- beforeCreate() {}, //生命周期 - 创建之前
|
|
|
- beforeMount() {}, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
- updated() {}, //生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
- destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang='less' scoped>
|
|
|
-.Publications2 {
|
|
|
- padding-bottom: 30px;
|
|
|
- width: 1187px;
|
|
|
- overflow: hidden;
|
|
|
- zoom: 1;
|
|
|
- margin: 0 auto;
|
|
|
- .title {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- height: 65px;
|
|
|
- align-items: center;
|
|
|
- margin: 0px auto 20px;
|
|
|
- width: 1180px;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- text-indent: 5px;
|
|
|
- border-bottom: 1px solid black;
|
|
|
- .xian {
|
|
|
- position: absolute;
|
|
|
- bottom: -1px;
|
|
|
- left: 0;
|
|
|
- width: 80px;
|
|
|
- height: 2px;
|
|
|
- background-color: #c7000b;
|
|
|
- }
|
|
|
- }
|
|
|
- .conten {
|
|
|
- width: 100%;
|
|
|
- margin-top: 40px;
|
|
|
- & > img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- & > ul {
|
|
|
- & > li {
|
|
|
- width: 281px;
|
|
|
- height: 375px;
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- margin: 7.5px 7.5px;
|
|
|
- overflow: hidden;
|
|
|
- & > img {
|
|
|
- width: 281px;
|
|
|
- height: 375px;
|
|
|
- }
|
|
|
- .show {
|
|
|
- width: 100%;
|
|
|
- height: 0;
|
|
|
- background: #000;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- opacity: 0;
|
|
|
- text-align: center;
|
|
|
- transition: all 0.6s;
|
|
|
- & > a {
|
|
|
- width: 175px;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 20px;
|
|
|
- position: absolute;
|
|
|
- left: 15%;
|
|
|
- top: 50%;
|
|
|
- line-height: 130%;
|
|
|
- & > img {
|
|
|
- position: absolute;
|
|
|
- left: 45%;
|
|
|
- bottom: 70px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &:hover, &:focus-within {
|
|
|
- .show {
|
|
|
- height: 50%;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Publications2" data-aria-viewport-area tabindex="0"
|
|
|
+ aria-label aria-description="You've reached the content area of the Exhibition Catalogues page, please use the tab key to go through the content."
|
|
|
+ >
|
|
|
+ <div class="title" tabindex="-1">
|
|
|
+ <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
|
|
|
+ <span tabindex="0">{{ $route.meta.nameAll }}</span>
|
|
|
+ <div class="xian aria-theme-independent"></div>
|
|
|
+ </div>
|
|
|
+ <div class="conten" tabindex="-1">
|
|
|
+ <img src="/data/Publications/heng.png" alt="" />
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in list" :key="index">
|
|
|
+ <img :src="`/data/Publications/Exhibition/${index + 1}.jpg`" alt=""
|
|
|
+ tabindex="0"
|
|
|
+ :aria-description="item.title"
|
|
|
+ />
|
|
|
+ <div class="show">
|
|
|
+ <a :href="item.url" target="_blank" tabindex="0">
|
|
|
+ <img src="/data/Publications/Exhibition/href.png" />
|
|
|
+ <p>Click here to open the catalogue</p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》 from '《组件路径》';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Publications2",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ url: "http://download.china.cn/idc/pdf/A_brief_history_of_Beijing.pdf",
|
|
|
+ title: 'A Brief History of Beijing',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://images.china.cn/images1/en/pdf/Geneva.pdf",
|
|
|
+ title: 'Geneva at the Heart of Time – Origin of Swiss Watchmaking Culture',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://download.china.cn/idc/pdf/Renaissance.pdf",
|
|
|
+ title: 'Art, Culture and Daily Life in Renaissance Italy',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://download.china.cn/idc/pdf/TheMetropolisesandtheProsperities.pdf",
|
|
|
+ title: 'The Metropolises and the Prosperities within — Tokyo and Beijing in the 18th Century',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://images.china.cn/images1/en/pdf/Andes.pdf",
|
|
|
+ title: 'ANCIENT CIVILIZATION OF THE ANDES',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "http://images.china.cn/images1/en/pdf/smileofkhmer.pdf",
|
|
|
+ title: 'Smile of Khmer: Cambodian Ancient Cultural Relics and Arts',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "/data/Publications/Exhibition/greeks.pdf",
|
|
|
+ title: 'The Greeks: Agamemnon to Alexander the Great',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {},
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ this.$eventBus.$emit('request-read', `You've reached the Exhibition Catalogues page of the Publications section. This page contains one navigation section, six window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.Publications2 {
|
|
|
+ padding-bottom: 30px;
|
|
|
+ width: 1187px;
|
|
|
+ overflow: hidden;
|
|
|
+ zoom: 1;
|
|
|
+ margin: 0 auto;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ height: 65px;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0px auto 20px;
|
|
|
+ width: 1180px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-indent: 5px;
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ .xian {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -1px;
|
|
|
+ left: 0;
|
|
|
+ width: 80px;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #c7000b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conten {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 40px;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ & > ul {
|
|
|
+ & > li {
|
|
|
+ width: 281px;
|
|
|
+ height: 375px;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ margin: 7.5px 7.5px;
|
|
|
+ overflow: hidden;
|
|
|
+ & > img {
|
|
|
+ width: 281px;
|
|
|
+ height: 375px;
|
|
|
+ }
|
|
|
+ .show {
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ background: #000;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ opacity: 0;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.6s;
|
|
|
+ & > a {
|
|
|
+ width: 175px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ position: absolute;
|
|
|
+ left: 15%;
|
|
|
+ top: 50%;
|
|
|
+ line-height: 130%;
|
|
|
+ & > img {
|
|
|
+ position: absolute;
|
|
|
+ left: 45%;
|
|
|
+ bottom: 70px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover, &:focus-within {
|
|
|
+ .show {
|
|
|
+ height: 50%;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
chenlei
