gx

chenyc

2025-08-26 a9d053785b297a0df6ebdd2eaea842c0784c7d3b

gx

 .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,
        

 src/views/login/ii.vue

New file
@@ -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>

 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>