登录页、按钮组件

components/me-button/me-button.vue

@@ -0,0 +1,147 @@
+<template>
+  <view class="btn-container"
+        :style="{width, marginTop, marginBottom}"
+        :hover-class="isActive ? 'fixed-mask-layer-radius8' : 'none'"
+        hover-start-time="0"
+        hover-stay-time="50"
+        @click="submit()"
+  >
+
+    <!--线框按钮-->
+    <view v-if="isBorderButton"
+          class="wireframe-btn">
+      <view class="btn flex-c" :style="{color: iconColor}">
+        <view class="icon" v-if="iconType">
+          <me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
+        </view>
+        <text>{{ text }}</text>
+      </view>
+    </view>
+
+    <!--纯色按钮-->
+    <view v-else
+          :class="['flex-c', 'btn', isActive ? 'btn-active' : 'btn-default']"
+          :style="{backgroundColor: btnBgColor}"
+    >
+      <view class="icon" v-if="iconType">
+        <me-icon :color="iconColor" :type="iconType" size="44rpx"></me-icon>
+      </view>
+      <text>{{ text }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import MeIcon from "../../components/me-icon/me-icon";
+
+const emit = defineEmits(["click"]);
+const props = defineProps({
+  //按钮文本
+  text: {
+    type: String,
+    required: false,
+    default: '保 存',
+  },
+  //按钮 icon 样式
+  iconType: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  //是否可点击
+  isActive: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+  //是否为线框按钮
+  isBorderButton: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  //按钮宽度
+  width: {
+    type: String,
+    required: true,
+  },
+  //距离顶部
+  marginTop: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  //距离底部
+  marginBottom: {
+    type: String,
+    required: false,
+    default: '0',
+  },
+  //按钮活动颜色
+  activeColor: {
+    type: String,
+    required: false,
+    default: 'var(--themeColor)',
+  }
+});
+
+const btnBgColor = computed(() => {
+  if (!props.isActive) {
+    return 'var(--contentBgColor)'
+  }
+
+  return props.activeColor;
+})
+
+//计算 icon 颜色
+const iconColor = computed(() => {
+  if (!props.isActive) {
+    return 'var(--descriptionColor)'
+  }
+
+  if (props.isBorderButton) {
+    return 'var(--themeColor)'
+  }
+
+  return '#FFFFFF';
+})
+
+//提交
+const submit = () => {
+  emit("click");
+};
+</script>
+
+<style lang="scss" scoped>
+.btn-container {
+  .icon {
+    margin-right: 8rpx;
+  }
+
+  .btn {
+    width: 100%;
+    height: 96rpx;
+    border-radius: 16rpx;
+    font-size: 34rpx;
+    line-height: 112rpx;
+    text-align: center;
+    color: transparent;
+    transition: background .2s ease;
+  }
+  .btn-active {
+    color: #FFFFFF;
+  }
+  .btn-default {
+    color: var(--descriptionColor);
+  }
+
+  .wireframe-btn {
+    .btn {
+      border: 1px solid var(--contentBgColor);
+      box-sizing: border-box;
+      background-color: transparent;
+    }
+  }
+}
+</style>

components/me-icon/me-icon.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: 'var(--contentColor50)'
+    default: 'var(--summaryColor)'
   },
   size: {
     type: [Number, String],
@@ -45,4 +45,4 @@ const styleObj = () => {
   text-decoration: none;
   text-align: center;
 }
-</style>
+</style>

pages.json

@@ -4,7 +4,7 @@
 			"path" : "pages/user/login",
 			"style" :
 			{
-				"navigationBarTitleText" : "",
+				"navigationBarTitleText" : "登录",
 				"disableScroll": true
 			}
 		},

pages/user/login.vue

@@ -1,13 +1,33 @@
 <template>
-  <view>
+  <view class="container">
-    <view class="">
+    <view class="info">
+      <view class="top flex-c">
+        <view class="icon-container flex-c">
+          <image class="img" mode="aspectFill" src="https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20250325/77e65857af564c0dda57e1a195da19c3.png"></image>
+        </view>
+      </view>
+      <view class="bottom">超邦手工单系统</view>
+    </view>
 
+    <view class="login-area">
+      <view class="agreement flex-c">
+        <view class="clickable-area flex-r">
+          <me-icon class="icon" type="icon-checkbox-blank-circle" size="40rpx" color="var(--summaryColor)"></me-icon>
+          阅读并同意
+        </view>
+        <view class="text">&nbsp<text>用户协议</text>、<text>隐私协议</text></view>
+      </view>
+      <view class="btn-area flex-c">
+        <me-button @click="phoneLogin()" text="手机号一键登录" width="590rpx"></me-button>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
 
+import MeIcon from "../../components/me-icon/me-icon.vue";
+import MeButton from "../../components/me-button/me-button.vue";
 </script>
 <style>
 page {
@@ -17,5 +37,67 @@ page {
 </style>
 
 <style lang="scss" scoped>
-
+.container {
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  .info {
+    margin-top: 40rpx;
+    width: 100%;
+    .top {
+      width: 100%;
+      height: 160rpx;
+      .icon-container {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 80rpx;
+        border: 1px solid #E9F1FE;
+        .img {
+          width: 140rpx;
+          height: 140rpx;
+          border-radius: 70rpx;
+        }
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 50rpx;
+      font-weight: 500;
+      font-size: 34rpx;
+      color: var(--titleColor);
+      line-height: 50rpx;
+      text-align: center;
+      margin-top: 36rpx;
+    }
+  }
+  .login-area {
+    width: 100%;
+    margin-top: 264rpx;
+    .agreement {
+      width: 100%;
+      height: 80rpx;
+      font-weight: 500;
+      font-size: 28rpx;
+      color: var(--titleColor);
+      line-height: 80rpx;
+      .clickable-area {
+        height: 80rpx;
+        .icon {
+          margin-left: 8rpx;
+          margin-right: 8rpx;
+        }
+      }
+      .text {
+        height: 80rpx;
+        text {
+          color: var(--themeColor);
+        }
+      }
+    }
+    .btn-area {
+      width: 100%;
+      height: 96rpx;
+      margin-top: 32rpx;
+    }
+  }
+}
 </style>