universal-wechat-uniapp-241007/components/list/dynamic/dynamicItem.vue

<template>
	<view class="works" @click="$emit('click')">
		<view class="box"
		:style="{'--sexcolor' : sex[item.sex].color}">
			<view class="headPortraitimg">
				<image :src="item.userImage" mode="aspectFill"></image>
			</view>
			<view class="YaoduUniversalWall">
				<view class="heide">
					<view class="username text-ellipsis">
						{{ item.userName }}
					</view>
					<view class="inde"
					v-if="item.sex">
						<!-- 性别 -->
						{{ item.sex }}
					</view>
					<view class="inde"
					v-if="item.yearDate">
						<!-- 年份 -->
						{{ item.yearDate }}
					</view>
					<view class="inde"
					v-if="item.address">
						<!-- 地址 -->
						{{ item.address }}
					</view>
					<view class="authentication"
					v-if="item.isContent">
						<!-- 个人认证 -->
						{{ item.isContent }}
					</view>
				</view>

				<view class="Times">
					<view class="TimeMonth">
						<!-- 10-08 -->
						{{ item.createTime }}发布
					</view>
					<!-- <view class="Month">
						12:34
					</view> -->
				</view>
			</view>
		</view>
		<view class="dynamics" v-html="$utils.stringFormatHtml(item.title)">
		</view>
		<view class="Artworkimages">
			<view class="wrokimg" 
			@click.stop="previewImage(item.image, i)"
			:key="i" v-for="(img, i) in item.image">
				<image :src="img" mode="aspectFill"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="browse">
				{{ item.isBrowse }}浏览
			</view>
			<view class="browse">
				{{ item.isComment }}条评论
			</view>
			<view class="Leavingamessage">
				<uv-icon size="40rpx" name="chat"></uv-icon>
			</view>
			<view class="Leavingamessage"
			v-if="del"
			@click.stop="$emit('del')">
				<uv-icon size="40rpx" name="trash"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinsSex from '@/mixins/sex.js'
	export default {
		mixins: [mixinsSex],
		props: {
			item: {},
			del : {},
		},
		data() {
			return {

			}
		},
		methods: {
		},
	}
</script>

<style scoped lang="scss">
	.works {
		margin: 40rpx 20rpx;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 6rpx 6rpx #00000011;

		.box {
			display: flex;
			align-items: center;

			.headPortraitimg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}

			.YaoduUniversalWall {
				padding: 0rpx 10rpx;

				.username {
					max-width: 200rpx;
				}

				.heide {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.inde {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
					font-size: 20rpx;
					height: 30rpx;
					color: white;
					// background-color: rgb(124, 136, 242);
					background-color: var(--sexcolor);
					border-radius: 7rpx;
					flex-shrink: 0;
				}

				.authentication {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0rpx 10rpx;
					margin: 0rpx 5rpx;
					font-size: 20rpx;
					height: 34rpx;
					padding: 0rpx 10rpx;
					color: white;
					background-color: #ffd036;
					border-radius: 7rpx;
					flex-shrink: 0;
				}

				.Times {
					display: flex;
					padding: 5rpx 0rpx;
					font-size: 20rpx;
					margin-top: 10rpx;

					.Month {
						margin: 0rpx 15rpx;
					}
				}

			}
		}

		.personalInformation {
			display: flex;

			.inde {
				font-size: 25rpx;
				padding: 0rpx 8rpx;
			}

			.authentication {
				font-size: 25rpx;
			}
		}

		.dynamics {
			margin-top: 20rpx;
			font-size: 28rpx;
			// font-weight: bold;
			// line-height: 35rpx;
			letter-spacing: 3rpx;
		}

		.Artworkimages {
			display: flex;
			flex-wrap: wrap;

			.wrokimg {
				margin: 10rpx;

				image {
					height: 190rpx;
					width: 190rpx;
					border-radius: 20rpx;
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 24rpx;

			.browse {
				margin: 0rpx 30rpx;
				color: rgb(132, 132, 132);
			}

			.Leavingamessage {
				height: 20rpx;
				width: 20rpx;
				margin-left: auto;
			}
		}
	}
</style>