DIY水平居中

博客围绕DIY水平居中展开,但具体内容缺失。推测可能会介绍实现水平居中的方法,在前端开发等场景中,水平居中是常见需求,掌握相关实现方式很重要。
<template> <view class="content"> <view class="info"> <!-- 顶部 --> <!-- 可用积分显示 --> <view class="top"> <view class="top"> 可用积分 </view> <view class="center"> <view class="left"> ¥ </view> <view class="money"> {{points}} </view> </view> </view> <!-- 中部 --> <view class="middle"> <view class="middle"> 可提现佣金积分 </view> <view class="center"> <view class="left"> ¥ </view> <view class="money"> {{balance}} </view> </view> <view class="bottom" @click="toYue"> 提现记录 > </view> </view> <!-- 底部按钮 --> <view class="bottom"> <view class="button" @click="apply">提现</view> </view> </view> <uni-popup ref="popup" :mask-click="false" type="center"> <view class="pop-content"> <view class="title">提现</view> <view class="text"> <input class="input" v-model="amount" placeholder="请输入提现金额" /> </view> <view class="pbtns"> <view class="left" @click="toCancel">取消</view> <view class="right" @click="toSubmit">确定</view> </view> </view> </uni-popup> </view> </template> <script> import { getUserInfo, withdrawals, checkIsWithdrawal } from '@/util/api.js'; export default { data() { return { balance: 0, points: 0, amount: undefined } }, onLoad() { }, onShow() { this.getUserInfos(); }, methods: { getUserInfos() { getUserInfo().then((res) => { if (res.code === 200) { this.balance = res.data.user.balance; this.points = res.data.user.points; } }) }, toYue() { uni.navigateTo({ url: '/pages/mine/yue' }) }, apply() { if (this.balance > 0) { checkIsWithdrawal().then((res) => { if (res.code === 200) { this.$refs.popup.open(); } else { uni.showToast({ title: res.msg, icon: 'none' }); } }) } }, toCancel() { this.$refs.popup.close(); }, toSubmit() { withdrawals({ amount: this.amount }).then((res) => { if (res.code === 200) { uni.showToast({ title: '申请成功,等待审核', icon: 'none' }); this.$refs.popup.close(); // uni.navigateBack({ // delta: 1 // }) } }) } } } </script> <style lang="scss" scoped> .content { background: white; height: 100vh; padding-top: 20rpx; .info { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 容器高度占满视口 */ flex-direction: column; .top { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ flex-direction: column; .top { font-size: 32rpx; color: #333333; font-weight: bold; } .center { margin-top: 46rpx; display: flex; justify-content: center; /* 水平居中 */ flex-direction: row; font-size: 88rpx; color: #333333; .money { margin-left: 15rpx; } } .middle { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ flex-direction: column; .middle { font-size: 32rpx; color: #333333; font-weight: bold; } .center { margin-top: 46rpx; display: flex; justify-content: center; /* 水平居中 */ flex-direction: row; font-size: 88rpx; color: #333333; .money { margin-left: 15rpx; } } .bottom { font-size: 28rpx; color: #bbbbbb; margin-top: 5rpx; font-weight: 400; } } .bottom { margin-top: 316rpx; .button { width: 350rpx; height: 73rpx; background: linear-gradient(88deg, #E44E40 0%, #F55F2D 100%); border-radius: 10rpx 10rpx 10rpx 10rpx; color: white; font-size: 32rpx; text-align: center; line-height: 73rpx; } } } .pop-content { padding: 40rpx 150rpx; background-color: #ffffff; border-radius: 10rpx 10rpx; .title { color: #333333; font-size: 28rpx; margin-bottom: 40rpx; font-weight: bolder; text-align: center; } .text { color: #666; font-size: 24rpx; margin-bottom: 20rpx; .input { height: 80rpx; line-height: 80rpx; padding-left: 20rpx; border-radius: 10rpx 10rpx; border: solid 1px #F2f2f2; } } .pbtns { padding-top: 30rpx; display: flex; justify-content: space-between; .left { width: 160rpx; height: 60rpx; line-height: 60rpx; text-align: center; border-radius: 69rpx 69rpx 69rpx 69rpx; border: 1rpx solid #FFD788; color: #FFD788; font-size: 24rpx; margin-right: 50rpx; } .right { width: 160rpx; height: 60rpx; line-height: 60rpx; text-align: center; background: #FFD788; border-radius: 69rpx 69rpx 69rpx 69rpx; color: #ffffff; font-size: 24rpx; } } } } } </style> 请对此页面的布局进行调整
09-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值