171 lines
3.6 KiB
Vue
171 lines
3.6 KiB
Vue
<!-- 首页：切换为 uview-plus 组件化结构，保留原有设备添加与配置入口 -->
|
||
<template>
|
||
<view class="page page-base">
|
||
<up-navbar title="智慧养老" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
|
||
|
||
<view class="banner">
|
||
<view class="banner-left">
|
||
<text class="banner-title">智慧养老云助手</text>
|
||
<text class="banner-sub">一键开启智慧好生活</text>
|
||
</view>
|
||
<view class="banner-illus">
|
||
<up-icon name="home" color="#ffffff" size="52" />
|
||
</view>
|
||
</view>
|
||
|
||
<up-notice-bar
|
||
mode="link"
|
||
:text="noticeText"
|
||
color="#2f5a3a"
|
||
bg-color="#e9fff3"
|
||
@click="goConfig"
|
||
/>
|
||
|
||
<view class="site-row" @click="goSceneSelect">
|
||
<view class="site-left">
|
||
<up-icon name="list" size="18" color="#26c996" />
|
||
<text class="site-text">{{ sceneName || '请选择场所' }}</text>
|
||
</view>
|
||
<up-icon name="arrow-right" size="14" color="#26c996" />
|
||
</view>
|
||
|
||
<view class="empty-area">
|
||
<up-empty mode="list" text="暂无数据" />
|
||
</view>
|
||
|
||
<view class="fab-wrap" @click="goAdd">
|
||
<up-icon name="plus" color="#ffffff" size="28" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ROUTES } from '@/constants/routes'
|
||
import { navigateTo } from '@/utils/navigation'
|
||
import { getCurrentScene } from '@/store/scene'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
noticeText: '点击选择场所后可进入设备配置流程',
|
||
sceneName: ''
|
||
}
|
||
},
|
||
onShow() {
|
||
this.refreshScene()
|
||
},
|
||
methods: {
|
||
// 从全局场景状态刷新回显文案。
|
||
refreshScene() {
|
||
const scene = getCurrentScene()
|
||
this.sceneName = scene ? scene.name : ''
|
||
},
|
||
// 进入场景选择页。
|
||
goSceneSelect() {
|
||
navigateTo(ROUTES.SCENE_SELECT)
|
||
},
|
||
// 进入设备添加页（后续会承接蓝牙配网流程入口）。
|
||
goAdd() {
|
||
navigateTo(ROUTES.DEVICE_ADD)
|
||
},
|
||
// 进入设备配置页。
|
||
goConfig() {
|
||
navigateTo(ROUTES.DEVICE_CONFIG)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/styles/common.css';
|
||
|
||
.page {
|
||
position: relative;
|
||
}
|
||
|
||
.banner {
|
||
margin: 0;
|
||
min-height: 360rpx;
|
||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||
padding: 48rpx 44rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.banner-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 52rpx;
|
||
color: #ffffff;
|
||
font-weight: 700;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.banner-sub {
|
||
font-size: 34rpx;
|
||
color: #e9fff8;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.banner-illus {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.site-row {
|
||
height: 108rpx;
|
||
padding: 0 32rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.site-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.site-text {
|
||
margin-left: 14rpx;
|
||
font-size: 34rpx;
|
||
color: #222;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.empty-area {
|
||
margin-top: 40rpx;
|
||
min-height: 680rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.fab-wrap {
|
||
position: fixed;
|
||
right: 40rpx;
|
||
bottom: 60rpx;
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(31, 202, 151, 0.4);
|
||
/* 点击态缩放反馈 */
|
||
&:active {
|
||
transform: scale(0.92);
|
||
}
|
||
}
|
||
</style>
|