<template> <d2-container> <div class="container"> <div class="left"> <div class="img"><img src="../img/active1.png" alt=""></div> <div class="btn"> <div class="btn-l">配置</div> <div class="btn-r">预览</div> </div> </div> <div class="right"> <div class="img"><img src="../img/active2.png" alt=""></div> <div class="btn"> <div class="btn-l">配置</div> <div class="btn-r">预览</div> </div> </div> </div> </d2-container> </template> <script> export default {}; </script> <style scoped> .container { padding: 16px; display: flex; } .left,.right{ display: flex; flex-direction: column; width: 440px; height: 500px; background: #f8f8f8; margin-right: 24px; box-sizing:border-box; padding: 16px; } .img { width: 408px; height: 408px; } .img img { width: 100%; } .btn { height: 72px; display: flex; align-items: center; justify-content: space-between; } .btn-l,.btn-r { width:198px; height:40px; background:rgba(232,233,254,1); box-shadow:0px 1px 3px 0px rgba(221,221,221,1); border-radius:4px; border:1px solid rgba(78,89,199,1); font-size: 14px; font-weight:800; color:rgba(78,89,199,1); display: flex; align-items: center; justify-content: center; } .btn-r { background:rgba(78,89,199,1); color:#fff; } </style>