hire-wx-houxuanren/pagesC/chat.vue

<template>
	<view class="chat-pages">
		<u-navbar :border="false" >
			<view class="chat-navbar u-flex-col u-col-center" slot="center">
				<text>陈女士</text>
				<text>内核网·项目经理</text>
			</view>
		</u-navbar>
		<view class="chat-header" v-if="0" :style="{top:(statusheight + 58) + 'px'}">
			<view class="header-top u-flex u-row-between">
				<view class="header-left">
					<view class="u-flex">
						<text class="text1">喻伯艺</text>
						<text class="text2">急于求职</text>
					</view>
					<view class="text3">
						杭州迅阳科技有限公司·高级UI设计师
					</view>
				</view>
				<view class="header-right">
					<image src="https://dummyimage.com/100x100" class="right-img" mode=""></image>
					<image src="../static/images/nan.png" class="sex" mode=""></image>
					<image src="../static/images/nv.png" class="sex" mode=""></image>
				</view>
			</view>
			<view class="jingli-box u-flex u-row-between">
				<image src="../static/images/dizhi.png" class="img" mode=""></image>
				<text class="text1">北京字节跳动科技…·交互设计师</text>
				<text class="text2">2019.09-2023.03</text>
			</view>
			<view class="jingli-box u-flex u-row-between">
				<image src="../static/images/zhiye.png" class="img" mode=""></image>
				<text class="text1">中国美术学院·视觉设计</text>
				<text class="text2">2019.09-2023.03</text>
			</view>
			<view class="chat-label u-flex u-flex-wrap">
				<text v-for="(a,b) in 3" :key="b">用户研究</text>
			</view>
			<view class="goutong-time">
				04月6日 12:34 发起沟通
			</view>
		</view>
		<view class="chat-header1" v-else :style="{top:(statusheight + 58) + 'px'}">
			<view class="header1-top u-flex u-row-between">
				<text>UX/UE交互设计师</text>
				<text>20-25K·13薪</text>
			</view>
			<view class="jingli1-box">
				江苏满运软件科… 移动互联网
			</view>
			<view class="chat-label1 u-flex u-flex-wrap">
				<text v-for="(a,b) in 3" :key="b">用户研究</text>
			</view>
			<view class="zhiwei-title">
				岗位职责：
			</view>
			<view class="zhiwei-text">
				1、负责公司APP、小程序等端的界面视觉设计以及部分营销活动的设计工作；
				2、关注产品数据和客户反馈，洞察其中的用户体验改进机会，并通过设计项目持续改进提升，提升产品易用性；
				3、参与视觉设计体验标准、规范制定，总结设计方法…
			</view>
			<view class="goutong-time1">
				04月6日 12:34 发起沟通
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="chat-item" v-for="(item,index) in 10" :key="index">
			<view class="chat-time">
				04月6日 12:34
			</view>
			<view class="chat-item-box u-flex u-col-top u-row-between">
				<image :style="{opacity: index % 2 == 0 ? 1 : 0}" src="https://dummyimage.com/92x92" class="user-img" mode=""></image>
				<view class="u-flex-1">
					<view class="chat-text" :style="{background:index % 2 == 1 ? '#D3E5FB' : '#fff'}">
						你好，我们正在寻找优秀的人才，这位候选人比较符合，有兴趣聊聊吗？
					</view>
				</view>
				<image :style="{opacity: index % 2 == 0 ? 0 : 1}" src="https://dummyimage.com/92x92" class="user-img" mode=""></image>
			</view>
		</view>
		<zhao-chat></zhao-chat>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheight: 0
			}
		},
		onLoad() {
			this.statusheight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.chat-pages {
		.chat-header1 {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: sticky;
			left: 24rpx;
			z-index: 20;
			margin: 10px auto;
			padding: 0 20rpx;
			.goutong-time1 {
				line-height: 80rpx;
				font-size: 24rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #777777;
				border-top: 2rpx solid #F0F0F0;
			}
			.zhiwei-text{
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F0F0F0;
			}
			.zhiwei-title{
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				margin-bottom: 20rpx;
			}
			.chat-label1 {
				padding: 8rpx 0 10rpx 0;
			
				text {
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					line-height: 40rpx;
					background: #F3F3F3;
					border-radius: 4rpx;
					padding: 0 12rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}
			.jingli1-box{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
				margin-bottom: 20rpx;
			}
			.header1-top{
				padding: 24rpx 0 20rpx 0;
				text:frist-child{
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				text:last-child{
					font-size: 32rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #0C66C2;
				}
			}
		}

		.chat-item {
			padding: 0 24rpx;
			margin-bottom: 20rpx;

			.chat-item-box {

				.chat-text {
					border-radius: 20rpx;
					background-color: #fff;
					max-width: 100%;
					margin: 0 20rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #141414;
					padding: 20rpx 24rpx;
				}

				.user-img {
					width: 92rpx;
					height: 92rpx;
					border-radius: 100rpx;
				}
			}

			.chat-time {
				text-align: center;
				margin-bottom: 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}
		}

		.chat-header {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: sticky;
			left: 24rpx;
			z-index: 20;
			margin: 10px auto;
			padding: 0 20rpx;

			.goutong-time {
				line-height: 80rpx;
				font-size: 24rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #777777;
				border-top: 2rpx solid #F0F0F0;
			}

			.chat-label {
				padding: 8rpx 0 10rpx 0;

				text {
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					line-height: 40rpx;
					background: #F3F3F3;
					border-radius: 4rpx;
					padding: 0 12rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}

			.jingli-box {
				margin-bottom: 12rpx;

				.img {
					width: 28rpx;
					height: 28rpx;
				}

				.text1 {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					margin: 0 12rpx;
					flex: 1;
				}

				.text2 {
					font-size: 22rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #888888;
				}
			}

			.header-top {
				height: 150rpx;

				.header-right {
					width: 96rpx;
					height: 96rpx;
					position: relative;

					.sex {
						position: absolute;
						bottom: 0;
						right: 4rpx;
						width: 20rpx;
						height: 20rpx;
					}

					.right-img {
						width: 96rpx;
						height: 96rpx;
						border-radius: 100rpx;
					}
				}

				.header-left {
					.text3 {
						font-size: 26rpx;
						font-family: SFPro-Regular, SFPro;
						font-weight: 400;
						color: #666666;
						margin-top: 10rpx;
					}

					.text1 {
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-right: 28rpx;
					}

					.text2 {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
					}
				}
			}
		}

		.chat-navbar {
			flex: 1;
			// padding-left: 100rpx;

			text:first-child {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #141414;
			}

			text:last-child {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}
		}
	}

	page {
		background-color: #F3F3F3;
	}
</style>