feat: 接入 UserHome 前端业务代码（含真实 src/依赖，保留 projman 标准 CI）
This commit is contained in:
chenxing
@@ -0,0 +1,447 @@
|
||||
@use "sass:color";
|
||||
.default-header {
|
||||
width: 100%;
|
||||
height: var(--headerH);
|
||||
display: flex;
|
||||
padding: 0 32px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.65) 0%,
|
||||
rgba(255, 255, 255, 0.6) 0.02%,
|
||||
rgba(255, 255, 255, 0) 101.19%
|
||||
);
|
||||
&.base-mask {
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.65) 0%,
|
||||
rgba(255, 255, 255, 0.6) 0.02%,
|
||||
rgba(255, 255, 255, 0) 101.19%
|
||||
);
|
||||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
& .logo-box {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
& .operate-container {
|
||||
flex-shrink: 1;
|
||||
& > li {
|
||||
float: left;
|
||||
.icon-box {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 36px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 4px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-box:hover {
|
||||
background: #d0e0eb;
|
||||
}
|
||||
&.active .icon-box {
|
||||
background-color: #d0e0eb;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
height: 36px;
|
||||
margin-right: 2px;
|
||||
background: #fff;
|
||||
border-radius: 34px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
input {
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin-left: 15px;
|
||||
width: 210px;
|
||||
}
|
||||
.icon {
|
||||
margin: 0 8px;
|
||||
// animation: icon-turn 0.3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-animation {
|
||||
0% {
|
||||
display: none;
|
||||
}
|
||||
|
||||
75% {
|
||||
display: none;
|
||||
}
|
||||
100% {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.fade1-enter-active,
|
||||
.fade1-enter-to {
|
||||
animation: fade-animation 0.5s;
|
||||
}
|
||||
|
||||
.fade1-leave-from,
|
||||
.fade1-leave-active {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@keyframes search-animation {
|
||||
0% {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
20% {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
21% {
|
||||
width: 0;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
width: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes icon-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.search-enter-active {
|
||||
& input {
|
||||
animation: search-animation 0.3s ease-in-out;
|
||||
}
|
||||
& .icon {
|
||||
animation: icon-animation 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.search-leave-active {
|
||||
& input {
|
||||
animation: search-animation 0.35s ease-out reverse;
|
||||
}
|
||||
& .icon {
|
||||
animation: icon-animation 0.4s reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-wrap {
|
||||
h3.title {
|
||||
height: 50px;
|
||||
padding: 12px 16px;
|
||||
color: #272829;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
.msg-ul {
|
||||
width: 360px;
|
||||
background: #fff;
|
||||
padding-bottom: 0;
|
||||
border-radius: 10px;
|
||||
max-height: 240px;
|
||||
min-height: 100px;
|
||||
li {
|
||||
height: 46px;
|
||||
padding: 5px 18px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
line-height: 36px;
|
||||
border-bottom: 1px dotted #e8eaec;
|
||||
|
||||
h4 {
|
||||
width: calc(100% - 40px);
|
||||
float: left;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.content {
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.read {
|
||||
color: #999999;
|
||||
}
|
||||
a {
|
||||
float: right;
|
||||
height: 32px;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.no-msg-box {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
}
|
||||
.app-name-box {
|
||||
border: none;
|
||||
color: #fff !important;
|
||||
background: #577afb;
|
||||
border-radius: 3px;
|
||||
padding: 6px 8px;
|
||||
font-size: 13px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.fix a img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background-color: #f9f9f9;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
padding: 0 20px;
|
||||
|
||||
font-size: 15px;
|
||||
border-top: 1px solid #e8eaec;
|
||||
|
||||
a.link-all {
|
||||
color: #999999;
|
||||
font-weight: 550;
|
||||
}
|
||||
a.read-all {
|
||||
color: #5979ea;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.role-info {
|
||||
height: 22px;
|
||||
color: #6b8cf4 !important;
|
||||
border-radius: 20px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
display: inline-block;
|
||||
border: 1px solid #6b8cf4;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.userinfo-ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
li {
|
||||
height: 42px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
user-select: none;
|
||||
padding: 0 20px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
span {
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
li:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
li.border {
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
li.header {
|
||||
height: 50px;
|
||||
padding-right: 10px;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
.name {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.8px;
|
||||
|
||||
flex: 0 1 90px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
//规定段落中的文本不进行换行
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roleinfo-wrap {
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
h3.title {
|
||||
height: 50px;
|
||||
padding: 12px 16px;
|
||||
color: #272829;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.roles-ul {
|
||||
max-height: 310px;
|
||||
}
|
||||
.roles-ul li {
|
||||
background-color: #f9f9f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 62px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
// background-color: darken(#f9f9f9, 5%);
|
||||
background-color: color.adjust($color: #f9f9f9, $lightness: -5%);
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.user-wrap {
|
||||
padding: 9px 0;
|
||||
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
flex: auto;
|
||||
.schname-box {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: #656667;
|
||||
}
|
||||
}
|
||||
&:last-child .user-wrap {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.roles-ul li.acitve {
|
||||
cursor: default;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.wallpaper-wrap {
|
||||
min-height: 500px;
|
||||
max-height: 500px;
|
||||
padding: 16px;
|
||||
}
|
||||
.wallpaper-ul {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
li {
|
||||
width: 140px;
|
||||
height: 104px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: cover no-repeat;
|
||||
}
|
||||
.context-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.check-box {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
label {
|
||||
font-size: 12px;
|
||||
// width: 30px;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
border-bottom-right-radius: 4px;
|
||||
background-color: #14ae5c;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
li .add-wrap {
|
||||
width: 140px;
|
||||
height: 104px;
|
||||
cursor: pointer;
|
||||
}
|
||||
li .add-box {
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
padding: 27px 0;
|
||||
box-sizing: content-box;
|
||||
p {
|
||||
color: #939393;
|
||||
}
|
||||
}
|
||||
li .mask-box {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: #fff;
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.menuwapper-modal {
|
||||
}
|
||||
Reference in New Issue
Block a user