vue-learning/企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue

<!--
 * @Author: Kane
 * @Date: 2023-01-12 14:43:46
 * @LastEditors: Kane
 * @LastEditTime: 2023-01-13 16:53:55
 * @FilePath: \admin_system\src\views\info\StaffInfo.vue
 * @Description: 
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <div class="query_box">
        <el-form inline="true">
            <el-form-item label="员工工号或P13账号：">
                <el-row :gutter="10" class="el-row">
                    <el-col :span="10">
                        <el-input v-model="query_param.staff_code"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="danger">查询</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "staff-info",
    data()
    {
        return {
            query_param: {
                staff_code: "",
            },
        };
    },
};
</script>

<style scoped>
.el-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-label {
    text-align: right;
}

.query_box {
    width: 600px;
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;
}

.query_box:hover {
    box-shadow: 0px 0px 3px 3px #cccccc;
}
</style>