You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
3.3 KiB
164 lines
3.3 KiB
<template>
|
|
<view class="content">
|
|
<uni-nav-bar :border="false" backgroundColor="#566CFF" color="#FFFFFF" :fixed="true">
|
|
<view class="navigation-title">
|
|
<image src="/static/images/logo.png" mode="aspectFit" class="logo-icon"></image>
|
|
徐汇园林智慧系统
|
|
</view>
|
|
</uni-nav-bar>
|
|
|
|
<view class="welcome">
|
|
<view class="welcome-english">Welcome!</view>
|
|
<view class="welcome-china">欢迎来到徐汇园林智慧系统</view>
|
|
</view>
|
|
|
|
<view class="menu-list">
|
|
<view class="menu-item" v-for="(item,index) in menuList" :key="index" @click="navigateTo(item.path)">
|
|
<view class="icon-name">
|
|
<view class="icon">
|
|
<image :src="`/static/images/${item.icon}.png`" class="image-icon" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="name">{{item.name}}</view>
|
|
</view>
|
|
|
|
<image class="menu-item-bg" :src="`/static/images/${item.bg}.png`" mode="aspectFill"></image>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
//菜单
|
|
const menuList = [{
|
|
name: "应急抢险",
|
|
icon:'yj-icon',
|
|
bg:'yj-bg',
|
|
path:'/pages/homePage/emergency'
|
|
},
|
|
{
|
|
name: "绿化养护",
|
|
icon:'lh-icon',
|
|
bg:'lh-bg'
|
|
},
|
|
{
|
|
name: "公园养护",
|
|
icon:'park-icon',
|
|
bg:'park-bg'
|
|
},
|
|
{
|
|
name: "自有产管理",
|
|
icon:'zy-icon',
|
|
bg:'zy-bg'
|
|
},
|
|
];
|
|
const navigateTo = (path) => {
|
|
if (path) {
|
|
uni.navigateTo({
|
|
url: path
|
|
});
|
|
} else {
|
|
console.warn("未配置跳转路径");
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #F5F8FD;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.navigation-title {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
gap: 18rpx;
|
|
font-family: 'Alimama ShuHeiTi-Bold';
|
|
|
|
.logo-icon {
|
|
width: 73rpx;
|
|
height: 90rpx;
|
|
}
|
|
}
|
|
|
|
.welcome {
|
|
height: 295rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 17rpx;
|
|
background-image: url(/static/images/welcome-bg.png);
|
|
background-size: 100% 100%;
|
|
|
|
.welcome-english {
|
|
font-size: 64rpx;
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
font-family: 'Alimama ShuHeiTi-Bold';
|
|
}
|
|
|
|
.welcome-china {
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.menu-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
padding-bottom: 24rpx;
|
|
.menu-item {
|
|
position: relative;
|
|
height: 260rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(121, 156, 221, 0.25);
|
|
border-radius: 16rpx ;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 88rpx;
|
|
|
|
}
|
|
.icon-name{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 36rpx;
|
|
.icon{
|
|
height: 110rpx;width: 110rpx;
|
|
background: linear-gradient(180deg, #a7c8fe 0%, #287aff 100%);
|
|
box-shadow: 0px 4px 10px 0px #a5c6fa;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.image-icon{
|
|
height: 100rpx;width: 100rpx;
|
|
}
|
|
}
|
|
.name{
|
|
|
|
font-size: 36rpx;
|
|
color: #0F2944;
|
|
font-weight: 500;
|
|
font-family: 'MiSans-Medium';
|
|
}
|
|
}
|
|
.menu-item-bg{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 130rpx;
|
|
height: 177rpx;
|
|
|
|
}
|
|
}
|
|
</style> |