lugano标准病灶列表添加既往标记截图预览
parent
a298048ed0
commit
0cca8f71b4
|
|
@ -1,82 +1,322 @@
|
|||
<template>
|
||||
<div class="history_screenshot">
|
||||
<h3 class="info">
|
||||
<span>{{ subjectCode }}</span>
|
||||
<span style="margin-left:10px;">{{ title }}</span>
|
||||
</h3>
|
||||
<template v-if="historyInfo">
|
||||
<el-timeline v-viewer>
|
||||
<el-timeline-item
|
||||
v-for="i in historyInfo"
|
||||
:key="i.VisitTaskId"
|
||||
:timestamp="i.TaskBlindName"
|
||||
placement="top"
|
||||
>
|
||||
<el-card shadow="never">
|
||||
<img
|
||||
crossorigin="anonymous"
|
||||
:src="i.OtherPicturePath"
|
||||
alt="Image"
|
||||
>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</template>
|
||||
<div class="image_preview-wrapper">
|
||||
|
||||
<div class="image-viewer-wrapper">
|
||||
<!-- 预览图像 -->
|
||||
<ImageViewer
|
||||
v-if="previewVisible"
|
||||
:on-switch="
|
||||
(index) => {
|
||||
selected(index)
|
||||
}
|
||||
"
|
||||
:initial-index="currentIndex"
|
||||
:url-list="previewImages"
|
||||
/>
|
||||
</div>
|
||||
<div class="thumbnail-wrapper" style="z-index:999;background-color:#fff;">
|
||||
<div class="">
|
||||
<div class="img-wrapper">
|
||||
<el-button
|
||||
icon="el-icon-d-arrow-left"
|
||||
plain
|
||||
class="left to"
|
||||
:disabled="disabledPrev"
|
||||
@click="toRight"
|
||||
/>
|
||||
<div ref="imagesWrapper" class="images">
|
||||
<div v-if="noData" class="empty-text">
|
||||
<slot name="empty">暂无数据</slot>
|
||||
</div>
|
||||
<div v-show="!noData" class="items" :style="itemsStyle">
|
||||
<div
|
||||
v-for="(item, index) in previewImages"
|
||||
:key="index"
|
||||
class="item-img"
|
||||
:style="imgSize"
|
||||
:class="{
|
||||
'is-active': index === currentIndex
|
||||
}"
|
||||
@click="selected(index)"
|
||||
>
|
||||
<img crossorigin="anonymous" :src="`${item.PicturePath}`">
|
||||
<p class="item-date">
|
||||
{{ `${item.TaskBlindName}` }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
icon="el-icon-d-arrow-right"
|
||||
:disabled="disabledNext"
|
||||
plain
|
||||
class="right to"
|
||||
@click="Left"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getPreviousOtherPicturePath } from '@/api/trials'
|
||||
import { changeURLStatic } from '@/utils/history.js'
|
||||
import store from '@/store'
|
||||
import Viewer from 'v-viewer'
|
||||
import ImageViewer from './ImageViewer'
|
||||
export default {
|
||||
name: 'HistoryScreenshot',
|
||||
name: 'Preview',
|
||||
components: {
|
||||
ImageViewer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
subjectCode: '',
|
||||
title: '',
|
||||
lesionId: '',
|
||||
historyInfo: null
|
||||
currentIndex: 0,
|
||||
previewVisible: true,
|
||||
translateX: 0,
|
||||
pageSize: 0, // 一页展示的图片数
|
||||
previewImages: [],
|
||||
imgSize: { width: '120px', height: '120px' }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 偏移度数
|
||||
itemsStyle() {
|
||||
return {
|
||||
transform: `translateX(${-this.translateX}px)`
|
||||
}
|
||||
},
|
||||
// 每一项宽度
|
||||
itemWidth() {
|
||||
return parseInt(this.imgSize.width.replace('px', '')) + 8
|
||||
},
|
||||
disabledPrev() {
|
||||
// 禁用前一页按钮
|
||||
return this.translateX <= 0
|
||||
},
|
||||
disabledNext() {
|
||||
// 禁用后一页按钮
|
||||
return (
|
||||
this.translateX >= (this.previewImages.length - this.pageSize) * this.itemWidth
|
||||
)
|
||||
},
|
||||
noData() {
|
||||
return this.previewImages.length === 0
|
||||
},
|
||||
dataLength() {
|
||||
return this.previewImages.length
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
if (this.$router.currentRoute.query.TokenKey) {
|
||||
store.dispatch('user/setToken', this.$route.query.TokenKey)
|
||||
changeURLStatic('TokenKey', '')
|
||||
}
|
||||
this.lesionId = this.$route.query.rowId
|
||||
this.subjectCode = this.$route.query.subjectCode
|
||||
this.title = this.$route.query.lesionName
|
||||
if (!this.lesionId) return
|
||||
this.initializeViewer()
|
||||
this.getScreenshot()
|
||||
this.initPage()
|
||||
},
|
||||
methods: {
|
||||
getScreenshot() {
|
||||
const loading = this.$loading({ fullscreen: true })
|
||||
getPreviousOtherPicturePath({ rowId: this.lesionId }).then(res => {
|
||||
this.historyInfo = res.Result
|
||||
loading.close()
|
||||
}).catch(() => { loading.close() })
|
||||
async initPage() {
|
||||
await this.getScreenshot()
|
||||
this.pageSize = this.wrapperWidth() / this.itemWidth
|
||||
const scope = this
|
||||
window.onresize = function() {
|
||||
scope.pageSize = scope.wrapperWidth() / scope.itemWidth
|
||||
scope.selected(scope.currentIndex)
|
||||
}
|
||||
},
|
||||
initializeViewer() {
|
||||
Viewer.setDefaults({
|
||||
toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true, flipHorizontal: true, flipVertical: true, prev: true, next: true }
|
||||
getScreenshot() {
|
||||
return new Promise(resolve => {
|
||||
const loading = this.$loading({ fullscreen: true })
|
||||
getPreviousOtherPicturePath({ rowId: this.lesionId }).then(res => {
|
||||
this.previewImages = res.Result
|
||||
loading.close()
|
||||
resolve()
|
||||
}).catch(() => {
|
||||
loading.close()
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
toRight() {
|
||||
if (this.translateX < this.pageSize * this.itemWidth) {
|
||||
this.translateX = 0
|
||||
} else {
|
||||
this.translateX = this.translateX - this.pageSize * this.itemWidth
|
||||
}
|
||||
},
|
||||
Left() {
|
||||
this.translateX = this.translateX + this.pageSize * this.itemWidth
|
||||
const maxTrans = this.itemWidth * (this.dataLength - this.pageSize)
|
||||
if (this.translateX > maxTrans) {
|
||||
this.translateX = maxTrans
|
||||
}
|
||||
},
|
||||
selected(index) {
|
||||
const center = this.pageSize >> 1
|
||||
// 最后一页的中间位置
|
||||
const lastCenter = this.dataLength - center
|
||||
|
||||
if (index > center && index < lastCenter) {
|
||||
// 与相册中间相差的图片数量
|
||||
const step = index - center
|
||||
// 将点击图片移动到中间
|
||||
this.translateX = this.itemWidth * step
|
||||
} else {
|
||||
const maxTrans = this.itemWidth * (this.dataLength - this.pageSize)
|
||||
this.translateX = index <= center ? 0 : maxTrans
|
||||
}
|
||||
if (this.currentIndex !== index) {
|
||||
this.currentIndex = index
|
||||
}
|
||||
},
|
||||
wrapperWidth() {
|
||||
if (this.$refs.imagesWrapper) {
|
||||
return this.$refs.imagesWrapper.offsetWidth
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.history_screenshot{
|
||||
padding: 20px 100px 20px 20px;
|
||||
.info{
|
||||
margin-left: 35px;
|
||||
|
||||
<style lang="scss">
|
||||
.image_preview-wrapper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.image-viewer-wrapper{
|
||||
flex: 1;
|
||||
}
|
||||
.thumbnail-wrapper{
|
||||
height: 130px;
|
||||
}
|
||||
.img-content{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.img-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
height: 120px;
|
||||
.to {
|
||||
width: 32px;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
cursor: pointer;
|
||||
.images::before {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 84px;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
from(#fff),
|
||||
color-stop(50%, rgba(0, 0, 0, 0))
|
||||
);
|
||||
background: -o-linear-gradient(left, #fff, rgba(0, 0, 0, 0) 50%);
|
||||
background: linear-gradient(90deg, #fff, rgba(0, 0, 0, 0) 50%);
|
||||
}
|
||||
.images::after {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
width: 84px;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
right top,
|
||||
left top,
|
||||
from(#fff),
|
||||
color-stop(50%, rgba(0, 0, 0, 0))
|
||||
);
|
||||
background: -o-linear-gradient(right, #fff, rgba(0, 0, 0, 0) 50%);
|
||||
background: linear-gradient(270deg, #fff, rgba(0, 0, 0, 0) 50%);
|
||||
}
|
||||
.images {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 2px;
|
||||
.empty-text {
|
||||
color: rgb(158, 158, 158);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.items {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
// width: 6000px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
transition: transform 0.25s ease;
|
||||
.item-img {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-right: 8px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
.item-date {
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
color: white;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-img:hover::after {
|
||||
// border-color: #409EFF;
|
||||
opacity: 0;
|
||||
}
|
||||
.item-img::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
opacity: 0.2;
|
||||
pointer-events: none;
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
-o-transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
background-color: #fff;
|
||||
}
|
||||
.is-active {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.is-active:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,446 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
<template>
|
||||
<div style="width:100%;height:100%;">
|
||||
<transition name="viewer-fade">
|
||||
<div v-show="urlList.length > 0" ref="image-viewer__wrapper" tabindex="-1" class="image-viewer__wrapper" :style="{ 'z-index':5 }">
|
||||
<span v-if="urlList[index]" class="image-viewer_desc">
|
||||
{{ `${urlList[index].TaskBlindName}` }}
|
||||
</span>
|
||||
<!-- 关闭 -->
|
||||
<span class="image-viewer__btn image-viewer__close" @click="hide">
|
||||
<i class="el-icon-close" />
|
||||
</span>
|
||||
<!-- Arrow -->
|
||||
<template v-if="!isSingle">
|
||||
<span
|
||||
class="image-viewer__btn image-viewer__prev"
|
||||
:class="{ 'is-disabled': !infinite && isFirst }"
|
||||
@click="prev"
|
||||
>
|
||||
<i class="el-icon-arrow-left" />
|
||||
</span>
|
||||
<span
|
||||
class="el-image-viewer__btn el-image-viewer__next"
|
||||
:class="{ 'is-disabled': !infinite && isLast }"
|
||||
@click="next"
|
||||
>
|
||||
<i class="el-icon-arrow-right" />
|
||||
</span>
|
||||
</template>
|
||||
<!-- 工具栏 -->
|
||||
<div class="image-viewer__btn image-viewer__actions">
|
||||
<div class="image-viewer__actions__inner">
|
||||
<i class="el-icon-zoom-out" @click="handleActions('zoomOut')" />
|
||||
<i class="el-icon-zoom-in" @click="handleActions('zoomIn')" />
|
||||
<i class="el-image-viewer__actions__divider" />
|
||||
<i class="el-icon-c-scale-to-original" @click="toggleMode" />
|
||||
<i class="el-image-viewer__actions__divider" />
|
||||
<i class="el-icon-refresh-left" @click="handleActions('anticlocelise')" />
|
||||
<i class="el-icon-refresh-right" @click="handleActions('clocelise')" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片 -->
|
||||
<div id="image-viewer__canvas" class="image-viewer__canvas">
|
||||
<img
|
||||
v-for="(item, i) in urlList"
|
||||
v-show="i === index"
|
||||
:ref="`img${i}`"
|
||||
:key="item.VisitTaskId"
|
||||
crossorigin="anonymous"
|
||||
:src="`${item.PicturePath}`"
|
||||
:style="imgStyle"
|
||||
style="max-width:100%;max-height: 100%;"
|
||||
@load="handleImgLoad"
|
||||
@error="handleImgError"
|
||||
@mousedown="handleMouseDown"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { on, off } from 'element-ui/src/utils/dom'
|
||||
import { rafThrottle, isFirefox } from 'element-ui/src/utils/util'
|
||||
|
||||
const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
|
||||
|
||||
export default {
|
||||
name: 'ImageViewer',
|
||||
props: {
|
||||
urlList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
onSwitch: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
},
|
||||
initialIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
index: this.initialIndex,
|
||||
isShow: false,
|
||||
infinite: true,
|
||||
loading: false,
|
||||
transform: {
|
||||
scale: 1,
|
||||
deg: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
enableTransition: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSingle() {
|
||||
return this.urlList.length <= 1
|
||||
},
|
||||
isFirst() {
|
||||
return this.index === 0
|
||||
},
|
||||
isLast() {
|
||||
return this.index === this.urlList.length - 1
|
||||
},
|
||||
|
||||
imgStyle() {
|
||||
const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
|
||||
const style = {
|
||||
transform: `scale(${scale}) rotate(${deg}deg)`,
|
||||
transition: enableTransition ? 'transform .3s' : '',
|
||||
'margin-left': `${offsetX}px`,
|
||||
'margin-top': `${offsetY}px`
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
initialIndex: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.index = val
|
||||
}
|
||||
},
|
||||
index: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.reset()
|
||||
this.onSwitch(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.getElementById('image-viewer__canvas').onmousewheel = (event) => {
|
||||
if (event.deltaY > 0) {
|
||||
// 缩小
|
||||
this.handleActions('zoomOut', {
|
||||
zoomRate: 0.015,
|
||||
enableTransition: false
|
||||
})
|
||||
} else {
|
||||
// 放大
|
||||
this.handleActions('zoomIn', {
|
||||
zoomRate: 0.015,
|
||||
enableTransition: false
|
||||
})
|
||||
}
|
||||
return false
|
||||
}
|
||||
this.deviceSupportInstall()
|
||||
},
|
||||
methods: {
|
||||
hide() {
|
||||
this.deviceSupportUninstall()
|
||||
this.onClose()
|
||||
},
|
||||
deviceSupportInstall() {
|
||||
this._keyDownHandler = e => {
|
||||
e.stopPropagation()
|
||||
const keyCode = e.keyCode
|
||||
switch (keyCode) {
|
||||
// ESC
|
||||
case 27:
|
||||
this.hide()
|
||||
break
|
||||
// SPACE
|
||||
case 32:
|
||||
this.toggleMode()
|
||||
break
|
||||
// LEFT_ARROW
|
||||
case 37:
|
||||
this.prev()
|
||||
break
|
||||
// UP_ARROW
|
||||
case 38:
|
||||
this.handleActions('zoomIn')
|
||||
break
|
||||
// RIGHT_ARROW
|
||||
case 39:
|
||||
this.next()
|
||||
break
|
||||
// DOWN_ARROW
|
||||
case 40:
|
||||
this.handleActions('zoomOut')
|
||||
break
|
||||
}
|
||||
}
|
||||
this._mouseWheelHandler = rafThrottle(e => {
|
||||
const delta = e.wheelDelta ? e.wheelDelta : -e.detail
|
||||
if (delta > 0) {
|
||||
this.handleActions('zoomIn', {
|
||||
zoomRate: 0.015,
|
||||
enableTransition: false
|
||||
})
|
||||
} else {
|
||||
this.handleActions('zoomOut', {
|
||||
zoomRate: 0.015,
|
||||
enableTransition: false
|
||||
})
|
||||
}
|
||||
})
|
||||
on(document, 'keydown', this._keyDownHandler)
|
||||
|
||||
on(document, mousewheelEventName, null)
|
||||
// on(document, mousewheelEventName, this._mouseWheelHandler)
|
||||
},
|
||||
deviceSupportUninstall() {
|
||||
off(document, 'keydown', this._keyDownHandler)
|
||||
off(document, mousewheelEventName, this._mouseWheelHandler)
|
||||
this._keyDownHandler = null
|
||||
this._mouseWheelHandler = null
|
||||
},
|
||||
handleImgLoad(e) {
|
||||
this.loading = false
|
||||
},
|
||||
handleImgError(e) {
|
||||
this.loading = false
|
||||
e.target.alt = '加载失败'
|
||||
},
|
||||
handleMouseDown(e) {
|
||||
if (this.loading || e.button !== 0) return
|
||||
|
||||
const { offsetX, offsetY } = this.transform
|
||||
const startX = e.pageX
|
||||
const startY = e.pageY
|
||||
this._dragHandler = rafThrottle(ev => {
|
||||
this.transform.offsetX = offsetX + ev.pageX - startX
|
||||
this.transform.offsetY = offsetY + ev.pageY - startY
|
||||
})
|
||||
on(document, 'mousemove', this._dragHandler)
|
||||
on(document, 'mouseup', ev => {
|
||||
off(document, 'mousemove', this._dragHandler)
|
||||
})
|
||||
|
||||
e.preventDefault()
|
||||
},
|
||||
reset() {
|
||||
this.transform = {
|
||||
scale: 1,
|
||||
deg: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
enableTransition: false
|
||||
}
|
||||
},
|
||||
toggleMode() {
|
||||
if (this.loading) return
|
||||
this.reset()
|
||||
},
|
||||
prev() {
|
||||
if (this.isFirst && !this.infinite) return
|
||||
const len = this.urlList.length
|
||||
this.index = (this.index - 1 + len) % len
|
||||
},
|
||||
next() {
|
||||
if (this.isLast && !this.infinite) return
|
||||
const len = this.urlList.length
|
||||
this.index = (this.index + 1) % len
|
||||
},
|
||||
handleActions(action, options = {}) {
|
||||
if (this.loading) return
|
||||
const { zoomRate, rotateDeg, enableTransition } = {
|
||||
zoomRate: 0.2,
|
||||
rotateDeg: 90,
|
||||
enableTransition: true,
|
||||
...options
|
||||
}
|
||||
const { transform } = this
|
||||
switch (action) {
|
||||
case 'zoomOut':
|
||||
if (transform.scale > 0.2) {
|
||||
transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
|
||||
}
|
||||
break
|
||||
case 'zoomIn':
|
||||
if (transform.scale < 5) {
|
||||
transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
|
||||
}
|
||||
break
|
||||
case 'clocelise':
|
||||
transform.deg += rotateDeg
|
||||
break
|
||||
case 'anticlocelise':
|
||||
transform.deg -= rotateDeg
|
||||
break
|
||||
}
|
||||
transform.enableTransition = enableTransition
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.image-viewer__wrapper{
|
||||
position: relative;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.image-viewer__btn{
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border-radius:50%;
|
||||
opacity:.8;
|
||||
cursor:pointer;
|
||||
box-sizing:border-box;
|
||||
user-select:none
|
||||
}
|
||||
|
||||
.image-viewer__close{
|
||||
display: none;
|
||||
top:40px;
|
||||
right:40px;
|
||||
width:40px;
|
||||
height:40px;
|
||||
font-size:40px
|
||||
}
|
||||
.image-viewer_desc{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
left:40px;
|
||||
font-size:20px;
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
// width: 70px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
font-weight: bold;
|
||||
// color: #fff;
|
||||
// background-color: #606266;
|
||||
// border-color: #fff;
|
||||
z-index: 1;
|
||||
// border-radius: 5%;
|
||||
// border-radius: 2%;
|
||||
}
|
||||
.image-viewer__canvas{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width:100%;
|
||||
height:85%;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center
|
||||
}
|
||||
.image-viewer__actions{
|
||||
left:50%;
|
||||
bottom:30px;
|
||||
transform:translateX(-50%);
|
||||
width:282px;
|
||||
height:44px;
|
||||
padding:0 23px;
|
||||
background-color:#606266;
|
||||
border-color:#fff;
|
||||
border-radius:22px
|
||||
}
|
||||
.image-viewer__actions__inner{
|
||||
width:100%;
|
||||
height:100%;
|
||||
text-align:justify;
|
||||
cursor:default;
|
||||
font-size:23px;
|
||||
color:#fff;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-around;
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.image-viewer__next,.image-viewer__prev{
|
||||
top:50%;
|
||||
width:44px;
|
||||
height:44px;
|
||||
font-size:24px;
|
||||
color:#fff;
|
||||
background-color:#606266;
|
||||
border-color:#fff
|
||||
}
|
||||
.image-viewer__prev{
|
||||
transform:translateY(-50%);
|
||||
left:40px
|
||||
}
|
||||
.image-viewer__next{
|
||||
transform:translateY(-50%);
|
||||
right:40px;
|
||||
text-indent:2px
|
||||
}
|
||||
.image-viewer__mask{
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
opacity:.5;
|
||||
// background:#000
|
||||
|
||||
}
|
||||
.viewer-fade-enter-active{
|
||||
animation:viewer-fade-in .3s
|
||||
}
|
||||
.viewer-fade-leave-active{
|
||||
animation:viewer-fade-out .3s
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-in{
|
||||
0%{
|
||||
transform:translate3d(0,-20px,0);
|
||||
opacity:0
|
||||
}
|
||||
100%{
|
||||
transform:translate3d(0,0,0);
|
||||
opacity:1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes viewer-fade-out{
|
||||
0%{
|
||||
transform:translate3d(0,0,0);
|
||||
opacity:1
|
||||
}
|
||||
100%{
|
||||
transform:translate3d(0,-20px,0);
|
||||
opacity:0
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
criterionType: null,
|
||||
spleenInfo: null,
|
||||
calculateSpleenStatus: '',
|
||||
formChanged:false
|
||||
formChanged: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue