headhunter.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view>
  3. <view class="navbar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
  4. <view class="navbar-content">
  5. <view class="navbar-left" @click="goBack">
  6. <u-icon name="arrow-leftward" size="36" color="#fff"></u-icon>
  7. </view>
  8. <view class="navbar-title"></view>
  9. <view class="navbar-right"></view>
  10. </view>
  11. </view>
  12. <view class="contain flex flex-direction">
  13. <image src="/static/images/lt.png" class="header-icon" mode="widthFix" />
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. onLoad(options) {
  20. let systemInfo = uni.getSystemInfoSync();
  21. this.statusBarHeight = systemInfo.statusBarHeight || 0;
  22. },
  23. methods: {
  24. goBack() {
  25. uni.navigateBack();
  26. },
  27. }
  28. };
  29. </script>
  30. <style lang="scss" scoped>
  31. .navbar {
  32. position: fixed;
  33. top: 0;
  34. left: 0;
  35. right: 0;
  36. z-index: 999;
  37. .navbar-content {
  38. display: flex;
  39. align-items: center;
  40. justify-content: space-between;
  41. padding: 0 30rpx;
  42. height: 60rpx;
  43. .navbar-left {
  44. width: 60rpx;
  45. height: 60rpx;
  46. display: flex;
  47. align-items: center;
  48. justify-content: center;
  49. }
  50. .navbar-title {
  51. color: rgba(23, 23, 37, 1);
  52. font-family: DM Sans;
  53. font-size: 36rpx;
  54. font-weight: 700;
  55. line-height: 52rpx;
  56. letter-spacing: 0%;
  57. text-align: center;
  58. }
  59. .navbar-right {
  60. width: 60rpx;
  61. height: 60rpx;
  62. }
  63. }
  64. }
  65. .contain {
  66. background: linear-gradient(to right, #4286F5, #276DE7);
  67. padding-top: 120rpx;
  68. align-items: center;
  69. height: 100vh;
  70. .header-icon {
  71. width: 100%;
  72. display: block;
  73. }
  74. }
  75. </style>