scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 新增 x-popup 组件并优化首页弹窗- 新增 x-popup 组件，用于替换原有的 van-popup

Browse Source 
- 在首页引入并使用新的 x-popup组件
- 优化弹窗内容的展示结构
- 调整弹窗样式，增加标题插槽和关闭按钮
This commit is contained in:
xingyy 2025-01-22 14:01:13 +08:00
parent 05cd427430
commit 8f38870c33
3 changed files with 136 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/components/x-popup/index.vue Normal file
View File

@ -0,0 +1,46 @@
<script setup>
const props = defineProps({
show: {
type: Boolean,
default: false
},
title:''
})
const emit = defineEmits(['update:show'])
const close=()=>{
emit('update:show',false)
}
</script>
<template>
<van-popup
:show="show"
position="bottom"
:style="{ height: '74%' }"
v-bind="{...$attrs,...$props}"
@close="close"
>
<div class="flex flex-col h-full">
<!-- 固定的标题栏 -->
<div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-b-[#D3D3D3] shrink-0">
<template v-if="$slots.title">
<slot name="title"></slot>
</template>
<template v-else>
<div class="text-#000 text-16px">{{title}}</div>
</template>
<div class="ml-auto flex items-center">
<van-icon size="20" name="cross" color="#939393" @click="close"/>
</div>
</div>
<!-- 可滚动的内容区域 -->
<div class="flex-1 overflow-y-auto ">
<slot/>
</div>
</div>
</van-popup>
</template>
<style scoped>
</style>

95
app/pages/home/index.vue
View File

@ -3,7 +3,7 @@ import LiveRoom from '@/pages/LiveRoom/index.client.vue';
import {goodStore} from "@/stores/goods/index.js";
import ItemList from './components/ItemList/index.vue'
import Cescribe from './components/Cescribe/index.vue'
import xPopup from '@/components/x-popup/index.vue'
import {artworkList} from "~/api/goods/index.js";
import {ref} from "vue";
@ -36,55 +36,104 @@ const showBottom = ref(true)
</van-tabs>
<van-back-top right="15vw" bottom="10vh"/>
</div>
<van-popup
v-model:show="showBottom"
position="bottom"
:style="{ height: '74%' }"
>
<div class="flex flex-col">
<div class="h-40px flex items-center pl-16px pr-19px border-b-1px border-b-[#D3D3D3]">
<x-popup v-model:show="showBottom">
<template #title>
<div class="text-#000 text-16px">拍品列表</div>
<div class="text-#939393 text-16px ml-14px">共188个拍品</div>
<div class="ml-auto flex items-center">
<van-icon size="20" name="cross" color="#939393"/>
</div>
</div>
<div class="flex-grow-1 px-16px py-18px">
<div>
</template>
<div class="px-16px py-18px">
<div class="flex mb-21px">
<div class="mr-10px flex-shrink-0">
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰</div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰
</div>
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
<div class="text-14px text-#B58047">成交价：等待更新</div>
</div>
</div>
<div class="flex mb-21px">
<div class="mr-10px flex-shrink-0">
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰</div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
张天赐 | 日出而作，日落而息撒打算撒打算撒打决赛多久啊是世奥兰日落而息撒打算撒打算撒打决赛多久啊是世奥兰
</div>
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
<div class="text-14px text-#B58047">成交价：等待更新</div>
</div>
</div>
<div class="flex mb-21px">
<div class="mr-10px flex-shrink-0">
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">张天赐 | 日出而作</div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
张天赐 | 日出而作
</div>
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
<div class="text-14px text-#B58047">成交价：等待更新</div>
</div>
</div>
<div class="flex mb-21px">
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
张天赐 | 日出而作
</div>
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
<div class="text-14px text-#B58047">成交价：等待更新</div>
</div>
</div>
<div class="flex mb-21px">
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
张天赐 | 日出而作
</div>
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
<div class="text-14px text-#B58047">成交价：等待更新</div>
</div>
</div>
<div class="flex mb-21px">
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
张天赐 | 日出而作
</div>
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
<div class="text-14px text-#B58047">成交价：等待更新</div>
</div>
</div>
<div class="flex mb-21px">
<div class="mr-10px flex-shrink-0 rounded-4px overflow-hidden">
<img class="w-80px h-80px" src="@/static/images/ddfdcaer.png" alt="">
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
张天赐 | 日出而作
</div>
<div class="text-14px text-#575757">起拍价：RMB 1,000</div>
<div class="text-14px text-#B58047">成交价：等待更新</div>
</div>
</div>
</div>
</div>
</div>
</van-popup>
</x-popup>
</div>
</template>
<style>

2
nuxt.config.js
View File

@ -10,9 +10,7 @@ const publicConfig = Object.entries(process.env)
config[key] = value
return config
}, {})
export default defineNuxtConfig({
hooks: {
'pages:extend'(pages) {
const indexPage = pages.findIndex(page => page.path === '/')