优化

.env.development

@@ -1,7 +1,13 @@
 # 若依管理系统/开发环境
 # VUE_APP_BASE_URL = 'http://192.168.50.205:9999'
 # VUE_APP_BASE_URL = 'http://172.16.6.217:9999'
+# 测试环境外网
 VUE_APP_BASE_URL = 'http://121.36.17.6:9098'
+# 正式环境外网
+# VUE_APP_BASE_URL = 'http://121.36.17.6:9099'
+
+# 图片地址
+VUE_APP_BASE_IMG_URL = ""
 
 # 页面标题
 VUE_APP_TITLE = "应急物资系统"

src/api/index.ts

@@ -111,63 +111,50 @@ request.interceptors.response.use(
   (res: any) => {
     NProgress.done();
     // 未设置状态码则默认成功状态
-    const code = res.code || 200;
+    const code = Number(res.status) || 200;
     // 获取错误信息
-    const msg = errorCode[code] || res.msg || errorCode["default"];
+    const msg = res.data.msg || errorCode[code] || errorCode["default"];
     // 二进制数据则直接返回
-    if (res.request.responseType === "blob" || res.request.responseType === "arraybuffer") {
-      return res.data;
-    }
-    if (code === 500) {
+    // if (res.request.responseType === "blob" || res.request.responseType === "arraybuffer") {
+    //   return res.data;
+    // }
+    if (code !== 200 || res.data.code === 1) {
       ElMessage({
         message: msg,
         type: "error"
       });
-      return Promise.reject(new Error(msg));
-    } else if (code === 601) {
-      ElMessage({
-        message: msg,
-        type: "warning"
-      });
-      return Promise.reject(new Error(msg));
-    } else if (code !== 200) {
-      ElNotification.error({
-        title: msg
-      });
       return Promise.reject("error");
     } else {
       return Promise.resolve(res.data);
     }
   },
   (error) => {
-    console.log("err" + error);
     NProgress.done();
-    let { message } = error;
-    if (message === "Network Error") {
-      message = "后端接口连接异常";
-    } else if (message.includes("timeout")) {
-      message = "系统接口请求超时";
-    } else if (message.includes("Request failed with status code")) {
-      // 后台定义 424 针对令牌过去的特殊响应码
-      if (message.substr(message.length - 3) === "424") {
-        ElMessageBox.confirm("令牌状态已过期，请点击重新登录", "系统提示", {
-          confirmButtonText: "重新登录",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(() => {
-          store.dispatch("LogOut").then(() => {
-            // 刷新登录页面，避免多次弹框
-            window.location.reload();
-          });
+    if (error.response.status === 424) {
+      ElMessageBox.confirm("令牌状态已过期，请点击重新登录", "系统提示", {
+        confirmButtonText: "重新登录",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        store.dispatch("LogOut").then(() => {
+          // 刷新登录页面，避免多次弹框
+          window.location.reload();
         });
-        return;
-      }
+      });
+      return Promise.reject(error);
     }
+    // let { message } = error;
+    // if (message === "Network Error") {
+    //   message = "后端接口连接异常";
+    // } else if (message.includes("timeout")) {
+    //   message = "系统接口请求超时";
+    // } else if (message.includes("Request failed with status code")) {
     // ElMessage({
     //   message: message,
     //   type: "error",
     //   duration: 5 * 1000
     // });
+    // }
     return Promise.reject(error);
   }
 );

src/layout/components/topbar/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="topbar">
-    <logo />
     <div class="topbar_title">
-      <img src="~@/assets/img/top_title.png" />
+      <img src="~@/assets/img/logo.png" />
     </div>
     <!-- <div class="topbar_help">
       <el-icon color="#767DEA"><QuestionFilled /></el-icon>
@@ -30,8 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import logo from "./logo.vue";
-
 import { ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";

src/utils/errorCode.ts

@@ -1,6 +1,13 @@
 export default {
-  "401": "认证失败，无法访问系统资源",
+  "000": "操作太频繁，请勿重复请求",
+  "401": "当前操作没有权限",
   "403": "当前操作没有权限",
-  "404": "访问资源不存在",
-  default: "系统未知错误，请反馈给管理员"
+  "404": "资源不存在",
+  "417": "未绑定登录账号，请使用密码登录后绑定",
+  "423": "演示环境不能操作，如需了解联系我们",
+  "426": "用户名不存在或密码错误",
+  "428": "验证码错误,请重新输入",
+  "429": "请求过频繁",
+  "479": "演示环境，没有权限操作",
+  default: "系统未知错误,请反馈给管理员"
 } as Record<string, string>;

src/views/admin/dept/index.vue

@@ -17,12 +17,7 @@
     <div>
       <el-table v-loading="tableLoading" border :data="tableData" row-key="id" :expand-row-keys="['9']">
         <el-table-column prop="name" label="部门名称" :show-overflow-tooltip="true" />
-        <el-table-column prop="weight" label="排序" align="center" />
-        <el-table-column prop="delFlag" label="状态" align="center">
-          <template #default="{ row }">
-            {{ getValueLabel(del_type, row.delFlag) }}
-          </template>
-        </el-table-column>
+        <el-table-column prop="abbreviationName" label="部门简称" align="center" />
         <el-table-column prop="deptType" label="部门类型" align="center">
           <template #default="{ row }">
             {{ getValueLabel(dept_type, row.deptType) }}
@@ -33,6 +28,12 @@
             {{ getValueListLabel(warehouse_type, row.warehouseType) }}
           </template>
         </el-table-column>
+        <el-table-column prop="delFlag" label="状态" align="center">
+          <template #default="{ row }">
+            {{ getValueLabel(del_type, row.delFlag) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="weight" label="排序" align="center" />
         <el-table-column prop="createTime" label="创建时间" align="center">
           <template #default="{ row }">
             {{ timestampToTime(+row.createTime) }}
@@ -289,7 +290,7 @@ const addDept = () => {
       const data = {
         ...form.value
       };
-      data.warehouseType = JSON.stringify(data.warehouseType);
+      data.warehouseType = data.warehouseType ? JSON.stringify(data.warehouseType) : "[]";
       addDeptObj(data).then((res: any) => {
         if (res.code === 0) {
           ElMessage.success("创建成功");
@@ -311,7 +312,7 @@ const saveDept = () => {
       const data = {
         ...form.value
       };
-      data.warehouseType = JSON.stringify(data.warehouseType);
+      data.warehouseType = data.warehouseType ? JSON.stringify(data.warehouseType) : "[]";
       putDeptObj(data).then((res: any) => {
         if (res.code === 0) {
           ElMessage.success("编辑成功");

src/views/admin/menu/index.vue

@@ -224,9 +224,11 @@ const handleDelete = (row: any) => {
     cancelButtonText: "取消",
     type: "warning"
   }).then(() => {
-    delMenuObj(row.id).then(() => {
-      ElMessage.success(`删除 “${row.name}” 成功`);
-      getList();
+    delMenuObj(row.id).then((res: any) => {
+      if (res.code === 0) {
+        ElMessage.success(`删除 “${row.name}” 成功`);
+        getList();
+      }
     });
   });
 };
@@ -248,14 +250,18 @@ const submitMenu = () => {
   formRef.value.validate((valid: boolean) => {
     if (valid) {
       if (title.value === "修改") {
-        putMenuObj(menuInfo.value).then((data) => {
-          ElMessage.success("修改成功");
-          clearDialogData();
+        putMenuObj(menuInfo.value).then((res: any) => {
+          if (res.code === 0) {
+            ElMessage.success("修改成功");
+            clearDialogData();
+          }
         });
       } else {
-        addMenuObj(menuInfo.value).then((data) => {
-          ElMessage.success("添加成功");
-          clearDialogData();
+        addMenuObj(menuInfo.value).then((res: any) => {
+          if (res.code === 0) {
+            ElMessage.success("添加成功");
+            clearDialogData();
+          }
         });
       }
     } else {

src/views/admin/user/index.vue

@@ -13,7 +13,7 @@
             :expand-on-click-node="false"
             @node-click="handleNodeClick"
           >
-            <template #default="{ node, data }">
+            <template #default="{ data }">
               <el-tooltip v-if="!data.isLock" class="item" effect="dark" content="无数据权限" placement="right-start">
                 <span>
                   {{ data.name }}
@@ -69,7 +69,7 @@
           <el-table-column prop="username" label="用户名称" align="center" />
           <el-table-column prop="deptId" label="部门" align="center">
             <template #default="{ row }">
-              {{ getLabelFromMutDict(deptData, row.deptId, "id", "name") }}
+              {{ getLabelFromMutDict(deptData, row.deptId, "id", "abbreviationName") }}
             </template>
           </el-table-column>
           <el-table-column prop="phone" label="手机号码" align="center" />
@@ -150,6 +150,7 @@
                 v-model="dialogForm.deptId"
                 :data="deptOptions"
                 check-strictly
+                disabled
                 clearable
                 :render-after-expand="false"
               />
@@ -205,9 +206,11 @@ import { deepClone, getValueLabel, getLabelFromMutDict } from "@/utils/util";
 import { getDeptList, getUserList, getDetails, getRoleList, addUserObj, putUserObj, delUserObj } from "@/api/admin";
 
 const validateUsername = (rule: any, value: any, callback: any) => {
-  const flag = new RegExp(/^([a-z\u4e00-\u9fa5\d]+?)$/).test(value);
-  if (!flag) {
+  const flag = /^([a-z\u4e00-\u9fa5\d]+?)$/;
+  if (value && !flag.test(value)) {
     callback(new Error("用户名支持小写英文、数字、中文"));
+  } else {
+    callback();
   }
 };
 
@@ -262,11 +265,10 @@ const dialogForm = ref<any>({
 });
 const dialogFormRef = ref<FormInstance>();
 const dialogFormRules = ref<FormRules>({
-  username: [{ min: 2, max: 64, required: true, message: "请输入用户昵称", trigger: "blur" }],
   name: [{ min: 2, max: 64, required: true, message: "请输入姓名", trigger: "blur" }],
   password: [
-    { min: 6, max: 20, required: true, message: "长度在 6 到 20 个字符", trigger: "blur" },
-    { required: true, validator: validatePass1, trigger: "blur" }
+    { min: 6, max: 20, required: true, message: "长度在 6 到 20 个字符", trigger: "blur" }
+    // { required: true, validator: validatePass1, trigger: "blur" }
   ],
   deptId: [{ required: true, message: "请选择岗位", trigger: "change" }],
   lockFlag: [{ required: true, message: "请选择状态", trigger: "change" }],
@@ -323,6 +325,8 @@ const clearSearch = () => {
     username: "",
     deptId: ""
   };
+  dialogForm.value.deptId = "";
+  getList();
 };
 
 const filterList = (arr: any) => {
@@ -347,34 +351,22 @@ const addOrUpdateHandle = (row?: any) => {
   if (row) {
     title.value = "修改";
     dialogFormRules.value.username = [
-      {
-        required: true,
-        message: "请输入用户名"
-      },
-      {
-        min: 3,
-        max: 20,
-        message: "长度在 3 到 20 个字符",
-        trigger: "blur"
-      },
+      { required: true, message: "请输入用户名", trigger: "blur" },
+      { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
       { validator: validateUsername, trigger: "blur" }
     ];
     dialogForm.value = deepClone(row);
     dialogForm.value.role = row.roleList.map((item: any) => item.roleId);
     dialogForm.value.password = "********";
   } else {
+    if (dialogForm.value.deptId === "") {
+      ElMessage.warning("请先选择左侧部门再进行添加");
+      return;
+    }
     title.value = "新增";
     dialogFormRules.value.username = [
-      {
-        required: true,
-        message: "请输入用户名"
-      },
-      {
-        min: 3,
-        max: 20,
-        message: "长度在 3 到 20 个字符",
-        trigger: "blur"
-      },
+      { required: true, message: "请输入用户名", trigger: "blur" },
+      { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
       { validator: validateUsername, trigger: "blur" },
       { validator: validateUsernameRepetition, trigger: "blur" }
     ];
@@ -384,24 +376,26 @@ const addOrUpdateHandle = (row?: any) => {
 
 // 提交新增/修改数据
 const addOrUpdateUser = () => {
-  if (title.value === "新增") {
-    addUserObj(dialogForm.value).then(() => {
-      ElMessage.success("创建成功");
-      clearDialogForm();
-    });
-  } else {
-    if (dialogForm.value.password && dialogForm.value.password.indexOf("******") >= 0) {
-      dialogForm.value.password = undefined;
-    }
-    putUserObj(dialogForm.value).then(() => {
-      ElMessage.success("修改成功");
-      clearDialogForm();
-    });
-  }
   dialogFormRef.value?.validate((valid: boolean) => {
-    console.log(1);
     if (valid) {
-      console.log(2);
+      if (title.value === "新增") {
+        addUserObj(dialogForm.value).then((res: any) => {
+          if (res.code === 0) {
+            ElMessage.success("创建成功");
+            clearDialogForm();
+          }
+        });
+      } else {
+        if (dialogForm.value.password && dialogForm.value.password.indexOf("******") >= 0) {
+          dialogForm.value.password = undefined;
+        }
+        putUserObj(dialogForm.value).then((res: any) => {
+          if (res.code === 0) {
+            ElMessage.success("修改成功");
+            clearDialogForm();
+          }
+        });
+      }
     } else {
       return false;
     }
@@ -414,12 +408,14 @@ const handleDelete = (row: any) => {
     cancelButtonText: "取消",
     type: "warning"
   }).then(() => {
-    delUserObj(row.userId).then(() => {
-      ElMessage({
-        type: "success",
-        message: `删除 “${row.username}” 成功`
-      });
-      getList();
+    delUserObj(row.userId).then((res: any) => {
+      if (res.code === 0) {
+        ElMessage({
+          type: "success",
+          message: `删除 “${row.username}” 成功`
+        });
+        getList();
+      }
     });
   });
 };

src/views/dataStatistics/droughtResistant/index.vue

@@ -19,7 +19,13 @@
               :disabled="searchList.provinceDeptIdList.length === 0"
               :placeholder="searchList.provinceDeptIdList.length === 0 ? '请先选择省份' : '请选择储备仓库'"
             >
-              <el-option v-for="item in warehouseList" :key="item.deptId" :label="item.name" :value="item.deptId" />
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.deptId"
+                :label="item.abbreviationName"
+                :value="item.deptId"
+                ·
+              />
             </el-select>
           </el-form-item>
         </el-col>
@@ -147,7 +153,9 @@ const clearSearch = () => {
 
 // getSpanArr方法
 const getSpanArr = (data: any) => {
-  headerProps.value.forEach((key: any) => {
+  const mergeCol = ["upidName", "username"];
+  // headerProps.value.forEach((key: any) => {
+  mergeCol.forEach((key: any) => {
     let count = 0; // 用来记录需要合并行的起始位置
     mergeObj.value[key] = []; // 记录每一列的合并信息
     data.forEach((item: any, index: number) => {
@@ -167,6 +175,7 @@ const getSpanArr = (data: any) => {
       }
     });
   });
+  console.log(mergeObj.value);
 };
 
 // 获取表格数据
@@ -201,10 +210,12 @@ const getList = () => {
   });
 };
 
-const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+const arraySpanMethod = ({ column, rowIndex }: any) => {
+  const mergeCol = ["upidName", "username"];
   // 判断列的属性
-  if (headerProps.value.indexOf(column.property) !== -1) {
+  if (mergeCol.indexOf(column.property) !== -1) {
     // 判断其值是不是为0
+    console.log(column.property, rowIndex);
     if (mergeObj.value[column.property][rowIndex]) {
       return [mergeObj.value[column.property][rowIndex], 1];
     } else {

src/views/dataStatistics/reliefMaterial/index.vue

@@ -19,7 +19,12 @@
               :disabled="searchList.provinceDeptIdList.length === 0"
               :placeholder="searchList.provinceDeptIdList.length === 0 ? '请先选择省份' : '请选择储备仓库'"
             >
-              <el-option v-for="item in warehouseList" :key="item.deptId" :label="item.name" :value="item.deptId" />
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.deptId"
+                :label="item.abbreviationName"
+                :value="item.deptId"
+              />
             </el-select>
           </el-form-item>
         </el-col>
@@ -132,7 +137,8 @@ getDroughtResistantHeader({ matype1: ["300"] }).then((res: any) => {
 
 // getSpanArr方法
 const getSpanArr = (data: any) => {
-  headerProps.value.forEach((key: any) => {
+  const mergeCol = ["upidName", "username"];
+  mergeCol.forEach((key: any) => {
     let count = 0; // 用来记录需要合并行的起始位置
     mergeObj.value[key] = []; // 记录每一列的合并信息
     data.forEach((item: any, index: number) => {
@@ -197,9 +203,10 @@ const clearSearch = () => {
   getList();
 };
 
-const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+const arraySpanMethod = ({ column, rowIndex }: any) => {
+  const mergeCol = ["upidName", "username"];
   // 判断列的属性
-  if (headerProps.value.indexOf(column.property) !== -1) {
+  if (mergeCol.indexOf(column.property) !== -1) {
     // 判断其值是不是为0
     if (mergeObj.value[column.property][rowIndex]) {
       return [mergeObj.value[column.property][rowIndex], 1];

src/views/login/index.vue

@@ -1,72 +1,60 @@
 <template>
-  <div>
-    <!-- <div class="topbar">
-      <div class="logo">
-        <img src="~@/assets/img/logo.png" />
-      </div>
-      <div class="title">
-        <img src="~@/assets/img/top_title.png" />
-      </div>
-    </div> -->
-    <div class="contnet">
-      <div class="login_form">
-        <img src="~@/assets/img/top_title.png" alt="" />
-        <el-form :model="loginForm" :rules="loginRules" ref="form">
-          <el-row>
-            <el-col :span="24">
-              <div class="login_title">欢迎登陆系统</div>
+  <div class="contnet">
+    <img src="~@/assets/img/logo.png" alt="" />
+    <div class="login_form">
+      <img src="~@/assets/img/login_form_bj.png" alt="" />
+      <el-form :model="loginForm" :rules="loginRules" ref="form">
+        <el-row>
+          <el-col :span="24">
+            <div class="login_title">
+              <span>欢迎登录系统</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item prop="username">
+              <el-input :prefix-icon="UserFilled" v-model="loginForm.username" placeholder="请输入您的账号" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item prop="password">
+              <el-input
+                :prefix-icon="Lock"
+                type="password"
+                show-password
+                v-model="loginForm.password"
+                placeholder="请输入密码"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- <el-row>
+          <el-form-item prop="code">
+            <el-col :span="16">
+              <el-input v-model="loginForm.code" placeholder="请输入验证码">
+                <template #prefix>
+                  <el-icon><Picture /></el-icon>
+                </template>
+              </el-input>
             </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item prop="username">
-                <el-input
-                  :prefix-icon="UserFilled"
-                  v-model="loginForm.username"
-                  placeholder="请输入您的账号"
-                  clearable
-                />
-              </el-form-item>
+            <el-col :span="8">
+              <div class="login-code">
+                <span v-if="verificationCode.type == 'text'" class="login-code-img" @click="refreshCode">
+                  {{ verificationCode.value }}
+                </span>
+                <img v-else :src="verificationCode.src" class="login-code-img" @click="refreshCode" />
+              </div>
             </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="24">
-              <el-form-item prop="password">
-                <el-input
-                  :prefix-icon="Lock"
-                  type="password"
-                  show-password
-                  v-model="loginForm.password"
-                  placeholder="请输入密码"
-                  clearable
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <!-- <el-form-item prop="code">
-            <el-row>
-              <el-col :span="16">
-                <el-input v-model="loginForm.code" placeholder="请输入验证码">
-                  <template #prefix>
-                    <el-icon><Picture /></el-icon>
-                  </template>
-                </el-input>
-              </el-col>
-              <el-col :span="8">
-                <div class="login-code">
-                  <span v-if="verificationCode.type == 'text'" class="login-code-img" @click="refreshCode">
-                    {{ verificationCode.value }}
-                  </span>
-                  <img v-else :src="verificationCode.src" class="login-code-img" @click="refreshCode" />
-                </div>
-              </el-col>
-            </el-row>
-          </el-form-item> -->
-          <el-row class="login_btn">
-            <el-button type="primary" @click="loginSubmit(form)">登录</el-button>
-          </el-row>
-        </el-form>
-      </div>
+          </el-form-item>
+        </el-row> -->
+        <el-row class="login_btn">
+          <el-button type="primary" @click="loginSubmit(form)">登录</el-button>
+        </el-row>
+      </el-form>
     </div>
   </div>
 </template>
@@ -127,68 +115,75 @@ const loginSubmit = async (formRef?: FormInstance) => {
 refreshCode();
 </script>
 <style lang="scss" scoped>
-.topbar {
-  height: 90px;
-  background: #020066;
-  display: flex;
-  align-items: center;
-  .logo {
-    width: 80px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 50px;
-  }
-  .title {
-    img {
-      height: 40px;
-    }
-  }
-}
 .contnet {
   width: 100%;
-  // height: calc(100vh - 90px);
   height: 100vh;
   overflow: hidden;
-  background-image: url(../../assets/img/bj2.jpg);
+  background-image: url(~@/assets/img/login_bj.png);
   background-size: 100% 100%;
+  position: relative;
+  & > img {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 50%;
+  }
   .login_form {
-    position: fixed;
+    position: absolute;
     top: 50%;
-    left: 35%;
+    left: 50%;
     transform: translate(-50%, -50%);
-    width: 30%;
     box-sizing: border-box;
-    img {
-      width: 100%;
+    width: 60%;
+    height: 60%;
+    display: flex;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    & > img {
+      width: 65%;
     }
     .el-form {
-      width: 100%;
-      height: 330px;
+      height: 100%;
+      width: 35%;
       background-color: #fff;
-      border: 1px solid #c0c4cc;
-      border-top: 3px blue solid;
     }
     .login_title {
-      font-size: 20px;
-      color: #999;
-      height: 60px;
-      line-height: 60px;
-      text-align: center;
-      border-bottom: 1px solid #c0c4cc;
-      margin-bottom: 20px;
+      font-size: 30px;
+      color: #000;
+      height: 120px;
+      font-weight: bolder;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        height: 2px;
+        width: 100%;
+        background-color: #e1e1e1;
+      }
+      & > span {
+        background-color: #fff;
+        padding: 10px;
+        z-index: 999;
+      }
     }
     .el-form-item {
-      display: block;
-      padding: 0 20px;
-      &__label {
-        color: #000;
-        font-size: 16px;
+      padding: 10px 20px;
+      .el-input {
+        height: 40px;
       }
     }
     .el-button {
       width: 100%;
+      height: 40px;
+      border-radius: 20px;
       margin: 30px 20px 0 20px;
       background-color: #4a4996;
       border-color: #4a4996;
@@ -197,7 +192,7 @@ refreshCode();
       display: flex;
       align-items: center;
       justify-content: space-around;
-      margin: 0 0 0 10px;
+      margin-left: 10px;
       .login-code-img {
         margin-top: 2px;
         width: 100px;