| | |
| | | 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; |
| | | } |
| | | .title-login { |
| | | text-align: justify; |
| | | padding-right: 30upx; |
| | | font-size: 30upx; |
| | | font-weight: 400; |
| | | position: relative; |
| | | height: 60upx; |
| | | line-height: 60upx; |
| | | } |
| | | .main-btn { |
| | | padding: 0 20px; |
| | | font-size: 20px; |
| | | height: 40px; |
| | | } |
| | | </style> |