做前端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>