1.做适应平板显示的内容大小

loulijun2021

2022-08-05 d33eacc1f85ac3a736b33ba4713a19aae466d711

 src/views/login/index.vue

@@ -1,24 +1,43 @@
<template>
  <div class="login-container">

    <div class="login-container-center">

      <el-carousel
        :autoplay="false"
        :autoplay="true"
        indicator-position="outside"
        height="580px"
        :interval="3000"
        style="width: 500px;margin-left: 20px"
      >
        <el-carousel-item v-for="item in carouselArr" :key="item.title">
          <!--          <h3>{{ item }}</h3>-->

          <div :style="{ width:'200px',height:'300px' ,backgroundColor:item.color,margin:'95px 0px 35px 155px'}" />
        <el-carousel-item>
          <img src="@/assets/images/img1.png" style="margin-top: -30px">
          <div class="itemLabel">
            <div class="title">{{ item.title }}</div>
            <div class="content">{{ item.content }}</div>
            <p class="title">智慧物联</p>
            <p class="content">生产现场数据实时采集、 传递、多维度可视化呈现</p>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/img2.png" style="margin-top: -30px">
          <div class="itemLabel">
            <p class="title">精益思维</p>
            <p class="content">运用精益思想和IT系统技 术打造工厂制造协同平台</p>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <img src="@/assets/images/img3.png" style="margin-top: -30px">
          <div class="itemLabel">
            <p class="title">行业组件</p>
            <p class="content">基于制造模型快速灵活地 配置客户专属的应用场景</p>
          </div>
        </el-carousel-item>
        <!--        <el-carousel-item v-for="item in carouselArr" :key="item.title">-->
        <!--          <div :style="{ width:'200px',height:'300px' ,margin:'95px 0px 35px 155px'}">-->
        <!--            <img :src="item.url" alt="" style="width: 200px;height: 300px">-->
        <!--          </div>-->
        <!--          <div class="itemLabel">-->
        <!--            <div class="title">{{ item.title }}</div>-->
        <!--            <div class="content">{{ item.content }}</div>-->
        <!--          </div>-->
        <!--        </el-carousel-item>-->
      </el-carousel>

      <el-form
@@ -32,7 +51,7 @@

        <div class="title-container">
          <div class="title_img" />
          <h3 class="title">新凯迪制造云平台</h3>
          <!--          <h3 class="title">新凯迪制造云平台</h3>-->
        </div>

        <el-form-item prop="username">
@@ -42,7 +61,7 @@
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            placeholder="请输入用户编码"
            name="username"
            type="text"
            tabindex="1"
@@ -65,7 +84,7 @@
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            placeholder="请输入用户密码"
            name="password"
            tabindex="2"
            style="width: 100%;"
@@ -84,7 +103,7 @@
        <el-button
          :loading="loading"
          type="primary"
          style="width:100%;margin-bottom:30px;"
          style="width:100%;margin-top:20px;letter-spacing: 10px"
          @click.native.prevent="handleLogin"
        >登录
        </el-button>
@@ -97,11 +116,34 @@
      </el-form>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :show-close="false"
      top="5vh"
      class="dialogVisible"
    >
      <div style="font-size:18px;">
        <!--        <i class="el-icon-warning-outline" style="color: #ffef00" />-->
        当前账号已登录，是否强制下线!
      </div>
      <span slot="footer" class="dialog-footer">

        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">否</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">是</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getCookie, removeCookie, setCookie } from '@/utils/auth'
import { ForcedOffline } from '@/api/user'

export default {
  name: 'Login',
@@ -112,41 +154,43 @@
      // } else {
      //   callback()
      // }
      const mPattern = /^\w+$/ // 正则 等价于[A-Za-z0-9_]
      if (value.length < 5) {
        callback(new Error('账号长度不少于五位！'))
      } else if (!mPattern.test(value)) {
        callback(new Error('账号不符合规则，可输入字母、数字及下划线'))
      // const mPattern = /^\w+$/ // 正则 等价于[A-Za-z0-9_]

      if (value.length < 1) {
        callback(new Error('用户编码不能为空！'))
      } else {
        callback()
      }
      // if (value.length < 1) {
      //   callback(new Error('账号不能为空！'))
      // } else if (!mPattern.test(value)) {
      //   callback(new Error('账号不符合规则，可输入字母、数字及下划线'))
      // } else {
      //   callback()
      // }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不少于六位！'))
      if (value.length < 1) {
        callback(new Error('用户密码不能为空！'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: 'admin',
        password: '111111'
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
        username: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername }],
        password: [{ required: true, trigger: ['blur', 'change'], validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      carouselArr: [
        { color: 'red', title: '智慧物联', content: '生产现场数据实时采集、传达、多维度可视化呈现' },
        { color: 'yellow', title: '智慧物联2', content: '生产现场数据实时采集、传达、多维度可视化呈现2' },
        { color: 'blue', title: '智慧物联3', content: '生产现场数据实时采集、传达、多维度可视化呈现3' }
      ],
      focus1: false,
      focus2: false
      focus2: false,
      dialogVisible: false
    }
  },
  watch: {
@@ -173,7 +217,12 @@
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            console.log(getCookie('code') === '302', 9999)
            if (getCookie('code') === '302') {
              this.dialogVisible = true
            } else {
              this.$router.push({ path: this.redirect || '/' })
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
@@ -183,6 +232,35 @@
          return false
        }
      })
    },

    dialogVisibleCancel() {
      removeCookie('username')
      removeCookie('admin')
      removeCookie('navTabId')
      removeCookie('usertype')
      removeCookie('userid')
      removeCookie('code')
      this.dialogVisible = false
    },
    async dialogVisibleConfirm() {
      const usercode = getCookie('navTabId')
      const username = getCookie('admin')
      const usertype = getCookie('usertype')
      const userid = getCookie('userid')
      const data = {
        usercode,
        username,
        usertype,
        userid
      }
      const res = await ForcedOffline(data)
      if (res.code === '200') {
        this.$message.success('强制下线成功！')
        this.dialogVisible = false
        // this.$router.push({ path: this.redirect || '/' })
        await this.handleLogin()
      }
    }
  }
}
@@ -240,19 +318,16 @@
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$main_color:#42b983;
$main_color: #42b983;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  //background-color: $bg;
  overflow: hidden;
  background: url("../../assets/images/login_bg2.jpg") no-repeat;
  background: url("../../assets/images/login_bg.png") no-repeat;
  background-size: 100% 100%;
  opacity: 0.8;
  // ::v-deep input {
  //  color: #000;
  //}
  opacity: 1;

  .login-container-center {
    width: 1000px;
@@ -319,10 +394,11 @@
    align-items: center;

    .title_img {
      background: url("../../assets/images/xkd_logo.png");
      width: 200px;
      height: 100px;
      background: url("../../assets/images/xkd_newlogo.png") no-repeat;
      width: 300px;
      height: 200px;
      margin: -50px 0 20px;
      background-size: 100% 100%;
    }

    .title {
@@ -375,4 +451,37 @@
    -webkit-text-fill-color: #000 !important;
  }
}
::v-deep .el-dialog__title{
  color: red;
}

::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

.footerButton {
  display: flex;
  justify-content: end;
}
::v-deep .dialogVisible .el-button--primary {
  background-color: #42b983 !important;
  height: 30px;
  display: flex;
  align-items: center;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}
::v-deep .dialogVisible .el-button--default {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

</style>