<template> <div class="container"> <div class="img"> <van-swipe :autoplay="3000"> <van-swipe-item> <img src="../../../public/img/cswiper.png" /> </van-swipe-item> <van-swipe-item> <img src="../../../public/img/cswiper.png" /> </van-swipe-item> <van-swipe-item> <img src="../../../public/img/cswiper.png" /> </van-swipe-item> </van-swipe> </div> <div class="list"> <div class="left"> <img src="../../../public/img/counter.png" alt="" /> </div> <div class="right"> <h3>欧亚一号专柜</h3> <p>由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状。</p> </div> </div> <van-cell-group class="gn"> <van-cell title="专柜信息" is-link value="详细信息" /> <van-cell title="访问专柜首页" is-link value="详细信息" /> <van-cell title="专柜收款码" is-link value="详细信息" /> <van-cell title="推送门店信息" is-link value="详细信息" /> </van-cell-group> </div> </template> <script> export default { data() { return {}; } }; </script> <style scoped> .gn >>> .van-cell__title{ font-size:14px; font-weight:bold; color:rgba(45,71,106,1); } .gn { margin-top: 12px; width: 100%; } .container { background: #f8f8f8; height: auto; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; min-height: 100%; } .img { width: 100%; height: 200px; background-color: pink; } .img img { width: 100%; } .list { height: 80px; width: 100%; background-color: #fff; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(238, 238, 238, 1); box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1); border-radius: 2px; z-index: 100; } .list3 { border-bottom: none; margin-bottom: 0; } .left, .right { height: 80px; } .left { width: 80px; background: rgba(248, 248, 248, 1); position: absolute; top: 188px; left: 10px; } .left img { width: 100%; } .right { width: 76%; padding: 10px; background-color: #fff; margin-left: 94px; } h3 { font-size: 14px; font-weight: bold; color: rgba(45, 71, 106, 1); } p { margin-top: 10px; font-size: 12px; color: rgba(45, 71, 106, 0.8); } </style>