|
|
@@ -1,98 +0,0 @@
|
|
|
-<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>
|