一个好看的WXSS

在点击输入框后，会发生格式的变化。方便大家共同学习进步。

.wxml

<view class="checkTime">
    <view wx:if="{{isInputTop==1}}" class="date-remind" >
     CheckTime
    </view>
    <view class="checkTimeInput">
      <input type="text"  bindinput="checkTime" placeholder="{{isInputTop!=1?'CheckTime':''}}" maxlength="8" placeholder-class="myplaceholder"/>   
    </view>   
</view>

 .wxss

.date-remind{
    background-color: white;
    font-size: 36rpx;
    color: black;
    width: 220rpx;
    text-align: center;
    border-radius: 16rpx;
    margin-top: -30rpx;
    margin-left: 30rpx;
  }
  .checkTimeInput{
      padding: 10rpx 20rpx;
      color: black;
  }
  .checkTime{
      background-color: white;
      height: 100rpx;
      width: 700rpx;
      margin: 30rpx 20rpx;
      font-size: 50rpx;
      border: 5rpx solid black;
      border-radius: 20rpx;
  }
  .myplaceholder{
      font-weight: 40;
      color: black;
      opacity: 0.6;
  }

 .js

// pages/inputStyle/inputStyle.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isInputTop:0
    },
    checkTime(e){
      this.setData({
        checkTime:e.detail.value,
        isInputTop:1
      })
      console.log(this.data.isInputTop)
    },
    /**
     * 生命周期函数--监听页面加载
     */
    
})