feat(login): 登录页调整

2025-05-14 14:37:09 +08:00 · 2025-05-14 14:37:09 +08:00 · 10f51a2ff1
parent c13e46855d
commit 10f51a2ff1
8 changed files with 131 additions and 231 deletions
--- a/.env.development
+++ b/.env.development
@ -4,27 +4,11 @@
 # @Author: 王三华
 # @Date: 2023-09-19 10:23:40
 ### 
-~# just a flag
+
 ENV = 'development'

 # base api
 #辉
-VUE_APP_BASE_API = 'http://192.168.31.141:8080'
-
-#敬
-VUE_APP_BASE_API = 'http://192.168.31.137:8080'
-
-#曹
-# VUE_APP_BASE_API = 'http://192.168.31.209:8080'
-
-#开发
-VUE_APP_BASE_API = 'http://p1.hzs413.com/inter-api'
-# VUE_APP_BASE_API = 'https://m.hzs413.com/prod-api'
-
-#隋
-#VUE_APP_BASE_API = 'http://192.168.31.159:8080'
-#VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = '/prod-api'


-#超
-# VUE_APP_BASE_API = 'http://192.168.31.243:8080'
--- a/src/api/login.js
+++ b/src/api/login.js
@ -17,15 +17,9 @@ export const countryQx = (params) => http.get('system/manage/user-country/list',
 export const countryList = (params) => http.get('/system/api/country/list', { params })
 // 切换结算国
 export const changeList = (id) => http.post('/system/manage/user-country/change/' + id)
-//获取语言下拉
-export const getLanguages = (params) => http.get('/system/pub/enums/get-languages', { params })
+
 // 退出登录
 export const logout = () => http.delete('/system/auth/manage/logout')

 //获取菜单路由
 export const getRouters = (params) => http.get('/system/manage/menu/get-routers', { params })
-
-//管理员是否登录短信验证
-export const userCheck = (params) => http.get('/system/auth/manage/user-sms-check', { params })
-//管理员登录发送验证码
-export const userSend = (params) => http.get('/system/auth/manage/user-sms-send', { params })
--- a/src/components/flowQiu.vue
+++ b/src/components/flowQiu.vue
@ -1,15 +1,4 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: 王三华
- * @Date: 2023-10-09 11:34:58
-->
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: kBank
- * @Date: 2022-05-27 16:01:41
-->
+
 <template>
  <view>
    <view id="_drag_button"
@ -29,29 +18,14 @@
        <u-transition :show="isShow"
                      duration="1000"
                      mode="fade">
-          <view class="qiu1"
+          <view class="menu_item"
                @click.stop.prevent="openMenu">菜单</view>
-          <view class="qiu2"
-                @click.stop.prevent="openCountry">切换国家</view>
-          <view class="qiu3"
-                @click.stop.prevent="openLanguage">切换语言</view>
+          
        </u-transition>
      </view>
    </view>
    <!-- 选择国家 -->
-    <u-picker :show="isCountry"
-              :defaultIndex="defaultIndex"
-              @cancel="isCountry = false"
-              @confirm="sureCountry"
-              :columns="countryList"
-              keyName="label"></u-picker>
-    <!-- 选择语言 -->
-    <u-picker :show="isLanguage"
-              :defaultIndex="defaultIndex1"
-              @cancel="isLanguage = false"
-              @confirm="sureLanguage"
-              :columns="languageList"
-              keyName="label"></u-picker>
+    
    <!-- 侧边菜单 -->
    <u-popup :show="isMenu"
             mode="left"
@ -235,50 +209,7 @@ export default {
      uni.setStorageSync('name', item.name)
      uni.redirectTo({ url: item.path })
    },
-    sureLanguage(e) {
-      const { value } = e
-      uni.setStorageSync('lang', value[0].field)
-      this.$i18n.locale = value[0].field
-      window.location.reload()
-    },
-    openLanguage() {
-      api.getLanguages().then((res) => {
-        let data = res.data.map((item) => {
-          return {
-            field: item.field,
-            id: item.value,
-            label: item.label,
-          }
-        })
-        this.languageList = [data]
-        this.languageList[0].forEach((item, index) => {
-          if (item.field == uni.getStorageSync('lang')) {
-            this.defaultIndex1 = [index]
-          }
-        })
-        if (
-          uni.getStorageSync('lang') == undefined ||
-          uni.getStorageSync('lang') == 'undefined' ||
-          uni.getStorageSync('lang') == ''
-        ) {
-          uni.setStorageSync('lang', 'zh-CN')
-        }
-        this.isLanguage = true
-      })
-    },
-    sureCountry(e) {
-      const { value } = e
-      api.changeList(value[0].id).then((res) => {
-        api.getInfo().then((response) => {
-          const data = response
-          uni.setStorageSync('buttons', JSON.stringify(data.buttons))
-          uni.setStorageSync('userInfo', JSON.stringify(data.user))
-          uni.setStorageSync('userAll', JSON.stringify(data))
-          window.location.reload()
-        })
-      })
-      this.isCountry = false
-    },
+    
    openCountry() {
      api.countryQx().then((res) => {
        let data = res.data.map((item) => {
@ -369,7 +300,7 @@ export default {
 .qiu {
  position: relative;
 }
-.qiu1 {
+.menu_item {
  width: 30px;
  height: 30px;
  background: #009b58;
@ -383,42 +314,10 @@ export default {

  padding: 5px;
  position: absolute;
-  left: -40px;
-  top: 0;
+  left: -26px;
+  top: -26px;
 }
-.qiu2 {
-  width: 30px;
-  height: 30px;
-  background: #ffad41;
-  box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
-  border-radius: 50%;
-  font-size: 10px;
-  font-weight: 500;
-  color: #ffffff;
-  // line-height: 30px;
-  text-align: center;
-  position: absolute;
-  left: -10px;
-  top: -40px;
-  padding: 5px;
-}
-.qiu3 {
-  width: 30px;
-  height: 30px;
-  background: #269efe;
-  box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 0.5);
-  border-radius: 50%;
-  font-size: 10px;
-  font-weight: 500;
-  color: #ffffff;
-  // line-height: 30px;
-  text-align: center;
-  position: absolute;
-  left: 35px;
-  top: -40px;

-  padding: 5px;
-}
 .img {
  border-radius: 50%;
  height: 70px;
--- a/src/pages.json
+++ b/src/pages.json
@ -317,7 +317,6 @@
        "navigationBarBackgroundColor": "#fff"
      }
    },
-  
    {
      "path": "pages/settlementCenter/placementData",
      "style": {
@ -330,7 +329,7 @@
      "style": {
        "navigationBarTitleText": "推荐数据",
        "navigationBarBackgroundColor": "#fff"
-      } 
+      }
    },
    {
      "path": "pages/architecture/architecture",
@ -419,7 +418,7 @@
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "全球一体化系统管理平台",
+    "navigationBarTitleText": "系统管理平台",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -1,9 +1,3 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: 王三华
- * @Date: 2023-09-15 10:32:33
-->
 <template>
  <view class="content">
    <view class="header_a">
--- a/src/pages/information/member.vue
+++ b/src/pages/information/member.vue
@ -1,9 +1,3 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: 王三华
- * @Date: 2023-10-09 15:37:13
-->
 <template>
  <view class="content">
    <view class="header_a">
@ -812,6 +806,9 @@ export default {
    this.getAll([0])
  },
  methods: {
+    getColumnVisible(columnName) {
+      return this.menuList.find(item => item.prop === columnName)?.checked
+    },
    isLocalSymbol,
    isLocals,
     // 设置默认日期，最大值为今天，最小值为去年今天
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@ -6,19 +6,17 @@
 -->
 <template>
  <view class="contain">
+    <view class="particles">
+      <view class="particle" v-for="i in 30" :key="i"></view>
+    </view>
    <view class="formed">
-      <view class="methods">
-        <view class="tit1">密码登录</view>
-        <!-- <view>短信登录</view> -->
-      </view>
      <u-form :model="loginForm" labelWidth="auto" :rules="rules" ref="uForm">
        <u-form-item label="" prop="username">
          <u-input
            v-model="loginForm.username"
-            @blur="getCheck"
            class="border-color"
            clearable
-            :placeholder="'会员编号'"
+            :placeholder="'用户账号'"
          >
          </u-input>
        </u-form-item>
@ -47,26 +45,11 @@
            />
          </u-input>
        </u-form-item>
-        <u-form-item label="" prop="smsCode" v-if="ismsgCode">
-          <u-input
-            v-model="loginForm.smsCode"
-            class="border-color1"
-            clearable
-            placeholder="短信验证码"
-          >
-            <view
-              slot="suffix"
-              class="hqyzm1"
-              :class="isSend ? 'hui' : ''"
-              @click="submitForm"
-              >{{ getCode }}</view
-            >
-          </u-input>
-        </u-form-item>
+        
        <u-button
          class="btn"
          @click="handleLogin"
-          color="#C8161D"
+          color="#007AFF"
          shape="circle"
          :text="'登录'"
        ></u-button>
@ -76,7 +59,7 @@
 </template>

 <script>
-import { captchaImage, login, userCheck, userSend } from "@/api/login";
+import { captchaImage, login } from "@/api/login";
 import { setToken } from "@/config/auth.js";

 export default {
@ -120,7 +103,6 @@ export default {
        ],
      },
      ismsgCode: false,
-      isSend: false,
      beginTime: 60,
      getCode: '获取验证码',
      timer: "",
@ -130,47 +112,6 @@ export default {
    this.getVerifyCode();
  },
  methods: {
-    getCheck() {
-      userCheck({
-        userName: this.loginForm.username,
-      }).then((res) => {
-        if (res.data == 0) {
-          this.ismsgCode = true;
-        } else {
-          this.ismsgCode = false;
-        }
-      });
-    },
-    submitForm() {
-      if (!this.isSend) {
-        userSend({
-          userName: this.loginForm.username,
-        }).then((res) => {
-          this.startTime();
-          if (res.code == 200) {
-            uni.showToast({
-              title: res.msg,
-            });
-          }
-        });
-      }
-    },
-    startTime() {
-      if (this.isSend) return;
-      this.isSend = true;
-      this.getCode = this.beginTime + "s后重新发送";
-      let that = this;
-      this.timer = setInterval(() => {
-        this.beginTime--;
-        this.getCode = this.beginTime + "s后重新发送";
-        if (this.beginTime < 0) {
-          clearInterval(this.timer);
-          this.getCode = '获取验证码';
-          this.beginTime = 60;
-          this.isSend = false;
-        }
-      }, 1000);
-    },
    getVerifyCode() {
      captchaImage().then((res) => {
        this.codeUrl = "data:image/gif;base64," + res.img;
@ -198,12 +139,6 @@ export default {
          url: "/pages/index/index",
        });
      });
-      // const data = response
-      // uni.setStorageSync('buttons', JSON.stringify(data.buttons))
-      // uni.setStorageSync('userInfo', JSON.stringify(data.user))
-      // uni.setStorageSync('userAll', JSON.stringify(data))
-
-      // })
    },
  },
 };
@ -211,20 +146,107 @@ export default {

 <style lang="scss" scoped>
 .contain {
-  background: url("@/assets/images/login.png") no-repeat;
-  background-size: cover;
+  background-color: #000C1E; /* 深蓝黑色背景 */
  height: 100vh;
  position: relative;
-  .formed {
-    width: 60%;
-    position: absolute;
-    top: 32%;
-    padding: 0 10rpx;
-    left: 50%;
-    right: 50%;
-    transform: translateX(-50%);
+  overflow: hidden; /* 隐藏溢出的伪元素动画 */
+}
+
+.contain::before, /* 第一个旋转光晕 */
+.contain::after { /* 第二个旋转光晕 */
+  content: '';
+  position: absolute;
+  left: 50%;
+  min-width: 300vw;
+  min-height: 300vw;
+  /* 显著增加光晕的不透明度 */
+  background-color: rgba(0, 100, 200, 0.25); /* 调整光晕颜色和透明度，使其更明显 */
+  animation-name: rotate;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  z-index: 0; /* 确保光晕在最底层 */
+}
+
+.contain::before {
+  bottom: 15vh;
+  border-radius: 45%;
+  animation-duration: 25s; /* 略微调整动画速度 */
+}
+
+.contain::after {
+  bottom: 12vh;
+  /* 直接使用 background-color 的 alpha，移除这里的 opacity 属性，避免双重透明度导致过于透明 */
+  /* opacity: .3; */ 
+  border-radius: 47%;
+  animation-duration: 22s; /* 略微调整动画速度 */
+  background-color: rgba(0, 120, 220, 0.2); /* 第二个光晕也可以有略微不同的颜色/透明度 */
+}
+
+/* 流动的粒子效果 */
+.particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* 不阻挡下方元素交互 */
+  z-index: 1; /* 确保在背景光晕之上，但在表单之下 */
+}
+
+.particle {
+  position: absolute;
+  background-color: rgba(0, 180, 255, 0.6); /* 粒子颜色更明显一些 */
+  border-radius: 50%;
+  /* 移除这里的 base opacity:0，依赖 nth-child 和 animation keyframes */
+  animation: float 20s infinite linear;
+}
+
+@for $i from 1 through 30 { /* 生成30个粒子 */
+  .particle:nth-child(#{$i}) {
+    $size: random(3) + 2px; /* 随机大小 2-4px，让粒子稍大一点 */
+    width: $size;
+    height: $size;
+    left: random(100) * 1%;
+    top: random(100) * 1%;
+    animation-delay: random(20000) * -1ms; /* 随机延迟，使动画错开 */
+    animation-duration: (random(20) + 15) * 1s; /* 随机动画时长 15-35s */
+    opacity: random(40) / 100 + 0.3; /* 初始随机透明度 0.3-0.7 */
  }
 }
+
+@keyframes float {
+  0% {
+    transform: translateY(0vh) translateX(0);
+    opacity: inherit; /* 继承 nth-child 设置的初始透明度 */
+  }
+  50% {
+    opacity: 0.8; /* 动画中途可以更亮 */
+  }
+  100% {
+    transform: translateY(-100vh) translateX(random(100) - 50px); /* 向上漂浮并略微左右移动 */
+    opacity: 0;
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.formed {
+  width: 60%;
+  position: absolute;
+  top: 32%;
+  padding: 0 10rpx;
+  left: 50%;
+  right: 50%;
+  transform: translateX(-50%);
+  z-index: 2; /* 确保表单在粒子效果之上 */
+}
 .methods {
  display: flex;
 }
@ -273,5 +295,6 @@ export default {
 }
 ::v-deep .u-form-item__body__right__message {
  margin-left: 0 !important;
+  color: #ff5555; /* 错误提示颜色调整为更显眼 */
 }
 </style>
--- a/vue.config.js
+++ b/vue.config.js
@ -8,6 +8,16 @@ module.exports = {
  transpileDependencies: ['uview-ui'],
  devServer: {
    open: true,
+    port: 8099,
+    proxy: {
+      '/prod-api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/prod-api': ''
+        }
+      }
+    }
  },
  configureWebpack: {
    externals: {