Skip to content

P
pica-admin-IM
提交 563cb74e 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

发送返回等

上级 3e82498e
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 1528 行增加 和 122 行删除
src/views/IM/current-session/index copy.scss 0 → 100644
浏览文件 @ 563cb74e
.current-session-wrap {
.component-content {
display: flex;
flex-direction: row;
min-height: 600px;
min-width: 1200px;
font-size: 14px;
.left {
width: 270px;
// padding: 0 25px 15px;
border-right: 2px solid #f5f5f5;
.l-header {
display: flex;
flex-direction: row;
height: 52px;
justify-content: space-between;
align-items: center;
padding: 0 25px;
& > span:first-child {
font-size: 16px;
}
& > span:last-child {
color: #0d9078;
cursor: pointer;
}
}
.c-num {
padding: 0 25px;
height: 40px;
line-height: 40px;
background: #fffbe6;
}
.session-list {
width: 100%;
height: 100%;
overflow: scroll;
& > .item {
width: 100%;
display: flex;
height: 72px;
flex-direction: row;
align-items: center;
padding: 0 25px;
cursor: pointer;
.img-wrapper {
// position: relative;
// top: 0;
// left: 0;
width: 40px;
height: 40px;
margin-right: 10px;
img {
width: 100%;
height: 100%;
border-radius: 20px;
}
}
& > .desc {
flex: 1;
.top {
display: flex;
flex-direction: row;
justify-content: space-between;
.name {
}
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #999999;
.num {
display: inline-block;
min-width: 16px;
padding: 2px 4px;
border-radius: 8px;
text-align: center;
color: #ffffff;
background: #ff4d4f;
}
& > img {
display: block;
width: 15px;
height: 15px;
padding: 2px 0 2px 4px;
}
}
}
&.current {
background: #f8f9fa;
}
}
}
}
.center {
flex: 1;
.c-header {
padding: 0 25px;
height: 56px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #f5f5f5;
& > .c-header-l {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
& > img {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 12px;
margin-right: 8px;
}
& > .name {
margin-right: 25px;
color: #333333;
}
& > .time-tip {
font-size: 12px;
color: #999999;
}
}
.close-btn {
width: 100px;
color: #c7c8c9;
cursor: pointer;
}
}
.msg-content {
// width: 100%;
// height: 650px;
overflow: scroll;
display: flex;
flex-direction: column;
margin: 10px 20px;
.msg-item {
display: flex;
flex-direction: row;
margin: 12px 0;
.msg-item-img {
width: 44px;
height: 44px;
margin-right: 8px;
& > img {
width: 100%;
height: 100%;
border-radius: 22px;
}
}
.msg-item-detail {
display: flex;
flex-direction: column;
text-align: left;
font-size: 13px;
& > :first-child {
color: #999999;
margin-bottom: 8px;
}
.mid-text-wrapper {
display: flex;
flex-direction: row;
align-items: center;
& > img {
width: 18px;
height: 18px;
margin-right: 8px;
cursor: pointer;
}
}
.mid-text {
padding: 12px 24px;
display: inline-block;
max-width: 520px;
border-radius: 8px;
background: #ebf5fc;
text-align: justify;
color: #333333;
&.no-support {
display: flex;
align-items: center;
& > img {
width: 14px;
height: 14px;
margin-right: 3px;
}
}
}
.link {
color: #2f86f6;
}
& > .mid-pdf {
width: 260px;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
padding: 10px 15px;
background: #f0f1f2;
border-radius: 8px;
min-height: 80px;
cursor: pointer;
.midp-left {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-right: 10px;
.name {
font-size: 13px;
color: #333333;
word-break: break-word;
}
.size {
font-size: 12px;
color: #999999;
}
}
.midp-icon {
width: 36px;
height: 44px;
& > img {
width: 36px;
height: 100%;
border-radius: 3px;
}
}
}
& > .mid-img {
width: 170px;
height: 108px;
cursor: pointer;
& > img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
}
&.cr {
flex-direction: row-reverse;
.msg-item-img {
margin-right: 0;
margin-left: 8px;
}
.msg-item-detail {
text-align: right;
& > .mid-text {
background: #f0f1f2;
}
}
}
}
.split-line {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0;
font-size: 14px;
color: #999999;
&::before {
flex: 1;
content: '';
height: 1px;
margin-right: 18px;
background: #f0f1f2;
}
&::after {
flex: 1;
content: '';
height: 1px;
margin-left: 18px;
background: #f0f1f2;
}
}
.error-mg {
display: inline-block;
max-width: 520px;
// height: 24px;
max-width: 520px;
line-height: 16px;
text-align: left;
border-radius: 20px;
opacity: 0.45;
margin: -2px 0 10px;
padding: 4px 12px;
color: #FFFFFF;
background: #000000;
margin-left: 50px;
&.mr {
margin-left: 0;
margin-right: 50px;
}
}
}
.c-bottom {
position: relative;
top: 0;
left: 0;
display: flex;
flex-direction: row;
margin: 16px 12px 16px 25px;
.cb-icon-wrapper {
position: absolute;
top: 0;
right: 70px;
display: flex;
align-items: center;
height: 44px;
img {
width: 20px;
height: 20px;
margin-right: 16px;
cursor: pointer;
}
}
.send-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 60px;
height: 44px;
background: #f3f6f7;
margin-left: 12px;
border-radius: 8px;
cursor: pointer;
& > img {
width: 24px;
height: 24px;
}
&.active {
background: #0d9078;
}
}
}
}
.right {
width: 240px;
border-left: 2px solid #f5f5f5;
}
background: #fff;
.time {
color: #999999;
}
.small {
font-size: 12px;
}
}
}
\ No newline at end of file
src/views/IM/current-session/index copy.vue 0 → 100644
浏览文件 @ 563cb74e
此差异已折叠。
src/views/IM/current-session/index.scss
浏览文件 @ 563cb74e
...@@ -161,83 +161,99 @@ ...@@ -161,83 +161,99 @@
color: #999999; color: #999999;
margin-bottom: 8px; margin-bottom: 8px;
} }
.mid-text-wrapper { .send-warpper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
& > img { & > .icon {
width: 18px; width: 20px;
height: 18px; height: 20px;
margin-right: 8px; margin-right: 10px;
cursor: pointer;
} }
} .mid-text-wrapper {
.mid-text {
padding: 12px 24px;
display: inline-block;
max-width: 520px;
border-radius: 8px;
background: #ebf5fc;
text-align: justify;
color: #333333;
&.no-support {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
& > img { & > img {
width: 14px; width: 18px;
height: 14px; height: 18px;
margin-right: 3px; margin-right: 8px;
cursor: pointer;
} }
} }
} .mid-text {
.link { padding: 12px 24px;
color: #2f86f6; display: inline-block;
} max-width: 520px;
& > .mid-pdf { border-radius: 8px;
width: 260px; background: #ebf5fc;
display: flex; text-align: justify;
flex-direction: row; color: #333333;
justify-content: space-between; &.no-support {
text-align: left; display: flex;
padding: 10px 15px; align-items: center;
background: #f0f1f2; & > img {
border-radius: 8px; width: 14px;
min-height: 80px; height: 14px;
cursor: pointer; margin-right: 3px;
.midp-left { }
display: flex;
flex-direction: column;
justify-content: space-around;
margin-right: 10px;
.name {
font-size: 13px;
color: #333333;
word-break: break-word;
}
.size {
font-size: 12px;
color: #999999;
} }
} }
.midp-icon { .link {
width: 36px; color: #2f86f6;
height: 44px; }
& > img { & > .mid-pdf {
width: 260px;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
padding: 10px 15px;
background: #f0f1f2;
border-radius: 8px;
min-height: 80px;
cursor: pointer;
.midp-left {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-right: 10px;
.name {
font-size: 13px;
color: #333333;
word-break: break-word;
}
.size {
font-size: 12px;
color: #999999;
}
}
.midp-icon {
width: 36px; width: 36px;
height: 100%; height: 44px;
border-radius: 3px; & > img {
width: 36px;
height: 100%;
border-radius: 3px;
}
} }
} }
} & > .mid-img {
& > .mid-img { display: flex;
width: 170px; flex-direction: row;
height: 108px; align-items: center;
cursor: pointer; cursor: pointer;
& > img { // & > .icon {
width: 100%; // width: 20px;
height: 100%; // height: 20px;
border-radius: 8px; // }
& > .img {
width: 170px;
height: 108px;
border-radius: 8px;
}
} }
} }
} }
&.cr { &.cr {
...@@ -254,6 +270,48 @@ ...@@ -254,6 +270,48 @@
} }
} }
} }
.split-line {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0;
font-size: 14px;
color: #999999;
&::before {
flex: 1;
content: '';
height: 1px;
margin-right: 18px;
background: #f0f1f2;
}
&::after {
flex: 1;
content: '';
height: 1px;
margin-left: 18px;
background: #f0f1f2;
}
}
.error-mg {
display: inline-block;
max-width: 520px;
// height: 24px;
max-width: 520px;
line-height: 16px;
text-align: left;
border-radius: 20px;
opacity: 0.45;
margin: -2px 0 10px;
padding: 4px 12px;
color: #FFFFFF;
background: #000000;
margin-left: 50px;
&.mr {
margin-left: 0;
margin-right: 50px;
}
}
} }
.c-bottom { .c-bottom {
position: relative; position: relative;
...@@ -308,5 +366,27 @@ ...@@ -308,5 +366,27 @@
.small { .small {
font-size: 12px; font-size: 12px;
} }
.ld{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
} }
} }
\ No newline at end of file
src/views/IM/waiting-session/list.vue
浏览文件 @ 563cb74e
...@@ -8,7 +8,11 @@ ...@@ -8,7 +8,11 @@
</div> </div>
<el-table :data="tableData" style="width: 100%" v-loading="loading"> <el-table :data="tableData" style="width: 100%" v-loading="loading">
<el-table-column prop="userName" label="用户名" min-width="50" align="center"></el-table-column> <el-table-column prop="userName" label="用户名" min-width="50" align="center"></el-table-column>
<el-table-column prop="waitTime" label="等待时间" min-width="100" align="center"></el-table-column> <el-table-column prop="waitTime" label="等待时间" min-width="100" align="center">
<template slot-scope="scope">
<span>{{scope.row.waitTime | continueTimesFilter}}</span>
</template>
</el-table-column>
<el-table-column prop="idType" label="用户类型" min-width="50" align="center"> <el-table-column prop="idType" label="用户类型" min-width="50" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.idType | typeFilter}}</span> <span>{{scope.row.idType | typeFilter}}</span>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或