|  |  | 
 |  |  |         border-radius: 12upx; | 
 |  |  |         width: 36%; | 
 |  |  |         margin: 0 2.5% 40upx; | 
 |  |  |         background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); | 
 |  |  |         /* background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); */ | 
 |  |  |         background-size: cover; | 
 |  |  |         background-position: center; | 
 |  |  |         position: relative; | 
 
 |  |  | 
 |  |  |     <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"> | 
 |  |  |                 <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> | 
 |  |  | 
 |  |  |     export default { | 
 |  |  |         data() { | 
 |  |  |             return { | 
 |  |  |                 elements: [ | 
 |  |  |                     { | 
 |  |  |                 baseUrl: '', | 
 |  |  |                 token: '', | 
 |  |  |                 elements: [], | 
 |  |  |                 elements2: [{ | 
 |  |  |                         title: '组托入库', | 
 |  |  |                         name: 'pakin', | 
 |  |  |                         color: 'cyan', | 
 |  |  | 
 |  |  |                     }, | 
 |  |  |                      | 
 |  |  |                 ], | 
 |  |  |                 colorList: ['cyan','blue','mauve','pink','brown','red','orange','yellow','olive','olive','green','grey' ] | 
 |  |  |             }; | 
 |  |  |         }, | 
 |  |  |         onShow() { | 
 |  |  |             this.baseUrl = uni.getStorageSync('baseUrl'); | 
 |  |  |             this.token = uni.getStorageSync('token'); | 
 |  |  |             this.getAuth() | 
 |  |  |         }, | 
 |  |  |         methods: { | 
 |  |  |             getAuth() { | 
 |  |  |                 let that = this | 
 |  |  |                 uni.request({ | 
 |  |  |                     url: that.baseUrl + '/menu/pda/auth', | 
 |  |  |                     data: {}, | 
 |  |  |                     header: { 'token': uni.getStorageSync('token') }, | 
 |  |  |                     method: 'POST', | 
 |  |  |                     success(res) { | 
 |  |  |                         res = res.data | 
 |  |  |                         that.elements = [] | 
 |  |  |                         if (res.code === 200) { | 
 |  |  |                             if (res.data == undefined || res.data == null || res.data == "") { | 
 |  |  |                                 that.elements = that.elements2 | 
 |  |  |                                 return | 
 |  |  |                             } | 
 |  |  |                             for (var i = 0; i < res.data.length; i++) { | 
 |  |  |                                 if (res.data.length < 0) { | 
 |  |  |                                     break; | 
 |  |  |                                 } | 
 |  |  |                                 that.elements.unshift({ | 
 |  |  |                                     title: res.data[i].name, | 
 |  |  |                                     name: res.data[i].title, | 
 |  |  |                                     color: that.colorList[i], | 
 |  |  |                                     cuIcon: 'safe', | 
 |  |  |                                     url: res.data[i].action | 
 |  |  |                                 }) | 
 |  |  |                             } | 
 |  |  |                             that.elements.push({ | 
 |  |  |                                 title: '退出登录', | 
 |  |  |                                 name: 'logOut', | 
 |  |  |                                 color: 'grey', | 
 |  |  |                                 cuIcon: 'exit' | 
 |  |  |                             }) | 
 |  |  |                         } else if (res.code === 403) { | 
 |  |  |                             uni.showToast({ | 
 |  |  |                                 title: res.msg, | 
 |  |  |                                 icon: "none", | 
 |  |  |                                 position: 'top' | 
 |  |  |                             }) | 
 |  |  |                             setTimeout(() => { | 
 |  |  |                                 uni.reLaunch({ | 
 |  |  |                                     url: '../login/login' | 
 |  |  |                                 }); | 
 |  |  |                             }, 1000); | 
 |  |  |                         } else if(res.status === 404) { | 
 |  |  |                             uni.showToast({ | 
 |  |  |                                 title: '404', | 
 |  |  |                                 icon: "none", | 
 |  |  |                                 position: 'top' | 
 |  |  |                             }) | 
 |  |  |                         } else { | 
 |  |  |                             uni.showToast({ | 
 |  |  |                                 title: res.msg, | 
 |  |  |                                 icon: "none", | 
 |  |  |                                 position: 'top' | 
 |  |  |                             }) | 
 |  |  |                         } | 
 |  |  |                     }, | 
 |  |  |                     fail(err) { | 
 |  |  |                         console.log(err); | 
 |  |  |                     } | 
 |  |  |                 }) | 
 |  |  |             }, | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | </script> | 
 |  |  | 
 |  |  |     .page { | 
 |  |  |         height: 100vh; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .bg-red { | 
 |  |  |         background-color: #e54d42; | 
 |  |  |         color: #ffffff; |