#

whycq

2022-09-23 f37b247605f79823dbac06445dc96f76b897aab7

 components/y-input/y-input.vue

@@ -1,10 +1,15 @@
<template>
   <view>
      <view class="main">
         <view class="title item-height">{{titleText}}</view>
         <view class="input item-height">
         <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:28rpx" v-model="val">
             placeholder-style="font-size:22rpx" v-model="val">
             <slot />
         </view>
      </view>
   </view>
@@ -48,7 +53,18 @@
      },
      data() {
         return {
            val:''
            val:'',
            yBig: {
               height: '100rpx',
               lineHeight: '100rpx',
               width: '100%',
               backgroundColor: '#cccddd'
					
            },
            zBig: 'small',
            pps: {
               fontSize: '24rpx',
            }
         };
      },
      methods: {
@@ -61,37 +77,75 @@

<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>