|
@@ -10,13 +10,12 @@
|
|
<div class="conten">
|
|
<div class="conten">
|
|
<h1 class="cTitle">EVENTS</h1>
|
|
<h1 class="cTitle">EVENTS</h1>
|
|
<ul>
|
|
<ul>
|
|
- <li v-for="(item,index) in data" :key="index" @click="skip(item.id)">
|
|
|
|
- <img :src="`/data/About/Events/${index+1}.jpg`" alt="" />
|
|
|
|
|
|
+ <li v-for="(item, index) in data" :key="index" @click="skip(item.id)">
|
|
|
|
+ <img :src="`/data/About/Events/${index + 1}.jpg`" alt="" />
|
|
<div class="item">
|
|
<div class="item">
|
|
<h2 v-html="item.h3"></h2>
|
|
<h2 v-html="item.h3"></h2>
|
|
- <div class="s" v-html="item.txt">
|
|
|
|
- </div>
|
|
|
|
- <i class="d">Date:{{item.i}}</i>
|
|
|
|
|
|
+ <div class="s" v-html="item.txt"></div>
|
|
|
|
+ <i class="d">Date:{{ item.i }}</i>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
@@ -25,14 +24,14 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import {About} from '../dataAll'
|
|
|
|
|
|
+import { About } from "../dataAll";
|
|
export default {
|
|
export default {
|
|
//import引入的组件需要注入到对象中才能使用
|
|
//import引入的组件需要注入到对象中才能使用
|
|
components: {},
|
|
components: {},
|
|
data() {
|
|
data() {
|
|
//这里存放数据
|
|
//这里存放数据
|
|
return {
|
|
return {
|
|
- data:[]
|
|
|
|
|
|
+ data: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
//监听属性 类似于data概念
|
|
//监听属性 类似于data概念
|
|
@@ -41,13 +40,13 @@ export default {
|
|
watch: {},
|
|
watch: {},
|
|
//方法集合
|
|
//方法集合
|
|
methods: {
|
|
methods: {
|
|
- skip(id){
|
|
|
|
- this.$router.push(`/Layout/EventsInfo/${id}`)
|
|
|
|
- }
|
|
|
|
|
|
+ skip(id) {
|
|
|
|
+ this.$router.push(`/Layout/EventsInfo/${id}`);
|
|
|
|
+ },
|
|
},
|
|
},
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
created() {
|
|
created() {
|
|
- this.data = About.Events
|
|
|
|
|
|
+ this.data = About.Events;
|
|
},
|
|
},
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
mounted() {},
|
|
mounted() {},
|
|
@@ -100,7 +99,7 @@ export default {
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
& > li {
|
|
& > li {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- box-shadow: 0 5px 5px rgba(0,0,0,.5);
|
|
|
|
|
|
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
|
|
height: 450px;
|
|
height: 450px;
|
|
margin-bottom: 40px;
|
|
margin-bottom: 40px;
|
|
position: relative;
|
|
position: relative;
|
|
@@ -125,8 +124,8 @@ export default {
|
|
line-height: 30px;
|
|
line-height: 30px;
|
|
border-bottom: 4px solid rgba(255, 255, 255, 0.7);
|
|
border-bottom: 4px solid rgba(255, 255, 255, 0.7);
|
|
padding-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
- /deep/ span{
|
|
|
|
- color: #c20e11;
|
|
|
|
|
|
+ /deep/ span {
|
|
|
|
+ color: rgb(255, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.s {
|
|
.s {
|