opt: adjust styles for ItemList component, cut string for chat role's hello message

This commit is contained in:
RockYang
2023-10-16 10:46:10 +08:00
parent d2a8d655c8
commit a80d01209c
14 changed files with 221 additions and 139 deletions

View File

@@ -13,8 +13,44 @@
.page-apps .inner {
display: flex;
color: #fff;
padding: 20px;
padding: 15px;
overflow-y: visible;
overflow-x: hidden;
}
.page-apps .inner .left-menu {
width: 160px;
.page-apps .inner .list-box .app-item {
border: 1px solid #666;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease; /* 添加过渡效果 */
}
.page-apps .inner .list-box .app-item .el-image {
padding: 6px;
}
.page-apps .inner .list-box .app-item .el-image .el-image__inner {
border-radius: 10px;
}
.page-apps .inner .list-box .app-item .title {
display: flex;
padding: 10px;
}
.page-apps .inner .list-box .app-item .title .name {
width: 100%;
text-align: left;
font-size: 16px;
font-weight: bold;
color: #47fff1;
}
.page-apps .inner .list-box .app-item .title .opt {
position: relative;
top: -5px;
}
.page-apps .inner .list-box .app-item .hello-msg {
height: 60px;
padding: 10px;
font-size: 14px;
color: #999;
}
.page-apps .inner .list-box .app-item:hover {
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
}

View File

@@ -52,9 +52,6 @@
}
.hello-msg {
overflow: hidden;
white-space normal
text-overflow: ellipsis;
height 60px
padding 10px
font-size 14px

View File

@@ -176,6 +176,11 @@
.page-mj .inner .task-list-box .finish-job-list .job-item {
width: 100%;
height: 100%;
border: 1px solid #666;
padding: 6px;
overflow: hidden;
border-radius: 6px;
transition: all 0.3s ease; /* 添加过渡效果 */
}
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line {
margin: 6px 0;
@@ -185,11 +190,11 @@
flex-flow: row;
}
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li {
margin-right: 10px;
margin-right: 6px;
}
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
padding: 3px 0;
width: 44px;
width: 40px;
text-align: center;
border-radius: 5px;
display: block;
@@ -204,10 +209,14 @@
font-size: 20px;
cursor: pointer;
}
.page-mj .inner .task-list-box .finish-job-list .job-item:hover {
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
}
.page-mj .inner .task-list-box .el-image {
width: 100%;
height: 100%;
max-height: 240px;
overflow: visible;
}
.page-mj .inner .task-list-box .el-image img {
height: 240px;
@@ -224,16 +233,17 @@
height: 100%;
min-height: 200px;
color: #fff;
height: 240px;
}
.page-mj .inner .task-list-box .el-image .image-slot .iconfont {
font-size: 50px;
margin-bottom: 10px;
}
.page-mj .inner .task-list-box .el-image.upscale {
max-height: 304px;
max-height: 310px;
}
.page-mj .inner .task-list-box .el-image.upscale img {
height: 304px;
height: 310px;
}
.page-mj .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img {
width: auto;

View File

@@ -99,6 +99,11 @@
.page-sd .inner .task-list-box .finish-job-list .job-item {
width: 100%;
height: 100%;
border: 1px solid #666;
padding: 6px;
overflow: hidden;
border-radius: 6px;
transition: all 0.3s ease; /* 添加过渡效果 */
}
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line {
margin: 6px 0;
@@ -108,11 +113,11 @@
flex-flow: row;
}
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li {
margin-right: 10px;
margin-right: 6px;
}
.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
padding: 3px 0;
width: 44px;
width: 40px;
text-align: center;
border-radius: 5px;
display: block;
@@ -127,10 +132,14 @@
font-size: 20px;
cursor: pointer;
}
.page-sd .inner .task-list-box .finish-job-list .job-item:hover {
box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
transform: translateY(-10px); /* 向上移动10像素 */
}
.page-sd .inner .task-list-box .el-image {
width: 100%;
height: 100%;
max-height: 240px;
overflow: visible;
}
.page-sd .inner .task-list-box .el-image img {
height: 240px;
@@ -147,16 +156,17 @@
height: 100%;
min-height: 200px;
color: #fff;
height: 240px;
}
.page-sd .inner .task-list-box .el-image .image-slot .iconfont {
font-size: 50px;
margin-bottom: 10px;
}
.page-sd .inner .task-list-box .el-image.upscale {
max-height: 304px;
max-height: 310px;
}
.page-sd .inner .task-list-box .el-image.upscale img {
height: 304px;
height: 310px;
}
.page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img {
width: auto;
@@ -180,6 +190,15 @@
display: flex;
justify-content: center;
}
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon {
font-size: 60px;
}
.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
background-color: #25262b;
padding: 1rem 1.5rem;

View File

@@ -102,6 +102,15 @@
display: flex;
justify-content: center;
}
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon {
font-size: 60px;
}
.page-images-wall .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info {
background-color: #25262b;
padding: 1rem 1.5rem;

View File

@@ -44,6 +44,7 @@
padding 6px
overflow hidden
border-radius 6px
transition: all 0.3s ease; /* */
.opt {
.opt-line {
@@ -54,7 +55,7 @@
flex-flow row
li {
margin-right 10px
margin-right 6px
a {
padding 3px 0
@@ -80,6 +81,11 @@
}
}
&:hover {
box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* */
transform: translateY(-10px); /* 10 */
}
}
}
@@ -87,7 +93,7 @@
.el-image {
width 100%
height 100%
max-height 240px
overflow visible
img {
height 240px
@@ -108,6 +114,7 @@
height 100%
min-height 200px
color #ffffff
height 240px
.iconfont {
font-size 50px