【PT.SCC实名制管理系统】24.10.01 -30天,考勤打卡小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
2.0 KiB

7 months ago
  1. <!-- 打卡 -->
  2. <template>
  3. <view class="punch-card">
  4. <!-- 自定义导航栏 -->
  5. <uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left"
  6. title="打卡" @clickLeft="$utils.navigateBack" />
  7. <!-- 打卡图片 -->
  8. <view class="card-image">
  9. <image src="@/static/logo.png" mode="widthFix"></image>
  10. </view>
  11. <!-- 打卡详情 -->
  12. <view class="card-detail">
  13. <view class="card-detail-item">
  14. <uni-icons type="info-filled" size="25" color="#707070"></uni-icons>
  15. <view class="time">2024-12-12 12:12:12</view>
  16. </view>
  17. <view class="card-detail-item">
  18. <uni-icons type="location-filled" size="25" color="#707070"></uni-icons>
  19. <view class="address">长沙市雨花区德思勤城市广场</view>
  20. </view>
  21. </view>
  22. <!-- 提交打卡 -->
  23. <div @click="photo" class="btn">
  24. 提交打卡
  25. </div>
  26. </view>
  27. </template>
  28. <script>
  29. export default {
  30. name: "punchCard",
  31. data() {
  32. return {
  33. }
  34. },
  35. methods: {
  36. // 返回人脸识别
  37. toHuman() {
  38. uni.navigateTo({
  39. url: "/pages/human/human"
  40. })
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="scss" scoped>
  46. .punch-card {
  47. // 打卡图片
  48. .card-image {
  49. display: flex;
  50. justify-content: center;
  51. margin: 30rpx 0rpx;
  52. image {
  53. width: 90%;
  54. border-radius: 30rpx;
  55. }
  56. }
  57. // 打卡详情
  58. .card-detail {
  59. width: 90%;
  60. margin: 30rpx auto;
  61. .card-detail-item {
  62. display: flex;
  63. align-items: center;
  64. margin-top: 10rpx;
  65. .time,
  66. .address {
  67. font-size: 30rpx;
  68. color: #707070;
  69. box-sizing: border-box;
  70. padding-left: 20rpx;
  71. display: -webkit-box;
  72. -webkit-box-orient: vertical;
  73. -webkit-line-clamp: 2;
  74. overflow: hidden;
  75. text-overflow: ellipsis;
  76. }
  77. }
  78. }
  79. // 提交打卡
  80. .btn {
  81. display: flex;
  82. align-items: center;
  83. justify-content: center;
  84. width: 83%;
  85. background: $main-color;
  86. color: white;
  87. height: 100rpx;
  88. border-radius: 50rpx;
  89. margin: 120rpx auto 0rpx auto;
  90. }
  91. }
  92. </style>