Merge branch 'dev-majunjie' into dev

components/public/occupation_direction.vue

@@ -1,28 +1,47 @@
 <template>
-  <div>
-    <el-cascader
-      :options="list"
-    ></el-cascader>
-  </div>
+<div>
+    <el-cascader :options="list" v-model="value" @change="change"></el-cascader>
+</div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      list: []
-    };
-  },
-  async mounted() {
-    const res = await this.$axios.$post("/uapi/work/get/get.occupation.direction.form.sign.new");
-    this.list=res.data.list;
-  },
-  methods: {
+    data() {
+        return {
+            value: [],
+            list: []
+        };
+    },
+    async mounted() {
+        const res = await this.$axios.$post(
+            "/uapi/work/get/get.occupation.direction.form.sign.new"
+        );
+        this.list = res.data.list;
+    },
+    methods: {
+        getValue(arr) {
+            if (!arr || arr.length == 0) {
+                this.$message.error("请选择方向");
+            }
+            let result = [];
+            let target = this.list;
 
-  }
+            arr.forEach(selectItem => {
+                let {
+                    children,
+                    ...options
+                } = target.find(item => item.value == selectItem)
+                result.push(options);
+                target = children;
+            });
+            return result
+        },
+        change(e) {
+            let result = this.getValue(e)
+            this.$emit('change', result)
+        }
+    }
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

components/skill_cert_header/skill_cert_header.vue

@@ -1,73 +1,76 @@
 <template>
-  <div class="skill-cert-header">
+<div class="skill-cert-header">
     <div class="page-title">
-      <span class="text">{{title}}</span>
-      <span class="cert-status">未认证</span>
+        <span class="text">{{title}}</span>
+        <span class="cert-status">{{isCert ? '已认证':'未认证'}}</span>
     </div>
     <div class="divider"></div>
-  </div>
+</div>
 </template>
 
 <script>
-  export default {
+export default {
     name: "skill_cert_header",
     props: {
-      title: {
-        type: String,
-        default: ''
-      }
+        title: {
+            type: String,
+            default: ''
+        },
+        isCert: {
+            type: Boolean,
+            default: false
+        }
     }
-  }
+}
 </script>
 
 <style lang="scss" scoped>
-  .skill-cert-header {
+.skill-cert-header {
     display: flex;
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
 
     .page-title {
-      width: 100%;
-      position: relative;
-      height: 75px;
+        width: 100%;
+        position: relative;
+        height: 75px;
 
-      .text {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 24px;
-        font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
-        font-weight: 600;
-        color: #222222;
-        text-align: center;
-      }
+        .text {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            font-family: PingFangSC, PingFangSC-Semibold, sans-serif;
+            font-weight: 600;
+            color: #222222;
+            text-align: center;
+        }
 
-      .cert-status {
-        position: absolute;
-        width: 61px;
-        height: 30px;
-        opacity: 0.8;
-        background: #efefef;
-        border-radius: 4px;
+        .cert-status {
+            position: absolute;
+            width: 61px;
+            height: 30px;
+            opacity: 0.8;
+            background: #efefef;
+            border-radius: 4px;
 
-        font-size: 13px;
-        font-family: PingFangSC, PingFangSC-Regular, sans-serif;
-        font-weight: 400;
-        text-align: center;
-        color: #666666;
-        line-height: 30px;
-        right: 0;
-        top: 22px;
-      }
+            font-size: 13px;
+            font-family: PingFangSC, PingFangSC-Regular, sans-serif;
+            font-weight: 400;
+            text-align: center;
+            color: #666666;
+            line-height: 30px;
+            right: 0;
+            top: 22px;
+        }
     }
 
     .divider {
-      width: 110%;
-      height: 2px;
-      border: 1px solid rgba(0, 0, 0, 0.06);
-      transform: translate(-4.5%, 0);
+        width: 100%;
+        height: 2px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
     }
-  }
+}
 </style>

pages/frontend/skill_cert/add.vue

@@ -33,9 +33,10 @@
         <div class="field-selector skill-cert-status-main">
           <span class="selector-title">选择认证方向:</span>
           <div class="fields skill-cert-select">
-            <occupation_direction />
+            <occupation_direction @change="directionChange"/>
           </div>
-          <div class="skill-cert-status">已认证</div>
+
+          <div class="skill-cert-status">{{freeworkLevel == 0 ? '未认证':'技术'+freeworkLevel+"级"}}</div>
         </div>
         <div class="skill-cret-list">
           <skills></skills>
@@ -44,12 +45,12 @@
 
 
       <!-- 技能认证：end -->
-      <div class="level-selector" @click="toLevelsDesc">
+      <div class="level-selector">
         <div class="col-title">
           <span class="label">选择认证等级</span>
         </div>
-        <span class="action">等级对照表</span>
-        <img class="icon" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
+        <span class="action"  @click="toLevelsDesc">等级对照表</span>
+        <img class="icon"  @click="toLevelsDesc" src="@/assets/img/skill_cert/icon_tips.png" alt=""/>
       </div>
       <div class="level-selector">
         <el-select v-model="level" placeholder="认证等级" clearable @change="handleLevelChange">
@@ -109,7 +110,7 @@
   import flow from "@/components/flow/flow";
   import skillCertHeader from "@/components/skill_cert_header/skill_cert_header";
   import occupation_direction from "@/components/public/occupation_direction";
-  import skills from "@/components/sign/skills";
+  import skills from "./components/skills";
   import resume_improve from "./resume_improve";
 
   export default {
@@ -179,6 +180,10 @@
         fileList: [],
         level: '',
         price: '',
+
+        directionFirstLevelValue:"",
+        directionSecondLevelValue:"",
+        freeworkLevel:0,
       };
     },
     computed: {
@@ -254,12 +259,21 @@
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
       },
+      directionChange(value) {
+        let firstItem = value[0]
+        let secondItem = value[1]
+
+        this.directionFirstLevelValue = firstItem.value;
+        this.directionSecondLevelValue = secondItem.value;
+
+        this.freeworkLevel = secondItem.freework_level
+      },
       submit() {
         const form = {
           product_type: 12,
           item_id: this.level,
-          occupation_id: 1,//一级方向
-          direction_id: 1,//二级方向
+          occupation_id: this.directionFirstLevelValue,//一级方向
+          direction_id: this.directionSecondLevelValue,//二级方向
           file: this.fileList.map((ele) => ele.response.filename).join(','),
           id: this.form.id || ''
         };
@@ -309,12 +323,12 @@
   .container {
     display: flex;
     width: 100%;
-    max-width: 1000px;
+    max-width: 1200px;
     margin: 10px auto;
     background: #ffffff;
     border-radius: 10px;
-    padding: 0 85px;
-    @media(max-width: 768px) {
+    padding: 0 25px;
+    @media(max-width: 900px) {
       padding: 0 15px;
     }
     box-sizing: border-box;
@@ -617,9 +631,8 @@
       }
   }
   .skill-cert-select{
-    flex:1
+    flex:1;
+    margin-right: 20px;
   }
-  // .skill-cert-status{
-  //     align-self:flex-end;
-  //   }
+
 </style>

pages/frontend/skill_cert/components/skills.vue

@@ -1,340 +1,378 @@
 <template>
-  <div class="skill" id="skill">
+<div class="skill" id="skill" :class="mobile? 'mobile' : ''">
     <header>
-      <h5>技能</h5>
-      <span>
-        <el-button @click="handleAdd" type="text" icon="el-icon-plus"></el-button>
-      </span>
+        <h5>技能</h5>
+        <span>
+            <el-button @click="handleAdd" type="text" icon="el-icon-plus"></el-button>
+        </span>
     </header>
     <div v-if="skills.length > 0">
-      <template v-for="(item, idx) in skills">
-        <div v-if="editingItem.indexOf(idx) < 0" :key="item.skill_name" class="show">
-          <h4>
-            <span>{{`技能名称: ${item.skill_name} 经验自评：${item.skill_level}分 `}}</span>
-            <el-button @click="editItem(idx)" type="text">编辑</el-button>
-          </h4>
-        </div>
-        <div v-else :key="`skill_${item.skill_id}`" class="edit">
-          <el-form ref="form" :rules="rules" :model="item" label-width="80px">
-            <div class="header">
-              <el-form-item label="技能名称" prop="skill_name">
-                <el-cascader
-                  v-model="item.skill_name"
-                  :show-all-levels="false"
-                  :placeholder="item.skill_name || '请选择单个技能'"
-                  :options="skillList"
-                  :props="{ expandTrigger: 'hover',emitPath:'false' }"/>
-              </el-form-item>
-              <el-form-item label="经验自评" prop="skill_level">
-                <el-select :style="{width: '130px'}" v-model="item.skill_level" placeholder="选择分数">
-                  <el-option v-for="level in 5" :label="`${level}分`" :key="level" :value="level"></el-option>
-                </el-select>
-              </el-form-item>
-              <span class="tips">1分为新入门，5分为满分</span>
-              <span class="opts">
-                <el-button type="danger" @click="handleDelete(item, idx)">删除</el-button>
-                <el-button type="info" @click="handleCancel(item, idx)">取消</el-button>
-                <el-button type="primary" @click="onSubmit(item, idx)">保存</el-button>
-              </span>
+        <div class="skill-item" v-for="(item, idx) in skills" :key="item.skill_id">
+            <div v-if="editingItem.indexOf(idx) < 0" class="show">
+                <h4>
+                    <span>{{`技能名称: ${item.skill_name} 经验自评：${item.skill_level}分 `}}</span>
+                    <el-button @click="editItem(idx)" type="text">编辑</el-button>
+                </h4>
+            </div>
+            <div v-else class="edit">
+                <el-form ref="form" :label-position=" mobile ?'top':'left'" :inline="mobile ? false : true" size="medium" :rules="rules" :model="item" label-width="80px">
+                    <el-form-item label="技能名称" prop="skill_name">
+                        <el-cascader v-model="item.skill_name" :show-all-levels="false" :placeholder="item.skill_name || '请选择单个技能'" :options="skillList" :props="{ expandTrigger: 'hover',emitPath:'false' }" />
+                    </el-form-item>
+                    <el-form-item label="经验自评" prop="skill_level">
+                        <el-select v-model="item.skill_level" placeholder="选择分数">
+                            <el-option v-for="level in 5" :label="`${level}分`" :key="level" :value="level"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label-width="0">
+                        <p class="tips">1分为新入门，5分为满分</p>
+                    </el-form-item>
+
+                    <el-form-item label-width="0" class="skill-form-btn-area">
+                        <el-button type="danger" @click="handleDelete(item, idx)">删除</el-button>
+                        <el-button type="info" @click="handleCancel(item, idx)">取消</el-button>
+                        <el-button type="primary" @click="onSubmit(item, idx)">保存</el-button>
+                    </el-form-item>
+                </el-form>
             </div>
-          </el-form>
         </div>
-      </template>
     </div>
     <div v-else class="empty">点击右上角“添加”按钮添加技能</div>
-  </div>
+</div>
 </template>
 
 <script>
-  import uploader from "@/components/uploader";
+import uploader from "@/components/uploader";
 
-  export default {
+export default {
     data() {
-      return {
-        // editing: true,
-        editingItem: [],
-        rules: {
-          // skill_name: [{ required: true, message: "请输入技能全名", trigger: "blur" }]
-        },
-        init: {
-          skill_name: "123",
-          skill_level: "",
-          skill_id: ""
-        },
-        skills: [
-          // {
-          //   skill_name: "Javscript",
-          //   skill_level: "5"
-          // }
-        ],
-        originSkills: [],
-        current: null,
-        skillList: [],
-        loadingSkill: false
-      };
+        return {
+            // editing: true,
+            editingItem: [],
+            rules: {
+                // skill_name: [{ required: true, message: "请输入技能全名", trigger: "blur" }]
+            },
+            init: {
+                skill_name: "",
+                skill_level: "",
+                skill_id: ""
+            },
+            skills: [
+                // {
+                //   skill_name: "Javscript",
+                //   skill_level: "5"
+                // }
+            ],
+            originSkills: [],
+            current: null,
+            skillList: [],
+            loadingSkill: false,
+            mobile: this.$deviceType.isMobile()
+        };
     },
     components: {
-      uploader
+        uploader
     },
     computed: {},
     watch: {},
     async mounted() {
-      this.getData();
-      this.fetchSkill();
+        this.getData();
+        this.fetchSkill();
     },
     methods: {
-      async getData() {
-        let res = await this.$axios.$post("/api/user_skills/list_by_user");
-        this.skills = res.data || [];
-      },
-      async onSubmit(item, idx) {
-        this.cnzz("签约","签约页面+技能保存","");
-        console.log("submit!", item);
-        if (!item.skill_name) {
-          this.$message.error("请填写技能名称!");
-          return;
-        }
-        if (!item.skill_level) {
-          this.$message.error("请选择技能自评!");
-          return;
-        }
-        if (item.skill_name.indexOf(",") > -1) {
-          const skills = item.skill_name.split(",");
-          console.log(skills);
-          item.skill_name = skills[skills.length - 1];
-          console.log("--------------", item.skill_name);
-        }
+        async getData() {
+            let res = await this.$axios.$post("/api/user_skills/list_by_user");
+            this.skills = res.data || [];
+        },
+        async onSubmit(item, idx) {
+            this.cnzz("签约", "签约页面+技能保存", "");
+            console.log("submit!", item);
+            if (!item.skill_name) {
+                this.$message.error("请填写技能名称!");
+                return;
+            }
+            if (!item.skill_level) {
+                this.$message.error("请选择技能自评!");
+                return;
+            }
+            if (item.skill_name.indexOf(",") > -1) {
+                const skills = item.skill_name.split(",");
+                console.log(skills);
+                item.skill_name = skills[skills.length - 1];
+                console.log("--------------", item.skill_name);
+            }
 
-        if (item.skill_name instanceof Array && item.skill_name.length > 0) {
-          item.skill_name = item.skill_name[item.skill_name.length - 1];
-        }
-        const data = {
-          skill_level: item.skill_level,
-          skill_name: item.skill_name
-        };
-        if (item.skill_id) {
-          data.skill_id = item.skill_id;
-        }
-        if (item.id) {
-          data.id = item.id;
-        }
-        const res = await this.$axios.$post("/api/user_skills/save", data);
-        if (res.status === 1) {
-          this.$message.success("保存成功！");
-          this.init = {
-            skill_name: "",
-            skill_level: "",
-            skill_id: ""
-          };
-          this.editingItem = [];
-          this.originSkills.splice(idx, 1, item);
-        } else {
-          // this.$message.error(res.info);
-        }
-      },
-      async fetchSkill(keyword) {
-        this.loadingSkill = true;
-        const res = await this.$axios.$post("api/userSkills/getSkillList", {
-          keyword
-        });
-        this.loadingSkill = false;
-        const data = res.data || [];
-        this.skillList = data.map(it => {
-          let children = [];
-          if (it.child && it.child.length > 0)
-            children = it.child.map(child => ({label: child.skill_name, value: child.skill_name}));
-          return {value: it.occupation_name, label: it.occupation_name, children: children}
-        });
-      },
-      handleAdd() {
-        if (this.editingItem.length > 0 && !this.skills[this.editingItem[0]].id) {
-          this.$message.error("请先保存现有修改");
-          return;
-        }
-        this.skills.push(this.init);
-        this.editingItem = [this.skills.length - 1];
-      },
-      async handleDelete(item, idx) {
-        const deleteComplete = () => {
-          this.$message({
-            type: "success",
-            message: "删除成功!"
-          });
-          this.skills.splice(idx, 1);
-          this.editingItem = [];
-        };
-        this.$confirm("确认删除该技能?", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(async () => {
+            if (item.skill_name instanceof Array && item.skill_name.length > 0) {
+                item.skill_name = item.skill_name[item.skill_name.length - 1];
+            }
+            const data = {
+                skill_level: item.skill_level,
+                skill_name: item.skill_name
+            };
+            if (item.skill_id) {
+                data.skill_id = item.skill_id;
+            }
             if (item.id) {
-              const res = await this.$axios.$post("/api/user_skills/delete", {
-                id: item.id
-              });
-              if (res.status === 1) {
-                deleteComplete();
-                this.getData();
-              }
+                data.id = item.id;
+            }
+            const res = await this.$axios.$post("/api/user_skills/save", data);
+            if (res.status === 1) {
+                this.$message.success("保存成功！");
+                this.init = {
+                    skill_name: "",
+                    skill_level: "",
+                    skill_id: ""
+                };
+                this.editingItem = [];
+                this.originSkills.splice(idx, 1, item);
             } else {
-              deleteComplete();
+                // this.$message.error(res.info);
             }
-          })
-          .catch(err => {
-            console.log(err);
-            this.$message({
-              type: "info",
-              message: "已取消删除"
+        },
+        async fetchSkill(keyword) {
+            this.loadingSkill = true;
+            const res = await this.$axios.$post("api/userSkills/getSkillList", {
+                keyword
             });
-          });
-      },
-      handleCancel(item, idx) {
-        this.editingItem = [];
-        if (!item.skill_id) {
-          this.skills.splice(idx, 1);
+            this.loadingSkill = false;
+            const data = res.data || [];
+            this.skillList = data.map(it => {
+                let children = [];
+                if (it.child && it.child.length > 0)
+                    children = it.child.map(child => ({
+                        label: child.skill_name,
+                        value: child.skill_name
+                    }));
+                return {
+                    value: it.occupation_name,
+                    label: it.occupation_name,
+                    children: children
+                }
+            });
+        },
+        handleAdd() {
+            if (this.editingItem.length > 0 && !this.skills[this.editingItem[0]].id) {
+                this.$message.error("请先保存现有修改");
+                return;
+            }
+            if (this.skills.length >= 6) {
+                this.$message.error("最多添加6项");
+                return;
+            }
+            this.skills.push(this.init);
+            this.editingItem = [this.skills.length - 1];
+
+            this.$nextTick(() => {
+
+                let ele_top = document.querySelector('.edit').offsetTop
+                let clientHeight = document.documentElement.clientHeight
+                document.documentElement.scrollTop = ele_top - (clientHeight / 2) + 100
+            })
+        },
+        async handleDelete(item, idx) {
+            const deleteComplete = () => {
+                this.$message({
+                    type: "success",
+                    message: "删除成功!"
+                });
+                this.skills.splice(idx, 1);
+                this.editingItem = [];
+            };
+            this.$confirm("确认删除该技能?", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                })
+                .then(async () => {
+                    if (item.id) {
+                        const res = await this.$axios.$post("/api/user_skills/delete", {
+                            id: item.id
+                        });
+                        if (res.status === 1) {
+                            deleteComplete();
+                            this.getData();
+                        }
+                    } else {
+                        deleteComplete();
+                    }
+                })
+                .catch(err => {
+                    console.log(err);
+                    this.$message({
+                        type: "info",
+                        message: "已取消删除"
+                    });
+                });
+        },
+        handleCancel(item, idx) {
+            this.editingItem = [];
+            if (!item.skill_id) {
+                this.skills.splice(idx, 1);
+            }
+        },
+        editItem(idx) {
+            console.log("editItem:" + idx);
+            this.editingItem = [idx];
         }
-      },
-      editItem(idx) {
-        console.log("editItem:" + idx);
-        this.editingItem = [idx];
-      }
     }
-  };
+};
 </script>
 
 <style lang="scss" scoped>
-  .skill {
+.skill {
     header .el-icon-plus {
-      font-size: 18px;
+        font-size: 18px;
     }
-    header{
-      display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 13px 0px;
-    border-bottom: 1px solid #ebeef5;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 13px 0px;
+        border-bottom: 1px solid #ebeef5;
     }
 
     .edit {
-      padding: 20px 0;
+        // padding: 20px 0;
 
-      .header {
-        display: flex;
-        align-items: center;
+        .header {
+            display: flex;
+            align-items: center;
 
-        .tips {
-          margin-right: 5px;
+            .tips {
+                margin-right: 5px;
+            }
         }
-      }
 
-      > form {
-        .el-form-item {
-          margin-bottom: 0;
-        }
+        >form {
+            .el-form-item {
+                margin-bottom: 0;
+            }
 
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 10px;
-        }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 10px;
+            }
 
-        .opts {
-          display: flex;
-          align-items: center;
+            .opts {
+                display: flex;
+                align-items: center;
 
-          .el-button {
-            margin-left: 5px;
-          }
-        }
+                .el-button {
+                    margin-left: 5px;
+                }
+            }
 
-        .el-select,
-        .el-input {
-          width: 136px;
-          margin-right: 10px;
+            .el-select,
+            .el-input {
+                width: 136px;
+                margin-right: 10px;
 
-          .el-input--suffix .el-input__inner {
-            padding-right: 0;
-          }
-        }
+                .el-input--suffix .el-input__inner {
+                    padding-right: 0;
+                }
+            }
 
-        .to {
-          margin-right: 10px;
-        }
+            .to {
+                margin-right: 10px;
+            }
 
-        .times {
-          .el-checkbox {
-            width: 88px;
-          }
+            .times {
+                .el-checkbox {
+                    width: 88px;
+                }
 
-          .el-input {
-            width: 136px;
-          }
-        }
+                .el-input {
+                    width: 136px;
+                }
+            }
 
-        .content {
-          display: flex;
-          justify-content: space-between;
-          align-items: flex-start;
-          margin-top: 10px;
+            .content {
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+                margin-top: 10px;
 
-          .el-textarea {
-            display: flex;
-            width: 766px;
-            height: 162px;
-          }
+                .el-textarea {
+                    display: flex;
+                    width: 766px;
+                    height: 162px;
+                }
+            }
         }
-      }
     }
 
     .show {
-      padding: 23px 0px 23px 0px;
-      border-bottom: 1px solid #ebeef5;
 
-      &:last-of-type {
-        border: 0;
-      }
+        h4 {
+            display: flex;
+            justify-content: space-between;
+            height: 44px;
+            font-size: 14px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            /* color: #308eff; */
+            line-height: 44px;
+        }
 
-      h4 {
-        display: flex;
-        justify-content: space-between;
-        height: 44px;
-        font-size: 14px;
-        font-family: PingFangSC-Medium;
-        font-weight: 500;
-        /* color: #308eff; */
-        line-height: 44px;
-      }
-
-      p {
-        margin-top: 8px;
-        font-size: 14px;
-        font-family: PingFangSC-Regular;
-        font-weight: 400;
-        color: rgba(102, 102, 102, 1);
-        line-height: 24px;
-      }
+        p {
+            margin-top: 8px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular;
+            font-weight: 400;
+            color: rgba(102, 102, 102, 1);
+            line-height: 24px;
+        }
     }
 
     .empty {
-      margin: 112px auto 104px;
-      font-size: 27px;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      text-align: center;
-      color: rgba(205, 205, 205, 1);
-      line-height: 38px;
+        margin: 112px auto 104px;
+        font-size: 27px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        text-align: center;
+        color: rgba(205, 205, 205, 1);
+        line-height: 38px;
     }
 
     footer p {
-      margin-top: 15px;
-      width: 766px;
-      font-size: 12px;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      color: rgba(145, 154, 167, 1);
-      line-height: 17px;
+        margin-top: 15px;
+        width: 766px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: rgba(145, 154, 167, 1);
+        line-height: 17px;
+    }
+}
+
+.skill-form-btn-area {
+    float: right;
+}
+
+.edit{
+  overflow: hidden;
+}
+.mobile {
+
+    .el-form-item{
+      margin-bottom: 20px;
+      // display: flex;
+      // overflow: hidden;
+    }
+    .skill-form-btn-area {
+        float: left;
+    }
+}
+
+.skill-item {
+    padding: 23px 0px 23px 0px;
+    border-bottom: 1px solid #ebeef5;
+
+    &:last-of-type {
+        border: 0;
     }
-  }
+}
 </style>

pages/frontend/skill_cert/profile.vue

@@ -43,14 +43,10 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    max-width: 1000px;
+    max-width: 1100px;
     margin: 10px auto;
     background: #ffffff;
     border-radius: 10px;
-    padding: 0 85px;
-    @media(max-width: 768px) {
-      padding: 0 15px;
-    }
     box-sizing: border-box;
   }
 </style>