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

<template>
  <div class="Watermark6" @click="linkTo('./WatermarkConfig')">
    <div class="title">
      <h2>我是标题</h2>
    </div>
    <div class="info">
      <div class="info-item">
        <label>时间：</label>
        <span>{{ date }}</span>
      </div>
      <div class="info-item">
        <label>地点：</label>
        <span>武汉市·绿地蓝海A座</span>
      </div>
    </div>
  </div>
</template>

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

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

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

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

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

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

<style lang="scss" scoped>
  .Watermark6 {
    width: 440px;
    box-sizing: border-box;

    h2 {
      font-weight: normal;
    }

    * {
      box-sizing: border-box;
    }

    .info {
      padding: 24px;
      background: rgba(255, 255, 255, 0.7);

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

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

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

        span {
          flex: 1;
          text-align: justify;
          color: #000000;
          font-size: 28px;
        }
      }
    }

    .title {
      position: relative;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #fff;
      background: rgba(23, 91, 255, 0.7);

      h2 {
        font-size: 32px;
      }

      &::after {
        position: absolute;
        left: 16px;
        top: 50%;
        z-index: 1;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #FFCA32;
        content: ' ';
        transform: translateY(-50%);
      }

      &::before {
        position: absolute;
        right: 16px;
        top: 50%;
        z-index: 1;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #FFCA32;
        content: ' ';
        transform: translateY(-50%);
      }
    }
  }
</style>