kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航栏

Browse Source
This commit is contained in:
liuye
2023-08-17 10:10:38 +08:00
parent 34f318d3f8
commit 2bc9fd2121
6 changed files with 234 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/project/wuxi/AppCircle/AppCircle.vue
View File

@@ -1,30 +1,32 @@
<template>
<div class="AppCircle">
<!-- <u-navbar :is-back="true" title="邻里互助" title-color="#fff" title-width="300" title-size="28" :background="background" back-icon-color="#fff"></u-navbar> -->
<div class="header">
<div class="top">
<div class="left">
<span @click="changeTab(0)" :class="{active:currIndex === 0}">广场</span>
<span @click="changeTab(1)" :class="{active:currIndex === 1}">社区</span>
</div>
<div class="right" @click="$linkTo('./MyPostList')" hover-class="text-hover">
<span>我的贴子<img src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-top-icon.png" alt=""></span>
<i></i>
<u-navbar :is-back="false" title="邻里互助" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
<div class="header-bg">
<div class="header">
<div class="top">
<div class="left">
<span @click="changeTab(0)" :class="{active:currIndex === 0}">广场</span>
<span @click="changeTab(1)" :class="{active:currIndex === 1}">社区</span>
</div>
<div class="right" @click="$linkTo('./MyPostList')" hover-class="text-hover">
<span>我的贴子<img src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-top-icon.png" alt=""></span>
<i></i>
</div>
</div>
</div>
</div>
<div class="nav-content" v-if="topic.length">
<div class="nav">
<div
class="nav-item"
hover-class="text-hover"
v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
<image :src="item.picUrl" mode="aspectFill"/>
<h2>{{ item.title }}</h2>
</div>
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6">
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/>
<h2>更多</h2>
<div class="nav-content" v-if="topic.length">
<div class="nav">
<div
class="nav-item"
hover-class="text-hover"
v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
<image :src="item.picUrl" mode="aspectFill"/>
<h2>{{ item.title }}</h2>
</div>
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6">
<image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/>
<h2>更多</h2>
</div>
</div>
</div>
</div>
@@ -78,6 +80,7 @@
import {mapActions, mapState} from 'vuex'
export default {
customNavigation: true,
name: 'AppCircle',
appName: '邻里互助',
data() {
@@ -90,7 +93,10 @@
isFixed: false,
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
total: 0,
background: {backgroundColor: '#4181FF'}
backgroundNavbar: {
background: 'url(https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-nav-bg.png) no-repeat',
backgroundSize: 'cover',
}
}
},
@@ -275,27 +281,14 @@
.AppCircle {
// padding-top: 100px;
padding-bottom: 40px;
.header-bg {
background: url('https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-header-bg.png') center;
background-size: 100% 100%;
}
.header {
// position: fixed;
// left: 0;
// top: 0;
// z-index: 111;
width: 100%;
opacity: 1;
transition: all 0.2s ease;
.status-bar {
background: #4181FF;
}
.nav-bar {
position: relative;
color: #fff;
font-size: 32px;
font-weight: 600;
background: #4181FF;
text-align: center;
}
}
div {
@@ -318,7 +311,6 @@
padding-top: 16px;
width: 100%;
height: 192px;
background-image: linear-gradient(0deg, #F3F6F9 0%, #4181FF 100%);
margin-bottom: 230px;
}
.nav {
@@ -472,7 +464,6 @@
width: 100%;
height: 100px;
padding: 0 32px;
background: #4181FF;
.left {
display: flex;