|
|
@@ -0,0 +1,243 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="EventsInfo">
|
|
|
+ <!-- 回到顶部 -->
|
|
|
+ <div class="topBtn" @click="toTop">
|
|
|
+ <img src="/data/About/Events/toTop.jpg" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="conten">
|
|
|
+ <img class="topBan" :src="`/data/About/Events/${info.id}.jpg`" alt="" />
|
|
|
+ <div class="main">
|
|
|
+ <div class="pos">
|
|
|
+ <span>Your Position: </span>
|
|
|
+ <Router-link to="/Layout/Home">Home></Router-link>
|
|
|
+ <Router-link to="/Layout/Events">Events></Router-link>
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ <div class="left">
|
|
|
+ <h3 v-html="info.h3"></h3>
|
|
|
+ <div class="txt" v-html="info.txt"></div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div>Date:</div>
|
|
|
+ <p>{{ info.i }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="txtMain" v-html="info.main"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部的更多 -->
|
|
|
+ <div class="other">
|
|
|
+ <h2>View Other Events</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in other" :key="index" @click="cutOther(item.id)">
|
|
|
+ <img :src="`/data/About/Events/${item.id}.jpg`" alt="" />
|
|
|
+ <div class="txt" v-html="item.h3"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// <p class='xx'>111111111</p> <p>111111111</p> <img src='/data/About/Events/in/00.png'/>
|
|
|
+import { About } from "../dataAll";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "EventsInfo",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ info: {},
|
|
|
+ other: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 点击其他更多
|
|
|
+ cutOther(id){
|
|
|
+ this.$router.push(`/Layout/EventsInfo/${id}`)
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ // 点击回到顶部
|
|
|
+ toTop() {
|
|
|
+ window.scrollTo({ top: 0, behavior: "smooth" });
|
|
|
+ },
|
|
|
+ // 封装获取id和改变数据的方法
|
|
|
+ getData() {
|
|
|
+ let id = this.$route.params.id;
|
|
|
+ id = Number(id);
|
|
|
+ About.Events.forEach((v) => {
|
|
|
+ if (v.id === id) this.info = v;
|
|
|
+ });
|
|
|
+ // 底部更多模块
|
|
|
+ this.other = About.Events.filter((v) => {
|
|
|
+ return v.id !== id;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.EventsInfo {
|
|
|
+ .topBtn {
|
|
|
+ margin-left: 450px;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 100px;
|
|
|
+ z-index: 9999;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .conten {
|
|
|
+ clear: both;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 240px;
|
|
|
+ .topBan {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 40px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 1180px;
|
|
|
+ height: 450px;
|
|
|
+ object-fit: cover;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 900px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .pos {
|
|
|
+ font-size: 12px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 5px 0 5px 30px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .left {
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ width: 606px;
|
|
|
+ & > h3 {
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: helvetica;
|
|
|
+ font-size: 36px;
|
|
|
+ color: #000;
|
|
|
+ line-height: 36px;
|
|
|
+ padding: 40px 30px 15px 30px;
|
|
|
+ /deep/ span {
|
|
|
+ color: #c20e11;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-family: Georgia;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 0 30px 20px 30px;
|
|
|
+ /deep/ p {
|
|
|
+ width: 350px;
|
|
|
+ text-align: left;
|
|
|
+ color: #000;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ background-color: #353535;
|
|
|
+ width: 294px;
|
|
|
+ font-family: Georgia;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 40px 20px;
|
|
|
+ & > div {
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .txtMain {
|
|
|
+ background-color: #fff;
|
|
|
+ font-family: arial, helvetica, sans-serif;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ line-height: 2em;
|
|
|
+ text-align: justify;
|
|
|
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
|
|
|
+ clear: both;
|
|
|
+ padding: 40px 30px;
|
|
|
+ /deep/ p {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ /deep/ .xx {
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ /deep/img {
|
|
|
+ display: block;
|
|
|
+ margin: 0px auto 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ width: 900px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 60px auto;
|
|
|
+ & > h2 {
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: Helvetica;
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 54px;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 5px solid #bb1b21;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ & > ul {
|
|
|
+ width: 930px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ & > li {
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 435px;
|
|
|
+ margin-right: 30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 210px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: Helvetica;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #000;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 30px 20px 20px 20px;
|
|
|
+ /deep/ span {
|
|
|
+ color: rgb(255, 0, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
