issue.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view>
  3. <u-navbar back-text="发布" back-icon-size="28" back-icon-color="#ffffff"
  4. :background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
  5. <tabbar ref="mytabbar"
  6. :current="2"></tabbar>
  7. <view class="main">
  8. <view class="title">
  9. 选择您要发布的信息
  10. </view>
  11. <view class="headline">
  12. 您好,欢迎来到荆开零工驿站
  13. </view>
  14. <view class="card">
  15. <view class="icon">
  16. <img src="../../assets/img/issue1@1x.png" alt="">
  17. </view>
  18. <view class="card-title">
  19. <view class="title1">
  20. 求职信息
  21. </view>
  22. <view class="title2">
  23. 坐等好工作来找你
  24. </view>
  25. </view>
  26. <view class="right">
  27. <u-icon name="arrow-right" color="#D6D6D6"></u-icon>
  28. </view>
  29. </view>
  30. <view class="card">
  31. <view class="icon">
  32. <img src="../../assets/img/issue2@1x.png" alt="">
  33. </view>
  34. <view class="card-title">
  35. <view class="title1">
  36. 招工信息
  37. </view>
  38. <view class="title2">
  39. 精准满足用工需求
  40. </view>
  41. </view>
  42. <view class="right">
  43. <u-icon name="arrow-right" color="#D6D6D6"></u-icon>
  44. </view>
  45. </view>
  46. <view class="card">
  47. <view class="icon">
  48. <img src="../../assets/img/issue3@1x.png" alt="">
  49. </view>
  50. <view class="card-title">
  51. <view class="title1">
  52. 共享用工
  53. </view>
  54. <view class="title2">
  55. 发布共享公共信息
  56. </view>
  57. </view>
  58. <view class="right">
  59. <u-icon name="arrow-right" color="#D6D6D6"></u-icon>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import tabbar from "../../components/Tabbar.vue"
  67. export default {
  68. components: {
  69. tabbar
  70. },
  71. data() {
  72. return {
  73. }
  74. },
  75. methods: {
  76. }
  77. }
  78. </script>
  79. <style>
  80. page{
  81. padding-bottom: 100px;
  82. }
  83. </style>
  84. <style scoped lang="scss">
  85. .main{
  86. padding:96rpx 32rpx;
  87. .title{
  88. color: rgba(16, 16, 16, 1);
  89. font-size: 48rpx;
  90. font-family: 'PingFangSC-medium';
  91. line-height: 48rpx;
  92. }
  93. .headline{
  94. margin-top: 12rpx;
  95. line-height: 48rpx;
  96. color: rgba(119, 119, 119, 1);
  97. margin-bottom: 60rpx;
  98. }
  99. .card{
  100. display: flex;
  101. align-items: center;
  102. padding: 32rpx;
  103. border-radius: 12px;
  104. margin-bottom: 40rpx;
  105. background-color: rgba(245, 250, 255, 1);
  106. .icon{
  107. width: 136rpx;
  108. height: 136rpx;
  109. img{
  110. width: 100%;
  111. height: 100%;
  112. }
  113. }
  114. .card-title{
  115. margin-left: 40rpx;
  116. .title1{
  117. color: rgba(16, 16, 16, 1);
  118. font-size: 36rpx;
  119. font-family: 'PingFangSC-medium';
  120. }
  121. .title2{
  122. color: rgba(119, 119, 119, 1);
  123. margin-top: 8rpx;
  124. }
  125. }
  126. .right{
  127. margin-left: auto;
  128. }
  129. }
  130. }
  131. </style>