ShouBo/web/src/views/Events/index.vue

<!--  -->
<template>
  <div class="Events">
    <div class="ban"></div>
    <div class="pos">
      <span class="pos1">Your Position:&nbsp;</span>
      <Router-link to="/Layout/Home">Home></Router-link>
      <Router-link to="/Layout/Events">Events></Router-link>
    </div>
    <div class="conten">
      <h1 class="cTitle">EVENTS</h1>
      <ul>
        <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">
            <h2 v-html="item.h3"></h2>
            <div class="s" v-html="item.txt"></div>
            <i class="d">Date:{{ item.i }}</i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { About } from "../dataAll";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      data: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    skip(id) {
      this.$router.push(`/Layout/EventsInfo/${id}`);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.data = About.Events;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Events {
  .ban {
    width: 100%;
    margin: auto;
    background: url("/data/About/banner.jpg") no-repeat center top #000000;
    height: 300px;
  }
  .pos {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    margin: 0 auto 10px auto;
    width: 1180px;
    .pos1 {
      color: #c20e11;
    }
  }
  .conten {
    background-color: #fff;
    width: 1180px;
    margin: 0 auto 60px auto;
    padding: 20px 0 40px 0;
    .cTitle {
      font-weight: 700;
      font-family: Georgia;
      font-size: 40px;
      color: #151313;
      line-height: 58px;
      background: url("/data/About/eve.gif") repeat-x left bottom;
      text-align: center;
      width: 900px;
      margin: 0 auto 30px auto;
      padding-bottom: 7px;
    }
    & > ul {
      width: 900px;
      margin: 0 auto;
      & > li {
        cursor: pointer;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        height: 450px;
        margin-bottom: 40px;
        position: relative;
        & > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border: none;
          vertical-align: top;
        }
        .item {
          text-align: center;
          width: 532px;
          position: absolute;
          left: 184px;
          top: 125px;
          & > h2 {
            font-weight: 700;
            font-family: Helvetica;
            font-size: 24px;
            color: #fff;
            line-height: 30px;
            border-bottom: 4px solid rgba(255, 255, 255, 0.7);
            padding-bottom: 15px;
            /deep/ span {
              color: rgb(255, 0, 0);
            }
          }
          .s {
            font-family: Georgia;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 20px;
            padding: 15px 0;
            /deep/ p {
              width: 350px;
              text-align: left;
              color: rgba(255, 255, 255, 0.7);
              margin: 0 auto;
            }
          }
          .d {
            font-family: Georgia;
            font-size: 16px;
            color: #fff;
            line-height: 20px;
            font-style: italic;
          }
        }
      }
    }
  }
}
</style>