微信小程序實現驗證碼樣式

<!-- 成語遮罩層 start-->
<view class="goods-detail" hidden="{{isEM}}">
  <view class="mask" bindtap='hideEM'></view>
  <view class="goodsdetail-three">
    <view style='height:10rpx;'></view>
    <view class='goods-detail-adv'>{{codeTitle}}</view>
    <image class="showword" src ="{{imgword}}"></image>//換成圖片地址就OK了
    <input class='modefy-fixed-input' adjust-position="true" focus="true" placeholder='請輸入' cursor-spacing="10" bindblur="bind_cancle" bindinput="bind_inputword" value='{{commentText}}' bindconfirm='' type='text' maxlength='10'></input>
    <!-- <view class='goods-detail-btn' bindtap='hideEM'>取消</view> -->
    <view class='goods-detail-btn-one' bindtap='nav_det'>確定</view>
  </view>
</view>
<!-- 成語遮罩層 end-->

/* 顯示成語  時間長  2019年7月11日14:31:15   */
.goods-detail .mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

.goods-detail .mask {
  background: rgba(0, 0, 0, 0.7);
}

.goodsdetail-three {
  position: fixed;
  /* top: 55%; */
  width: 500rpx;
  height: 420rpx;
  left: 125rpx;
  bottom: 28%;
  background: #fff;
  z-index: 99999999999999;
  border-radius: 10px;
  overflow: hidden;
  /* transition: all 2s; */
  animation: mythree 0.5s;
  -moz-animation: mythree 0.5s; /* Firefox */
  -webkit-animation: mythree 0.5s; /* Safari 和 Chrome */
  -o-animation: mythree 0.5s; /* Opera */
}

@keyframes mythree {
  from {
    height: 0rpx;
    bottom: 28%;
  }

  to {
    height: 500rpx;
    bottom: 28%;
  }
}

.goods-detail-adv {
  height: 80rpx;
  width: 500rpx;
  /* border: 1rpx solid #000; */
  border-bottom: 3rpx solid #f5f8fa;
  box-sizing: border-box;
  line-height: 80rpx;
  text-align: center;
/* border-bottom: 3rpx solid #f5f8fa; */

}

.goods-detail-con {
  /* height: 308rpx; */
  width: 500rpx;
  box-sizing: border-box;
    border: 1rpx solid #ff2741;
  /* border: 1rpx solid #000; */
  padding: 20rpx 20rpx 0rpx 20rpx;
  font-size: 32rpx;
  /* text-indent: 32rpx; */
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.showword {
  /* border: 1rpx solid #ff2741; */
  margin-top: 5rpx;
  height: 118.35rpx;
  width: 500rpx;
}

/* .goods-detail-btn {
  height: 70rpx;
  width: 180rpx;
  position: absolute;
  left: 20rpx;
  background: #0b1b34;
  bottom: 20rpx;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  line-height: 70rpx;
} */

.goods-detail-btn-one {
  height: 70rpx;
  width: 200rpx;
  /* border: 1rpx solid #000; */
  position: absolute;
  left: 150rpx;
  background: #0b1b34;
  bottom: 20rpx;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  line-height: 70rpx;
}
.modefy-fixed-input {
  margin-top: 7.5px;
  margin-left: 20rpx;
  height: 35px;
  width: 440rpx;
  background: #f2f2f2;
  /* border-radius: 60rpx; *//* border: 1rpx solid #1ab394; */
  box-sizing: border-box;
  padding-left: 20rpx;
  padding-right: 20rpx;
  font-size: 30rpx;
  line-height: 35px;
  color: #000;
}
/* 顯示成語  時間長  2019年7月11日14:31:15   */

就這個樣子了。。。。