<template>
|
<view>
|
<scroll-view scroll-y class="page">
|
<view class="nav-list">
|
<navigator hover-class='none' :url="'/pages' + item.url" class="nav-li" navigateTo :class="'bg-'+item.color"
|
:style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
|
<view class="nav-title">{{item.title}}</view>
|
<view class="nav-name">{{item.name}}</view>
|
<text :class="'cuIcon-' + item.cuIcon"></text>
|
</navigator>
|
</view>
|
<view class="cu-tabbar-height"></view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
elements: [
|
{
|
title: '组托入库',
|
name: 'pakin',
|
color: 'purple',
|
cuIcon: 'list',
|
url: '/pakin/pakin'
|
},
|
{
|
title: '退出登录',
|
name: 'logOut',
|
color: 'grey',
|
cuIcon: 'exit',
|
url: '/login/logOut'
|
},
|
|
],
|
};
|
}
|
}
|
</script>
|
|
<style>
|
.page {
|
height: 100vh;
|
}
|
.bg-red {
|
background-color: #e54d42;
|
color: #ffffff;
|
}
|
|
.bg-orange {
|
background-color: #f37b1d;
|
color: #ffffff;
|
}
|
|
.bg-yellow {
|
background-color: #fbbd08;
|
color: #333333;
|
}
|
|
.bg-olive {
|
background-color: #8dc63f;
|
color: #ffffff;
|
}
|
|
.bg-green {
|
background-color: #39b54a;
|
color: #ffffff;
|
}
|
|
.bg-cyan {
|
background-color: #1cbbb4;
|
color: #ffffff;
|
}
|
|
.bg-blue {
|
background-color: #0081ff;
|
color: #ffffff;
|
}
|
|
.bg-purple {
|
background-color: #6739b6;
|
color: #ffffff;
|
}
|
|
.bg-mauve {
|
background-color: #9c26b0;
|
color: #ffffff;
|
}
|
|
.bg-pink {
|
background-color: #e03997;
|
color: #ffffff;
|
}
|
|
.bg-brown {
|
background-color: #a5673f;
|
color: #ffffff;
|
}
|
|
.bg-grey {
|
background-color: #8799a3;
|
color: #ffffff;
|
}
|
|
.bg-gray {
|
background-color: #f0f0f0;
|
color: #333333;
|
}
|
|
.bg-black {
|
background-color: #333333;
|
color: #ffffff;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
color: #666666;
|
}
|
</style>
|
