zhishifufei_uniapp/components/RecommendMaterial/index.vue

<template>
  <view class="recommend-material">
    <view class="material">
      <view class="title">{{ materialTitle }}</view>
      <navigator hover-class="none" :url="allLink" class="more acea-row row-middle">查看更多<i class="iconfont iconxiangyou"></i></navigator>
    </view>
    <view :class="{ column: typeSetting === 2 }" class="ul" >
      <view v-for="item in materialList" class="li">
        <navigator hover-class="none"  url="" @click="jumpProblem(cellLink + '?id=' + item.id)">
          <view>
            <image :src="item.image" mode="aspectFill" />
          </view>
          <view class="right">
            <view>{{ item.title }}</view>
            <view :class="{ money: item.pay_type }">
              <template v-if="item.pay_type">
                ￥<text>{{ item.money }}</text>
              </template>
              <template v-else> 免费 </template>
            </view>
            <view>
              <view>{{ item.count }}人已下载</view>
              <button type="button">去下载</button>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    materialList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    typeSetting: {
      type: Number,
      default: 2,
    },
    allLink: {
      type: String,
      default: "",
    },
    cellLink: {
      type: String,
      default: "",
    },
    materialTitle: {
      type: String,
      default: "资料下载",
    },
  },
  methods: {
    jumpProblem(url) {
      this.$util.checkLogin(() => {
        uni.navigateTo({
          url: url
        })
      }, true);
    }
  },
};
</script>

<style scoped lang="scss">
.right{
  margin-left: 20rpx;
}
.recommend-material {
  margin-top: 14rpx;
  overflow: hidden;
  width: 686rpx;
  border-radius: 24rpx;
  margin: auto;
}

.recommend-material .material {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
}

.recommend-material .title {
  font-weight: bold;
  font-size: 32rpx;
  color: #333;
}

.recommend-material>view>navigator {
  font-size: 22rpx;
  color: #999999;
}

.recommend-material .iconfont {
  margin-left: 9rpx;
  font-size: 18rpx;
}

.recommend-material .ul {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 24rpx;

}

.recommend-material .li {
  margin-bottom: 40rpx;
}

.recommend-material .li navigator {
  display: flex;
  font-size: 22rpx;
  color: #999999;
}

.recommend-material image {
  display: block;
  width: 250rpx;
  height: 178rpx;
  border-radius: 10rpx;

  object-fit: cover;
}

.recommend-material navigator>view:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.recommend-material navigator>view>view:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 28rpx;
  color: #333;
}

.recommend-material navigator>view>view:nth-child(2) {
  font-weight: bold;
  font-size: 28rpx;
  color: #ff6b00;
}

.recommend-material navigator>view>view.money {
  font-size: 22rpx;
}

.recommend-material .money text {
  font-size: 32rpx;
}

.recommend-material navigator>view>view:last-child {



  display: flex;



  justify-content: space-between;



  align-items: center;
}

.recommend-material button {
  padding: 3rpx 20rpx;
  border-radius: 25rpx;
  background-color: #2c8eff;
  font-family: inherit;
  font-weight: normal;
  font-size: 22rpx;
  color: #ffffff;
  height: 50rpx;
  width: 130rpx;
  line-height: 50rpx;
}

.recommend-material .column {



  display: flex;


  flex-wrap: wrap;



  justify-content: space-between;
}

.recommend-material .column .li {
  width: 300rpx;
}

.recommend-material .column navigator {
  display: inline;
}

.recommend-material .column image {
  width: 300rpx;
  height: 192rpx;
}

.recommend-material .column navigator>view:last-child {
  height: 134rpx;
  margin-top: 14rpx;
  margin-left: 0;
}
</style>