jingheng_H5/pagesA/themes/default/components/themes-note.vue

<template>
  <view class="themes-note">
    <!-- <themes-chunk-title title="热门笔记" :iconSrc="event_rul + '/static/theme/note-icon.svg'"></themes-chunk-title> -->
	<view class="title flex j-center">
		<view class="flex">
			<image class="t-bg-l" :src="event_rul + '/static/images/df-title.png'" mode="widthFix"></image>
			<text class="t-bg-c "  mode="widthFix">热门笔记</text>
			<image class="t-bg-r" :src="event_rul + '/static/images/df-title.png'" mode="widthFix"></image>
		</view>
	</view>
    <scroll-view
      class="scroll-list"
      :scroll-x="true"
    >
      <block v-for="(item, idx) in shopNote" :key="idx">
        <view
          class="scroll-list-item overflow-hd"
          @click="goto"
          :data-url="'/activity/luntan/detail?id=' + item.videoId"
        >
          <view class="scroll-list-item-ct flex flex-colum overflow-hd">
            <view class="note-s overflow-hd position-r">
              <image class="note-img" :src="item.pic+'?x-oss-process=image/resize,m_fill,w_120,h_115'" mode="aspectFill"></image>
            </view>
            <view class="note-b-cnt flex flex1 flex-colum j-between">
              <text class="note-title text-overflow-line font-w">{{
                item.title
              }}</text>
              <view class="note-c-b flex al-item-center j-between">
                <view class="note-c-b-l flex al-item-center">
                  <image
                    class="note-u-img border-rius-r"
                    :src="item.headimg"
                    mode="aspectFill"
                  ></image>
                  <text class="text-overflow-tx flex1">{{
                    item.nickname
                  }}</text>
                </view>
                <view class="note-c-b-r flex al-item-center">
                  <text class="iconfont icon-aixin"></text>
                  <text class="z-tx">{{ item.zan ? (item.zan >= 10000 ? (item.zan / 10000).toFixed(1) + '万': item.zan) : 0 }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<script>
import themesChunkTitle from './themes-chunk-title.vue'
var app = getApp();
export default {
  components: {
    themesChunkTitle
  },
  props: {
    shopNote: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      event_rul: app.globalData.event_url,
    }
  },
};
</script>

<style lang="scss" scoped>
.themes-note {
	
	.title {
		padding: 34rpx 0 24rpx;
		.t-bg-l{
			width: 40rpx;
			margin: 6rpx 0 0 0;
		}
		.t-bg-c {
			// font-style: italic;
			font-size: 36rpx;
			color: #0A5D3B;
			// letter-spacing: 2px;
		}
		.t-bg-r {
			width: 40rpx;
			margin: 6rpx 0 0 8rpx;
		}
	}
  .scroll-list {
    position: relative;
    width: calc(100% + 28rpx);
    right: -28rpx;
    left: 0;
    white-space: nowrap;
    & ::-webkit-scrollbar {
      display: none;
    }

    .scroll-list-item {
      display: inline-block;
      margin-right: 20rpx;
      background-color: #fff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.0300);
      border-radius: 20rpx;
      &:last-child {
        margin-right: 28rpx;
      }

      .scroll-list-item-ct {
        width: 320rpx;
        height: 536rpx;

        .note-s {
          width: 100%;
          height: 376rpx;

          .note-img {
            width: 100%;
            height: 100%;
          }

          .note-hot {
            left: 16rpx;
            top: 14rpx;
            line-height: 34rpx;

            .note-hot-img {
              width: 110rpx;
              height: 34rpx;
            }
            .note-hot-tx {
              font-size: 20rpx;
            }
          }
        }

        .note-b-cnt {
          width: 100%;
          padding: 22rpx 16rpx 20rpx;
          white-space: normal;
          .note-title {
          }

          .note-c-b {
            font-size: 28rpx;
            color: #999;
            .note-c-b-l {
              width: 60%;
              .note-u-img {
                width: 36rpx;
                height: 36rpx;
                margin-right: 10rpx;
              }
            }
            .note-c-b-r {
              .icon-aixin {
                font-size: 28rpx;
              }
              .icon-aixin_shixin {
                font-size: 28rpx;
              }
              .z-tx {
                padding-left: 6rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>