<template> <view class="page"> <u-navbar title="存取杆" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='50' id="navbar"> </u-navbar> <view class="toplist"> <view class="one"> <view class=""></view> 空闲 </view> <view class="one"> <view class="" style="background-color: #48893B;"></view> 选中 </view> <view class="one"> <view class="" style="background-color: #FFCBCB;"></view> 已被租用 </view> </view> <view class="bd"> <view class="name"> 存杆柜 </view> <view class="ul"> <view class="li" v-for="(item,index) in 10" :key="INDEX"> 1号 </view> </view> </view> <view class="anniu" @click="btnzu"> 立即租用 </view> <view class="annius" @click="btnzujl"> 租用记录 </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#fff", }, } }, onLoad() { }, methods: { // 点击跳转到立即租用 btnzu(){ }, // 点击跳转到租用记录 btnzujl(){ } } } </script> <style lang="scss"> /deep/ .u-iconfont, /deep/ .u-title{ padding-bottom: 20rpx; } .anniu{ width: 674rpx; height: 96rpx; background: #48893B; border-radius: 53rpx 53rpx 53rpx 53rpx; text-align: center; line-height: 96rpx; font-weight: 600; font-size: 40rpx; color: #FFFFFF; margin: auto; position: fixed; left: 50%; transform: translateX(-50%); bottom: 258rpx; } .annius{ width: 674rpx; height: 96rpx; border-radius: 53rpx 53rpx 53rpx 53rpx; border: 2rpx solid #48893B; text-align: center; line-height: 96rpx; font-weight: 600; font-size: 40rpx; color: #48893B; margin: auto; position: fixed; left: 50%; transform: translateX(-50%); bottom: 120rpx; } .bd{ .ul{ border-radius: 6rpx 6rpx 6rpx 6rpx; display: flex; flex-wrap: wrap; padding:0 32rpx; box-sizing: border-box; .li:nth-child(4n) { margin-right: 0; } .li{ width: 140rpx; height: 88rpx; background: #DEF1DA; border-radius: 6rpx 6rpx 6rpx 6rpx; margin-top: 30rpx; text-align: center; line-height: 88rpx; font-weight: 600; margin-right: 18rpx; } } padding: 0 36rpx; box-sizing: border-box; .name{ font-weight: 600; font-size: 40rpx; color: #3D3D3D; border-left: 8rpx solid #48893b; padding-left: 16rpx; box-sizing: box; } } .toplist{ display: flex; padding: 56rpx 36rpx; box-sizing: border-box; .one{ display: flex; align-items: center; margin-right: 56rpx; view{ margin-right: 18rpx; width: 44rpx; height: 44rpx; background: #DEF1DA; border-radius: 4rpx 4rpx 4rpx 4rpx; } } } page { background: #F6F6F6; } </style>