首页 瀑布流

src/views/Market/Index.vue

@@ -123,7 +123,7 @@
                 </div>
             </div>
             <div style="margin-top: 20px;">
-                <div class="MarketType row flex-between">
+                <div class="MarketType row flex-between" style="max-width: 1400px;margin: auto;">
                     <div class="row">
                         <div class="MarketButton cursor-pointer" 
                         :class="[queryObj.TemplateType == item.type?'active':'']" v-for="(item,index) in typeArr" :key="index"
@@ -155,22 +155,29 @@
                         
                     </div>
                 </div>
-                <div v-if="(dataList.length>0&&queryObj.pageIndex>1)||(dataList.length>0&&queryObj.pageIndex==1&&!loading)" class="columnCount5 rounded">
-                    <template v-for="(item,index) in dataList">
-                        <div class="MarketIndexListBox bg-white rounded">
+                <div v-if="(dataList.length>0&&queryObj.pageIndex>1)||(dataList.length>0&&queryObj.pageIndex==1&&!loading)" 
+                    class="listBox rounded">
+                    <!-- :width="260" -->
+                    <Waterfall :list="dataList" 
+                    :breakpoints="{
+                        1400:{rowPerView:5},
+                        800:{rowPerView:5},
+                        500:{rowPerView:5}
+                        }" 
+                    :hasAroundGutter="false" :align="'left'"
+                    rowKey="TempId" :gutter="25"
+                    :loadProps="loadProps"
+                    
+                    >
+                        <template #item="{ item, url, index }">
+                          <!-- <div class="card">
+                            <LazyImg :url="url" />
+                            <p class="text">这是具体内容</p>
+                          </div> -->
+                          <div class="MarketIndexListBox bg-white rounded">
                             <div class="MarketIndexList-Hover">
                                 <div class="MarketIndexButtomIcon row flex-between">
                                     <div>
-                                        <!-- <div class="MarketOpa2"></div>
-                                        <el-icon v-if="userInfo.isTemplate==1 && model==1"
-                                        size="21px" class="MarketIconAbsolute cusor-pointer" @click="deleteTemplate(item)">
-                                            <Delete/>
-                                        </el-icon> -->
-                                        <!-- <el-icon v-if="model!=1" size="23px" class="MarketIconAbsolute cusor-pointer"
-                                        @click="BeFondOf(item)">
-                                            <IconLike v-if="!item.checked" class="IconLike"/>
-                                            <IconLike v-else class="IconLike" :theme="item.checked?'filled':''" :fill="item.checked?'#FF674D':'#B9B9B9'" />
-                                        </el-icon> -->
                                     </div>
                                     <div>
                                         <div class="MarketOpa2"></div>
@@ -187,11 +194,14 @@
                                 </div>
                             </div>
                             <div class="MarketIndexList-img">
-                                <img :src="item.CoverImg" class="rounded" />
+                                <LazyImg :url="item.CoverImg"
+                                class="rounded" style="display: block;"
+                                @error="errorImg"/>
                             </div>
                         </div>
-                        
-                    </template>
+                        </template>
+                    </Waterfall>
+                    
                 </div>
                 <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
                 style="padding: 3.1vw 10px;">
@@ -201,6 +211,7 @@
                 <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading"  element-loading-text="正在加载中"></div>
             </div>
         </div>
+        
         <foote v-if="(queryObj.pageCount == queryObj.pageIndex || queryObj.pageCount==0) && !loading"></foote>
     </div>
     
@@ -234,8 +245,12 @@ import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import foote from '@/components/footer/index.vue';
 import temDetails from "@/components/home/temDetails.vue";
 import vipFooter from "@/components/home/vipFooter.vue";
+import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
+import 'vue-waterfall-plugin-next/dist/style.css'
 
 import { noDataImg } from "@/utils/common";
+import logo from '@/assets/img/traveldesign.png'
+import error from '@/assets/img/noImg.png'
 
 const slidesStore = useSlidesStore()
 
@@ -315,6 +330,14 @@ const queryColor = ref({
     Code: '',
 })
 
+const loadProps = reactive({
+    logo,
+    error
+})
+
+const errorImg = (res:any)=>{
+    console.log(res,'===')
+}
 
 // 关闭vip购买提示
 const closeVip = () =>{
@@ -857,7 +880,9 @@ onMounted(()=>{
         position: relative;
         overflow: hidden;
         box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
-        grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;
+        grid-row-start: auto;
+        /* margin-bottom: 20px; */
+        break-inside: avoid;
         /* max-height: 362px; */
     }
     .MarketIndexList{
@@ -969,4 +994,16 @@ onMounted(()=>{
         bottom: 15px;
         text-align: center;
     }
+    .listBox{
+        max-width: 1400px;
+        margin: 33px auto 0;
+    }
+    .listBox .waterfall-list{
+        overflow: initial;
+        background: none;
+    }
+    ::v-deep(.lazy__img[lazy=error]){
+        padding: 0;
+        width: 199px !important;
+    }
 </style>
\ No newline at end of file

vue.config.js

@@ -21,7 +21,10 @@ module.exports = {
   },
   configureWebpack: {
     devServer:{
-      historyApiFallback:true
+      historyApiFallback:true,
+      client: { 
+        overlay:false
+      }
     },
     plugins: [
       // new StyleLintPlugin({