优化

src/pages/mall/subs/search/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <view class='content'>
+    <view class='search-view'>
+      <view class='search-input'>
+        <image :src='assetsUrl("ic_search.png")' />
+        <input placeholder='输入名称、款号搜索' />
+      </view>
+    </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'
+              @click.stop='goPath(`/pages/mall/subs/goods/goods-detail?goodsId=${item.goodsId}`)'>
+          <image class='goods-image' :src='item.images' />
+          <text class='goods-name'>{{ item.goodsName }}</text>
+          <text class='goods-price'>¥{{ item.price }}</text>
+          <image class='add-image' :src='assetsUrl("ic_add_goods.png")' />
+        </view>
+      </grid-view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+import { assetsUrl } from '@/utils/assets';
+import { goPath } from '@/utils';
+
+import { GoodsBean } from '@/api/goods/types';
+
+const goodsList = ref<GoodsBean[]>([1, 2, 3, 4, 1, 2, 2, 2]);
+
+</script>
+
+<style lang='scss' scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 0 20rpx;
+}
+
+.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;
+    font-size: 26rpx;
+    width: 100%;
+
+    image {
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 20rpx;
+    }
+  }
+}
+
+.goods-list {
+  display: flex;
+  background: white;
+
+  .goods-item {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background: #666666;
+    padding: 10rpx 10rpx;
+    flex: 1;
+
+    .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;
+    }
+  }
+}
+</style>