发布兼职需求，界面更新

assets/css/public.css

@@ -28,6 +28,11 @@
   flex-flow: row nowrap;
 }
 
+.app__f_r_n {
+  display: flex;
+  flex-flow: row wrap;
+}
+
 .app__f_c {
   display: flex;
   flex-flow: column nowrap;
@@ -98,10 +103,18 @@
   margin: 10px;
 }
 
+.app__mg_15 {
+  margin: 15px;
+}
+
 .app__ml_0 {
   margin-left: 0;
 }
 
+.app__ml_5 {
+  margin-left: 0;
+}
+
 .app__ml_10 {
   margin-left: 10px;
 }
@@ -150,6 +163,10 @@
   margin-top: 20px;
 }
 
+.app__mt_40 {
+  margin-top: 40px;
+}
+
 .app__mb_10 {
   margin-bottom: 10px;
 }
@@ -198,6 +215,10 @@
   padding: 10px;
 }
 
+.app__pd_15 {
+  padding: 15px;
+}
+
 .app__pd_20 {
   padding: 20px;
 }
@@ -226,6 +247,10 @@
   padding-top: 10px;
 }
 
+.app__pt_15 {
+  padding-top: 15px;
+}
+
 .app__pb_5 {
   padding-bottom: 5px;
 }
@@ -239,8 +264,8 @@
 }
 
 .app__pl_20 {
-   padding-left: 20px;
- }
+  padding-left: 20px;
+}
 
 .app__pl_30 {
   padding-left: 30px;
@@ -384,6 +409,14 @@
   width: 70px;
 }
 
+.app__w_90 {
+  width: 90px;
+}
+
+.app__w_100 {
+  width: 100px;
+}
+
 .app__w_120 {
   width: 120px;
 }
@@ -452,6 +485,10 @@
   height: 30px;
 }
 
+.app__h_35 {
+  height: 35px;
+}
+
 .app__h_40 {
   height: 40px;
 }
@@ -480,10 +517,18 @@
   height: 70px;
 }
 
+.app__h_100 {
+  height: 100px;
+}
+
 .app__h_130 {
   height: 130px;
 }
 
+.app__h_172 {
+  height: 172px;
+}
+
 .app__lh_20 {
   line-height: 20px;
 }

pages/otherpage/publish/publish.vue

@@ -2,107 +2,82 @@
   <div :class="{ isMobile: mobile }">
     <div v-if="!mobile">
       <div class="app__bg_w">
-        <el-form>
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="">岗位需求</p>
-              <el-radio-group>
-                <el-radio label="全职"/>
-                <el-radio label="兼职"/>
-              </el-radio-group>
+        <!--工作方式、职业类型-->
+        <div class="app__w_100vw app__pl_10 app__pr_10 ">
+          <!--工作方式-->
+          <div class="app__h_100 app__bd_b_eee app__pt_15">
+            <p class="app__fs_15 app__h_20"><span class="app__fc_r">*</span>工作方式</p>
+            <div class="app__mt_10">
+              <button class="app__w_90 app__h_35 app__bg_eee app_br_5 app__fs_13 app__fc_666"
+                      v-for="(worktype,index) in workTypes" @click="params.workType = index"
+                      :class="{app__fc_308EFF:params.workType == index , app__ml_10 : index !== 0}"
+                      :style="{background:(params.workType == index ? 'rgba(48,142,255,0.11)':'')}">{{worktype.label}}
+              </button>
             </div>
-          </el-form-item>
-          <!--职位类型-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="">职位类型</p>
-              <el-select v-model="jobTypeIndex" placeholder="请选择" class="app__ml_10">
-                <el-option v-for="item in jobType" :key="item.value" :label="item.label" :value="item.value"/>
-              </el-select>
-            </div>
-          </el-form-item>
-          <!--岗位描述-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_c app__jf_c app__w_100vw">
-              <p class=""><span class="app__fc_r">*</span>岗位描述</p>
-              <el-input type="textarea" class="app__pl_10 app__pr_10"></el-input>
-            </div>
-          </el-form-item>
-
-          <!--技能要求-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="">技能要求</p>
-              <el-select v-model="needSkillIndex" placeholder="请选择" class="app__ml_10">
-                <el-option v-for="item in needSkills" :key="item.value" :label="item.label" :value="item.value"/>
-              </el-select>
-            </div>
-          </el-form-item>
-
-          <!--薪酬范围-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="">薪酬范围</p>
-              <el-select v-model="needSkillIndex" placeholder="请选择" class="app__ml_10 app__w_70">
-                <el-option v-for="item in money" :key="item.value" :label="item.label" :value="item.value"/>
-              </el-select>
-              <span> 至 </span>
-              <el-select v-model="needSkillIndex" placeholder="请选择" class="app__ml_10 app__w_70">
-                <el-option v-for="item in needSkills" :key="item.value" :label="item.label" :value="item.value"/>
-              </el-select>
-            </div>
-          </el-form-item>
-
-          <!--经验要求-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="app__ws_nw">经验要求</p>
-              <el-radio-group>
-                <el-radio label="不限"/>
-                <el-radio label="3-5年"/>
-                <el-radio label="5-10年"/>
-                <el-radio label="10年以上"/>
-              </el-radio-group>
-            </div>
-          </el-form-item>
-          <!--工作地点-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="app__ws_nw">工作地点</p>
-              <el-select v-model="jobTypeIndex" placeholder="请选择" class="app__ml_10">
-                <el-option v-for="item in jobType" :key="item.value" :label="item.label" :value="item.value"/>
-              </el-select>
-            </div>
-          </el-form-item>
-
-          <!--企业信息-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="app__ws_nw">企业信息</p>
-              <el-input type="textarea" class="app__pl_10 app__pr_10"/>
-            </div>
-          </el-form-item>
-
-          <!--手机号/邮箱号-->
-          <el-form-item size="medium" inline="true">
-            <div class="app__f_r app__al_c app__w_100vw">
-              <span class="app__fc_r">*</span>
-              <p class="app__ws_nw">手机号/邮箱号</p>
-              <el-input type="textarea" class="app__pl_10 app__pr_10"/>
-            </div>
-          </el-form-item>
-        </el-form>
-
-
+          </div>
+          <div class="app__h_50 app__f_r app__al_c">
+            <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>职业类型</p>
+            <p class="app__fs_16 app__fc_999">请选择</p>
+            <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
+          </div>
+        </div>
+      </div>
+      <!--岗位描述-->
+      <div class="app__mt_10">
+        <textarea class="app__h_172 app__w_100vw app__pd_15 app__fs_15" style="border-width: 0;" placeholder="请输入岗位描述（5-5000字符)"
+                  maxlength="5000"/>
+      </div>
+      <!--技能要求-->
+      <div class="app__pl_10 app__pr_10 app__h_50 app__f_r app__al_c app__mt_10 app__bd_b_eee app__bg_w">
+        <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>技能要求</p>
+        <el-popover placement="left-end" trigger="click" v-model="skillShow">
+          <el-table :data="needSkills">
+            <el-table-column property="label" label="日期"></el-table-column>
+          </el-table>
+        </el-popover>
+        <p class="app__fs_16 app__fc_999 app__f_1" @click="skillShow = !skillShow">请选择</p>
+        <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
+      </div>
+      <!--薪资范围-->
+      <div class="app__pl_10 app__pr_10 app__h_50 app__f_r app__al_c app__bd_b_eee app__bg_w app__mt_10">
+        <p class="app__fs_15 app__f_g_1 app__f_s_0"><span class="app__fc_r">*</span>薪资范围</p>
+        <input class="app__fs_16 app__fc_999 app__w_100 app__ta_c" placeholder="最小" v-model="params.minSalary"/>
+        <p>至</p>
+        <input class="app__fs_16 app__fc_999 app__w_100 app__ta_c" placeholder="最大" v-model="params.maxSalary"/>
+      </div>
+      <!--经验要求-->
+      <div class="app__pl_10 app__pr_10 app__h_100 app__bd_b_eee app__pt_15 app__bg_w app__mt_10">
+        <p class="app__fs_15 app__h_20"><span class="app__fc_r">*</span>经验要求</p>
+        <div class="app__mt_10 app__f_r">
+          <button v-for="(expItem,index) in experiance" class="app__w_70 app__h_35 app__bg_eee app_br_5 app__fs_13 app__fc_666"
+                  @click="params.experience = index"
+                  :class="{app__fc_308EFF:params.experience === index , app__ml_10 : index !== 0}"
+                  :style="{background : (params.experience === index ? 'rgba(48,142,255,0.11)':'')}">{{expItem.label}}
+          </button>
+        </div>
       </div>
 
+      <!--工作地点-->
+      <div class="app__pl_10 app__pr_10 app__h_50 app__f_r app__al_c app__mt_10 app__bd_b_eee app__bg_w">
+        <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>工作地点</p>
+        <input class="app__fs_16 app__fc_999" style="" placeholder="请输入" style="text-align: end"/>
+        <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
+      </div>
+      <!--企业信息-->
+      <div class="app__pl_10 app__pr_10 app__h_50 app__f_r app__al_c app__mt_10 app__bd_b_eee app__bg_w">
+        <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>企业信息</p>
+        <input class="app__fs_16 app__fc_999" placeholder="请输入" style="text-align: end"/>
+        <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
+      </div>
+      <!--手机号/邮箱-->
+      <div class="app__pl_10 app__pr_10 app__h_50 app__f_r app__al_c app__bd_b_eee app__bg_w">
+        <p class="app__fs_15 app__f_g_1"><span class="app__fc_r">*</span>手机号/邮箱</p>
+        <input class="app__fs_16 app__fc_999" placeholder="请输入" style="text-align: end" v-model="params.mobile"/>
+        <img src="../../../assets/img/credit/rightIcon.png" class="app__ml_10" style="width:7px;height:13px"/>
+      </div>
+      <div class="app__w_100vw app__mt_40">
+        <button class="app__bg_308EFF app_br_5 app__ml_15 app__mr_15 app__h_45 app_fc_w" style="width: calc(100% - 30px)" @click="publish()">发布</button>
+      </div>
     </div>
   </div>
 </template>
@@ -113,20 +88,45 @@
 
     data() {
       return {
-        jobTypeIndex: "0",
-        needSkillIndex: "0",
+        params: {workType: 0, minSalary: "", maxSalary: "", experience: 0},
         jobType: [{value: "0", label: '前端'}, {value: "1", label: '后端'}, {value: "2", label: '全栈'}, {value: "3", label: 'C++'}, {value: "4", label: '小程序'}],
         needSkills: [{value: "0", label: "JAVA"}, {value: "0", label: "JAVA"}, {value: "0", label: "JAVA"}, {value: "0", label: "JAVA"}, {
           value: "0",
           label: "JAVA"
         }, {value: "0", label: "JAVA"}],
-        money: [3000, 4000, 5000, 6000, 7000]
+        money: [3000, 4000, 5000, 6000, 7000],
+        experiance: [{label: "不限", index: 0}, {label: "3-5年", index: 1}, {label: "5-10年", index: 2}, {label: "10年以上", index: 3}],
+        workTypes: [{label: "远程", index: 0}, {label: "驻场", index: 1}],
+        skillShow: false
 
       }
+    },
+
+    methods: {
+      workTypeChange(index) {
+        console.log(index);
+        this.params.workType = index;
+      },
+      expChange(index) {
+        this.params.experience = index;
+      },
+      textInput(e) {
+
+      },
+      publish() {
+        console.log(this.params);
+      }
     }
   }
 </script>
 
 <style scoped>
   @import "../../../assets/css/public.css";
+
+  input::-webkit-input-placeholder {
+    /* placeholder颜色  */
+    color: #999999;
+    /* placeholder字体大小  */
+    font-size: 16px;
+  }
 </style>