扫码测试

src/page/sweepCode/sweepCode.vue

 <template>
   <div id="Sweepcode">
-    <h2 class="header">应聘登记表</h2>
+    <div class="header">
+      <h3>应聘登记表</h3>
+    </div>
     <div class="sweepcode_content">
-      <Form :label-width="120" :model="formInline" :rules="ruleInline"  ref="formInline" class="fontsize">
+      <Form :label-width="120" :model="formInline" :rules="ruleInline"  ref="formInline" class="fontsize" label-position=left style="margin-left:3%">
         <FormItem label="邀约人" prop="Inviter" style="margin-top:1rem;font-size:15px">
-          <Input placeholder="请输入" style="width:250px;" v-model="formInline.Inviter" @on-focus='a' size="large"/>
+          <Input placeholder="请输入" style="width:90%;" v-model="formInline.Inviter" @on-focus='a' size="large"/>
         </FormItem>
         <FormItem label="邀约手机号" style="" >
-          <Input placeholder="请输入" style="width:250px;" v-model="formInline.InviterPhoneNumber" @on-focus='a' size="large"/>
+          <Input placeholder="请输入" style="width:90%;" v-model="formInline.InviterPhoneNumber" @on-focus='a' size="large"/>
         </FormItem> 
         <FormItem label="面试时间" prop="time">
-          <Input placeholder="请输入" style="width:120px;" v-model="formInline.date"  :readonly="true" size="large" />
+          <Input placeholder="请输入" style="width:45%;" v-model="formInline.date"  :readonly="true" size="large" />
           <!-- <DatePicker type="date" placeholder="请选择日期" style="width: 120px;margin-left:20px" v-model="formInline.date"  @on-change="selectDate" :options="options3" ></DatePicker> -->
-          <TimePicker type="time" placeholder="请选择时间" style="width: 127px" v-model="formInline.time" format="HH:mm"  @on-change="selectTime" @on-focus="defaultRRRR" :editable="false" size="large"></TimePicker>
+          <TimePicker type="time" placeholder="请选择时间" style="width: 43%" v-model="formInline.time" format="HH:mm"  @on-change="selectTime" @on-focus="defaultRRRR" :editable="false" size="large"></TimePicker>
         </FormItem>
         <FormItem label="应聘职位"   prop="position">
-          <Input placeholder="请输入" style="width:250px;" v-model="formInline.position" @on-focus='a' size="large"/>
+          <Input placeholder="请输入" style="width:90%;" v-model="formInline.position" @on-focus='a' size="large"/>
         </FormItem>
         <FormItem label="应聘来源" prop="model1">
-          <Select v-model="formInline.model1" style="width:250px;" size="large">
+          <Select v-model="formInline.model1" style="width:90%;" size="large">
             <Option v-for="item in origen" :value="item.value" :key="item.value">{{ item.label}}</Option>
           </Select>
         </FormItem> 
         <FormItem label="姓名" prop="name">
-          <Input placeholder="请与简历保持一致" style="width:250px;" v-model="formInline.name" @on-focus='a' size="large"/>
+          <Input placeholder="请与简历保持一致" style="width:90%;" v-model="formInline.name" @on-focus='a' size="large"/>
         </FormItem>
         <FormItem label="手机号码"  prop="phoneNUmber">
-          <Input placeholder="请输入" style="width:250px;" v-model="formInline.phoneNUmber" @on-focus='a' size="large"/>
+          <Input placeholder="请输入" style="width:90%;" v-model="formInline.phoneNUmber" @on-focus='a' size="large"/>
         </FormItem>
         <FormItem label="是否携带简历"   prop="model2">
-          <Select v-model="formInline.model2" style="width:250px;" size="large">
+          <Select v-model="formInline.model2" style="width:90%;" size="large">
             <Option v-for="item in isGET" :value="item.value" :key="item.value">{{ item.label }}</Option>
           </Select>
         </FormItem>     
       </Form>
-      <div class="submission">
-        <Button type='primary' @click="confirmSubmission" class="utbuton" >提交</Button>
-      </div>
+    </div>
+    <div class="submission">
+      <Button type='primary' @click="confirmSubmission" class="utbuton" >提交</Button>
     </div>
     <Modal
       v-model="modal3"
@@ -247,25 +249,29 @@ export default {
 </script>
 
 <style scoped>
+ #Sweepcode{
+   height: 100%;
+   width:100%;
+ }
   .header{
     font-size: 19px;
     text-align: center;
-    margin-top:10px
+    height: 8%;
   }
   .utbuton{
-    /* position: fixed;
-    bottom: 1rem; */
-    margin-top: 1rem;
     margin-left: 31%;
     width:45%;
     height: 2.2rem;
     font-size: 1.4rem;
     line-height: 1.4rem;
+    height: 20%;
+    margin-top: 20%
   }
   
   .sweepcode_content{
     margin-top:0.2rem;
     font-size: 15px;
+    height: 70%;
     border-top: 1px solid rgba(241,241,241,1);
   }