| | |
| | | <template> |
| | | <view class="container"> |
| | | <u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder> |
| | | <view slot="left"> |
| | | <u--text color="#ffffff" text="基层智治" size="18" /> |
| | | <view class=""> |
| | | <view class="header flex a-i-c"> |
| | | <u-avatar size="80"></u-avatar> |
| | | <view class="flex f-d-c ml-20"> |
| | | <text class="f-36 mb-20 fw">张三</text> |
| | | <text class="f-28 c-99">您好业主,欢迎回家</text> |
| | | </view> |
| | | </u-navbar> |
| | | |
| | | </view> |
| | | |
| | | <view class="main"> |
| | | <view class="main-bg"> |
| | | |
| | | </view> |
| | | |
| | | |
| | | <view class="main-cell"> |
| | | <view class="cell-content"> |
| | | <u-cell-group :border="false"> |
| | | <u-cell @click="navigator(item)" v-for="(item, index) in cellGroupData" :icon="item.icon" |
| | | :title="item.title" :key="index" :border="false"></u-cell> |
| | | <u-cell @click="navigator(item)" v-for="(item, index) in menuList" :icon="item.icon" |
| | | :title="item.title" :key="index" :border="false" :iconStyle="{width:'48rpx',height:'48rpx'}" :isLink="true" ></u-cell> |
| | | </u-cell-group> |
| | | </view> |
| | | </view> |
| | | |
| | | |
| | | </view> |
| | | |
| | | <tabBar @change='change' :currentTab="1"></tabBar> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import tabBar from "@/components/tabBar/tabBar.vue"; |
| | | |
| | | export default { |
| | | components: { |
| | | tabBar, |
| | | }, |
| | | |
| | | data() { |
| | | data(){ |
| | | return { |
| | | cellGroupData: [{ |
| | | title: '我的家人', |
| | | icon: 'account-fill', |
| | | url: '' |
| | | menuList:[ |
| | | { |
| | | icon:"/static/icon/menu-center-01.png", |
| | | title:"我的家人", |
| | | url:"" |
| | | }, |
| | | { |
| | | title: '切换角色', |
| | | icon: 'account-fill', |
| | | url: '/subPackage/user/role/index' |
| | | icon:"/static/icon/menu-center-02.png", |
| | | title:"切换角色", |
| | | url:"/subPackage/user/role/index" |
| | | }, |
| | | { |
| | | title: '修改密码', |
| | | icon: 'account-fill', |
| | | url: '' |
| | | icon:"/static/icon/menu-center-03.png", |
| | | title:"修改密码", |
| | | url:"" |
| | | }, |
| | | { |
| | | title: '退出登录', |
| | | icon: 'account-fill', |
| | | url: '' |
| | | } |
| | | icon:"/static/icon/menu-center-04.png", |
| | | title:"退出登录", |
| | | url:"" |
| | | }, |
| | | |
| | | ] |
| | | } |
| | | }, |
| | | onShow() { |
| | | uni.hideTabBar() |
| | | }, |
| | | |
| | | methods: { |
| | | methods:{ |
| | | change(index) { |
| | | let url = index |
| | | this.$u.func.globalNavigator(url, "switchTab") |
| | | }, |
| | | |
| | | |
| | | navigator(item) { |
| | | |
| | | |
| | | if (item.title == '退出登录') { |
| | | this.logOut() |
| | | } else { |
| | | this.$u.func.globalNavigator(item.url) |
| | | } |
| | | |
| | | |
| | | }, |
| | | |
| | | |
| | | logOut() { |
| | | uni.setStorageSync("responIndex", 0) |
| | | uni.clearStorageSync() |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .container { |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | display: flex; |
| | | flex-direction: column; |
| | | background: #F9F9FA; |
| | | |
| | | .main { |
| | | position: relative; |
| | | height: 0; |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | |
| | | .main-bg { |
| | | height: 36%; |
| | | background: royalblue; |
| | | } |
| | | |
| | | .main-cell { |
| | | position: absolute; |
| | | top: 34%; |
| | | width: 100%; |
| | | height: 66%; |
| | | border-radius: 10rpx 10rpx 0 0; |
| | | z-index: 11; |
| | | background: #fff; |
| | | |
| | | .cell-content { |
| | | margin-top: 240rpx; |
| | | } |
| | | } |
| | | } |
| | | <style> |
| | | page{ |
| | | width:100%; |
| | | height:100%; |
| | | background: linear-gradient(96deg, #E2EFFF 0%, rgba(255,255,255,0) 100%); |
| | | } |
| | | .header{ |
| | | width:100%; |
| | | padding:120rpx 38rpx 80rpx; |
| | | box-sizing: border-box; |
| | | } |
| | | </style> |