car-wash-java/admin-mp/src/App.vue

<template>
  <view>
    <slot></slot>
  </view>
</template>

<script setup>
import { onLaunch } from '@dcloudio/uni-app'

// 应用启动时执行
onLaunch(() => {
  console.log('App launched')
})
</script>

<style lang="scss">
/* 全局样式 - 基于洗车小程序设计规范 */
@import './uni.scss';

/* 微信小程序使用page作为根元素 */
page {
  font-family: $uni-font-family;
  font-size: $uni-font-size-base;
  line-height: $uni-line-height-base;
  color: $uni-text-color;
  background-color: $uni-page-bg-color;
}

/* 自定义tabBar点击动效 */
/* 注意：微信小程序原生tabBar样式自定义能力有限，以下样式可能需要配合自定义tabBar组件才能完全生效 */
.uni-tabbar {
  --tabbar-height: 50px;
  --tabbar-bg-color: #FFFFFF;
  --tabbar-border-color: #E0E0E0;
  --tabbar-item-active-color: #C6171E;
  --tabbar-item-color: #999999;
  --tabbar-item-font-size: 14px;
  --tabbar-item-icon-size: 24px;
  --tabbar-item-spacing: 4px;
}

/* 为tabBar项添加点击动效 */
.uni-tabbar__item:active {
  transform: scale(0.95);
  transition: transform 0.15s ease;
}

/* 为tabBar项添加hover效果（如果支持的话） */
.uni-tabbar__item:hover {
  opacity: 0.8;
}

/* 自定义tabBar样式增强 */
.uni-tabbar__item-icon {
  font-size: var(--tabbar-item-icon-size);
}

.uni-tabbar__item-text {
  font-size: var(--tabbar-item-font-size);
  margin-top: var(--tabbar-item-spacing);
}

/* 如果使用自定义tabBar组件，可以添加以下样式 */
.custom-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: var(--tabbar-height);
  background-color: var(--tabbar-bg-color);
  border-top: 1px solid var(--tabbar-border-color);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.custom-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--tabbar-item-color);
  transition: all 0.3s ease;
}

.custom-tabbar-item.active {
  color: var(--tabbar-item-active-color);
}

.custom-tabbar-item:active {
  transform: scale(0.95);
  transition: transform 0.15s ease;
}

.custom-tabbar-item-icon {
  font-size: var(--tabbar-item-icon-size);
  margin-bottom: var(--tabbar-item-spacing);
}

.custom-tabbar-item-text {
  font-size: var(--tabbar-item-font-size);
}

/* 容器样式 */
.container {
  width: 100%;
  padding: 0 $uni-spacing-base;
}

/* Flex布局工具类 */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-just-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* 卡片基础样式 */
.card {
  background-color: $uni-card-bg-color;
  border-radius: $uni-border-radius-base;
  border: 1px solid $uni-border-color;
  box-shadow: $uni-box-shadow;
  padding: $uni-spacing-base;
}

/* 主要按钮样式 */
.btn-primary {
  background-color: $uni-color-primary;
  color: white;
  border: none;
  border-radius: $uni-border-radius-base;
  padding: $uni-spacing-sm $uni-spacing-base;
  font-size: $uni-font-size-base;
  font-weight: $uni-font-weight-medium;
  cursor: pointer;
  transition: all $uni-transition-duration;
}

.btn-primary:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 次要按钮样式 */
.btn-secondary {
  background-color: $uni-bg-color;
  color: $uni-text-color;
  border: 1px solid $uni-border-color;
  border-radius: $uni-border-radius-base;
  padding: $uni-spacing-sm $uni-spacing-base;
  font-size: $uni-font-size-base;
  cursor: pointer;
  transition: all $uni-transition-duration;
}

.btn-secondary:active {
  background-color: $uni-page-bg-color;
}

/* 状态标签样式 */
.status-tag {
  padding: 4rpx 12rpx;
  border-radius: $uni-border-radius-circle;
  font-size: $uni-font-size-xs;
  font-weight: $uni-font-weight-medium;
}

.status-idle {
  background-color: rgba(76, 175, 80, 0.1);
  color: $uni-color-idle;
}

.status-busy {
  background-color: rgba(255, 152, 0, 0.1);
  color: $uni-color-busy;
}

.status-error {
  background-color: rgba(244, 67, 54, 0.1);
  color: $uni-color-error-state;
}
</style>