diff --git a/mobile-h5/App.vue b/mobile-h5/App.vue
index 29fe9ac9..cdc3c57b 100644
--- a/mobile-h5/App.vue
+++ b/mobile-h5/App.vue
@@ -22,4 +22,5 @@
   @import './styles/components/attach.scss';
   @import './styles/components/flow.scss';
   @import './styles/components/form-shell.scss';
+  @import './styles/components/login.scss';
 </style>
diff --git a/mobile-h5/styles/components/login.scss b/mobile-h5/styles/components/login.scss
new file mode 100644
index 00000000..73fe1545
--- /dev/null
+++ b/mobile-h5/styles/components/login.scss
@@ -0,0 +1,185 @@
+.login-page {
+  min-height: 100vh;
+  padding: 96rpx 48rpx 64rpx;
+  box-sizing: border-box;
+  background:
+    radial-gradient(520rpx 320rpx at 8% -8%, rgba(10, 159, 109, 0.16), transparent 60%),
+    radial-gradient(440rpx 280rpx at 96% 4%, rgba(214, 163, 67, 0.14), transparent 55%),
+    linear-gradient(180deg, #eef6f2 0%, #f5f8f7 48%, #f3f6f5 100%);
+}
+
+.login-brand {
+  text-align: center;
+  margin-bottom: 44rpx;
+}
+
+.login-brand__mark {
+  width: 128rpx;
+  height: 128rpx;
+  margin: 0 auto 24rpx;
+  border-radius: 36rpx;
+  background: linear-gradient(145deg, var(--brand-green-dark), var(--brand-green));
+  color: #fff;
+  font-size: 52rpx;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 20rpx 48rpx rgba(8, 127, 87, 0.28);
+}
+
+.login-brand__title {
+  font-size: 44rpx;
+  font-weight: 650;
+  color: var(--text-primary);
+  letter-spacing: 0.03em;
+}
+
+.login-brand__sub {
+  margin-top: 16rpx;
+  font-size: 26rpx;
+  color: var(--text-muted);
+}
+
+.login-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 32rpx;
+  padding: 36rpx 32rpx 32rpx;
+  box-shadow: var(--shadow-soft);
+}
+
+.login-field {
+  margin-bottom: 28rpx;
+}
+
+.login-field__label {
+  display: block;
+  font-size: 24rpx;
+  color: var(--text-muted);
+  margin-bottom: 12rpx;
+}
+
+.login-field__box {
+  display: flex;
+  align-items: center;
+  height: 88rpx;
+  padding: 0 24rpx;
+  border: 1px solid var(--border);
+  border-radius: 20rpx;
+  background: #f8fbfa;
+}
+
+.login-field__box.is-focus {
+  border-color: var(--brand-green);
+  background: #fff;
+  box-shadow: 0 0 0 6rpx rgba(10, 159, 109, 0.12);
+}
+
+.login-field__box.is-error {
+  border-color: var(--danger);
+}
+
+.login-field__input {
+  flex: 1;
+  height: 88rpx;
+  font-size: 28rpx;
+  color: var(--text-primary);
+}
+
+.login-field__action {
+  font-size: 24rpx;
+  color: var(--brand-green);
+  padding: 12rpx 0 12rpx 16rpx;
+}
+
+.login-field__error {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  color: var(--danger);
+}
+
+.login-submit {
+  margin-top: 8rpx;
+  height: 88rpx;
+  border-radius: 24rpx;
+  background: var(--brand-green);
+  color: #fff;
+  font-size: 30rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-submit.is-disabled {
+  opacity: 0.55;
+}
+
+.login-agree {
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+  margin-top: 28rpx;
+}
+
+.login-agree__box {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  border: 3rpx solid var(--brand-green);
+  margin-top: 4rpx;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.login-agree__box.is-on {
+  background: var(--brand-green);
+}
+
+.login-agree__text {
+  flex: 1;
+  font-size: 24rpx;
+  color: var(--text-muted);
+  line-height: 1.45;
+}
+
+.login-agree__link {
+  color: var(--brand-green);
+}
+
+.login-divider {
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  margin: 44rpx 0 28rpx;
+  font-size: 24rpx;
+  color: var(--text-muted);
+}
+
+.login-divider::before,
+.login-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.login-wechat {
+  height: 88rpx;
+  border-radius: 24rpx;
+  border: 1px solid var(--border);
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.login-wechat__icon {
+  width: 44rpx;
+  height: 44rpx;
+}