242 lines
5.5 KiB
Vue
242 lines
5.5 KiB
Vue
<template>
|
||
<view>
|
||
<view id="msg">
|
||
<view class="interviewee">
|
||
<view>
|
||
<text class="input_left">到访地点</text>
|
||
<input confirmtype="text" placeholder="请填写到访地点名" readonly="false" value="福建省电力公司">
|
||
</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="false">
|
||
<button class="submit_button_2">拒绝</button>
|
||
<button class="submit_button">同意</button>
|
||
</view>
|
||
<view class="submit" @click="submit(state)" v-if="true">
|
||
<button :class="button_class">{{button_text}}</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
button_text:"取消预约",
|
||
button_class:"submit_button_2"
|
||
}
|
||
},
|
||
methods: {
|
||
submit(state){
|
||
if(state=="submit_button"){
|
||
this.button_text="取消预约",
|
||
this.button_class = "submit_button_2",
|
||
this.state="submit_button_2"
|
||
}else{
|
||
this.button_text="提交预约",
|
||
this.button_class = "submit_button",
|
||
this.state="submit_button"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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.133333rem;
|
||
border-bottom-left-radius: 0.133333rem;
|
||
}
|
||
|
||
.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: .133333rem;
|
||
}
|
||
|
||
#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; */
|
||
width: 630upx;
|
||
height: 76upx;
|
||
line-height: 76upx;
|
||
border-radius: 50upx;
|
||
margin-top: 70upx;
|
||
background-color: #00c564;
|
||
color: #fff;
|
||
}
|
||
.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; */
|
||
width: 630upx;
|
||
height: 76upx;
|
||
line-height: 76upx;
|
||
border-radius: 50px;
|
||
margin-top: 70upx;
|
||
background-color: #00c277;
|
||
color: #fff;
|
||
}
|
||
.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>
|