From 7438b52a180abe7e72d5be0302b89025973219e7 Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期五, 21 七月 2023 09:03:59 +0800 Subject: [PATCH] # --- App.vue | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 237 insertions(+), 0 deletions(-) diff --git a/App.vue b/App.vue index 8c2b732..8147dc3 100644 --- a/App.vue +++ b/App.vue @@ -1,7 +1,109 @@ <script> + 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: '瀚g孩', + name: 'red', + color: '#e54d42' + }, + { + title: '妗旀', + name: 'orange', + color: '#f37b1d' + }, + { + title: '鏄庨粍', + name: 'yellow', + color: '#fbbd08' + }, + { + title: '姗勬', + name: 'olive', + color: '#8dc63f' + }, + { + title: '妫豢', + name: 'green', + color: '#39b54a' + }, + { + title: '澶╅潚', + name: 'cyan', + color: '#1cbbb4' + }, + { + title: '娴疯摑', + name: 'blue', + color: '#0081ff' + }, + { + title: '濮圭传', + name: 'purple', + color: '#6739b6' + }, + { + title: '鏈ㄦЭ', + name: 'mauve', + color: '#9c26b0' + }, + { + title: '妗冪矇', + name: 'pink', + color: '#e03997' + }, + { + title: '妫曡', + name: 'brown', + color: '#a5673f' + }, + { + title: '鐜勭伆', + name: 'grey', + color: '#8799a3' + }, + { + title: '鑽夌伆', + name: 'gray', + color: '#aaaaaa' + }, + { + title: '澧ㄩ粦', + name: 'black', + color: '#333333' + }, + { + title: '闆呯櫧', + name: 'white', + color: '#ffffff' + }, + ] }, onShow: function() { console.log('App Show') @@ -13,5 +115,140 @@ </script> <style> + @import "static/css/colorUi/icon.css"; /*姣忎釜椤甸潰鍏叡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: 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; + z-index: -1; + background-color: inherit; + width: 100%; + height: 100%; + left: 0; + bottom: -10%; + border-radius: 10upx; + 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; + display: block; + width: 40upx; + height: 6upx; + background: #fff; + bottom: 0; + right: 0; + opacity: 0.5; + } + + .nav-name::after { + content: ""; + position: absolute; + display: block; + width: 100upx; + height: 1px; + background: #fff; + bottom: 0; + right: 40upx; + opacity: 0.3; + } + + .nav-name::first-letter { + font-weight: bold; + font-size: 36upx; + margin-right: 1px; + } + + .nav-li text { + position: absolute; + right: 30upx; + top: 30upx; + font-size: 52upx; + width: 60upx; + height: 60upx; + text-align: center; + line-height: 60upx; + } + + .text-light { + font-weight: 300; + } + + @keyframes show { + 0% { + transform: translateY(-50px); + } + + 60% { + transform: translateY(40upx); + } + + 100% { + transform: translateY(0px); + } + } + + @-webkit-keyframes show { + 0% { + transform: translateY(-50px); + } + + 60% { + transform: translateY(40upx); + } + + 100% { + transform: translateY(0px); + } + } </style> -- Gitblit v1.9.1