info3.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <div class="EventsInfo3">
  3. <div class="ban" ref="ban">
  4. <img src="/data/EventsM/3.png" alt="" />
  5. <h3 @click="$router.push('/Layout/Events')">Events</h3>
  6. </div>
  7. <div class="main">
  8. <div class="box1">
  9. <h3 v-html="data.h3"></h3>
  10. <div class="info">
  11. <span class="info_1">{{data.i}}</span>
  12. </div>
  13. </div>
  14. <!-- <div class="box2">
  15. <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
  16. </div> -->
  17. <div class="box3" v-html="data.main"></div>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. // <i>XXXXXXXXXXXXX</i>
  23. import { Events } from "./data";
  24. export default {
  25. name: "EventsInfo3",
  26. components: {},
  27. data() {
  28. //这里存放数据
  29. return {
  30. data: {},
  31. };
  32. },
  33. //监听属性 类似于data概念
  34. computed: {},
  35. //监控data中的数据变化
  36. watch: {
  37. $route(){
  38. this.dataChange()
  39. }
  40. },
  41. //方法集合
  42. methods: {
  43. // skip(path){
  44. // this.$router.push(`/Layout/EventsInfo3/${path}`).catch(()=>{})
  45. // },
  46. // 封装获取数据的方法
  47. dataChange() {
  48. let id = this.$route.params.id;
  49. id =Number(id)
  50. Events.forEach(v=>{
  51. if(v.id===id) this.data=v
  52. })
  53. },
  54. },
  55. //生命周期 - 创建完成(可以访问当前this实例)
  56. created() {
  57. this.dataChange()
  58. },
  59. //生命周期 - 挂载完成(可以访问DOM元素)
  60. mounted() {},
  61. beforeCreate() {}, //生命周期 - 创建之前
  62. beforeMount() {}, //生命周期 - 挂载之前
  63. beforeUpdate() {}, //生命周期 - 更新之前
  64. updated() {}, //生命周期 - 更新之后
  65. beforeDestroy() {}, //生命周期 - 销毁之前
  66. destroyed() {}, //生命周期 - 销毁完成
  67. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  68. };
  69. </script>
  70. <style lang='less' scoped>
  71. .EventsInfo3 {
  72. width: 100%;
  73. .ban {
  74. position: relative;
  75. width: 100%;
  76. & > img {
  77. width: 100%;
  78. }
  79. & > h3 {
  80. position: absolute;
  81. font-size: 24px;
  82. color: #fff;
  83. left: 20px;
  84. bottom: 20px;
  85. border-bottom: 1px solid #fff;
  86. }
  87. }
  88. .main {
  89. padding: 20px 15px 40px;
  90. background: url('../../../assets/img/bgEI.png');
  91. .box1 {
  92. padding: 0 15px 5px;
  93. border-bottom: 1px solid #ccc;
  94. & > h3 {
  95. font-size: 22px;
  96. font-weight: 700;
  97. padding-left: 30px;
  98. background: url("../../../assets/img/Layout/chosen.png") left 4px
  99. no-repeat;
  100. background-size: 22px 18px;
  101. margin-bottom: 5px;
  102. }
  103. .info {
  104. font-size: 14px;
  105. line-height: 30px;
  106. color: #666;
  107. overflow: hidden;
  108. zoom: 1;
  109. margin-bottom: 20px;
  110. & > span {
  111. padding: 0 0px 0 30px;
  112. display: block;
  113. }
  114. .info_1 {
  115. background: url("../../../assets/img/bg_5.png") left 5px no-repeat;
  116. }
  117. }
  118. }
  119. .box2{
  120. padding: 20px 15px;
  121. border-bottom: 1px solid #ccc;
  122. &>p{
  123. font-size: 14px;
  124. color: #6A6A6A;
  125. }
  126. }
  127. .box3{
  128. padding: 20px 15px 10px;
  129. /deep/video{
  130. width: 100%;
  131. margin-bottom: 15px;
  132. }
  133. /deep/.xx{
  134. font-family: Bold;
  135. font-size: 16px;
  136. color: #000000;
  137. font-weight: 700;
  138. }
  139. /deep/ p{
  140. font-size: 14px;
  141. line-height: 20px;
  142. margin-bottom: 15px;
  143. color: #6A6A6A;
  144. }
  145. /deep/ img{
  146. width: 100%;
  147. display: block;
  148. margin-bottom: 15px;
  149. }
  150. /deep/ i {
  151. color: #000000;
  152. display: block;
  153. font-size: 12px;
  154. font-style: normal;
  155. margin-bottom: 15px;
  156. }
  157. }
  158. }
  159. }
  160. </style>