Browse Source

feat: 登录静态布局

sunxiao 7 months ago
parent
commit
fc227feb6e

+ 6 - 0
package-lock.json

@@ -23,6 +23,7 @@
         "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
         "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
         "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
+        "@dcloudio/uni-ui": "^1.5.6",
         "pinia": "^2.2.0",
         "pinia-plugin-persistedstate": "^3.2.1",
         "sass": "^1.77.8",
@@ -2496,6 +2497,11 @@
         "debug": "^4.3.3"
       }
     },
+    "node_modules/@dcloudio/uni-ui": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmmirror.com/@dcloudio/uni-ui/-/uni-ui-1.5.6.tgz",
+      "integrity": "sha512-jmb98PasFvZkrIDXGh94GbdWg2/jyhgs1HUG+bU8eyL7Ltias/5XBz4q8w9RXyWUfqepJRqapPA2IIQpLCuTIg=="
+    },
     "node_modules/@dcloudio/vite-plugin-uni": {
       "version": "3.0.0-4020420240722002",
       "resolved": "https://registry.npmmirror.com/@dcloudio/vite-plugin-uni/-/vite-plugin-uni-3.0.0-4020420240722002.tgz",

+ 1 - 0
package.json

@@ -57,6 +57,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
     "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
+    "@dcloudio/uni-ui": "^1.5.6",
     "pinia": "^2.2.0",
     "pinia-plugin-persistedstate": "^3.2.1",
     "sass": "^1.77.8",

+ 31 - 0
src/components/TheNavBar.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+  titleText: {
+    type: String,
+    default: ""
+  }
+})
+</script>
+
+<template>
+  <view class="nav-bar-container">
+    <TheStatusBar></TheStatusBar>
+    <uni-nav-bar :border="false" backgroundColor="rgba(0,0,0,0)">
+      <view class="title">{{ titleText }}</view>
+    </uni-nav-bar>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.nav-bar-container {
+  .title {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 34rpx;
+    color: #000;
+  }
+}
+</style>

+ 6 - 0
src/components/TheStatusBar.vue

@@ -0,0 +1,6 @@
+<script setup>
+const { safeAreaInsets } = uni.getSystemInfoSync()
+</script>
+<template>
+  <view class="status-bar" :style="{height: safeAreaInsets.top + 'px'}"></view>
+</template>

+ 5 - 0
src/components/layout/LaNavBar.vue

@@ -0,0 +1,5 @@
+<template>
+
+template 这个是layout布局
+
+</template>

+ 10 - 0
src/components/layout/TheStatusBar1.vue

@@ -0,0 +1,10 @@
+<script setup>
+const { safeAreaInsets } = uni.getSystemInfoSync()
+</script>
+<template>
+  <view class="status-bar" :style="{height: safeAreaInsets.top + 'px'}">
+
+
+    123123123
+  </view>
+</template>

+ 1 - 1
src/manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx809fa55d756098a7",
         "setting" : {
             "urlCheck" : false
         },

+ 9 - 1
src/pages.json

@@ -1,5 +1,11 @@
 {
 	"pages": [
+		{
+			"path": "pages/login/index",
+			"style": {
+        "navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -16,7 +22,9 @@
 	"easycom": {
 		"autoscan": true,
 		"custom": {
-			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
+      "^The(.*)": "@/components/The$1.vue",
+      "^La(.*)": "@/components/layout/La$1.vue"
 		}
 	}
 }

+ 128 - 0
src/pages/login/index.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue';
+
+const showPassword = ref(false);
+const formData = ref({
+  username: '',
+  password: ''
+});
+
+</script>
+
+<template>
+
+  <view class="login-viewport">
+    <TheNavBar title-text="登录" class="nav-bar"></TheNavBar>
+
+    <view class="login-content">
+
+      <view class="logo-inner">
+        <image src="https://static.fuxicarbon.com/bigModel/wechat/login/img-desc.png" class="img-desc"></image>
+      </view>
+
+      <view class="form-inner">
+        <view class="login-form-item">
+          <image src="https://static.fuxicarbon.com/bigModel/wechat/login/icon-username.png" class="image"></image>
+          <input class="inp" v-model="formData.username" placeholder="请输入账号" placeholder-style="color: #ADB0BD" />
+        </view>
+        <view class="login-form-item">
+          <image src="https://static.fuxicarbon.com/bigModel/wechat/login/icon-password.png" class="image"></image>
+          <input class="inp uni-input" :password="!showPassword" v-model="formData.password" placeholder="请输入密码"
+            placeholder-style="color: #ADB0BD" />
+          <uni-icons size="20" :type="showPassword ? 'eye' : 'eye-slash'" color="#ADB0BD" class="icon-eye"
+            @click="showPassword = !showPassword"></uni-icons>
+        </view>
+        <button class="sub-btn" hover-color="sub-btn_hover">
+          <text>登录</text>
+        </button>
+      </view>
+
+      <view class="text-inner">
+        <text>人工智能运营体智慧决策助手</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.login-viewport {
+  display: flex;
+  flex-flow: column;
+  height: 100vh;
+  background: url("https://static.fuxicarbon.com/bigModel/wechat/login/bg-login.png") no-repeat;
+  background-size: 100% 100%;
+
+  .login-content {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    flex-flow: column;
+    padding: 132rpx 60rpx 36rpx 60rpx;
+
+    .logo-inner {
+      .img-desc {
+        width: 500rpx;
+        height: 96rpx;
+      }
+    }
+
+    .form-inner {
+      width: 628rpx;
+      margin: 0 auto;
+
+      .login-form-item {
+        position: relative;
+
+        .inp {
+          height: 52rpx;
+          padding: 24rpx 96rpx 24rpx 96rpx;
+          border-radius: 100rpx;
+          background: #F6F7F8;
+          line-height: 100rpx;
+        }
+
+        .image {
+          position: absolute;
+          top: 50%;
+          left: 40rpx;
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 16rpx;
+          transform: translateY(-50%);
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 24rpx;
+        }
+
+        &:nth-child(2) {
+          .icon-eye {
+            position: absolute;
+            top: 50%;
+            right: 40rpx;
+            transform: translateY(-50%);
+          }
+        }
+      }
+
+      .sub-btn {
+        height: 100rpx;
+        margin-top: 180rpx;
+        border-radius: 100rpx;
+        text-align: center;
+        line-height: 100rpx;
+        font-size: 32rpx;
+        color: #fff;
+        background: #8AB1FF;
+      }
+    }
+
+    .text-inner {
+      padding-bottom: 50rpx;
+      font-size: 28rpx;
+      text-align: center;
+      color: #727687;
+    }
+  }
+}
+</style>

+ 1 - 0
vite.config.js

@@ -5,4 +5,5 @@ export default defineConfig({
   plugins: [
     uni(),
   ],
+  transpileDependencies: ["@dcloudio/uni-ui"]
 })