登录模块,新增加图片

src/assets/scss/pages/login.scss

@@ -13,7 +13,8 @@
     content: "";
   }
   &::before {
-    background-image: url(~@/assets/imgs/login/bg.png);
+    // background-image: url(~@/assets/imgs/login/bg.png);
+    background-color:#f5f7fa ;
     background-size: cover;
   }
   &::after {
@@ -28,8 +29,13 @@
   right: 0;
   left: 0;
   margin: auto;
-  width: 650px;
+  width: 1200px;
-  height: 500px;
+  height: 586px;
+  display: flex;
+  justify-content: space-around;
+  box-shadow: 0px 9px 28px 8px rgba(0,86,214,0.05), 0px 6px 16px 0px rgba(0,86,214,0.08), 0px 3px 6px -4px rgba(0,86,214,0.12);
+  border-radius: 4px;
+  animation: fm-f6957b98 0.33s ease-out;
 
   @keyframes title {
     0% {
@@ -52,16 +58,15 @@
   }
 
   .title {
-    margin: 0 auto;
+    margin: 0 0 64px 80px;
-    text-align: center;
+    text-align: left;
     line-height: 80px;
-    font-size: 41px;
+    font-size: 24px;
-    font-family: "思源宋体";
+    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: bold;
+    font-weight: 600;
-    color: #ffffff;
+    // background: linear-gradient(0deg, #0385ff 0%, #ffffff 50%, #ffffff 100%);
-    background: linear-gradient(0deg, #0385ff 0%, #ffffff 50%, #ffffff 100%);
     -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    // -webkit-text-fill-color: transparent;
     animation: title 0.33s * 1.5 ease-out;
   }
 
@@ -91,7 +96,6 @@
       top: 70px;
       width: 54px;
       height: 377px;
-      animation: decorationLeft 0.33s ease-out;
     }
     .i-right {
       position: absolute;
@@ -117,46 +121,37 @@
 
   .fm {
     box-sizing: border-box;
-    margin: -30px auto 0;
+    // margin: -30px auto 0;
-    padding: 110px 150px 50px;
+    // padding: 110px 150px 50px;
-    width: 555px;
+    height: 100%;
-    height: 368px;
+    flex:1;
-    background-image: url(~@/assets/imgs/login/card-bg.png);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    // background-image: url(~@/assets/imgs/login/card-bg.png);
+    background-color: #fff;
     background-size: cover;
-    animation: fm 0.33s ease-out;
-
     .fm-item {
       box-sizing: border-box;
       margin: 0 auto;
       margin-bottom: 16px;
-      width: 255px;
+      width: 320px;
       height: 38px;
       line-height: 38px;
-      background: #102163;
       display: flex;
       align-items: center;
 
       .input {
-        width: 85%;
+        width: 100%;
         margin-bottom: 0;
-
+        background-color: #fff;
         input {
+          background-color: #fff;
           display: block;
           padding-left: 0;
           line-height: 38px;
           height: 38px;
           width: 100%;
-          border: none;
-          background-color: transparent;
-          color: #fff;
-          font-size: 14px;
-
-          &::placeholder {
-            color: #d7d7d7;
-          }
-          &:active {
-            background-color: transparent;
-          }
         }
       }
 
@@ -181,22 +176,27 @@
       box-sizing: border-box;
       margin: 0 auto;
       margin-bottom: 16px;
-      width: 255px;
+      position: relative;
+      width: 320px;
       display: flex;
       align-items: center;
-
+      justify-content: space-around;
       .fm-item {
         margin: 0;
-        width: 140px;
+        width: 50%;
+        margin-right: 8px;
         .input {
-          width: 70%;
+          width: 100%;
+        }
+        .suffix{
+          position: absolute;
+          left: -139px;
         }
       }
 
       .captcha {
         position: relative;
-        margin-left: auto;
+        width: 50%;
-        width: 105px;
         height: 38px;
 
         img {
@@ -213,12 +213,12 @@
       box-sizing: border-box;
       margin: 0 auto;
       margin-top: 30px;
-      width: 255px;
+      width: 320px;
       height: 38px;
-      background: linear-gradient(0deg, #0061ff 0%, #0096ff 100%);
+      background: #0056d6;
       border-radius: 2px;
       line-height: 38px;
-      font-size: 20px;
+      font-size: 16px;
       font-weight: 500;
       color: #ffffff;
       text-align: center;
@@ -275,3 +275,15 @@
     }
   }
 }
+::v-deep .el-input--medium .el-input__inner {
+  padding-left: 30px !important;
+ }
+.suffix{
+  float: left;
+  position: absolute;
+  left: -303px;
+  top: -1px;
+}
+.loginLeftBox{
+
+}

src/views/modules/shequ/cpts/peopleDetail.vue

@@ -16,7 +16,7 @@
         <div class="title-small top40">基本信息</div>
         <div :key="'fieldSubList' + index"
              v-for="(fieldSubList, index) in fieldList">
-          <div class="list">
+          <div class="list" :class="{'listTransform':index==1}">
             <div class="item"
                  v-if="index == 0">
               <span class="item-field">所属网格：</span>
@@ -38,16 +38,23 @@
               <span>{{ homeName }}</span>
             </div>
             <div class="item"
+            :class="{'width-40':index==1}"
                  :key="field.itemId"
-                 v-for="field in fieldSubList">
+                 v-for="field in fieldSubList"
-              <span class="item-field">{{field.label}}： </span>
+                 v-if="info[field.columnName]!=0"
+               >
+              <span class="item-field">{{field.label}}<span v-if="field.itemType!='radio'"> ：</span> </span>
               <span v-if="field.columnName==='MOBILE'||field.columnName==='ID_CARD'">{{ info[field.columnName]||'--'}}</span>
               <span v-else-if="
                   field.itemType == 'select' ||
                   field.itemType == 'radio' ||
                   field.itemType == 'checkbox' ||
                   field.itemType == 'cascader' 
-                ">{{
+                ">
+                  <span v-if=" field.columnName=='IS_BDHJ' ||
+                 field.columnName=='GENDER' ||
+                 field.columnName=='MZ'">
+                    {{
                   info[field.columnName] == null
                     ? "--"
                     : getOptionLabel(
@@ -55,7 +62,9 @@
                         info[field.columnName],
                         field.itemType
                       )
-                }}</span>
+                }}
+                  </span>
+                </span>
 
               <span v-else>{{
                 info[field.columnName] == null ? "--" : info[field.columnName]
@@ -63,7 +72,9 @@
             </div>
           </div>
 
-          <div class="title-small top40"> {{index==0? '分类信息':'其他信息'}}</div>
+          <div class="title-small top40 div-mult-table "> {{index==0? '分类信息':'其他信息'}}
+            <section v-show="index==0 " style="position:absolute;top:42px;left: 20px;" class="font14">居民分类: </section>
+          </div>
         </div>
         <!-- 详情下方tab -->
         <el-tabs class="top32"  @tab-click="handlTabs">
@@ -538,6 +549,7 @@ export default {
             }
           });
         });
+        console.log(this.fieldList,4435345)
       } else {
         this.$message.error(msg);
       }
@@ -728,5 +740,26 @@ export default {
   right: 35px;
   top: 5px;
 }
-
+.m-pop .wrap{
+  width: 820px;
+height: 848px;
+}
+.m-pop .wrap .wrap2 {
+  width: 820px;
+height: 848px;
+}
+.m-pop .wrap .list .item{
+    width: 48% !important;
+    font-size: 14px;
+    
+  }
+  .m-pop .wrap .list .width-40{
+    width: 17% !important;
+  }
+.listTransform{
+  transform: translateX(55px);
+}
+  .div-mult-table section {
+    color: #ccc;
+  }
 </style>

src/views/pages/login.vue

@@ -2,54 +2,60 @@
   <div class="g-app">
     <div class="g-bd" v-if="isShowLogin || true">
       <div class="m-fm">
-        <h2 class="title">{{ $t("brand.work") }}</h2>
+      <div class="loginLeftBox">
-        <div class="decoration">
+        <img src="@/assets/img/login/loginLeft.png" class="i-left">
-          <img src="@/assets/imgs/login/big-arrow-left.png" class="i-left" />
+      </div>
-          <img src="@/assets/imgs/login/big-arrow-right.png" class="i-right" />
-        </div>
         <div class="fm">
+          <h2 class="title">{{ $t("brand.work") }}</h2>
           <el-form
             :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmitHandle()"
-            status-icon
           >
             <div class="fm-item">
-              <div class="ico">
-                <img src="@/assets/imgs/login/i-people.png" alt="" />
-              </div>
               <el-form-item prop="phone" class="input">
-                <input
+                <el-input
                   type="text"
                   v-model="dataForm.phone"
                   placeholder="账号"
-                />
+                >
+                <template slot='suffix'>
+                  <div class="suffix"><img src="@/assets/images/index/i-people.png" alt="">
+                  </div>
+                 </template>
+                 </el-input>
               </el-form-item>
             </div>
             <div class="fm-item">
-              <div class="ico">
-                <img src="@/assets/imgs/login/i-lock.png" alt="" />
-              </div>
               <el-form-item prop="password" class="input">
-                <input
+                <el-input
                   type="password"
                   v-model="dataForm.password"
                   :placeholder="$t('login.password')"
-                />
+               >
+               <template slot='suffix'>
+                 <div class="suffix">
+                  <img src="@/assets/images/index/i-lock.png" alt=""/>
+                 </div>
+                 </template>
+               </el-input>
               </el-form-item>
             </div>
             <div class="fm-captcha">
               <div class="fm-item">
-                <div class="ico">
-                  <img src="@/assets/imgs/login/i-code.png" alt="" />
-                </div>
                 <el-form-item prop="captcha" class="input">
-                  <input
+                  <el-input
                     type="text"
                     v-model="dataForm.captcha"
                     placeholder="验证码"
-                  />
+                  > 
+                  <template slot='suffix'>
+                    <div  class="suffix">
+                    <img src="@/assets/images/index/i-code.png" alt=""/>
+                  </div>
+                 </template>
+                </el-input>
                 </el-form-item>
               </div>
               <div class="captcha">
@@ -64,13 +70,13 @@
         </div>
       </div>
 
-      <div class="m-footer">
+      <!-- <div class="m-footer">
         <div class="login-footer">
           <p>
             <a href="" target="_blank">{{ $t("login.copyright") }}</a>
           </p>
         </div>
-      </div>
+      </div> -->
     </div>
 
     <c-dialog