APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add style

voice
刘嘉炜 5 years ago
parent
a0234d492f
commit
495b066690
9 changed files with 750 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/pages.json
  2. 96
      src/pages/employee/authority_filter/authority_filter.vue
  3. 175
      src/pages/employee/authority_select/authority_select.vue
  4. 85
      src/pages/employee/change_admin/change_admin.vue
  5. 106
      src/pages/employee/invite_code/invite_code.vue
  6. 206
      src/pages/employee/manage/manage.vue
  7. 53
      src/pages/employee/perfect_info/perfect_info.vue
  8. BIN
      src/static/images/icon/invite.png
  9. BIN
      src/static/images/icon/scan_code.png

30
src/pages.json
View File

@ -1,6 +1,36 @@
{ {
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/employee/perfect_info/perfect_info",
"style": {
"navigationBarTitleText": "员工信息"
}
},
{
"path": "pages/employee/invite_code/invite_code",
"style": {
"navigationBarTitleText": "员工管理"
}
},
{
"path": "pages/employee/authority_filter/authority_filter",
"style": {
"navigationBarTitleText": "员工筛选"
}
},
{
"path": "pages/employee/authority_select/authority_select",
"style": {
"navigationBarTitleText": "员工管理"
}
},
{
"path": "pages/employee/change_admin/change_admin",
"style": {
"navigationBarTitleText": "员工管理"
}
},
{
"path": "pages/employee/manage/manage", "path": "pages/employee/manage/manage",
"style": { "style": {
"navigationBarTitleText": "员工管理" "navigationBarTitleText": "员工管理"

96
src/pages/employee/authority_filter/authority_filter.vue
View File

@ -0,0 +1,96 @@
<template>
<view class="authoeity-filter">
<view class="af-title">请选择您要筛选的权限</view>
<view class="af-section">
<view class="as-tip">
<text>*</text>
<text>请选择门店</text>
<text>(多项选择)</text>
</view>
<view class="as-select">
<input placeholder="全部" disabled />
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
<view class="as-tip">
<text>*</text>
<text>请选择门店</text>
<text>(多项选择)</text>
</view>
<view class="as-select">
<input placeholder="全部" disabled />
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
<view class="af-btn" hover-class="hover-active">筛选</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../../style/public.scss";
.authoeity-filter{
padding: 62upx 24upx 0;
.af-title{
margin-left: 18upx;
margin-bottom: 68upx;
line-height: 60upx;
font-size: 44upx;
color: #1a1a1a;
}
.af-section{
margin-bottom: 40upx;
padding: 40upx 30upx 0;
height: 738upx;
border-radius: 10upx;
background-color: #fff;
.as-tip{
margin-bottom: 36upx;
line-height: 40upx;
font-size: 28upx;
color: #1A1A1A;
>text{
&:first-child{
color: #EA5061;
}
&:nth-child(3){
color: #9C9C9F;
}
}
}
.as-select{
padding-left: 20upx;
padding-right: 34upx;
margin-bottom: 60upx;
height: 96upx;
border-radius: 10upx;
border: 2upx solid #d8d8d8;
@include centerFlex(space-between);
>image{
flex-shrink: 0;
margin-left: 14upx;
width: 28upx;
height: 28upx;
transform: rotateZ(90deg);
}
>input{
flex-grow: 1;
height: 100%;
font-size: 32upx;
color: #1a1a1a;
}
}
}
.af-btn{
height: 112upx;
line-height: 112upx;
text-align: center;
border-radius: 10upx;
font-size: 32upx;
color: #fff;
background-color: $themeColor;
}
}
</style>

175
src/pages/employee/authority_select/authority_select.vue
View File

@ -0,0 +1,175 @@
<template>
<view class="authority-select">
<view class="as-contetnt">
<view class="ac-user">
<image></image>
<view class="au-info">
<view>周小舞</view>
<view>电话 18098765331</view>
</view>
</view>
<view class="ac-shop-author">
<view class="ac-select-all">
<view>门店权限 </view>
<view>
<view>全选</view>
<switch color="#009874"></switch>
</view>
</view>
<view class="asa-author-list">
<view class="aal-line">
<view>欧轩智能羽毛球馆(永泰店)</view>
<switch color="#009874"></switch>
</view>
<view class="aal-line">
<view>欧轩智能羽毛球馆(永泰店)</view>
<switch color="#009874"></switch>
</view>
</view>
</view>
<view class="ac-app-author">
<view class="ac-select-all">
<view>小程序权限 </view>
<view>
<view>全选</view>
<switch color="#009874"></switch>
</view>
</view>
<view class="aaa-list">
<view class="al-item" v-for="e in 4" :key="e">
<view>
<text>营业额</text>
<switch color="#009874"></switch>
</view>
<view>
<text>营业额</text>
<switch color="#009874"></switch>
</view>
</view>
</view>
</view>
<view class="ac-cancel" hover-class="hover-active">移除员工</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../../style/public.scss";
.as-contetnt{
switch{
transform: scale(.7);
}
.ac-user{
padding: 38upx 30upx 40upx;
@include centerFlex(flex-start);
>image{
flex-shrink: 0;
margin-right: 30upx;
width: 112upx;
height: 112upx;
border-radius: 10upx;
background-color: skyblue;
}
.au-info{
>view{
@include textHide(1);
&:first-child{
margin-bottom: 12upx;
line-height: 60upx;
font-size: 44upx;
color: #1a1a1a;
}
&:nth-child(2){
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
}
}
}
.ac-shop-author{
margin: 0 auto 24upx;
width: 702upx;
background-color: #fff;
border-radius: 10upx;
.asa-author-list{
padding: 0 30upx;
&:not(:last-child){
border-bottom: 2upx solid #D8D8D8;
}
.aal-line{
height: 116upx;
@include centerFlex(space-between);
>view{
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
}
}
}
.ac-app-author{
margin: 0 auto 24upx;
width: 702upx;
background-color: #fff;
border-radius: 10upx;
.aaa-list{
padding: 0 30upx;
.al-item{
height: 116upx;
@include centerFlex(space-between);
&:not(:last-child){
border-bottom: 2upx solid #D8D8D8;
}
>view{
>text{
margin-right: 50upx;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
}
}
}
}
.ac-select-all{
padding: 0 30upx;
height: 116upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
&:first-child{
line-height: 44upx;
font-size: 32upx;
color: #9c9c9f;
}
&:nth-child(2){
@include centerFlex(flex-end);
>view{
margin-right: 20upx;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
}
}
}
.ac-cancel{
margin: 0 auto 24upx;
width: 702upx;
height: 112upx;
border-radius: 10upx;
text-align: center;
line-height: 112upx;
font-size: 32upx;
color: #EA5061;
background-color: #fff;
}
}
</style>

85
src/pages/employee/change_admin/change_admin.vue
View File

@ -0,0 +1,85 @@
<template>
<view class="change-admin">
<view class="ca-title">更改超级管理理员</view>
<view class="ca-section">
<view class="cs-tit"><text>*</text>请选择管理员</view>
<picker>
<view class="cs-selected">
<view>请选择超级管理员</view>
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</picker>
<view class="cs-tip">超级管理员只有一个，请谨慎操作</view>
<view class="cs-tip">更改后您的超级管理员权限将降级为普通管理员</view>
</view>
<view class="ca-btn" hover-class="hover-active">确定</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../../style/public.scss";
.change-admin{
padding: 62upx 24upx 0;
.ca-title{
margin-left: 16upx;
margin-bottom: 68upx;
line-height: 60upx;
font-weight: 500;
font-size: 44upx;
color: #1a1a1a;
}
.ca-section{
margin-bottom: 40upx;
padding: 40upx 30upx 0;
height: 738upx;
background-color: #fff;
border-radius: 10upx 10upx 0 0;
.cs-tit{
margin-bottom: 36upx;
line-height: 40upx;
font-size: 28upx;
color: #1a1a1a;
>text{
color: #EA5061;
}
}
.cs-selected{
margin-bottom: 36upx;
padding-left: 20upx;
padding-right: 34upx;
height: 96upx;
border-radius: 10upx;
border: 2upx solid #d8d8d8;
@include centerFlex(space-between);
>view{
font-size: 32upx;
line-height: 44upx;
color: #9c9c9f;
}
>image{
width: 28upx;
height: 28upx;
transform: rotateZ(90deg);
}
}
.cs-tip{
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
}
.ca-btn{
height: 112upx;
line-height: 112upx;
text-align: center;
border-radius: 10upx;
font-size: 32upx;
color: #fff;
background-color: $themeColor;
}
}
</style>

106
src/pages/employee/invite_code/invite_code.vue
View File

@ -0,0 +1,106 @@
<template>
<view class="invite-code">
<view class="ic-content">
<view class="ic-header">
<image mode="aspectFit" src="/static/images/icon/scan_code.png"></image>
<text>员工扫描二维码加入</text>
</view>
<view class="ic-code-section">
<image></image>
<view>欧轩智能场馆</view>
</view>
<view class="ic-invite-line">
<view>
<image mode="aspectFit" src="/static/images/icon/invite.png"></image>
<text>邀请微信朋友成为员工</text>
</view>
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
@import "../../../../style/public.scss";
page{
background-color: $themeColor;
}
.invite-code{
}
.ic-content{
padding: 40upx 24upx 0;
.ic-header{
padding: 0 26upx;
height: 132upx;
border-radius: 10upx 10upx 0upx 0upx;
background-color: rgba(255, 255, 255, .8);
@include centerFlex(flex-start);
>image{
margin-right: 18upx;
width: 52upx;
height: 52upx;
}
>text{
font-size: 32upx;
color: $themeColor;
}
}
.ic-code-section{
margin-bottom: 40upx;
padding-top: 86upx;
height: 688upx;
border-radius: 0 0 10upx 10upx;
background-color: #fff;
>image{
display: block;
margin: 0 auto;
width: 408upx;
height: 408upx;
margin-bottom: 48upx;
background-color: red;
}
>view{
text-align: center;
line-height: 44upx;
font-size: 32upx;
color: #9c9c9f;
}
}
.ic-invite-line{
padding-left: 24upx;
padding-right: 34upx;
height: 128upx;
border-radius: 10upx;
background-color: #fff;
@include centerFlex(space-between);
>image{
flex-shrink: 0;
width: 28upx;
height: 28upx;
}
>view{
@include centerFlex(flex-start);
>image{
flex-shrink: 0;
margin-right: 20upx;
width: 52upx;
height: 52upx;
}
>text{
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
}
}
}
</style>

206
src/pages/employee/manage/manage.vue
View File

@ -25,9 +25,47 @@
<view class="eu-name">胡雪儿</view> <view class="eu-name">胡雪儿</view>
<view class="eu-tag">超级管理员</view> <view class="eu-tag">超级管理员</view>
</view> </view>
<view>更换</view>
<view hover-class="hover-active">更换</view>
</view> </view>
</view> </view>
<view class="ec-employees">
<view class="ec-header">
<view>
<image mode="aspectFit" src=""></image>
<view>员工总数 <text>3</text></view>
</view>
<view>
<text>筛选</text>
<text>删除</text>
<text class="active">取消</text>
</view>
</view>
<view class="ec-lists">
<view class="el-item" v-for="k in 20" :key="k">
<view>
<image class="ei-icon"></image>
<image class="ei-avatar"></image>
<view class="ei-info">
<view>胡雪儿</view>
<view class="ei-author">
<view>权限：</view>
<view>
<view v-for="e in k" :key="e">场馆订{{e}}</view>
</view>
</view>
</view>
</view>
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
</view>
<view class="ec-fixed-bot">
<view>
<image></image>
<text>全选</text>
</view>
<view hover-class="hover-active">移除</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -39,6 +77,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../../style/public.scss"; @import "../../../../style/public.scss";
.em-content{ .em-content{
padding-bottom: 96upx;
padding-bottom: calc( 96upx + constant(safe-area-inset-bottom));
padding-bottom: calc( 96upx + env(safe-area-inset-bottom));
.ec-search{ .ec-search{
margin-bottom: 16upx; margin-bottom: 16upx;
height: 144upx; height: 144upx;
@ -162,5 +203,168 @@ export default {
} }
} }
} }
.ec-employees{
background-color: #fff;
.ec-header{
padding: 0 24upx;
height: 132upx;
border-bottom: 2upx solid #E1E1E1;
@include centerFlex(space-between);
>view{
&:first-child{
flex-grow: 1;
@include centerFlex(flex-start);
>image{
flex-shrink: 0;
margin-right: 12upx;
width: 48upx;
height: 48upx;
background-color: $themeColor;
}
>view{
flex-grow: 1;
font-size: 32upx;
color: #9c9c9f;
@include textHide(1);
>text{
margin-left: 10upx;
color: #1a1a1a;
}
}
}
&+view{
font-size: 28upx;
color: #1A1A1A;
>text{
margin: 0 16upx;
}
.active{
color: $themeColor !important;
}
}
}
}
.ec-lists{
padding: 0 24upx;
background-color: #fff;
.el-item{
padding: 30upx 0;
display: flex;
justify-content: space-between;
&:not(:last-child){
border-bottom: 2upx solid #D8D8D8;
}
>image{
margin-top: 22upx;
flex-shrink: 0;
margin-right: 20upx;
width: 28upx;
height: 28upx;
}
>view{
flex-grow: 1;
display: flex;
.ei-icon{
margin-top: 20upx;
flex-shrink: 0;
width: 40upx;
height: 40upx;
border: 2upx solid #d8d8d8;
border-radius: 50%;
}
.ei-avatar{
flex-shrink: 0;
margin: 0 20upx;
width: 80upx;
height: 80upx;
border-radius: 10upx;
background-color: tomato;
}
.ei-info{
flex-grow: 1;
>view:first-child{
margin-bottom: 2upx;
font-size: 32upx;
line-height: 44upx;
color: #333;
@include textHide(1);
}
.ei-author{
display: flex;
>view{
&:first-child{
flex-shrink: 0;
margin-right: 4upx;
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
&+view{
flex-grow: 1;
display: flex;
flex-wrap: wrap;
>view{
flex-shrink: 0;
margin-right: 28upx;
margin-bottom: 20upx;
padding: 0 8upx;
height: 32upx;
line-height: 28upx;
font-size: 22upx;
border-radius: 6upx;
border: 2upx solid #d8d8d8;
color: #9C9C9F;
}
}
}
}
}
}
}
}
}
.ec-fixed-bot{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
padding-left: 24upx;
padding-right: 44upx;
padding-top: 8upx;
padding-bottom: 8upx;
padding-bottom: calc( 8upx + constant(safe-area-inset-bottom));
padding-bottom: calc( 8upx + env(safe-area-inset-bottom));
border-top: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
&:first-child{
>image{
margin-right: 22upx;
vertical-align: middle;
width: 40upx;
height: 40upx;
border-radius: 50%;
border: 2upx solid #D8D8D8;
}
>text{
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
}
&+view{
width: 210upx;
height: 80upx;
line-height: 76upx;
text-align: center;
border-radius: 10upx;
font-size: 32upx;
font-weight: 500;
border: 2upx solid #ea5061;
color: #ea5061;
}
}
}
} }
</style> </style>

53
src/pages/employee/perfect_info/perfect_info.vue
View File

@ -0,0 +1,53 @@
<template>
<view class="perfect-info">
<view class="pi-tip">欧轩智能场馆</view>
<view class="pi-title">邀请你成为员工</view>
<view class="pi-form">
<view>请完成以下信息，成为其员工</view>
<view>
<text>你的姓名</text>
<view><input /></view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "../../../../style/public.scss";
page{
background-color: #fff;
}
.perfect-info{
padding-top: 104upx;
.pi-tip{
text-align: center;
margin-bottom: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
.pi-title{
margin-bottom: 96upx;
line-height: 60upx;
text-align: center;
font-weight: 500;
font-size: 44upx;
color: #1a1a1a;
}
.pi-form{
padding-left: 74upx;
padding-right: 78upx;
>view:first-child{
margin-bottom: 38upx;
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
}
}
</style>

BIN
src/static/images/icon/invite.png
View File

Side by Side

After

Width: 52  |  Height: 52  |  Size: 367 B

BIN
src/static/images/icon/scan_code.png
View File

Side by Side

After

Width: 52  |  Height: 52  |  Size: 422 B

Write Preview
Loading…
Cancel
Save