odjbin/pupil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dengjie commit : tabbar 初始样式

Browse Source
This commit is contained in:
clay
2022-12-04 20:00:18 +08:00
parent cc9c7ec0ea
commit 424b344645
21 changed files with 731 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/index/index.vue
View File

@@ -1,45 +1,6 @@
<!-- 首页 -->
<template>
<view class="wrap">
<u-swiper :list="list" keyName="image" showTitle :autoplay="false" circular />
<view>
首页
</view>
</template>
<script>
import {apiService} from '../../service/request.js'
export default {
computed: {},
data() {
return {
list: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼，心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}
],
}
},
onLoad() {
console.log('--------------')
apiService.getCategories().then(res => {
const {message} = res.data
console.log(message)
})
},
methods: {
}
}
</script>
<style lang='scss' scoped>
.wrap {
padding: 40rpx;
}
</style>

22
pages/index/industry.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<view>创意工厂</view>
</template>
<script>
export default {
methods: {
setStor() {
uni.setStorage({
key: 'id',
data: 100,
success() {
console.log('存储成功')
}
})
}
}
}
</script>
<style>
</style>

6
pages/index/my.vue Normal file
View File

@@ -0,0 +1,6 @@
<!-- 个人中心 -->
<template>
<view class="components-theme">
我的
</view>
</template>

4
pages/index/product.vue Normal file
View File

@@ -0,0 +1,4 @@
<!-- TabBar 文章资讯 -->
<template>
<view>产品分类</view>
</template>

5
pages/index/release.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<view class="components-home">
需求发布
</view>
</template>

5
pages/index/report.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<view>
行业报告
</view>
</template>

204
pages/index/tabbar.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<view>
<index @ShowNews="ShowNews" v-if="PageCur=='index'"></index>
<report v-if="PageCur=='report'"></report>
<release v-if="PageCur=='release'"></release>
<industry v-if="PageCur=='industry'"></industry>
<product v-if="PageCur=='product'"></product>
<my v-if="PageCur=='my'"></my>
<view class="box">
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="index">
<view class='cuIcon-cu-image'>
<image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image>
<image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image>
</view>
<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
</view>
<view class="action" @click="NavChange" data-cur="report">
<view class='cuIcon-cu-image'>
<!-- <view class="cu-tag badge"> -->
<!-- 红点 -->
<!-- </view> -->
<image v-if="PageCur=='report'" src="../../static/tabBar/shop_cur.png"></image>
<image v-if="PageCur != 'report'" src="../../static/tabBar/shop.png"></image>
</view>
<view :class="PageCur=='report'?'color_main':'text-gray'">行业报告</view>
</view>
<view class="action text-gray add-action">
<u-popup :show="show" mode="bottom" @close="close" safeAreaInsetBottom
overlay-class="header-overlay">
<view class="more_box">
<!-- 需求发布 -->
<view class="more_action" @close="close" @click="NavChange" data-cur="release">
<view class='more_image'>
<image src="../../static/tabBar/index.png"></image>
</view>
<view class="img_text">需求发布</view>
</view>
<!-- 创意工厂 -->
<view class="more_action" @close="close" @click="NavChange" data-cur="industry">
<view class='more_image'>
<image src="../../static/tabBar/index.png"></image>
</view>
<view class="img_text">创意工厂</view>
</view>
</view>
<view class="more_jian"></view>
</u-popup>
<image class="logo_btn" mode="widthFix" src="../../static/logo.png" @click="show = true"></image>
</view>
<view class="action" @click="NavChange" data-cur="product">
<view class='cuIcon-cu-image'>
<!-- <view class="cu-tag badge">{{message}}</view> -->
<image v-if="PageCur=='product'" src="../../static/tabBar/order_cur.png"></image>
<image v-if="PageCur != 'product'" src="../../static/tabBar/order.png"></image>
</view>
<view :class="PageCur=='product'?'color_main':'text-gray'">产品分类</view>
</view>
<view class="action" @click="NavChange" data-cur="my">
<view class='cuIcon-cu-image'>
<image v-if="PageCur=='my'" src="../../static/tabBar/me_cur.png"></image>
<image v-if="PageCur != 'my'" src="../../static/tabBar/me.png"></image>
</view>
<view :class="PageCur=='my'?'color_main':'text-gray'">我的</view>
</view>
</view>
</view>
</view>
</template>
<script>
import index from "./index.vue"; //首页
import report from "./report.vue"; //行业报告
import release from "./release.vue"; //需求发布
import industry from "./industry.vue"; //需求发布
import product from "./product.vue"; //产品分类
import my from "./my.vue"; //我的
export default {
components: {
index,
report,
release,
industry,
product,
my
},
data() {
return {
PageCur: 'index',
// message: '0',
openId: '',
access_token: '',
tip: "我是提示",
duration: 1,
// 显示更多tabbar
show: false
};
},
methods: {
ShowNews(e) {
console.log(e)
this.PageCur = e;
},
close() {
this.show = false
},
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur;
}
}
}
</script>
<style lang="scss">
.color_main {
color: #000000;
font-weight: 900;
}
.box {
margin: 20upx 0;
}
.box view.cu-bar {
margin-top: 20upx;
}
.cu-bar {
z-index: 9999999999;
}
.logo_btn {
width: 38*2rpx;
height: 38*2rpx;
position: absolute;
z-index: 2;
border-radius: 50%;
top: -40rpx;
left: 0rpx;
right: 0;
margin: auto;
padding: 0;
}
.cu-bar.tabbar .action {
// margin-bottom: 50px;
}
.cu-bar.tabbar .action.add-action {
padding-top: 56rpx !important;
}
.more_box {
display: flex;
align-items: center;
min-height: 100upx;
justify-content: space-around;
.more_action {
.more_image {
image {
width: 50upx;
height: 50upx;
display: inline-block;
}
}
.img_text {}
}
}
.more_jian {
// width: 0px;
// height: 0px;
position: absolute;
bottom: -10px;
left: 45%;
width: 0;
height: 0;
border-top: 10px solid white;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
/deep/ .u-popup__content {
background-color: #fff;
position: relative;
width: 180px;
height: 80px;
margin: 0 auto 86px auto;
border-radius: 10px;
}
/deep/.header-overlay {}
</style>