完善登录页面

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
     NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
+    NutPopup: typeof import('@nutui/nutui-taro')['Popup']
     NutRadio: typeof import('@nutui/nutui-taro')['Radio']
     NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
     NutRow: typeof import('@nutui/nutui-taro')['Row']

-.red {
-  color: red;
+.nut-input {
+  border-radius: 50rpx;
 }

 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-30 10:00:57
- * @FilePath: /swx/src/pages/demo/index.vue
+ * @LastEditTime: 2023-12-18 18:00:07
+ * @FilePath: /meihuaApp/src/pages/login/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div class="red">{{ str }}</div>
+  <view>
+    <view style="color: #6A4925; font-size: 56rpx; text-align: center;">登&nbsp;录</view>
+    <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 50rpx; border-radius: 50rpx; padding: 5rpx 0;">
+      <nut-input v-model="tel" placeholder="请输入手机号" :border="false" type="number" />
+    </view>
+    <view style="border: 1px solid #F1EBDF; width: 90%; margin: 0 auto; margin-top: 20rpx; border-radius: 50rpx;">
+      <nut-input v-model="code" placeholder="请输入验证码" :border="false" type="number" >
+        <template #right> <nut-button size="small" color="#6A4925">获取验证码</nut-button> </template>
+      </nut-input>
+    </view>
+    <view style="color: #7B7B7B; font-size: 28rpx; margin: 20rpx 50rpx;">未注册手机号验证后自动创建新账号</view>
+    <view style="margin: 50rpx; margin-bottom: 10rpx;">
+      <nut-button block color="#6A4925" size="large" @tap="login"><text style="font-size: 38rpx;">登&nbsp;录</text></nut-button>
+    </view>
+    <view style="display: flex; align-items: center; margin-left: 60rpx; margin-top: 30rpx; color: #6A4925;">
+      <IconFont name="checked" color="#6A4925"></IconFont>
+      <text style="margin-left: 5rpx;">登录即同意</text><text style="font-weight: bold;" @tap="tapRight">《法律条款及隐私政策》</text>
+    </view>
+    <nut-popup position="right" closeable :style="{ width: '100%', height: '100%' }" v-model:visible="showRight"></nut-popup>
+  </view>
 </template>
 
 <script setup>
 import Taro from '@tarojs/taro'
+import { IconFont } from '@nutui/icons-vue-taro';
 import { ref } from "vue";
+
+const tel = ref('');
+const code = ref('');
+
+const showRight = ref(false);
+
+const tapRight = () => {
+  showRight.value = true;
+}
+
+const login = () => {
+  Taro.showToast({
+    title: '登录成功',
+    icon: 'success',
+    duration: 2000
+  })
+}
 </script>
 
 <script>
 import "./index.less";
 export default {
-  name: "demoPage",
+  name: "loginPage",
 };
 </script>