<template>
	<view>
		<u-input v-model="value" type="text" :border="true"
			placeholder="请输入新昵称"
		 input-align="center" :clearable="false" class="name-input"/>
		<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">确认</u-button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				value: ''
			}
		},
		methods: {
			// 确认调接口
			confim() {
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.name-input {
		height: 80rpx;
		border-radius: 14rpx;
		border-color: transparent !important;
		margin: 40rpx 20rpx;
		background-color: #2B3062;
		& /deep/ .u-input__input {
			height: 100%;
		}
		& .input-placeholder {
			color: #8688A4;
			font-size: 28rpx;
		}
	}
	
	.confim {
		margin: 70rpx 45rpx 29rpx 45rpx;
		height: 90rpx;
		
		background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		&::after {
			border: none;
		}
	}
</style>
