dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/components/watermark/Watermark6.vue

<template>
  <div class="Watermark5" @click="linkTo('./WatermarkConfig')">
    <div class="top">
      <h2>走访慰问</h2>
      <div class="right">
        <h2>{{ time }}</h2>
        <p>{{ date }}</p>
      </div>
    </div>
    <div class="info">
      <div class="info-item">
        <label>人员：</label>
        <span>陶白白</span>
      </div>
      <div class="info-item">
        <label>网格：</label>
        <span>迁延街第一网格</span>
      </div>
      <div class="info-item">
        <label>地点：</label>
        <span>武汉市·绿地蓝海A座</span>
      </div>
      <div class="info-item">
        <label>服务对象：</label>
        <span>王一一</span>
      </div>
    </div>
    <div class="bottom">
      <span>工作纪实</span>
      <i>网格员工作纪实</i>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    data () {
      return {
        date: '',
        time: '',
        week: '',
        timer: null
      }
    },

    computed: {
      weekCn() {
        if (this.week === 1) {
          return '星期一'
        }
        if (this.week === 2) {
          return '星期二'
        }
        if (this.week === 3) {
          return '星期三'
        }
        if (this.week === 4) {
          return '星期四'
        }
        if (this.week === 5) {
          return '星期五'
        }

        if (this.week === 6) {
          return '星期六'
        }

        return '星期天'
      }
    },

    created () {
      this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
      this.time = this.$dayjs().format('HH:mm')

      this.timer = setInterval(() => {
        this.date = this.$dayjs().format('YYYY-MM-DD')
        this.time = this.$dayjs().format('HH:mm')
        this.week = new Date().getDay()
      }, 1000)
    },

    destroyed () {
      clearInterval(this.timer)
    },

    methods: {
      ...mapActions(['injectJWeixin']),

      linkTo (url) {
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Watermark5 {
    width: 440px;
    padding: 0 16px 22px;
    color: #000;
    box-sizing: border-box;
    background: #fff;

    h2 {
      font-weight: normal;
    }

    * {
      box-sizing: border-box;
    }

    .line {
      margin-top: 4px;
      height: 4px;
      background: #2145C4;
    }

    .bottom {
      display: flex;
      align-items: center;
      border: 3px solid #2145C4;

      span {
        width: 120px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        color: #fff;
        font-size: 26px;
        background: #2145C4;
      }

      i {
        flex: 1;
        color: #2145C4;
        font-size: 26px;
        font-style: normal;
        text-align: center;
      }
    }

    .info {
      margin-bottom: 16px;

      .info-item {
        display: flex;
        line-height: 1.3;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        label {
          color: #333;
          font-size: 26px;
        }

        span {
          color: #000000;
          font-size: 26px;
          font-weight: 600;
        }
      }
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90px;
      margin-bottom: 20px;
      color: #2145C4;
      border-bottom: 4px solid #2145C4;

      & > h2 {
        font-size: 32px;
        font-weight: 600;
      }

      .right {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        h2 {
          width: 96px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 30px;
          background: #2145C4;
        }

        p {
          font-size: 24px;
        }
      }
    }
  }
</style>