Skip to content

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

解决bug等

上级 5c4cd9a0
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 192 行增加 和 1363 行删除
src/main.js
浏览文件 @ c834c252
......@@ -13,10 +13,12 @@ import 'element-ui/lib/theme-chalk/index.css';
import vViewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
import ClipboardJS from 'clipboard';
// import '@/utils/directive';
import '@/utils/directive';
Vue.prototype.ClipboardJS = ClipboardJS;
Vue.use(vViewer);
Vue.use(vViewer, {
button: false
});
// 可调试
// Vue.config.devtools = true;
......
src/router/router.js
浏览文件 @ c834c252
......@@ -9,7 +9,6 @@ const searchMessageDetail = r => require.ensure([], () => r(require('../views/IM
// 当前会话
const currentSessionList = r => require.ensure([], () => r(require('../views/IM/current-session/index.vue')), 'currentMessageIndex')
const currentSessionDetail = r => require.ensure([], () => r(require('../views/IM/current-session/detail.vue')), 'currentMessageDetail')
// 我要群发
const chainMessage = r => require.ensure([], () => r(require('../views/IM/chain-message/index.vue')), 'chainMessage')
......@@ -38,9 +37,6 @@ export default [{
}, {
path: '/current-session-list',
component: currentSessionList
}, {
path: '/current-session-detail',
component: currentSessionDetail
}, {
path: '/chain-message',
component: chainMessage
......
src/style/common.scss
浏览文件 @ c834c252
......@@ -260,4 +260,8 @@ html,body{
.link-form .el-form-item {
margin-bottom: 15px;
}
}
.viewer-button.viewer-close {
display: none;
}
\ No newline at end of file
src/utils/directive.js
浏览文件 @ c834c252
......@@ -7,7 +7,7 @@ Vue.directive('loadmore', {
console.log(SELECTWRAP_DOM);
let flag = true;
SELECTWRAP_DOM.addEventListener('scroll', function () {
console.log(this.scrollHeight, this.scrollTop, this.clientHeight);
// console.log(this.scrollHeight, this.scrollTop, this.clientHeight);
const CONDITION = this.scrollTop <= 20;
if (CONDITION) {
if(flag) {
......
src/views/IM/current-session/index copy.scss 已删除 100644 → 0
浏览文件 @ 5c4cd9a0
.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 已删除 100644 → 0
浏览文件 @ 5c4cd9a0
此差异已折叠。
src/views/IM/current-session/index.vue
浏览文件 @ c834c252
......@@ -41,7 +41,7 @@
</li>
</ul>
</article>
<article class="center">
<article class="center" v-loadmore="getOldMSGHistory">
<section class="c-header">
<div class="c-header-l">
<img :src="currentSession.avatarImageUrl" alt />
......@@ -282,69 +282,69 @@ export default {
},
mounted: function() {
(function(window) {
var _element = document.querySelector(".scroll-box"),
_refreshText = document.querySelector(".refreshText"),
_startPos = 0,
_transitionHeight = 0,
_isMousedown = false,
_canRefresh = false;
_element.addEventListener(
"mousedown",
function(e) {
var event = e || window.event;
_isMousedown = true;
_canRefresh = false;
console.log("##########", event);
console.log("初始位置：", event.pageX);
_startPos = event.pageX;
_element.style.position = "relative";
_element.style.transition = "transform 0s";
},
false
);
_element.addEventListener(
"mousemove",
function(e) {
if (!_isMousedown) return;
var event = e || window.event;
console.log("##########", event);
console.log("当前位置：", event.pageX);
_transitionHeight = event.pageX - _startPos;
if (_transitionHeight > 0 && _transitionHeight < 40) {
_canRefresh = true;
// _refreshText.innerText = "下拉刷新";
_refreshText.innerText = "";
_element.style.transform =
"translateY(" + _transitionHeight + "px)";
if (_transitionHeight > 20) {
// _refreshText.innerText = "释放更新";
_refreshText.innerText = "";
}
}
},
false
);
_element.addEventListener(
"mouseup",
function(e) {
_isMousedown = false;
_element.style.transition = "transform 0.5s ease 1s";
_element.style.transform = "translateY(0px)";
// _refreshText.innerText = "更新中";
_refreshText.innerText = "";
// if (_canRefresh) {
// _canRefresh = false;
_this.getOldMSGHistory();
// }
},
false
);
})(window);
// (function(window) {
// var _element = document.querySelector(".scroll-box"),
// _refreshText = document.querySelector(".refreshText"),
// _startPos = 0,
// _transitionHeight = 0,
// _isMousedown = false,
// _canRefresh = false;
// _element.addEventListener(
// "mousedown",
// function(e) {
// var event = e || window.event;
// _isMousedown = true;
// _canRefresh = false;
// console.log("##########", event);
// console.log("初始位置：", event.pageX);
// _startPos = event.pageX;
// _element.style.position = "relative";
// _element.style.transition = "transform 0s";
// },
// false
// );
// _element.addEventListener(
// "mousemove",
// function(e) {
// if (!_isMousedown) return;
// var event = e || window.event;
// console.log("##########", event);
// console.log("当前位置：", event.pageX);
// _transitionHeight = event.pageX - _startPos;
// if (_transitionHeight > 0 && _transitionHeight < 40) {
// _canRefresh = true;
// // _refreshText.innerText = "下拉刷新";
// _refreshText.innerText = "";
// _element.style.transform =
// "translateY(" + _transitionHeight + "px)";
// if (_transitionHeight > 20) {
// // _refreshText.innerText = "释放更新";
// _refreshText.innerText = "";
// }
// }
// },
// false
// );
// _element.addEventListener(
// "mouseup",
// function(e) {
// _isMousedown = false;
// _element.style.transition = "transform 0.5s ease 1s";
// _element.style.transform = "translateY(0px)";
// // _refreshText.innerText = "更新中";
// _refreshText.innerText = "";
// // if (_canRefresh) {
// // _canRefresh = false;
// // _this.getOldMSGHistory();
// // }
// },
// false
// );
// })(window);
},
methods: {
......
src/views/IM/current-session/test.html
浏览文件 @ c834c252
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
height:100%;
}
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
#wrap{
overflow: hidden;
width:100%;
}
#main{
height:2944px;
top:0;
position: relative;
}
.page{
width:100%;
margin:0;
}
#page1{
background:#E4E6CE;
}
#page2{
background:#6CE26C;
}
#page3{
background:#BF4938;
}
#page4{
background:#2932E1;
}
</style>
<!-- <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page"></div>
<div id="page4" class="page"></div>
</div>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
height: 100%;
}
body,
ul,
li,
a,
p,
div {
padding: 0px;
margin: 0px;
font-size: 14px;
}
#wrap {
overflow: hidden;
width: 100%;
}
#main {
height: 2944px;
top: 0;
position: relative;
}
.page {
width: 100%;
margin: 0;
}
#page1 {
background: #E4E6CE;
}
#page2 {
background: #6CE26C;
}
#page3 {
background: #BF4938;
}
#page4 {
background: #2932E1;
}
</style>
<!-- <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page"></div>
<div id="page4" class="page"></div>
</div>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var hei = document.body.clientHeight;
wrap.style.height = hei + "px";
var obj = document.getElementsByTagName("div");
for(var i=0;i<obj.length;i++){
if(obj[i].className == 'page'){
obj[i].style.height = hei + "px";
}
</div>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var hei = document.body.clientHeight;
wrap.style.height = hei + "px";
var obj = document.getElementsByTagName("div");
for (var i = 0; i < obj.length; i++) {
if (obj[i].className == 'page') {
obj[i].style.height = hei + "px";
}
//如果不加时间控制，滚动会过度灵敏，一次翻好几屏
var startTime = 0, //翻屏起始时间
endTime = 0,
now = 0;
//浏览器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
document.addEventListener("DOMMouseScroll",scrollFun,false);
}
else if (document.addEventListener) {
document.addEventListener("mousewheel",scrollFun,false);
}
else if (document.attachEvent) {
document.attachEvent("onmousewheel",scrollFun);
}
else{
document.onmousewheel = scrollFun;
}
}
//如果不加时间控制，滚动会过度灵敏，一次翻好几屏
var startTime = 0, //翻屏起始时间
endTime = 0,
now = 0;
//浏览器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
document.addEventListener("DOMMouseScroll", scrollFun, false);
}
else if (document.addEventListener) {
document.addEventListener("mousewheel", scrollFun, false);
}
else if (document.attachEvent) {
document.attachEvent("onmousewheel", scrollFun);
}
else {
document.onmousewheel = scrollFun;
}
//滚动事件处理函数
function scrollFun(event){
startTime = new Date().getTime();
var delta = event.detail || (-event.wheelDelta);
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
if ((endTime - startTime) < -1000){
if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){
//向下滚动
now = now - hei;
toPage(now);
}
if(delta<0 && parseInt(main.offsetTop) < 0){
//向上滚动
now = now + hei;
toPage(now);
}
endTime = new Date().getTime();
//滚动事件处理函数
function scrollFun(event) {
startTime = new Date().getTime();
var delta = event.detail || (-event.wheelDelta);
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
if ((endTime - startTime) < -1000) {
if (delta > 0 && parseInt(main.offsetTop) > -(hei * 3)) {
//向下滚动
now = now - hei;
toPage(now);
}
else{
event.preventDefault();
}
if (delta < 0 && parseInt(main.offsetTop) < 0) {
//向上滚动
now = now + hei;
toPage(now);
}
endTime = new Date().getTime();
}
else {
event.preventDefault();
}
function toPage(now){
// $("#main").animate({top:(now+'px')},1000); //jquery实现动画效果
setTimeout("main.style.top = now + 'px'",1000); //javascript 实现动画效果
}
</script>
</body>
</html>
}
function toPage(now) {
// $("#main").animate({top:(now+'px')},1000); //jquery实现动画效果
setTimeout("main.style.top = now + 'px'", 1000); //javascript 实现动画效果
}
</script>
</body>
</html>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或