任务中心

liukangdong

2024-05-16 34413216b5fe45d05d473f27ec6cb640a79e0c58

 h5/pages/notice/notice.vue

@@ -1,6 +1,13 @@
<template>
   <div class="container">
      <scroll-view scroll-y class="content" v-html="content"></scroll-view>
      <video src="https://vdept3.bdstatic.com/mda-nj7gwfue9kdnbtsh/sc/cae_h264/1665488517815949255/mda-nj7gwfue9kdnbtsh.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1715141591-0-0-6dfdf4d4c3d94b60b9adeb53368a72f3&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=0791905773&vid=13790089500387859718&klogid=0791905773&abtest="></video>
      <scroll-view scroll-y class="content">
         <div class="title">安泰物流厂外来人员安全告知</div>
         <div class="text">
            <div>{{ content }}</div>
         </div>
         <div class="empty"></div>
      </scroll-view>
      <div class="button" @click="toapply">确认了解</div>
   </div>
</template>
@@ -10,12 +17,54 @@
      name: 'Index',
      data() {
         return {
            content: '',
            content: `
            1确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            确认了解确认了解确认了解确认了解确认了解确认了解
            `,
            answer: ''
         }
      },
      onLoad() {
         this.getInfo()
         // this.getInfo()
      },
      methods: {
         getInfo() {
@@ -57,27 +106,41 @@
   .container {
      width: 100%;
      height: 100vh;
      padding: 30rpx;
      padding: 10rpx 30rpx 0;
      box-sizing: border-box;
      display: flex;
      flex-flow: column;

      .content {
         flex: 1;
         height: calc(100% - 88rpx - 60rpx - 40rpx);
      flex-direction: column;
      video{
         width: 690rpx;
         height: 388rpx;
         margin-bottom: 10rpx;
      }

      .content {
         height: calc( 100% - 400rpx );
         .title{
            color: #333333;
            font-weight: 500;
            margin-bottom: 16rpx;
         }
         .text{
            font-weight: 350;
         }
         .empty{
            height: 160rpx;
         }
      }
      .button {
         margin-top: 40rpx;
         width: 100%;
         width: 690rpx;
         height: 88rpx;
         line-height: 88rpx;
         text-align: center;
         background: #025EEF;
         background: #4d99a8;
         border-radius: 44rpx;
         font-size: 32rpx;
         font-weight: 500;
         color: #FFFFFF;
         position: absolute;
         bottom: 42rpx;
         left: 30rpx;
      }
   }
</style>