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 {
background: transparent;
color: transparent;
} */
.no-bg .el-loading-mask,
.no-bg .el-divider__text{
background-color: transparent !important;
}
.light-shadow {
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
}
......
src/views/Market/Index.vue
View file @ 8fd06b25
<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;">
<el-row justify="space-between">
<el-col :span="6">
......@@ -65,62 +65,35 @@
</div>
</div>
</div>
<div style="margin-top: 20px;" v-loading="loading">
<div v-if="dataList.length>0" class="q-mt-lg row wrap bg-white rounded" style="padding: 30px 10px 0 10px;">
<div style="margin-top: 20px;">
<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">
<div class="MarketIndexListBox">
<div class="MarketIndexList bg-white rounded">
<div class="MarketIndexList-Hover">
<div>
<el-button type="primary"
style="color: #ffff;"
@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 class="MarketIndexListBox bg-white rounded">
<div class="MarketIndexList-Hover">
<div>
<el-button type="primary"
style="color: #ffff;"
@click="getTemplate(item)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
</div>
<div class="MarketIndexList-img">
<el-image style="width: 100%;height: 100%" :src="item.CoverImg" fit="cover" />
<div class="q-mt-lg">
<el-button type="primary"
style="color: #ffff;"
@click="goToTemplate(item)">选择该模版</el-button>
</div>
<div class="MarketIndexList-text">{{item.Title}}</div>
</div>
<div class="MarketIndexList-img">
<img :src="item.CoverImg" class="rounded" />
</div>
<div class="MarketIndexList-text">{{item.Title}}</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>
</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-if="dataList.length>0" class="q-mt-lg row" style="justify-content: center;margin-bottom: 40px">
<!-- hide-on-single-page -->
<el-pagination
background
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 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>
<el-divider class="no-bg q-mt-lg" v-if='queryObj.pageCount == queryObj.pageIndex && !loading'>
<span class="text-samll" style="background: #f3f6fb;padding: 0 10px;color:#a3a3a3">已加载完成所有数据</span>
</el-divider>
<div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading" element-loading-text="正在加载中"></div>
</div>
</div>
</div>
......@@ -148,7 +121,7 @@
</template>
<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 ConfigService from '@/services/ConfigService'
import { userStore } from "@/store/user";
......@@ -167,6 +140,7 @@
const colorArr = ref([] as Array < any > ); //颜色
const seasonArr = ref([] as Array < any > ); //季节
const dataList = ref([] as Array < any > ); //模板数据列表
const marketRef = ref<any>()
const currentPage = ref(1 as Number);
const datas = reactive({
......@@ -182,7 +156,6 @@
CountryName: '', //国家名称
SeasonName: '', //季节名称
ColorName: '', //颜色名称
totalCount: 0, //总调试
pageCount: 0, //总页数
})
......@@ -250,10 +223,10 @@
const queryTemplateBySearchHandler = async () => {
loading.value = true
try {
if(queryObj.pageIndex == 1) dataList.value =[]
let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
if (pageRes.data.resultCode == 1) {
dataList.value = pageRes.data.data.pageData;
queryObj.totalCount = pageRes.data.data.count;
dataList.value = dataList.value.concat(pageRes.data.data.pageData);
queryObj.pageCount = pageRes.data.data.pageCount;
}
loading.value = false
......@@ -261,35 +234,31 @@
loading.value = false
}
}
const handleSizeChange = (val: number) => {
queryObj.pageSize = val
queryTemplateBySearchHandler()
}
const handleCurrentChange = (val: number) => {
queryObj.pageIndex = val
queryTemplateBySearchHandler()
}
//线路切换
const onLineChangeHandler = (lineId: number) => {
queryObj.LineId = lineId;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
}
//国家切换
const onCountryNameChangeHandler = (CountryName: string) => {
queryObj.CountryName = CountryName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
}
//季节切换
const onSeasonNameChangeHandler = (SeasonName: string) => {
queryObj.SeasonName = SeasonName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
}
//颜色切换
const onColorNameChangeHandler = (ColorName: string) => {
queryObj.ColorName = ColorName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
}
......@@ -332,9 +301,25 @@
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();
getTemplateQuery();
queryTemplateBySearchHandler();
onMounted(()=>{
marketRef.value.addEventListener("scroll", scrollingHandler);
})
</script>
<style lang="scss" scoped>
......@@ -358,16 +343,19 @@
font-size: 12px !important;
}
.MarketIndexListBox{
width: 20%;
margin-bottom: 20px;
padding: 0 10px;
cursor: pointer;
width:calc(20% - 10px);
margin: 10px 10px 0 0;
padding:5px;
position: relative;
overflow: hidden;
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
}
.MarketIndexList{
width: 100%;
position: relative;
overflow: hidden;
}
.MarketIndexList-Hover{
z-index: 1;
position: absolute;
......@@ -375,20 +363,16 @@
left: 0;
right: 0;
bottom: 0;
background: rgba(23,23,23,0.7);
background: rgba(23,23,23,0.5);
opacity: 0;
transition: opacity 2s ease;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 0.5s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $themeHoverColor;
}
.MarketIndexList:hover .MarketIndexList-Hover{
.MarketIndexListBox:hover .MarketIndexList-Hover{
opacity: 1;
}
.MarketIndexList-Hover div span{
......@@ -398,36 +382,35 @@
padding: 0 10px 3px 10px;
}
.MarketIndexListBox:hover{
position: relative;
top: -5px;
}
.MarketIndexListBox:hover .MarketIndexList{
box-shadow: 0 5px 6px -3px #0003, 0 9px 12px 1px #00000024, 0 3px 16px 2px #0000001f;
}
.MarketIndexList-img{
/* position: relative; */
width: 100%;
height: 252px;
/* padding-top: 100%; */
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
/* border-bo: 1px solid #eeee; */
height: 0;
position: relative;
padding-bottom: 56.25%;
}
.MarketIndexList-img img{
/* position: absolute;
top: 0;
left: 0;
height: 100%; */
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
.MarketIndexList-text{
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 15px 20px 10px 20px;
padding: 10px;
padding-bottom: 5px;
}
.MarketVerticalLine{
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