From 1bd0fa2bc3589c5084b8a672de9c9a1f5bb51ab9 Mon Sep 17 00:00:00 2001 From: whycq <you@example.com> Date: 星期五, 23 九月 2022 02:11:28 +0800 Subject: [PATCH] # --- components/y-input/y-input.vue | 67 ++++++++++++++++++++++++++------- 1 files changed, 52 insertions(+), 15 deletions(-) diff --git a/components/y-input/y-input.vue b/components/y-input/y-input.vue index 7473874..6cdef71 100644 --- a/components/y-input/y-input.vue +++ b/components/y-input/y-input.vue @@ -1,10 +1,10 @@ <template> <view> <view class="main"> - <view class="title item-height">{{titleText}}</view> - <view class="input item-height"> + <view class="title" :class="zBig">{{titleText}}</view> + <view :class="zBig"> <input type="text" :placeholder="placeholderText" @input="input" - placeholder-style="font-size:28rpx" v-model="val"> + placeholder-style="font-size:22rpx" v-model="val"> </view> </view> </view> @@ -48,7 +48,18 @@ }, data() { return { - val:'' + val:'', + yBig: { + height: '100rpx', + lineHeight: '100rpx', + width: '100%', + backgroundColor: '#cccddd' + + }, + zBig: 'small', + pps: { + fontSize: '24rpx', + } }; }, methods: { @@ -61,14 +72,16 @@ <style> .main { - width: 98%; + width: 96%; min-height: 100rpx; background-color: #fff; - margin: 1%; + margin: 2%; border-radius: 5rpx; box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1); } .title { + height: 50rpx; + line-height: 55rpx; font-size: 32rpx; font-weight: bold; font-family: Arial, Helvetica, sans-serif; @@ -76,26 +89,50 @@ letter-spacing: 8rpx; color: #303133; } - .input { - font-size: 12rpx; - color: #606266; - - } - .input input{ + input{ width: 96%; height: 45rpx; line-height: 50rpx; margin-left: 2%; margin-right: 1%; border-radius: 5rpx; - border: 1px solid #EBEDF0; + color: #606266; + /* border: 1px solid #EBEDF0; */ background-color: #FAFAFA; font-size: 28rpx; - text-indent: 10rpx; + text-indent: 8rpx; /* letter-spacing: 1rpx; */ } - .item-height { + .big { + height: 80rpx; + line-height: 80rpx; + font-size: 50rpx; + font-weight: bold; + } + .big input { + height: 75rpx; + line-height: 75rpx; + font-size: 38rpx; + font-weight: 400; + text-indent: 12rpx; + } + .middle { + height: 65rpx; + line-height: 65rpx; + font-size: 40rpx; + font-weight: bold; + } + .middle input { + height: 60rpx; + line-height: 60rpx; + font-size: 28rpx; + font-weight: 400; + } + .small { height: 50rpx; line-height: 50rpx; } + .placeholderSmall { + font-size:22rpx + } </style> \ No newline at end of file -- Gitblit v1.9.1