|  |  | 
 |  |  |    import Vue from 'vue' | 
 |  |  |    export default { | 
 |  |  |       onLaunch: function() { | 
 |  |  |          console.log('App Launch') | 
 |  |  |          uni.getSystemInfo({ | 
 |  |  |             success: function(e) { | 
 |  |  |                // #ifndef MP | 
 |  |  |                Vue.prototype.StatusBar = e.statusBarHeight; | 
 |  |  |                if (e.platform == 'android') { | 
 |  |  |                   Vue.prototype.CustomBar = e.statusBarHeight + 50; | 
 |  |  |                } else { | 
 |  |  |                   Vue.prototype.CustomBar = e.statusBarHeight + 45; | 
 |  |  |                }; | 
 |  |  |                // #endif | 
 |  |  | 			 | 
 |  |  |                // #ifdef MP-WEIXIN | 
 |  |  |                Vue.prototype.StatusBar = e.statusBarHeight; | 
 |  |  |                let custom = wx.getMenuButtonBoundingClientRect(); | 
 |  |  |                Vue.prototype.Custom = custom; | 
 |  |  |                Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight; | 
 |  |  |                // #endif		 | 
 |  |  | 			 | 
 |  |  |                // #ifdef MP-ALIPAY | 
 |  |  |                Vue.prototype.StatusBar = e.statusBarHeight; | 
 |  |  |                Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight; | 
 |  |  |                // #endif | 
 |  |  |             } | 
 |  |  |          }) | 
 |  |  | 			 | 
 |  |  |          Vue.prototype.ColorList = [{ | 
 |  |  |                title: '嫣红', | 
 |  |  |                name: 'red', | 
 |  |  | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style> | 
 |  |  |    @import "static/css/colorUi/icon.css"; | 
 |  |  |    /*每个页面公共css */ | 
 |  |  |    @import "colorui/main.css"; | 
 |  |  |    @import "colorui/icon.css"; | 
 |  |  |    body { | 
 |  |  |       background-color: #f1f1f1; | 
 |  |  |       color: #606266; | 
 |  |  |       font-family: Helvetica Neue, Helvetica, sans-serif; | 
 |  |  |    } | 
 |  |  |    .nav-list { | 
 |  |  |       display: flex; | 
 |  |  |       flex-wrap: wrap; | 
 |  |  |       padding: 0px 40upx 0px; | 
 |  |  |       justify-content: space-between; | 
 |  |  |       margin-top: 20px; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-li { | 
 |  |  |       padding: 30upx; | 
 |  |  |       border-radius: 12upx; | 
 |  |  |       width: 65%; | 
 |  |  |       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-size: cover; | 
 |  |  |       background-position: center; | 
 |  |  |       position: relative; | 
 |  |  |       z-index: 1; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-li::after { | 
 |  |  |       content: ""; | 
 |  |  |       position: absolute; | 
 |  |  | 
 |  |  |       opacity: 0.2; | 
 |  |  |       transform: scale(0.9, 0.9); | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-li.cur { | 
 |  |  |       color: #fff; | 
 |  |  |       background: rgb(94, 185, 94); | 
 |  |  |       box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4); | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-title { | 
 |  |  |       font-size: 32upx; | 
 |  |  |       font-weight: 300; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-title::first-letter { | 
 |  |  |       font-size: 40upx; | 
 |  |  |       margin-right: 4upx; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-name { | 
 |  |  |       font-size: 28upx; | 
 |  |  |       text-transform: Capitalize; | 
 |  |  |       margin-top: 20upx; | 
 |  |  |       position: relative; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-name::before { | 
 |  |  |       content: ""; | 
 |  |  |       position: absolute; | 
 |  |  | 
 |  |  |       font-size: 36upx; | 
 |  |  |       margin-right: 1px; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .nav-li text { | 
 |  |  |       position: absolute; | 
 |  |  |       right: 30upx; | 
 |  |  | 
 |  |  |       text-align: center; | 
 |  |  |       line-height: 60upx; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    .text-light { | 
 |  |  |       font-weight: 300; | 
 |  |  |    } | 
 |  |  | 	 | 
 |  |  |    @keyframes show { | 
 |  |  |       0% { | 
 |  |  |          transform: translateY(-50px); | 
 |  |  | 
 |  |  |       100% { | 
 |  |  |          transform: translateY(0px); | 
 |  |  |       } | 
 |  |  |    } | 
 |  |  |    .pda-btn { | 
 |  |  | 		 | 
 |  |  |       margin-left:120rpx; | 
 |  |  |       margin-right: auto; | 
 |  |  |       margin-top: 150rpx; | 
 |  |  |       width: 200rpx; | 
 |  |  |       height: 80rpx; | 
 |  |  |       font-size: 30upx; | 
 |  |  |       font-weight: bold; | 
 |  |  |    } | 
 |  |  | </style> |