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

<template>
	<view class="o">
		<view class="indee">
			<view class="k"
			v-if="item.classId_dictText">
				#{{item.classId_dictText}}
			</view>
		</view>
		<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>
	</view>

</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.o {
		.indee{
			.k{
				display: flex;
				justify-content: flex-end;
				margin-top: -30rpx;
				color:gold;
			}
		}
		.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>