1. 可视化大屏入口 - 图片逐渐放大效果

页面效果图：

 鼠标滑过 （图片逐渐放大）：

 vue + element-ui 代码片段:

<template>
  <div class="screen-home">
    <el-card v-for="(it, idx) in labelArr" :key="idx" shadow="hover" style="width:38%; margin: 12px 3%" >
      <div @click="handleOpenScreen(it)" class="card-content" >
        <img :src="it.pic" class="screen-image">
        <h3 class="screen-tit">{{it.tit}}</h3>
      </div>
    </el-card>
  </div>
</template>
<script>

export default {
  name: 'screenHome',
  data() {
    return {
      labelArr: [
        { tit: '耗能分析', pic: 'https://img1.baidu.com/it/u=909856697,2475655661&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},
        { tit: '驾驶分析', pic: 'https://img2.baidu.com/it/u=539648821,3689763277&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500'},
        { tit: '行业分析', pic: 'https://img1.baidu.com/it/u=3663267032,519308240&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'},
        { tit: '旅游分析', pic: 'https://img2.baidu.com/it/u=495816705,3955212581&fm=253&fmt=auto&app=138&f=JPG?w=911&h=500'},
      ]
    }
  },  
  methods: {
    handleOpenScreen(row) {
      const { href } = this.$router.resolve({
        path: row.url,
      });
      window.open(href, "_blank");
    },
  }

}
</script>


<style lang="scss" scoped>
.screen-home {
  padding: 20px;
  display:flex; 
  align-items: center; 
  flex-wrap: wrap; 
}
.screen-image {
  width: 100%;
  height: auto;
}
.screen-tit {
  text-align: center;
  margin-top: 10px;
  cursor: pointer;
}
.card-content {
  transition: all .5s ease .1s;
  cursor: pointer;
}
.card-content:hover  {
  color: #00D7B2;
  transform: scale(1.05);
}


</style>

注意： 

• 入口静态图 如果不需要高清图  格式尽量用JPG/JPEG
• 压缩率高，体积小  
•  顺便推荐一个 自用的压缩宝藏tool呀  https://tinyjpg.com/