#

whycq

2023-08-16 b3b78917a492e6792c511a05a45d5d68bd6df616

#

 index.html

@@ -10,6 +10,16 @@
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body,template {
            height: 100%;
            overflow: hidden;
        }
    </style>
    <!--preload-links-->
    <!--app-context-->
  </head>

 pages.json

@@ -1,9 +1,9 @@
{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/login/login",
            "path": "pages/LoginDemo/LoginDemo",
            "style": {
                "navigationBarTitleText": "uni-app"
                "navigationBarTitleText": "登录"
            }
        }
    ],

 pages/LoginDemo/LoginDemo.vue

New file
@@ -0,0 +1,85 @@
<template>
    <view class="main">
        <view class="left">
            <!-- logo -->
            <view class="logo-box">
                <image src="../../static/img/logo.png" mode="aspectFit"></image>
            </view>
        </view>
        <view class="right">right</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            }
        },
        mounted() {
            uni.getSystemInfo({
                success(res) {
                    console.log(res);
                }
            })
        },
        methods: {
			
        }
    }
</script>

<style>
    @media screen and (orientation: portrait) {
        /* 竖屏 */
        .main {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: crimson;
            display: flex;
            flex-direction: column;
        }
        .left {
            height: 40%;
            width: 100%;
            background-color: aqua;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo-box {
            height: 60%;
            background-color: aliceblue;
        }
        image {
            height: 100%;
        }
    }
    @media screen and (orientation: landscape) {
        /* 横屏 */
        .main {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: crimson;
            display: flex;
        }
        .left {
            height: 100%;
            width: 50%;
            background-color: aqua;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo-box {
            height: 40%;
            background-color: aliceblue;
        }
        image {
            height: 100%;
        }
    }
</style>