From f37b247605f79823dbac06445dc96f76b897aab7 Mon Sep 17 00:00:00 2001
From: whycq <you@example.com>
Date: 星期五, 23 九月 2022 10:31:30 +0800
Subject: [PATCH] #
---
components/y-input/y-input.vue | 106 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 89 insertions(+), 17 deletions(-)
diff --git a/components/y-input/y-input.vue b/components/y-input/y-input.vue
index f7d2a9f..c88ac20 100644
--- a/components/y-input/y-input.vue
+++ b/components/y-input/y-input.vue
@@ -1,9 +1,15 @@
<template>
<view>
<view class="main">
- <view class="title item-height">{{titleText}}</view>
- <view class="input item-height">
- <input type="text" :placeholder="placeholderText" placeholder-style="font-size:28rpx" v-model="val">
+ <view style="display: flex;align-items: center;">
+ <!-- 鏍囬瑁呴グ -->
+ <view class="line"></view>
+ <view class="title" :class="zBig">{{titleText}}</view>
+ </view>
+ <view :class="zBig">
+ <input type="text" :placeholder="placeholderText" @input="input"
+ placeholder-style="font-size:22rpx" v-model="val">
+ <slot />
</view>
</view>
</view>
@@ -17,10 +23,22 @@
type: String,
default: ''
},
- inputVal: {
+ value: {
+ type: [String, Number],
+ default: ''
+ },
+ placeholder: {
type: String,
default: ''
}
+ },
+ watch: {
+ value(val) {
+ this.val = val
+ },
+ },
+ created() {
+ this.val = this.value
},
computed: {
titleText() {
@@ -35,45 +53,99 @@
},
data() {
return {
- val:''
+ val:'',
+ yBig: {
+ height: '100rpx',
+ lineHeight: '100rpx',
+ width: '100%',
+ backgroundColor: '#cccddd'
+
+ },
+ zBig: 'small',
+ pps: {
+ fontSize: '24rpx',
+ }
};
+ },
+ methods: {
+ input() {
+ this.$emit('input',this.val);
+ }
}
}
</script>
<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);
}
+ .line {
+ width: 8rpx;
+ height: 24rpx;
+ border-radius: 5rpx;
+ margin-left: 2%;
+ background-color: #409EFF;
+ }
.title {
+ width: 100%;
+ height: 50rpx;
+ line-height: 55rpx;
font-size: 32rpx;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
- text-indent: 1em;
+ text-indent: 3%;
letter-spacing: 8rpx;
color: #303133;
}
- .input {
- font-size: 28rpx;
- 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;
- /* box-shadow: 0 0 10upx rgba(0, 0, 0, 0.2); */
+ font-size: 28rpx;
+ 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