feat(zm)初始化

src/assets/css/recruit.scss

@@ -8,12 +8,122 @@
   width: 100%;
   height: 1450px;
   background-color: #ffffff;
-  padding: 0px 160px;
   box-sizing: border-box;
 }
 .recruit-bottom{
   width: 100%;
   margin-top: 130px;
 }
+.recruit-list{
+  margin-top: 130px;
+  width: 1640px;
+  height: 750px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: left;
+  align-content: flex-start;
+  margin-bottom: 40px;
+}
+.info{
+  width: 370px;
+  height: 223px;
+  background: #ffffff;
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10);
+  box-sizing: border-box;
+  padding-left: 20px;
+  margin-bottom: 40px;
+  margin-right: 40px;
+  cursor: pointer;
+}
+
+.info-1{
+  width: 370px;
+  height: 20px;
+  font-size: 20px;
+  font-weight: 500;
+  text-align: LEFT;
+  color: #333333;
+  line-height: 20px;
+  margin-top: 30px;
+}
+.info-2{
+  width: 370px;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: LEFT;
+  color: #333333;
+  line-height: 16px;
+  justify-content: left;
+  margin-top: 26px;
+}
+
+.info-3{
+  width: 370px;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: LEFT;
+  color: #333333;
+  line-height: 16px;
+  justify-content: left;
+  margin-top: 10px;
+}
+
+.info-year,.info-3-study{
+  margin-left: 10px;
+}
+.info-address,.info-3-money{
+  width: 150px;
+  text-align: left;
+}
+.line{
+  width: 330px;
+  height: 1px;
+  border: 1px solid #ededed;
+  margin-top: 20px;
+}
+.info-4{
+  height: 30px;
+  line-height: 30px;
+  margin-top: 20px;
+}
+.info-4-1{
+  color: #DD0318;
+  font-size: 26px;
+}
+.info-4-2{
+  font-size: 14px;
+  font-weight: 500;
+  color: #999999;
+  margin-right: 20px;
+}
+.goToList{
+  font-size: 18px;
+  color: #E84E47;
+  cursor: pointer;
+}
+.detail{
+  width:60%;
+  justify-content: left;
+  margin-top: 100px;
+}
+
+.detail-title{
+  height: 20px;
+  font-size: 20px;
+  font-weight: 500;
+  text-align: LEFT;
+  color: #333333;
+  line-height: 20px;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+.detail-line{
+  width: 100%;
+  height: 1px;
+  border: 1px solid #ededed;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
 
 

src/views/recruit.vue

@@ -3,14 +3,158 @@
     <div id="recruit">
 
 
-      <div class="recruit-bg">
+      <div class="recruit-bg flex-column" style="align-items: center">
         <img src="../assets/image/img/recurit.png" alt="" style="width: 100%">
-        <div class="recruit-bottom" style="align-items: center">
+        <div class="recruit-list" v-if="!showInfo">
+
+          <div class="info" @click="goToInfo()">
+            <div class="info-1">应届毕业生（预决算方向）</div>
+            <div class="info-2 flex-row">
+              <div class="info-address">工作地区：上海</div>
+              <div class="info-year"> 薪资：6k-8k</div>
+            </div>
+            <div class="info-3 flex-row">
+              <div class="info-3-money">工作年限：不限</div>
+              <div class="info-3-study">学历要求：本科</div>
+            </div>
+            <div class="line"></div>
+            <div class="info-4 flex-row">
+              <div class="info-4-1">6K-8K</div>
+              <div class="info-4-2">发布于 2021-05-12</div>
+            </div>
 
-          <div>
+          </div>
+          <div class="info" @click="goToInfo()">
+            <div class="info-1">应届毕业生（预决算方向）</div>
+            <div class="info-2 flex-row">
+              <div class="info-address">工作地区：上海</div>
+              <div class="info-year"> 薪资6k-8k</div>
+            </div>
+            <div class="info-3 flex-row">
+              <div class="info-3-money">工作年限：不限</div>
+              <div class="info-3-study">学历要求：本科</div>
+            </div>
+            <div class="line"></div>
+            <div class="info-4 flex-row">
+              <div class="info-4-1">6K-8K</div>
+              <div class="info-4-2">发布于 2021-05-12</div>
+            </div>
+
+          </div>
+          <div class="info" @click="goToInfo()">
+            <div class="info-1">应届毕业生（预决算方向）</div>
+            <div class="info-2 flex-row">
+              <div class="info-address">工作地区：上海</div>
+              <div class="info-year"> 薪资6k-8k</div>
+            </div>
+            <div class="info-3 flex-row">
+              <div class="info-3-money">工作年限：不限</div>
+              <div class="info-3-study">学历要求：本科</div>
+            </div>
+            <div class="line"></div>
+            <div class="info-4 flex-row">
+              <div class="info-4-1">6K-8K</div>
+              <div class="info-4-2">发布于 2021-05-12</div>
+            </div>
+
+          </div>
+          <div class="info" @click="goToInfo()">
+            <div class="info-1">应届毕业生（预决算方向）</div>
+            <div class="info-2 flex-row">
+              <div class="info-address">工作地区：上海</div>
+              <div class="info-year"> 薪资6k-8k</div>
+            </div>
+            <div class="info-3 flex-row">
+              <div class="info-3-money">工作年限：不限</div>
+              <div class="info-3-study">学历要求：本科</div>
+            </div>
+            <div class="line"></div>
+            <div class="info-4 flex-row">
+              <div class="info-4-1">6K-8K</div>
+              <div class="info-4-2">发布于 2021-05-12</div>
+            </div>
+
+          </div>
+          <div class="info" @click="goToInfo()">
+            <div class="info-1">应届毕业生（预决算方向）</div>
+            <div class="info-2 flex-row">
+              <div class="info-address">工作地区：上海</div>
+              <div class="info-year"> 薪资6k-8k</div>
+            </div>
+            <div class="info-3 flex-row">
+              <div class="info-3-money">工作年限：不限</div>
+              <div class="info-3-study">学历要求：本科</div>
+            </div>
+            <div class="line"></div>
+            <div class="info-4 flex-row">
+              <div class="info-4-1">6K-8K</div>
+              <div class="info-4-2">发布于 2021-05-12</div>
+            </div>
+
+          </div>
+          <div class="info" @click="goToInfo()">
+            <div class="info-1">应届毕业生（预决算方向）</div>
+            <div class="info-2 flex-row">
+              <div class="info-address">工作地区：上海</div>
+              <div class="info-year"> 薪资6k-8k</div>
+            </div>
+            <div class="info-3 flex-row">
+              <div class="info-3-money">工作年限：不限</div>
+              <div class="info-3-study">学历要求：本科</div>
+            </div>
+            <div class="line"></div>
+            <div class="info-4 flex-row">
+              <div class="info-4-1">6K-8K</div>
+              <div class="info-4-2">发布于 2021-05-12</div>
+            </div>
 
           </div>
+          <div class="info" @click="goToInfo()">
+            <div class="info-1">应届毕业生（预决算方向）</div>
+            <div class="info-2 flex-row">
+              <div class="info-address">工作地区：上海</div>
+              <div class="info-year"> 薪资6k-8k</div>
+            </div>
+            <div class="info-3 flex-row">
+              <div class="info-3-money">工作年限：不限</div>
+              <div class="info-3-study">学历要求：本科</div>
+            </div>
+            <div class="line"></div>
+            <div class="info-4 flex-row">
+              <div class="info-4-1">6K-8K</div>
+              <div class="info-4-2">发布于 2021-05-12</div>
+            </div>
 
+          </div>
+        </div>
+
+
+        <div class="detail flex-column" v-if="showInfo">
+          <div class="goToList" @click="goToList()">返回列表</div>
+          <div class="detail-title">应届毕业生</div>
+          <div class="flex-row" style="justify-content: left">
+              <div style="width: 200px">工作地区：上海</div>
+              <div >薪资：6k-8k</div>
+          </div>
+          <div  class="flex-row" style="justify-content: left">
+            <div style="width: 200px">工作经验：不限</div>
+            <div>学历要求：本科</div>
+          </div>
+          <div class="detail-line"></div>
+
+          <div>职位要求：</div>
+          <div style="margin-bottom: 40px">
+            1、工程预算专业毕业，大专及以上学历，有预算员、造价员证者优先考虑；
+            2、有工程预算及工程管理经验者优先；
+            3、具备工程师。决算和工程管理的专业知识、熟悉相关行业资料类型；
+            4、熟悉使用常用计价软件，WORD、EXCEL、AUTOCAD等办公软件
+            5、良好的语言表达能力、沟通能力
+            6、品格端正，有强烈的团队意识，具备上进心、吃苦耐劳、学习意识强烈、态度端正；
+          </div>
+          <div>公司地址： 上海市松江区望东南路111号</div>
+          <div>联系人： 鲍先生</div>
+          <div>联系电话： 021-67675666</div>
+          <div>联系邮箱： gxm@pocc.co</div>
         </div>
       </div>
 
@@ -24,7 +168,9 @@ import '../assets/css/recruit.scss'
 
 export default {
   data() {
-    return {}
+    return {
+      showInfo:false,
+    }
   },
   created() {
 
@@ -34,7 +180,14 @@ export default {
 
 
   },
-  methods: {},
+  methods: {
+    goToInfo(){
+      this.showInfo = true;
+    },
+    goToList(){
+      this.showInfo = false;
+    }
+  },
   destroyed() {
 
   },