index.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
  3. <cus-header title='员工管理'></cus-header>
  4. <div class="boxs" v-if="list.length">
  5. <div class="box" v-for="(item,index) in list" :key="index" @tap="toDetail(item)">
  6. <div class="top">
  7. <div class="left">
  8. <text>{{item.name}}</text>
  9. <image :src="imgBase+'home/staff_man.png'" v-if="item.sex==1"></image>
  10. <image :src="imgBase+'home/staff_women.png'" v-else-if="item.sex==2"></image>
  11. </div>
  12. <div class="right">{{item.date}}入职</div>
  13. </div>
  14. <div class="bottom">
  15. <div class="left">手机号:{{item.phone}}</div>
  16. <div class="right">工号:{{item.workno}}</div>
  17. </div>
  18. </div>
  19. </div>
  20. <template v-else>
  21. <page-empty :height="'calc(100vh - '+mt+'px)'"></page-empty>
  22. </template>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. data(){
  28. return {
  29. list:[
  30. {
  31. name:'梁惠美',
  32. sex:1,
  33. date:'2022-09-22',
  34. phone:'18755223476',
  35. workno:'0103'
  36. },
  37. {
  38. name:'周佳玉',
  39. sex:1,
  40. date:'2023-09-22',
  41. phone:'18755264476',
  42. workno:'0123'
  43. },
  44. {
  45. name:'魏琳琳',
  46. sex:2,
  47. date:'2024-09-22',
  48. phone:'18935223476',
  49. workno:'0243'
  50. }
  51. ]
  52. }
  53. },
  54. methods:{
  55. toDetail(item){
  56. uni.navigateTo({
  57. url:'/pagesHome/employee/detail'
  58. })
  59. }
  60. }
  61. }
  62. </script>
  63. <style scoped lang="less">
  64. .page{
  65. padding: 0 24rpx 20rpx;
  66. background: #F4F8FB;
  67. box-sizing: border-box;
  68. .boxs{
  69. width: 100%;
  70. .box{
  71. width: 100%;
  72. background: #FFFFFF;
  73. border-radius: 16rpx;
  74. padding: 36rpx 24rpx;
  75. box-sizing: border-box;
  76. margin-top: 20rpx;
  77. &>div{
  78. display: flex;
  79. align-items: center;
  80. justify-content: space-between;
  81. }
  82. .top{
  83. .left{
  84. display: flex;
  85. align-items: center;
  86. text{
  87. font-family: PingFang-SC, PingFang-SC;
  88. font-weight: bold;
  89. font-size: 32rpx;
  90. color: #1D2129;
  91. line-height: 36rpx;
  92. }
  93. image{
  94. width: 26rpx;
  95. height: 26rpx;
  96. margin-left: 23rpx;
  97. }
  98. }
  99. .right{
  100. font-family: PingFangSC, PingFang SC;
  101. font-weight: 400;
  102. font-size: 24rpx;
  103. color: #4E5969;
  104. line-height: 36rpx;
  105. text-align: right;
  106. }
  107. }
  108. .bottom{
  109. margin-top: 20rpx;
  110. &>div{
  111. font-family: PingFangSC, PingFang SC;
  112. font-weight: 400;
  113. font-size: 24rpx;
  114. color: #4E5969;
  115. line-height: 36rpx;
  116. &.right{
  117. text-align: right;
  118. }
  119. }
  120. }
  121. }
  122. }
  123. }
  124. </style>