1.项目整体样式的配置2.实现工艺设置动态添加的静态样式

loulijun2021

2022-06-25 e846eefa54a7a2274a34d43d4601e192a1ada3d9

 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
@@ -112,39 +131,40 @@
      // } 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: '张三', // Admin
        password: '123456'// 123456
      },
      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
    }
@@ -240,19 +260,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;