外协商管理

src/api/business/supplier.js

@@ -88,3 +88,30 @@ export function removeSupplierProductProcess(id) {
 		method: 'delete'
 	})
 }
+
+/*********************************************** 管理员相关 ***********************************************/
+// 获取外协商管理员信息（每个供应商只能有一个唯一的管理员）
+export function getAdminInfo(supplierId) {
+	return request({
+		url: baseUrl + '/business/supplier/getAdminInfo/' + supplierId,
+		method: 'get'
+	})
+}
+
+// 保存外协商管理员
+export function saveAdmin(data) {
+	return request({
+		url: baseUrl + '/business/supplier/saveAdmin',
+		method: 'post',
+		data: data
+	})
+}
+
+// 初始化外协商管理员密码
+export function initAdminPsw(data) {
+	return request({
+		url: baseUrl + '/business/supplier/initAdminPsw',
+		method: 'post',
+		data: data
+	})
+}

src/views/business/outsource/form.vue

@@ -22,7 +22,14 @@
 					<!-- <span>关闭</span> -->
 				</div>
 			</div>
-			<el-form ref="formRef" class="master-container" :model="form" :rules="rules" label-width="120px">
+			<el-form
+				ref="formRef"
+				class="master-container"
+				:model="form"
+				v-loading="loading"
+				:rules="rules"
+				label-width="120px"
+			>
 				<el-row :gutter="20">
 					<el-col :span="6">
 						<el-form-item label="单据号" prop="formCode">
@@ -57,7 +64,7 @@
 					</el-col>
 					<el-col :span="6">
 						<el-form-item label="送货方式" prop="deliveryMethod">
-							<el-select v-if="editStatus" v-model="form.deliveryMethod" clearable placeholder="请选择">
+							<el-select v-if="editStatus" v-model="form.deliveryMethod" placeholder="请选择">
 								<el-option v-for="dict in deliveryMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
 							</el-select>
 							<span v-else>{{ form.deliveryMethod }}</span>
@@ -89,12 +96,20 @@
 					</el-col>
 					<el-col :span="6">
 						<el-form-item label="带箱方式：" prop="packagingMethod">
-							<el-select v-if="editStatus" v-model="form.packagingMethod" clearable placeholder="请选择">
+							<el-select v-if="editStatus" v-model="form.packagingMethod" placeholder="请选择">
 								<el-option v-for="dict in packagingMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
 							</el-select>
 							<span v-else>{{ form.packagingMethod }}</span>
 						</el-form-item>
 					</el-col>
+					<el-col :span="6">
+						<el-form-item label="结算方式：" prop="settlementType">
+							<el-select v-if="editStatus" v-model="form.settlementType" disabled placeholder="请选择">
+								<el-option v-for="dict in settlementType" :key="dict.value" :label="dict.label" :value="dict.value" />
+							</el-select>
+							<span v-else>{{ form.settlementType }}</span>
+						</el-form-item>
+					</el-col>
 					<el-col :span="6">
 						<el-form-item label="备注" prop="remark">
 							<el-input v-if="editStatus" v-model="form.remark" placeholder="请输入备注" />
@@ -137,7 +152,7 @@
 								<span v-else>{{ scope.row.newCarrier }}</span>
 							</template>
 						</el-table-column>
-						<el-table-column label="外协工序" align="center" prop="new_carrier" width="320">
+						<el-table-column label="外协工序" align="center" prop="processNames" width="320">
 							<template #default="scope">
 								<el-input v-if="editStatus" v-model="scope.row.processNames" readonly placeholder="请选择工序">
 									<template #append>
@@ -150,7 +165,7 @@
 						<el-table-column label="备注" align="center" prop="remark">
 							<template #default="scope">
 								<el-input v-if="editStatus" v-model="scope.row.remark" placeholder="备注" />
-								<span v-else>{{ scope.row.processNames }}</span>
+								<span v-else>{{ scope.row.remark }}</span>
 							</template>
 						</el-table-column>
 						<el-table-column
@@ -202,12 +217,16 @@ const props = defineProps({
 		type: Array,
 		default: []
 	},
+	settlementType: {
+		type: Array,
+		default: []
+	},
 	packagingMethod: {
 		type: Array,
 		default: []
 	}
 })
-const { getList, deliveryMethod, packagingMethod } = toRefs(props)
+const { getList, deliveryMethod, packagingMethod, settlementType } = toRefs(props)
 /** 字典数组区 */
 /** 表单抽屉 页变量 */
 
@@ -230,11 +249,8 @@ function open(id) {
 	reset()
 	visible.value = true
 	if (id) {
-		getOrder(id).then((response) => {
-			form.value = response.data
-			form.value.detail = []
-			editStatus.value = false
-		})
+		form.value.id = id
+		getForm()
 	} else {
 		editStatus.value = true
 	}
@@ -307,7 +323,8 @@ const handleSingleSelectedSupplier = (data) => {
 	console.log(data)
 	form.value.supplierId = data.id
 	form.value.supplierName = data.name
-	form.value.deliveryMethod = data.deliveryMethod.toString()
+	form.value.deliveryMethod = data.deliveryMethod
+	form.value.settlementType = data.settlementType
 }
 
 /***************************** 产品对话框相关 *****************************/

src/views/business/outsource/index.vue

@@ -88,8 +88,21 @@
 						</template>
 					</el-table-column>
 					<el-table-column label="外协商名称" align="center" prop="supplierName" width="320" />
-					<el-table-column label="送货方式" align="center" prop="deliveryMethod" width="120" />
-					<el-table-column label="带箱方式" align="center" prop="packagingMethod" width="120" />
+					<el-table-column label="结算方式" align="center" prop="settlementType" width="120">
+						<template #default="scope">
+							<dict-tag :options="settlement_type" :value="scope.row.settlementType" />
+						</template>
+					</el-table-column>
+					<el-table-column label="送货方式" align="center" prop="deliveryMethod" width="120">
+						<template #default="scope">
+							<dict-tag :options="delivery_method" :value="scope.row.deliveryMethod" />
+						</template>
+					</el-table-column>
+					<el-table-column label="带箱方式" align="center" prop="packagingMethod" width="120">
+						<template #default="scope">
+							<dict-tag :options="packaging_method" :value="scope.row.packagingMethod" />
+						</template>
+					</el-table-column>
 					<el-table-column label="备注" align="center" prop="remark" />
 					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="144">
 						<template #default="scope">
@@ -131,6 +144,7 @@
 			ref="orderRef"
 			:get-list="getList"
 			:delivery-method="delivery_method"
+			:settlement-type="settlement_type"
 			:packaging-method="packaging_method"
 		/>
 	</div>
@@ -142,6 +156,7 @@ import orderForm from './form'
 const { proxy } = getCurrentInstance()
 /** 字典数组区 */
 const { delivery_method } = proxy.useDict('delivery_method')
+const { settlement_type } = proxy.useDict('settlement_type')
 const { packaging_method } = proxy.useDict('packaging_method')
 
 const orderList = ref([])

src/views/business/supplier/DialogSetAdmin.vue

@@ -0,0 +1,118 @@
+<template>
+	<el-dialog title="设置管理员" height="400px" v-model="visible" width="500px" append-to-body draggable>
+		<div class="form-container">
+			<!-- 主表 -->
+			<el-form
+				ref="formRef"
+				class="master-container"
+				v-loading="loading"
+				:model="form"
+				:rules="rules"
+				label-width="64px"
+			>
+				<el-form-item label="公司名" prop="supplierName">
+					<el-input v-model.trim="form.supplierName" readonly placeholder="公司名" />
+				</el-form-item>
+				<el-form-item label="用户名" prop="username">
+					<el-input v-model.trim="form.username" placeholder="用户名" />
+				</el-form-item>
+				<el-form-item label="备注" prop="remark">
+					<el-input v-model.trim="form.remark" placeholder="备注" />
+				</el-form-item>
+			</el-form>
+		</div>
+		<template #footer>
+			<el-button type="primary" icon="Check" @click="handleSave">确 定</el-button>
+			<el-button type="warning" icon="Key" :disabled="!form.id" @click="handleInitPsw">初始化密码</el-button>
+			<el-button type="danger" icon="Close" @click="handleCancel">取 消</el-button>
+		</template>
+	</el-dialog>
+</template>
+<script setup>
+import { getAdminInfo, saveAdmin, initAdminPsw } from '@/api/business/supplier'
+const { proxy } = getCurrentInstance()
+
+/** 产品表单变量 */
+const loading = ref(false)
+const visible = ref(false)
+const data = reactive({
+	form: {},
+	rules: {
+		username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
+	}
+})
+const { form, rules } = toRefs(data)
+
+/***********************  方法区  ****************************/
+/** 打开抽屉 */
+function open(data) {
+	reset()
+	visible.value = true
+	loading.value = true
+	form.value.supplierId = data.id
+	form.value.supplierName = data.name
+	getAdminInfo(form.value.supplierId).then((res) => {
+		console.log(res.data)
+		if (res.data) {
+			form.value = res.data
+		}
+		loading.value = false
+	})
+}
+
+/** 取消按钮 */
+function handleCancel() {
+	visible.value = false
+	reset()
+}
+
+/** 表单重置 */
+function reset() {
+	form.value = {
+		id: null,
+		supplierId: '0',
+		supplierName: '',
+		username: '',
+		isAdmin: '1',
+		remark: ''
+	}
+	proxy.resetForm('formRef')
+}
+
+/** 提交按钮 */
+function handleSave() {
+	proxy.$refs['formRef'].validate((valid) => {
+		if (valid) {
+			saveAdmin(form.value).then((res) => {
+				if (res.code === 200) {
+					proxy.$modal.msgSuccess('操作成功')
+				} else {
+					proxy.$modal.msgWarn(res.msg)
+				}
+				visible.value = false
+			})
+		}
+	})
+}
+
+/** 初始化密码 */
+function handleInitPsw() {
+	proxy.$refs['formRef'].validate((valid) => {
+		if (valid) {
+			initAdminPsw(form.value).then((res) => {
+				if (res.code === 200) {
+					proxy.$modal.msgSuccess('操作成功')
+				} else {
+					proxy.$modal.msgWarn(res.msg)
+				}
+				visible.value = false
+			})
+		}
+	})
+}
+
+/** 暴露给父组件的方法 */
+defineExpose({
+	open
+})
+</script>

src/views/business/supplier/form.vue

@@ -11,7 +11,12 @@
 				</el-form-item>
 				<el-form-item label="发货方式" prop="deliveryMethod">
 					<el-select v-model="form.deliveryMethod" placeholder="请选择">
-						<el-option v-for="dict in deliveryMethod" :key="dict.value" :label="dict.label" :value="dict.value - 0" />
+						<el-option v-for="dict in deliveryMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="结算方式" prop="settlementType">
+					<el-select v-model="form.settlementType" placeholder="请选择">
+						<el-option v-for="dict in settlementType" :key="dict.value" :label="dict.label" :value="dict.value" />
 					</el-select>
 				</el-form-item>
 				<el-form-item label="损耗上限(%)" prop="lossLimit">
@@ -36,6 +41,10 @@ const props = defineProps({
 	deliveryMethod: {
 		type: Array,
 		default: []
+	},
+	settlementType: {
+		type: Array,
+		default: []
 	}
 })
 /** 产品表单变量 */
@@ -75,7 +84,8 @@ function reset() {
 	form.value = {
 		id: null,
 		mnemonicCode: '',
-		deliveryMethod: '',
+		deliveryMethod: '1',
+		settlementType: '1',
 		lossLimit: 0.0,
 		remark: ''
 	}

src/views/business/supplier/index.vue

@@ -44,17 +44,31 @@
 						<el-table-column type="index" label="行号" width="50" align="center" />
 						<el-table-column label="外协商名称" width="320" align="center" prop="name" />
 						<el-table-column label="助记码" width="120" align="center" prop="mnemonicCode" />
-						<el-table-column label="发货方式" width="80" align="center" prop="deliveryMethod">
+						<el-table-column label="发货方式" width="96" align="center" prop="deliveryMethod">
 							<template #default="scope">
 								<dict-tag :options="delivery_method" :value="scope.row.deliveryMethod" />
 							</template>
 						</el-table-column>
-						<el-table-column label="损耗上限" width="80" align="center" prop="lossLimit">
+						<el-table-column label="结算方式" width="96" align="center" prop="deliveryMethod">
+							<template #default="scope">
+								<dict-tag :options="settlement_type" :value="scope.row.settlementType" />
+							</template>
+						</el-table-column>
+						<el-table-column label="损耗上限" width="96" align="center" prop="lossLimit">
 							<template #default="scope"> {{ scope.row.lossLimit }}% </template>
 						</el-table-column>
 						<el-table-column label="备注" align="center" prop="remark" />
-						<el-table-column label="操作" width="132" align="center">
+						<el-table-column label="操作" width="240" align="center">
 							<template #default="scope">
+								<el-button
+									v-hasPermi="['system:supplier:edit']"
+									link
+									type="primary"
+									icon="User"
+									@click="handleSetSupplierAdmin(scope.row)"
+								>
+									设置管理员
+								</el-button>
 								<el-button
 									v-hasPermi="['system:supplier:edit']"
 									link
@@ -197,7 +211,7 @@
 											v-for="dict in settlement_type"
 											:key="dict.value"
 											:label="dict.label"
-											:value="dict.value - 0"
+											:value="dict.value"
 										/>
 									</el-select>
 									<dict-tag v-else :options="settlement_type" :value="scope.row.settlementType" />
@@ -233,7 +247,12 @@
 			</section>
 		</section>
 		<!-- 供应商表单 -->
-		<dialog-form ref="formRef" @handleSaveSuccess="handleQuery" :delivery-method="delivery_method" />
+		<dialog-form
+			ref="formRef"
+			@handleSaveSuccess="handleQuery"
+			:delivery-method="delivery_method"
+			:settlement-type="settlement_type"
+		/>
 		<!-- 产品添加对话框 -->
 		<dialog-products ref="productsRef" :supplier-id="currentSupplier.id" :multiple-selected="handleProductSelected" />
 		<!-- 工序添加对话框 -->
@@ -242,6 +261,8 @@
 			:product-id="currentProduct.productId"
 			:multiple-selected="handleProcessSelected"
 		/>
+		<!-- 管理员设置 -->
+		<dialog-set-admin ref="setAdminRef" />
 	</div>
 </template>
 
@@ -260,6 +281,7 @@ import {
 import dialogForm from './form'
 import dialogProducts from './DialogProducts'
 import dialogProcesses from './DialogProcesses'
+import dialogSetAdmin from './DialogSetAdmin'
 const { proxy } = getCurrentInstance()
 const { delivery_method } = proxy.useDict('delivery_method')
 const { settlement_type } = proxy.useDict('settlement_type')
@@ -351,6 +373,11 @@ const handleDelete = (row) => {
 		.catch(() => {})
 }
 
+/** 设置管理员 **/
+const handleSetSupplierAdmin = (data) => {
+	proxy.$refs.setAdminRef.open(data)
+}
+
 /**************************************** 产品相关 ****************************************/
 /** 产品打开对话框方法 */
 const handleShowProductsDialog = () => {
@@ -456,7 +483,7 @@ const handleProcessSelected = (selection) => {
 			processCode: item.processCode,
 			processAlias: item.processAlias,
 			price: 0.0,
-			sttlementType: 1,
+			settlementType: currentSupplier.value.settlementType,
 			remark: ''
 		}
 		dataList.push(newProcess)

src/views/login.vue

@@ -1,27 +1,35 @@
 <template>
-  <div class="login">
-    <div class="login-l">
-      <div><span>德迈仕</span>数字化平台</div>
-    </div>
-    <div class="login-r">
-      <img class="logo" referrerpolicy="no-referrer" src="@/assets/logo/logo.png" />
-      <span class="title">欢迎使用德迈仕数字化平台</span>
-      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-        <el-form-item prop="username">
-          <el-input v-model.trim="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
-            <template #prefix>
-              <svg-icon icon-class="user" class="el-input__icon input-icon" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input v-model.trim="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" show-password @keyup.enter="handleLogin">
-            <template #prefix>
-              <svg-icon icon-class="password" class="el-input__icon input-icon" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <!-- <el-form-item prop="code" v-if="captchaEnabled">
+	<div class="login">
+		<div class="login-l">
+			<div><span>德迈仕</span>数字化平台</div>
+		</div>
+		<div class="login-r">
+			<img class="logo" referrerpolicy="no-referrer" src="@/assets/logo/logo.png" />
+			<span class="title">欢迎使用德迈仕数字化平台</span>
+			<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+				<el-form-item prop="username">
+					<el-input v-model.trim="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
+						<template #prefix>
+							<svg-icon icon-class="user" class="el-input__icon input-icon" />
+						</template>
+					</el-input>
+				</el-form-item>
+				<el-form-item prop="password">
+					<el-input
+						v-model.trim="loginForm.password"
+						type="password"
+						size="large"
+						auto-complete="off"
+						placeholder="密码"
+						show-password
+						@keyup.enter="handleLogin"
+					>
+						<template #prefix>
+							<svg-icon icon-class="password" class="el-input__icon input-icon" />
+						</template>
+					</el-input>
+				</el-form-item>
+				<!-- <el-form-item prop="code" v-if="captchaEnabled">
           <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
             <template #prefix>
               <svg-icon icon-class="validCode" class="el-input__icon input-icon" />
@@ -31,28 +39,31 @@
             <img :src="codeUrl" @click="getCode" class="login-code-img" />
           </div>
         </el-form-item> -->
-        <div class="tool">
-          <el-checkbox v-model="loginForm.rememberMe">5天自动登录</el-checkbox>
-          <span style="font-size: 14px">忘记密码</span>
-        </div>
-        <el-form-item style="width: 100%">
-          <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
-            <span v-if="!loading">立即登录</span>
-            <span v-else>登 录 中...</span>
-          </el-button>
-          <!--
+				<div class="tool">
+					<el-checkbox v-model="loginForm.rememberMe">5天自动登录</el-checkbox>
+					<span style="font-size: 14px">忘记密码</span>
+				</div>
+				<el-form-item style="width: 100%">
+					<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
+						<span v-if="!loading">立即登录</span>
+						<span v-else>登 录 中...</span>
+					</el-button>
+					<!--
           <div style="float: right;" v-if="register">
             <router-link class="link-type" :to="'/register'">立即注册</router-link>
           </div>
           -->
-        </el-form-item>
-      </el-form>
-      <!--  底部  -->
-      <div class="login-footer">
-        <span>Copyright © 2023-2033 <a href="http://www.cdms-china.com/" target="_blank">www.cdms-china.com</a> All Rights Reserved.</span>
-      </div>
-    </div>
-  </div>
+				</el-form-item>
+			</el-form>
+			<!--  底部  -->
+			<div class="login-footer">
+				<span
+					>Copyright © 2023-2033 <a href="http://www.cdms-china.com/" target="_blank">www.cdms-china.com</a> All Rights
+					Reserved.</span
+				>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script setup>
@@ -66,17 +77,17 @@ const router = useRouter()
 const { proxy } = getCurrentInstance()
 
 const loginForm = ref({
-  username: '',
-  password: '',
-  rememberMe: false,
-  code: '',
-  uuid: ''
+	username: '',
+	password: '',
+	rememberMe: false,
+	code: '',
+	uuid: ''
 })
 
 const loginRules = {
-  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
-  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
-  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
+	username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
+	password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
+	code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
 }
 
 const loading = ref(false)
@@ -88,39 +99,39 @@ const loading = ref(false)
 const redirect = ref(undefined)
 
 function handleLogin() {
-  proxy.$refs.loginRef.validate((valid) => {
-    if (valid) {
-      loading.value = true
-      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
-      if (loginForm.value.rememberMe) {
-        Cookies.set('username', loginForm.value.username, { expires: 30 })
-        Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 })
-        Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
-      } else {
-        // 否则移除
-        Cookies.remove('username')
-        Cookies.remove('password')
-        Cookies.remove('rememberMe')
-      }
-      // listEmployee({ userName: loginForm.value.username }).then(res =>{})
-      // 调用action的登录方法
-
-      userStore
-        .login(loginForm.value)
-        .then(() => {
-          router.push({ path: redirect.value || '/' })
-        })
-        .catch(() => {
-          loading.value = false
-          /*
+	proxy.$refs.loginRef.validate((valid) => {
+		if (valid) {
+			loading.value = true
+			// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
+			if (loginForm.value.rememberMe) {
+				Cookies.set('username', loginForm.value.username, { expires: 30 })
+				Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 })
+				Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
+			} else {
+				// 否则移除
+				Cookies.remove('username')
+				Cookies.remove('password')
+				Cookies.remove('rememberMe')
+			}
+			// listEmployee({ userName: loginForm.value.username }).then(res =>{})
+			// 调用action的登录方法
+
+			userStore
+				.login(loginForm.value)
+				.then(() => {
+					router.push({ path: redirect.value || '/' })
+				})
+				.catch(() => {
+					loading.value = false
+					/*
           // 重新获取验证码
           if (captchaEnabled.value) {
             getCode()
           }
           */
-        })
-    }
-  })
+				})
+		}
+	})
 }
 
 /*
@@ -136,14 +147,14 @@ function getCode() {
 */
 
 function getCookie() {
-  const username = Cookies.get('username')
-  const password = Cookies.get('password')
-  const rememberMe = Cookies.get('rememberMe')
-  loginForm.value = {
-    username: username === undefined ? loginForm.value.username : username,
-    password: password === undefined ? loginForm.value.password : decrypt(password),
-    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-  }
+	const username = Cookies.get('username')
+	const password = Cookies.get('password')
+	const rememberMe = Cookies.get('rememberMe')
+	loginForm.value = {
+		username: username === undefined ? loginForm.value.username : username,
+		password: password === undefined ? loginForm.value.password : decrypt(password),
+		rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+	}
 }
 
 // getCode()
@@ -152,101 +163,101 @@ getCookie()
 
 <style lang="scss" scoped>
 .login {
-  position: relative;
-  display: flex;
-  height: 100%;
-  background-size: cover;
-
-  .login-l {
-    display: flex;
-    flex-direction: column;
-    flex: 3;
-    background: url('../assets/images/login-bg.jpg') no-repeat center center/cover #efefef;
-    align-items: center;
-
-    div {
-      color: #fff;
-    }
-    div:first-child {
-      padding-top: 120px;
-      font-size: 48px;
-      font-weight: bold;
-      letter-spacing: 4px;
-
-      span {
-        color: #00fff6;
-      }
-    }
-  }
-  .login-r {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: 2;
-    justify-content: center;
-    align-items: center;
-
-    .logo {
-      width: 120px;
-    }
+	position: relative;
+	display: flex;
+	height: 100%;
+	background-size: cover;
 
-    .title {
-      color: #333;
-      font-size: 20px;
-      font-family: 微软雅黑;
-      text-align: center;
-      margin-top: 16px;
-      letter-spacing: 2px;
-    }
+	.login-l {
+		display: flex;
+		flex-direction: column;
+		flex: 3;
+		background: url('../assets/images/login-bg.jpg') no-repeat center center/cover #efefef;
+		align-items: center;
 
-    .login-form {
-      width: 400px;
-      padding-top: 40px;
-      .el-input {
-        height: 48px;
-        input {
-          height: 40px;
-        }
-      }
-    }
+		div {
+			color: #fff;
+		}
+		div:first-child {
+			padding-top: 120px;
+			font-size: 48px;
+			font-weight: bold;
+			letter-spacing: 4px;
 
-    .tool {
-      display: flex;
-      margin-bottom: 25px;
-      align-items: center;
-      justify-content: space-between;
+			span {
+				color: #00fff6;
+			}
+		}
+	}
+	.login-r {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: 2;
+		justify-content: center;
+		align-items: center;
 
-      span {
-        color: #409eff;
-        cursor: pointer;
-      }
-    }
+		.logo {
+			width: 120px;
+		}
 
-    button {
-      height: 48px;
-      letter-spacing: 2px;
-    }
+		.title {
+			color: #333;
+			font-size: 20px;
+			font-family: 微软雅黑;
+			text-align: center;
+			margin-top: 16px;
+			letter-spacing: 2px;
+		}
 
-    .warning-text {
-      font-size: 14px;
-      text-align: center;
-      color: #333;
+		.login-form {
+			width: 400px;
+			padding-top: 40px;
+			.el-input {
+				height: 48px;
+				input {
+					height: 40px;
+				}
+			}
+		}
 
-      a {
-        color: #409eff;
-        text-decoration: none;
-      }
-    }
-    .login-footer {
-      position: fixed;
-      bottom: 0;
-      width: 100%;
-      text-align: center;
-      color: #333;
-      font-family: Arial;
-      font-size: 12px;
-      letter-spacing: 1px;
-    }
-  }
+		.tool {
+			display: flex;
+			margin-bottom: 25px;
+			align-items: center;
+			justify-content: space-between;
+
+			span {
+				color: #409eff;
+				cursor: pointer;
+			}
+		}
+
+		button {
+			height: 48px;
+			letter-spacing: 2px;
+		}
+
+		.warning-text {
+			font-size: 14px;
+			text-align: center;
+			color: #333;
+
+			a {
+				color: #409eff;
+				text-decoration: none;
+			}
+		}
+		.login-footer {
+			position: fixed;
+			bottom: 0;
+			width: 100%;
+			text-align: center;
+			color: #333;
+			font-family: Arial;
+			font-size: 12px;
+			letter-spacing: 1px;
+		}
+	}
 }
 </style>