baodeng_xcx/page_shanghu/chongzhi.vue

<template>
	<view class="page">
		<u-navbar title="爆灯充值" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        
		<view class="top">
			<view class="lt">
				适用门店
			</view>
			<view class="rt">
				西瓜棋牌 <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</view>
		</view>
        <view class="cishu">
        	请选择充值爆灯次数（元）
        </view>
		<view class="taocan">
			<view class="top">
				<view class="">
					充值金额
				</view>
				<view class="">
					爆灯次数
				</view>
				<view class="" style="width: 84rpx;">
					操作
				</view>
			</view>
			<view class="list" v-for="(item,index) in listtc" :key="index">
				<view class="one">
					<input type="text" placeholder="请输入充值金额" />
				</view>
				<view class="two">
					<input type="text" placeholder="请输入爆灯次数" />
				</view>
				<view class="thr">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uhKH6w6nWheOdAIXUq9f" mode=""></image>
				</view>
			</view>
		</view>
		<view class="add" @click="clc">
			新增套餐
		</view>
       
	   <view class="baocun"> 
	   	   保存
	   </view>
	   
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#0B0B0B",
                },
				listtc:[{name:'；莱克斯顿',ci:50,money:20}]
			}
		},
		onLoad() { 

		},
		methods: {
			// 点击增加更多以面糊
			clc(){
				this.listtc.push({
					name:'',
					ci:0,
                    money:50				
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #0B0B0B;
	}
	.baocun{
		width: 680rpx;
		height: 104rpx;
		background: #FF8998;
		text-align: center;
		border-radius: 10rpx;
		line-height: 104rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #000000;
	}
	.add{
		width: 618rpx;
		height: 76rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8998;
		text-align: center;
		line-height: 76rpx;
		font-size: 32rpx;
		color: #FF8998;
		margin: auto;
		margin-top: 60rpx;
	}
	.taocan{
		max-height: 50vh;
		overflow: scroll;
		.list{
			display: flex;
			justify-content: space-between;
			padding: 0 64rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			.thr{
				width: 84rpx;
				text-align: center;
				image{
					width: 56rpx;
					height: 56rpx;
				}
			}
			.one,
			.two{
				input{
					width: 184rpx;
					height: 60rpx;
					background: #202020;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					line-height: 60rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					color: #fff;
				}
			}
			
		}
		.top{
			padding: 0 64rpx;
			box-sizing: border-box;
			view{
				width: 184rpx;
				text-align: center;
			}
		}
	}
	.cishu{
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 80rpx;
		padding-left: 36rpx;
		box-sizing: border-box;
	}
	.top{
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
		height: 120rpx;
		width: 100%;
		line-height: 120rpx;
		padding: 0 36rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #FFFFFF;
	}

</style>