布局悬浮显示更多文字，增加箭头指示效果

璁板綍涓€涓晫闈氦浜扷I鏁堟灉鍥剧殑灏忓姛鑳介渶姹傛弿杩版枃瀛楀彧鏄剧ず涓€琛岋紝褰撴枃瀛楄秴杩囩渷鐣ュ彿鏄剧ず鏃讹紝鍙充晶鏄剧ず绠ご鎸囩ず绗︼紝鍚﹀垯涓嶆樉绀虹澶达紝榧犳爣鎮仠鏄剧ず鍏ㄩ儴鏂囧瓧锛岀澶村厛杞悜鎬濈淮鍒嗘瀽鎶涘紑鍙宠竟鐨勨€滅澶粹€濅笉璋堬紝瀹炵幇绠€鍗曠殑榧犳爣鎮仠鏄剧ず骞朵笉闅撅紙鍦ㄤ箣鍓嶇殑銆愬崱鐗囧竷灞€...銆戜腑宸茬粡瀹炵幇浜嗘枃绔狅紝鏈枃浠ｇ爜淇敼鑷笂涓€绡囨枃绔狅級銆傛帶鍒剁澶翠氦浜掓椂锛屾妸鏂囨湰鍏冪礌鍜岀澶村厓绱犲垎鍒缃搴︺€備娇鐢ㄨ繃娓℃潵鎺у埗榧犳爣鎮仠绠ご鐨勬柟鍚戙€備娇鐢ㄨ嚜瀹氫箟鍛戒护鎺у埗鈥滅澶粹€濇樉绀恒€傞殣钘忎唬鐮佹樉绀哄崱鐗囩粍浠秇tmlless.textCard{border-radius:8px;娓告爣锛氭寚閽堬紱鑳屾櫙棰滆壊锛氶粍缁胯壊锛涢珮搴︼細36px锛涗綅缃細鐩稿锛涘彸杈硅窛锛?6px锛涜竟璺濋《閮細16px锛?333锛?card-name{浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涙樉绀猴細鍐呰仈鍧楋紱鏈€澶у搴︼細璁＄畻锛?00%-20px锛夛紱//瀹藉害锛?00%锛涘～鍏咃細8px08px14px锛涜竟鐣屽崐寰勶細8px锛涜楂橈細20px锛涙澶у皬锛氳竟妗嗘锛泒&:hover{.card-name{white-space锛氭甯革紒閲嶈锛涙孩鍑猴細鍙栨秷璁剧疆锛侀噸瑕侊紱鑳屾櫙棰滆壊锛氶粍缁胯壊锛涚洅瀛愰槾褰憋細06px20pxrgba(72,88,183,0.2);z-鎸囨暟锛?锛涘搴︼細100%锛涙渶澶у搴︼細鍙栨秷璁剧疆锛侀噸瑕侊紱濉厖鍙筹細14px锛泒.icon_down{z-index:10;鍙樻崲锛歵ranslateY(-50%)rotate(180deg);杩囨浮锛氬彉鎹?.1s锛泒}.icon_down{浣嶇疆锛氱粷瀵癸紱:0;椤堕儴锛?0%锛涘彉鎹細骞崇Щ锛?50%锛夋棆杞紙0搴︼級锛涘彉鎹㈠師鐐癸細涓績锛涘搴︼細20px锛涘瓧浣撳ぇ灏忥細12px锛涙枃鏈榻愶細灞呬腑锛?/娉ㄥ唽鍏ㄥ眬鑷畾涔夋寚浠v-moreIcon`importVuefrom"vue";Vue.directive("moreIcon",{//缁戝畾bind:function(){},//缁戝畾鍏冪礌鎻掑叆DOM鑺傜偣inserted:function(el){//缁戝畾鍏冪礌鐨勭埗鍏冪礌constp_w=el.parentNode.offsetWidth;//缁戝畾鍏冪礌鐨勫墠涓€涓厔寮熷厓绱燾onsts_w=el.previousElementSibling.offsetWidth;//20:鍥炬爣鐨勫搴?鏈€澶ф枃鏈搴alc(100%-20px)if(p_w-s_w<=20){//涓€琛屾枃瀛楀凡婊★紝鏄剧ず鍥炬爣}else{//鏂囧瓧鏈弧锛岄殣钘忓浘鏍噀l.style.display='none'}},//缁勪欢鏇存柊璋冪敤update:function(){},//缁勪欢鏇存柊瀹屾垚componentUpdated:function(){},//瑙ｉ櫎缁戝畾unbind:function(){},});瀹炵幇绫讳技浜庡湪鐜版湁鍔熻兘涓婂疄鐜扮殑UI鍥剧殑鏁堟灉馃巿馃巿馃巿馃尮鎸佺画鏇存柊锛屽叧娉ㄦ垜锛屼綘浼氬彂鐜颁竴涓帴鍦版皵鐨勫疂鍓嶇馃槉锛岃鎴戜滑涓€璧峰涔犳垚闀裤€傪煄夊枩娆㈢殑鏈嬪弸璁板緱鐐硅禐鍏虫敞鏀惰棌锛岀湅瀹屼笉浼氳糠璺煒夝煄佹杩庡ぇ瀹惰瘎璁轰氦娴侊紝锜硅煿馃槉