hz-zhhq-app/pages/visitorAppointment_test2/visitorAppointment_test2.vue

<template>
    <view>
        <view id="msg">
			<view class="interviewee">
				<view>
					<text class="input_left">到访地点</text>
					<input confirmtype="text" placeholder="请填写到访地点名" readonly="false" value="123">
				</view>
			    <view>
			        <text class="input_left">申请人</text>
			        <input confirmtype="text" placeholder="" value="六六">
			    </view>
				<view>
				    <text class="input_left">申请部门</text>
				    <input confirmtype="text" placeholder="" value="管理">
				</view>
				<view>
					<text class="input_left">被访人姓名</text>
					<input confirmtype="tel"  placeholder="请填写被访人姓名" value="李四">
				</view>
				<view>
					<text class="input_left">手机号码</text>
					<input confirmtype="tel"  placeholder="请填写被访人手机号码" value="17788765467">
				</view>
				<view>
					<text class="input_left">来访时间</text>
					<input confirmtype="tel"  placeholder="请填写来访时间" value="2019/12/12 14:32">
				</view>
				<view>
					<text class="input_left">离开时间</text>
					<input confirmtype="tel"  placeholder="请填写离开时间" value="2019/12/12 16:42">
				</view>
				<view>
					<text class="input_left">来访事由</text>
					<input confirmtype="tel"  placeholder="请填写来访事由" value="探亲">
				</view>
			</view>
        </view>
		<!-- 随行人员 -->
		<!-- <view id="visitor">
			<view class="visitor">
				<view>
					<text class="input_left">访客姓名</text>
					<input class="name" confirmtype="text" value="六六">
				</view>
				<view>
					<text class="input_left">身份证号</text>
					<input class="name" confirmtype="tel" value="342425990087673243"/>
				</view>
			</view>
		</view> -->
		
		<view id="visitor_2">
			<view class="visitor_2">
				<view class="pic">
					<img src="../../static/imgs/IDpic1.png"></img>
				</view>
				<view class="visitor_2_text">
<!-- 				<input class="name" confirmtype="text" value="刘斌">
					<input class="name" confirmtype="tel" value="342425990087673243"/> -->
					<text>六六 178657764534<br></text>
					<text>342425990087673243</text>
				</view>
			</view>
		</view>
		
<!-- 		<view id="result">
		    <view class="ing">
		        <i></i>
		        <text>被拜访人：已拒绝 2019-11-28 19:36:24</text>
		    </view>
		</view> -->
		
		<view class="submit" v-if="true">
			<button class="submit_button_2">拒绝</button>
			<button class="submit_button">同意</button>
		</view>
		<view class="submit" @click="submit(state)" v-if="false">
			<button :class="button_class">{{button_text}}</button>
		</view>
    </view>
</template>

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

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

.interviewee,.visitor,.visitor_2{
    margin-bottom: .266667rem;
    background: #ffffff;
    /* border-bottom-right-radius: 0.333333rem;
    border-bottom-left-radius: 0.333333rem; */
	border-radius: 0.333333rem;
}

.interviewee view,
.visitor view{
    height: 2.2rem;
    line-height: 1.2rem;
    color: #333333;
    font-size: .745333rem;
    border-bottom: .013333rem solid #eee;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 .266667rem;
}

.interviewee view text:nth-child(1),
.visitor view text:nth-child(1){
    width: 3.8667rem;
    height: 96%;
    color: #333333;
    font-size: .745333rem;
    display: block;
    margin-right: .426667rem;
	font-weight: bold;
	margin-left: .426667rem;
	margin-top: .8rem;
}
.interviewee view input,
.visitor view input{
    height: 96%;
    font-size: .745333rem;
    display: block;
	margin-left: .426667rem;
	margin-top: 0rem;
}
/* 已同意 */

#result .ing {
    background: #ffffff;
    height: 2.2rem;
    line-height: 1.2rem;
    border-radius: .333333rem;
}

#result .ing i {
    width: .566667rem;
    height: .566667rem;
    border: .033333rem solid #00c277;
    display: inline-block;
    margin-left: .8rem;
    margin-right: .24rem;
    border-radius: 50%;
	margin-top: .9rem;
}

#result .ing text {
    color: #00c277;
    font-size: .745333rem;
}

.submit{
	width: 100%;
	position: fixed;
	top: 32rem;
	height:12rem;
	display: inline;
	
}

.submit_button_2{
	font-size: 0.9rem;
	font_weight: bold;
	height:2.2rem;
	width: 50%;
	color: red;
	background-color: #FFFFFF;
	border-radius: 0rem;
	margin: 0rem;
}
.submit_button{
	font-size: 0.9rem;
	font_weight: bold;
	height:2.2rem;
	width: 50%;
	color: #FFFFFF;
	background-color: #00C277;
	border-radius: 0rem;
	margin-left: 10rem;
	margin-top: -2.145rem;
}
.visitor_2 img{
	/* position: absolute; */
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: 1rem;
}
.visitor_2_text{
	position: absolute;
	margin-left: 5rem;
	margin-top: -3.78rem;
}
.visitor_2_text text{
	font-size: 29upx;
}
</style>