guidePage.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <view class="guide-page">
  3. <view class="guide-item">
  4. <view class="guide-img">
  5. <image
  6. src="@/static/images/jobApplicant/woyaozhaogongzuo.svg"
  7. mode="aspectFix"
  8. />
  9. </view>
  10. <view class="guide-btn" @click="goWork">我要找工作</view>
  11. </view>
  12. <view class="guide-item">
  13. <view class="guide-img">
  14. <image
  15. src="@/static/images/jobApplicant/woyaozhaoren.svg"
  16. mode="aspectFix"
  17. />
  18. </view>
  19. <view class="guide-btn">我要招人</view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {};
  27. },
  28. methods: {
  29. goWork(){
  30. uni.navigateTo({ url: '/pages/my/jobApplicant/welcomePage' })
  31. }
  32. },
  33. };
  34. </script>
  35. <style scoped lang="scss">
  36. .guide-page {
  37. background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  38. position: absolute;
  39. left: 0;
  40. right: 0;
  41. top: 0;
  42. bottom: 0;
  43. padding: 120rpx 76rpx;
  44. display: flex;
  45. flex-direction: column;
  46. box-sizing: border-box;
  47. gap: 36rpx;
  48. .guide-item {
  49. width: 100%;
  50. height: 100%;
  51. border-radius: 28rpx;
  52. background: rgba(255, 255, 255, 0.851);
  53. display: flex;
  54. flex-direction: column;
  55. justify-content: center;
  56. align-items: center;
  57. padding: 0 56rpx;
  58. box-sizing: border-box;
  59. gap: 72rpx;
  60. .guide-img {
  61. width: 364rpx;
  62. height: 364rpx;
  63. overflow: hidden;
  64. image {
  65. width: 100%;
  66. height: 100%;
  67. }
  68. }
  69. .guide-btn {
  70. border-radius: 100rpx;
  71. background: rgba(255, 255, 255, 1);
  72. color: #016bf6;
  73. font-family: DM Sans;
  74. font-size: 32rpx;
  75. font-weight: 400;
  76. line-height: 48rpx;
  77. letter-spacing: 0%;
  78. text-align: center;
  79. width: 100%;
  80. padding: 16rpx;
  81. box-sizing: border-box;
  82. }
  83. }
  84. }
  85. </style>