123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- <template>
- <div class="EventsInfo3">
- <div class="ban" ref="ban">
- <img src="/data/EventsM/3.png" alt="" />
- <h3 @click="$router.push('/Layout/Events')">Events</h3>
- </div>
- <div class="main">
- <div class="box1">
- <h3 v-html="data.h3"></h3>
- <div class="info">
- <span class="info_1">{{data.i}}</span>
- </div>
- </div>
- <!-- <div class="box2">
- <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
- </div> -->
- <div class="box3" v-html="data.main"></div>
- </div>
- </div>
- </template>
- <script>
- // <i>XXXXXXXXXXXXX</i>
- import { Events } from "./data";
- export default {
- name: "EventsInfo3",
- components: {},
- data() {
- //这里存放数据
- return {
- data: {},
- };
- },
- //监听属性 类似于data概念
- computed: {},
- //监控data中的数据变化
- watch: {
- $route(){
- this.dataChange()
- }
- },
- //方法集合
- methods: {
- // skip(path){
- // this.$router.push(`/Layout/EventsInfo3/${path}`).catch(()=>{})
- // },
- // 封装获取数据的方法
- dataChange() {
- let id = this.$route.params.id;
- id =Number(id)
- Events.forEach(v=>{
- if(v.id===id) this.data=v
- })
- },
- },
- //生命周期 - 创建完成(可以访问当前this实例)
- created() {
- this.dataChange()
- },
- //生命周期 - 挂载完成(可以访问DOM元素)
- mounted() {},
- beforeCreate() {}, //生命周期 - 创建之前
- beforeMount() {}, //生命周期 - 挂载之前
- beforeUpdate() {}, //生命周期 - 更新之前
- updated() {}, //生命周期 - 更新之后
- beforeDestroy() {}, //生命周期 - 销毁之前
- destroyed() {}, //生命周期 - 销毁完成
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
- };
- </script>
- <style lang='less' scoped>
- .EventsInfo3 {
- width: 100%;
- .ban {
- position: relative;
- width: 100%;
- & > img {
- width: 100%;
- }
- & > h3 {
- position: absolute;
- font-size: 24px;
- color: #fff;
- left: 20px;
- bottom: 20px;
- border-bottom: 1px solid #fff;
- }
- }
- .main {
- padding: 20px 15px 40px;
- background: url('../../../assets/img/bgEI.png');
- .box1 {
- padding: 0 15px 5px;
- border-bottom: 1px solid #ccc;
- & > h3 {
- font-size: 22px;
- font-weight: 700;
- padding-left: 30px;
- background: url("../../../assets/img/Layout/chosen.png") left 4px
- no-repeat;
- background-size: 22px 18px;
- margin-bottom: 5px;
- }
- .info {
- font-size: 14px;
- line-height: 30px;
- color: #666;
- overflow: hidden;
- zoom: 1;
- margin-bottom: 20px;
- & > span {
- padding: 0 0px 0 30px;
- display: block;
- }
- .info_1 {
- background: url("../../../assets/img/bg_5.png") left 5px no-repeat;
- }
- }
- }
- .box2{
- padding: 20px 15px;
- border-bottom: 1px solid #ccc;
- &>p{
- font-size: 14px;
- color: #6A6A6A;
- }
- }
- .box3{
- padding: 20px 15px 10px;
- /deep/video{
- width: 100%;
- margin-bottom: 15px;
- }
- /deep/.xx{
- font-family: Bold;
- font-size: 16px;
- color: #000000;
- font-weight: 700;
- }
- /deep/ p{
- font-size: 14px;
- line-height: 20px;
- margin-bottom: 15px;
- color: #6A6A6A;
- }
- /deep/ img{
- width: 100%;
- display: block;
- margin-bottom: 15px;
- }
- /deep/ i {
- color: #000000;
- display: block;
- font-size: 12px;
- font-style: normal;
- margin-bottom: 15px;
- }
- }
- }
- }
- </style>
|