header修改

parent 62b54c8e
<template>
<Header :show="false" backgroundBox="white">
<van-nav-bar title="用户中心" :left-arrow="true" border fixed placeholder safe-area-inset-top
@click-left="router.go(-1)" />
</Header>
<div class="container">
<div class="content">
<div class="item">
......
......@@ -5,20 +5,17 @@
<div class="search">
<div class="s-box">
<van-icon name="search" color="#303030" />
<input class="placeholder" placeholder="请输入关键词" v-model="queryParams.classifyType" @confirm="handleRefresh"/>
<input class="placeholder" placeholder="请输入关键词" v-model="queryParams.classifyType"
@confirm="handleRefresh" />
</div>
<van-icon v-if="queryParams.classifyType" name="clear" color="#969696" @tap="clear" />
</div>
</div>
</Header>
<div class="bg">
<!-- <van-sticky>
</van-sticky> -->
<div class="content">
<van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="50"
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="contentHeight"
@load="getList" v-if="dataList.length">
<div class="list">
<div class="item" v-for="(item, index) in dataList" :key="index"
......@@ -48,8 +45,14 @@ const fileDomain = import.meta.env.VITE_APP_FILE_URL
import { useInitScroll } from '@/hooks/useScroll'
useInitScroll()
const contentHeight = ref(50)
onLoad(() => {
getList()
xma.xh.getMenuButtonBoundingClientRect({
success(res) {
contentHeight.value = (res.top + res.bottom) / 2 + 25;
},
});
})
const page = reactive({
......@@ -131,7 +134,8 @@ const clear = () => {
}
}
}
.bg {
height: 100vh;
background: linear-gradient(to bottom, #D2E4FF 5%, #fff 25%);
......
<template>
<van-sticky>
<Header backgroundBox="#ffffff">
<div class="header">
<div class="tools">
<van-search v-model="queryParams.materialTitle" shape="round" placeholder="请输入搜索关键词"
@search="handleRefresh" @clear="handleRefresh" />
@search="handleRefresh" @clear="clear" />
</div>
</div>
</van-sticky>
</Header>
<div class="content">
<van-pull-refresh v-model="refreshing" @refresh="handleRefresh">
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset="50" @load="getList"
......@@ -85,13 +85,25 @@ const setDataList = (res) => {
finished.value = dataList.value.length >= res.data.total
refreshing.value = false
}
const handleRefresh = () => {
refreshing.value = true
page.pageNum = 0
getList()
}
const clear = (e) => {
console.log(e)
console.log(111111)
}
</script>
<style scoped lang="scss">
.header {
padding: 10px;
background-color: #ffffff;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
margin-left: 20rpx;
// background-color: #ffffff;
// box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
.tools {
......
......@@ -54,12 +54,12 @@
});
xma.xh.getMenuButtonBoundingClientRect({
success(res) {
console.log('宽度', res.width); // 宽度,单位:px
console.log('高度', res.height); // 高度,单位:px
console.log('上边界坐标', res.top); // 上边界坐标,单位:px
console.log('右边界坐标', res.right); // 右边界坐标,单位:px
console.log('下边界坐标', res.bottom); // 下边界坐标,单位:px
console.log('左边界坐标', res.left);
// console.log('宽度', res.width); // 宽度,单位:px
// console.log('高度', res.height); // 高度,单位:px
// console.log('上边界坐标', res.top); // 上边界坐标,单位:px
// console.log('右边界坐标', res.right); // 右边界坐标,单位:px
// console.log('下边界坐标', res.bottom); // 下边界坐标,单位:px
// console.log('左边界坐标', res.left);
contentHeight.value = (res.top + res.bottom) / 2 + 25 + 'px';
// contentHeight.value = res.bottom * 2 + 10 + 'rpx'; // 左边界坐标,单位:px
},
......
<template>
<Header backgroundBox="white" :showTitle="true" title="图组详情"></Header>
<!-- <van-nav-bar title="图组详情" :left-arrow="true" fixed placeholder safe-area-inset-top @click-left="router.go(-1)" /> -->
<div class="container" v-if="catalog">
<div class="info">
......
......@@ -9,7 +9,7 @@
</div>
</div>
</Header>
<van-sticky :offset-top="50">
<van-sticky :offset-top="contentHeight">
<div class="header">
<!-- <div class="tools">
<van-search v-model="catalog.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
......@@ -91,6 +91,16 @@ import dayjs from 'dayjs'
import { useInitScroll } from '@/hooks/useScroll'
useInitScroll()
const contentHeight = ref(50)
onLoad(() => {
xma.xh.getMenuButtonBoundingClientRect({
success(res) {
contentHeight.value = (res.top + res.bottom) / 2 + 25;
},
});
})
const router = useRouter()
const tabsActive = ref(0)
const refreshing = ref(false)
......
<template>
<!-- <Header backgroundBox="#f8f8f8" :show="false"></Header> -->
<Header backgroundBox="#f8f8f8" :show="false"></Header>
<div class="container" v-if="userStore.isLogin">
<div class="userinfo">
<img class="avatar" mode="aspectFill"
......@@ -46,7 +46,7 @@
</div>
</div>
<div class="content">
<van-tabs v-model:active="active" background="#f8f8f8" animated swipeable sticky>
<van-tabs v-model:active="active" background="#f8f8f8" animated swipeable sticky :offset-top="contentHeight">
<van-tab title="待发布">
<picture-list ref="waitingPublishPicture" :active="0" @total="setTotal" @refresh="handleRefreshPublishPicture" @publish="handlePublishPicture"></picture-list>
</van-tab>
......@@ -83,6 +83,15 @@ const total = reactive({
2: 0
})
const contentHeight = ref(50)
onLoad(() => {
// xma.xh.getMenuButtonBoundingClientRect({
// success(res) {
// contentHeight.value = (res.top + res.bottom) / 2 + 25;
// },
// });
})
onShow(() => {
toLogin()
})
......
<template>
<van-sticky>
<div class="header">
<Header backgroundBox="#ffffff">
<div class="tools">
<van-search v-model="queryParams.materialTitle" shape="round" placeholder="请输入搜索关键词"
@search="handleRefresh" @clear="handleRefresh" />
<van-search v-model="queryParams.materialTitle" shape="round" placeholder="请输入搜索关键词" @search="handleRefresh"
@clear="handleRefresh" />
</div>
</Header>
<van-sticky :offset-top="contentHeight">
<div class="header">
<div class="menu">
<div class="organization" @click="openOrganizationPopup">
<img src="../../static/image/prefecture-logo1.png">
......@@ -76,6 +78,16 @@ import { selectPrefecturetList } from '@/api/prefecture'
import { useInitScroll } from '@/hooks/useScroll'
useInitScroll()
const contentHeight = ref(50)
onLoad(() => {
xma.xh.getMenuButtonBoundingClientRect({
success(res) {
contentHeight.value = (res.top + res.bottom) / 2 + 25;
},
});
})
const router = useRouter()
const refreshing = ref(false)
const loading = ref(false)
......@@ -171,12 +183,8 @@ const confirmOrganizationPopup = (item) => {
}
</script>
<style lang="scss" scoped>
.header {
padding: 10px;
background-color: #ffffff;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
.tools {
.tools {
margin-left: 40rpx;
:deep(.van-search) {
flex: 1;
......@@ -184,7 +192,14 @@ const confirmOrganizationPopup = (item) => {
}
}
}
.header {
padding: 0px 10px 0;
background-color: #ffffff;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
.menu {
display: flex;
......
<template>
<Header :show="false" backgroundBox="white">
<van-nav-bar title="图组" :left-arrow="true" fixed placeholder safe-area-inset-top @click-left="router.go(-1)" />
</Header>
<div class="container">
<div class="steps-placeholder" :style="{ height: `${stepsRef?.offsetHeight}px` }">
<div ref="stepsRef" class="steps-container">
......
<template>
<Header :show="false" backgroundBox="white">
<van-nav-bar title="结果" :left-arrow="true" fixed placeholder safe-area-inset-top @click-left="router.go(-1)" />
</Header>
<div class="container">
<div class="info">
<img src="../../static/image/result-success.png">
<div class="title">提交成功</div>
<div class="desc">注:请前往“我的-待发布图组”进行图组发布</div>
</div>
<van-button type="primary" @click="router.pushTab({name:'mine'})">前往待发布图组</van-button>
<van-button type="primary" @click="router.pushTab({ name: 'mine' })">前往待发布图组</van-button>
</div>
</template>
<script setup>
const router=useRouter()
const router = useRouter()
</script>
<style lang="scss" scoped>
.container {
......@@ -26,15 +28,18 @@ const router=useRouter()
justify-content: center;
gap: 10px;
margin-top: 20vh;
.title{
.title {
font-size: 20px;
}
.desc{
.desc {
color: #9f9f9f;
font-size: 16px;
}
}
.van-button{
.van-button {
width: 150px;
}
}
......
<template>
<div class="container">
<Header backgroundBox="#ffffff">
<div class="header">
<van-search shape="round" placeholder="请输入专题关键字" />
</div>
</Header>
<div class="container">
<div class="content">
<div class="c-title">热门专题</div>
<div class="list">
......
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