12 changed files with 469 additions and 7 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,108 @@ |
|||
<script setup lang="ts"> |
|||
import { useRouter } from "vue-router"; |
|||
const props=defineProps({ |
|||
contractList:{ |
|||
type:Array, |
|||
default:()=>[] |
|||
} |
|||
}) |
|||
const router=useRouter() |
|||
const gotoDetail=(id:any):void=>{ |
|||
router.push('/task/details/'+id) |
|||
} |
|||
</script> |
|||
<template> |
|||
<dl v-for="(item,index) in contractList" :key="index" @click="gotoDetail(item.id)"> |
|||
<dd> |
|||
<h3>移动端小程序前端开发前端工程师</h3> |
|||
<span>履约中</span> |
|||
<van-icon name="arrow" /> |
|||
</dd> |
|||
<dt> |
|||
<label>公司名称</label> |
|||
<span>北京驻场无忧科技有限公司</span> |
|||
</dt> |
|||
<dt> |
|||
<label>合约类型</label> |
|||
<span>技术服务</span> |
|||
</dt> |
|||
<dt> |
|||
<label>合约时间</label> |
|||
<span></span> |
|||
</dt> |
|||
<dt> |
|||
<label>签约时间</label> |
|||
<span></span> |
|||
</dt> |
|||
<dt> |
|||
<label>合约进度</label> |
|||
<span></span> |
|||
</dt> |
|||
<dt class="contract-progress"> |
|||
<i></i> |
|||
<i></i> |
|||
<i></i> |
|||
<i></i> |
|||
</dt> |
|||
</dl> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
dl{ |
|||
font-size: 0.64rem; |
|||
color: #666666; |
|||
padding: 1rem 0.7rem; |
|||
border-bottom: 1px solid #eeeeee; |
|||
} |
|||
dl dd{ |
|||
display: flex; |
|||
margin-bottom: 0.9rem; |
|||
align-items: center; |
|||
} |
|||
dl dd h3{ |
|||
font-size: 0.8rem; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
flex: 1; |
|||
} |
|||
dl dd span{ |
|||
text-align: right; |
|||
font-size: 0.75rem; |
|||
color: #FF9415; |
|||
} |
|||
dl dd i{ |
|||
font-size: 0.75rem; |
|||
} |
|||
dl dt{ |
|||
display: flex; |
|||
margin-bottom: 0.72rem; |
|||
} |
|||
dl dt:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
dl dt label{ |
|||
flex: 1; |
|||
} |
|||
dl dt span{ |
|||
text-align: right; |
|||
} |
|||
.contract-progress{ |
|||
display: flex; |
|||
height: 0.5rem; |
|||
width: 100%; |
|||
} |
|||
.contract-progress i{ |
|||
flex: 1; |
|||
background: #f3f3f3; |
|||
margin: 0 1px; |
|||
} |
|||
.contract-progress i.green{ |
|||
background: #50D400; |
|||
} |
|||
.contract-progress i.orange{ |
|||
background: #FE9215; |
|||
} |
|||
.contract-progress i.red{ |
|||
background: #FF4800; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,128 @@ |
|||
<script setup lang="ts"> |
|||
import { useRouter } from "vue-router"; |
|||
const props=defineProps({ |
|||
talentList:{ |
|||
type:Array, |
|||
default:()=>[] |
|||
} |
|||
}) |
|||
const router=useRouter() |
|||
const gotoDetail=(id:any)=>{ |
|||
router.push('/talent/details/'+id) |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="talent-item" v-for="(item,index) in talentList" :key="index" @click="gotoDetail(item.id)"> |
|||
<div class="talent-item-top"> |
|||
<div class="talent-item-pic"> |
|||
<img src="../../assets/img/icon/icon-message.png"/> |
|||
</div> |
|||
<div class="talent-item-cont"> |
|||
<h3>理想<span>驻场</span><span>远程</span><span>全职</span></h3> |
|||
<p>前端工程师 | 5年 | 本科 | 23岁</p> |
|||
<dl> |
|||
<dt>vue</dt> |
|||
<dt>node.js</dt> |
|||
<dt>react</dt> |
|||
</dl> |
|||
</div> |
|||
</div> |
|||
<div class="talent-item-bottom"> |
|||
<label>已做两个项目要</label> |
|||
<span><van-icon name="location-o" />北京</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.talent-item{ |
|||
margin: 0 0rem 0.53rem; |
|||
padding: 0.77rem 0.64rem 0; |
|||
background: #FFFFFF; |
|||
border-radius: 0.53rem; |
|||
font-size: 0.69rem; |
|||
} |
|||
.talent-item-top{ |
|||
display: flex; |
|||
padding-bottom: 0.75rem; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
} |
|||
.talent-item-pic{ |
|||
width: 4rem; |
|||
height: 4rem; |
|||
border-radius: 0.27rem; |
|||
overflow: hidden; |
|||
margin-right: 0.85rem; |
|||
} |
|||
.talent-item-pic img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.talent-item-cont{} |
|||
.talent-item-cont h3{ |
|||
font-size: 0.91rem; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 0.64rem; |
|||
} |
|||
.talent-item-cont h3 span{ |
|||
width: 1.97rem; |
|||
height: 0.85rem; |
|||
line-height: 0.85rem; |
|||
border-radius: 0.53rem; |
|||
font-size: 0.59rem; |
|||
font-weight: 300; |
|||
color: #FFFFFF; |
|||
margin-left: 0.2rem; |
|||
text-align: center; |
|||
padding: 0.1rem 0; |
|||
} |
|||
.talent-item-cont h3 span:nth-child(1){ |
|||
background: linear-gradient(90deg, #FEA829, #FE8F27); |
|||
} |
|||
.talent-item-cont h3 span:nth-child(2){ |
|||
background: linear-gradient(90deg, #55EDB9, #52DEA4); |
|||
} |
|||
.talent-item-cont h3 span:nth-child(3){ |
|||
background: linear-gradient(90deg, #42C3E8, #249AF6); |
|||
} |
|||
.talent-item-cont p{ |
|||
font-size: 0.69rem; |
|||
line-height: 0.69rem; |
|||
font-weight: 100; |
|||
color: #666666; |
|||
margin-bottom: 0.56rem; |
|||
} |
|||
dl{ |
|||
display: flex; |
|||
flex-flow: wrap; |
|||
} |
|||
dl dt{ |
|||
padding: 0.3rem 0.5rem; |
|||
font-size: 0.59rem; |
|||
line-height: 0.59rem; |
|||
font-weight: 300; |
|||
color: #666666; |
|||
margin-right: 0.27rem; |
|||
background: #F6F7F8; |
|||
border-radius: 0.16rem; |
|||
margin-bottom: 0.3rem; |
|||
} |
|||
.talent-item-bottom{ |
|||
display: flex; |
|||
padding: 0.72rem 0 0.72rem; |
|||
} |
|||
.talent-item-bottom label{ |
|||
flex: 1; |
|||
} |
|||
.talent-item-bottom span{ |
|||
text-align: right; |
|||
} |
|||
.talent-item-bottom i{ |
|||
font-size: 0.8rem; |
|||
font-weight: 600; |
|||
margin-right: 0.1rem; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,81 @@ |
|||
<script setup lang="ts"> |
|||
import { useRouter } from "vue-router"; |
|||
const props=defineProps({ |
|||
messageList:{ |
|||
type:Array, |
|||
default:()=>[] |
|||
} |
|||
}) |
|||
const router=useRouter() |
|||
const gotoDetail=(id:any):void=>{ |
|||
router.push('/message/talk/'+id) |
|||
} |
|||
</script> |
|||
<template> |
|||
<dl v-for="(item,index) in messageList" :key="index" @click="gotoDetail(item.id)"> |
|||
<dd> |
|||
<img src="../../assets/img/icon/icon-message.png"/> |
|||
<span></span> |
|||
</dd> |
|||
<dt> |
|||
<h3>北京驻场无忧科技有限公司<span>5分钟前</span></h3> |
|||
<p>你好，我们这边在招聘前端工程师，看了......</p> |
|||
</dt> |
|||
|
|||
</dl> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
dl{ |
|||
font-size: 0.64rem; |
|||
color: #666666; |
|||
padding: 0.9rem 0; |
|||
margin: 0 0.67rem; |
|||
border-bottom: 1px solid #eeeeee; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
dl dd{ |
|||
position: relative; |
|||
margin-right: 0.56rem; |
|||
} |
|||
dl dd img{ |
|||
width: 2.61rem; |
|||
height: 2.61rem; |
|||
border-radius: 50%; |
|||
} |
|||
dl dd span{ |
|||
position: absolute; |
|||
top: 0; |
|||
right:0; |
|||
width: 0.32rem; |
|||
height: 0.32rem; |
|||
background: #FF0000; |
|||
border-radius: 50%; |
|||
} |
|||
dl dt{ |
|||
flex: 1; |
|||
} |
|||
dl dt h3{ |
|||
font-size: 0.8rem; |
|||
line-height: 0.8rem; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
margin-bottom: 0.43rem; |
|||
} |
|||
dl dt h3 span{ |
|||
float: right; |
|||
color: #999999; |
|||
font-size: 0.64rem; |
|||
font-weight: 100; |
|||
} |
|||
dl dt p{ |
|||
font-size: 0.69rem; |
|||
line-height: 0.69rem; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,23 @@ |
|||
<script setup lang="ts"> |
|||
import FooterTabbar from '@/components/FooterTabbar.vue' |
|||
import ContractList from '@/components/list/ContractList.vue' |
|||
import { reactive } from 'vue' |
|||
const contractList=reactive([ |
|||
{ |
|||
id:1 |
|||
}, |
|||
{ |
|||
id:2 |
|||
}, |
|||
]) |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<ContractList :contractList="contractList"></ContractList> |
|||
<FooterTabbar></FooterTabbar> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -1,11 +1,90 @@ |
|||
<script setup lang="ts"> |
|||
import { ref } from "vue"; |
|||
let checked=ref(false) |
|||
</script> |
|||
<template> |
|||
<div> |
|||
登录页 |
|||
<van-icon class="icon-left" name="arrow-left" /> |
|||
<div class="login-form"> |
|||
<h3>验证码登录</h3> |
|||
<div class="login-form-item"> |
|||
<i class="icon-phone"></i> |
|||
<input placeholder="请输入手机号" type="text"/> |
|||
</div> |
|||
<div class="login-form-item"> |
|||
<i class="icon-code"></i> |
|||
<input placeholder="请输入手机号" type="text"/> |
|||
<span>获取验证码</span> |
|||
</div> |
|||
<van-button type="primary" block>块级元素</van-button> |
|||
<div class="login-form-label"> |
|||
<van-checkbox v-model="checked">我已阅读</van-checkbox> |
|||
<router-link to="/login/serviceAgree">《IT企业平台服务协议》</router-link>和 |
|||
<router-link to="/login/privacyPolicy">《隐私政策》</router-link> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
|
|||
</script> |
|||
<style lang="" scoped> |
|||
|
|||
|
|||
<style scoped> |
|||
.icon-left{ |
|||
font-size: 0.8rem; |
|||
margin: 0.67rem 0 0 0.67rem; |
|||
} |
|||
.login-form{ |
|||
padding: 0 1.07rem; |
|||
} |
|||
.login-form h3{ |
|||
font-size: 1.39rem; |
|||
line-height: 1.39rem; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
margin-top: 2.35rem; |
|||
margin-bottom: 4rem; |
|||
padding-left: 0.3rem; |
|||
} |
|||
.login-form-item{ |
|||
display: flex; |
|||
font-size: 0.75rem; |
|||
font-weight: 300; |
|||
color: #9FA7AD; |
|||
margin: 0 0.18rem 2rem; |
|||
padding: 0.5rem 0; |
|||
border-bottom: 1px solid #E7E7E7; |
|||
align-items: center; |
|||
} |
|||
.icon-phone{ |
|||
background: url('@/assets/img/icon/icon-phone.png') no-repeat; |
|||
background-size: 100%; |
|||
width: 1.01rem; |
|||
height: 1.01rem; |
|||
} |
|||
.icon-code{ |
|||
background: url('@/assets/img/icon/icon-code.png') no-repeat; |
|||
background-size: 100%; |
|||
width: 1.01rem; |
|||
height: 1.01rem; |
|||
} |
|||
.login-form-item input{ |
|||
flex: 1; |
|||
margin-left: 0.48rem; |
|||
} |
|||
.login-form-item span{ |
|||
font-size: 0.75rem; |
|||
font-weight: 300; |
|||
color: #FE9527; |
|||
border-left: 1px solid #FE9527; |
|||
line-height: 0.75rem; |
|||
padding-left: 0.56rem; |
|||
} |
|||
.login-form-label{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 1.5rem; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,16 @@ |
|||
<script setup lang="ts"> |
|||
import FooterTabbar from '@/components/FooterTabbar.vue' |
|||
import message from '@/components/list/message.vue' |
|||
import { reactive } from "vue"; |
|||
let messageList=reactive([{id:1},{id:2}]) |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<message :messageList="messageList"></message> |
|||
<FooterTabbar></FooterTabbar> |
|||
|
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,27 @@ |
|||
<script setup lang="ts"> |
|||
import FooterTabbar from '@/components/FooterTabbar.vue' |
|||
import TalentList from '@/components/list/TalentList.vue' |
|||
import { reactive } from 'vue' |
|||
const talentList=reactive([ |
|||
{ |
|||
id:1 |
|||
}, |
|||
{ |
|||
id:2 |
|||
}, |
|||
]) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="talent-page"> |
|||
<TalentList :talentList="talentList"></TalentList> |
|||
<FooterTabbar></FooterTabbar> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.talent-page{ |
|||
background: #f9f9f9; |
|||
padding: 0 0.59rem 3rem; |
|||
min-height: calc(100vh - 3rem); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue