<template> <view class="page"> <u-navbar title="WiFi选择" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='50' id="navbar"> </u-navbar> <view class="list"> <view class="name"> WiFi列表 </view> <view class="list_wifi"> <view class="item_wifi" v-for="(item,index) in 5" :key="index"> chuangteA </view> </view> </view> <view class="anniu"> <view class=""> 确认选择 </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#fff", }, } }, onLoad() { }, methods: { } } </script> <style lang="scss"> /deep/ .u-iconfont, /deep/ .u-title{ padding-bottom: 20rpx; } .anniu{ width: 750rpx; height: 152rpx; background: #FFFFFF; box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3); border-radius: 0rpx 0rpx 0rpx 0rpx; padding-top: 20rpx; box-sizing: border-box; position: fixed; left: 0; bottom: 0; view{ width: 680rpx; height: 104rpx; background: #48893B; text-align: center; line-height: 104rpx; font-weight: 600; font-size: 36rpx; color: #FFFFFF; margin: auto; border-radius: 20rpx; } } .list{ width: 680rpx; max-height: 76vh; background: #FFFFFF; border-radius: 24rpx; margin: auto; margin-top: 22rpx; padding: 36rpx 34rpx; box-sizing: border-box; .list_wifi{ width: 100%; height: 70vh; overflow: scroll; padding-bottom: 50rpx; box-sizing: border-box; padding: 0 16rpx; box-sizing: border-box; .item_wifi{ width: 100%; height: 92rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15); border-radius: 6rpx 6rpx 6rpx 6rpx; display: flex; align-items: center; font-weight: 600; font-size: 32rpx; color: #3D3D3D; padding-left: 34rpx; box-sizing: border-box; margin-top: 24rpx; } } .name{ font-weight: 600; font-size: 36rpx; color: #3D3D3D; } } page { background: #F6F6F6; } </style>