商城

2023-02-15 01:40:38 +08:00 · 2023-02-15 01:40:38 +08:00 · 9e965fa486
commit 9e965fa486
parent 90cf07a4d5
5 changed files with 166 additions and 29 deletions
--- a/index.html
+++ b/index.html
@ -42,9 +42,6 @@
  <script crossorigin="anonymous"
          integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
          src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
-  <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
-  <script src= "https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
-
 </head>
 <body>
 <div id="app"></div>
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
    "swiper": "^8.4.6",
    "vconsole": "^3.15.0",
    "vue": "3.2.45",
+    "vue-masonry": "^0.16.0",
    "vue-router": "4.0.14",
    "vue-switches": "2.0.1",
    "vuex": "4.0.2"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -18,6 +18,7 @@ specifiers:
  vconsole: ^3.15.0
  vite: 4.0.4
  vue: 3.2.45
+  vue-masonry: ^0.16.0
  vue-router: 4.0.14
  vue-switches: 2.0.1
  vuex: 4.0.2
@ -35,6 +36,7 @@ dependencies:
  swiper: 8.4.6
  vconsole: 3.15.0
  vue: 3.2.45
+  vue-masonry: 0.16.0_vue@3.2.45
  vue-router: 4.0.14_vue@3.2.45
  vue-switches: 2.0.1
  vuex: 4.0.2_vue@3.2.45
@ -946,6 +948,10 @@ packages:
    dev: false
    optional: true

+  /desandro-matches-selector/2.0.2:
+    resolution: {integrity: sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==}
+    dev: false
+
  /detect-libc/2.0.1:
    resolution: {integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==}
    engines: {node: '>=8'}
@ -1019,6 +1025,16 @@ packages:
  /estree-walker/2.0.2:
    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}

+  /ev-emitter/1.1.1:
+    resolution: {integrity: sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==}
+    dev: false
+
+  /fizzy-ui-utils/2.0.7:
+    resolution: {integrity: sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==}
+    dependencies:
+      desandro-matches-selector: 2.0.2
+    dev: false
+
  /follow-redirects/1.15.2:
    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
    engines: {node: '>=4.0'}
@ -1075,6 +1091,10 @@ packages:
    engines: {node: '>=6.9.0'}
    dev: true

+  /get-size/2.0.3:
+    resolution: {integrity: sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==}
+    dev: false
+
  /gl-matrix/3.4.3:
    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
    dev: false
@ -1151,6 +1171,12 @@ packages:
    dev: true
    optional: true

+  /imagesloaded/4.1.4:
+    resolution: {integrity: sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==}
+    dependencies:
+      ev-emitter: 1.1.1
+    dev: false
+
  /inflight/1.0.6:
    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
    dependencies:
@ -1261,6 +1287,13 @@ packages:
    dev: false
    optional: true

+  /masonry-layout/4.2.2:
+    resolution: {integrity: sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==}
+    dependencies:
+      get-size: 2.0.3
+      outlayer: 2.1.1
+    dev: false
+
  /mime/1.6.0:
    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
    engines: {node: '>=4'}
@ -1420,6 +1453,14 @@ packages:
    dev: false
    optional: true

+  /outlayer/2.1.1:
+    resolution: {integrity: sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==}
+    dependencies:
+      ev-emitter: 1.1.1
+      fizzy-ui-utils: 2.0.7
+      get-size: 2.0.3
+    dev: false
+
  /parse-node-version/1.0.1:
    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
    engines: {node: '>= 0.10'}
@ -1704,6 +1745,37 @@ packages:
      fsevents: 2.3.2
    dev: true

+  /vue-demi/0.13.11_vue@3.2.45:
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.45
+    dev: false
+
+  /vue-masonry/0.16.0_vue@3.2.45:
+    resolution: {integrity: sha512-0Wi/BH4iYYRrAAFY/wokczz0lWWPg1vmOvFW4aC2nKybKf6kVqUvFfR9/+izDfzG657/vY+Om0gqOB5YPxPxuQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      imagesloaded: 4.1.4
+      masonry-layout: 4.2.2
+      mitt: 3.0.0
+      vue: 3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
+    dev: false
+
  /vue-router/4.0.14_vue@3.2.45:
    resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
    peerDependencies:
--- a/src/main.js
+++ b/src/main.js
@ -9,20 +9,24 @@ import store from "./store";
 import mixin from "./utils/mixin";
 import VueLazyload from '@jambonn/vue-lazyload'
 import VConsole from 'vconsole';
+import {VueMasonryPlugin} from "vue-masonry";

 // const vConsole = new VConsole();
+const emitter = mitt()

 const app = Vue.createApp(App)
 app.config.globalProperties.$api = {...api}
+app.config.globalProperties.emitter = emitter
 app.config.unwrapInjectedRef = true
-const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
-app.provide('mitt', mitt())
+app.provide('mitt', emitter)
 app.mixin(mixin)
+const loadImage = new URL('./assets/img/icon/img-loading.png', import.meta.url).href
 app.use(VueLazyload, {
  preLoad: 1.3,
  loading: loadImage,
  attempt: 1
 })
+app.use(VueMasonryPlugin)
 app.use(router)
 app.use(store)
 app.mount('#app')
--- a/src/pages/slideHooks/Shop.vue
+++ b/src/pages/slideHooks/Shop.vue
@ -29,10 +29,30 @@
          <div class="nav" v-for="i in 20">推荐</div>
        </div>
      </div>
-      <div class="goods-list">
-        <div class="goods" v-for="item in state.list">
+      <div v-masonry class="goods-list"
+           transition-duration="0s"
+           item-selector=".goods">
+        <div v-masonry-tile class="goods" v-for="(item, index) in  state.list">
+          <div class="card">
            <!--          <img class="poster" v-lazy="Utils.$imgPreview(item.src)"/>-->
            <img class="poster" :src="Utils.$imgPreview(item.src)"/>
+            <div class="bottom">
+              <div class="desc">
+                2022新款Apple/苹果iPhone 14 Plus手机6.7
+              </div>
+              <div class="discounts">满4减3</div>
+              <div class="info">
+                <div class="price">
+                  ￥
+                  <div class="big">6099</div>
+                </div>
+                <div class="num">已售223件</div>
+              </div>
+              <div class="low">
+                近30天低价
+              </div>
+            </div>
+          </div>
        </div>
      </div>
    </Scroll>
@ -45,7 +65,8 @@ import Utils from "@/utils";
 import Scroll from "@/components/Scroll.vue";

 const state = reactive({
-  list: []
+  list: [],
+  listEl: null
 })

 function loadData() {
@ -67,23 +88,6 @@ onMounted(() => {
    }
    state.list.push(temp)
  }
-  setTimeout(() => {
-    // var $grid = $('.goods-list').imagesLoaded( function() {
-    //   // init Isotope after all images have loaded
-    //   $grid.isotope({
-    //     itemSelector: '.goods',
-    //   });
-    // });
-    let $grid = $('.goods-list').isotope({
-      // options...
-      itemSelector: '.goods',
-    });
-    console.log('$grid', $grid)
-    $grid.imagesLoaded().progress(function () {
-      $grid.isotope('layout');
-    });
-  })
-
 })
 </script>

@ -176,13 +180,72 @@ onMounted(() => {
  }

  .goods-list {
+
+  }
+
+
  .goods {
    width: 50%;
+    padding: 10rem;
+    box-sizing: border-box;
+
+    .card {
+      border-radius: 8rem;
      overflow: hidden;
+      background: white;

      img {
        width: 100%;
      }
+
+      .bottom {
+        padding: 10rem;
+
+        .desc {
+          color: black;
+          font-size: 16rem;
+          margin-bottom: 8rem;
+        }
+
+        .discounts {
+          display: inline-block;
+          @c: rgb(199, 89, 106);
+          border: 1rem solid @c;
+          padding: 0 4rem;
+          color: @c;
+          font-size: 12rem;
+          margin-bottom: 4rem;
+        }
+
+        .info {
+          display: flex;
+          align-items: flex-end;
+
+          .price {
+            color: rgb(248, 38, 74);
+            display: flex;
+            align-items: flex-end;
+            font-size: 14rem;
+            margin-right: 5rem;
+
+            .big {
+              font-size: 22rem;
+              font-weight: bold;
+              transform: translateY(2rem);
+            }
+          }
+
+          .num {
+            color: darkgray;
+            font-size: 12rem;
+          }
+        }
+
+        .low {
+          margin-top: 2rem;
+          color: rgb(230, 153, 92);
+        }
+      }
    }
  }
 }