首页布局

src/views/index/calc.vue

@@ -27,13 +27,13 @@
                 <div class="form-group row">
                     <label class="col-3 col-form-label bigname">社保缴纳</label>
                     <div class="col-9">
-                        <input type="number" placeholder="3613-27786" class="form-control" v-model="data.social_value"
+                        <input type="number" placeholder="3613-27786" class="form-control"
+                            v-model.number="data.social_value"
                             :min="data.social_basic.pension[0]"
-                            :max="data.social_basic.pension[1]" required>
+                            :max="data.social_basic.pension[1]"
+                            required>
                     </div>
                 </div>
-                <!-- <el-switch v-model="data.is_fund" inactive-text="公积金缴纳" active-color="#4FDCA2">
-                </el-switch> -->
                 <div class="form-group row">
                     <label class="col-3 col-form-label bigname">公积金缴纳</label>
                     <div class="col-9">
@@ -43,15 +43,14 @@
                 <div id="fund" class="form-group row">
                     <label class="col-3 col-form-label bigname">公积金缴纳</label>
                     <div class="col-9" v-if="data.is_fund">
-                        <input type="number" placeholder="2500-27786" class="form-control" v-model="data.fund_value"
+                        <input type="number" placeholder="3613-27786" class="form-control"
+                            v-model.number="data.fund_value"
                             :min="data.social_basic.fund[0]"
                             :max="data.social_basic.fund[1]"
                             required>
                     </div>
                 </div>
                 <div class="form-group calculationBox">
-                    <!-- <a href="javascript:void(0)" class="btn btn-success btn-block"
-                    v-on:click="calcBill">开始计算</a> -->
                     <img @click="calcBill" src="../../assets/image/calculationBtn@2x.png" alt="" class="calculationBtn">
                 </div>
             </div>
@@ -62,7 +61,6 @@
                 </div>
                 <img src="../../assets/image/calcDetailTitle@2x.png" alt="" class="calcDetailTitle">
                 <div class="form-group row">
-                    <!-- <label class="col-3 col-form-label bigname">缴费明细</label> -->
                     <div class="col-12">
                         <ul class="list-group list-group-flush">
                             <li class="list-group-item d-flex justify-content-between align-items-center"
@@ -216,6 +214,8 @@
             let res = await Http.getInstance().getProvinceList();
             this.data.sheng = res.data.prolist
             this.data.shi = res.data.citylist
+
+            this.socialLimit()
         }
         async chooseShi(){
             let res = await Http.getInstance().getCityList({
@@ -239,6 +239,7 @@
                     socialType: this.data.social_type,
                     code: this.data.codes
                 });
+                console.log('社保公积金缴纳', res);
                 if(res.data){
                     this.data.social_basic = res.data;
                 }

src/views/login/login.scss

@@ -30,13 +30,14 @@
   width: 16rem;
 }
 .form-group{
-  border-bottom: 1px solid #cccccc;
+  // border-bottom: 1px solid #cccccc;
 }
 .two-imgcode{
   position: relative;
 }
 .imginput{
-  width: 60% !important;
+  // width: 60% !important;
+  width: 63% !important;
 }
 .col-5{
   max-width: 92%;
@@ -46,12 +47,17 @@
 }
 .ml-2{
   margin-left: 0.5rem !important ;
-  background: #04b954;
-  border: none;
-  font-size: 1rem;
+  // background: #04b954;
+  // border: none;
+  // font-size: 1rem;
   padding-top: 0.7rem;
-  border-radius: 2rem;
+  // border-radius: 2rem;
   height: 3rem;
+  font-size: 1.2rem;
+  color: #4FDCA2;
+  background-color: #fff;
+  border: 1px solid #4FDCA2;
+  border-radius: 0.4rem;
 }
 .mt-3{
   border: none;
@@ -60,10 +66,12 @@
   margin-left: 2rem !important;
 }
 .btn-primary{
-  background: #04b954;
+  // background: #04b954;
+  background: #4FDCA2;
   border: none;
   font-size:1.6rem ;
-  border-radius: 2rem;
+  // border-radius: 2rem;
+  border-radius: 0.4rem;
   margin-top: 4rem !important;
   height: 3.6rem;
   padding-top: 0.6rem !important;
@@ -73,10 +81,11 @@
   height: 4rem;
 }
 .col-imgcard{
-  width: 93%;
+  // width: 93%;
   height: 4rem;
   right: 0;
   //position: relative;
+  width: 92%;
 }
 .col-imgcard{
   //display: flex;
@@ -100,10 +109,11 @@
   position: absolute;
   left: 1.8rem;
   bottom: 0.1rem;
-  width: 60%;
+  // width: 60%;
+  width: 65%;
 }
 .phones{
-  width: 1.8rem ;
+  width: 1.8rem;
   height: 2.5rem;
 }
 .phoness{
@@ -126,11 +136,23 @@
   outline: none;
   margin-top: 1rem;
   margin-left: 1rem;
+  border-bottom: 1px solid #cccccc;
+  border-radius: 0;
 }
 .phone-input{
-  width: 62% !important;
+  // width: 60% !important;
+  width: 88% !important;
 }
 .fromdata-aaa{
   width:30rem;
 }
-
+// 去掉阴影
+.form-control.is-valid-fail,
+.form-control.is-valid-success,
+.form-control:focus {
+  box-shadow: none;
+  // border-color: #fff;
+}
+input:-webkit-autofill {
+  transition:background-color 5000s ease-in-out 0s;
+}

src/views/login/login.vue

@@ -7,7 +7,7 @@
         <!--</ul>-->
         <!--</div>-->
         <header class="header tc">
-            <img src="../../assets/image/login_03.png" class="d-ib logo"></header>
+            <img src="../../assets/image/login_03@2x.png" class="d-ib logo"></header>
         <div id="captcha_login" class="row login-item">
             <!--添加员工信息-->
             <form action="" class="text-left m-4 p-3 fromdata-aaa" id="form-data">
@@ -15,7 +15,7 @@
                 <div class="form-group row">
 <!--                    <label for="mobile" class="col-4 col-form-label">手机号码</label>-->
                     <div class="col-phone">
-                        <img class="phones"  src="../../assets/image/login_07.png" alt="">
+                        <img class="phones"  src="../../assets/image/login_07@2x.png" alt="">
                         <input type="text" class="form-control phone-input" placeholder="请输入手机号" id="mobile" name="username"
                                v-model="data.mobile"
                                v-bind:class="{'is-valid-success': data.errorType.mobile === true, 'is-valid-fail': data.errorType.mobile === false}"
@@ -24,7 +24,7 @@
                 </div>
                 <div class="form-group row two-imgcode">
 <!--                    <label for="verify_img" class="col-4 col-form-label">图形验证码</label>-->
-                    <img  class="phoness" src="../../assets/image/login_11.png" alt="">
+                    <img  class="phoness" src="../../assets/image/login_11@2x.png" alt="">
                     <div class="col-imgcard">
 
                         <input type="text" class="d-inline-block col-5 form-control imginput" placeholder="请输入图形验证码" id="verify_img" name="verify"
@@ -38,7 +38,7 @@
                     </div>
                 </div>
                 <div class="form-group row code-aaa" >
-                    <img  class="phoness" src="../../assets/image/login_15.png" alt="">
+                    <img  class="phoness" src="../../assets/image/login_15@2x.png" alt="">
                     <div class="col-code">
                         <input type="text" maxlength="6" class="d-inline-block col-5 form-control" placeholder="请输入短信验证码" id="verify_code" name="password"
                                v-model="data.codeVerify"

src/views/order/list.vue

@@ -43,7 +43,7 @@
                                 </p>
                             </div>
                             <!-- <hr> -->
-                            <div class="footer  align-items-center" style="justify-content: space-around;">
+                            <div class="footer  align-items-center" style="justify-content: space-between;">
                                 <button class="btn btn-info" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
                                 <button class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" @click="cancel">取消订单</button>
                                 <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" :data-type="info['order_type']"
@@ -86,7 +86,7 @@
                             </div>
                             <!-- <hr> -->
                             <div class="footer  align-items-center" style="justify-content: flex-end;">
-                                <button class="btn btn-info" style="background: #4FDCA2" @click="open">联系我们</button>
+                                <button class="btn btn-info btnLeft" style="background: #4FDCA2" @click="open">联系我们</button>
                                 <a class="btn btn-info"  style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" :data-type="info['order_type']"
                                    v-on:click="goDetail">查看信息</a>
                             </div>
@@ -129,7 +129,7 @@
                             </div>
                             <!-- <hr> -->
                             <div class="footer  align-items-center" style="justify-content: flex-end;">
-                                <button class="btn btn-info" style="background: #4FDCA2" @click="open">联系我们</button>
+                                <button class="btn btn-info btnLeft" style="background: #4FDCA2" @click="open">联系我们</button>
                                 <a class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" :data-id="info['id']" :data-key="key" :data-type="info['order_type']"
                                    v-on:click="goDetail">查看信息</a>
                             </div>
@@ -143,7 +143,7 @@
             <div class="more" v-if="data.moreShow">
                 <a href="javascript:void(0);" class="btn btn-light btn-block m-2 pt-3 pb-3" v-on:click="loadMore"
                    v-if="hasMore">点击加载更多</a>
-                <p class="text-center" v-if="!hasMore">没有更多了</p>
+                <p class="text-center" style="color:#999" v-if="!hasMore">没有更多了</p>
             </div>
         </div>
     </div>
@@ -417,7 +417,7 @@ import login from "@/store/module/login";
     }
     .list /deep/.el-tabs__item {
         color: #666;
-        font-size: 1.3rem;
+        font-size: 1.4rem;
     }
     .list /deep/.el-tabs__nav-wrap {
         background-color: #fff;
@@ -481,7 +481,7 @@ import login from "@/store/module/login";
     .list .list-group-item {
         border-radius: 0.833rem;
         // padding: .5rem;
-        padding: 1rem;
+        padding: 1rem 1rem 1.5rem 1rem;
         margin: .5rem;
         margin-bottom: 0;
         background: #fff;
@@ -492,16 +492,19 @@ import login from "@/store/module/login";
         // float: right;
         width: 100%;
         display: flex;
-        // justify-content: flex-end;
-        // justify-content: space-around;
+        padding-top: 1rem;
         .btn {
             padding: 0.375rem 0.55rem;
         }
         .btn-info{
             // margin: 0 0.5rem;
-            margin: 0 0.2rem;
             border: none;
-            border-radius: 1.5rem;
+            // border-radius: 1.5rem;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+        }
+        .btnLeft {
+            margin-right: 1rem;
         }
     }
     .footer:first-child {
@@ -516,6 +519,7 @@ import login from "@/store/module/login";
         font-size: 1.2rem;
         p{
             margin-top: 9rem;
+            color: #999
         }
     }
     .section{

src/views/social/social.ts

@@ -163,11 +163,12 @@ export default class Social extends Vue {
 
     async calcBill(event?: any) {
         let form = event ? event.target.form : document.getElementById('social-detail');
+        // console.log('form.checkValidity()', form.checkValidity());
         if (form.checkValidity() === false) {
             form.classList.add('was-validated');
             return false;
         }
-        console.log('from', form)
+        // console.log('from', form)
         let res = await Http.getInstance().calcBill(Utils.getInstance().serialize(form));
         this.data.social_calc = res.data.social;
         this.data.service_calc = res.data.service;

src/views/social/social.vue

@@ -127,7 +127,7 @@
                         <input type="number" class="form-control" id="socialBasic" name="socialBasic"
                                v-on:change="calcBill"
                                v-model="data.social_basic.pension[0]" :min="data.social_basic.pension[0]"
-                               :max="data.social_basic.pension[1]" required >
+                               :max="data.social_basic.pension[1]" required>
                         <!-- <input type="number"
                             class="form-control"
                             id="socialBasic"

src/views/user/discount.vue

@@ -437,6 +437,7 @@
         font-size: 1.2rem;
         p{
             margin-top: 9rem;
+            color: #999
         }
     }
     .backgroundColor {