feat:首页完成

src/pages/home-index/components/HomeFloatingActions.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+function handleQuickSubmit() {
+  uni.navigateTo({
+    url: '/pages/home-index/requirement-submit/index',
+  })
+}
+
+function handleCustomerService() {
+  uni.showToast({
+    title: '客服中心开发中',
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <view class="home-floating-actions">
+    <view
+      class="home-floating-actions__item"
+      @tap="handleQuickSubmit"
+    >
+      <view class="home-floating-actions__icon home-floating-actions__icon--submit">
+        <text class="home-floating-actions__plus">
+          +
+        </text>
+      </view>
+      <text class="home-floating-actions__label">
+        快捷提报
+      </text>
+    </view>
+
+    <view
+      class="home-floating-actions__item"
+      @tap="handleCustomerService"
+    >
+      <view class="home-floating-actions__icon home-floating-actions__icon--service">
+        <image
+          class="home-floating-actions__service-icon"
+          src="/static/icons/icon-float-service.png"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="home-floating-actions__label">
+        客服中心
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.home-floating-actions {
+  position: fixed;
+  right: 24rpx;
+  bottom: calc(160rpx + env(safe-area-inset-bottom));
+  z-index: 120;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 20rpx;
+}
+
+.home-floating-actions__item {
+  display: flex;
+  align-items: center;
+  height: 72rpx;
+  padding: 0 28rpx 0 12rpx;
+  background: #ffffff;
+  border-radius: 999rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+}
+
+.home-floating-actions__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+
+  &--submit {
+    background: #22c55e;
+  }
+
+  &--service {
+    background: #e8f0ff;
+  }
+}
+
+.home-floating-actions__plus {
+  font-size: 32rpx;
+  font-weight: 500;
+  line-height: 1;
+  color: #ffffff;
+}
+
+.home-floating-actions__service-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.home-floating-actions__label {
+  margin-left: 16rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: $color-text-primary;
+  white-space: nowrap;
+}
+
+</style>