From 9e965fa48619ce1b70b835f937790dba04b06d20 Mon Sep 17 00:00:00 2001 From: zyronon Date: Wed, 15 Feb 2023 01:40:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9F=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 3 - package.json | 1 + pnpm-lock.yaml | 72 ++++++++++++++++++++++ src/main.js | 8 ++- src/pages/slideHooks/Shop.vue | 111 ++++++++++++++++++++++++++-------- 5 files changed, 166 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 66dd74f..b5e7e38 100644 --- a/index.html +++ b/index.html @@ -42,9 +42,6 @@ - - -
diff --git a/package.json b/package.json index f968bf0..d4f182c 100644 --- 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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a694fe4..1b2ab2c 100644 --- 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: diff --git a/src/main.js b/src/main.js index 634c038..da466c9 100644 --- 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') diff --git a/src/pages/slideHooks/Shop.vue b/src/pages/slideHooks/Shop.vue index b9c908c..44b1432 100644 --- a/src/pages/slideHooks/Shop.vue +++ b/src/pages/slideHooks/Shop.vue @@ -29,10 +29,30 @@
推荐
-
-
- - +
+
+
+ + +
+
+ 2022新款Apple/苹果iPhone 14 Plus手机6.7 +
+
满4减3
+
+
+ ￥ +
6099
+
+
已售223件
+
+
+ 近30天低价 +
+
+
@@ -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'); - }); - }) - }) @@ -176,13 +180,72 @@ onMounted(() => { } .goods-list { - .goods { - width: 50%; + + } + + + .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); + } + } } } }