<Modal
?? ?id="picture_viewer_modal"
?? ?v-model="visible"
?? ?:mask-closable = "false"
?? ?@on-cancel="cancel()"
?? ?footer-hide
?? ?width="70%"
?? ?:fullscreen="fullscreen"
>
?? ?<div class="wrap">
?? ??? ?<p class="num_tip">第 {{index+1}}/{{picArr.length}} 張</p>
?? ??? ?
?? ??? ?<!-- 查看圖片的盒子 -->
?? ??? ?<div id="father" class="box">
?? ??? ? ? ?<img id="box" class="img_max img_auto" @dblclick="getDefault()" :src="row.src">
?? ??? ? ? ?<!-- 查看上一張 -->
?? ??? ? ? ?<span class="next_btn btn_left" @click="left()"></span>
?? ??? ? ? ?<!-- 查看下一張 -->
?? ??? ? ? ?<span class="next_btn btn_right" @click="right()"></span>
?? ??? ?</div>
?? ??? ?
?? ??? ?<!-- 按鈕條 -->
?? ??? ?<div class="tool_bar">
?? ??? ? ? ?<!-- 裁剪 -->
?? ??? ? ? ?<span class="tool_btn btn_1" @click="cutPic()"></span>
?? ??? ? ? ?<!-- 全屏 -->
?? ??? ? ? ?<span class="tool_btn btn_2" @click="fullScreen()"></span>
?? ??? ? ? ?<!-- 放大 -->
?? ??? ? ? ?<span class="tool_btn btn_3" @click="big()"></span>
?? ??? ? ? ?<!-- 縮小 -->
?? ??? ? ? ?<span class="tool_btn btn_4" @click="small()"></span>
?? ??? ? ? ?<!-- 下載 -->
?? ??? ? ? ?<span class="tool_btn btn_5" @click="download()"></span>
?? ? ? ? ? <!-- 選中 -->
?? ? ? ? ? <span class="tool_btn btn_8" @click="choose()"></span>
?? ? ? ? ? <!-- 刪除 -->
?? ? ? ? ? <span class="tool_btn btn_9" @click="del(row.id)"></span>
?? ? ? </div>
?? ?</div>
</Modal>

props: {
? ? picList:Array,
? ? rowData:Object
},
data() {
? ? return {
? ? ?? ?//彈窗顯隱
? ? ? ? visible: false,
? ? ? ? //當(dāng)前查看的圖片
? ? ? ? row: {},
? ? ? ? //當(dāng)前查看的圖片在數(shù)組中的位置
? ? ? ? index: 0,
? ? ? ? //所有圖片
? ? ? ? picArr: [],
? ? ? ? //是否全屏
? ? ? ? fullscreen: false,
? ? };
},
watch: {
?? ?//監(jiān)聽彈窗打開事件
? ? modal(val) {
? ? ? ? this.visible = val;
? ? ? ? if(val){
? ? ? ? ? ? this.init();
? ? ? ? ? ? this.getObj();
? ? ? ? }
? ? },
},
mounted(){
? ? this.move();?
},
methods: {
? ? ?/**
? ? ?* 打開彈窗后，獲取傳入彈窗組件的數(shù)據(jù)
? ? ?*/
?? ? getObj(){
? ? ? ? ?this.row = this.rowData.row;
? ? ? ? ?this.index = this.rowData.index;
? ? ? ? ?this.picArr = this.picList;
? ? ?},
? ? ?/**
? ? ? * 初始化
? ? ? */
? ? ?init(){
? ? ? ? ?this.fullscreen = false;
? ? ? ? ?//重新打開后圖片要重置回默認(rèn)大小和居中
? ? ? ? ?this.getDefault();
? ? ?},
? ? ?/**
? ? ? * 雙擊圖片恢復(fù)默認(rèn)大小、位置
? ? ? */
? ? ?getDefault(){
? ? ? ? ?var image = document.getElementById("box");
? ? ? ? ?image.classList.add('img_max');
? ? ? ? ?image.classList.add('img_auto');
? ? ? ? ?box.style.left = '50%';
? ? ? ? ?box.style.top = '50%';
? ? ? ? ?box.style.transform = 'translate(-50%,-50%)';
? ? ?},
? ? ?/**
? ? ? * 拖拽移動(dòng)
? ? ? */
? ? ?move(){
? ? ? ? ?var thiz = this;
? ? ? ? ?thiz.$nextTick(() => {
? ? ? ? ? ? ?var box = document.getElementById("box");
? ? ? ? ? ? ?var fa = document.getElementById('father');
? ? ? ? ? ? ?// 圖片移動(dòng)效果
? ? ? ? ? ? ?box.onmousedown=function(ev) {
? ? ? ? ? ? ? ? ?var oEvent = ev;
? ? ? ? ? ? ? ? ?// 瀏覽器有一些圖片的默認(rèn)事件,這里要阻止
? ? ? ? ? ? ? ? ?oEvent.preventDefault();
? ? ? ? ? ? ? ? ?var disX = oEvent.clientX - box.offsetLeft;
? ? ? ? ? ? ? ? ?var disY = oEvent.clientY - box.offsetTop;
? ? ? ? ? ? ? ? ?fa.onmousemove=function (ev) {
? ? ? ? ? ? ? ? ? ? ?oEvent = ev;
? ? ? ? ? ? ? ? ? ? ?oEvent.preventDefault();
? ? ? ? ? ? ? ? ? ? ?var x = oEvent.clientX - disX;
? ? ? ? ? ? ? ? ? ? ?var y = oEvent.clientY - disY;

? ? ? ? ? ? ? ? ? ? ?// 圖形移動(dòng)的邊界判斷
? ? ? ? ? ? ? ? ? ? ?// x = x <= 0 ? 0 : x;
? ? ? ? ? ? ? ? ? ? ?// x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
? ? ? ? ? ? ? ? ? ? ?// y = y <= 0 ? 0 : y;
? ? ? ? ? ? ? ? ? ? ?// y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
? ? ? ? ? ? ? ? ? ? ?box.style.left = x + 'px';
? ? ? ? ? ? ? ? ? ? ?box.style.top = y + 'px';
? ? ? ? ? ? ? ? ? ? ?//取消居中效果
? ? ? ? ? ? ? ? ? ? ?// box.style.transform = 'translate(0,0)';
? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ? ?// 圖形移出父盒子取消移動(dòng)事件,防止移動(dòng)過快觸發(fā)鼠標(biāo)移出事件,導(dǎo)致鼠標(biāo)彈起事件失效
? ? ? ? ? ? ? ? ?fa.onmouseleave = function () {
? ? ? ? ? ? ? ? ? ? ?fa.onmousemove = null;
? ? ? ? ? ? ? ? ? ? ?fa.onmouseup = null;
? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ? ?// 鼠標(biāo)彈起后停止移動(dòng)
? ? ? ? ? ? ? ? ?fa.onmouseup=function() {
? ? ? ? ? ? ? ? ? ? ?fa.onmousemove = null;
? ? ? ? ? ? ? ? ? ? ?fa.onmouseup = null;
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?}
? ? ? ? ? ? ?//監(jiān)聽鼠標(biāo)滾輪放大縮小
? ? ? ? ? ? ?box.addEventListener("mousewheel", MouseWheelHandler, false);// IE9, Chrome, Safari, Opera
? ? ? ? ? ? ?box.addEventListener("DOMMouseScroll", MouseWheelHandler, false);// Firefox
? ? ? ? ? ? ?function MouseWheelHandler(e) {
? ? ? ? ? ? ? ? ?// cross-browser wheel delta ?
? ? ? ? ? ? ? ? ?var e = window.event || e; // old IE support ?
? ? ? ? ? ? ? ? ?var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));//IE、Opera、Safari、Chrome ?e.wheelDelta,Firefox中 ?e.detail ?判斷是向上還是向下滾動(dòng)負(fù)值delta取-1 正值delta取1 ?
? ? ? ? ? ? ? ? ?box.height = Math.max(100, Math.min(2500, box.height + (50 * delta)));
? ? ? ? ? ? ? ? ?box.classList.remove('img_max');
? ? ? ? ? ? ? ? ?box.classList.remove('img_auto');
? ? ? ? ? ? ? ? ?return false;
? ? ? ? ? ? ?}
? ? ? ? ?});
? ? ?},
? ? ?/**
? ? ? * 全屏
? ? ? */
? ? ?fullScreen(){
? ? ??? ? //控制彈窗全屏
? ? ? ? ?this.fullscreen = !this.fullscreen;
? ? ? ? ?//圖片恢復(fù)默認(rèn)大小、位置
? ? ? ? ?this.getDefault();
? ? ?},
? ? ?/**
? ? ? * 放大
? ? ? */
? ? ?big(){
? ? ? ? ?var image = document.getElementById("box");
? ? ? ? ?if (image.height <= 2500) {
? ? ? ? ? ? ?image.height = image.height + 40;
? ? ? ? ?}
? ? ? ? ?image.classList.remove('img_max');
? ? ? ? ?image.classList.remove('img_auto');
? ? ?},
? ? ?/**
? ? ? * 縮小
? ? ? */
? ? ?small(){
? ? ? ? ?var image = document.getElementById("box");
? ? ? ? ?if (image.height > 100) {
? ? ? ? ? ? ?image.height = image.height - 40;
? ? ? ? ?}
? ? ? ? ?image.classList.remove('img_auto');
? ? ?},
? ? ?/**
? ? ? * 查看上一張
? ? ? */
? ? ?left(){
? ? ? ? ?var thiz = this;
? ? ? ? ?if(thiz.index == 0){
? ? ? ? ? ? ?//如果是第一張，則跳到最后一張
? ? ? ? ? ? ?thiz.index = thiz.picArr.length - 1;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}else{
? ? ? ? ? ? ?thiz.index = thiz.index - 1;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}
? ? ? ? ?//查看上下一張的時(shí)候，圖片回到初始大小和位置，這里會(huì)閃爍，待優(yōu)化
? ? ? ? ?this.getDefault();
? ? ?},
? ? ?/**
? ? ? * 查看下一張
? ? ? */
? ? ?right(){
? ? ? ? ?var thiz = this;
? ? ? ? ?if(thiz.index == thiz.picArr.length-1){
? ? ? ? ? ? ?//如果是最后一張，則跳到第一張
? ? ? ? ? ? ?thiz.index = 0;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}else{
? ? ? ? ? ? ?thiz.index = thiz.index + 1;
? ? ? ? ? ? ?thiz.row = thiz.picArr[thiz.index];
? ? ? ? ?}
? ? ? ? ?//查看上下一張的時(shí)候，圖片回到初始大小和位置，這里會(huì)閃爍，待優(yōu)化
? ? ? ? ?this.getDefault();
? ? ?},
}

//less
@pictureBg: #fff,
@pictureBorder: #fff,
@pictureCloseBg: #fff,
@pictureCloseBorder: #1A82FD,
@pictureClose: #1A82FD,
@pictureBtn1: url('../assets/map/view_image/icon_cut_blue.png')
@pictureBtn2: url('../assets/map/view_image/icon_move_blue.png')
@pictureBtn3: url('../assets/map/view_image/icon_zoom_blue.png')
@pictureBtn4: url('../assets/map/view_image/icon_reduce_blue.png')
@pictureBtn5: url('../assets/map/view_image/icon_download_blue.png')
@pictureBtn6: url('../assets/map/view_image/icon_play_blue.png')
@pictureBtn7: url('../assets/map/view_image/icon_video_blue.png')
@pictureBtn8: url('../assets/map/view_image/icon_chose_blue.png')
@pictureBtn9: url('../assets/map/view_image/icon_delete_blue.png')
@pictureBtnHov1: url('../assets/map/view_image/icon_cut_hov.png')
@pictureBtnHov2: url('../assets/map/view_image/icon_move_hov.png')
@pictureBtnHov3: url('../assets/map/view_image/icon_zoom_hov.png')
@pictureBtnHov4: url('../assets/map/view_image/icon_reduce_hov.png')
@pictureBtnHov5: url('../assets/map/view_image/icon_download_hov.png')
@pictureBtnHov6: url('../assets/map/view_image/icon_play_hov.png')
@pictureBtnHov7: url('../assets/map/view_image/icon_video_hov.png')
@pictureBtnHov8: url('../assets/map/view_image/icon_chose_hov.png')
@pictureBtnHov9: url('../assets/map/view_image/icon_delete_hov.png')
#picture_viewer_modal{
?? ?.ivu-modal{
?? ??? ?//覆蓋modal關(guān)閉按鈕樣式
?? ? ? ?.ivu-modal-close{
?? ? ? ? ? ?right: -12px;
?? ? ? ? ? ?top: -12px;
?? ? ? ? ? ?border-radius: 100px;
?? ? ? ? ? ?background: @pictureCloseBg;
? ? ? ? ? ? border:1px solid @pictureCloseBorder;
?? ? ? ? ? ?.ivu-icon-ios-close{
?? ? ? ? ? ? ? ?font-size: 24px;
?? ? ? ? ? ? ? ?color: @pictureClose;
?? ? ? ? ? ?}
?? ? ? ?}
?? ? ? ?//覆蓋modal彈窗盒子樣式
?? ? ? ?.ivu-modal-content{
?? ? ? ??? ?background: @pictureBg;
? ? ? ? ? ? border:1px solid @pictureBorder;
?? ? ? ? ? ?border-radius: 0;
?? ? ? ? ? ?.ivu-modal-body{
?? ? ? ? ? ? ? ?height: 80vh;
?? ? ? ? ? ? ? ?padding: 35px 15px 0;
?? ? ? ? ? ? ? ?overflow: hidden;
?? ? ? ? ? ?}
?? ? ? ? ? ?
?? ? ? ? ? ?// 內(nèi)容樣式
?? ? ? ? ? ?.wrap{
?? ? ? ? ? ? ? ?height: 100%;
?? ? ? ? ? ? ? ?>.num_tip{
?? ? ? ? ? ? ? ??? ?color: @pictureClose;
?? ? ? ? ? ? ? ? ? ?position: absolute;
?? ? ? ? ? ? ? ? ? ?top: 10px;
?? ? ? ? ? ? ? ? ? ?left: 15px;
?? ? ? ? ? ? ? ? ? ?z-index: 9;
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?//圖片盒子樣式
?? ? ? ? ? ? ? ?>.box{
?? ? ? ? ? ? ? ? ? ?height: calc(100% - 20px - 1.2vw);
?? ? ? ? ? ? ? ? ? ?position: relative;
?? ? ? ? ? ? ? ? ? ?//展示的圖片樣式
?? ? ? ? ? ? ? ? ? ?>img{
?? ? ? ? ? ? ? ? ? ? ? ?position: absolute;
?? ? ? ? ? ? ? ? ? ? ? ?top: 50%;
?? ? ? ? ? ? ? ? ? ? ? ?left: 50%;
?? ? ? ? ? ? ? ? ? ? ? ?transform: translate(-50%, -50%);
?? ? ? ? ? ? ? ? ? ? ? ?cursor: move;
?? ? ? ? ? ? ? ? ? ? ? ?&.img_auto{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?width: auto;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?height: auto;
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?&.img_max{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?max-height: 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?max-width: 100%;
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?//上/下一張按鈕樣式
?? ? ? ? ? ? ? ? ? ?>.next_btn{
?? ? ? ? ? ? ? ? ? ? ? ?display: block;
?? ? ? ? ? ? ? ? ? ? ? ?width: 3vw;
?? ? ? ? ? ? ? ? ? ? ? ?height: 3vw;
?? ? ? ? ? ? ? ? ? ? ? ?position: absolute;
?? ? ? ? ? ? ? ? ? ? ? ?top: 50%;
?? ? ? ? ? ? ? ? ? ? ? ?margin-top: -1.5vw;
?? ? ? ? ? ? ? ? ? ? ? ?cursor: pointer;
?? ? ? ? ? ? ? ? ? ? ? ?transition: all 0.2s;
?? ? ? ? ? ? ? ? ? ? ? ?&.btn_left{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?left: 6px;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('../../../assets/map/view_image/btn_left.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?&:hover{
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('../../../assets/map/view_image/btn_left_hov.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?&.btn_right{
?? ? ? ? ? ? ? ? ? ? ? ? ? ?right: 6px;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('../../../assets/map/view_image/btn_right.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?&:hover{
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background: url('../../../assets/map/view_image/btn_right_hov.png') no-repeat;
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?background-size: 100% 100%;
?? ? ? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ??
?? ? ? ? ? ? ?? ?//底部工具條樣式
?? ? ? ? ? ? ? ?>.tool_bar{
?? ? ? ? ? ? ? ? ? ?text-align: center;
?? ? ? ? ? ? ? ? ? ?font-size: 0;
?? ? ? ? ? ? ? ? ? ?position: relative;
?? ? ? ? ? ? ? ? ? ?z-index: 9;
?? ? ? ? ? ? ? ? ? ?.tool_btn{
?? ? ? ? ? ? ? ? ? ? ? ?font-size: 12px;
?? ? ? ? ? ? ? ? ? ? ? ?display: inline-block;
?? ? ? ? ? ? ? ? ? ? ? ?width: 1.2vw;
?? ? ? ? ? ? ? ? ? ? ? ?height: 1.2vw;
?? ? ? ? ? ? ? ? ? ? ? ?margin: 10px 0.8vw;
?? ? ? ? ? ? ? ? ? ? ? ?transition: all 0.2s;
?? ? ? ? ? ? ? ? ? ? ? ?cursor: pointer;
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ? ? ?.btn_1{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn1 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov1 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_2{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn2 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov2 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_3{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn3 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov3 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_4{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn4 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov4 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_5{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn5 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov5 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_6{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn6 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov6 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_7{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn7 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov7 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_8{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn8 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov8 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .btn_9{
? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtn9 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? &:hover{
? ? ? ? ? ? ? ? ? ? ? ? ? ? background: @pictureBtnHov9 no-repeat;
? ? ? ? ? ? ? ? ? ? ? ? ? ? background-size: 100% 100%;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?
?? ? ? ?//彈窗全屏樣式
?? ? ? ?&.ivu-modal-fullscreen{
?? ? ? ? ? ?.ivu-modal-close{
?? ? ? ? ? ? ? ?right: 0;
?? ? ? ? ? ? ? ?top: 0;
?? ? ? ? ? ?}
?? ? ? ? ? ?.ivu-modal-content{
?? ? ? ? ? ? ? ?.ivu-modal-body{
?? ? ? ? ? ? ? ? ? ?height: 100vh;
?? ? ? ? ? ? ? ? ? ?overflow: hidden;
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?}
}