Skip to content

N
newydyl1
Commit 5b004ee6 authored by zhangsan's avatar zhangsan
Browse files
Options

1

parent 279dcc97
main
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 168 deletions
src/components/GuideModal.vue
View file @ 5b004ee6
<template>
<Teleport to="body">
<Transition name="fade">
<div v-if="visible" class="guide-modal-overlay" @click.self="handleClose">
<Transition :name="transitionName" mode="out-in" @before-leave="beforeLeave" @after-leave="afterLeave">
<div class="guide-modal" :key="currentIndex">
<!-- 使用插槽或v-html展示内容 -->
<div class="guide-content">
<slot :index="currentIndex">
<div v-html="guideList[currentIndex]?.noticeContent"></div>
</slot>
</div>
<div class="guide-footer">
<button class="guide-button" @click="handleAction">
{{ isLastPage ? '我知道了' : '下一页' }}
</button>
</div>
<Teleport to="body">
<Transition name="fade">
<div v-if="visible" class="guide-modal-overlay" @click.self="handleClose">
<Transition :name="transitionName" mode="out-in" @before-leave="beforeLeave" @after-leave="afterLeave">
<div class="guide-modal" :key="currentIndex">
<!-- 使用插槽或v-html展示内容 -->
<div class="guide-content">
<slot :index="currentIndex">
<div v-html="guideList[currentIndex]?.noticeContent"></div>
</slot>
</div>
</Transition>
</div>
</Transition>
</Teleport>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
interface Props {
guideList: string[]
modelValue: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const currentIndex = ref(0)
const slideDirection = ref('next')
const transitionName = computed(() => `slide-${slideDirection.value}`)
const visible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
const isLastPage = computed(() => currentIndex.value === props.guideList.length - 1)
const handleAction = () => {
if (isLastPage.value) {
handleClose()
} else {
slideDirection.value = 'next'
currentIndex.value++
}
}
const handleClose = () => {
visible.value = false
// 重置状态
setTimeout(() => {
currentIndex.value = 0
slideDirection.value = 'next'
}, 300)
}
const beforeLeave = () => {
document.body.style.overflow = 'hidden'
}
const afterLeave = () => {
document.body.style.overflow = ''
}
</script>
<style lang="scss" scoped>
.guide-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.guide-modal {
background: #fff;
border-radius: 5px;
width: 100%; // 调整宽度为90%
height: 80vh; // 设置高度为视口高度的70%
position: relative;
display: flex;
flex-direction: column;
overflow: hidden; // 防止内容溢出
}
.guide-content {
flex: 1;
overflow-y: auto; // 内容过多时可滚动
padding: 20px;
// 允许v-html内容继承样式
:deep(*) {
max-width: 100%;
height: auto;
}
}
.guide-footer {
background: #fff; // 确保底部背景色
border-top: 1px solid #eee;
}
.guide-button {
width: 100%; // 按钮宽度设为90%
margin: 0 auto;
display: block;
background: red;
color: #fff;
border: none;
padding: 12px 0;
font-size: 16px;
cursor: pointer;
transition: opacity 0.3s;
}
// 淡入淡出动画
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
// 滑动动画
.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
transition: all 0.3s ease-out;
}
.slide-next-enter-from {
transform: translateX(100%);
opacity: 0;
}
.slide-next-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-prev-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-prev-leave-to {
transform: translateX(100%);
opacity: 0;
}
</style>
\ No newline at end of file
<div class="guide-footer guide-footer1" v-if="guideList[currentIndex]?.bh.includes('.html')">
<button class="guide-button" @click="jumpto(guideList[currentIndex]?.bh)">
{{ guideList[currentIndex]?.noticeTitle }}
</button>
<var-divider vertical style="margin: 0;" />
<button class="guide-button" @click="handleAction">
{{ isLastPage ? '我知道了' : '下一页' }}
</button>
</div>
<div class="guide-footer" v-else>
<button class="guide-button" @click="handleAction">
{{ isLastPage ? '我知道了' : '下一页' }}
</button>
</div>
</div>
</Transition>
</div>
</Transition>
</Teleport>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
interface Props {
guideList: string[]
modelValue: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const currentIndex = ref(0)
const slideDirection = ref('next')
const transitionName = computed(() => `slide-${slideDirection.value}`)
const visible = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
const jumpto = (url) => {
window.location.href = window.location.origin + url
}
const isLastPage = computed(() => currentIndex.value === props.guideList.length - 1)
const handleAction = () => {
if (isLastPage.value) {
handleClose()
} else {
slideDirection.value = 'next'
currentIndex.value++
}
}
const handleClose = () => {
visible.value = false
// 重置状态
setTimeout(() => {
currentIndex.value = 0
slideDirection.value = 'next'
}, 300)
}
const beforeLeave = () => {
document.body.style.overflow = 'hidden'
}
const afterLeave = () => {
document.body.style.overflow = ''
}
</script>
<style lang="scss" scoped>
.guide-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.guide-modal {
background: #fff;
border-radius: 5px;
width: 100%; // 调整宽度为90%
height: 80vh; // 设置高度为视口高度的70%
position: relative;
display: flex;
flex-direction: column;
overflow: hidden; // 防止内容溢出
}
.guide-content {
flex: 1;
overflow-y: auto; // 内容过多时可滚动
padding: 20px;
// 允许v-html内容继承样式
:deep(*) {
max-width: 100%;
height: auto;
}
}
.guide-footer {
background: #fff; // 确保底部背景色
border-top: 1px solid #eee;
}
.guide-footer1 {
display: flex;
}
.guide-button {
width: 100%; // 按钮宽度设为90%
margin: 0 auto;
display: block;
background: red;
color: #fff;
border: none;
padding: 12px 0;
font-size: 16px;
cursor: pointer;
transition: opacity 0.3s;
}
// 淡入淡出动画
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
// 滑动动画
.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
transition: all 0.3s ease-out;
}
.slide-next-enter-from {
transform: translateX(100%);
opacity: 0;
}
.slide-next-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-prev-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-prev-leave-to {
transform: translateX(100%);
opacity: 0;
}
</style>
\ No newline at end of file
src/pages/product/App.vue
View file @ 5b004ee6
......@@ -33,7 +33,11 @@ const fetchData = async () => {
}
const handleJump = (item) => {
window.location.href = window.location.origin + `/product/detail.html?id=${item.productId}`
if(item.createMan){
window.location.href = window.location.origin + `/product/detail.html?id=${item.productId}`
}else{
showFailToast('暂未开放世界银行项目产品')
}
}
fetchData()
......
types/components.d.ts
View file @ 5b004ee6
......@@ -18,15 +18,22 @@ declare module 'vue' {
VanEmpty: typeof import('vant/es')['Empty']
VanIcon: typeof import('vant/es')['Icon']
VanList: typeof import('vant/es')['List']
VanPopup: typeof import('vant/es')['Popup']
VanRadio: typeof import('vant/es')['Radio']
VanRadioGroup: typeof import('vant/es')['RadioGroup']
VanTag: typeof import('vant/es')['Tag']
VarAppBar: typeof import('@varlet/ui')['AppBar']
VarButton: typeof import('@varlet/ui')['Button']
VarDivider: typeof import('@varlet/ui')['Divider']
VarForm: typeof import('@varlet/ui')['Form']
VarIcon: typeof import('@varlet/ui')['Icon']
VarInput: typeof import('@varlet/ui')['Input']
VarLoading: typeof import('@varlet/ui')['Loading']
VarOverlay: typeof import('@varlet/ui')['Overlay']
VarPaper: typeof import('@varlet/ui')['Paper']
VarSpace: typeof import('@varlet/ui')['Space']
VarTab: typeof import('@varlet/ui')['Tab']
VarTabs: typeof import('@varlet/ui')['Tabs']
XModal: typeof import('./../src/components/x-modal/x-modal.vue')['default']
}
export interface ComponentCustomProperties {
......
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