YY_MP_REFACTOR/src/pages/index/index.vue

<template>
  <view class="page-workbench">
    <view class="workbench-header">
      <wd-navbar fixed placeholder :bordered="false" safeAreaInsetTop customClass="navbar">
        <template #title>
          <view class="navbar-title"> 要易小助手</view>
        </template>
      </wd-navbar>
      <WorkbenchCard
        :is-login="isLogin"
        :on-the-way="onTheWay"
        :wait-approve="waitApprove"
        @go-task="goTask"
        @open-history="taskHistory"
        @open-status="handleOpenStatus"
      />
    </view>
    <view class="workbench-notice">
      <wd-notice-bar
        text="任务包即将完成时，请不要做积分较高的任务，避免浪费积分哦～"
        prefix="warn-bold"
        type="info "
        color="#f90"
        background-color="#fdf6ec "
      />
    </view>
    <WorkbenchTaskSection />
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import WorkbenchCard from './components/WorkbenchCard.vue'
import WorkbenchTaskSection from './components/WorkbenchTaskSection.vue'

const isLogin = ref(false)
const onTheWay = ref(5)
const waitApprove = ref(2)

const goTask = () => {
  console.log('去领包')
}
const taskHistory = () => {
  // 领包记录
  console.log('去领包')
}
const handleOpenStatus = (type: 'on-the-way' | 'wait-approve') => {
  // 领包记录
}
</script>

<style lang="scss" scoped>
.page-workbench {
  .workbench-header {
    position: relative;
    background-image: var(--workbench-bg);
    background-size: 100% 100%;
    height: 400rpx;
    width: 750rpx;

    :deep(.navbar) {
      background-color: transparent;
    }
    .navbar-title {
      color: #fff;
      font-weight: bold;
    }
  }
  .workbench-notice {
    padding: 0 30rpx;
    margin: 150rpx auto 0;
  }
}
</style>