<template>
  <view class="int">
    <view class="int-content" v-for="item in 6" :key="item" @click="toDetail">
      <view class="int-content-left">
        <view class="content-tag">
          <view class="tag-text">APP注册</view>
        </view>
        <image class="content-image" src="../../../static/img/company.png"></image>
      </view>
      <view class="int-content-right">
        <view class="content-title">此处是活动标题</view>
        <view class="content-text"
          >此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，此处是活动内容，</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toDetail() {
      uni.navigateTo({
        url: '/pages/activity_detail/activity_detail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.int {
  padding: 30upx 0;
  height: inherit;
  overflow-y: auto;
}
.int-content {
  margin-bottom: 20upx;
  width: 100%;
  height: 220upx;
  display: flex;
  padding: 0 30upx;
  box-sizing: border-box;
  border-bottom: 2upx solid #e7e7e7;
  &:last-child {
    margin-bottom: 0;
  }
}
.int-content-left {
  position: relative;
  width: 200upx;
  height: inherit;
  .content-image {
    width: 200upx;
    height: 200upx;
  }
}
.int-content-right {
  flex: 1;
  height: inherit;
  padding-left: 20upx;
  box-sizing: border-box;
  .content-title {
    font-size: 28upx;
    color: #333;
    margin-bottom: 20upx;
  }
  .content-text {
    font-size: 20upx;
    color: #666;
    line-height: 36upx;
  }
}
.content-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  font-size: 24upx;
  min-width: 120upx;
  height: 40upx;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transform: skewX(15deg);
  background-color: #ff4d4f;
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
.tag-text {
  transform: skewX(-15deg);
}
</style>
