表单

ruoyi-ui/src/layout/index.vue

@@ -162,20 +162,19 @@ export default {
   background: #fff;
 }
 .jianbiase {
-  width: 80px;
+  width: 87.55px;
+  height: 29.25px;
   /* height: 25px; */
-  background: linear-gradient(
-    to right,
-    rgb(13, 86, 232),
-    yellow,
-    rgb(228, 17, 17)
-  );
-  border-radius: 15px;
+  background: linear-gradient(128.13deg, rgba(82, 79, 255, 1) 0%, rgba(255, 74, 74, 1) 100%);
+  box-shadow: 0px 4px 16px  rgba(179, 192, 231, 1);
+  border-radius: 27px;
   margin-top: 15px;
-  /* position:absolute;
-    left: 25px;
-    top: 25px;
-    z-index: 1; */
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 20.27px;
+  color: rgba(255, 255, 255, 1);
+
 }
 .user-avatar {
   cursor: pointer;

ruoyi-ui/src/views/system/data/index.vue

@@ -241,7 +241,7 @@ export default {
 } */
 .contenttil{
  width: 400px;
- height: 700px;
+ height: 670px;
  margin:0 auto;
  background-color: #fff;
  border: 2px solid #fff;

ruoyi-ui/src/views/system/test/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-col :span="15">
+          <el-form-item label="手机号" prop="mobile">
+            <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
+              prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="15">
+          <el-form-item label="密码" prop="field108">
+            <el-input v-model="formData.field108" placeholder="请输入密码" clearable show-password
+              :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="15">
+          <el-form-item label="计数器" prop="field109">
+            <el-input-number v-model="formData.field109" placeholder="计数器"></el-input-number>
+          </el-form-item>
+        </el-col>
+        <el-col :span="15">
+          <el-form-item label="按钮" prop="field117">
+            <el-button type="primary" icon="el-icon-search" size="medium"> 主要按钮 </el-button>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="15">
+          <el-form-item label="多行文本" prop="field110">
+            <el-input v-model="formData.field110" type="textarea" placeholder="请输入多行文本"
+              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="15">
+          <el-form-item label="下拉选择" prop="field111">
+            <el-select v-model="formData.field111" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
+              <el-option v-for="(item, index) in field111Options" :key="index" :label="item.label"
+                :value="item.value" :disabled="item.disabled"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="15">
+          <el-form-item label="级联选择" prop="field112">
+            <el-cascader v-model="formData.field112" :options="field112Options" :props="field112Props"
+              :style="{width: '100%'}" placeholder="请选择级联选择" clearable></el-cascader>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="15">
+          <el-form-item label="开关" prop="field113" required>
+            <el-switch v-model="formData.field113"></el-switch>
+          </el-form-item>
+        </el-col>
+        <el-col :span="15">
+          <el-form-item label="日期选择" prop="field114">
+            <el-date-picker v-model="formData.field114" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
+              :style="{width: '100%'}" placeholder="请选择日期选择" clearable></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="15">
+          <el-form-item label="上传" prop="field116" required>
+            <el-upload ref="field116" :file-list="field116fileList" :action="field116Action"
+              :before-upload="field116BeforeUpload">
+              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      formData: {
+        mobile: '',
+        field108: undefined,
+        field109: undefined,
+        field117: undefined,
+        field110: undefined,
+        field111: undefined,
+        field112: [],
+        field113: false,
+        field114: null,
+        field115: null,
+        field116: null,
+      },
+      rules: {
+        mobile: [{
+          required: true,
+          message: '请输入手机号',
+          trigger: 'blur'
+        }, {
+          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
+          message: '手机号格式错误',
+          trigger: 'blur'
+        }],
+        field108: [{
+          required: true,
+          message: '请输入密码',
+          trigger: 'blur'
+        }],
+        field109: [{
+          required: true,
+          message: '计数器',
+          trigger: 'blur'
+        }],
+        field110: [{
+          required: true,
+          message: '请输入多行文本',
+          trigger: 'blur'
+        }],
+        field111: [{
+          required: true,
+          message: '请选择下拉选择',
+          trigger: 'change'
+        }],
+        field112: [{
+          required: true,
+          type: 'array',
+          message: '请至少选择一个field112',
+          trigger: 'change'
+        }],
+        field114: [{
+          required: true,
+          message: '请选择日期选择',
+          trigger: 'change'
+        }],
+      },
+      field115Action: 'https://jsonplaceholder.typicode.com/posts/',
+      field115fileList: [],
+      field116Action: 'https://jsonplaceholder.typicode.com/posts/',
+      field116fileList: [],
+      field111Options: [{
+        "label": "选项一",
+        "value": 1
+      }, {
+        "label": "选项二",
+        "value": 2
+      }],
+      field112Options: [],
+      field112Props: {
+        "multiple": false
+      },
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        // TODO 提交表单
+
+        console.log(this.formData)
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    getField112Options() {
+      // TODO 发起请求获取数据
+      this.field112Options
+    },
+    field115BeforeUpload(file) {
+      let isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+    field116BeforeUpload(file) {
+      let isRightSize = file.size / 1024 / 1024 < 2
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 2MB')
+      }
+      return isRightSize
+    },
+  }
+}
+
+</script>
+<style>
+.el-upload__tip {
+  line-height: 1.2;
+}
+
+</style>