<template><div class="content"><h3 class="head">模块1</h3><div class="mk1"><div class="left"><ul><li><span>菜单1</span><div class="nav">1</div></li><li><span>菜单2</span><div class="nav">2</div></li><li><span>菜单3</span><div class="nav">3</div></li></ul></div><!--模块1-中间--><div class="middle"><img src="../../assets/banner.jpg" /></div><!--模块1-右边--><div class="right"><div class="phone_move"><img src="../../assets/phone.png" /></div></div></div><!--模块2--><h3 class="head">模块2</h3><div class="mk2"><div class="right"><img src="../../assets/b.jpg" /><div class="text">美丽风景图</div></div><ul><li><a><img src="../../assets/a.jpg" /></a></li><li><a><img src="../../assets/a.jpg" /></a></li><li><a><img src="../../assets/a.jpg" /></a></li><li><a><img src="../../assets/a.jpg" /></a></li></ul></div></div> </template> <script>export default {data() {return {}},methods: {}} </script> <style lang="scss">.content {position: relative;display: flex;flex-direction: column;margin: 0 auto;width: 80%;}.head {float: left;}.mk1 {display: flex;flex-direction: row;height: 300px;width: 100%;.left {width: 300px;height: 300px;background-color: red;font-size: 14px;border: 1px #ffffff solid;ul {width: 100%;height: 100%;display: flex;padding: 0;margin: 0;position: relative;flex-direction: column;}ul li {color: #ffffff;width: 100%;height: 100%;height: 65px;list-style: none;display: flex;align-items: center;border-bottom: 1px #ffffff solid;span{margin-left: 15px;}}ul li:hover{color: #000;background-color: yellow;.nav{display: block;}}.nav {height: 90px;width: 170px;background: #ffffff;position: absolute;z-index: 9999;right: -180px;display: none;border:1px rgba(0,0,0,0.3) solid;}.nav::before { width: 25px; height: 25px; position: absolute; content: ""; left: -13px; top: 30px; background-color: #ffffff; transform: rotate(45deg); border-left:1px rgba(0,0,0,0.3) solid; border-bottom:1px rgba(0,0,0,0.3) solid;/* border-top: 20px dashed transparent; border-right: 20px solid #ffffff; border-bottom: 20px dashed transparent; */}}.middle {flex: 1;//flex设置为1沾满剩余空间img {width: 100%;height: 100%;}}.right {width: 200px;height: 100%;background-color: yellow;display: flex;justify-content: center;align-items: center;.phone_move {width: 80px;height: 80px;background-color: red;border-radius: 50%;display: flex;justify-content: center;align-items: center;}/* turn : 定义的动画名称 1s : 动画时间 linear : 动画以何种运行轨迹完成一个周期 infinite :规定动画应该无限次播放 */.phone_move img {animation: turn 1s linear infinite;}@keyframes turn {5%,15%,30% {transform: rotate(10deg);}10%,20% {transform: rotate(-10deg);}40% {transform: rotate(0deg);}}}}.mk2 {display: flex;width: 100%;flex-direction: row-reverse;justify-content: space-between;.right {width: 200px;height: 400px;position: relative;overflow: hidden;width: 200px;height: 400px;img {width: 100%;height: 100%;}.text {width: 100%;position: absolute;bottom: 0;height: 30px;background: rgba(0,0,0,0.5);text-align: center;// opacity: 0.5;color: #fff;font-size: 14px;transition: all 1s;}.text:hover {padding-top: 5px;height: 50px;}}ul {flex: 1;//使用网格布局display: grid;grid-gap: 50px 5px; //上下 左右grid-template: 33% 33% 33% /33% 33% 33%; //两行 每行每个li占33%padding: 0;justify-items: center;align-items: center;}ul li {list-style: none;margin: 5px;height: 200px;border-radius: 10px;overflow: hidden;transition: all 1s;a img {height: 100%;width: 100%;display: block;transition: all 1s;}}ul li:hover {box-shadow: 5px -5px 15px rgba(0, 0, 0, 0.5); //x轴正数右侧偏，负值左偏 ； y轴 负值向上偏，正值向下；15px 投影范围transform: translateY(-10px); //向上移10pximg{transform: scale(1.1); //图片放大为原来的1.1倍}}} </style> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
