调整样式

pages/frontend/skill_cert/profile.vue

@@ -26,6 +26,7 @@
     methods: {
       async getDetail() {
         let res = await this.$axios.$post(`/uapi/cert/info`);
+        res.data.step = 2
         this.form = res.data;
       },
       set_step(step)

pages/frontend/skill_cert/resume_improve.vue

@@ -4,13 +4,10 @@
     <flow :dataList="flowList"></flow>
     <div class="page-content">
       <div class="col-title width-infinity">
-        <span class="label">1.薪资情况</span>
+        <span class="label require">薪资情况</span>
       </div>
       <p class="field-tips">
-        薪资用于协定技术等级和参考日薪；
-      </p>
-      <p class="field-tips">
-        客栈将竭尽全力保护您的隐私
+        薪资用于协定技术等级和参考日薪； 客栈将竭尽全力保护您的隐私
       </p>
 
       <div class="ma-form-item">
@@ -20,7 +17,6 @@
           placeholder="请输入"
           class="ma-input"
         >
-          <template slot="append">元/月</template>
         </el-input>
       </div>
       <div class="ma-form-item">
@@ -30,12 +26,12 @@
           placeholder="请输入"
           class="ma-input"
         >
-          <template slot="append">元/日</template>
         </el-input>
+        <div>元/日</div>
       </div>
 
       <div class="col-title width-infinity">
-        <span class="label">2.上传薪资证明</span>
+        <span class="label require">上传薪资证明</span>
       </div>
 
       <div class="width-infinity upload-action">
@@ -76,7 +72,7 @@
       </div>
 
       <div class="col-title width-infinity">
-        <span class="label">3.核对联系微信</span>
+        <span class="label require">核对联系微信</span>
       </div>
 
       <div class="ma-form-item">
@@ -85,7 +81,7 @@
       </div>
 
       <div class="col-title width-infinity">
-        <span class="label">4.其他补充</span>
+        <span class="label">其他补充（可选）</span>
       </div>
       <div class="ma-form-item">
         <el-input
@@ -107,7 +103,6 @@
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
-
   </div>
 </template>
 
@@ -126,11 +121,11 @@ export default {
       flowList: [
         {
           active: true,
-          label: "基础信息"
+          label: "完善简历"
         },
         {
           active: true,
-          label: "完善简历"
+          label: "薪资核对"
         },
         {
           active: false,
@@ -159,11 +154,9 @@ export default {
       dialogVisible: false
     };
   },
-  watch:{
-    "form":{
-      handler: function(){
-
-      },
+  watch: {
+    form: {
+      handler: function() {},
       deep: true
     }
   },
@@ -200,7 +193,7 @@ export default {
           .then(value => {
             if (value.status === 1) {
               this.$confirm(
-                '<p class="ma-dialog-tips">主页简历将作为面试依据，<br/>请务必在面试前完善简历！</p>',
+                '<p class="ma-dialog-tips">主页简历将作为面试依据，请务必在面试前完善简历！</p>',
                 "已成功提交！",
                 {
                   confirmButtonText: "去 完 善",
@@ -210,7 +203,10 @@ export default {
                   showClose: false,
                   closeOnClickModal: false,
                   closeOnPressEscape: false,
-                  dangerouslyUseHTMLString: true
+                  dangerouslyUseHTMLString: true,
+                  customClass: "ma-dialog",
+                  cancelButtonClass: "ma-dialog-cancel",
+                  confirmButtonClass: "ma-dialog-submit"
                 }
               )
                 .then(() => {
@@ -274,7 +270,7 @@ export default {
   margin: 10px auto;
   background: #ffffff;
   border-radius: 10px;
-  padding: 0 85px;
+  // padding: 0 85px;
 
   @media (max-width: 768px) {
     padding: 0 15px;
@@ -333,10 +329,11 @@ export default {
 .col-title {
   position: relative;
   line-height: 43px;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 40px;
+  // margin-bottom: 20px;
 
   &:nth-child(1) {
+    margin-top: 27px;
     // margin-top:0
   }
 
@@ -358,15 +355,21 @@ export default {
     font-weight: 600;
     color: #222;
     padding: 0 10px;
+    &.require {
+      &::after {
+        content: "*";
+        color: #f00;
+      }
+    }
   }
 }
 
 .field-tips {
   margin-top: 5px;
-  font-size: 15px;
-  font-family: PingFangSC, PingFangSC-Regular, sans-serif;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #222;
+  color: #606266;
   line-height: 24px;
 }
 
@@ -376,21 +379,83 @@ export default {
   margin-top: 10px;
 
   .label {
-    font-size: 16px;
-    // font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
-    color: #222;
-    // padding: 0 10px;
-    width: 180px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #000000;
+    width: 150px;
   }
 
   .ma-input {
-    flex: 1;
+    // flex: 1;
+    width: 100px;
+    margin-right: 10px;
+  }
+}
+</style>
+<style lang="scss">
+.ma-dialog {
+  width: 320px;
+  border-radius: 8px;
+  padding-bottom: 0;
+  .el-message-box__btns {
+    height: 57px;
+    border-top: 1px solid #e8e8e8;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 1px;
+      height: 57px;
+      left: 50%;
+      top: 0;
+      background-color: #e8e8e8;
+      transform: translateX(-50%);
+    }
   }
 }
-
 .ma-dialog-tips {
   text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0b121a;
+  line-height: 21px;
+}
+.ma-dialog-cancel {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99 !important;
+  line-height: 57px;
+  border: none !important;
+  background: none !important;
+  padding: 0;
+}
+.ma-dialog-submit {
+  flex: 1;
+  text-align: center;
   font-size: 16px;
-  line-height: 1.5;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #308eff !important;
+  line-height: 57px;
+  border: none !important;
+  padding: 0;
+  background: none !important;
+}
+.upload-demo{
+  .el-upload{
+    display: block;
+    .el-upload-dragger{
+      width:auto
+    }
+  }
 }
 </style>