修复bug
This commit is contained in:
X1627315083
244
src/component/Events/eventsDetail.vue
Normal file
244
src/component/Events/eventsDetail.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="eventsDetail_page" :class="{active:isScroll}">
|
||||
<div class="eventsDetail_title ">
|
||||
<div class="modal_title_text" @click="setBack">
|
||||
<i class="fi fi-sr-left"></i>
|
||||
<div class="eventsDetail_title_text">Back</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eventsDetail_content">
|
||||
<div class="eventsDetail_content_left">
|
||||
<fullScreenImg :src="eventsDetail.imgUrl" width="100%" :center="true"></fullScreenImg>
|
||||
</div>
|
||||
<div class="eventsDetail_content_right">
|
||||
<div class="modal_title_text">
|
||||
<div>{{ eventsDetail.title }}</div>
|
||||
</div>
|
||||
<div class="modal_title_text" v-for="item in eventsDetail.textList">
|
||||
<div class="eventsDetail_content_right_btn_box">
|
||||
<div class="eventsDetail_content_right_btn" v-for="buttonItem,buttonIndex in item?.button" @click="openButton(buttonItem,buttonIndex)">
|
||||
<div v-show="!loadingShow[buttonIndex]" class="started_btn">{{ buttonItem.text }}</div>
|
||||
<div v-show="loadingShow[buttonIndex]" class="started_btn"><i class="fi fi-br-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text_intro" v-for="introItem in item?.paragraph" :class="{active:introItem.display == 'flex'}" v-detailText="introItem.text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
|
||||
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { message, Upload, Modal } from "ant-design-vue";
|
||||
import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from "vue-i18n";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
import eventData from "@/assets/json/events.json";
|
||||
import eventDataCn from "@/assets/json/events_cn.json";
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
generalMenu,
|
||||
fullScreenImg,
|
||||
},
|
||||
props:{
|
||||
isScroll:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
let filter:any = reactive({
|
||||
eventsDetail: {
|
||||
},
|
||||
getListDate:{
|
||||
"getLikePortfolio": 0,
|
||||
"getMyPortfolio": 0,
|
||||
page:1,
|
||||
size:10,
|
||||
},
|
||||
isShowMark:false,
|
||||
isNoData:false,//如果数据为空就不加载
|
||||
loadingShow:{},
|
||||
})
|
||||
let systemUser = computed(()=>{
|
||||
return store.state.UserHabit.systemUser
|
||||
})
|
||||
let likeFile = (item:any,type:string) => {
|
||||
}
|
||||
let setBack = ()=>{
|
||||
router.go(-1);
|
||||
}
|
||||
let openButton = (data:any,index:number)=>{
|
||||
if(filter.loadingShow[index]){
|
||||
return
|
||||
}
|
||||
filter.loadingShow[index] = true
|
||||
Https.axiosGet(data.https).then(
|
||||
(rv: any) => {
|
||||
if(rv){
|
||||
message.success(data.success)
|
||||
filter.loadingShow[index] = false
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
filter.loadingShow[index] = false
|
||||
});
|
||||
}
|
||||
onMounted (()=>{
|
||||
const { t, locale } = useI18n();
|
||||
const currentLocale = locale.value;
|
||||
let eventLangData:any
|
||||
if(currentLocale == 'ENGLISH'){
|
||||
eventLangData = eventData
|
||||
}else{
|
||||
eventLangData = eventDataCn
|
||||
}
|
||||
eventLangData.eventsItem.forEach((item:any)=>{
|
||||
if(item.id == router.currentRoute.value.query.id){
|
||||
filter.eventsDetail = item;
|
||||
}
|
||||
})
|
||||
})
|
||||
return {
|
||||
...toRefs(filter),
|
||||
systemUser,
|
||||
likeFile,
|
||||
setBack,
|
||||
openButton,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
detailText:{
|
||||
mounted (el,binding) {
|
||||
el.innerHTML = binding.value
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.eventsDetail_page {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 9rem;
|
||||
padding-top: 5rem;
|
||||
|
||||
&.active{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.eventsDetail_content{
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
padding-top: 0;
|
||||
min-height: auto;
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
.eventsDetail_title{
|
||||
display: flex;
|
||||
padding: 2rem 0rem;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 222;
|
||||
background: #fff;
|
||||
.modal_title_text{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.modal_title_text:hover .eventsDetail_title_text{
|
||||
text-decoration: underline;
|
||||
}
|
||||
i{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content{
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 8rem;
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.eventsDetail_content_left,.eventsDetail_content_right{
|
||||
width: 50%;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content_left{
|
||||
width: 40%;
|
||||
max-height: 60rem;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
.ant-image{
|
||||
// height: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.eventsDetail_content_left_img{
|
||||
width: 100%;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content_right{
|
||||
.modal_title_text{
|
||||
letter-spacing: .4rem;
|
||||
font-weight: 600;
|
||||
.modal_title_text_intro{
|
||||
display: block;
|
||||
&.active{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
li{
|
||||
width: 48%;
|
||||
|
||||
}
|
||||
em{
|
||||
// font-family: auto;
|
||||
}
|
||||
a{
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.eventsDetail_content_right_btn_box{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
.eventsDetail_content_right_btn{
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.modal_title_text:last-child{
|
||||
}
|
||||
.modal_title_text:last-child::after{
|
||||
content: "";
|
||||
display: block;
|
||||
border-top: 3px solid;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user