| | |
| | | <div |
| | | v-for="(item, index) in powerList" |
| | | :key="index" |
| | | @click.stop="activeHandle(index)" |
| | | @click.stop="activeHandle(index,item.url)" |
| | | > |
| | | <div |
| | | :class="activeIndex == index ? 'active power-item' : 'power-item'" |
| | |
| | | }, |
| | | distanceBottom: { |
| | | type: Number, |
| | | default: 700, |
| | | default: 600, |
| | | }, |
| | | isScrollHidden: { |
| | | type: Boolean, |
| | |
| | | activeIndex: 0, //高亮显示 |
| | | powerList: [ |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "连接CTI", |
| | | path: require("@/assets/images/huanzheliebiao.png"), |
| | | url:'/patient/patient/', |
| | | label: "患者", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "签入", |
| | | path: require("@/assets/images/fwwu.png"), |
| | | url:'/followvisit/tasklist/', |
| | | label: "任务", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "签出", |
| | | path: require("@/assets/images/duanxinjilu.png"), |
| | | url:'', |
| | | label: "短信", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "置闲", |
| | | path: require("@/assets/images/dianhua.png"), |
| | | url:'', |
| | | label: "电话", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "置忙", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "拨号", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "咨询", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "保持", |
| | | }, |
| | | { |
| | | path: require("@/assets/images/下载.png"), |
| | | label: "恢复", |
| | | path: require("@/assets/images/zxlt.png"), |
| | | url:'', |
| | | label: "在线聊天", |
| | | }, |
| | | ], |
| | | }; |
| | |
| | | // 获取元素位置属性 |
| | | this.floatDragDom = this.floatDrag.getBoundingClientRect(); |
| | | // 设置初始位置 |
| | | // this.left = this.clientWidth - this.floatDragDom.width - this.distanceRight; |
| | | this.right = 0; |
| | | this.left = this.clientWidth - this.floatDragDom.width - this.distanceRight; |
| | | // this.right = 0; |
| | | this.top = |
| | | this.clientHeight - this.floatDragDom.height - this.distanceBottom; |
| | | this.initDraggable(); |
| | |
| | | // 伸缩悬浮球 |
| | | handelFlex() { |
| | | if (this.flag) { |
| | | this.buffer(this.box, "height", 700); |
| | | this.buffer(this.box, "height", 600); |
| | | } else { |
| | | this.buffer(this.box, "height", 70); |
| | | } |
| | |
| | | console.log("是否展开", this.flag); |
| | | }, |
| | | // 点击哪个power |
| | | activeHandle(index) { |
| | | activeHandle(index,url) { |
| | | //把我们自定义的下标赋值 |
| | | this.activeIndex = index; |
| | | this.$router.push({ |
| | | path: url, |
| | | }) |
| | | console.log("HHHH", index); |
| | | }, |
| | | // 获取要改变得样式属性 |
| | |
| | | .item-container { |
| | | margin-top: 10px; |
| | | width: 70px; |
| | | height: 600px; |
| | | height: 500px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 50%; |
| | | background-color: #69707a; |
| | | background-color: #f1f7ff; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | |
| | | } |
| | | |
| | | .active { |
| | | background-color: #1a1818 !important; |
| | | background-color: #f9f1db !important; |
| | | } |
| | | .active-des { |
| | | color: #1a1818 !important; |
| | | font-weight: bold !important; |
| | | color: #71dcfa !important; |
| | | font-size: 20px !important; |
| | | font-weight: 500 !important; |
| | | } |
| | | </style> |