Skip to content

P
pptist
Commit 8fd06b25 authored by 罗超's avatar 罗超
Browse files
Options

修改首页样式，替换分页为滚动加载

parent 25e84c88
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 85 deletions
src/assets/styles/common.css
View file @ 8fd06b25
...@@ -47,6 +47,10 @@ page { ...@@ -47,6 +47,10 @@ page {
background: transparent; background: transparent;
color: transparent; color: transparent;
} */ } */
.no-bg .el-loading-mask,
.no-bg .el-divider__text{
background-color: transparent !important;
}
.light-shadow { .light-shadow {
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important; box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
} }
......
src/views/Market/Index.vue
View file @ 8fd06b25
<template> <template>
<div style="background: #f3f6fb;height:100vh;overflow: auto;"> <div ref="marketRef" style="background: #f3f6fb;height:100vh;overflow: auto;">
<div style="padding: 30px; max-width:1440px; margin:0 auto;"> <div style="padding: 30px; max-width:1440px; margin:0 auto;">
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="6"> <el-col :span="6">
...@@ -65,62 +65,35 @@ ...@@ -65,62 +65,35 @@
</div> </div>
</div> </div>
</div> </div>
<div style="margin-top: 20px;" v-loading="loading"> <div style="margin-top: 20px;">
<div v-if="dataList.length>0" class="q-mt-lg row wrap bg-white rounded" style="padding: 30px 10px 0 10px;"> <div v-if="dataList.length>0" class="q-mt-lg row wrap rounded" style="padding: 30px 0 0 0;">
<template v-for="(item,index) in dataList"> <template v-for="(item,index) in dataList">
<div class="MarketIndexListBox"> <div class="MarketIndexListBox bg-white rounded">
<div class="MarketIndexList bg-white rounded"> <div class="MarketIndexList-Hover">
<div class="MarketIndexList-Hover"> <div>
<div> <el-button type="primary"
<el-button type="primary" style="color: #ffff;"
style="color: #ffff;" @click="getTemplate(item)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
@click="getTemplate(item)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
</div>
<div class="q-mt-lg">
<el-button type="primary"
style="color: #ffff;"
@click="goToTemplate(item)">选择该模版</el-button>
</div>
</div> </div>
<div class="MarketIndexList-img"> <div class="q-mt-lg">
<el-image style="width: 100%;height: 100%" :src="item.CoverImg" fit="cover" /> <el-button type="primary"
style="color: #ffff;"
@click="goToTemplate(item)">选择该模版</el-button>
</div> </div>
<div class="MarketIndexList-text">{{item.Title}}</div>
</div> </div>
<div class="MarketIndexList-img">
<img :src="item.CoverImg" class="rounded" />
</div>
<div class="MarketIndexList-text">{{item.Title}}</div>
</div> </div>
<!--
<el-popover effect="light" trigger="hover" placement="bottom-start" width="auto" height="auto">
<template #default>
<LayoutPool v-loading="queryObj.loading" />
</template>
<template #reference>
<div class="MarketIndexListBox">
<div class="MarketIndexList bg-white rounded" @click="goToTemplate(item)"
@mouseover="getTemplate(item)">
<div class="MarketIndexList-img">
<el-image style="width: 100%;height: 100%" :src="item.CoverImg" fit="cover" />
</div>
<div class="MarketIndexList-text">{{item.Title}}</div>
</div>
</div>
</template>
</el-popover> -->
</template> </template>
</div> </div>
<div v-else class="q-mt-lg bg-white rounded" style="padding: 30px 10px 30px 10px;text-align: center;color: #909399;">暂无数据</div> <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" style="padding: 30px 10px 30px 10px;text-align: center;color: #909399;">暂无数据</div>
<div v-if="dataList.length>0" class="q-mt-lg row" style="justify-content: center;margin-bottom: 40px"> <el-divider class="no-bg q-mt-lg" v-if='queryObj.pageCount == queryObj.pageIndex && !loading'>
<!-- hide-on-single-page --> <span class="text-samll" style="background: #f3f6fb;padding: 0 10px;color:#a3a3a3">已加载完成所有数据</span>
<el-pagination </el-divider>
background <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div>
v-model:current-page="currentPage"
v-model:page-size="queryObj.pageSize"
:page-sizes="[10, 20, 30, 40, 50, 100]"
small
layout="sizes, prev, pager, next"
:total="queryObj.totalCount"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -148,7 +121,7 @@ ...@@ -148,7 +121,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, inject, watch} from "vue"; import { reactive, ref, inject, watch, onMounted} from "vue";
import LineService from '@/services/LineService' import LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService' import ConfigService from '@/services/ConfigService'
import { userStore } from "@/store/user"; import { userStore } from "@/store/user";
...@@ -167,6 +140,7 @@ ...@@ -167,6 +140,7 @@
const colorArr = ref([] as Array < any > ); //颜色 const colorArr = ref([] as Array < any > ); //颜色
const seasonArr = ref([] as Array < any > ); //季节 const seasonArr = ref([] as Array < any > ); //季节
const dataList = ref([] as Array < any > ); //模板数据列表 const dataList = ref([] as Array < any > ); //模板数据列表
const marketRef = ref<any>()
const currentPage = ref(1 as Number); const currentPage = ref(1 as Number);
const datas = reactive({ const datas = reactive({
...@@ -182,7 +156,6 @@ ...@@ -182,7 +156,6 @@
CountryName: '', //国家名称 CountryName: '', //国家名称
SeasonName: '', //季节名称 SeasonName: '', //季节名称
ColorName: '', //颜色名称 ColorName: '', //颜色名称
totalCount: 0, //总调试
pageCount: 0, //总页数 pageCount: 0, //总页数
}) })
...@@ -250,10 +223,10 @@ ...@@ -250,10 +223,10 @@
const queryTemplateBySearchHandler = async () => { const queryTemplateBySearchHandler = async () => {
loading.value = true loading.value = true
try { try {
if(queryObj.pageIndex == 1) dataList.value =[]
let pageRes = await ConfigService.GetTemplagePageAsync(queryObj); let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
if (pageRes.data.resultCode == 1) { if (pageRes.data.resultCode == 1) {
dataList.value = pageRes.data.data.pageData; dataList.value = dataList.value.concat(pageRes.data.data.pageData);
queryObj.totalCount = pageRes.data.data.count;
queryObj.pageCount = pageRes.data.data.pageCount; queryObj.pageCount = pageRes.data.data.pageCount;
} }
loading.value = false loading.value = false
...@@ -261,35 +234,31 @@ ...@@ -261,35 +234,31 @@
loading.value = false loading.value = false
} }
} }
const handleSizeChange = (val: number) => {
queryObj.pageSize = val
queryTemplateBySearchHandler()
}
const handleCurrentChange = (val: number) => {
queryObj.pageIndex = val
queryTemplateBySearchHandler()
}
//线路切换 //线路切换
const onLineChangeHandler = (lineId: number) => { const onLineChangeHandler = (lineId: number) => {
queryObj.LineId = lineId; queryObj.LineId = lineId;
queryObj.pageIndex = 1
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
} }
//国家切换 //国家切换
const onCountryNameChangeHandler = (CountryName: string) => { const onCountryNameChangeHandler = (CountryName: string) => {
queryObj.CountryName = CountryName; queryObj.CountryName = CountryName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
} }
//季节切换 //季节切换
const onSeasonNameChangeHandler = (SeasonName: string) => { const onSeasonNameChangeHandler = (SeasonName: string) => {
queryObj.SeasonName = SeasonName; queryObj.SeasonName = SeasonName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
} }
//颜色切换 //颜色切换
const onColorNameChangeHandler = (ColorName: string) => { const onColorNameChangeHandler = (ColorName: string) => {
queryObj.ColorName = ColorName; queryObj.ColorName = ColorName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
} }
...@@ -332,9 +301,25 @@ ...@@ -332,9 +301,25 @@
console.log("getTemplateQuery", error); console.log("getTemplateQuery", error);
} }
} }
const scrollingHandler = () =>{
if(marketRef.value && !loading.value){
let maxHeight = marketRef.value.scrollHeight - marketRef.value.offsetHeight
let scrollTop = marketRef.value.scrollTop
if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
queryObj.pageIndex++
queryTemplateBySearchHandler()
//console.log('应该加载第二页了')
}
}
}
getLinesHandler(); getLinesHandler();
getTemplateQuery(); getTemplateQuery();
queryTemplateBySearchHandler(); queryTemplateBySearchHandler();
onMounted(()=>{
marketRef.value.addEventListener("scroll", scrollingHandler);
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -358,16 +343,19 @@ ...@@ -358,16 +343,19 @@
font-size: 12px !important; font-size: 12px !important;
} }
.MarketIndexListBox{ .MarketIndexListBox{
width: 20%; width:calc(20% - 10px);
margin-bottom: 20px; margin: 10px 10px 0 0;
padding: 0 10px; padding:5px;
cursor: pointer; position: relative;
overflow: hidden;
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
} }
.MarketIndexList{ .MarketIndexList{
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.MarketIndexList-Hover{ .MarketIndexList-Hover{
z-index: 1; z-index: 1;
position: absolute; position: absolute;
...@@ -375,20 +363,16 @@ ...@@ -375,20 +363,16 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(23,23,23,0.7); background: rgba(23,23,23,0.5);
opacity: 0; opacity: 0;
transition: opacity 2s ease; transition: opacity 0.5s ease;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $themeHoverColor; color: $themeHoverColor;
} }
.MarketIndexList:hover .MarketIndexList-Hover{ .MarketIndexListBox:hover .MarketIndexList-Hover{
opacity: 1; opacity: 1;
} }
.MarketIndexList-Hover div span{ .MarketIndexList-Hover div span{
...@@ -398,36 +382,35 @@ ...@@ -398,36 +382,35 @@
padding: 0 10px 3px 10px; padding: 0 10px 3px 10px;
} }
.MarketIndexListBox:hover{ .MarketIndexListBox:hover{
position: relative;
top: -5px; top: -5px;
} }
.MarketIndexListBox:hover .MarketIndexList{ .MarketIndexListBox:hover .MarketIndexList{
box-shadow: 0 5px 6px -3px #0003, 0 9px 12px 1px #00000024, 0 3px 16px 2px #0000001f;
} }
.MarketIndexList-img{ .MarketIndexList-img{
/* position: relative; */
width: 100%; width: 100%;
height: 252px; height: 0;
/* padding-top: 100%; */ position: relative;
border-top-left-radius: 6px; padding-bottom: 56.25%;
border-top-right-radius: 6px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
/* border-bo: 1px solid #eeee; */
} }
.MarketIndexList-img img{ .MarketIndexList-img img{
/* position: absolute; /* position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; */ height: 100%; */
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
} }
.MarketIndexList-text{ .MarketIndexList-text{
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 15px 20px 10px 20px; padding: 10px;
padding-bottom: 5px;
} }
.MarketVerticalLine{ .MarketVerticalLine{
width: 1px; width: 1px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment