tnbapp/src/views/disk/FileImage.vue

<template>
  <el-row>
    <el-col :md="24" class="movie-list">
      <div>
        <el-col v-for="(image, index) in data.images" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-card :body-style="{ padding: '0px' }" class="card">
            <div class="imgs">
              <el-image
                lazy
                fit="cover"
                class="coverImg"
                :src="image.thumbnailUrl"
                @click="showImages(index)"
              />
            </div>
            <div style="padding: 14px;">
                <span>
                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
                </span>
            </div>
          </el-card>
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
import { followUser, getUserInfo, unfollowUser } from '@/api/user'
import { getAlbum } from '@/api/image'
import { collectItem } from '@/api/collect'

export default {
  name: 'Share',
  components: { PermissionDeniedCard },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      data: {
        images: []
      },
    }
  },
  created() {
    document.title = '我的图片'
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }

  .coverImg {
    height: 120px !important;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

.coverImg {
  width: 100%;
  height: 320px;
  display: block;
}

.card {
  margin-bottom: 20px;
  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
}

.imgs {
  position: relative;
}
</style>