部门平台首页弄个照片墙展示人员风采，组件代码如下：
<template> <div class="photo"> <div class="container" v-for="(path, cl) in info"> <div :class="`box imgi ${status1} ${status2 + cl}` " ref="path"><img :src="path"></div> </div> </div> </template> <style> //样式是写死的，本想动态计算坐标和旋转角度，但是效果不好，写死将就用。 .container { width: 80%; height: 100%; margin: 80px 70px; position: relative; } .box { width: 210px; transition: 0.1s; height: 100%; -moz-transition: 1s; -webkit-transition: 1s; position: absolute; } img { width: 100%; padding: 10px 10px 15px 10px; border: 1px solid #ddd; /*position:absolute; */ z-index: 1; } .box:hover { -webkit-transform: rotate(0deg) !important; transform: scale(1.5) !important; -webkit-transform: scale(1.5) !important; box-shadow: 4px 4px 10px #ccc !important; -moz-box-shadow: 4px 4px 10px #ccc !important; -webkit-box-shadow: 4px 4px 10px #ccc !important; z-index: 1 !important; } .imgi { margin-left: 50%; top: 0px; left: 0px; -webkit-transform: rotate(0deg); } .i { margin-left: 10%; top: 0px; left: 0px; -webkit-transform: rotate(0deg); } .img1 { margin-left: 50%; top: 250px; left: -700px; -webkit-transform: rotate(-40deg); } .img2 { top: 10px; left: -60px; -webkit-transform: rotate(-20deg); } .img3 { top: 0px; left: 600px; -webkit-transform: rotate(-20deg); } .img4 { top: 10px; left: 1100px; -webkit-transform: rotate(10deg); } .img5 { top: 300px; left: 600px; -webkit-transform: rotate(30deg); } .img6 { top: 10px; left: 800px; -webkit-transform: rotate(-10deg); } .img7 { top: 100px; left: 400px; -webkit-transform: rotate(20deg); } .img8 { top: 350px; left: 1050px; -webkit-transform: rotate(30deg); } .img9 { top: 200px; left: 900px; -webkit-transform: rotate(40deg); } .img10 { top: 200px; left: 1200px; -webkit-transform: rotate(50deg); } .img11 { top: 00px; left: 300px; -webkit-transform: rotate(50deg); } .img12 { top: 200px; left: 300px; -webkit-transform: rotate(50deg); } .img13 { top: 400px; left: 700px; -webkit-transform: rotate(-10deg); } .img14 { top: 300px; left: 250px; -webkit-transform: rotate(-30deg); } .img15 { top: 300px; left: 200px; -webkit-transform: rotate(40deg); } .img0 { top: 00px; left: 500px; -webkit-transform: rotate(0deg); } </style> <script> export default { name: "container", data() { return { status1: '', status2: '', info: this.getList(), infos: ['../assets/pic/', '', ''] } }, created() { this.getList() setTimeout(() => { this.status1 = 'i' }, 1000); setTimeout(() => { this.status2 = 'img' }, 1100) //两个setTimeout，为了动态追加元素样式，增加点动效 }, methods: { getList() { this.p_l = { 'img1': 'xx.png', 'img2': 'xx.png', 'img3': 'xx.jpg', 'img4': 'xx.jpg', 'img5': 'xx.png', 'img6': 'xx.jpg', 'img7': 'xx.jpg', 'img8': 'xx.jpg', 'img9': 'xx.jpg', 'img10': 'xx.jpg', 'img11': 'xx.jpg', 'img12': 'xx.jpg', 'img13': 'xx.jpg', 'img14': 'xx.jpg', 'img15': 'xx.png', 'img16': 'xx.png' } //这里可以使用数组，由于开始想复杂了，所以用了对象。 var phono = [] for (let i in this.p_l) { phono.push(require('../assets/pic/' + this.p_l[i])) //获取照片 } return phono } } } </script>下图是效果，放到首页使用，可以监听路由，不影响二级路由。
