软件工程-人事管理系统（二）

~~

人事管理系统（二）

~~
人事管理系统的游客界面（这几天准备软考，代码敲的有所懈怠（手动狗头））
游客界面的目的是让游客可以不用注册登录就可以体验系统的功能
主流色调依旧是大气的黑金，布局采用上下盒子布局，下盒子拆分成两个盒子，上盒子用来放标题和返回按钮，下盒子左边用来存放功能按钮，右侧用来做欢迎游客进入的页面，效果图如下

此页面除了中间的欢迎文字，其余文字均使用了渐变的字体样式，个人认为看上去还算看的过去，但仍有些突兀的地方没有解决，比如右上角的返回主界面按钮为了突出显示，加了左边框后导致了按钮有种下沉的感觉，背景图片在本地加载时间过长，页面缩放比例问题（呜呜呜，这也太菜了叭）
下面附部分代码：

html部分

<template>
    <div class="fadiv">
        <div class="headerdiv">
            <button @click="returnhome" class="rethome">返回主界面</button>
            <p class="title">人事管理系统游客界面</p>
        </div>
        <div class="fundiv">
            <button class="deptcon">部门管理</button>
            <button class="deptcon">岗位管理</button>
            <button class="deptcon">入职管理</button>
            <button class="deptcon">试用期管理</button>
            <button class="deptcon">部门调动管理</button>
            <button class="deptcon">岗位调动管理</button>
            <button class="deptcon">员工离职管理</button>
            <button class="deptcon">员工信息管理</button>
            <button class="deptcon">报表管理</button>
        </div>
        <div class="showdiv">
            <p class="litletitle">欢迎来到人事管理系统</p>
        </div>
    </div>
</template>

CSS部分

.fadiv{
    position: fixed;
    width:100%;
    height: 100%;
    margin: -8px;
    background-size: 100% 100%;
}

.headerdiv{
    background: url("../assets/4.jpg");
    background-size: 1920px 80px;
    width:100%;
    height: 80px;
    float: left;
}

.fundiv{
    background-color: pink;
    width: 220px;
    height: 100%;
    float: left;
}

.showdiv{
    float: left;
    background: url("../assets/3.jpg");
    height: 100%;
    width: 1700px;
}

.title{
    font-size: 44px;
    width: 800px;
    text-align: center;
    align-items: center;
    margin-top: 10px;
    margin-left: 400px;
    background: linear-gradient(to right,rgb(141, 116, 15),rgb(114, 113, 109));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.litletitle{
    font-size: 70px;
    color: gold;
    text-align: center;
    align-items: center;
    margin-top: 250px;
}

.rethome{
    width: 200px;
    height: 80px;
    font-size: 22px;
    color: gold;
    float: right;
    background-color:transparent;
    border-left-style: solid;
    border-left-color: gold;
    cursor: pointer;
    background: linear-gradient(to right,red,blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

未来会把上述的问题都修改掉，虽然目前还没有啥头绪，软考必过！冲冲冲！