vue使用less完成循環排版css鼠標移入圖標縮放顯示文字效果

做前端css小小的花裏胡哨還是要會一點，一些主要注意的說明直接在代碼中註釋說明

<template>
<div class="page">
    <div id="card">
        <el-row class="row-style">
            <span >資源統計</span>
        </el-row>
        <el-row style="margin-top:4rem">
            <template v-for="item in assetList">
                <el-col :span="2" :offset="1" :key="item.name">
                     <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                     <!-- 使用 `` 英文半角鍵盤1旁邊按鍵實現 ${} 字符串動態設置 -->
                        <div :class="`box-${item.bgIndex}`" @click="goPath(item.pathName)">
                            <i :class="`icon iconfont icon-size icon-${item.icon}`"></i>
                            <!-- <icon name="user-circle-o" class=""></icon> -->
                            <span class="span-font">{{item.name}}</span>
                        </div>
                     </el-tooltip>
                </el-col>
            </template>
        </el-row>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return {
            assetList:[
                {
                    bgIndex:1,
                    pathName:'',
                    name:'資產1',
                    icon:'reset',
                },
                {
                    bgIndex:2,
                    pathName:'',
                    name:'資產2',
                    icon:'add',
                },
                {
                    bgIndex:3,
                    pathName:'',
                    name:'資產3',
                    icon:'reset',
                },
                {
                    bgIndex:4,
                    pathName:'',
                    name:'資產4',
                    icon:'reset',
                },
                {
                    bgIndex:5,
                    pathName:'',
                    name:'資產5',
                    icon:'reset',
                },
                {
                    bgIndex:6,
                    pathName:'',
                    name:'資產6',
                    icon:'reset',
                },
                {
                    bgIndex:7,
                    pathName:'deviceLoginFailReportByDeviceGroup',
                    name:'資源登錄失敗統計',
                    icon:'reset',
                }
                // ,
                // {
                //     name:'資產8',
                //     icon:'reset',
                // }
            ]
        }
    },
    methods:{
        goPath(val){
            console.log("goPath==",val);
            this.$router.push({name:val});
        }
    }
}
</script>
<style lang="less" scoped>
@1:blue;
@2:yellow;
@3:#DD8811;
@4:#559955;
@5:#601180;
@6:#333333;
@7:#DD4B39;
@8:cyan;
@borderColor:blue;
@whiteColor:#ffffff;
@selectorDom: #card;
@rowStyle: row-style;
@iconSize:{width:4rem;height:4rem;vertical-align:middle;}
@{selectorDom}{
    .@{rowStyle}{
        border-left:5px solid @borderColor;
        font-size:20px;
        margin:2rem 0 0 2rem;
        padding-left: 5px;
    }
}

.page-bg(@color:#fff) {
    background-color: @color;
}
.page{
    .page-bg();
}
.icon-size{
    @iconSize();
    color:#EEEEEE;
    font-size: 25px !important;
    opacity: 1;
     /**
     	transition 
     		作用於下面的&:hover .icon-size 觸發事件執行過渡時間效果(鼠標移出後恢復原先效果)
     		實現圖標透明度1-0，以及圖標大小縮放
     */
    transition: opacity .3s ease,font-size .3s ease; 
   
}
.span-font {
    color:@whiteColor;
    width: 100%;
}
//這邊使用less循環效果
.colums-box(8); //相當於執行方法
.colums-box(@n, @i: 1) when (@i =< @n) {
        // .column-@{i} {

        //   width: (@i * 100% / @n);
        // }
        .box-@{i} {
            position: relative;
            width: 120px;
            height: 120px;
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;
            line-height: 120px;
            background-color: #888;
            text-align: center;
            span{
                position: absolute;
                top: 100%;
                
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                font-weight: 600;
                font-size: 100%;
                transition: top .3s ease,opacity .3s ease;
            };
            &:hover { //& ==外層 .box-1
            //這裏實現根據循環得到每個循環出來的背景顏色都不一樣。
                background-color: @@i; //屬性key拼接
                // background-color: rgb(51,153,204);
            };
            &:hover .icon-size {
                opacity: 0;
                font-size: 0 !important;
            
            }
            &:hover span{
                display: block;
                top: 0; //span內容從下往上移動顯示
                opacity: 1;
            }
        }
        .colums-box(@n, (@i + 1));
}
// .box {
//     position: relative;
//     width: 100px;
//     height: 100px;
//     border-radius: 5px;
//     overflow: hidden;
//     line-height: 100px;
//     background-color: #888;
//     text-align: center;
//     span{
//         position: absolute;
//         top: 100%;
        
//         left: 0;
//         width: 100%;
//         height: 100%;
//         opacity: 0;
//         font-weight: 600;
//         font-size: 100%;
//         transition: top .3s ease,opacity .3s ease;
//     };
//     &:hover {
//         background-color: rgb(51,153,204);
//     };
//     &:hover .icon-size {
//          opacity: 0;
//          font-size: 0 !important;
      
//     }
//     &:hover span{
//         display: block;
//         top: 0;
//         opacity: 1;
//     }
// }
</style>