由于开发了较多小的前端功能点,且前端各个页面并不完全和谐,于是,本周主要对前台页面进行调整和美化。
主要是对咨询页面的部分组成的前端设计和整体美化:
包括smiles输入框和对整体样式的色彩调整、布局调整和效果渲染。渲染代码部分如下:
<style lang="scss" scoped>
.chatHome {
display: flex;
justify-content: center !important;
align-items: center !important;
margin:auto;
.chatLeft {
width: 200px;
align-items: flex-end;
margin-top: 10px;
margin-bottom: 220px;
.title {
color: #fff;
padding-left: 10px;
}
.online-person {
margin-top: 100px;
.onlin-text {
padding-left: 10px;
color: rgb(176, 178, 189);
}
.person-cards-wrapper {
padding-left: 10px;
height: 5vh;
margin-top: 20px;
}
}
}
.leftPanel .el-input {
margin-bottom: 10px;
}
.leftPanel .el-button {
margin-bottom: 10px;
}
.chatMiddle {
display: flex;
justify-content: center;
align-items: flex-end;
padding-top: 5px;
padding-bottom: 45px;
}
.leftPanel {
width: 100%;
text-align: center;
}
.input-container {
margin-bottom: 15px;
display: inline-block;
width: 80%;
height: 90px;
box-shadow: 0 4px 8px rgba(105, 105, 105, 0.3);
border: 2px solid rgb(0, 0, 0);
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
}
.input-style {
width:90%;
height: 60px;
border: none;
border-radius: 8px;
padding: 12px;
box-sizing: border-box;
}
.button-style {
width: 80%;
height: 50px;
margin: 20px 0px;
border: 2px solid rgb(0, 0, 0);
background-color: transparent;
color: black;
}
.button-style:hover {
background-color: #f0f0f0;
}
.button-style:active {
background-color: #cccccc;
}
.chatRight {
flex: 1;
padding-right: 30px;
.showIcon {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 50px);
.icon-snapchat {
width: 200px;
height: 280px;
font-size: 300px;
// color: rgb(28, 30, 44);
}
}
}
}
</style>