306 lines
7.7 KiB
Vue
306 lines
7.7 KiB
Vue
<template>
|
|
<div class="events_page" :class="{active:isScroll}">
|
|
<!-- <div class="modal_title_text modal_search">
|
|
<div v-show="isScroll || userDetail.systemUser>-1" v-for="item in worksType" :key="item" class="gallery_btn white" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
|
|
{{ item.name }}
|
|
</div>
|
|
<div v-show="!isScroll && userDetail.systemUser == -1" class="gallery_btn active">All</div>
|
|
</div> -->
|
|
<div class="page_content" >
|
|
<div class="page_content_itemBox">
|
|
<div class="page_content_item" v-for="item,index in eventsList" :key="eventsList[eventsList.length-1-index].id" v-fadeIn="isScroll">
|
|
<div class="page_content_item_img" @click="openEventsDetail(eventsList[eventsList.length-1-index])">
|
|
<img :src="eventsList[eventsList.length-1-index].imgUrl" alt="">
|
|
</div>
|
|
<div class="page_content_item_time">{{ eventsList[eventsList.length-1-index].time }}</div>
|
|
<div class="page_content_item_title" @click="openEventsDetail(eventsList[eventsList.length-1-index])">{{ eventsList[eventsList.length-1-index].title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="page_loading_box" v-show="!isNoData">
|
|
<span class="page_loading" v-show="!isShowMark"></span>
|
|
<span v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
|
|
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
|
import { Https } from "@/tool/https";
|
|
import { useI18n } from "vue-i18n";
|
|
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
|
import { useStore } from "vuex";
|
|
import eventData from "@/assets/json/events.json";
|
|
import eventDataCn from "@/assets/json/events_cn.json";
|
|
import { useRouter } from 'vue-router'
|
|
import { gsap, TweenMax } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
export default defineComponent({
|
|
components: {
|
|
generalMenu,
|
|
},
|
|
props:{
|
|
isScroll:{
|
|
type:Boolean,
|
|
default:true,
|
|
},
|
|
},
|
|
setup() {
|
|
const router:any = useRouter()
|
|
const store = useStore();
|
|
let filter:any = reactive({
|
|
worksSelect: 'all',
|
|
worksType: [
|
|
{
|
|
name: useI18n().t('works.all'),
|
|
value: 'all'
|
|
},
|
|
// {
|
|
// name: useI18n().t('works.FavoriteWorks'),
|
|
// value: 'favoriteWorks'
|
|
// },
|
|
// {
|
|
// name: useI18n().t('works.MyWorks'),
|
|
// value: 'myWorks'
|
|
// },
|
|
],
|
|
eventsList:[],
|
|
getListDate:{
|
|
"getLikePortfolio": 0,
|
|
"getMyPortfolio": 0,
|
|
page:1,
|
|
size:10,
|
|
},
|
|
isShowMark:false,
|
|
isNoData:false,//如果数据为空就不加载
|
|
})
|
|
let userDetail = computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
let selectMenu:any = ref({
|
|
label:'全部',
|
|
value:'all',
|
|
})
|
|
let setWorksSelect = (val:any) => {
|
|
// filter.worksSelect = val.value
|
|
// filter.getListDate.getLikePortfolio = 0
|
|
// filter.getListDate.getMyPortfolio = 0
|
|
// if(val.value == 'all'){
|
|
// }else if(val.value == 'favoriteWorks'){
|
|
// filter.getListDate.getLikePortfolio = 1
|
|
// }else if(val.value == 'myWorks'){
|
|
// filter.getListDate.getMyPortfolio = 1
|
|
// }
|
|
// filter.getListDate.page = 0
|
|
filter.isShowMark = false
|
|
filter.isNoData = false
|
|
// getPorfolio()
|
|
}
|
|
let likeFile = (item:any,type:string) => {
|
|
}
|
|
let getImgScale = (item:any)=>{
|
|
}
|
|
let getPorfolio = ()=>{
|
|
let data = filter.getListDate
|
|
if(filter.isShowMark && !filter.isNoData)return
|
|
filter.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.getPorfolio, data)
|
|
.then((rv) => {
|
|
if (rv.content.length > 0) {
|
|
|
|
} else {
|
|
filter.isNoData = true
|
|
}
|
|
filter.isShowMark = false
|
|
})
|
|
.catch((rv) => {
|
|
filter.isShowMark = false
|
|
filter.isNoData = true
|
|
});
|
|
}
|
|
let {t} = useI18n()
|
|
let openEventsDetail = (item:any)=>{
|
|
let path = router.currentRoute._value.path.split('/')[1]
|
|
router.push(`/${path}/eventsDetail?eventId=${item.id}`)
|
|
// router.push(`${path}?id=${item.id}`)
|
|
}
|
|
onMounted (()=>{
|
|
// filter.isShowMark = false
|
|
// filter.isNoData = false
|
|
// getPorfolio()
|
|
// let worksPage:any = document.querySelector('.events_page')
|
|
// let imgParent:any = document.querySelector('.events_page .page_loading')
|
|
// new IntersectionObserver(
|
|
// (entries, observer) => {
|
|
// // 如果不是相交，则直接返回
|
|
// if (!entries[0].intersectionRatio) return;
|
|
// filter.getListDate.page += 1
|
|
// getPorfolio()
|
|
// },
|
|
// ).observe(imgParent);
|
|
const { t, locale } = useI18n();
|
|
const currentLocale = locale.value;
|
|
if(currentLocale == 'ENGLISH'){
|
|
filter.eventsList = eventData.eventsList
|
|
}else{
|
|
filter.eventsList = eventDataCn.eventsList
|
|
}
|
|
})
|
|
return {
|
|
...toRefs(filter),
|
|
userDetail,
|
|
selectMenu,
|
|
setWorksSelect,
|
|
likeFile,
|
|
getImgScale,
|
|
t,
|
|
openEventsDetail,
|
|
}
|
|
},
|
|
directives:{
|
|
fadeIn:{
|
|
mounted (el,binding) {
|
|
let dom
|
|
if(binding.value){
|
|
dom = document.querySelector('.events_page')
|
|
}else{
|
|
dom = document.querySelector('.homeRecommend_content_body')
|
|
}
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
let tl1 = gsap.timeline();
|
|
tl1.from(el,1, {y:'30px',opacity:0},)
|
|
ScrollTrigger.create({
|
|
trigger: el, // 触发器元素
|
|
start: "top 90%", // 滚动触发器的起始滚动位置
|
|
end: '100% 80%', // 滚动触发器的结束滚动位置
|
|
// markers: true, // 开启标注功能
|
|
animation:tl1,
|
|
scroller:dom,//设置指定元素为滚动依据
|
|
scrub:2,
|
|
// onUpdate:(v)=>{
|
|
// if(v.progress < 0.1){
|
|
// v.trigger?.classList.remove('active')
|
|
// }else{
|
|
// v.trigger?.classList.add('active')
|
|
// // v.trigger?.classList.add('active')
|
|
// }
|
|
// }
|
|
});
|
|
}
|
|
},
|
|
},
|
|
async mounted(){
|
|
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.el-icon{
|
|
font-size: 14px;
|
|
}
|
|
.events_page {
|
|
border-radius: 4rem;
|
|
width: 100%;
|
|
// height: 100%;
|
|
height: auto;
|
|
min-height: 100%;
|
|
// padding: 0 6rem;
|
|
position: relative;
|
|
// padding-top: 5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.modal_title_text{
|
|
display: flex;
|
|
margin: 0;
|
|
padding-bottom: 2.4rem;
|
|
.gallery_btn{
|
|
margin-right: 1rem;
|
|
min-width: 12rem;
|
|
}
|
|
.gallery_btn:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.modal_search_menu{
|
|
margin-left: auto;
|
|
z-index: 10;
|
|
.generalMenu_printModel{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
.page_content {
|
|
position: relative;
|
|
min-height: 80%;
|
|
height: auto;
|
|
background: #f7f8fa;
|
|
width: 100%;
|
|
flex: 1;
|
|
@media (max-width: 768px) {
|
|
background: #fff;
|
|
}
|
|
.page_content_itemBox{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.page_content_item{
|
|
width: 25%;
|
|
padding: 2rem;
|
|
@media (max-width: 768px) {
|
|
max-width: 100%;
|
|
}
|
|
.page_content_item_img{
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
img{
|
|
width: 100%;
|
|
object-fit: contain;
|
|
border-radius: 2rem;
|
|
}
|
|
}
|
|
.page_content_item_time{
|
|
color: #5f5f5f;
|
|
}
|
|
.page_content_item_title{
|
|
font-size: 1.6rem;
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
overflow: hidden; /* 溢出隐藏 */
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2; /* 限制显示的行数 */
|
|
-webkit-box-orient: vertical;
|
|
font-weight: 800;
|
|
color: #000000;
|
|
cursor: pointer;
|
|
}
|
|
.page_content_item_title:hover{
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
.page_loading_box{
|
|
text-align: center;
|
|
height: 50px;
|
|
.page_loading{
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.page_content{
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |