add login style

1 year ago · e7ac9e3d05
26 changed files with 4935 additions and 0 deletions
--- a/uniapp_project_code/.gitignore
+++ b/uniapp_project_code/.gitignore
@ -0,0 +1,21 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+*.local
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/uniapp_project_code/index.html
+++ b/uniapp_project_code/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/uniapp_project_code/package.json
+++ b/uniapp_project_code/package.json
@ -0,0 +1,70 @@
+{
+  "name": "uni-preset-vue",
+  "version": "0.0.0",
+  "scripts": {
+    "dev:app": "uni -p app",
+    "dev:app-android": "uni -p app-android",
+    "dev:app-ios": "uni -p app-ios",
+    "dev:custom": "uni -p",
+    "dev:h5": "uni",
+    "dev:h5:ssr": "uni --ssr",
+    "dev:mp-alipay": "uni -p mp-alipay",
+    "dev:mp-baidu": "uni -p mp-baidu",
+    "dev:mp-jd": "uni -p mp-jd",
+    "dev:mp-kuaishou": "uni -p mp-kuaishou",
+    "dev:mp-lark": "uni -p mp-lark",
+    "dev:mp-qq": "uni -p mp-qq",
+    "dev:mp-toutiao": "uni -p mp-toutiao",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "dev:mp-xhs": "uni -p mp-xhs",
+    "dev:quickapp-webview": "uni -p quickapp-webview",
+    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
+    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
+    "build:app": "uni build -p app",
+    "build:app-android": "uni build -p app-android",
+    "build:app-ios": "uni build -p app-ios",
+    "build:custom": "uni build -p",
+    "build:h5": "uni build",
+    "build:h5:ssr": "uni build --ssr",
+    "build:mp-alipay": "uni build -p mp-alipay",
+    "build:mp-baidu": "uni build -p mp-baidu",
+    "build:mp-jd": "uni build -p mp-jd",
+    "build:mp-kuaishou": "uni build -p mp-kuaishou",
+    "build:mp-lark": "uni build -p mp-lark",
+    "build:mp-qq": "uni build -p mp-qq",
+    "build:mp-toutiao": "uni build -p mp-toutiao",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:mp-xhs": "uni build -p mp-xhs",
+    "build:quickapp-webview": "uni build -p quickapp-webview",
+    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
+    "build:quickapp-webview-union": "uni build -p quickapp-webview-union"
+  },
+  "dependencies": {
+    "@dcloudio/uni-app": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-app-plus": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-components": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-h5": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3090920231215001",
+    "vue": "^3.2.45",
+    "vue-i18n": "^9.1.9"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.3.2",
+    "@dcloudio/uni-automator": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3090920231215001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3090920231215001",
+    "@vue/runtime-core": "^3.2.45",
+    "sass": "^1.69.7",
+    "vite": "4.0.3"
+  }
+}
--- a/uniapp_project_code/shims-uni.d.ts
+++ b/uniapp_project_code/shims-uni.d.ts
@ -0,0 +1,10 @@
+/// <reference types='@dcloudio/types' />
+import 'vue'
+
+declare module '@vue/runtime-core' {
+  type Hooks = App.AppInstance & Page.PageInstance;
+
+  interface ComponentCustomOptions extends Hooks {
+
+  }
+}
--- a/uniapp_project_code/src/App.vue
+++ b/uniapp_project_code/src/App.vue
@ -0,0 +1,13 @@
+<script setup>
+import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
+onLaunch(() => {
+  console.log("App Launch");
+});
+onShow(() => {
+  console.log("App Show");
+});
+onHide(() => {
+  console.log("App Hide");
+});
+</script>
+<style></style>
--- a/uniapp_project_code/src/components/login/background.vue
+++ b/uniapp_project_code/src/components/login/background.vue
@ -0,0 +1,20 @@
+<template>
+    <view class="background">
+        <slot></slot>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .background {
+        height: 100vh;
+        background-size: 100% 100%;
+		background-repeat: no-repeat;
+        background-image: url("/static/login_bg.jpg");
+    }
+</style>
--- a/uniapp_project_code/src/components/login/button.vue
+++ b/uniapp_project_code/src/components/login/button.vue
@ -0,0 +1,24 @@
+<template>
+    <view class="btn-box">
+        <button class="login-button" type="primary">登录</button>
+    </view>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+    .btn-box{
+        @include ctf(center);
+    }
+    .login-button{
+        @include clearBtn;
+        width: 1290upx;
+        height: 200upx;
+        border-radius: 100upx;
+        background-image: linear-gradient(180deg, #FCDA9E 12%, #F7B23E 100%);
+        @include flcw(72upx, 200upx, #fff, 500);
+
+    }
+</style>
--- a/uniapp_project_code/src/components/login/form.vue
+++ b/uniapp_project_code/src/components/login/form.vue
@ -0,0 +1,48 @@
+<template>
+    <view class="form-box">
+        <view class="login-form">
+            <view class="lf-item">
+                <image class="li-icon" mode="aspectFit" src="/static/images/person.png"></image>
+                <input class="li-ipt" placeholder="请输入登录账号" />
+            </view>
+            <view class="lf-item">
+                <image class="li-icon" mode="aspectFit" src="/static/images/lock.png"></image>
+                <input class="li-ipt" placeholder="请输入登录密码" />
+            </view>
+        </view>
+    </view>
+    
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+    .form-box{
+        @include ctf(center);
+    }
+    .login-form{
+        width: 1230upx;
+        border-radius: 11upx;
+        background: #fff;
+        .lf-item{
+            padding: 0 50upx;
+            height: 200upx;
+            @include ctf;
+            &.lf-item{
+                border-top: 2px solid #F2F2F7;
+            }
+            .li-icon{
+                margin-right: 50upx;
+                width: 76upx;
+                height: 76upx;
+            }
+            .li-ipt{
+                flex-grow: 1;
+                height: 100%;
+                @include flcw;
+            }
+        }
+    }
+</style>
--- a/uniapp_project_code/src/components/login/logo.vue
+++ b/uniapp_project_code/src/components/login/logo.vue
@ -0,0 +1,23 @@
+<template>
+    <view class="logo-box">
+        <image class="lb-img" mode="aspectFill"></image>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .logo-box{
+        @include ctf(center);
+        .lb-img{
+            width: 486upx;
+            height: 486upx;
+            border-radius: 50%;
+            background: skyblue;
+        }
+    }
+</style>
--- a/uniapp_project_code/src/components/login/pads_picker.vue
+++ b/uniapp_project_code/src/components/login/pads_picker.vue
@ -0,0 +1,53 @@
+<template>
+    <view class="pads-picker">
+        <view class="pp-content">
+            <view class="pc-text">请选择平板</view>
+            <view class="pc-frame">
+                <picker class="pt-picker" mode="time">
+                    <view class="pp-box">
+                        <view class="pb-text">请选择平板</view>
+                        <image class="pt-icon" mode="aspectFtt" src="/static/images/triangle.png"></image>
+                    </view>
+                </picker>
+            </view>
+            
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .pads-picker{
+        @include ctf(center);
+        .pp-content{
+            width: 1210upx;
+            .pc-text{
+                @include flcw(48upx, 76upx, #fff);
+            }
+            .pc-frame{
+                margin-top: 46upx;
+                .pp-box{
+                    padding: 0 40upx;
+                    height: 183upx;
+                    border-radius: 8upx;
+                    background: #fff;
+                    @include ctf(space-between);
+                    .pb-text{
+                        flex-grow: 1;
+                        @include flcw;
+                    }
+                    .pt-icon{
+                        flex-shrink: 0;
+                        width: 54upx;   
+                        height: 27upx;
+                    }
+                }
+            }
+        }
+    }
+</style>
--- a/uniapp_project_code/src/components/login/setting_mask.vue
+++ b/uniapp_project_code/src/components/login/setting_mask.vue
@ -0,0 +1,76 @@
+<template>
+    <view class="setting-mask">
+        <view class="sm-content">
+            <image class="sc-close" mode="aspectFit" src="/static/images/close.png"></image>
+            <view class="sc-title">平板信息配置</view>
+            <view class="sc-container">
+                <view class="sc-line">
+                    <view class="sl-desc">当前设备名称：前门平板</view>
+                    <button class="sd-btn">更新配置</button>
+                </view>
+                <view class="sc-line">
+                    <view class="sl-desc">屏幕适配设置</view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss">
+    .setting-mask{
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, .5);
+        .sm-content{
+            position: absolute;
+            top: 0;
+            right: 0;
+            padding-top: 200upx;
+            width: 1610upx;
+            height: 100%;
+            background: #fff;
+            .sc-close{
+                position: absolute;
+                right: 80upx;
+                top: 54upx;
+                width: 100upx;
+                height: 100upx;
+            }
+            .sc-title{
+                text-align: center;
+                @include flcw(65upx, 90upx, #1B1B1B, 500);
+            }
+            .sc-container{
+                margin-top: 150upx;
+                padding: 0 60upx;
+                .sc-line{
+                    @include ctf;
+                    &+.sc-line{
+                        margin-top: 19upx;
+                    }
+                    .sl-desc{
+                        @include flcw(48upx, 68upx, #1B1B1B, 500);
+                        @include tHide;
+                    }
+                    .sd-btn{
+                        @include clearBtn;
+                        flex-shrink: 0;
+                        margin-left: 75upx;
+                        text-align: center;
+                        width: 346upx;
+                        background: $mColor;
+                        border-radius: 18upx;
+                        @include flcw(48upx, 120upx, #fff, 500);
+                    }
+                }
+            }
+        }
+    }
+</style>
--- a/uniapp_project_code/src/main.js
+++ b/uniapp_project_code/src/main.js
@ -0,0 +1,10 @@
+import {
+	createSSRApp
+} from "vue";
+import App from "./App.vue";
+export function createApp() {
+	const app = createSSRApp(App);
+	return {
+		app,
+	};
+}
--- a/uniapp_project_code/src/manifest.json
+++ b/uniapp_project_code/src/manifest.json
@ -0,0 +1,72 @@
+{
+    "name" : "",
+    "appid" : "",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics": {  
+        "enable": false
+    },
+    "vueVersion" : "3"
+}
--- a/uniapp_project_code/src/pages.json
+++ b/uniapp_project_code/src/pages.json
@ -0,0 +1,28 @@
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/login/success",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/login/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "uni-app"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	}
+}
--- a/uniapp_project_code/src/pages/index/index.vue
+++ b/uniapp_project_code/src/pages/index/index.vue
@ -0,0 +1,12 @@
+<template>
+  <view class="content">
+    999
+  </view>
+</template>
+
+<script setup>
+</script>
+
+<style>
+
+</style>
--- a/uniapp_project_code/src/pages/login/index.vue
+++ b/uniapp_project_code/src/pages/login/index.vue
@ -0,0 +1,51 @@
+<template>
+    <login-background>
+        <view class="login-index">
+            <view class="li-logo">
+                <logo-vue></logo-vue>
+            </view>
+            <view class="li-name">欢迎使用欧轩智能场馆平板端系统</view>
+            <view class="li-from">
+                <login-form></login-form>
+            </view>
+            
+            <view class="li-tip">*登录账号密码请从pc端后台管理【设备运营管理平板管理】里获取</view>
+            <view class="li-btn">
+                <login-button></login-button>
+            </view>
+            
+        </view>
+    </login-background>
+</template>
+
+<script setup>
+    import loginBackground from '@/components/login/background.vue';
+    import logoVue from '@/components/login/logo.vue';
+    import loginForm from '@/components/login/form.vue';
+    import loginButton from '@/components/login/button.vue';
+</script>
+
+<style lang="scss">
+    .login-index{
+        padding-top: 666upx;
+    }
+    .li-name{
+        padding: 0 476upx;
+        margin-top: 60upx;
+        text-align: center;
+        @include flcw(72upx, 100upx, #fff);
+        @include tHide(2);
+    }
+    .li-from{
+        margin-top: 166upx;
+    }
+    .li-tip{
+        padding: 0 476upx;
+        margin-top: 54upx;
+        @include flcw(48upx, 76upx, #fff);
+        @include tHide(2);
+    }
+    .li-btn{
+        margin-top: 286upx;
+    }
+</style>
--- a/uniapp_project_code/src/pages/login/success.vue
+++ b/uniapp_project_code/src/pages/login/success.vue
@ -0,0 +1,62 @@
+<template>
+    <login-background>
+        <view class="login-success">
+            <logo-vue></logo-vue>
+            <view class="ls-desc">
+                <view class="ld-line">尊敬的欧轩智能24小时零售（永泰店）：</view>
+                <view class="ld-line">欢迎登录欧轩智能场馆平板端系统！</view>
+            </view>
+            <view class="ls-pads">
+                <pads-picker></pads-picker>
+            </view>
+            <view class="ls-botton">
+                <login-button></login-button>
+            </view>
+            <view class="ls-links">
+                <view class="ll-item">更新</view>
+                <view class="ll-item">设置</view>
+            </view>
+        </view>
+        <setting-mask v-if="false"></setting-mask>
+    </login-background>
+</template>
+
+<script setup>
+import loginBackground from '@/components/login/background.vue';
+import logoVue from '@/components/login/logo.vue';
+import padsPicker from '@/components/login/pads_picker.vue';
+import loginButton from '@/components/login/button.vue';
+import settingMask from '@/components/login/setting_mask.vue';
+</script>
+
+<style lang="scss">
+    .login-success{
+        padding-top: 800upx;
+    }
+    .ls-desc{
+        margin-top: 283upx;
+        padding: 0 476upx;
+        .ld-line{
+            @include flcw(48upx, 76upx, #fff);
+            @include tHide(1);
+            &+.ld-line{
+                margin-top: 10upx;
+            }
+        }
+    }
+    .ls-pads{
+        margin-top: 108upx;
+    }
+    .ls-botton{
+        margin-top: 266upx;
+    }
+    .ls-links{
+        margin-top: 133upx;
+        padding: 0 544upx;
+        @include ctf(space-between);
+        .ll-item{
+            text-decoration: underline;
+            @include flcw(72upx, 76upx, #fff);
+        }
+    }
+</style>
--- a/uniapp_project_code/src/shime-uni.d.ts
+++ b/uniapp_project_code/src/shime-uni.d.ts
@ -0,0 +1,6 @@
+export {};
+
+declare module "vue" {
+  type Hooks = App.AppInstance & Page.PageInstance;
+  interface ComponentCustomOptions extends Hooks {}
+}
--- a/uniapp_project_code/src/static/images/close.png
+++ b/uniapp_project_code/src/static/images/close.png
--- a/uniapp_project_code/src/static/images/lock.png
+++ b/uniapp_project_code/src/static/images/lock.png
--- a/uniapp_project_code/src/static/images/person.png
+++ b/uniapp_project_code/src/static/images/person.png
--- a/uniapp_project_code/src/static/images/triangle.png
+++ b/uniapp_project_code/src/static/images/triangle.png
--- a/uniapp_project_code/src/static/login_bg.jpg
+++ b/uniapp_project_code/src/static/login_bg.jpg
--- a/uniapp_project_code/src/uni.scss
+++ b/uniapp_project_code/src/uni.scss
@ -0,0 +1,51 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+
+$mColor: #009874;
+
+/* 水平flex */
+@mixin ctf($justtify: flex-start){
+    display: flex;
+    align-items: center;
+    justify-content: $justtify;
+}
+
+/* 文字样式 */
+@mixin flcw($size: 48upx, $height: 66upx, $color: #333, $weight: 400){
+    font-size: $size;
+    line-height: $height;
+    color: $color;
+    font-weight: $weight;
+}
+
+@mixin tHide($line: 1) {
+    display: -webkit-box;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp:$line;
+}
+
+@mixin clearBtn{
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    background-color: transparent;
+    &::after{
+        position: unset !important;
+        border: unset;
+    }
+}
--- a/uniapp_project_code/vite.config.js
+++ b/uniapp_project_code/vite.config.js
@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import uni from '@dcloudio/vite-plugin-uni'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    uni(),
+  ],
+})
--- a/uniapp_project_code/yarn.lock
+++ b/uniapp_project_code/yarn.lock