编辑个人信息

src/components/pages/teacherOffice/index.vue

@@ -47,8 +47,8 @@
               <span v-else>{{ scope.row.typeName }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="pnum" label="人数" align="center">
-          </el-table-column>
+          <!-- <el-table-column prop="pnum" label="人数" align="center">
+          </el-table-column> -->
           <el-table-column label="操作" width="400px">
             <template slot-scope="scope">
               <el-button type="primary" size="small" @click="getStudent(scope.row.id)">查看老师</el-button>
@@ -399,6 +399,7 @@ export default {
     this.selectGrage()
     this.getSchoolName();
     this.getTeacherType();
+
   },
   computed: {
     getGrade() {

src/components/pages/testPerson/info/infoDialog/index.vue

@@ -1,421 +1,518 @@
 <template>
-    <el-dialog title="编辑个人信息" :visible.sync="dialogVisibleInfo" :append-to-body="true" width="500px"
-        :before-close="handleClose" class="dialog_diy">
-        <div style="width:100%;height: 100%;">
-            <div class="info_box">
-                <div class="img" v-loading="imgLoading">
-                    <img :src="info.headportrait ? info.headportrait : avator" alt="">
-                    <div class="mask" @click.stop="addImg($event)">
-                        <img src="../../../../../assets/icon/test/camera_icon.png" alt="">
-                        <input type="file" accept="image/*" capture="camera" style="display: none"
-                            @change="beforeUpload($event)" />
-                    </div>
-                </div>
-                <div class="info_span">
-                    <span>姓名：</span>
-                    <div>
-                        <el-input v-model="info.username" placeholder="请输入姓名"></el-input>
-                    </div>
-                </div>
-                <div class="info_span">
-                    <span>教研室：</span>
-                    <div>
-                        <el-select multiple collapse-tags v-model="info.teacherOffice" placeholder="请选择教研室"
-                            @change="Ochange" style="width: 100%;">
-                            <el-option v-for="(item, index) in classJuri" :key="index" :label="item.name"
-                                :value="item.id"></el-option>
-                        </el-select>
-                    </div>
-                </div>
-                <div v-if="!oidArray.includes(oid)" class="info_span">
-                    <span>学科：</span>
-                    <div>
-                        <el-input v-model="info.subject" placeholder="请输入学科"></el-input>
-                    </div>
-                </div>
-                <div v-if="!oidArray.includes(oid)" class="info_span">
-                    <span>职务：</span>
-                    <div>
-                        <el-input v-model="info.job" placeholder="请输入职务"></el-input>
-                    </div>
-                </div>
-                <div class="info_span">
-                    <span>简介：</span>
-                    <div>
-                        <!-- <el-input v-model="info.intro" placeholder="想说点什么..."></el-input> -->
-                        <textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="info.intro"
-                            placeholder="想说点什么..."></textarea>
-                    </div>
-                </div>
+  <el-dialog title="编辑个人信息" :visible.sync="dialogVisibleInfo" :append-to-body="true" width="500px"
+    :before-close="handleClose" class="dialog_diy">
+    <div style="width:100%;height: 100%;">
+      <div class="info_box">
+        <div class="img" v-loading="imgLoading">
+          <img :src="info.headportrait ? info.headportrait : avator" alt="">
+          <div class="mask" @click.stop="addImg($event)">
+            <img src="../../../../../assets/icon/test/camera_icon.png" alt="">
+            <input type="file" accept="image/*" capture="camera" style="display: none" @change="beforeUpload($event)" />
+          </div>
+        </div>
+        <div class="info_span" style="display: block;align-items: center;flex-wrap: wrap;margin-left: 15px;margin-top: 0px;">
+          <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
+            <span style="width: 48px;">姓名：</span>
+            <el-input v-model="info.username" placeholder="请输入姓名" :style="{ width: '223px' }"></el-input>
+          </div>
+        </div>
+        <div class="info_span">
+          <div style="display: flex;justify-content: center;align-items: center;">
+            <span >教研室：</span>
+            <el-select v-model="typeId"  multiple placeholder="类型" :style="{ width: '223px',marginLeft: '7px' }">
+              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </div>
+        </div>
+
+        <div class="info_span" style="display: block;align-items: center;flex-wrap: wrap;margin-left: 15px;margin-top: 0px;">
+          <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;"
+            v-for="item in teaType" :key="item.id">
+            <div style="width: 49px;">
+              {{ item.name + "：" }}
             </div>
+            <el-select @change="cha" v-model="item.value" multiple collapse-tags style="width:223px;"
+              placeholder="请选择">
+              <el-option v-for="i in item.child" :key="i.id" :label="i.name" :value="i.id">
+              </el-option>
+            </el-select>
+          </div>
         </div>
-        <span slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="confirm()">确 认</el-button>
-            <el-button @click="close()">关 闭</el-button>
-        </span>
-    </el-dialog>
+        <div class="info_span" style="margin-left: 22px;margin-top: 0px;">
+          <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
+            <span style="width: 67px;">简介：</span>
+            <textarea
+              v-autoHeight="68"
+              rows="2"
+              class="binfo_input binfo_textarea"
+              cols
+              v-model="info.intro"
+              placeholder="想说点什么..."
+            ></textarea>
+          </div>
+        </div>
+
+
+
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirm()">确 认</el-button>
+      <el-button @click="close()">关 闭</el-button>
+    </span>
+  </el-dialog>
 </template>
-  
+
 <script>
 import avator from '../../../../../assets/icon/test/teacher.jpg'
 export default {
-    props: {
-        dialogVisibleInfo: {
-            type: Boolean,
-            default: false
-        },
-        userid: {
-            type: String
-        },
-        oid: {
-            type: String
+  props: {
+    dialogVisibleInfo: {
+      type: Boolean,
+      default: false
+    },
+    userid: {
+      type: String
+    },
+    oid: {
+      type: String
+    }
+  },
+  watch: {
+    dialogVisibleInfo(newVal) {
+      if (newVal) {
+        this.getClass2();
+
+      }
+    }
+  },
+  directives: {
+    autoHeight: {
+      update(el, binding) {
+        const { value } = binding
+        if (value && typeof value === 'number') {
+          el.style.height = `${value}px`
+        } else {
+          el.style.height = 'auto'
         }
+      },
+      componentUpdated(el) {
+        el.style.height = `${el.scrollHeight + 5}px`
+      },
     },
-    watch: {
-        dialogVisibleInfo(newVal) {
-            if (newVal) {
-                this.getClass2();
+  },
+  data() {
+    return {
+      avator: avator,
+      info: {},
+      imgLoading: false,
+      classJuri: [],
+      teaType: [],
+      teacherType: [],
+      allItems: [],
+      options: [],
+      typeId: "",
+      typeId2: "",
+      formLabelWidth: "100px",
+      oidArray: ["d67940a5-510c-40ea-9c9a-2631ab03013a"],
+      resultInfo: '' // 用于存储字符串
+    };
+  },
+  mounted() {
+    this.getTeacherType();
+    this.$nextTick();
+    this.getTypeInfo();
 
-            }
+  },
+  methods: {
+    cha(rows) {
+      this.$forceUpdate();
+    },
+    //获取教研室
+    getTeacherType() {
+      let params = {
+        cu: '',
+        oid: this.oid,
+        cn: '',
+        pid: '6'
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectPerInfoTeacherOffice", params)
+        .then((res) => {
+          this.options = res.data[0];
+          console.log("options", this.options);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    //获取分类类名
+    getTypeInfo() {
+      let params = {
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectPerInfoAllTea", params)
+        .then((res) => {
+          this.teaType = res.data[0];
+          let typeInfo = res.data[1];
+
+          this.teaType.forEach((e) => {
+            e.child = [];
+            e.value = [];
+            typeInfo.forEach((i) => {
+              if (e.id == i.parentid) {
+                e.child.push({ id: i.id, name: i.name })
+              }
+            })
+          })
+          console.log(this.teaType, "teaType");
+
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    handleClose(done) {
+      this.typeId = "";
+      this.close();
+      done();
+    },
+    close() {
+      this.typeId = "";
+      this.$emit("update:dialogVisibleInfo", false);
+    },
+    generateResultInfo() {
+      // 从 teaType 中提取所有的值
+      const selectedValues = this.teaType.flatMap(item => item.value);
+
+      // 确保 typeId 是数组，将其添加到 selectedValues 中
+      const combinedValues = Array.isArray(this.typeId)
+        ? selectedValues.concat(this.typeId)
+        : selectedValues.concat([this.typeId]);
+
+      // 将合并后的数组转换为逗号分隔的字符串
+      this.resultInfo = combinedValues.join(', ');
+
+
+    },
+    confirm() {
+      if (!this.info.username) {
+        this.$message.error("姓名不能为空！");
+        return
+      }
+      // let teaTypeSelections = this.teaType.map(item => ({
+      //   selectedValues: item.value.join(",")  // 如果是数组，转为逗号分隔的字符串
+      // }));
+      this.generateResultInfo();
+
+      let params = [{
+        userid: this.userid,
+        username: this.info.username,
+        cclassid: this.info.teacherOffice.join(","),
+        classroom: this.typeId,
+        typeInfo: this.resultInfo,
+        job: this.info.job,
+        subject: this.info.subject,
+        intro: this.info.intro,
+        h: this.info.headportrait ? this.info.headportrait : '',
+      }];
+      console.log(params);
+      this.ajax
+        .post(this.$store.state.api + "updateUserInfoText", params)
+        .then((res) => {
+          this.$message.success('修改成功')
+          this.$emit("update:dialogVisibleInfo", false);
+        })
+        .catch((err) => {
+          this.$message.error("网络不佳");
+          console.error(err);
+        });
+    },
+    getData() {
+      let params = {
+        uid: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestUser", params)
+        .then((res) => {
+          this.info = res.data[0][0]
+          this.info.teacherOffice = []
+          let array = []
+          for (var i = 0; i < this.classJuri.length; i++) {
+            array.push(this.classJuri[i].id)
+          }
+          this.info.teacherOffice = this.arrayToArray(this.info.cclassid.split(','), array)
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    arrayToArray(arrayo, arrayt) {
+      let array1 = arrayo;
+      let array2 = arrayt;
+
+      let commonElements = [];
+
+      for (let i = 0; i < array1.length; i++) {
+        for (let j = 0; j < array2.length; j++) {
+          if (array1[i] === array2[j]) {
+            commonElements.push(array1[i]);
+          }
         }
+      }
+      return commonElements;
     },
-    directives: {
-        autoHeight: {
-            update(el, binding) {
-                const { value } = binding
-                if (value && typeof value === 'number') {
-                    el.style.height = `${value}px`
-                } else {
-                    el.style.height = 'auto'
-                }
-            },
-            componentUpdated(el) {
-                el.style.height = `${el.scrollHeight + 5}px`
-            },
-        },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+      e.target.value = "";
     },
-    data() {
-        return {
-            avator: avator,
-            info: {},
-            imgLoading: false,
-            classJuri: [],
-            oidArray: ["d67940a5-510c-40ea-9c9a-2631ab03013a"]
+    beforeUpload(event, type) {
+      // const loading = this.openLoading();
+      var file = event.target.files[0];
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
+
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var imgA = [
+        "png",
+        "jpg",
+        "jpeg",
+        "bmp",
+        "gif",
+        "webp",
+        "psd",
+        "svg",
+        "tiff",
+      ];
+      if (imgA.indexOf(file.name.split(".")[file.name.split(".").length - 1]) == -1) {
+        this.$message.error("图片格式错误")
+        return;
+      }
+      this.imgLoading = true
+      var _this = this;
+
+      if (file) {
+        var params = {
+          Key:
+            file.name.split(".")[0] +
+            new Date().getTime() +
+            "." +
+            file.name.split(".")[file.name.split(".").length - 1],
+          ContentType: file.type,
+          Body: file,
+          "Access-Control-Allow-Credentials": "*",
+          ACL: "public-read",
+        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true,
         };
-    },
-    methods: {
-        handleClose(done) {
-            this.close();
-            done();
-        },
-        close() {
-            this.$emit("update:dialogVisibleInfo", false);
-        },
-        confirm() {
-            if (!this.info.username) {
-                this.$message.error("姓名不能为空！");
-                return
-            }
-            let params = [{
-                userid: this.userid,
-                username: this.info.username,
-                cclassid: this.info.teacherOffice.join(","),
-                job: this.info.job,
-                subject: this.info.subject,
-                intro: this.info.intro,
-                h: this.info.headportrait ? this.info.headportrait : '',
-            }]
-            this.ajax
-                .post(this.$store.state.api + "updateUserInfoText", params)
-                .then((res) => {
-                    this.$message.success('修改成功')
-                    this.$emit("update:dialogVisibleInfo", false);
-                })
-                .catch((err) => {
-                    this.$message.error("网络不佳");
-                    console.error(err);
-                });
-        },
-        getData() {
-            let params = {
-                uid: this.userid,
-            };
-            this.ajax
-                .get(this.$store.state.api + "selectTestUser", params)
-                .then((res) => {
-                    this.info = res.data[0][0]
-                    this.info.teacherOffice = []
-                    let array = []
-                    for(var i = 0; i < this.classJuri.length; i++){
-                        array.push(this.classJuri[i].id)
-                    }
-                    this.info.teacherOffice = this.arrayToArray(this.info.cclassid.split(','), array)
-                })
-                .catch((err) => {
-                    console.error(err);
-                });
-        },
-        arrayToArray(arrayo, arrayt) {
-            let array1 = arrayo;
-            let array2 = arrayt;
-
-            let commonElements = [];
-
-            for (let i = 0; i < array1.length; i++) {
-                for (let j = 0; j < array2.length; j++) {
-                if (array1[i] === array2[j]) {
-                    commonElements.push(array1[i]);
-                }
-                }
-            }
-            return commonElements;
-        },
-        addImg(e) {
-            var el = e.currentTarget;
-            el.getElementsByTagName("input")[0].click();
-            e.target.value = "";
-        },
-        beforeUpload(event, type) {
-            // const loading = this.openLoading();
-            var file = event.target.files[0];
-            var credentials = {
-                accessKeyId: "AKIATLPEDU37QV5CHLMH",
-                secretAccessKey: "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",
-            }; //秘钥形式的登录上传
-            window.AWS.config.update(credentials);
-            window.AWS.config.region = "cn-northwest-1"; //设置区域
-
-            var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
-            var imgA = [
-                "png",
-                "jpg",
-                "jpeg",
-                "bmp",
-                "gif",
-                "webp",
-                "psd",
-                "svg",
-                "tiff",
-            ];
-            if (imgA.indexOf(file.name.split(".")[file.name.split(".").length - 1]) == -1) {
-                this.$message.error("图片格式错误")
-                return;
-            }
-            this.imgLoading = true
-            var _this = this;
-
-            if (file) {
-                var params = {
-                    Key:
-                        file.name.split(".")[0] +
-                        new Date().getTime() +
-                        "." +
-                        file.name.split(".")[file.name.split(".").length - 1],
-                    ContentType: file.type,
-                    Body: file,
-                    "Access-Control-Allow-Credentials": "*",
-                    ACL: "public-read",
-                }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
-                var options = {
-                    partSize: 2048 * 1024 * 1024,
-                    queueSize: 2,
-                    leavePartsOnError: true,
-                };
-                bucket
-                    .upload(params, options)
-                    .on("httpUploadProgress", function (evt) {
-                        //这里可以写进度条
-                        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
-                    })
-                    .send(function (err, data) {
-                        _this.imgLoading = false
-                        // loading.close();
-                        if (err) {
-                            _this.$message.error("上传失败");
-                        } else {
-
-                            _this.info.headportrait = data.Location
-                            _this.$forceUpdate();
-
-                            console.log(_this.checkJson);
-                            console.log(data.Location);
-                        }
-                    });
+        bucket
+          .upload(params, options)
+          .on("httpUploadProgress", function (evt) {
+            //这里可以写进度条
+            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
+          })
+          .send(function (err, data) {
+            _this.imgLoading = false
+            // loading.close();
+            if (err) {
+              _this.$message.error("上传失败");
+            } else {
+
+              _this.info.headportrait = data.Location
+              _this.$forceUpdate();
+
+              console.log(_this.checkJson);
+              console.log(data.Location);
             }
-        },
-        //获取教研室列表
-        getClass2() {
-            let params = {
-                oid: this.oid,
-            };
-            this.ajax
-                .get(this.$store.state.api + "selectTeacherOfficeBySchool", params)
-                .then((res) => {
-                    this.classJuri = res.data[0];
-                    this.getData();
-                })
-                .catch((err) => {
-                    this.isLoading = false;
-                    console.error(err);
-                });
-        },
-        Ochange() {
-            this.$forceUpdate()
-        }
+          });
+      }
+    },
+    //获取教研室列表
+    getClass2() {
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTeacherOfficeBySchool", params)
+        .then((res) => {
+          this.classJuri = res.data[0];
+          this.getData();
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    Ochange() {
+      this.$forceUpdate()
     }
+  }
 };
 </script>
-  
+
 <style scoped>
 .dialog_diy>>>.el-dialog {
-    /* height: 100%; */
-    margin: 10vh auto !important;
+  /* height: 100%; */
+  margin: 10vh auto !important;
 }
 
 .dialog_diy>>>.el-dialog__header {
-    background: #454545 !important;
-    padding: 15px 20px;
+  background: #454545 !important;
+  padding: 15px 20px;
 }
 
 .dialog_diy>>>.el-dialog__body {
-    height: calc(100% - 124px);
-    box-sizing: border-box;
-    padding: 0px;
+  height: calc(100% - 124px);
+  box-sizing: border-box;
+  padding: 0px;
 }
 
 .dialog_diy>>>.el-dialog__title {
-    color: #fff;
+  color: #fff;
 }
 
 .dialog_diy>>>.el-dialog__headerbtn {
-    top: 19px;
+  top: 19px;
 }
 
 .dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
-    color: #fff;
+  color: #fff;
 }
 
 .dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
-    color: #fff;
+  color: #fff;
 }
 
 .dialog_diy>>>.el-dialog__body,
 .dialog_diy>>>.el-dialog__footer {
-    background: #fafafa;
+  background: #fafafa;
 }
 
 
 .info_box {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 30px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 0;
 }
 
 .info_box>.img {
-    width: 80px;
-    height: 80px;
-    overflow: hidden;
-    border-radius: 50%;
-    position: relative;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  border-radius: 50%;
+  position: relative;
 }
 
 .info_box>.img:hover>.mask {
-    display: flex;
+  display: flex;
 }
 
 .info_box>.img>.mask {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    /* display: flex; */
-    align-items: center;
-    justify-content: center;
-    display: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  /* display: flex; */
+  align-items: center;
+  justify-content: center;
+  display: none;
 }
 
 .info_box>.img>.mask>img {
-    width: 20px;
+  width: 20px;
 }
 
 .info_box>.img>img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .binfo_input {
-    width: 100%;
-    margin: 0;
-    padding: 12px 14px;
-    display: block;
-    min-width: 0;
-    outline: none;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    background: #fff;
-    font-size: 16px;
-    resize: none;
-    font-family: 'Microsoft YaHei';
-    min-height: 48px;
-    /* border: 1px solid #3682fc00; */
-    border: 1px solid #C0C4CC;
+  width: 100%;
+  margin: 0;
+  padding: 12px 14px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 16px;
+  resize: none;
+  font-family: 'Microsoft YaHei';
+  min-height: 48px;
+  /* border: 1px solid #3682fc00; */
+  border: 1px solid #C0C4CC;
 }
 
 .binfo_textarea {
-    border: 1px solid #C0C4CC;
-    font-size: 16px;
-    resize: none;
-    /* background: #f6f6f6; */
-    font-family: 'Microsoft YaHei';
-    font-size: 14px;
-    color: #606266;
+  border: 1px solid #dcdfe6;
+  font-size: 16px;
+  resize: none;
+  /* background: #f6f6f6; */
+  font-family: 'Microsoft YaHei';
+  font-size: 14px;
+  color: #606266;
+  padding-left: 35px;
 }
 
 .binfo_input:focus-visible {
-    border: 1px solid #3681FC !important;
+  border: 1px solid #3681FC !important;
 }
 
 .binfo_textarea::-webkit-input-placeholder {
-    /* WebKit browsers */
-    color: rgb(192, 196, 204);
+  /* WebKit browsers */
+  color: rgb(192, 196, 204);
 }
 
 .binfo_textarea:-moz-placeholder {
-    /* Mozilla Firefox 4 to 18 */
-    color: rgb(192, 196, 204);
+  /* Mozilla Firefox 4 to 18 */
+  color: rgb(192, 196, 204);
 }
 
 .binfo_textarea::-moz-placeholder {
-    /* Mozilla Firefox 19+ */
-    color: rgb(192, 196, 204);
+  /* Mozilla Firefox 19+ */
+  color: rgb(192, 196, 204);
 }
 
 .binfo_textarea:-ms-input-placeholder {
-    /* Internet Explorer 10+ */
-    color: rgb(192, 196, 204);
+  /* Internet Explorer 10+ */
+  color: rgb(192, 196, 204);
+}
+.el-form-item__label{
+  margin-left:-14px;
+}
+.elInput{
+  margin-left: 10px;
 }
 
+
 .info_span {
-    display: flex;
-    margin-top: 10px;
+  display: flex;
+  margin-top: 10px;
 }
 
 .info_span>span:nth-child(1) {
-    margin-top: 10px;
-    width: 100px;
-    text-align: right;
-}
-
-.info_span>div {
-    width: 250px;
+  margin-top: 10px;
+  width: 100px;
+  text-align: center;
+  margin-left: 2px;
 }
 </style>
-