|
@@ -8,11 +8,19 @@
|
|
|
<div class="box1">
|
|
|
<h3 v-html="data.h3"></h3>
|
|
|
<div class="info">
|
|
|
- <span class="info_1">{{data.i}}</span>
|
|
|
+ <span class="info_1">{{ data.i }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box2">
|
|
|
- <p v-for="(item,index) in data.txt" :class="{active:item.path==$route.params.id}" :key="index" @click="skip(item.path)">{{item.name}}</p>
|
|
|
+ <p
|
|
|
+ v-for="(item, index) in data.txt"
|
|
|
+ :class="{ active: item.path == $route.params.id }"
|
|
|
+ :key="index"
|
|
|
+ @click="skip(item.path)"
|
|
|
+ >
|
|
|
+ <span>■</span>
|
|
|
+ {{ item.name }}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
<div class="box3" v-html="data.main"></div>
|
|
|
</div>
|
|
@@ -35,27 +43,27 @@ export default {
|
|
|
computed: {},
|
|
|
//监控data中的数据变化
|
|
|
watch: {
|
|
|
- $route(){
|
|
|
- this.dataChange()
|
|
|
- }
|
|
|
+ $route() {
|
|
|
+ this.dataChange();
|
|
|
+ },
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- skip(path){
|
|
|
- this.$router.push(`/Layout/EventsInfo2/${path}`).catch(()=>{})
|
|
|
+ skip(path) {
|
|
|
+ this.$router.push(`/Layout/EventsInfo2/${path}`).catch(() => {});
|
|
|
},
|
|
|
// 封装获取数据的方法
|
|
|
dataChange() {
|
|
|
let id = this.$route.params.id;
|
|
|
- id =Number(id)
|
|
|
- Events.forEach(v=>{
|
|
|
- if(v.id===id) this.data=v
|
|
|
- })
|
|
|
+ id = Number(id);
|
|
|
+ Events.forEach((v) => {
|
|
|
+ if (v.id === id) this.data = v;
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
|
- this.dataChange()
|
|
|
+ this.dataChange();
|
|
|
},
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
mounted() {},
|
|
@@ -88,7 +96,7 @@ export default {
|
|
|
}
|
|
|
.main {
|
|
|
padding: 20px 15px 40px;
|
|
|
- background: url('../../../assets/img/bgEI.png');
|
|
|
+ background: url("../../../assets/img/bgEI.png");
|
|
|
.box1 {
|
|
|
padding: 0 15px 5px;
|
|
|
border-bottom: 1px solid #ccc;
|
|
@@ -96,7 +104,7 @@ export default {
|
|
|
font-size: 22px;
|
|
|
font-weight: 700;
|
|
|
padding-left: 30px;
|
|
|
- background: url("../../../assets/img/Layout/chosen.png") left center
|
|
|
+ background: url("../../../assets/img/Layout/chosen.png") left 4px
|
|
|
no-repeat;
|
|
|
background-size: 22px 18px;
|
|
|
margin-bottom: 5px;
|
|
@@ -117,31 +125,40 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .box2{
|
|
|
+ .box2 {
|
|
|
padding: 20px 15px;
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
- &>p{
|
|
|
+ & > p {
|
|
|
+ padding-left: 15px;
|
|
|
+ position: relative;
|
|
|
+ font-family: Bold;
|
|
|
font-size: 14px;
|
|
|
- color: #6A6A6A;
|
|
|
+ color: #6a6a6a;
|
|
|
+ &>span{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- .active{
|
|
|
- color: red;
|
|
|
+ .active {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #bc1c24;
|
|
|
}
|
|
|
}
|
|
|
- .box3{
|
|
|
+ .box3 {
|
|
|
padding: 20px 15px 10px;
|
|
|
- /deep/.xx{
|
|
|
+ /deep/.xx {
|
|
|
font-size: 16px;
|
|
|
color: #000000;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
- /deep/ p{
|
|
|
+ /deep/ p {
|
|
|
font-size: 14px;
|
|
|
line-height: 20px;
|
|
|
margin-bottom: 15px;
|
|
|
- color: #6A6A6A;
|
|
|
+ color: #6a6a6a;
|
|
|
}
|
|
|
- /deep/ img{
|
|
|
+ /deep/ img {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
margin-bottom: 15px;
|