Skip to content

frontend / qqxb-self-service

Go to a project
Commit 71a7eae0 by e
Options

静态页

parent aa165c45
Inline Side-by-side
Showing with 510 additions and 11 deletions
src/App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script lang="ts">
......@@ -13,12 +11,5 @@ export default class App extends Vue {
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/router/index.ts
......@@ -10,9 +10,28 @@ Vue.use(VueRouter)
component: () => import("../views/Home.vue")
},
{
path: '/SelectIdentity',
// 身份选择
path: '/select_identity',
name: 'SelectIdentity',
component: () => import("../views/SelectIdentity.vue")
},
{
// 灵活用工
path: '/flex_employee',
name: 'FlexEmployee',
component: () => import("../views/FlexEmployee.vue")
},
{
// 灵活用工详情
path: '/flex_employee_detial',
name: 'FlexEmployeeDetial',
component: () => import("../views/FlexEmployeeDetial.vue")
},
{
// 企业员工
path: '/company_employee_details',
name: 'CompanyEmployeeDetails',
component: () => import("../views/CompanyEmployeeDetails.vue")
}
]
......
src/views/CompanyEmployeeDetails.vue 0 → 100644
<template>
<div class="ced-box">
<div class="person-information">
<div class="person-information-left">
<h3>小凶许</h3>
<p>1996.01.01</p>
</div>
<div class="person-information-right">
<img src="../assets/images/agent/123.jpg" alt />
</div>
</div>
<div class="ced-service-div">
<div class="more-service-box">
<h3>更多服务</h3>
<div class="more-service-div">
<a href>
<img src="../assets/images/agent/service-bcbx.png" alt />
<p>补充保险</p>
</a>
<a href>
<img src="../assets/images/agent/service-gzjzz.png" alt />
<p>工作居住证</p>
</a>
<a href>
<img src="../assets/images/agent/service-jktj.png" alt />
<p>健康体检</p>
</a>
</div>
<div class="more-service-div">
<a href>
<img src="../assets/images/agent/service-ldqy.png" alt />
<p>劳动权益</p>
</a>
<a href>
<img src="../assets/images/agent/service-bjjflh.png" alt />
<p>北京积分落户</p>
</a>
<a href>
<img src="../assets/images/agent/service-bjjthk.png" alt />
<p>北京集体户口</p>
</a>
</div>
</div>
<div class="tools-box">
<h3>职场小工具</h3>
<div class="tools-div">
<a class="toolsbox-child" href>
<img src="../assets/images/agent/si_count@2x.png" alt />
<p>社保计算</p>
</a>
<a class="toolsbox-child" href>
<img src="../assets/images/agent/af_acount@2x.png" alt />
<p>社保查询</p>
</a>
<a class="toolsbox-child" href>
<img src="../assets/images/agent/fixed-point hospital@2x.png" alt />
<p>工资计算</p>
</a>
<a class="toolsbox-child" href>
<img src="../assets/images/agent/home_salay_24@2x.png" alt />
<p>公积金计算</p>
</a>
<a class="toolsbox-child" href>
<img src="../assets/images/agent/Group@2x.png" alt />
<p>公积金查询</p>
</a>
<a class="toolsbox-child" href="https://h5.hrs100.com/html/smallTools/more-tools-h5.html">
<img src="../assets/images/agent/Rectangle@2x(1).png" alt />
<p>更多小工具</p>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="less">
.person-information {
width: 100%;
height: 256px;
background-color: #19b370;
padding: 20px 16px 0 16px;
}
.person-information-left {
height: 100px;
float: left;
}
.person-information-left h3 {
color: #ffffff;
font-size: 24px;
line-height: 33px;
}
.person-information-left p {
color: #ffffff;
font-size: 14px;
line-height: 20px;
margin-top: 7px;
}
.person-information-right {
height: 100px;
float: right;
}
.person-information-right img {
width: 60px;
height: 60px;
border-radius: 90%;
}
.ced-service-div {
width: 100%;
margin-top: -156px;
border-radius: 12px 12px 0px 0px;
background: rgba(255, 255, 255, 1);
}
.more-service-box {
padding-top: 24px;
}
.more-service-box h3 {
color: #3d4047;
font-size: 16px;
line-height: 22px;
font-weight: 500;
margin-left: 16px;
}
.more-service-div {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.more-service-div a {
flex: 1;
text-align: center;
}
.more-service-div a img {
display: inline-block;
width: 23px;
}
.more-service-div a p {
color: #5e6066;
font-size: 13px;
margin-top: 12px;
}
.tools-box {
margin-top: 36px;
}
.tools-box h3 {
color: #3d4047;
font-size: 16px;
line-height: 22px;
font-weight: 500;
margin-left: 16px;
}
.tools-div {
width: 100%;
height: 108px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
padding: 0 16px;
margin-top: 20px;
}
.toolsbox-child {
display: block;
width: 106px;
height: 48px;
background: rgba(245, 247, 250, 1);
border-radius: 2px;
margin-bottom: 12px;
}
.toolsbox-child img {
width: 14px;
height: 14px;
float: left;
margin-left: 10px;
margin-right: 8px;
margin-top: 17px;
}
.toolsbox-child p {
color: #5e6066;
font-size: 13px;
line-height: 48px;
}
</style>
\ No newline at end of file
src/views/FlexEmployee.vue 0 → 100644
<template>
<!-- 1、已接单 进行中 #077AEC 2、已拒回 #FF9100 3、已完成 #95989E-->
<div class="fe-bigbox">
<div class="person-information">
<div class="person-information-top">
<div class="person-information-left">
<h3>小凶许</h3>
<p>1996.01.01</p>
</div>
<div class="person-information-right">
<img src="../assets/images/agent/123.jpg" alt />
</div>
</div>
<div class="person-information-bottom">
<div class="person-information-bottom-child" id="person-information-yjrw">
<h3>10</h3>
<p>已接任务</p>
</div>
<div class="person-information-bottom-child" id="person-information-wcrw">
<h3>2</h3>
<p>完成任务</p>
</div>
<div class="person-information-bottom-child" id="person-information-ysbc">
<h3>12236.36</h3>
<p>应收报酬</p>
</div>
<div class="person-information-bottom-child" id="person-information-yysbc">
<h3>2236.36</h3>
<p>已收报酬</p>
</div>
</div>
</div>
<div class="fe-list-box">
<div class="fe-list-title">
<h3>任务记录</h3>
</div>
<a class="fe-list-child" href>
<div class="fe-list-child-left">
<h3>市场推广-地推</h3>
<p>2020-04-01</p>
</div>
<div class="fe-list-child-right">
<div class="fe-list-child-right-desc">
<h3>¥2000.00</h3>
<p>已接单</p>
</div>
<img src="../assets/images/agent/next_gray.png" alt />
</div>
</a>
<a class="fe-list-child" href>
<div class="fe-list-child-left">
<h3>市场推广-地推</h3>
<p>2020-04-01</p>
</div>
<div class="fe-list-child-right">
<div class="fe-list-child-right-desc">
<h3>¥2000.00</h3>
<p>进行中</p>
</div>
<img src="../assets/images/agent/next_gray.png" alt />
</div>
</a>
<a class="fe-list-child" href>
<div class="fe-list-child-left">
<h3>市场推广-地推</h3>
<p>2020-04-01</p>
</div>
<div class="fe-list-child-right">
<div class="fe-list-child-right-desc">
<h3>¥2000.00</h3>
<p>已拒回</p>
</div>
<img src="../assets/images/agent/next_gray.png" alt />
</div>
</a>
<a class="fe-list-child" href>
<div class="fe-list-child-left">
<h3>市场推广-地推</h3>
<p>2020-04-01</p>
</div>
<div class="fe-list-child-right">
<div class="fe-list-child-right-desc">
<h3>¥2000.00</h3>
<p>已完成</p>
</div>
<img src="../assets/images/agent/next_gray.png" alt />
</div>
</a>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="less">
.person-information {
background-color: #19b370;
width: 100%;
height: 256px;
padding: 20px 16px 0 16px;
}
.person-information-top {
height: 60px;
}
.person-information-left {
float: left;
}
.person-information-left h3 {
color: #ffffff;
font-size: 24px;
line-height: 33px;
}
.person-information-left p {
color: #ffffff;
font-size: 14px;
line-height: 20px;
margin-top: 7px;
}
.person-information-right {
float: right;
}
.person-information-right img {
width: 60px;
height: 60px;
border-radius: 90%;
}
.person-information-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
}
.person-information-bottom-child {
flex: 1;
text-align: center;
}
.person-information-bottom-child h3 {
color: #ffffff;
font-size: 18px;
line-height: 24px;
font-weight: 500;
}
.person-information-bottom-child p {
color: #bcead6;
font-size: 13px;
line-height: 18px;
margin-top: 6px;
}
.fe-list-box {
width: 100%;
background-color: #ffffff;
border-radius: 12px 12px 0px 0px;
padding: 0 16px;
margin-top: -76px;
min-height: 76px;
}
.fe-list-title {
width: 100%;
height: 52px;
border-bottom: 1px solid #ebecf0;
}
.fe-list-title h3 {
color: #3d4047;
font-size: 14px;
line-height: 52px;
font-weight: 500;
}
.fe-list-child {
display: block;
height: 77px;
border-bottom: 1px solid #ebecf0;
display: flex;
justify-content: space-between;
}
.fe-list-child-left h3 {
color: #3d4047;
font-size: 16px;
line-height: 22px;
font-weight: 500;
margin-top: 15px;
}
.fe-list-child-left p {
color: #95989e;
font-size: 13px;
line-height: 18px;
margin-top: 6px;
}
.fe-list-child-right {
display: flex;
justify-content: center;
align-items: center;
}
.fe-list-child-right img {
width: 9px;
height: 14px;
margin-left: 7px;
}
.fe-list-child-right-desc {
height: 100%;
}
.fe-list-child-right h3 {
color: #3d4047;
font-size: 16px;
line-height: 22px;
font-weight: 500;
text-align: right;
margin-top: 15px;
}
.fe-list-child-right p {
font-size: 13px;
line-height: 18px;
font-weight: 400;
margin-top: 6px;
text-align: right;
}
</style>
\ No newline at end of file
src/views/FlexEmployeeDetial.vue 0 → 100644
<template>
<div class="fe-detial-box">
<div class="fe-detial-top">
<h4>任务报酬</h4>
<h3>+8,000.22</h3>
<p>待发放</p>
</div>
<div class="fe-detial-bottom">
<div class="fe-detial-bottom-title">
<p>发包企业</p>
<p>任务内容</p>
<p>发放时间</p>
<p>收款账户</p>
</div>
<div class="fe-detial-bottom-detial">
<p>天津有米科技有限公司</p>
<p>市场推广-地推</p>
<p>2019-11-12</p>
<p>622254889999888900</p>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="less">
.fe-detial-box {
width: 100%;
padding: 0 30px;
}
.fe-detial-top {
height: 207px;
border-bottom: 1px solid #ebecf0;
}
.fe-detial-top h4 {
color: #3d4047;
font-size: 16px;
line-height: 22px;
font-weight: 400;
text-align: center;
margin-top: 50px;
}
.fe-detial-top h3 {
color: #3d4047;
font-size: 32px;
line-height: 39px;
font-weight: 500;
text-align: center;
margin-top: 16px;
}
.fe-detial-top p {
color: #077aec;
font-size: 14px;
line-height: 20px;
text-align: center;
margin-top: 10px;
}
.fe-detial-bottom {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.fe-detial-bottom-title p {
color: #5e6066;
font-size: 14px;
line-height: 30px;
}
.fe-detial-bottom-detial p {
color: #3d4047;
font-size: 14px;
line-height: 30px;
text-align: right;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment