web-center/src/layout/member/photo.vue

<template>
  <div id="photo">
    <el-row>
      <el-col :span="24" class="top">
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="left"></el-image>
        </el-col>
        <el-col :span="4" class="topTitle">
          {{ title }}
        </el-col>
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="right"></el-image>
        </el-col>
      </el-col>
      <el-col :span="24" class="info">
        <el-col :span="24" class="list" v-loading="loading">
          <el-col :span="6" class="tujiList" v-for="(item, index) in infoList" :key="index" @click.native="turnTo(item)">
            <el-col :span="24" class="image">
              <el-image style="width:270px;height:180px;" :src="item.pic"></el-image>
            </el-col>
            <el-col :span="24" class="title">
              <p class="textOver">{{ item.title }}</p>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="link">
          <el-link :underline="false" href="http://www.dangjian.com/djw2016sy/djw2016wkztl/wkztl2016djzzwk/" class="image" target="_blank">
            <el-image style="width:285px;height:140px;" :src="link1"></el-image>
          </el-link>
          <el-link :underline="false" href="http://xuexi.12371.cn/xxhywx/" class="image" target="_blank">
            <el-image style="width:285px;height:140px;" :src="link2"></el-image>
          </el-link>
          <el-link :underline="false" href="http://www.dangjian.com/specials/" class="image" target="_blank">
            <el-image style="width:285px;height:140px;" :src="link3"></el-image>
          </el-link>
          <el-link :underline="false" href="http://dwlm.12371.cn/" class="image" target="_blank">
            <el-image style="width:285px;height:140px;" :src="link4"></el-image>
          </el-link>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'photo',
  props: {
    tujiList: null,
  },
  components: {},
  data: () => ({
    title: '活动图集',
    left: require('@/assets/messageLeft.jpg'),
    right: require('@/assets/messageRight.jpg'),
    link1: require('@/assets/tuji5.jpg'),
    link2: require('@/assets/tuji6.jpg'),
    link3: require('@/assets/tuji7.jpg'),
    link4: require('@/assets/tuji8.jpg'),
    infoList: [],
    loading: true,
  }),
  watch: {
    tujiList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let infoList = _.get(data, 'children');
      this.$set(this, `infoList`, infoList);
      this.loading = false;
    },
    turnTo(item) {
      if (item.url !== undefined) {
        window.open(item.url);
      } else {
        let route = this.$route.path;
        this.$router.push({ path: `/memberDetail?id=${item.id}` });
      }
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top {
  height: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
}
.top .topTitle {
  font-size: 38px;
  color: #bd010b;
  text-align: center;
  font-weight: bold;
  font-family: '微软雅黑';
}
.link {
  height: 140px;
  overflow: hidden;
}
.link .image {
  width: 285px;
  height: 140px;
  margin: 0 15px;
}
.link .image:last-child {
  margin: 0 0 0 15px;
}
.list {
  margin: 0 0 40px 0;
}
.tujiList {
  width: 270px;
  height: 210px;
  overflow: hidden;
  margin: 0px 25px 0 25px;
}
.tujiList:last-child {
  margin: 0px 0 0 25px;
}
.tujiList .image {
  width: 270px;
  height: 180px;
  overflow: hidden;
}
.tujiList .title {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  text-align: center;
}
.tujiList .title p {
  font-size: 16px;
  color: #333;
}
.tujiList:hover {
  cursor: pointer;
}
.tujiList:hover .title p {
  color: #bd010b;
}
</style>