point-app/pagesHome/import/index.vue

<template>
  <mobile-frame>
    <view class="main">
      <view class="one">
        <image class="image" :src="oneUrl" mode=""></image>
      </view>
      <view class="two">
        <scroll-view
          scroll-y="true"
          class="scroll-view"
          @scrolltolower="toPage"
        >
          <view class="list-scroll-view">
            <view class="list" v-for="(item, index) in list" :key="index">
              <image class="image" :src="item.url" mode=""></image>
              <view class="name">
                {{ item.name }}
              </view>
              <view class="other">
                <view class="money">
                  <text>¥</text>
                  <text>{{ item.money }}</text>
                </view>
                <view class="btn">
                  <button type="default" size="mini">购买</button>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </mobile-frame>
</template>

<script>
export default {
  data() {
    return {
      oneUrl: "",
      list: [ //
        {
          url: "",
          name: "商品名称",
          money: 100,
        },
      ],
    };
  },
  onShow: function () {},
  methods: {
    // 分页
    toPage() {},
  },
};
</script>

<style lang="scss">
.main {
  display: flex;
  flex-direction: column;
  width: 96vw;
  height: 97.5vh;
  padding: 2vw;
  background-color: #0d2576;

  .one {
    margin: 0 0 2vw 0;

    .image {
      width: 100%;
      height: 50vw;
    }
  }

  .two {
    position: relative;
    flex-grow: 1;

    .list {
      margin: 0 2vw 2vw 0;
      background-color: var(--fffColor);
      padding: 2vw;
      width: 43vw;
      border-radius: 5px;

      .image {
        width: 100%;
        height: 49vw;
        margin: 0 0 1vw 0;
      }

      .name {
        font-size: var(--font15Size);
        margin: 0 0 2vw 0;
      }

      .other {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .money {
          color: var(--ff0Color);

          text:nth-child(1) {
            font-size: var(--font12Size);
          }
        }

        .btn {
          button {
            border-radius: 25px;
            color: var(--fffColor);
            background-color: var(--ff0Color);
            font-size: var(--font12Size);
          }
        }
      }
    }

    .list:nth-child(2n) {
      margin: 0 0 2vw 0;
    }
  }
}

.scroll-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .list-scroll-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
</style>