| | |
| | | <view class="title">选择任务类型</view> |
| | | <view class="subtitle">请选择您要创建的任务类型</view> |
| | | </view> |
| | | |
| | | |
| | | <view class="category-list"> |
| | | <view |
| | | class="category-item" |
| | | v-for="(category, index) in taskCategories" |
| | | :key="index" |
| | | @click="selectTaskCategory(category)" |
| | | > |
| | | <view class="category-item" v-for="(category, index) in taskCategories" :key="index" |
| | | @click="selectTaskCategory(category)"> |
| | | <view class="icon"> |
| | | <uni-icons :type="category.icon" size="30" :color="category.color"></uni-icons> |
| | | </view> |
| | |
| | | return { |
| | | taskCategories: [ |
| | | { |
| | | type: 'emergency', |
| | | name: '急救转运', |
| | | icon: 'hospital', |
| | | color: '#E54D42', |
| | | description: '紧急医疗转运任务', |
| | | taskType: 'EMERGENCY_TRANSFER', |
| | | page: '/pages/task/create-emergency' |
| | | }, |
| | | { |
| | | type: 'normal', |
| | | name: '维修保养', |
| | | icon: 'repair', |
| | |
| | | taskType: 'FUEL', |
| | | page: '/pages/task/create-normal' |
| | | }, |
| | | { |
| | | type: 'emergency', |
| | | name: '急救转运', |
| | | icon: 'hospital', |
| | | color: '#E54D42', |
| | | description: '紧急医疗转运任务', |
| | | taskType: 'EMERGENCY_TRANSFER', |
| | | page: '/pages/task/create-emergency' |
| | | }, |
| | | |
| | | { |
| | | type: 'welfare', |
| | | name: '福祉车', |
| | |
| | | padding: 20rpx; |
| | | background-color: #f5f5f5; |
| | | min-height: 100vh; |
| | | |
| | | |
| | | .task-category-container { |
| | | .header { |
| | | text-align: center; |
| | | padding: 40rpx 0; |
| | | |
| | | |
| | | .title { |
| | | font-size: 40rpx; |
| | | font-weight: bold; |
| | | color: #333; |
| | | margin-bottom: 20rpx; |
| | | } |
| | | |
| | | |
| | | .subtitle { |
| | | font-size: 28rpx; |
| | | color: #666; |
| | | } |
| | | } |
| | | |
| | | |
| | | .category-list { |
| | | .category-item { |
| | | display: flex; |
| | |
| | | padding: 30rpx; |
| | | margin-bottom: 20rpx; |
| | | box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
| | | |
| | | |
| | | .icon { |
| | | margin-right: 20rpx; |
| | | } |
| | | |
| | | |
| | | .info { |
| | | flex: 1; |
| | | |
| | | |
| | | .name { |
| | | font-size: 32rpx; |
| | | font-weight: bold; |
| | | margin-bottom: 10rpx; |
| | | } |
| | | |
| | | |
| | | .desc { |
| | | font-size: 26rpx; |
| | | color: #666; |
| | | } |
| | | } |
| | | |
| | | |
| | | .arrow { |
| | | margin-left: 20rpx; |
| | | } |