modify style

src/views/bonus/perf-adjustment.vue

@@ -2,10 +2,10 @@
   <div v-loading="loading">
     <div class="white-box">
       <div class="filter-user" @keyup.enter="getData()">
-        <el-input v-model="memberCode" size="small" style="width:400px;">
+        <el-input v-model="memberCode" size="small" class="custom-input">
           <template slot="prepend">{{$t('bonus.memberCode')}}</template>
         </el-input>
-        <el-button type="primary" icon="el-icon-search" size="small" @click="getData()">{{$t('common.confirm')}}<!-- 确定 --></el-button>
+        <el-button class="custom-btn-confirm" type="primary" icon="el-icon-search" size="small" @click="getData()">{{$t('common.confirm')}}<!-- 确定 --></el-button>
       </div>
 
       <div v-show="show" style="margin-top: 25px;">
@@ -13,7 +13,7 @@
           <el-col :span="16">
             <div class="grid-content bg-purple" style="width: 100%">
               <el-card class="box-card" shadow="hover">
-                <el-form ref="perfForm" :model="perfForm" status-icon label-width="250px" width="100%" class="demo-ruleForm">
+                <el-form ref="perfForm" :model="perfForm" status-icon  width="100%" class="demo-ruleForm">
                   <el-form-item v-show="false" label="Member Code" prop="USER_NAME">
                     <el-input v-model="perfForm.USER_ID" type="text" size="small" />
                     <el-input v-model="perfForm.USER_NAME" type="text" size="small" />
@@ -148,3 +148,25 @@ export default {
   .filter-user { font-size: 14px; margin-bottom: 20px; }
   .filter-user:after { content: ''; display: table;  clear: both; }
 </style>
+
+<style scoped>
+@media (min-width:500px) {
+  /deep/ .custom-input {
+    width: 400px;
+    margin-right: 20px;
+  }
+}
+
+@media (max-width:590px) {
+  /deep/ .custom-btn-confirm{
+    margin-top:10px;
+  }
+}
+
+@media (max-width:400px) {
+  /deep/ .el-divider--horizontal {
+    margin: 50px 0;
+  }
+}
+
+</style>