瀹氫綅閫昏緫鏄缃?row,col)浣嶇疆姝ｆ柟褰㈣儗鏅浘鍍忎笌宸︿笂瑙掔殑璺濈涓?(col-1)*width,(row-1)*height)銆備緥濡傦紝瀵逛簬绗?琛屽拰绗?鍒楃殑鑳屾櫙鍥惧儚锛屽悜宸︾Щ鍔?涓綉鏍煎搴︼紝鍚戝彸绉诲姩1涓綉鏍奸珮搴︺€?/鑾峰彇鑳屾櫙鍥剧墖浣嶇疆getBgPos(row,col){constw=this.itemWidthconst{level}=thisconstoffsetX=((col-1)%level)*wconstoffsetY=((row-1)%level)*wreturn`-${offsetX}px-${offsetY}px`},.col.item{background-color:#99a9bf;鑳屾櫙閲嶅锛氫笉閲嶅锛涜儗鏅浘鐗囷細url('./issue.png');overflow:hidden;}瀹炵幇鏂瑰潡浜ゆ崲杩欓噷浣跨敤Vue瀹炵幇锛屾暟鎹┍鍔ㄨ鍥撅細鍝嶅簲寮忔暟鎹紙鏁扮粍锛変腑鐨勪袱涓厓绱犱氦鎹綅缃紝瀵瑰簲瑙嗗浘涓婁氦鎹袱涓柟鍧椾綅缃€傝繖閲屾垜浠彧鏄氦鎹㈣儗鏅浘鍍忕殑浣嶇疆鏉ュ亣瑁呭厓绱犵Щ鍔ㄤ簡銆傚搷搴斿紡鏁扮粍鐨勬暟鎹粨鏋勫畾涔夊涓嬶紱[{index:0,//indexbgPos:'0px0px',//鑳屾櫙鍥剧墖鍋忕ЩisSpace:false//鏄惁涓虹┖鐧絵,...{index:8,//IndexbgPos:'-400px-400px',//鑳屾櫙鍥剧墖鍋忕Щ閲廼sSpace:true//鏄惁涓虹┖鐧絵]鍏舵锛岀敓鎴愭湁搴忓拰鏃犲簭鏁扮粍锛屽垎鍒搴旀父鎴忕殑鎴愬姛鐘舵€侊紝浠ュ強鍒濆鏈惎鍔ㄧ姸鎬佺殑瑙嗗浘銆傛棤搴忔暟缁勪腑鐨勬渶鍚庝竴椤逛繚鐣欎负鐩搁偦婊戝潡鐨勪氦鎹㈢┖闂淬€傚疄鐜版槸澶嶅埗涓€涓湁搴忔暟缁勶紙鍒犻櫎鏈€鍚庝竴椤癸級锛岀劧鍚庢彃鍏ヤ竴涓┖鐧介」銆傜┖鐧介」鍙互灏嗚儗鏅浘鍍忕Щ鍑哄彲瑙佸尯鍩熴€?/鍒濆鍖杋nit(){this.initOrigList()this.initMessList()},//鍒濆鍖栧師濮嬪垪琛╥nitOrigList(){const{level}=thisconstlist=[]for(leti=0;i=0){consti=Math.floor(Math.random()*(r+1));[cards[r],cards[i]]=[cards[i],cards[r]]r--}returncards}锛屽叾娆★紝浠庣敓鎴愮殑甯冨眬涓紝姣忎釜side缃戞牸鑳屾櫙鍥惧儚鐨勪綅缃簲璇ヤ笌闅忔満鏁扮粍鐩稿叧鑱斻€?divclass="item"@click="handleMove(row,col)":style="{height:`${itemWidth}px`,backgroundPosition:getMessBgPos(row,col),}">