red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
张斌
2025-11-20 09:10:35 +08:00
parent b60a4fe9f4
commit a96be99a54
254 changed files with 40718 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/views/pages/lazyImg/index.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div class="lazy-img-container">
<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
<div class="flex-warp" v-if="tableData.data.length > 0">
<el-row :gutter="15">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<div class="item-img" v-loading="v.loading">
<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
</div>
<div class="item-txt">
<div class="item-txt-title">{{ v.title }}</div>
<div class="item-txt-other">
<div style="width: 100%">
<div class="item-txt-msg mb10">
<span>评价 {{ v.evaluate }}</span>
<span class="ml10">收藏 {{ v.collection }}</span>
</div>
<div class="item-txt-msg item-txt-price">
<span class="font-price">
<span>￥</span>
<span class="font">{{ v.price }}</span>
</span>
<span>月销{{ v.monSales }}笔</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<el-empty v-else description="暂无数据"></el-empty>
<template v-if="tableData.data.length > 0">
<el-pagination
style="text-align: right"
background
@size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
:page-sizes="[10, 20, 30]"
:current-page="tableData.param.pageNum"
:page-size="tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.total"
>
</el-pagination>
</template>
</el-card>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import other from '/@/utils/other';
import { filterList } from './mock';
export default defineComponent({
name: 'pagesListAdapt',
setup() {
const router = useRouter();
const state = reactive({
tableData: {
data: filterList,
total: 99,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
},
},
});
// 当前列表项点击
const onTableItemClick = (v: any) => {
router.push({
path: '/pages/filteringDetails',
query: { id: v.id },
});
};
// 分页点击
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
// 页面加载时
onMounted(() => {
other.lazyImg('[data-lazy-img-list]', state.tableData.data);
});
return {
onTableItemClick,
onHandleSizeChange,
onHandleCurrentChange,
...toRefs(state),
};
},
});
</script>
<style scoped lang="scss">
.lazy-img-container {
.flex-warp {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
margin: 0 -5px;
.flex-warp-item {
padding: 5px;
width: 100%;
height: 360px;
.flex-warp-item-box {
border: 1px solid var(--next-border-color-light);
width: 100%;
height: 100%;
border-radius: 2px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
&:hover {
cursor: pointer;
border: 1px solid var(--el-color-primary);
transition: all 0.3s ease;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
.item-txt-title {
color: var(--el-color-primary) !important;
transition: all 0.3s ease;
}
.item-img {
img {
transition: all 0.3s ease;
transform: translateZ(0) scale(1.05);
}
}
}
.item-img {
width: 100%;
height: 215px;
overflow: hidden;
img {
transition: all 0.3s ease;
width: 100%;
height: 100%;
}
}
.item-txt {
flex: 1;
padding: 15px;
display: flex;
flex-direction: column;
overflow: hidden;
.item-txt-title {
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
color: #666666;
transition: all 0.3s ease;
&:hover {
color: var(--el-color-primary);
text-decoration: underline;
transition: all 0.3s ease;
}
}
.item-txt-other {
flex: 1;
align-items: flex-end;
display: flex;
.item-txt-msg {
font-size: 12px;
color: #8d8d91;
}
.item-txt-price {
display: flex;
justify-content: space-between;
align-items: center;
.font-price {
color: #ff5000;
.font {
font-size: 22px;
}
}
}
}
}
}
}
}
}
</style>

313
src/views/pages/lazyImg/mock.ts Normal file
View File

@@ -0,0 +1,313 @@
// 列表数据
export const filterList = [
{
img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 1,
loading: true,
},
{
img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 2,
loading: true,
},
{
img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 3,
loading: true,
},
{
img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 4,
loading: true,
},
{
img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 5,
loading: true,
},
{
img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 6,
loading: true,
},
{
img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 7,
loading: true,
},
{
img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 8,
loading: true,
},
{
img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 9,
loading: true,
},
{
img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
title: '深圳湾公园一女子落水，三名男子接力及时施救',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 10,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 1,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 2,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 3,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 4,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
title: '盛夏的那考河湿地公园！',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 5,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 6,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 7,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 8,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 9,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
title: '深圳湾公园一女子落水，三名男子接力及时施救',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 10,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 1,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 2,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 3,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 4,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 5,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 6,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 7,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 8,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 9,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
title: '民众前往中共一大纪念馆参观',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 10,
loading: true,
},
{
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
evaluate: (Math.random() * 10).toFixed(2),
collection: (Math.random() * 100).toFixed(2),
price: (Math.random() * 10).toFixed(2),
monSales: (Math.random() * 20).toFixed(2),
id: 10,
loading: true,
},
];