🚀作者简介

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗1% 
  
  
  
  
  
  
  
  
  
 ，自动充电中…

笺言：用博客记录每一次成长 
  
  
  
  
  
  
  
  
  
 ，书写五彩人生                    。

📒技术聊斋

（1）展示template

使用el-card时

 


 


 


 


 


 


 


 


 


 
，会导致点击事件失效 
 
 
 
 
 
 
 
 
 
，用 @click.native=""可解决问题
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  。

<div class="conter"> <el-card shadow="hover" class="shapeHand gradualChangeOne" @click.native="getResearch()" > <svg t="1663832401172" class="icon svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5063" > <path d="M387.9 117.9h229.7v101.9H387.9z" fill="#ffffff" p-id="5064" ></path> <path d="M624.6 226.7H380.9V110.9h243.7v115.8z m-229.7-14h215.7v-87.9H394.9v87.9z" fill="#ffffff" p-id="5065" ></path> <path d="M215.3 373.1h-14V161.9h184.6v14H215.3zM804.3 373.1h-14V175.9H621.6v-14h182.7zM804.3 904.9h-603V504h14v386.9h575V504h14z" fill="#ffffff" p-id="5066" ></path> <path d="M285.3 373.1h-14V199.7h46.1v14h-32.1zM734.3 373.1h-14V213.7h-32.1v-14h46.1zM734.3 842.5h-463V504h14v324.5h435V504h14z" fill="#ffffff" p-id="5067" ></path> <path d="M502.8 500.8l-62.2-62.2 62.2-62.2 62.2 62.2-62.2 62.2z m-42.4-62.2l42.4 42.4 42.4-42.4-42.4-42.4-42.4 42.4zM809.1 485h-92.8v-92.8h92.8V485z m-78.8-14h64.8v-64.8h-64.8V471z" fill="#ffffff" p-id="5068" ></path> <path d="M558 431.6h168.8v14H558zM285.7 431.6h168v14h-168z" fill="#ffffff" p-id="5069" ></path> <path d="M450.2 592.6h-81.8V443.7h14v134.9h67.8zM637.1 592.6H558v-14h65.1V443.7h14zM495.8 623.4h14v102.1h-14z" fill="#ffffff" p-id="5070" ></path> <path d="M656.1 200.1h14v13.1h-14zM335.8 200.1h14v13.1h-14z" fill="#ffffff" p-id="5071" ></path> <path d="M354.6 279.4h107.7v14H354.6zM473.8 279.4H651v14H473.8zM543.3 315H651v14H543.3zM354.6 315h177.2v14H354.6zM442.7 144.8h14v41.1h-14zM478.1 144.8h14v41.1h-14zM513.5 144.8h14v41.1h-14zM548.9 144.8h14v41.1h-14z" fill="#ffffff" p-id="5072" ></path> <path d="M502.79 386.286l52.255 52.255-52.254 52.255-52.255-52.255z" fill="#ffffff" p-id="5073" ></path> <path d="M502.8 500.8l-62.2-62.2 62.2-62.2 62.2 62.2-62.2 62.2z m-42.4-62.2l42.4 42.4 42.4-42.4-42.4-42.4-42.4 42.4z" fill="#ffffff" p-id="5074" ></path> <path d="M802.106 399.19v78.8h-78.8v-78.8z" fill="#ffffff" p-id="5075" ></path> <path d="M809.1 485h-92.8v-92.8h92.8V485z m-78.8-14h64.8v-64.8h-64.8V471z" fill="#ffffff" p-id="5076" ></path> <path d="M463.4 776.9v-76.8c0-0.6 0.4-1 1-1h76.8c0.6 0 1 0.4 1 1v76.8c0 0.6-0.4 1-1 1h-76.8c-0.6 0-1-0.4-1-1z" fill="#ffffff" p-id="5077" ></path> <path d="M541.2 784.9h-76.8c-4.4 0-8-3.6-8-8v-76.8c0-4.4 3.6-8 8-8h76.8c4.4 0 8 3.6 8 8v76.8c0 4.4-3.6 8-8 8z m-70.8-14h64.8v-64.8h-64.8v64.8z" fill="#ffffff" p-id="5078" ></path> <path d="M555.332 551.985v69h-105.2v-69z" fill="#ffffff" p-id="5079" ></path> <path d="M562.3 627.9H443.2v-83h119.2v83z m-105.1-14h91.2v-55h-91.2v55z" fill="#ffffff" p-id="5080" ></path> <path d="M245.7 438.6m-45.2 0a45.2 45.2 0 1 0 90.4 0 45.2 45.2 0 1 0-90.4 0Z" fill="#ffffff" p-id="5081" ></path> <path d="M245.7 490.8c-28.8 0-52.2-23.4-52.2-52.2s23.4-52.2 52.2-52.2 52.2 23.4 52.2 52.2-23.4 52.2-52.2 52.2z m0-90.4c-21.1 0-38.2 17.1-38.2 38.2s17.1 38.2 38.2 38.2 38.2-17.1 38.2-38.2-17.1-38.2-38.2-38.2z" fill="#ffffff" p-id="5082" ></path> </svg> <p class="stitle">模型推理</p> <div class="wire"><i></i></div> </el-card> <el-card shadow="hover" class="shapeHand gradualChangeTwo" @click.native="getHigh()" > <svg t="1663833369353" class="icon svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7149" > <path d="M768 682.666667h-85.333333v-128h213.333333v128h-85.333333v128h-42.666667v-128z m85.333333-170.666667h-42.666666V298.666667H170.666667v469.333333h384v42.666667H128V256h725.333333v256z m-298.666666 85.333333v42.666667H170.666667v-42.666667h384z m-384-170.666666h640v42.666666H170.666667v-42.666666z m42.666666-85.333334h42.666667v42.666667H213.333333V341.333333z m85.333334 0h42.666666v42.666667H298.666667V341.333333z m-85.333334 170.666667h42.666667v42.666667H213.333333v-42.666667z m85.333334 0h42.666666v42.666667H298.666667v-42.666667z m-85.333334 170.666667h42.666667v42.666666H213.333333v-42.666666z m85.333334 0h42.666666v42.666666H298.666667v-42.666666z m384 85.333333h42.666666v42.666667h-42.666666v-42.666667z m-85.333334 0h42.666667v42.666667h-42.666667v-42.666667z m128-170.666667v42.666667h128v-42.666667h-128z" fill="#ffffff" p-id="7150" ></path> </svg> <p class="stitle">云边端协同</p> <div class="wire"><i></i></div> </el-card> <el-card shadow="hover" class="shapeHand gradualChangeThree" @click.native="getResou()" > <svg t="1663833458734" class="icon svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9220" > <path d="M314.24 867.84h403.626667v21.333333H314.24zM864.853333 753.066667H165.333333a87.68 87.68 0 0 1-87.68-87.68V201.386667a87.68 87.68 0 0 1 87.68-87.68h699.52a87.68 87.68 0 0 1 87.68 87.68v464a87.68 87.68 0 0 1-87.68 87.68zM165.333333 135.04a66.346667 66.346667 0 0 0-66.346666 66.346667v464a66.346667 66.346667 0 0 0 66.346666 66.346666h699.52a66.346667 66.346667 0 0 0 66.346667-66.346666V201.386667a66.346667 66.346667 0 0 0-66.346667-66.346667z" fill="#ffffff" p-id="9221" ></path> <path d="M504.32 742.4h21.333333v129.28h-21.333333zM679.253333 612.906667l-83.84-168.746667h-73.386666l-39.04 86.4-73.6-228.693333-126.506667 200.96-58.666667-58.666667H88.32v-21.333333h144.64l46.08 46.08 136.746667-217.173334 70.613333 219.52 21.76-48.426666h100.48l59.946667 120.746666 20.266666-126.72h252.8v21.333334h-234.666666l-27.733334 174.72z" fill="#ffffff" p-id="9222" ></path> </svg> <p class="stitle">资源监控</p> <div class="wire"><i></i></div> </el-card> </div>

（2）样式less

盒子默认效果

.el-card {

box-shadow: none;

width: 360 / @remvw;

height: 360 / @remvw;

text-align: center;

padding-bottom: 50 / @remvw;

border: none;

}

hover效果【建议：使用 box-shadow                     、 border-color
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  、 transition】

.el-card:hover {

box-shadow: 0 1px 6px rgba(255, 255, 255, 0.932);

border-color: #eee;

transition: all 0.2s ease-in-out;

} .conter { width: 1220 / @remvw; margin: 0 auto; display: flex; justify-content: space-around; .el-card { box-shadow: none; width: 360 / @remvw; height: 360 / @remvw; text-align: center; padding-bottom: 50 / @remvw; border: none; .svg { width: 148 / @remvw; height: 130 / @remvw; margin: 30 / @remvw 0 40 / @remvw 0; } .stitle { font-size: 30 / @remvw; color: #fff; z-index: 11; margin-bottom: 10 / @remvw; } .wire { display: flex; justify-content: center; i { width: 50 / @remvw; height: 4 / @remvw; background-color: #fff; } } } .el-card:hover { box-shadow: 0 1px 6px rgba(255, 255, 255, 0.932); border-color: #eee; transition: all 0.2s ease-in-out; } } // 渐变 .gradualChangeOne { opacity: 90%; background-image: linear-gradient(to bottom right, #0ad1d1, #10607c); } .gradualChangeTwo { opacity: 85%; background-image: linear-gradient(to bottom right, #ffc4b9, #b91f03); } .gradualChangeThree { opacity: 90%; background-image: linear-gradient(to bottom right, #870eff, #4c09be); }

📓精品推荐

🔋vue非常实用的几行代码【日期处理



















、字符串处理  
  
  
  
  
  
  
  
  
  
、数组处理 
  
  
  
  
  
  
  
  
  
 、颜色操作】

🔋vue实现刷新页面随机切换背景图【适用于登陆界面】

🔋vue实现keep-alive页面缓存【三步骤配置 
   
   
   
   
   
   
   
   
   
  ，一步到位】

🔋vue实现搜索


 


 


 


 


 


 


 


 


 


 、提交等功能【回车事件】

🔋vue实现pdf在线预览业务

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟
 

 

 

 

 

 

 

 

 

 
，每一期都会为大家带来快速适用于业务的文章
 

 

 

 

 

 

 

 

 

 
，让大家做到cv即可



















。