<template>
  <view class="content">
    <view class="navBarBox">
      <view
        class="statusBar"
        :style="{ paddingTop: statusBarHeight + 'px' }"
      ></view>
      <view class="navBar">
        <view>活动</view>
        <image class="logo" mode="scaleToFill"></image>
      </view>
    </view>
    <uni-card v-for="item in 2" :key="item" padding="0" spacing="0">
      <view @click.stop="onClick">
        <image
          slot="cover"
          class="cover"
          src="https://oss.dev.zonelife.cn/static/guida/img/act/15519395654249311.jpg"
        ></image>
        <view class="content-box">
          <view class="title">期待与生活与“粽”不同</view>
          <view class="sub-title">
            期待与生活与“粽”不同期待与生活与“粽”不同
          </view>
        </view>
      </view>
    </uni-card>
    <zs-tab-bar :value="1"></zs-tab-bar>
  </view>
</template>

<script>
import uniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
export default {
  components: {
    uniCard,
  },
  data() {
    return {
      navBarHeight: 0,
      statusBarHeight: 0,
    };
  },
  created() {
    this.navBarHeight = this.$navHight(1);
    this.statusBarHeight = uni.getSystemInfoSync()["statusBarHeight"];
    this.navBarHeight = this.navBarHeight + 10 + "px";
  },
  methods: {
    onClick() {
      uni.navigateTo({
        url: "/pages/activity/detail",
      });
    },
  },
};
</script>
<style>
page {
  background-color: #fafafa;
}
</style>
<style lang="scss" scoped>
.navBarBox .navBar .logo {
  width: 0rpx;
  height: 82rpx;
  // margin-right: 10rpx;
}

.navBarBox .navBar {
  font-size: 35rpx;
  font-weight: bold;
  padding: 3rpx 50rpx;
  padding-bottom: 8rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.content {
  // padding-top: 24%;
}
.cover {
  width: 100%;
  height: 300rpx;
}
.content-box {
  padding: 0 20rpx;
  height: 110rpx;
  .title {
    font-weight: bold;
    // 超出文本使用...
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sub-title {
    font-size: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
