feat: redesign login page, dashboard, fix logo and avatar

- Login: split-screen design with blue gradient branding panel
- Dashboard: replace RuoYi default page with bid system stats & quick actions
- Logo: add object-fit contain for full logo display
- Avatar: replace with blue/gray person silhouette

ruoyi-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,95 +1,46 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' && navType !== 3 ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' && navType !== 3 ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' && navType !== 3 ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
       </router-link>
     </transition>
   </div>
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
+import logoImg from "@/assets/logo/logo.png"
-import variables from '@/assets/styles/variables.scss'
+import variables from "@/assets/styles/variables.scss"
 
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
-  props: {
+  props: { collapse: { type: Boolean, required: true } },
-    collapse: {
-      type: Boolean,
-      required: true
-    }
-  },
   computed: {
-    variables() {
+    variables() { return variables },
-      return variables
+    sideTheme() { return this.$store.state.settings.sideTheme },
+    navType() { return this.$store.state.settings.navType }
   },
-    sideTheme() {
+  data() { return { title: process.env.VUE_APP_TITLE, logo: logoImg } }
-      return this.$store.state.settings.sideTheme
-    },
-    navType() {
-      return this.$store.state.settings.navType
-    }
-  },
-  data() {
-    return {
-      title: process.env.VUE_APP_TITLE,
-      logo: logoImg
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-.sidebarLogoFade-enter-active {
+.sidebarLogoFade-enter-active { transition: opacity 1.5s; }
-  transition: opacity 1.5s;
+.sidebarLogoFade-enter, .sidebarLogoFade-leave-to { opacity: 0; }
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
-  opacity: 0;
-}
-
 .sidebar-logo-container {
-  position: relative;
+  position: relative; height: 50px; line-height: 50px;
-  height: 50px;
+  background: #2b2f3a; text-align: center; overflow: hidden;
-  line-height: 50px;
+  .sidebar-logo-link {
-  background: #2b2f3a;
+    height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none;
-  text-align: center;
+    .sidebar-logo { width: 34px; height: 34px; object-fit: contain; margin-right: 10px; flex-shrink: 0; }
-  overflow: hidden;
+    .sidebar-title { display: inline-block; margin: 0; color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
-
-    & .sidebar-logo {
-      width: 32px;
-      height: 32px;
-      vertical-align: middle;
-      margin-right: 12px;
-    }
-
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-    }
-  }
-
-  &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
-    }
   }
 }
+.sidebar-logo-container.collapse .sidebar-logo-link { justify-content: center; }
+.sidebar-logo-container.collapse .sidebar-logo { margin-right: 0 !important; }
 </style>

ruoyi-ui/src/views/login.vue

@@ -1,15 +1,52 @@
 <template>
-  <div class="login">
+  <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <!-- Left branding panel -->
-      <h3 class="title">{{title}}</h3>
+    <div class="login-left">
+      <div class="brand-wrap">
+        <div class="brand-logo-box">
+          <img src="@/assets/logo/logo.png" class="brand-logo-img" alt="logo" />
+        </div>
+        <h1 class="brand-name">福安德智慧报价平台</h1>
+        <p class="brand-slogan">高效 · 精准 · 智能采购管理</p>
+        <div class="brand-features">
+          <div class="feature-row">
+            <i class="el-icon-price-tag"></i>
+            <span>智慧比价，一键找最优报价</span>
+          </div>
+          <div class="feature-row">
+            <i class="el-icon-s-cooperation"></i>
+            <span>全流程供应商协同管理</span>
+          </div>
+          <div class="feature-row">
+            <i class="el-icon-data-analysis"></i>
+            <span>采购数据可视化分析</span>
+          </div>
+        </div>
+      </div>
+      <div class="brand-circles">
+        <div class="circle c1"></div>
+        <div class="circle c2"></div>
+        <div class="circle c3"></div>
+      </div>
+    </div>
+
+    <!-- Right form panel -->
+    <div class="login-right">
+      <div class="form-card">
+        <div class="form-header">
+          <h2 class="form-title">欢迎登录</h2>
+          <p class="form-subtitle">福安德智慧报价系统</p>
+        </div>
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on">
           <el-form-item prop="username">
             <el-input
               v-model="loginForm.username"
               type="text"
               auto-complete="off"
-          placeholder="账号"
+              placeholder="请输入账号"
+              size="medium"
             >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+              <i slot="prefix" class="el-input__icon el-icon-user" />
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
@@ -17,46 +54,47 @@
               v-model="loginForm.password"
               type="password"
               auto-complete="off"
-          placeholder="密码"
+              placeholder="请输入密码"
+              size="medium"
               @keyup.enter.native="handleLogin"
             >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+              <i slot="prefix" class="el-input__icon el-icon-lock" />
             </el-input>
           </el-form-item>
           <el-form-item prop="code" v-if="captchaEnabled">
+            <div class="code-row">
               <el-input
                 v-model="loginForm.code"
                 auto-complete="off"
                 placeholder="验证码"
-          style="width: 63%"
+                size="medium"
                 @keyup.enter.native="handleLogin"
               >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                <i slot="prefix" class="el-input__icon el-icon-key" />
               </el-input>
-        <div class="login-code">
+              <div class="code-img-box" @click="getCode">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+                <img :src="codeUrl" class="code-img" />
+              </div>
             </div>
           </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+          <el-form-item>
-      <el-form-item style="width:100%;">
+            <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+          </el-form-item>
+          <el-form-item>
             <el-button
               :loading="loading"
-          size="medium"
               type="primary"
-          style="width:100%;"
+              size="medium"
+              style="width: 100%;"
               @click.native.prevent="handleLogin"
             >
-          <span v-if="!loading">登 录</span>
+              <span v-if="!loading">登&nbsp;&nbsp;录</span>
-          <span v-else>登 录 中...</span>
+              <span v-else>登录中...</span>
             </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
           </el-form-item>
         </el-form>
-    <!--  底部  -->
+      </div>
-    <div class="el-login-footer">
+      <div class="right-footer">{{ footerContent }}</div>
-      <span>{{ footerContent }}</span>
     </div>
   </div>
 </template>
@@ -64,8 +102,8 @@
 <script>
 import { getCodeImg } from "@/api/login"
 import Cookies from "js-cookie"
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt"
-import defaultSettings from '@/settings'
+import defaultSettings from "@/settings"
 
 export default {
   name: "Login",
@@ -82,18 +120,12 @@ export default {
         uuid: ""
       },
       loginRules: {
-        username: [
+        username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+        password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
-        ],
         code: [{ required: true, trigger: "change", message: "请输入验证码" }]
       },
       loading: false,
-      // 验证码开关
       captchaEnabled: true,
-      // 注册开关
       register: false,
       redirect: undefined
     }
@@ -123,7 +155,7 @@ export default {
     getCookie() {
       const username = Cookies.get("username")
       const password = Cookies.get("password")
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe")
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password: password === undefined ? this.loginForm.password : decrypt(password),
@@ -137,14 +169,14 @@ export default {
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 })
             Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
+            Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 })
           } else {
             Cookies.remove("username")
             Cookies.remove("password")
-            Cookies.remove('rememberMe')
+            Cookies.remove("rememberMe")
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
+            this.$router.push({ path: this.redirect || "/" }).catch(() => {})
           }).catch(() => {
             this.loading = false
             if (this.captchaEnabled) {
@@ -158,66 +190,179 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
-.login {
+.login-container {
   display: flex;
-  justify-content: center;
+  height: 100vh;
-  align-items: center;
+  overflow: hidden;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
 }
-.title {
+
-  margin: 0px auto 30px auto;
+/* ---- Left panel ---- */
+.login-left {
+  flex: 0 0 55%;
+  position: relative;
+  background: linear-gradient(135deg, #0d2b6b 0%, #1171c4 55%, #22a4ff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.brand-wrap {
+  position: relative;
+  z-index: 2;
   text-align: center;
-  color: #707070;
+  padding: 40px;
+}
+
+.brand-logo-box {
+  width: 90px;
+  height: 90px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 24px;
+  backdrop-filter: blur(4px);
+}
+
+.brand-logo-img {
+  width: 60px;
+  height: 60px;
+  object-fit: contain;
+}
+
+.brand-name {
+  color: #ffffff;
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 10px;
+  letter-spacing: 2px;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+.brand-slogan {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 15px;
+  margin: 0 0 40px;
+  letter-spacing: 4px;
+}
+
+.brand-features {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  text-align: left;
+  display: inline-block;
+}
+
+.feature-row {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  i {
+    font-size: 18px;
+    color: #a8d8ff;
+  }
+}
+
+/* Decorative circles */
+.brand-circles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+}
+.c1 { width: 400px; height: 400px; bottom: -120px; left: -100px; }
+.c2 { width: 250px; height: 250px; top: -60px; right: -60px; }
+.c3 { width: 150px; height: 150px; top: 40%; right: 10%; background: rgba(255,255,255,0.04); }
+
+/* ---- Right panel ---- */
+.login-right {
+  flex: 1;
+  background: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.form-card {
+  width: 400px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 40px 40px 32px;
+  box-shadow: 0 8px 32px rgba(17, 113, 196, 0.10);
+}
+
+.form-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.form-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a2c4e;
+  margin: 0 0 6px;
+}
+
+.form-subtitle {
+  font-size: 13px;
+  color: #8c97a8;
+  margin: 0;
 }
 
 .login-form {
-  border-radius: 6px;
+  .el-form-item {
-  background: #ffffff;
+    margin-bottom: 20px;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  z-index: 1;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
   }
-  }
+  .el-input__inner {
-  .input-icon {
+    height: 42px;
-    height: 39px;
+    border-radius: 8px;
-    width: 14px;
-    margin-left: 2px;
   }
 }
-.login-tip {
+
-  font-size: 13px;
+.code-row {
-  text-align: center;
+  display: flex;
-  color: #bfbfbf;
+  gap: 12px;
+  align-items: center;
+  .el-form-item, .el-input {
+    flex: 1;
+  }
 }
-.login-code {
+
-  width: 33%;
+.code-img-box {
-  height: 38px;
+  flex-shrink: 0;
-  float: right;
-  img {
   cursor: pointer;
-    vertical-align: middle;
+  border-radius: 6px;
-  }
+  overflow: hidden;
+  height: 42px;
+  display: flex;
+  align-items: center;
 }
-.el-login-footer {
+
-  height: 40px;
+.code-img {
-  line-height: 40px;
+  height: 42px;
-  position: fixed;
+  width: 120px;
-  bottom: 0;
+  object-fit: cover;
-  width: 100%;
+  display: block;
-  text-align: center;
+}
-  color: #fff;
+
-  font-family: Arial;
+.right-footer {
+  position: absolute;
+  bottom: 20px;
   font-size: 12px;
-  letter-spacing: 1px;
+  color: #b0bac6;
-}
+  letter-spacing: 0.5px;
-.login-code-img {
-  height: 38px;
 }
 </style>