<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
|
<route lang="json5" type="home">
|
{
|
layout: 'tabbar',
|
style: {
|
navigationBarTitleText: '首页',
|
},
|
}
|
</route>
|
<template>
|
<view
|
class="bg-base overflow-hidden"
|
:style="{
|
marginTop: safeAreaInsets?.top + 'px',
|
}"
|
>
|
<view class="bg-white h-[80rpx] px-2 flex items-center justify-between">
|
<view class="flex items-center" @click="handleUserInfo">
|
<wd-icon name="user" size="40rpx" class="icon-color-base"></wd-icon>
|
<text class="ml-1 text-color-base">张三</text>
|
</view>
|
|
<view class="flex items-center">
|
<wd-icon name="notification" size="40rpx" class="icon-color-base mr-3"></wd-icon>
|
<wd-icon name="tips" size="40rpx" class="icon-color-base mr-3"></wd-icon>
|
<wd-icon name="app" size="40rpx" class="icon-color-base"></wd-icon>
|
</view>
|
</view>
|
|
<view class="bg-white py-2 px-2">
|
<wd-img class="w-full h-[260rpx]" src="/static/images/pic4.jpeg" />
|
</view>
|
<view class="bg-noti flex flex-row">
|
<wd-notice-bar
|
text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
|
prefix="clock"
|
type="info"
|
:scrollable="false"
|
custom-class="flex-1 overflow-hidden"
|
/>
|
<wd-button type="text" class="w-[120rpx]">查看</wd-button>
|
</view>
|
|
<view class="bg-white">
|
<wd-card type="rectangle">
|
<template #title>
|
<view class="flex items-center menu-title-box">
|
<view class="menu-indicator"></view>
|
<view class="ml-1 text-xs">数据总览</view>
|
</view>
|
</template>
|
<view class="flex flex-row justify-around">
|
<view class="flex flex-col justify-center">
|
<text class="text-lg text-center">0</text>
|
<text class="text-color-gray">设备总数</text>
|
</view>
|
<view class="flex flex-col justify-center">
|
<text class="text-lg text-center">0</text>
|
<text class="text-color-gray">故障设备数</text>
|
</view>
|
<view class="flex flex-col justify-center">
|
<text class="text-lg text-center">0</text>
|
<text class="text-color-gray">未修复故障</text>
|
</view>
|
</view>
|
</wd-card>
|
</view>
|
|
<view class="bg-white mt-2">
|
<wd-card type="rectangle">
|
<template #title>
|
<view class="flex items-center menu-title-box">
|
<view class="menu-indicator"></view>
|
<view class="ml-1 text-xs">数据总览</view>
|
</view>
|
</template>
|
<wd-grid :column="4">
|
<wd-grid-item use-slot class="flex justify-center items-center">
|
<image class="slot-img text-center" src="/static/menu/menu2.png" />
|
<text>12</text>
|
</wd-grid-item>
|
<wd-grid-item use-slot class="flex justify-center items-center">
|
<image class="slot-img text-center" src="/static/menu/menu2.png" />
|
<text>12</text>
|
</wd-grid-item>
|
<wd-grid-item use-slot class="flex justify-center items-center">
|
<image class="slot-img text-center" src="/static/menu/menu2.png" />
|
<text>12</text>
|
</wd-grid-item>
|
<wd-grid-item use-slot is-dot class="flex justify-center items-center">
|
<image class="slot-img text-center" src="/static/menu/menu2.png" />
|
<text>12</text>
|
</wd-grid-item>
|
<wd-grid-item use-slot class="flex justify-center items-center">
|
<image class="slot-img text-center" src="/static/menu/menu2.png" />
|
<text>12</text>
|
</wd-grid-item>
|
<wd-grid-item use-slot class="flex justify-center items-center">
|
<image class="slot-img text-center" src="/static/menu/menu2.png" />
|
<text>12</text>
|
</wd-grid-item>
|
</wd-grid>
|
</wd-card>
|
</view>
|
|
<view class="bg-white mt-2">
|
<wd-card type="rectangle">
|
<template #title>
|
<view class="flex items-center menu-title-box">
|
<view class="menu-indicator"></view>
|
<view class="ml-1 text-xs">数据总览</view>
|
</view>
|
</template>
|
<wd-grid :column="4">
|
<wd-grid-item
|
use-slot
|
class="flex justify-center items-center"
|
v-for="(item, index) in menuList"
|
:key="item.id"
|
>
|
<image class="slot-img text-center" :src="item.url" />
|
<text>{{ item.name }}</text>
|
</wd-grid-item>
|
</wd-grid>
|
</wd-card>
|
</view>
|
</view>
|
</template>
|
|
<script lang="ts" setup>
|
import { TestEnum } from '@/typings'
|
import PLATFORM from '@/utils/platform'
|
|
defineOptions({
|
name: 'Home',
|
})
|
|
// 获取屏幕边界到安全区域距离
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
const author = ref('菲鸽')
|
const description = ref(
|
'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
|
)
|
// 测试 uni API 自动引入
|
onLoad(() => {
|
console.log(author)
|
console.log(TestEnum.A)
|
})
|
|
const menuList = reactive([
|
{
|
id: 1,
|
name: '测试',
|
url: '/static/menu/menu1.png',
|
},
|
{
|
id: 2,
|
name: '测试',
|
url: '/static/menu/menu1.png',
|
},
|
])
|
|
function handleUserInfo() {
|
console.error('12121')
|
}
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
.main-title-color {
|
color: $uni-color-primary;
|
}
|
|
.bg-noti {
|
background: #f4f9ff;
|
}
|
|
:deep(.wd-card) {
|
margin-bottom: 0;
|
}
|
|
:deep(.wd-card__footer) {
|
padding: 0 !important;
|
}
|
|
:deep(.wd-card__footer)::after {
|
height: 0 !important;
|
}
|
|
.menu-title-box {
|
height: 30rpx;
|
}
|
|
.menu-indicator {
|
width: 6rpx;
|
height: 24rpx;
|
border-radius: 10rpx;
|
background-color: $uni-color-primary;
|
}
|
|
.slot-img {
|
width: 72rpx;
|
height: 72rpx;
|
border-radius: 8rpx;
|
}
|
</style>
|
