登录平台选择和登录界面

.env.dev

@@ -12,7 +12,7 @@ VITE_ROUTER_BASE=/
 VITE_ROUTER_HISTORY=hash
 
 # api
-VITE_API_BASIC='http://10.10.1.6:8040'
+VITE_API_BASIC='http://10.10.1.39:8040'
 VITE_API_HTTP=/api/v1/
 # storage
 VITE_STORAGE_NAMESPACE = gin-admin_local_

config/useServer.js

@@ -3,7 +3,7 @@ export default () => ({
     port: 8080,
     proxy: {
         '/api': {
-            target: 'http://101.42.232.163:8080/api',
+            target: 'http://10.10.1.39:8040/api',
             // target: 'http://127.0.0.1:8045/api',
             changeOrigin: true,
             rewrite: (path) => path.replace('/api', ''),

src/components/StartBackground/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="stars">
+    <div
+      v-for="(star, index) in starsCount"
+      :key="index"
+      class="star"
+      ref="starRefs"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUpdate } from 'vue'
+
+// 配置参数
+const starsCount = 1200
+const distance = 800
+
+// 引用所有 star 元素
+const starRefs = ref([])
+
+// 初始化星星
+const initStars = () => {
+  const stars = starRefs.value
+  if (!stars || stars.length === 0) return
+
+  stars.forEach(item => {
+    const speed = 0.2 + Math.random() * 1
+    const thisDistance = distance + Math.random() * 300
+
+    // 设置 3D 变换属性
+    item.style.transformOrigin = `0 0 ${thisDistance}px`
+    item.style.transform = `
+      translate3d(0, 0, -${thisDistance}px)
+      rotateY(${Math.random() * 360}deg)
+      rotateX(${Math.random() * -50}deg)
+      scale(${speed}, ${speed})
+    `.replace(/\s+/g, ' ') // 清理多余空格
+  })
+}
+
+// 组件挂载后初始化
+onMounted(() => {
+  initStars()
+})
+
+// 注意：由于 v-for 中使用 ref，需要在每次更新前清空引用
+// 否则 starRefs.value 可能不是最新数组
+onBeforeUpdate(() => {
+  starRefs.value = []
+})
+</script>
+
+<style scoped lang="less">
+@keyframes rotate {
+  0% {
+    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
+  }
+  100% {
+    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
+  }
+}
+
+.stars {
+  transform: perspective(500px);
+  transform-style: preserve-3d;
+  position: absolute;
+  perspective-origin: 50% 100%;
+  left: 50%;
+  animation: rotate 90s infinite linear;
+  bottom: -200px;
+}
+
+.star {
+  width: 2px;
+  height: 2px;
+  background: #f7f7b8;
+  position: absolute;
+  top: 0;
+  left: 0;
+  backface-visibility: hidden;
+}
+</style>

src/router/config.js

@@ -3,7 +3,7 @@ import * as layouts from '@/layouts'
  * 白名单
  * @type {string[]}
  */
-export const whiteList = ['login', 'logout', '404', 'users','plateform']
+export const whiteList = ['login', 'logout', '404', 'users','plateform'] // no redirect whitelist
 
 /**
  * 未找到页面路由
@@ -41,18 +41,18 @@ export const constantRoutes = [
                     title: '登录',
                 },
             },
-            {
-                path: '/plateform',
-                name: 'plateform',
-                component: () => import('@/views/login/platForm.vue'),
-                meta: {
-                    title: '平台选择',
-                },
-            },
         ],
     },
     {
         path: '/404',
         component: () => import('@/views/exception/404.vue'),
     },
+    {
+        path: '/plateform',
+        name: 'plateform',
+        component: () => import('@/views/login/platForm.vue'),
+        meta: {
+            title: '平台选择',
+        },
+    },
 ]

src/router/routes/index.js

@@ -1,25 +1,25 @@
 import home from './home'
-import form from './form'
+// import form from './form'
-import list from './list'
+// import list from './list'
-import profile from './profile'
+// import profile from './profile'
-import result from './result'
+// import result from './result'
-import exception from './exception'
+// import exception from './exception'
 // import admin from './admin'
 import system from './system'
-import link from './link'
+// import link from './link'
-import iframe from './iframe'
+// import iframe from './iframe'
-import other from './other'
+// import other from './other'
 
 export default [
     ...home,
-    ...form,
+    // ...form,
-    ...list,
+    // ...list,
-    ...profile,
+    // ...profile,
-    ...result,
+    // ...result,
-    ...exception,
+    // ...exception,
     // ...admin,
     ...system,
-    ...link,
+    // ...link,
-    ...iframe,
+    // ...iframe,
-    ...other,
+    // ...other,
 ]

src/views/login/platForm.vue

@@ -1,19 +1,77 @@
 <template>
-     <div class="user-layout-platform">
+    <div class="layout-container">
-                <div v-for="value in plateformList" :key="value.title" class="platform-item">
+        <StarBackground />
-                    <img :src="value.icon" alt="" />
+        <div class="top">
-                    <span>{{ value.title }}</span>
+            <div>
+                <span class="corner corner-top"></span>
+                <span class="corner corner-left"></span>
+                <span class="corner corner-bottom"></span>
+                <span class="corner corner-right"></span>
+                <span class="corner-main">
+                    <i aria-label="图标: logout" class="anticon anticon-logout"
+                        style="font-size: 18px; vertical-align: middle; padding-right: 5px;">
+                        <svg viewBox="64 64 896 896" data-icon="logout" width="1em" height="1em" fill="currentColor"
+                            aria-hidden="true" focusable="false" class="">
+                            <path
+                                d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 0 1-112.7 75.9A352.8 352.8 0 0 1 512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 0 1-112.7-75.9 353.28 353.28 0 0 1-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z">
+                            </path>
+                        </svg></i> 退出登录 </span>
+            </div>
+        </div>
+        <div data-v-72f3b8ba="" class="container">
+            <div data-v-72f3b8ba="" class="user-layout-content">
+                <div data-v-72f3b8ba="" class="qt">
+                    <div data-v-343b0500="" data-v-72f3b8ba="" class="bg">
+                        <div class="content_bg" style="filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 10px);">
+                            <div class="paltform_title">
+                                <span>
+                                    <!-- <i class="corner corner-top"></i>
+                                    <i class="corner corner-left"></i>
+                                    <i class="corner corner-bottom"></i>
+                                    <i class="corner corner-right"></i> -->
+                                    <span>南通市通州区互联网+智慧养老居家上门服务项目</span>
+                                </span>
+                            </div>
+                            <div class="paltform_list">
+                                <div value="CALL_CENTER" class="paltform_icon">
+                                    <div class="paltform_icon_1">
+                                        <img :src="tel" alt="" srcset="" width="76" height="76" class="img">
+                                    </div>
+                                    <p>呼叫中心</p>
+                                </div>
+                                <div value="SUPERVISION" class="paltform_icon">
+                                    <div class="paltform_icon_1">
+                                        <img :src="jianguan" alt="" srcset="" width="70" height="70" >
+                                    </div>
+                                    <p>监管平台</p>
+                                </div>
+                                <div value="HOME_BED" class="paltform_icon">
+                                    <div class="paltform_icon_1">
+                                         <img :src="yunying" alt="" srcset="" width="76" height="76">
+                                    </div>
+                                    <p>运营平台</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
+        </div>
+    </div>
 </template>
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, onBeforeMount } from 'vue'
-import tel from '@/assets/imgs/tel.png'
+import StarBackground from '@/components/StartBackground/index.vue'
-import jianguan from '@/assets/imgs/jianguan.png'
+import tel from '@/assets/imgs/tel2.png'
+import jianguan from '@/assets/imgs/jianguan3.png'
 import yunying from '@/assets/imgs/yunying.png'
 defineOptions({
     name: 'login',
 })
+// 在组件挂载前设置 body 类名
+onBeforeMount(() => {
+    document.body.className = 'body-bg'
+})
 const plateformList = ref([
     { title: '呼叫中心', icon: tel },
     { title: '监管平台', icon: jianguan },
@@ -21,35 +79,314 @@ const plateformList = ref([
 ])
 </script>
 <style lang="less" scoped>
+.body-bg {
+    background-attachment: fixed;
+    overflow: hidden;
+}
 
-.user-layout-platform {
+// .login-container {
-    margin: 0 auto;
+//   height: 100vh;        // 推荐使用 100vh 而不是 100%，确保占满视口
-    display: flex;
+//   width: 100vw;
-    justify-content: space-around;
+//   overflow: hidden;
-    align-items: center;
+//   background-color: #050608;
-    gap: 20px;
+//   position: relative;
+// }
+.layout-container {
     width: 100%;
-    .platform-item {
+    height: 100vh;
-        display: flex;
+    overflow: hidden;
-        flex-direction: column;
+    background-color: #050608;
-        align-items: center;
+    position: relative;
-        width: 200px;
+    display: flex;
-        flex-shrink: 0; /* 防止元素被压缩 */
+    justify-content: center;
-        background: #415172;
+    align-items: center;
-        border-radius: 8px;
+    // background: url('@/assets/imgs/plat-bg.png') no-repeat center;
-        font-size: 20px;
+    background-size: cover;
-        font-weight: 600;
-        color: #fff;
 
-        img {
+    .top {
-            width: 80px;
+        width: 100%;
-            height: 80px;
+        height: 80px;
-            margin-bottom: 10px;
+        background: -webkit-gradient(linear, left top, left bottom, from(#0a063a), to(hsla(0, 0%, 100%, 0)));
+        background: linear-gradient(180deg, #0a063a, hsla(0, 0%, 100%, 0));
+        position: fixed;
+        top: 0;
+        overflow: hidden;
+        z-index: 999;
+
+        &>div {
+            width: 120px;
+            height: 36px;
+            text-align: center;
+            line-height: 36px;
+            position: absolute;
+            top: 20px;
+            right: 50px;
+            cursor: pointer;
+            color: #fff;
+            z-index: 0;
+
+            .corner {
+                position: absolute;
+                width: 10px;
+                height: 10px;
+                border: 3px solid #58c7ee;
+                -webkit-transition: all .4s ease-out;
+                transition: all .4s ease-out;
+                border-radius: 2px;
+            }
+
+            .corner-top {
+                top: 0;
+                left: 0;
+                border: 3px solid #0542a6;
+                border-bottom: none;
+                border-right: none;
+            }
+
+            .corner-left {
+                bottom: 0;
+                left: 0;
+                border-top: none;
+                border-right: none;
+            }
+
+            .corner-bottom {
+                bottom: 0;
+                right: 0;
+                border: 3px solid #0542a6;
+                border-top: none;
+                border-left: none;
+            }
+
+            .corner-right {
+                top: 0;
+                right: 0;
+                border-bottom: none;
+                border-left: none;
+            }
+        }
+    }
+
+    .container {
+        width: 80%;
+        margin: 0 auto;
+        min-height: 100%;
+        background-size: 100%;
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+
+        .user-layout-content {
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            padding: 0 0 24px;
+
+            .qt {
+                height: 100%;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                align-items: center;
+                -webkit-box-orient: vertical;
+                -webkit-box-direction: normal;
+                -ms-flex-direction: column;
+                flex-direction: column;
+                padding-top: 8%;
+
+                .bg {
+                    width: 100%;
+
+                    .content_bg {
+                        display: -webkit-box;
+                        display: -ms-flexbox;
+                        display: flex;
+                        -webkit-box-pack: center;
+                        -ms-flex-pack: center;
+                        justify-content: center;
+                        -webkit-box-orient: vertical;
+                        -webkit-box-direction: normal;
+                        -ms-flex-direction: column;
+                        flex-direction: column;
+
+                        .paltform_title {
+                            min-height: 87px;
+                            text-align: center;
+                            line-height: 87px;
+
+                            &>span {
+                                // font-family: YouSheBiaoTiHei;
+                                font-weight: bold;
+                                font-size: 48px;
+                                color: #fff;
+                                text-shadow: 0 2px 4px #215dcb;
+                                position: relative;
+                                display: inline-block;
+                                min-width: 100px;
+                                min-height: 80px;
+                                font-style: italic;
+
+                                .corner {
+                                    position: absolute;
+                                    width: 45px;
+                                    height: 45px;
+                                    border: 5px solid #58c7ee;
+                                    -webkit-transition: all .4s ease-out;
+                                    transition: all .4s ease-out;
+                                    border-radius: 2px;
+                                }
+
+                                .corner-top {
+                                    top: -10px;
+                                    left: -30px;
+                                    border-bottom: none;
+                                    border-right: none;
+                                }
+
+                                .corner-left {
+                                    bottom: -10px;
+                                    left: -30px;
+                                    border-top: none;
+                                    border-right: none;
+                                }
+
+                                .corner-bottom {
+                                    bottom: -10px;
+                                    right: -30px;
+                                    border: 5px solid #0542a6;
+                                    border-top: none;
+                                    border-left: none;
+                                }
+
+                                .corner-right {
+                                    top: -10px;
+                                    right: -30px;
+                                    border: 5px solid #0542a6;
+                                    border-bottom: none;
+                                    border-left: none;
+                                }
+                            }
+                        }
+
+                        .paltform_list {
+                            webkit-box-align: center;
+                            align-items: center;
+                            display: -webkit-box;
+                            display: -ms-flexbox;
+                            display: flex;
+                            -webkit-box-pack: center;
+                            justify-content: center;
+                            margin-top: 30px;
+
+                            .paltform_icon {
+                                display: flex;
+                                align-items: center;
+                                -webkit-box-flex: 0;
+                                -ms-flex: 0 0 16%;
+                                flex: 0 0 16%;
+                                height: 200px;
+                                background: rgba(255, 255, 255, .2);
+                                border-radius: 8px;
+                                font-size: 20px;
+                                font-weight: 600;
+                                color: #fff;
+                                -ms-flex-pack: center;
+                                -ms-flex-align: center;
+                                -ms-flex-pack: distribute;
+                                justify-content: space-around;
+                                -webkit-box-orient: vertical;
+                                -webkit-box-direction: normal;
+                                -ms-flex-direction: column;
+                                flex-direction: column;
+                                -webkit-transition: all 2s ease;
+                                transition: all 2s ease;
+                                cursor: pointer;
+                                position: relative;
+                                z-index: 1;
+                                margin: 20px;
+
+                                &>.paltform_icon_1 {
+                                    width: 120px;
+                                    height: 120px;
+                                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABfCAYAAACOTBv1AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAX6ADAAQAAAABAAAAXwAAAAB1MuhLAAABVElEQVR4Ae3dQQ7CIBAAwK7xdfoP+yb9h35vpQc8SbEJaQ8OJwLbpRlIuzfilpnTSotpet0jrishpr4IzJnPAnv5MvUZOn16jU5JsLo5jccM/yAQ9eQ/Isoh1/YQqObdk7/Hy/zrGvAP3Hn48A8UOHDp81JKqmj23QHm+3pbjQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIQIxZz6XTPeI65CMknQFqvm5XER86UYLGCpQzd2BPpR1WzL427yGRsMfyrktGfxtXkOj45ZZvv/tttxUrxJq+7Rmloqm/lhbMd2TXxKsbk4rsfG+wBs+Ey1cwCcnYAAAAABJRU5ErkJggg==) no-repeat 50%;
+                                    display: -webkit-box;
+                                    display: -ms-flexbox;
+                                    display: flex;
+                                    -webkit-box-pack: center;
+                                    -ms-flex-pack: center;
+                                    justify-content: center;
+                                    -webkit-box-align: center;
+                                    -ms-flex-align: center;
+                                    align-items: center;
+
+                                    .img {
+                                        width: 76px;
+                                        height: 76px;
+                                    }
+                                }
+                            }
+
+                            .paltform_icon::before {
+                                content: "";
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                                background: -webkit-gradient(linear, left top, left bottom, from(#2af3f5), to(#054cb6));
+                                background: linear-gradient(180deg, #2af3f5, #054cb6);
+                                border-radius: 8px;
+                                z-index: -1;
+                                opacity: 0;
+                                -webkit-transform: scale3d(.5, .5, .5);
+                                transform: scale3d(.5, .5, .5);
+                                -webkit-transition: opacity .4s, -webkit-transform .4s;
+                                transition: opacity .4s, -webkit-transform .4s;
+                                transition: transform .4s, opacity .4s;
+                                transition: transform .4s, opacity .4s, -webkit-transform .4s;
+
+                            }
+                        }
+                    }
+                }
+            }
         }
 
-        span {
+        .user-layout-platform {
-            font-size: 16px;
+            margin: 0 auto;
-            font-weight: 500;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            gap: 20px;
+            width: 100%;
+
+            .platform-item {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                width: 200px;
+                flex-shrink: 0;
+                /* 防止元素被压缩 */
+                background: #415172;
+                border-radius: 8px;
+                font-size: 20px;
+                font-weight: 600;
+                color: #fff;
+
+                img {
+                    width: 80px;
+                    height: 80px;
+                    margin-bottom: 10px;
+                }
+
+                span {
+                    font-size: 16px;
+                    font-weight: 500;
+                }
+            }
         }
     }
 }