<template>
    <view>
        <view id="msg">
			<view class="interviewee">
				<view class="title">
					<text class="input_left">访客信息</text>
					<text class="input_left">已同意 2019-11-28 19:36:24</text>
				</view>
				<view class="detail">
					<view class="passlogo">
					    <img src="../../static/imgs/pass.png" alt="">
					</view>
					<view>
					    <text class="input_left">申请人</text>
					    <text class="input_left">王五2</text>
						<!-- <input confirmtype="tel"  placeholder="请填写被访人姓名"> -->
					</view>
					<view>
					    <text class="input_left">申请部门</text>
					    <text class="input_left">后勤2</text>
						 <!-- <input confirmtype="tel"  placeholder="请填写被访人姓名"> -->
					</view>
					<view>
						<text class="input_left">被访人姓名</text>
						<text class="input_left">李达2</text>
					</view>
					<view>
						<text class="input_left">手机号码</text>
						<text class="input_left">17765646272</text>
					</view>
					<view>
						<text class="input_left">来访时间</text>
						<text class="input_left">2019/12/12 14:33</text>
					</view>
					<view>
						<text class="input_left">离开时间</text>
						<text class="input_left">2019/12/12 14:32</text>
					</view>
				</view>
				
				<view class="visitor">
					<view>
						<text class="input_left">访客姓名</text>
						<text class="input_left">刘安</text>
					</view>
					<view>
						<text class="input_left">来访时间</text>
						<text class="input_left">2019/12/12 14:33</text>
					</view>
				</view>
			</view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page{
    height: 100%;
    width: 100%;
    background: #f5f5f5;
    overflow-y: scroll;
}
#msg{
    padding: .566667rem .566667rem 0rem .566667rem;
}

.interviewee{
    margin-bottom: .266667rem;
    background: #ffffff;
    border-bottom-right-radius: 0.133333rem;
    border-bottom-left-radius: 0.133333rem;
}

.interviewee .title
{
    height: 3.2rem;
    line-height: 1.2rem;
    color: #333333;
    font-size: .745333rem;
    border-bottom: .033333rem solid #BEBEBE;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 .266667rem;
}
.interviewee .detail
{
    border-bottom: .033333rem solid #BEBEBE;
	/* border-radius: .133333rem; */
}

.interviewee .detail .passlogo{
    height: 0rem;
    line-height: 0.3rem;
    color: #333333;
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 13.33rem;
	top: 1.2rem;
}
.interviewee .detail .passlogo img{
    width: 2.8rem;
}
.interviewee .detail view,
.interviewee .visitor view{
    height: 1.923rem;
    line-height: 1.2rem;
    color: #333333;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 .266667rem;
}

.interviewee .title text:nth-child(1){
    font-size: .805333rem;
	font-weight: bold;
	margin-left: .426667rem;
}
.interviewee .title text:nth-child(2){
    font-size: .635333rem;
	margin-left: 6.426667rem;
	color: #00c277;
}
.interviewee .detail view text:nth-child(1),
.interviewee .visitor view text:nth-child(1){
	color: #333333;
	font-size: .745333rem;
	display: block;
	margin-left: .426667rem;
	width: 3.8667rem;
}
.interviewee .detail view text:nth-child(2),
.interviewee .visitor view text:nth-child(2){
    color: #333333;
    font-size: .745333rem;
    display: block;
	margin-left: 2.426667rem;
}

.interviewee .detail view input,
.interviewee .visitor view input{
	color: #333333;
	font-size: .745333rem;
	display: block;
	margin-left: 2.426667rem;
}

.interviewee .visitor
{
    border-bottom: .033333rem solid #BEBEBE;
	border-radius: .133333rem;
}

.interviewee .visitor view
{
	height: 1.923rem;
    line-height: 1.2rem;
    color: #333333;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 .266667rem;
}
</style>
