Commit 5b004ee6 authored by zhangsan's avatar zhangsan

1

parent 279dcc97
......@@ -11,7 +11,16 @@
</slot>
</div>
<div class="guide-footer">
<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>
......@@ -21,59 +30,60 @@
</div>
</Transition>
</Teleport>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
</template>
interface Props {
<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 props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const currentIndex = ref(0)
const slideDirection = ref('next')
const transitionName = computed(() => `slide-${slideDirection.value}`)
const currentIndex = ref(0)
const slideDirection = ref('next')
const transitionName = computed(() => `slide-${slideDirection.value}`)
const visible = computed({
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 isLastPage = computed(() => currentIndex.value === props.guideList.length - 1)
const handleAction = () => {
const handleAction = () => {
if (isLastPage.value) {
handleClose()
} else {
slideDirection.value = 'next'
currentIndex.value++
}
}
}
const handleClose = () => {
const handleClose = () => {
visible.value = false
// 重置状态
setTimeout(() => {
currentIndex.value = 0
slideDirection.value = 'next'
}, 300)
}
}
const beforeLeave = () => {
const beforeLeave = () => {
document.body.style.overflow = 'hidden'
}
}
const afterLeave = () => {
const afterLeave = () => {
document.body.style.overflow = ''
}
</script>
}
</script>
<style lang="scss" scoped>
.guide-modal-overlay {
<style lang="scss" scoped>
.guide-modal-overlay {
position: fixed;
top: 0;
left: 0;
......@@ -84,9 +94,9 @@
align-items: center;
justify-content: center;
z-index: 1000;
}
}
.guide-modal {
.guide-modal {
background: #fff;
border-radius: 5px;
width: 100%; // 调整宽度为90%
......@@ -95,9 +105,9 @@
display: flex;
flex-direction: column;
overflow: hidden; // 防止内容溢出
}
}
.guide-content {
.guide-content {
flex: 1;
overflow-y: auto; // 内容过多时可滚动
padding: 20px;
......@@ -107,15 +117,18 @@
max-width: 100%;
height: auto;
}
}
}
.guide-footer {
.guide-footer {
background: #fff; // 确保底部背景色
border-top: 1px solid #eee;
}
}
.guide-footer1 {
display: flex;
}
.guide-button {
.guide-button {
width: 100%; // 按钮宽度设为90%
margin: 0 auto;
display: block;
......@@ -126,44 +139,44 @@
font-size: 16px;
cursor: pointer;
transition: opacity 0.3s;
}
}
// 淡入淡出动画
.fade-enter-active,
.fade-leave-active {
// 淡入淡出动画
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
}
.fade-enter-from,
.fade-leave-to {
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
}
// 滑动动画
.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
// 滑动动画
.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 {
.slide-next-enter-from {
transform: translateX(100%);
opacity: 0;
}
}
.slide-next-leave-to {
.slide-next-leave-to {
transform: translateX(-100%);
opacity: 0;
}
}
.slide-prev-enter-from {
.slide-prev-enter-from {
transform: translateX(-100%);
opacity: 0;
}
}
.slide-prev-leave-to {
.slide-prev-leave-to {
transform: translateX(100%);
opacity: 0;
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
......@@ -33,7 +33,11 @@ const fetchData = async () => {
}
const handleJump = (item) => {
if(item.createMan){
window.location.href = window.location.origin + `/product/detail.html?id=${item.productId}`
}else{
showFailToast('暂未开放世界银行项目产品')
}
}
fetchData()
......
......@@ -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