<template>
|
<view class="home_index">
|
<view class="home_header"></view>
|
<view class="home_content">
|
<view
|
class="home_content_item"
|
:style="{'height': height + 'px'}"
|
v-for="item in homeTabList"
|
:key="item.menuId"
|
@click="navigatorTo(item)">
|
<u-image :src="item.menuIcon" shape="circle" width="50px" height="50px"></u-image>
|
<view class="item_text">
|
<span>{{item.menuName}}</span>
|
</view>
|
</view>
|
</view>
|
<view class="home_copyright">
|
<span>版权所有©中铁十四局集团房桥有限公司</span>
|
</view>
|
<scan-code></scan-code>
|
</view>
|
</template>
|
|
<script>
|
import scanCode from '@/components/scan-code.vue';
|
import img from '../../static/logo.png';
|
export default {
|
components: {
|
scanCode
|
},
|
data() {
|
return {
|
homeTabList: [],
|
height: 0,
|
}
|
},
|
onShow() {
|
uni.$off('scancodedate');
|
},
|
onLoad() {
|
// 获取设备窗口信息
|
const deviceInfo = uni.getWindowInfo();
|
this.height = (deviceInfo.windowWidth / 3) - 32;
|
const menuData = JSON.parse(uni.getStorageSync('menuData')) || [];
|
this.homeTabList = menuData.map(item => {
|
console.log(item.menuIcon);
|
item.menuIcon = `https://szpipe.thhy-tj.com/${item.menuIcon}`
|
return item;
|
})
|
},
|
methods: {
|
// 跳转页面
|
navigatorTo(item) {
|
if(item.menuUrl) {
|
uni.navigateTo({
|
url: '/' + item.menuUrl,
|
fail(err) {
|
console.log(err,'====')
|
}
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.home_index {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
background: #F6F6F6;
|
|
.home_header {
|
height: 16%;
|
background: #1976FF;
|
border-radius: 0 0 30% 30%;
|
}
|
|
.home_content {
|
position: absolute;
|
top: 8%;
|
left: 50%;
|
transform: translateX(-50%);
|
display: flex;
|
flex-wrap: wrap;
|
width: calc(100% - 16px);
|
height: auto;
|
background: transparent;
|
|
.home_content_item {
|
margin: 8px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: calc((100% / 3) - 16px);
|
background: #fff;
|
border-radius: 6px;
|
|
&:active {
|
background-color: rgb(229, 232, 229);
|
}
|
|
.item_img {
|
width: 50%;
|
height: 50%;
|
border-radius: 50%;
|
}
|
|
.item_text {
|
font-weight: 600;
|
text-align: center;
|
}
|
}
|
}
|
|
.home_copyright {
|
position: absolute;
|
bottom: 1%;
|
left: 50%;
|
transform: translateX(-50%);
|
color: #333;
|
font-size: 12px;
|
text-align: center;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
