MoeNovaClient/components/WorkItem/WorkItem.vue

<template>
	<view class="item" @click="handleClick">
		<view v-if="item.task_type == 1" class="icon-box">
			<image :class="'icon' + item.images" :src="item.result_images||item.images || item.img_url || item.url || '../../static/logo.png'" mode="widthFix" />
		</view>
		<view v-if="item.task_type == 2" :class="'icon-box icon-box' + item.task_type">
			<view>
				<image :class="'icon' + item.images" :src="item.result_images||item.images || item.img_url || item.url || '../../static/logo.png'" mode="widthFix" />
			</view>
		</view>
		<view class="name one-omit" v-if="subtitle">{{ item.title || item.description || "作品" + index }}</view>
		<view class="secrecy" v-if="secrecy && item.status!=1">
			<image src="@/static/icon/wd_icon_suo.png"></image>
			仅个人可见
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			required: true
		},
		secrecy:{
			type: Boolean,
			default: false
		}, 
		subtitle:{
			type: Boolean,
			default: false
		}, 
    
		
	},
	methods: {
		handleClick() {
			this.$emit('click', this.item);
		}
	}
};
</script>

<style scoped lang="scss">
 .item {
      width: 346rpx;
      height: 520rpx;
      margin-bottom: 30rpx;
      background: #fff;
      overflow: hidden;
      position: relative;
      left: 0;
      top: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      border-radius: 16rpx;
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
      }

      .secrecy {
        position: absolute;
        left: 14rpx;
        top: 14rpx;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12rpx;
        font-family: "PingFang SC-Medium";
        font-size: 20rpx;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rpx 12rpx;
        z-index: 1;

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .icon-box {
        width: 346rpx;
        height: 468rpx;
        // padding: 28rpx 20rpx;
        box-sizing: border-box; 
        margin-bottom: 12rpx;
        border-radius: 16rpx;
        transition: all 0.3s ease;
       >image{
        border-radius: 16rpx;
       }
        &:active {
          opacity: 0.9;
        }

        .icon {
          transition: all 0.3s ease;
        }
        &.icon-box2 {
          >image{
            border-radius: 0;
          }
          > view {
            width: 346rpx;
            height: 346rpx;
            overflow: hidden;
          }
          background-color: #f8f9fa;
          overflow: hidden;
          display: flex;
          align-items: center;
          padding: 0;
          justify-content: center;
        }
      }
      .name {
        font-size: 28rpx;
        color: #1a4d2e;
        font-family: "PingFang SC-Medium";
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
      }
    }

	
</style>