生产管理-监控监测-设备管理

chenhai-ui/src/components/visual/jkjc.vue

@@ -616,6 +616,8 @@
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
+  align-items: stretch;
+  
   .col-left, .col-right {
     flex: 1.1;
     min-width: 280px;
@@ -639,11 +641,15 @@
   border: 1.5px solid rgba(52, 152, 219, 0.7);
   overflow: hidden;
   transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  
   &:hover {
     border-color: #5dade2;
     box-shadow: 0 4px 20px rgba(52, 152, 219, 0.25);
     background: rgba(52, 152, 219, 0.05);
   }
+  
   .card-header {
     padding: 14px 20px;
     border-bottom: 1px solid rgba(52, 152, 219, 0.4);
@@ -652,6 +658,8 @@
     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
+    flex-shrink: 0;
+    
     .title {
       font-size: 16px;
       font-weight: 600;
@@ -761,9 +769,13 @@
 
 // 预警列表
 .alert-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  
   .alert-list {
     padding: 8px 16px;
-      max-height: 280px;
+    flex: 1;
     overflow-y: auto;
     .alert-item {
       display: flex;
@@ -855,8 +867,12 @@
 
 // 骆驼列表
 .camel-list-card {
+  display: flex;
+  flex-direction: column;
+  
   .camel-search {
     padding: 12px 16px;
+    flex-shrink: 0;
     .search-input {
       width: 100%;
       background: rgba(0, 0, 0, 0.4);
@@ -879,8 +895,9 @@
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
     padding: 16px;
-      max-height: 280px;
+    flex: 1;
     overflow-y: auto;
+    max-height: 280px;
     .camel-item {
       background: rgba(0, 0, 0, 0.3);
       border: 1px solid rgba(52, 152, 219, 0.4);
@@ -949,7 +966,15 @@
 
 // 健康报告
 .health-report-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  
   .health-report {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    
     .report-header {
       display: flex;
       align-items: center;
@@ -957,6 +982,7 @@
       padding: 20px;
       background: rgba(0, 0, 0, 0.2);
       border-bottom: 1px solid rgba(52, 152, 219, 0.3);
+      flex-shrink: 0;
       .camel-avatar-large {
         font-size: 48px;
       }
@@ -994,6 +1020,7 @@
     }
     .report-metrics {
       padding: 16px;
+      flex-shrink: 0;
       .metric-row {
         display: flex;
         gap: 20px;
@@ -1040,6 +1067,8 @@
     .report-timeline {
       padding: 16px;
       border-top: 1px solid rgba(52, 152, 219, 0.3);
+      flex: 1;
+      overflow-y: auto;
       .timeline-title {
         font-size: 13px;
         font-weight: 500;
@@ -1070,11 +1099,15 @@
         }
       }
     }
-
   }
   .no-selection {
     text-align: center;
     padding: 60px 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     .placeholder-icon {
       font-size: 64px;
       opacity: 0.5;

chenhai-ui/src/components/visual/sbgl.vue

@@ -788,7 +788,7 @@ export default {
       }
       .thumb-img {
         width: 100%;
-        height: 80px;
+        height: 120px;
         object-fit: cover;
       }
       .thumb-label {

chenhai-ui/src/views/login.vue

@@ -1,17 +1,36 @@
 <template>
   <div class="login">
+    <!-- 背景装饰元素：营造牧场/田野氛围 -->
+    <!-- <div class="bg-decorations">
+      <div class="sun"></div>
+      <div class="cloud cloud1"></div>
+      <div class="cloud cloud2"></div>
+      <div class="grass grass-left"></div>
+      <div class="grass grass-right"></div>
+      <div class="cattle-icon cattle1">🐮</div>
+      <div class="cattle-icon cattle2">🐄</div>
+    </div> -->
+
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+      <!-- 品牌区域 -->
+      <div class="brand-area">
+        <div class="logo-icon">🐫</div>
         <h3 class="title">{{ title }}</h3>
+        <p class="subtitle">智慧牧场 · 轻松管理</p>
+      </div>
+
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
           type="text"
           auto-complete="off"
-          placeholder="账号"
+          placeholder="账号 / 手机号"
+          class="custom-input"
         >
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
+
       <el-form-item prop="password">
         <el-input
           v-model="loginForm.password"
@@ -19,45 +38,37 @@
           auto-complete="off"
           placeholder="密码"
           @keyup.enter.native="handleLogin"
+          class="custom-input"
         >
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-      <!-- <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+
+      <!-- 选项栏：记住密码 + 立即注册 -->
+      <div class="options-bar">
+        <el-checkbox v-model="loginForm.rememberMe" class="remember-checkbox">记住密码</el-checkbox>
+        <router-link v-if="register" class="register-link" to="/register">立即注册</router-link>
       </div>
-      </el-form-item> -->
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+
       <el-form-item style="width:100%;">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          class="login-btn"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</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 class="el-login-footer">
+    <!-- <div class="el-login-footer">
       <span>{{ footerContent }}</span>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -71,7 +82,7 @@ export default {
   name: "Login",
   data() {
     return {
-      title: process.env.VUE_APP_TITLE,
+      title: '阿右旗阿拉腾敖包镇骆驼产业标准化智慧化示范基地数据中心',
       footerContent: defaultSettings.footerContent,
       codeUrl: "",
       loginForm: {
@@ -88,14 +99,12 @@ export default {
         password: [
           { required: true, trigger: "blur", message: "请输入您的密码" }
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
       },
       loading: false,
-      // 验证码开关
       captchaEnabled: true,
-      // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      showDemoTip: true  // 控制演示提示显示，可自行关闭
     }
   },
   watch: {
@@ -144,7 +153,6 @@ export default {
             Cookies.remove('rememberMe')
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            // this.$router.push({ path: this.redirect || "/Home" }).catch(()=>{})
             this.$router.push({ path: "/Home" }).catch(() => { });
           }).catch(() => {
             this.loading = false
@@ -160,65 +168,300 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+// 颜色变量 - 驼场主题色（自然、大地、清新）
+$primary-color: #7c9a3e;      // 草绿色主色调
+$primary-hover: #5c7a2e;      // 深草绿
+$bg-overlay: rgba(0, 0, 0, 0.3);
+$text-dark: #2c3a1f;
+$text-light: #6b7a5a;
+$card-white: rgba(255, 255, 255, 0.96);
+$shadow-sm: 0 20px 35px -10px rgba(0, 0, 0, 0.2);
+$shadow-focus: 0 0 0 3px rgba(124, 154, 62, 0.2);
+
 .login {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100vh;
+  min-height: 500px;
+  background: linear-gradient(135deg, #2b5e2b 0%, #8cb36b 50%, #d4c9a3 100%);
+  overflow: hidden;
+
+  // 动态装饰背景
+  .bg-decorations {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
+    pointer-events: none;
+    z-index: 0;
   }
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+
+  // 太阳
+  .sun {
+    position: absolute;
+    top: 8%;
+    right: 5%;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, #ffdf8c, #ffb347);
+    border-radius: 50%;
+    box-shadow: 0 0 50px rgba(255, 180, 70, 0.6);
+    animation: float 8s infinite ease-in-out;
+  }
+
+  // 云朵
+  .cloud {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 1000px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+    
+    &::before, &::after {
+      content: '';
+      position: absolute;
+      background: inherit;
+      border-radius: 50%;
+    }
+  }
+  .cloud1 {
+    top: 12%;
+    left: -50px;
+    width: 160px;
+    height: 70px;
+    &::before { width: 60px; height: 60px; top: -30px; left: 20px; }
+    &::after { width: 80px; height: 80px; top: -40px; left: 70px; }
+    animation: drift 22s infinite linear;
+  }
+  .cloud2 {
+    bottom: 15%;
+    right: -30px;
+    width: 200px;
+    height: 85px;
+    &::before { width: 70px; height: 70px; top: -35px; left: 20px; }
+    &::after { width: 90px; height: 90px; top: -45px; left: 85px; }
+    animation: drift 28s infinite reverse linear;
+  }
+
+  // 草地剪影
+  .grass {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 80px;
+    background: repeating-linear-gradient(45deg, #4c6a2c, #4c6a2c 30px, #5e7e38 30px, #5e7e38 60px);
+    opacity: 0.5;
+    &::before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: 0;
+      width: 100%;
+      height: 25px;
+      background: radial-gradient(ellipse at top, #6f9e3f, transparent);
+    }
+  }
+  .grass-left { left: 0; width: 40%; border-radius: 0 40% 0 0; }
+  .grass-right { right: 0; width: 55%; border-radius: 40% 0 0 0; }
+
+  // 奶牛图标
+  .cattle-icon {
+    position: absolute;
+    font-size: 48px;
+    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.2));
+    opacity: 0.7;
+    animation: bounce 4s infinite;
   }
+  .cattle1 { bottom: 12%; left: 5%; animation-delay: 0s; }
+  .cattle2 { bottom: 18%; right: 8%; animation-delay: 1.2s; font-size: 56px; }
 
+  // 登录卡片
   .login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  z-index: 1;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
+    position: relative;
+    z-index: 2;
+    width: 440px;
+    padding: 40px 35px 35px;
+    background: $card-white;
+    backdrop-filter: blur(2px);
+    border-radius: 32px;
+    box-shadow: $shadow-sm;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255,255,255,0.5);
+    
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.25);
     }
   }
+
+  // 品牌区
+  .brand-area {
+    text-align: center;
+    margin-bottom: 30px;
+    .logo-icon {
+      font-size: 56px;
+      display: inline-block;
+      animation: gentleSwing 2s infinite ease;
+    }
+    .title {
+      margin: 12px 0 6px;
+      font-size: 28px;
+      font-weight: 600;
+      color: $text-dark;
+      letter-spacing: 2px;
+    }
+    .subtitle {
+      font-size: 13px;
+      color: $text-light;
+      margin-bottom: 5px;
+      font-weight: 400;
+    }
+  }
+
+  // 输入框样式优化
+  .custom-input {
+    :deep(.el-input__inner) {
+      height: 48px;
+      border-radius: 60px;
+      border: 1px solid #e2e8e6;
+      background: #fefef7;
+      padding-left: 42px;
+      font-size: 15px;
+      transition: all 0.2s;
+      &:focus {
+        border-color: $primary-color;
+        box-shadow: $shadow-focus;
+      }
+    }
+    :deep(.el-input__prefix) {
+      left: 16px;
+      top: 2px;
       .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
+        font-size: 18px;
+        color: $primary-color;
+      }
+    }
+  }
+
+  // 选项栏（记住密码 + 注册）
+  .options-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 8px 0 25px 0;
+    .remember-checkbox {
+      :deep(.el-checkbox__inner) {
+        border-radius: 4px;
+        border-color: #cbd5e1;
+        background-color: #fff;
       }
+      :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+        background-color: $primary-color;
+        border-color: $primary-color;
       }
-.login-tip {
+      :deep(.el-checkbox__label) {
+        color: $text-light;
         font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
       }
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
     }
+    .register-link {
+      color: $primary-color;
+      font-size: 13px;
+      text-decoration: none;
+      font-weight: 500;
+      transition: 0.2s;
+      &:hover {
+        color: $primary-hover;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  // 登录按钮
+  .login-btn {
+    width: 100%;
+    height: 48px;
+    background: $primary-color;
+    border: none;
+    border-radius: 60px;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 2px;
+    box-shadow: 0 8px 18px rgba(124, 154, 62, 0.3);
+    transition: all 0.25s;
+    &:hover, &:focus {
+      background: $primary-hover;
+      transform: scale(1.01);
+      box-shadow: 0 10px 22px rgba(92, 122, 46, 0.4);
     }
+  }
+
+  // 演示提示小标签
+  .demo-tip {
+    margin-top: 22px;
+    text-align: center;
+    font-size: 12px;
+    color: #8b9a7a;
+    background: #f2f6ec;
+    padding: 8px 12px;
+    border-radius: 100px;
+    display: inline-block;
+    width: 100%;
+    span {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+
+  // 底部footer样式
   .el-login-footer {
-  height: 40px;
-  line-height: 40px;
     position: fixed;
     bottom: 0;
     width: 100%;
     text-align: center;
-  color: #fff;
-  font-family: Arial;
+    padding: 12px;
+    color: rgba(255,255,240,0.9);
     font-size: 12px;
-  letter-spacing: 1px;
+    background: rgba(0,0,0,0.2);
+    backdrop-filter: blur(4px);
+    z-index: 2;
+    font-family: monospace;
+  }
+}
+
+// 动画
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-12px); }
+  100% { transform: translateY(0px); }
+}
+@keyframes drift {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(80px); }
+}
+@keyframes bounce {
+  0%,100%{ transform: translateY(0); }
+  50%{ transform: translateY(-8px); }
+}
+@keyframes gentleSwing {
+  0%,100%{ transform: rotate(0deg); }
+  50%{ transform: rotate(6deg); }
+}
+
+// 响应式
+@media (max-width: 500px) {
+  .login .login-form {
+    width: 88%;
+    padding: 30px 20px;
+  }
+  .bg-decorations .cattle-icon {
+    display: none;
+  }
+  .cloud1, .cloud2 {
+    opacity: 0.6;
   }
-.login-code-img {
-  height: 38px;
 }
 </style>