CommunityApp/pages/myPassword/myPassword.vue

<template>
<view class="container">
  <view class="password_top">
    <image mode="aspectFill" src="http://139.9.103.171:1888/img/image/wechat.png"></image>
  </view>
  <view class="password_bg">
        <view class="tips">请妥善保管!</view>
      <view class="password"><text class="w200">动态密码：</text><text class="col">{{password}}</text></view>
      <view class="date"><text class="w200">有效次数：</text><text class="col">{{valid_count}}次</text></view>
      <view class="time"><text class="w200">有效期至：</text><text class="col">{{end_date}}</text></view>
  </view>
</view>
</template>

<script>

export default {
  data() {
    return {
      valid_count: null,
      password: null,
      end_date: null
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      valid_count: options.valid_count || 1,
      password: options.password || '123456',
      end_date: options.end_date || '2021年1月5日 15点15分'
    });
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
/* pages/myPassword/myPassword.wxss */
.password_top{
  text-align: center;
  height: 300rpx;
  background: $base-btn-color;
  padding:80rpx;
}
.password_top image{
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
.password_bg{
  background: #fff;
  width: 80%;
  border-radius: 10rpx;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding:40rpx 20rpx;
 
}
.password_bg view{
  line-height: 100rpx;
 box-shadow:0px 30rpx 20px -30rpx #e2e2e2;
}
.password_bg view text.w200{
  width: 200rpx;
  text-align: right;
  display: inline-block;
}
.password_bg .tips{
  text-align: center;
  color: #d24a58;
}
.password_bg .col{
  font-size: 700;
  color: $base-btn-color;
}
</style>