From a9d053785b297a0df6ebdd2eaea842c0784c7d3b Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期二, 26 八月 2025 10:45:03 +0800
Subject: [PATCH] gx
---
src/views/login/index.vue | 128 ++++++++++++++++++++++++-
.stylelintrc.js | 4
src/views/login/ii.vue | 167 +++++++++++++++++++++++++++++++++
3 files changed, 291 insertions(+), 8 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js
index 3f69bf0..64cf96f 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -5,6 +5,7 @@
"stylelint-scss"
],
"rules": {
+ "keyframes-name-pattern": null,
// http://stylelint.cn/user-guide/rules/
// 要求在 at 规则之后有一个一个空格
"at-rule-name-space-after": "always",
@@ -132,8 +133,7 @@
"no-invalid-double-slash-comments": true,
// 禁止动画名称与 @keyframes 声明不符
- "no-unknown-animations": true,
-
+ "no-unknown-animations": null,
// 禁止数字中的拖尾 0
"number-no-trailing-zeros": true,
diff --git a/src/views/login/ii.vue b/src/views/login/ii.vue
new file mode 100644
index 0000000..86e2fb4
--- /dev/null
+++ b/src/views/login/ii.vue
@@ -0,0 +1,167 @@
+<template>
+ <!-- 医疗风全屏加载 -->
+ <div v-if="isLoading" class="loading-screen">
+ <div class="loading-content">
+ <!-- 自定义Logo容器 -->
+ <div class="logo-container">
+ <img :src="logo" alt="Logo" class="custom-logo">
+ <!-- 可选：添加脉冲光环 -->
+ <div class="pulse-ring primary"></div>
+ <div class="pulse-ring secondary"></div>
+ </div>
+
+ <!-- 标题文字 -->
+ <p class="loading-text">守护健康 · 加载中</p>
+ </div>
+ </div>
+
+ <!-- 主内容 -->
+ <div v-else class="main-content">
+ <h1>欢迎使用智慧医疗系统</h1>
+ <p>为您提供安全、精准、高效的健康服务</p>
+ </div>
+</template>
+
+ <script setup>
+ import { ref, onMounted } from 'vue'
+ import logo from 'assets/logo.png'
+
+ const isLoading = ref(true)
+
+ // 模拟加载过程
+ const simulateLoading = () => {
+ setTimeout(() => {
+ isLoading.value = false
+ }, 2800) // 稍长一点，体现“专业系统启动”感
+ }
+
+ onMounted(() => {
+ simulateLoading()
+ })
+ </script>
+
+ <style scoped>
+ /* 医疗风背景 */
+ .loading-screen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: linear-gradient(140deg, #e6f7ff, #f0fcff, #e0f9f1);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+ font-family: "Helvetica Neue", Arial, sans-serif;
+ }
+
+ .loading-content {
+ text-align: center;
+ }
+
+ /* Logo容器 */
+ .logo-container {
+ position: relative;
+ display: inline-block;
+ }
+
+ /* 自定义Logo样式 */
+ .custom-logo {
+ width: 50px; /* 根据实际Logo大小调整 */
+ animation: fadeIn 1s ease-in-out;
+ }
+
+ /* 脉冲光环（衬托科技感） */
+ .pulse-ring {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ height: 80px;
+ margin-left: -40px;
+ margin-top: -40px;
+ border-radius: 50%;
+ border: 1px solid #00a0e9;
+ opacity: 0;
+ animation: pulse 2s ease-out infinite;
+ }
+
+ .pulse-ring.primary {
+ animation-delay: 0s;
+ }
+
+ .pulse-ring.secondary {
+ animation-delay: 0.6s;
+ border-color: #06c;
+ }
+
+ @keyframes pulse {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0.6;
+ }
+
+ 50% {
+ opacity: 0.2;
+ }
+
+ 100% {
+ transform: scale(1.4);
+ opacity: 0;
+ }
+ }
+
+ /* 加载文字 */
+ .loading-text {
+ color: #06c;
+ font-size: 15px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ line-height: 1.5;
+ opacity: 0.9;
+ animation: fadeInUp 0.8s ease-out;
+ text-shadow: 0 1px 3px rgba(0, 102, 204, 0.1);
+ margin-top: 40px;
+ }
+
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* 主内容区 */
+ .main-content {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ text-align: center;
+ background-color: #f8f9fa;
+ color: #333;
+ font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
+ }
+
+ .main-content h1 {
+ font-size: 22px;
+ color: #06c;
+ margin-bottom: 12px;
+ font-weight: 600;
+ }
+
+ .main-content p {
+ color: #666;
+ font-size: 15px;
+ line-height: 1.6;
+ max-width: 300px;
+ }
+ </style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 3e2a97c..f3a51a0 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -21,6 +21,7 @@
const visible=ref(3)
const seconds=ref(60)
const loadingBUt=ref(false)
+ const isLoading = ref(true)
const ruleForm2=ref({
newPassword:'',
pass:'',
@@ -127,7 +128,14 @@
// userInfo.setInfo({openid:'odFja56xfwSZDHhAEMn-JotSzlRc',nickname:'大橙子',headimgurl:'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJB…ibLYic7qC9cm0Yjia3VkHRPVa12N0OK6dgdz984biceWg/132'})
// Session.set('token', 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJQQVRfU0ZfUEFUOTE0MzE2NDAyMTk1N0pOcUMiLCJhdXRoIjpbeyJhdXRob3JpdHkiOiJhZG1pbiJ9XSwiaWF0IjoxNzUyMDU5ODk0LCJleHAiOjE3NTI0MTk4OTR9.a-Zw910bXendD9Oq7jxjDYfaWLf693maoh7MgAfqK9Y')
// getUserinfo()
- Session.remove('token')
+ // Session.remove('token')
+ // 判断是否有token 和userinfo
+ const token=Session.get('token')
+ if (token && userInfo.info.openid!==''){
+ console.log('已经登录了')
+ getUserinfo()
+ return
+ }
if (isWechat()){
console.log('初始化',route)
const queryInfo=route.query
@@ -142,9 +150,11 @@
ajaxPost('patient/info/wechatLogin','openId='+openId,config).then((re:any)=>{
console.log('openid换的accesstoken=',re)
if (re===''){
+ isLoading.value=false
Toast('请填写表单登录')
} else {
Session.set('token', re)
+ isLoading.value=false
Toast('登录成功')
getUserinfo()
}
@@ -165,6 +175,7 @@
}
} else {
+ isLoading.value=false
console.log('不是微信浏览器')
Dialog.alert({
title: '提示',
@@ -176,7 +187,20 @@
</script>
<template>
- <div class="login">
+ <div v-if="isLoading" class="loading-screen">
+ <div class="loading-content">
+ <!-- 自定义Logo容器 -->
+ <div class="logo-container">
+ <img :src="logo" alt="Logo" class="custom-logo">
+ <!-- 可选：添加脉冲光环 -->
+ <div class="pulse-ring primary"></div>
+ <div class="pulse-ring secondary"></div>
+ </div>
+ <!-- 标题文字 -->
+ <p class="loading-text">守护健康 · 加载中</p>
+ </div>
+ </div>
+ <div v-else class="login">
<div class="titlebiaoti">
<van-image
fit="cover"
@@ -353,7 +377,6 @@
font-weight: 400;
color: #aaa;
- // background: black;
.toptype {
width: 100%;
}
@@ -363,8 +386,6 @@
padding-top: 70px;
text-align: center;
padding-left: 30px;
-
- // border: 1px solid black;
font-size: 15px;
padding-bottom: 70px;
}
@@ -374,7 +395,102 @@
font-weight: 400;
color: #aaa;
height: 50px;
+}
+</style>
+<style scoped>
+/* 医疗风背景 */
+.loading-screen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: linear-gradient(140deg, #e6f7ff, #f0fcff, #e0f9f1);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+ font-family: "Helvetica Neue", Arial, sans-serif;
+}
- // line-height: 50px;
+.loading-content {
+ text-align: center;
+}
+
+/* Logo容器 */
+.logo-container {
+ position: relative;
+ display: inline-block;
+}
+
+/* 自定义Logo样式 */
+.custom-logo {
+ width: 50px; /* 根据实际Logo大小调整 */
+ animation: fadeIn 1s ease-in-out;
+}
+
+/* 脉冲光环（衬托科技感） */
+.pulse-ring {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ height: 80px;
+ margin-left: -40px;
+ margin-top: -40px;
+ border-radius: 50%;
+ border: 1px solid #00a0e9;
+ opacity: 0;
+ animation: pulse 2s ease-out infinite;
+}
+
+.pulse-ring.primary {
+ animation-delay: 0s;
+}
+
+.pulse-ring.secondary {
+ animation-delay: 0.6s;
+ border-color: #06c;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(0.8);
+ opacity: 0.6;
+ }
+
+ 50% {
+ opacity: 0.2;
+ }
+
+ 100% {
+ transform: scale(1.4);
+ opacity: 0;
+ }
+}
+
+/* 加载文字 */
+.loading-text {
+ color: #06c;
+ font-size: 15px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ line-height: 1.5;
+ opacity: 0.9;
+ animation: fadeInUp 0.8s ease-out;
+ text-shadow: 0 1px 3px rgba(0, 102, 204, 0.1);
+ margin-top: 40px;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0