suke-mp/src/pages/mall/index.vue

<template>
  <view class='content'>
    <view class='search-view'>
      <view class='search-input'>
        <image :src='assetsUrl+"ic_search.png"'></image>
        <input placeholder='输入名称、款号搜索' />
      </view>
    </view>

    <view class='container'>
      <scroll-view class='category-list' :scroll-y='true'>
        <view v-for='(item,index) in categoryList' :key='index' class='category-item'
              @click.stop='changeCategory(index)'
              :class="{'category-item-active': index === categorySelectedIndex}">
          <text>{{ item }}</text>
        </view>
      </scroll-view>

      <scroll-view class='goods-list' :scroll-y='true' type='custom'>
        <grid-view type='masonry' :cross-axis-count='2'>
          <view v-for='(item, index) in goodsList' :key='index' class='goods-item'>
            <image class='goods-image' :src='item.goodsImage' />
            <text class='goods-name'>{{ item.goodsName }}</text>
            <text class='goods-price'>¥{{ item.goodsPrice }}</text>
            <image class='add-image' :src='assetsUrl+"ic_add_goods.png"' />
          </view>
        </grid-view>
      </scroll-view>
    </view>

    <view class='shopping-cart'>
      <image :src='assetsUrl+"ic_shopping_cart.png"' />
      <text>10</text>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { assetsUrl } from '@/utils/assets';

const categoryList = ref<string[]>(['女装', '男装', '鞋包配饰', '母婴', '美妆个护', '运动户外', '户外运动', '户外运动']);
const categorySelectedIndex = ref<number>(0);

const goodsList = ref<any[]>([
  {
    goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
    goodsImage: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0D/0D/ChMkJ1eV_EiIckZnAAxoKo4d-a0AAT0gwJxjq4ADGhC893.jpg',
    goodsPrice: 90
  },
  {
    goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
    goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
    goodsPrice: 100
  }, {
    goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
    goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
    goodsPrice: 95
  }, {
    goodsName: '女童夏装套装洋气装短袖阔腿裤女童夏装套装洋气装短袖阔腿裤子',
    goodsImage: 'https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg',
    goodsPrice: 93
  },
  {
    goodsName: '女童夏装套装洋气装短袖阔腿裤子…女童夏装套装洋气装短袖阔腿裤子',
    goodsImage: 'https://img95.699pic.com/photo/50059/8720.jpg_wh860.jpg',
    goodsPrice: 89
  }, {
    goodsName: '女童夏装套装洋气装短袖阔腿裤子…',
    goodsImage: 'https://sc.68design.net/photofiles/201312/oSOHcEln8X.jpg',
    goodsPrice: 108
  }
]);

const changeCategory = (index: number) => {
  categorySelectedIndex.value = index;
};
</script>

<style lang='scss' scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.search-view {
  display: flex;
  flex-direction: row;
  background: white;
  padding: 19rpx 30rpx;

  .search-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #F7F7F7;
    padding: 17rpx 23rpx;
    width: 100%;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
    }
  }
}

.container {
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;

  .category-list {
    display: flex;
    flex-direction: column;
    width: 210rpx;

    .category-item {
      display: flex;
      width: 100%;
      height: 92rpx;
      overflow: hidden;
      align-items: center;
      justify-content: center;
      white-space: nowrap;

      text {
        width: 100%;
        text-align: center;
      }
    }

    .category-item-active {
      @extend .category-item;
      background: #FFFFFF;
    }

    .category-item-active:before {
      content: '';
      position: absolute;
      width: 5rpx;
      left: 15rpx;
      height: 30rpx;
      background: #333333;
      color: #333333;
    }
  }

  .goods-list {
    display: flex;
    background: white;
    padding: 38rpx 20rpx 0 20rpx;

    .goods-item {
      display: flex;
      flex-direction: column;
      position: relative;
      margin-bottom: 10rpx;
      padding: 10rpx 10rpx;

      .goods-image {
        border-radius: 10rpx;
        width: 100%;
        max-height: 200rpx;
      }

      .goods-name {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 10rpx;
      }

      .goods-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #F32B2B;
      }

      .add-image {
        width: 42rpx;
        height: 42rpx;
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
      }
    }
  }
}

.shopping-cart {
  display: flex;
  position: fixed;
  bottom: 30rpx;
  right: 40rpx;
  width: 90rpx;
  height: 90rpx;
  background: #FFFFFF;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20rpx 1rpx rgba(78, 78, 78, 0.16);

  image {
    width: 40rpx;
    height: 40rpx;
  }

  text {
    display: flex;
    min-width: 39rpx;
    min-height: 39rpx;
    background: #F32B2B;
    align-items: center;
    justify-content: center;
    top: -5rpx;
    right: -5rpx;
    color: white;
    position: absolute;
    border-radius: 50%;
    border: 2rpx solid #FFFFFF;
  }
}
</style>