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

<template>
	<view class="box" :style="{'--sexcolor' : sex[item.sex].color}">
		<view class="headPortraitimg">
			<image :src="item.userImage" @click.stop="previewImage([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.addId">
					<!-- 地址 -->
					{{ item.addId }}
				</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>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.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;
				}
			}

		}
	}
</style>