luojigou_exhibition/src/pages/activity/index.vue

<template>
  <view class="activity">
    <view class="head">
      <view class="head-top">
        <image src="/static/img/common/bg_head.png" mode="" />
      </view>
      <view class="title">
        <image class="img-title" src="/static/img/activity/head_title.png" mode="aspectFill" />
      </view>
    </view>
    <view class="content">
      <view class="item flex" 
        v-for="(item, index) in omoList" :key="index"
          :style="{backgroundImage: `url(${item.bgUrl})`,backgroundRepeat: 'no-repeat', backgroundSize: 'cover'}">
        <view class="left">
          <image :src="item.imgUrl" mode="aspectFill" />
        </view>
        <view class="right">
          <view class="info-title">{{ item.title }}</view>
          <view class="info-btn">
            <button class="detail cu-btn block" @tap="navTo(item)">
              查看详情 <zd-arrow class="btn-arrow"></zd-arrow>
            </button>
          </view>
        </view>
      </view>
      <image class="book" src="/static/img/activity/drum.png" mode="aspectFill" />
      <image class="teach" src="/static/img/common/teach.png" mode="aspectFill" />
      <image class="path" src="/static/img/common/path1.png" mode="aspectFill" />
    </view>
  </view>
</template>

<script>
import ZdArrow from '@/components/zd-arrow/index';

export default {
  data() {
    return {
      omoList: [
        {
          title: '思维能力挑战赛',
          imgUrl: require('@/static/img/activity/activity_01.png'),
          bgUrl: require('@/static/img/common/card_bg01.png'),
          path: '/pages/activity/detail?type=1'
        },
        {
          title: '培训交流',
          imgUrl: require('@/static/img/activity/activity_02.png'),
          bgUrl: require('@/static/img/common/card_bg02.png'),
          path: '/pages/activity/detail?type=2'
        },
        {
          title: '逻辑狗伴我成长',
          imgUrl: require('@/static/img/activity/activity_03.png'),
          bgUrl: require('@/static/img/common/card_bg03.png'),
          path: '/pages/activity/detail?type=3'
        }
      ]
    }
  },
  components: {
    ZdArrow
  },
  onLoad() {
    
  },
  created() {

  },
  mounted() {

  },
  methods: {
    navTo(item) {
      this.$mRouter.push({
        route: item.path
      })
    }
  }
}
</script>

<style lang="scss">
.activity {
  background: url('@/static/img/common/bg.png') no-repeat #01A2E8;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
  .head-top {
    image {
      width: 100%;
      height: 100upx;
    }
  }
  .title {
    text-align: center;
    .img-title {
      width: 374upx;
      height: 124upx;
      vertical-align: middle;
    }
  }
  .content {
    position: relative;
    margin: 118upx auto 0;
    .item {
      margin: 0 auto 28upx;
      width: 714upx;
      height: 262upx;
      padding: 52upx 0 0 44upx;
      .left {
        margin-right: 56upx;
        image {
          width: 166upx;
          height: 150upx;
          vertical-align: middle;
        }
      }
      .right {
        padding-top: 8upx;
        .info-title {
          font-size: 40upx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #050505;
          line-height: 56upx;
          letter-spacing: 1upx;
        }
        .info-btn {
          margin-top: 22upx;
          .detail {
            height: 56upx;
            width: 228upx;
            border-radius: 34upx;
            border: 2upx solid #333333;
            background: #FFFFFF;
            font-size: 26upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #04040A;
            line-height: 36upx;
          }
          .btn-arrow {
            margin-left: 8upx;
          }
        }
      }
    }
    .book {
      position: absolute;
      width: 154upx;
      height: 172upx;
      vertical-align: middle;
      left: 0px;
      top: 4upx;
      transform: translateY(-100%);
    }
    .path {
      position: absolute;
      bottom: -48upx;
      right: 138upx;
      width: 30upx;
      height: 26upx;
      vertical-align: middle;
    }
    .teach {
      position: absolute;
      width: 140upx;
      height: 98upx;
      vertical-align: middle;
      right: 0upx;
      top: 0upx;
      transform: translateY(-100%);
    }
  }
}
</style>