#

whycq

2023-03-19 646b4b5dac450305e3c0a4e100426c05276c65d4

#

 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: '嫣红',
                    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,10 +115,139 @@
</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;
    }
	
    .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>

 pages.json

@@ -5,6 +5,12 @@
            "style": {
                "navigationBarTitleText": "登 录"
            }
        },
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "主 页"
            }
        }
    ],
    "globalStyle": {

 pages/login/login.vue

@@ -50,7 +50,7 @@
        <!-- 登录按钮 -->
        <view class="submit">
            <view class="" style="width: 400rpx;">
                <button type="primary" size="default">登录</button>
                <button type="primary" @click="onLogin()" :loading="load.loading">{{load.btnText}}</button>
            </view>
        
        </view>
@@ -95,7 +95,11 @@
        data() {
            return {
                version: '',
                value: ''
                value: '',
                load: {
                    loading: false,
                    btnText: '登录'
                },
            }
        },
        onLoad() {
@@ -119,6 +123,19 @@
            // 设置窗口关闭按钮
            close() {
                this.$refs.inputDialog.close()
            },
            onLogin() {
                let that = this
                that.load.loading = true;
                that.load.btnText = '登录中';
                setTimeout(()=> {
                    uni.showToast({title: '登录成功'})
                    setTimeout(()=> {
                        uni.reLaunch({
                            url: '../home/home'
                        });
                    },300)
                },700)
            }
        }
    }