work-order/work-order-uniapp/pages/index/index.vue

<template>
  <view class="index-page">
    <HeaderBar title="任务接单" icon="/static/logo.png" />
    <view class="main-content">
      <view class="top-banner">
        <!-- <image src="https://api.ccttiot.com/Mask%20group-1745760161341.png" class="banner-img" mode="widthFix" /> -->
        <image src="https://api.ccttiot.com/2c1937d0517165807bec9f8d88d4bd9c428726897074-ZS2qvw_fw1200-1751551087841.jpg" class="banner-img" mode="widthFix" />
        <view class="banner-text">
          <view class="banner-title">爱车故障不再慌，<br/>救援/维修马上到！</view>
          <button class="banner-btn" @click="handleTask">一键报修</button>
        </view>
      </view>
      <view class="func-area">
        <view class="func-left">
          <view class="func-card guide" @click="handleGuide">
            <text class="func-title">操作指南</text>
            <text class="func-desc">快速了解并解决问题所在</text>
            <image src="https://api.ccttiot.com/51bcd71a0b4c5fbf5344ce435ea2dc3e01aa5ab6accc-Rdqvmi%201-1745761137907.png" class="func-img" mode="aspectFit" />
          </view>
        </view>
        <view class="func-right">
          <button class="func-card contact" open-type="contact">
            <image src="https://api.ccttiot.com/dfb35deec932c456c520d1ce097bc31a092e645d1f8f-UnRT3Q%201%20(1)-1745761566648.png" class="func-img-small" mode="aspectFit" />
            <text class="func-title">联系我们</text>
          </button>
          <view class="func-card notice" @click="handleNotice">
            <image src="https://api.ccttiot.com/32a59b3434acc383bb6ca9d0a327a15829b11b4815b7c-RQOXKW%201-1745761566627.png" class="func-img-small" mode="aspectFit" />
            <text class="func-title">通知公告</text>
          </view>
        </view>
      </view>
    </view>
    <FooterTabBar :active="'/pages/index/index'" @plusClick="onPlusClick" />
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue'
import FooterTabBar from '@/components/FooterTabBar.vue'

export default {
  name: 'Index',
  components: {
    HeaderBar,
    FooterTabBar
  },
  onLoad(options) {
    if (options.invitorId) {
      uni.setStorageSync('invitorId', options.invitorId)
    }
  },
  methods: {
    onPlusClick() {
      uni.navigateTo({ url: '/pages/publish/publish' })
    },
    handleTask() {
      uni.navigateTo({ url: '/pages/task/edit' })
    },
    handleGuide() {
      uni.navigateTo({ url: '/pages/article/index?type=2' })
    },
    handleNotice() {
      uni.navigateTo({ url: '/pages/article/index?type=1' })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e6f0ff 0%, #f8fbff 100%);
  padding-bottom: 120rpx;
}
.main-content {
  padding: 32rpx 24rpx 0 24rpx;
}
.top-banner {
  position: relative;
  width: 100%;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 32rpx;
  background: #fbfaff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 32rpx 0;
  .banner-img {
    width: 300rpx;
    height: 300rpx;
    display: block;
    border-radius: 24rpx;
  }
  .banner-text {
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    margin: auto;
    width: 100%;
    height: fit-content;
    padding-left: 32rpx;
    z-index: 2;
    pointer-events: none;
    .banner-title {
      font-size: 48rpx;
      color: #3478f6;
      margin-bottom: 16rpx;
      text-shadow: 0 2rpx 8rpx #fff;
    }
    .banner-btn {
      width: fit-content;
      background: #3478f6;
      color: #fff;
      border-radius: 32rpx;
      font-size: 28rpx;
      padding: 4rpx 32rpx;
      line-height: 1.8em;
      border: none;
      pointer-events: auto;
      margin-left: 0;
    }
  }
}
.func-area {
  display: flex;
  gap: 24rpx;
  .func-left {
    flex: 1.2;
    .func-card.guide {
      background: linear-gradient(176.78deg, #3C85FD -35.59%, #AFCCFE 97.34%);
      border-radius: 20rpx;
      padding: 32rpx 24rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .func-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8rpx;
      }
      .func-desc {
        font-size: 24rpx;
        color: #fff;
        margin-bottom: 16rpx;
      }
      .func-img {
        margin-left: calc(100% - 180rpx);
        width: 180rpx;
        height: 180rpx;
        scale: 1.3;
        margin-top: 8rpx;
      }
    }
  }
  .func-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    .func-card {
      background: #fff;
      border-radius: 20rpx;
      padding: 24rpx 16rpx;
      display: flex;
      align-items: center;
      flex: 1;
      .func-btn {
        width: 100%;
        height: 100%;
      }
      .func-title {
        font-size: 32rpx;
        color: #ff9900;
        margin-left: 12rpx;
      }
      &.contact {
        background: linear-gradient(180deg, #FCDEC8 0%, #FCEADC 100%);
        width: 100%;
        flex: 1;
        margin: 0;
        padding: 24rpx 16rpx;
        line-height: normal;
        border-radius: 20rpx;
        &::after {
          border: none;
        }
        button {
          width: 100%;
          height: 100%;
          background: transparent;
          border: none;
          padding: 24rpx 16rpx;
          display: flex;
          align-items: center;
          &::after {
            border: none;
          }
        }
      }
      &.notice .func-title {
        color: #6c63ff;
      }
      &.notice {
        background: linear-gradient(180deg, #D4D6FF 0%, #DDDFFF 100%);
      }
      .func-img-small {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
}
</style>