tt/youlai-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: 临时提交

Browse Source
This commit is contained in:
Ray.Hao
2025-05-29 23:34:46 +08:00
parent ad4be7a197
commit d1a90a8313
4 changed files with 205 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@@ -20,4 +20,7 @@ onHide(() => {
});
</script>
<style lang="scss"></style>
<style lang="scss">
/* 导入暗黑模式修复样式 */
@import "./styles/dark-mode-fix';";
</style>

131
src/pages/login/index.vue
View File

@@ -4,10 +4,8 @@
<image src="/static/images/login-bg.svg" mode="aspectFill" class="login-bg" />
<!-- Logo和标题区域 -->
<view class="header">
<image src="/static/logo.png" class="logo" />
<text class="title">有来开源</text>
<text class="subtitle">专注于构建高效开发的应用解决方案</text>
<view class="header"> <view class="header">
</view>
<view class="login-card">
@@ -16,10 +14,15 @@
<wd-form v-if="loginType === 'account'" ref="loginFormRef" :model="loginFormData">
<!-- 用户名输入框 -->
<view class="form-item">
<wd-icon name="user" size="22" class="input-icon" />
<wd-icon
name="user"
size="22"
:color="isDarkMode ? '#7AC5FF' : '#333'"
class="input-icon"
/>
<input
v-model="loginFormData.username"
class="form-input"
class="form-input input-transparent"
placeholder="请输入用户名"
placeholder-class="input-placeholder"
/>
@@ -28,10 +31,15 @@
<!-- 密码输入框 -->
<view class="form-item">
<wd-icon name="lock-on" size="22" class="input-icon" />
<wd-icon
name="lock-on"
size="22"
:color="isDarkMode ? '#7AC5FF' : '#333'"
class="input-icon"
/>
<input
v-model="loginFormData.password"
class="form-input"
class="form-input input-transparent"
:type="showPassword ? 'text' : 'password'"
placeholder="请输入密码"
placeholder-class="input-placeholder"
@@ -39,7 +47,7 @@
<wd-icon
:name="showPassword ? 'eye-open' : 'eye-close'"
size="18"
color="#9ca3af"
:color="isDarkMode ? '#7AC5FF' : '#9ca3af'"
class="eye-icon"
@click="showPassword = !showPassword"
/>
@@ -120,6 +128,8 @@ import { type LoginData } from "@/api/auth";
import { useUserStore } from "@/store/modules/user.store";
import { useToast } from "wot-design-uni";
import { useWechat } from "@/composables/useWechat";
import { useTheme } from "@/composables/useTheme";
import { computed, onMounted } from "vue";
const loginFormRef = ref();
const toast = useToast();
@@ -128,6 +138,10 @@ const userStore = useUserStore();
const showPassword = ref(false);
const loginType = ref<"account" | "phone">("account");
const { authState, getLoginCode, getPhoneNumber } = useWechat();
const { theme } = useTheme();
// 是否暗黑模式
const isDarkMode = computed(() => theme.value === "dark");
// 登录表单数据
const loginFormData = ref<LoginData>({
@@ -143,6 +157,17 @@ onLoad((options) => {
}
});
// 强制清除输入框背景色
onMounted(() => {
setTimeout(() => {
const inputs = document.querySelectorAll("input");
inputs.forEach((input) => {
input.style.backgroundColor = "transparent";
input.style.boxShadow = "none";
});
}, 100);
});
// 账号密码登录处理
const handleAccountLogin = () => {
if (loading.value) return;
@@ -345,8 +370,8 @@ const navigateToPrivacy = () => {
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
.wot-theme-dark & {
background-color: rgba(31, 31, 31, 0.9);
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.3);
background-color: rgba(31, 31, 31, 0.95);
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.5);
}
}
@@ -359,24 +384,64 @@ const navigateToPrivacy = () => {
display: flex;
align-items: center;
padding: 24rpx 0;
background-color: transparent;
.wot-theme-dark & {
background-color: transparent;
}
}
.input-icon {
margin-right: 20rpx;
}
.form-input {
/* 强制所有输入元素为透明背景 */
input,
.form-input,
.input-transparent {
flex: 1;
height: 60rpx;
font-size: 28rpx;
line-height: 60rpx;
color: #333;
background-color: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
.wot-theme-dark & {
color: #f5f5f5;
background-color: transparent !important;
}
}
/* 修复webkit浏览器自动填充问题 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
caret-color: var(--wot-color-text);
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
transition: background-color 5000s;
-webkit-text-fill-color: var(--wot-color-text) !important;
.wot-theme-dark & {
-webkit-text-fill-color: #f5f5f5 !important;
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 31, 0) inset !important;
}
}
/* 尝试通过更强的选择器覆盖自动填充 */
.form-item input,
input.form-input,
input.input-transparent {
-webkit-appearance: none;
background: none !important;
background-color: transparent !important;
border: none !important;
}
.clear-icon,
.eye-icon {
padding: 10rpx;
@@ -388,7 +453,7 @@ const navigateToPrivacy = () => {
background-color: rgba(0, 0, 0, 0.06);
.wot-theme-dark & {
background-color: rgba(255, 255, 255, 0.06);
background-color: rgba(255, 255, 255, 0.15);
}
}
@@ -439,7 +504,7 @@ const navigateToPrivacy = () => {
color: #666;
.wot-theme-dark & {
color: #aaaaaa;
color: #c0c0c0;
}
}
@@ -475,6 +540,10 @@ const navigateToPrivacy = () => {
width: 80rpx;
height: 1rpx;
background-color: rgba(0, 0, 0, 0.1);
.wot-theme-dark & {
background-color: rgba(255, 255, 255, 0.2);
}
}
.text {
@@ -483,7 +552,7 @@ const navigateToPrivacy = () => {
color: rgba(0, 0, 0, 0.4);
.wot-theme-dark & {
color: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 0.6);
}
}
@@ -500,6 +569,10 @@ const navigateToPrivacy = () => {
height: 80rpx;
background-color: #07c160;
border-radius: 50%;
.wot-theme-dark & {
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
}
}
.wechat-icon {
@@ -522,7 +595,33 @@ const navigateToPrivacy = () => {
color: rgba(0, 0, 0, 0.3);
.wot-theme-dark & {
color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.4);
}
}
/* 加强输入框透明度 - 暗黑模式特别处理 */
.wot-theme-dark {
:deep(input) {
background: none !important;
background-color: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.form-input,
input {
background: none !important;
background-color: transparent !important;
background-image: none !important;
}
}
/* 修复Android Chrome输入框背景色问题 */
@supports (-webkit-appearance: none) {
input {
-webkit-appearance: none;
background: transparent !important;
background-color: transparent !important;
}
}
</style>

54
src/static/images/login-bg.svg
View File

@@ -1,28 +1,54 @@
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<!-- 背景渐变 -->
<defs>
<!-- 主背景渐变 - 蓝色系 -->
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#7AC5FF" />
<stop offset="100%" stop-color="#0062E8" />
<stop offset="0%" stop-color="#94BFFF" />
<stop offset="100%" stop-color="#165DFF" />
</linearGradient>
<!-- 图形渐变 -->
<!-- 图形渐变 - 白色半透明 -->
<linearGradient id="shapeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.2" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.08" />
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.3" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.15" />
</linearGradient>
<!-- 底部波浪渐变 -->
<linearGradient id="waveGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.05" />
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.1" />
</linearGradient>
<!-- 为暗黑模式提供的额外效果 -->
<filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="15" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- 透明背景，不完全填充 -->
<!-- 顶部背景 -->
<rect width="100%" height="100%" fill="#1A1A1A" opacity="0" class="dark-mode-bg" />
<rect width="100%" height="50%" fill="url(#bgGradient)" />
<!-- 左侧方块装饰 - 向上移动，避开文字区域 -->
<rect x="100" y="100" width="120" height="120" rx="15" fill="url(#shapeGradient)" transform="rotate(-10, 160, 160)" opacity="0.5" />
<rect x="190" y="40" width="80" height="80" rx="10" fill="url(#shapeGradient)" transform="rotate(15, 230, 80)" opacity="0.4" />
<rect x="60" y="180" width="100" height="100" rx="10" fill="url(#shapeGradient)" transform="rotate(-5, 110, 230)" opacity="0.3" />
<!-- 左侧装饰图形 -->
<rect x="100" y="150" width="120" height="120" rx="15" fill="url(#shapeGradient)" transform="rotate(-10, 160, 210)" opacity="0.7" />
<rect x="190" y="90" width="80" height="80" rx="10" fill="url(#shapeGradient)" transform="rotate(15, 230, 130)" opacity="0.6" />
<rect x="60" y="250" width="100" height="100" rx="10" fill="url(#shapeGradient)" transform="rotate(-5, 110, 300)" opacity="0.5" />
<!-- 右侧圆形装饰 - 向上并向右移动，避开中央区域 -->
<circle cx="800" cy="100" r="60" fill="url(#shapeGradient)" opacity="0.5" />
<circle cx="870" cy="180" r="90" fill="url(#shapeGradient)" opacity="0.3" />
<circle cx="740" cy="200" r="40" fill="url(#shapeGradient)" opacity="0.4" />
<!-- 右侧装饰图形 -->
<circle cx="750" cy="150" r="60" fill="url(#shapeGradient)" opacity="0.7" />
<circle cx="820" cy="230" r="90" fill="url(#shapeGradient)" opacity="0.5" />
<circle cx="690" cy="250" r="40" fill="url(#shapeGradient)" opacity="0.6" />
<!-- 底部波浪形状，适配深色和浅色模式 -->
<path d="M0,900 C200,800 350,950 550,870 C750,790 850,900 1000,850 L1000,1000 L0,1000 Z" fill="url(#waveGradient)" class="wave-light" />
<path d="M0,900 C200,800 350,950 550,870 C750,790 850,900 1000,850 L1000,1000 L0,1000 Z" fill="#1A1A1A" opacity="0" class="wave-dark" />
<style>
@media (prefers-color-scheme: dark) {
.dark-mode-bg { opacity: 1; }
.wave-light { opacity: 0; }
.wave-dark { opacity: 0.7; }
}
</style>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

46
src/styles/dark-mode-fix.scss Normal file
View File

@@ -0,0 +1,46 @@
/**
* 暗黑模式输入框修复
* 强制所有输入框在暗黑模式下保持透明背景
*/
/* 暗黑模式下的输入框 */
.wot-theme-dark {
/* 通用输入框 */
input,
textarea,
[contenteditable="true"] {
color: var(--wot-color-text, #f5f5f5) !important;
background-color: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* 自动填充覆盖 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
background: none !important;
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 31, 0.95) inset !important;
transition: background-color 5000s;
-webkit-text-fill-color: var(--wot-color-text, #f5f5f5) !important;
}
/* 登录页特殊处理 */
.login-card {
input,
.form-input {
background-color: transparent !important;
}
}
}
/* 登录页面特别修复 */
.login-container {
input,
.form-input {
background-color: transparent !important;
border: none !important;
}
}