<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<cirular-input></cirular-input>
		<u-popup v-model="show" mode="bottom" border-radius="50" length="40%">
			<view class="close">
				<image class="fz_icon_gb" src="/static/img/fz_icon_gb/fz_icon_gb.png"></image>
			</view>
			<view>
				<view style="display: flex; justify-content: space-between;">
					<view>标题</view>
					<view><image src="/static/img/fz_icon_xz/fz_icon_xz.png" style="width: 50px;height: 50px;"></image></view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="show" mode="center" border-radius="10" length="40%" class="popup-center">
			<view class="content">本次兑换将扣除您9元余额是否确认交易</view>
			<view style="display: flex;">
				<view>否</view>
				<view>是</view>
			</view>
		</u-popup>
		<u-button @click="showModal">弹起Modal</u-button>
	</view>
</template>

<script>
	import cirularInput from '../../components/input/circularInput.vue'
	export default {
		components: {
			cirularInput
		},
		data() {
			return {
				show: true,
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			confirm() {
				setTimeout(() => {
					// 3秒后自动关闭
					// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
					this.$refs.uModal.clearLoading();
					this.show = false
				}, 3000)
			},
			showModal () {
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fz_icon_gb {
		width: 50px;
		height: 50px;
		margin: 20px;
		float: right;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: $uni-bg-color;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.dialog /deep/ .u-mode-center-box {
		background-color: #2B3062;
	}
	.dialog /deep/ .u-model {
		background-color: #2B3062;
	}
	.dialogtxt {
		width: 359px;
		height: 84px;
		font-size: 30px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 42px;
	}
	.popup-center /deep/ .u-mode-center-box {
		background-color: #2B3062;
		& .content {
			text-align: center;
			height: 84px;
			font-size: 30px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42px;
		}
	}
</style>
