登录页的登录按钮看不见

apps/mini-user/src/pages/login/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { View, Text, Input, Button, Image } from '@tarojs/components';
+import { View, Text, Input, Image } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import {
   SmsScene,
@@ -351,20 +351,20 @@ export default function LoginPage() {
               </Text>
             ) : null}
 
-            <Button
+            <View
-              className="login-sms-btn"
+              className={`login-sms-btn${loading ? ' login-sms-btn--disabled' : ''}`}
-              loading={loading}
+              onClick={loading ? undefined : () => void login()}
-              disabled={loading}
-              onClick={() => void login()}
             >
-              {loading
+              <Text className="login-sms-btn__text">
-                ? '处理中...'
+                {loading
-                : completeMode === 'phone'
+                  ? '处理中...'
-                  ? '完成验证'
+                  : completeMode === 'phone'
-                  : bindMode
+                    ? '完成验证'
-                    ? '绑定并登录'
+                    : bindMode
-                    : '登录'}
+                      ? '绑定并登录'
-            </Button>
+                      : '登录'}
+              </Text>
+            </View>
           </View>
         )}
 

apps/mini-user/src/styles/login.css

@@ -155,10 +155,10 @@
   width: 100%;
   height: 48px;
   margin-top: 8px;
-  border: 1px solid rgba(166, 29, 36, 0.2);
+  border: 1.5px solid var(--color-heritage-red, #a61d24);
   border-radius: var(--radius-lg);
-  background: transparent;
+  background: #fff;
-  color: var(--color-heritage-red);
+  color: var(--color-heritage-red, #a61d24);
   font-family: var(--font-headline);
   font-size: 18px;
   font-weight: 600;
@@ -167,14 +167,24 @@
   justify-content: center;
   line-height: 1;
   padding: 0;
+  box-sizing: border-box;
 }
 
-.login-sms-btn::after {
+.login-sms-btn__text {
-  border: none;
+  color: var(--color-heritage-red, #a61d24);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
 }
 
-.login-sms-btn[disabled] {
+.login-sms-btn:active {
+  background: rgba(166, 29, 36, 0.06);
+  transform: scale(0.98);
+}
+
+.login-sms-btn--disabled {
   opacity: 0.6;
+  pointer-events: none;
 }
 
 .login-divider {