|
|
@@ -1,233 +1,235 @@
|
|
|
-<!-- -->
|
|
|
-<template>
|
|
|
- <div class="Director">
|
|
|
- <div
|
|
|
- class="banWrapper" data-aria-viewport-area tabindex="0"
|
|
|
- aria-label aria-description="You've reached the banner area of the From the Director page; this area has one image; please use the tab key to go through the content."
|
|
|
- >
|
|
|
- <div
|
|
|
- class="ban aria-theme-independent"
|
|
|
- tabindex="0"
|
|
|
- aria-label="Image"
|
|
|
- aria-description="From the Director"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- <div class="pos" data-aria-viewport-area tabindex="0"
|
|
|
- aria-label aria-description="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
|
|
|
- >
|
|
|
- <span class="pos1" tabindex="0">Your Position: </span>
|
|
|
- <Router-link to="/Layout/Home"
|
|
|
- replace
|
|
|
- tabindex="0"
|
|
|
- aria-description="Home"
|
|
|
- >
|
|
|
- Home>
|
|
|
- </Router-link>
|
|
|
- <Router-link to="/Layout/About"
|
|
|
- replace
|
|
|
- tabindex="0"
|
|
|
- aria-description="About"
|
|
|
- >
|
|
|
- About>
|
|
|
- </Router-link>
|
|
|
- </div>
|
|
|
- <div class="conten" data-aria-viewport-area tabindex="0"
|
|
|
- aria-label aria-description="You've reached the content area of the From the Director page, please use the tab key to navigate through the content."
|
|
|
- >
|
|
|
- <h1 class="webTitle" tabindex="0">From the Director</h1>
|
|
|
- <div class="peopleBox" >
|
|
|
- <h2 tabindex="0">——<span>Leadership</span>——</h2>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <img src="/data/About/ren.jpg" tabindex="0"
|
|
|
- aria-description="Han Zhanming"
|
|
|
- />
|
|
|
- <strong tabindex="0">Han Zhanming</strong>
|
|
|
- <p tabindex="0">Director of Capital Museum</p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="contentBox" >
|
|
|
- <p tabindex="0">
|
|
|
- The Capital Museum of China is a comprehensive museum affiliated with
|
|
|
- the municipal government of Beijing. It is committed to displaying
|
|
|
- Beijing's 500,000 years of history of human settlement, 3,000 years of
|
|
|
- urban history and 800 years of history as the capital of China. What
|
|
|
- is more, the museum is responsible for the collection, collation,
|
|
|
- restoration, research and preservation of the historical and cultural
|
|
|
- heritage of the Beijing region. Furthermore, it stands as an important
|
|
|
- site of cultural exchange between the new Beijing and the larger
|
|
|
- world.
|
|
|
- </p>
|
|
|
- <p tabindex="0">
|
|
|
- In the Capital Museum's eleven core exhibition rooms lie collections
|
|
|
- of cultural relics comprising more than one million tangible and
|
|
|
- documentary artifacts, including numerous exquisite works of art and
|
|
|
- precious historical objects. These invaluable relics serve as
|
|
|
- collective evidences of the robust creativity and lasting vitality of
|
|
|
- the great and ancient nation of China.
|
|
|
- </p>
|
|
|
- <p tabindex="0">
|
|
|
- The three temporary exhibition rooms of the Capital Museum are often
|
|
|
- used to house first-class exhibits from around China and the world.
|
|
|
- These exhibitions epitomize the city of Beijing's readiness to embrace
|
|
|
- different cultures and peoples from around the globe. At the same
|
|
|
- time, they reflect both the uniformity and the diversity of humanity's
|
|
|
- historical and cultural development.
|
|
|
- </p>
|
|
|
- <p tabindex="0">
|
|
|
- Friends from home and abroad, we invite you all to visit the website
|
|
|
- of the Capital Museum and get to know Beijing and China a little
|
|
|
- better. You are also welcome to visit the Capital Museum to see into
|
|
|
- the past and present of Beijing and China — and perhaps to see into
|
|
|
- yourself a little better as well.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="back_btn"
|
|
|
- @click="$router.push('/Layout/About')"
|
|
|
- @keydown.enter.passive="$router.push('/Layout/About')"
|
|
|
- tabindex="0"
|
|
|
- aria-label="Link"
|
|
|
- >
|
|
|
- Back
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- name: "Director",
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- //这里存放数据
|
|
|
- return {};
|
|
|
- },
|
|
|
- //监听属性 类似于data概念
|
|
|
- computed: {},
|
|
|
- //监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- //方法集合
|
|
|
- methods: {},
|
|
|
- //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
- //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- this.$eventBus.$emit('request-read', `You've reached the From the Director page. This page contains one navigation section, five window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
|
|
|
- },
|
|
|
- beforeCreate() {}, //生命周期 - 创建之前
|
|
|
- beforeMount() {}, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
- updated() {}, //生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
- destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang='less' scoped>
|
|
|
-.Director {
|
|
|
- .ban {
|
|
|
- width: 100%;
|
|
|
- margin: auto;
|
|
|
- background: url("/data/About/banner.jpg") no-repeat center top #000000;
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
- .pos {
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- font-size: 12px;
|
|
|
- margin: 0 auto 10px auto;
|
|
|
- width: 1180px;
|
|
|
- .pos1 {
|
|
|
- color: #c20e11;
|
|
|
- }
|
|
|
- }
|
|
|
- .conten {
|
|
|
- width: 1180px;
|
|
|
- margin: 0 auto;
|
|
|
- .webTitle {
|
|
|
- font-size: 35px;
|
|
|
- line-height: 118px;
|
|
|
- background-color: #fff;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- border-bottom: none;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .peopleBox {
|
|
|
- background-color: #fff;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- border-bottom: none;
|
|
|
- padding-bottom: 40px;
|
|
|
- & > h2 {
|
|
|
- font-size: 22px;
|
|
|
- color: #939393;
|
|
|
- line-height: 118px;
|
|
|
- text-align: center;
|
|
|
- & > span {
|
|
|
- color: #bf2323;
|
|
|
- margin: 0 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- ul {
|
|
|
- overflow: hidden;
|
|
|
- li {
|
|
|
- background-color: #f1f1f1;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- display: inline;
|
|
|
- float: left;
|
|
|
- width: 1098px;
|
|
|
- margin-left: 38px;
|
|
|
- padding: 30px 0 40px 0;
|
|
|
- img {
|
|
|
- border: 5px solid #fff;
|
|
|
- border-radius: 50%;
|
|
|
- display: block;
|
|
|
- width: 170px;
|
|
|
- height: 170px;
|
|
|
- overflow: hidden;
|
|
|
- margin: 0 auto 20px auto;
|
|
|
- }
|
|
|
- strong {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 36px;
|
|
|
- line-height: 200%;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- p {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 18px;
|
|
|
- color: #c20e11;
|
|
|
- line-height: 200%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .contentBox {
|
|
|
- font-size: 18px;
|
|
|
- color: #1f1d1d;
|
|
|
- line-height: 26px;
|
|
|
- background-color: #fff;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- padding: 40px;
|
|
|
- p {
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .back_btn {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
- line-height: 38px;
|
|
|
- background: #f1f1f1;
|
|
|
- border: 1px solid #000;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- width: 160px;
|
|
|
- height: 38px;
|
|
|
- margin: 30px auto;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Director">
|
|
|
+ <div
|
|
|
+ class="banWrapper" data-aria-viewport-area tabindex="0"
|
|
|
+ aria-label aria-description="You've reached the banner area of the From the Director page; this area has one image; please use the tab key to go through the content."
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="ban aria-theme-independent"
|
|
|
+ tabindex="0"
|
|
|
+ aria-label="Image"
|
|
|
+ aria-description="From the Director"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="pos" data-aria-viewport-area tabindex="0"
|
|
|
+ aria-label aria-description="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
|
|
|
+ >
|
|
|
+ <span class="pos1" tabindex="0">Your Position: </span>
|
|
|
+ <Router-link to="/Layout/Home"
|
|
|
+ replace
|
|
|
+ tabindex="0"
|
|
|
+ aria-description="Home"
|
|
|
+ >
|
|
|
+ Home>
|
|
|
+ </Router-link>
|
|
|
+ <Router-link to="/Layout/About"
|
|
|
+ replace
|
|
|
+ tabindex="0"
|
|
|
+ aria-description="About"
|
|
|
+ >
|
|
|
+ About>
|
|
|
+ </Router-link>
|
|
|
+ </div>
|
|
|
+ <div class="conten" data-aria-viewport-area tabindex="0"
|
|
|
+ aria-label aria-description="You've reached the content area of the From the Director page, please use the tab key to navigate through the content."
|
|
|
+ >
|
|
|
+ <h1 class="webTitle" tabindex="0">From the Director</h1>
|
|
|
+ <div class="peopleBox" >
|
|
|
+ <h2 tabindex="0">——<span>Leadership</span>——</h2>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="/data/About/ren.jpg" tabindex="0"
|
|
|
+ aria-description="Guo Jingning"
|
|
|
+ />
|
|
|
+ <strong tabindex="0">Guo Jingning</strong>
|
|
|
+ <p tabindex="0">Director of Capital Museum</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="contentBox" >
|
|
|
+ <p tabindex="0">
|
|
|
+ The Capital Museum of China is a comprehensive museum affiliated with
|
|
|
+ the municipal government of Beijing. It is committed to displaying
|
|
|
+ Beijing's 500,000 years of history of human settlement, 3,000 years of
|
|
|
+ urban history and 800 years of history as the capital of China. What
|
|
|
+ is more, the museum is responsible for the collection, collation,
|
|
|
+ restoration, research and preservation of the historical and cultural
|
|
|
+ heritage of the Beijing region. Furthermore, it stands as an important
|
|
|
+ site of cultural exchange between the new Beijing and the larger
|
|
|
+ world.
|
|
|
+ </p>
|
|
|
+ <p tabindex="0">
|
|
|
+ In the Capital Museum's eleven core exhibition rooms lie collections
|
|
|
+ of cultural relics comprising more than one million tangible and
|
|
|
+ documentary artifacts, including numerous exquisite works of art and
|
|
|
+ precious historical objects. These invaluable relics serve as
|
|
|
+ collective evidences of the robust creativity and lasting vitality of
|
|
|
+ the great and ancient nation of China.
|
|
|
+ </p>
|
|
|
+ <p tabindex="0">
|
|
|
+ The three temporary exhibition rooms of the Capital Museum are often
|
|
|
+ used to house first-class exhibits from around China and the world.
|
|
|
+ These exhibitions epitomize the city of Beijing's readiness to embrace
|
|
|
+ different cultures and peoples from around the globe. At the same
|
|
|
+ time, they reflect both the uniformity and the diversity of humanity's
|
|
|
+ historical and cultural development.
|
|
|
+ </p>
|
|
|
+ <p tabindex="0">
|
|
|
+ Friends from home and abroad, we invite you all to visit the website
|
|
|
+ of the Capital Museum and get to know Beijing and China a little
|
|
|
+ better. You are also welcome to visit the Capital Museum to see into
|
|
|
+ the past and present of Beijing and China — and perhaps to see into
|
|
|
+ yourself a little better as well.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="back_btn"
|
|
|
+ @click="$router.push('/Layout/About')"
|
|
|
+ @keydown.enter.passive="$router.push('/Layout/About')"
|
|
|
+ tabindex="0"
|
|
|
+ aria-label="Link"
|
|
|
+ >
|
|
|
+ Back
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Director",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {},
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ this.$eventBus.$emit('request-read', `You've reached the From the Director page. This page contains one navigation section, five window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.Director {
|
|
|
+ .ban {
|
|
|
+ width: 100%;
|
|
|
+ margin: auto;
|
|
|
+ background: url("/data/About/banner.jpg") no-repeat center top #000000;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+ .pos {
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 auto 10px auto;
|
|
|
+ width: 1180px;
|
|
|
+ .pos1 {
|
|
|
+ color: #c20e11;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conten {
|
|
|
+ width: 1180px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .webTitle {
|
|
|
+ font-size: 35px;
|
|
|
+ line-height: 118px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-bottom: none;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .peopleBox {
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-bottom: none;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ & > h2 {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #939393;
|
|
|
+ line-height: 118px;
|
|
|
+ text-align: center;
|
|
|
+ & > span {
|
|
|
+ color: #bf2323;
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ overflow: hidden;
|
|
|
+ li {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ display: inline;
|
|
|
+ float: left;
|
|
|
+ width: 1098px;
|
|
|
+ margin-left: 38px;
|
|
|
+ padding: 30px 0 40px 0;
|
|
|
+ img {
|
|
|
+ border: 5px solid #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block;
|
|
|
+ width: 170px;
|
|
|
+ height: 170px;
|
|
|
+ overflow: hidden;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: top;
|
|
|
+ margin: 0 auto 20px auto;
|
|
|
+ }
|
|
|
+ strong {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 200%;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #c20e11;
|
|
|
+ line-height: 200%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contentBox {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #1f1d1d;
|
|
|
+ line-height: 26px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ padding: 40px;
|
|
|
+ p {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .back_btn {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 38px;
|
|
|
+ background: #f1f1f1;
|
|
|
+ border: 1px solid #000;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ width: 160px;
|
|
|
+ height: 38px;
|
|
|
+ margin: 30px auto;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
chenlei
