pda-uni-app-perkins/pages/home/index.vue

<template>
  <view class="container">
    <view class="header">
      <view class="header-bg">
        <view class="wave w1" />
        <view class="wave w2" />
      </view>
      <button class="icon-btn" @click="toggleDrawer">
        <i class="icon icon-menu" style="font-size:40rpx;color:#fff"></i>
      </button>
      <text class="header-title">WMS移动终端（模板）</text>
      <button class="icon-btn" @click="noop">
        <i class="icon icon-notifications" style="font-size:40rpx;color:#fff"></i>
      </button>
    </view>


    <!-- Drawer Overlay -->
    <view class="drawer-mask" :class="{ show: showDrawer }" @click="closeDrawer" />
    <view class="drawer" :class="{ open: showDrawer }">
      <view class="drawer-top">
        <text class="drawer-title">导航</text>
      </view>
      <view class="drawer-list">
        <button
          v-for="item in drawerItems"
          :key="item.path"
          class="drawer-link"
          @click="nav(item.path)"
        >
          <i class="icon" :class="item.icon"></i>
          <text class="drawer-text">{{ item.label }}</text>
        </button>
      </view>
    </view>
    <view class="content">
      <view class="grid">
        <view
          v-for="(item, index) in quickLinks"
          :key="item.path"
          class="card"
          :class="{ single: quickLinks.length % 2 === 1 && index === quickLinks.length - 1 }"
          @click="go(item.path)"
        >
          <view class="action-icon">
            <i class="icon" :class="item.icon" style="font-size:48rpx;color:#fff"></i>
          </view>
          <text class="action-title">{{ item.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartSize: 260,
      showDrawer: false,
      quickLinks: [
        { label: '测试页面', path: '/pages/test/index', icon: 'icon-menu' },
        { label: '空载具入库', path: '/pages/stock-in/empty', icon: 'icon-local_shipping' },
        { label: '发动机入库', path: '/pages/stock-in/engine', icon: 'icon-save' },
        { label: '原材料入库', path: '/pages/stock-in/raw', icon: 'icon-inventory' },
        // { label: '通道三原材料回库', path: '/pages/stock-in/raw-return', icon: 'icon-task_alt' }
      ]
    }
  },
  computed: {
    drawerItems() {
      return this.quickLinks
    }
  },
  methods: {
    noop() { },
    toggleDrawer() { this.showDrawer = !this.showDrawer },
    closeDrawer() { this.showDrawer = false },
    nav(url) { this.showDrawer = false; this.go(url) },
    go(url) {
      uni.navigateTo({
        url
      })
    },
    arcPath(startRatio, endRatio) {
      const start = this.polar(50, 50, 40, startRatio * 2 * Math.PI)
      const end = this.polar(50, 50, 40, endRatio * 2 * Math.PI)
      const large = endRatio - startRatio > 0.5 ? 1 : 0
      return `M 50 50 L ${start.x} ${start.y} A 40 40 0 ${large} 1 ${end.x} ${end.y} Z`
    },
    polar(cx, cy, r, ang) {
      return {
        x: cx + r * Math.cos(ang),
        y: cy + r * Math.sin(ang)
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: var(--bg-gray);
}

.header {
  height: 200rpx;
  position: relative;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--grad-primary-start), var(--grad-primary-mid));
}

.wave {
  position: absolute;
  left: 0;
  right: 0;
  height: 120rpx;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 60%);
  opacity: .6;
}

.w1 {
  top: 10rpx
}

.w2 {
  top: 80rpx
}

.icon-btn {
  z-index: 1;
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  z-index: 1;
  color: #fff;
  font-size: 34rpx;
  font-weight: 600;
}

.content {
  padding: 24rpx;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24rpx;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180rpx;
  border-radius: 20rpx;
  background: linear-gradient(90deg, var(--grad-contrast-start), var(--grad-contrast-end));
  box-shadow: 0 8rpx 22rpx rgba(5, 220, 239, .25);
}

.card.single {
  grid-column: span 2;
  height: 180rpx;
}

.action-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .25);
  margin-bottom: 12rpx;
}

.action-icon .icon {
  color: #fff;
  font-size: 48rpx
}

.action-title {
  color: #fff;
  font-size: 28rpx;
}

.section {
  margin-top: 24rpx;
  border-radius: 16rpx;
  padding: 24rpx;
  background: #fff;
}

.section-title {
  color: var(--text-color);
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.chart-row {
  display: flex;
  align-items: center;
}

.legend {
  margin-left: 24rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  margin-right: 12rpx;
}

.legend-text {
  color: var(--text-light);
  font-size: 28rpx;
}

.pie {
  width: 280rpx;
  height: 280rpx;
  border-radius: 50%;
  background: conic-gradient(#7FFFAA 0 60%, #00FFFF 60% 100%);
  box-shadow: inset 0 0 0 0 #fff;
}

.drawer-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 998;
}

.drawer-mask.show {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 460rpx;
  background: linear-gradient(180deg, #05DCEF 0%, #7DE2F5 60%, #FFFFFF 100%);
  box-shadow: 16rpx 0 32rpx rgba(0, 0, 0, .15);
  transform: translateX(-104%);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  z-index: 999;
  border-top-right-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-top {
  padding: calc(env(safe-area-inset-top, 0) + 24rpx) 16rpx 8rpx 24rpx;
}

.drawer-title {
  color: #fff;
  font-size: 44rpx;
  font-weight: 800;
  letter-spacing: 1rpx;
}

.drawer-list {
  flex: 1;
  overflow: auto;
  padding: 8rpx 0 24rpx 0;
  display: flex;
  flex-direction: column;
}

.drawer-link {
  width: 100%;
  height: 110rpx;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24rpx;
}

.drawer-link:active {
  background: rgba(255, 255, 255, .12);
}

.drawer-link .icon {
  color: #ffffff;
  font-size: 38rpx;
  margin-right: 16rpx;
}

.drawer-text {
  color: #fff;
  font-size: 34rpx;
  font-weight: 600;
}
</style>