<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="common">
            <el-col :span="8" class="one">
              <el-col :span="24" class="image">
                <el-image :src="xspxUrl"></el-image>
              </el-col>
              <el-col :span="24" class="info">
                <p>线上培训</p>
                <p>举办地点:<span>吉林省长春市</span></p>
                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
              </el-col>
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini">进人展会</el-button>
              </el-col>
            </el-col>
            <el-col :span="8" class="one">
              <el-col :span="24" class="image">
                <el-image :src="xpfbUrl"></el-image>
              </el-col>
              <el-col :span="24" class="info">
                <p>线上新品发布</p>
                <p>举办地点:<span>吉林省长春市</span></p>
                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
              </el-col>
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini">进人展会</el-button>
              </el-col>
            </el-col>
            <el-col :span="8" class="one">
              <el-col :span="24" class="image">
                <el-image :src="xszhUrl"></el-image>
              </el-col>
              <el-col :span="24" class="info">
                <p>线上展会</p>
                <p>举办地点:<span>吉林省长春市</span></p>
                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
              </el-col>
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini">进人展会</el-button>
              </el-col>
            </el-col>
            <el-col :span="8" class="one">
              <el-col :span="24" class="image">
                <el-image :src="kjcpUrl"></el-image>
              </el-col>
              <el-col :span="24" class="info">
                <p>线上科技产品宣传</p>
                <p>举办地点:<span>吉林省长春市</span></p>
                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
              </el-col>
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini">进人展会</el-button>
              </el-col>
            </el-col>
            <el-col :span="8" class="one">
              <el-col :span="24" class="image">
                <el-image :src="kpjyUrl"></el-image>
              </el-col>
              <el-col :span="24" class="info">
                <p>线上科普教育</p>
                <p>举办地点:<span>吉林省长春市</span></p>
                <p>举办时间:<span>2021-04-19 10:00:00-2021-04-19 10:00:00</span></p>
              </el-col>
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini">进人展会</el-button>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      xspxUrl: require('@a/xspx.jpg'),
      xpfbUrl: require('@a/xpfb.jpg'),
      xszhUrl: require('@a/xszh.jpg'),
      kjcpUrl: require('@a/kjcp.jpg'),
      kpjyUrl: require('@a/kpjy.jpg'),
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  min-height: 500px;
  margin: 10px 0 0 0;
  .common {
    .one {
      width: 32.7%;
      height: 370px;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      margin: 0 10px 10px 0;
      .image {
        /deep/.el-image__inner {
          width: 100%;
          height: 225px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
      }
      .info {
        padding: 0 10px;
        p {
          font-size: 14px;
          margin: 0 0 8px 0;
        }
        p:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .btn {
        text-align: center;
      }
    }
    .one:nth-child(3n) {
      margin: 0 0 10px 0;
    }
  }
}
</style>
