Browse Source

自定义导航栏优化,修改

yh
yanghao 3 years ago
parent
commit
f4f62b0933
  1. 54
      App.vue
  2. 89
      components/CustomNavigator.vue
  3. 3
      components/colorui/components/cu-custom.vue
  4. 33
      pages/home/activityCenter/index.vue
  5. 382
      pages/home/index.css
  6. 39
      pages/home/index.vue
  7. 1146
      pages/life/index.vue
  8. 39
      pages/life/learnMore/index.vue
  9. 47
      pages/user/agreement/index.css
  10. 13
      pages/user/agreement/index.vue
  11. 134
      pages/user/completeData/index.css
  12. 11
      pages/user/completeData/index.vue
  13. 118
      pages/user/incomeDetail/index.css
  14. 6
      pages/user/incomeDetail/index.vue
  15. 170
      pages/user/index.css
  16. 82
      pages/user/index.vue
  17. 293
      pages/user/mine/index.css
  18. 20
      pages/user/mine/index.vue
  19. 6
      pages/user/personalData/index.vue

54
App.vue

@ -2,21 +2,17 @@
import {
VUE_APP_API_URL
} from "@/config";
import Vue from 'vue'
export default {
onLaunch: function (e) {
var that = this; //
this.setMenuHeight();
this.setAppInfo();
this.autoUpdate();
// uni.hideTabBar()
},
globalData: {
baseURL: VUE_APP_API_URL+ '/',
userInfo: null,
navHeight: 0,
navTopHeight: 0,
menuTop: 0,
menuHeight: 0,
CustomBar: 0,
isIphoneX: false,
inviterId: null,
//
@ -245,25 +241,33 @@ export default {
}
},
setMenuHeight() {
uni.getSystemInfo({
success: res => {
console.log(res,'resaaaaa')
this.globalData.navTopHeight = res.statusBarHeight;
this.globalData.CustomBar = res.statusBarHeight + 45;
this.globalData.systemInfo = res;
let model = res.model;
if (/iphone\sx/i.test(model) || /iphone/i.test(model) && /unknown/.test(model) || /iphone\s11/i.test(model) || /iphone\s12/i.test(model) || /iphone\s13/i.test(model)) {
this.globalData.isIphoneX = true;
}
}
});
let menuButtonObj = uni.getMenuButtonBoundingClientRect();
console.log(menuButtonObj,'menuButtonObj')
this.globalData.menuTop = menuButtonObj.top;
this.globalData.menuHeight = menuButtonObj.height;
this.globalData.topHeight = menuButtonObj.top + menuButtonObj.height;
this.globalData.navHeight = menuButtonObj.top;
//
async setAppInfo() {
let that = this
return new Promise((resolve, reject) => {
uni.getSystemInfo({
success: function (e) {
Vue.prototype.StatusBar = e.statusBarHeight
// #ifdef H5
Vue.prototype.CustomBar = e.statusBarHeight + 45
// #endif
// #ifdef APP-PLUS
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45
}
// #endif
// #ifdef MP-WEIXIN
let custom = wx.getMenuButtonBoundingClientRect()
Vue.prototype.Custom = custom
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight
// #endif
},
})
})
},
getInfo() {

89
components/CustomNavigator.vue

@ -1,89 +0,0 @@
<template>
<view class="pageTitle-box" :class="isFixed ? 'showPageTitle' : ''"
:style="{'padding-top':menuTop + 'px',height: menuHeight+ 'px'}">
<view class="top-logo acea-row row-center"
:style="'height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">
{{title}}
</view>
</view>
</template>
<script>
const app = getApp();
export default {
props: {
isFixed: {
type: Boolean,
default: false
},
title: {
type: String ,
default: ''
}
},
data() {
return {
menuHeight: app.globalData.menuHeight,
menuTop: app.globalData.menuTop,
};
},
methods:{
}
}
</script>
<style lang="less">
.pageTitle-box {
width: 100%;
position: fixed;
top: 0;
z-index: 99;
color: #fff;
transition: all .5s;
}
.showPageTitle {
background: #fff;
color: #000000 !important;
opacity: 1;
font-weight: normal;
.top-logo {
color: #000;
background-color: #fff;
}
}
.page-top-box {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background: #fff;
padding: 0 30rpx 20rpx;
box-shadow: 0px -6px 20px rgba(0, 0, 0, 0.11);
.top-box {
.top-box-l {
font-size: 32rpx;
color: #000;
font-weight: 500;
image {
width: 26rpx;
height: 30rpx;
display: block;
margin-right: 10rpx;
}
}
}
}
.top-logo {
position: absolute;
width: 100%;
color: #fff;
font-weight: 600;
font-size: 32rpx;
transition: all .5s cubic-bezier(.25, .5, .5, .9);
}
</style>

3
components/colorui/components/cu-custom.vue

@ -59,6 +59,9 @@
</script>
<style>
@import url("../icon.css");
@import url("../animation.css");
@import url("../main.css");
.fixed{
position: fixed;
top:0;

33
pages/home/activityCenter/index.vue

@ -1,10 +1,14 @@
<template>
<view class="activityCenter-page">
<image src="https://download.cyjyyjy.com/center-img.png" class="top-bg"></image>
<view class="page-title"
:style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">
<image src="../../../static/images/back.png" @click="backClick"></image>
活动中心</view>
<view class="head_box">
<cu-custom :isBack="true" :bgImage="'https://download.cyjyyjy.com/center-img.png'">
<block slot="backText">
<image src="../../../static/images/back.png" @click="backClick" class="back-icon"></image>
<text class="nav-title shopro-selector-rect">活动中心</text>
</block>
</cu-custom>
</view>
<view class="activity-box">
<view class="activity-list acea-row" v-for="(item,index) in activity" :key="index" @tap="toActiveDetail"
:data-id="item.id">
@ -38,14 +42,9 @@
import {
getIndexData
} from "@/api/home";
const app = getApp();
export default {
data() {
return {
menuHeight: app.globalData.menuHeight,
navHeight: app.globalData.navHeight,
menuTop: app.globalData.menuTop,
navTopHeight: app.globalData.navTopHeight,
activity: [], //
isFixed: false,
};
@ -96,6 +95,22 @@
background: #fff;
position: relative;
}
.nav-title {
width: calc(100% - 36rpx);
text-align: center;
font-size: 32rpx;
color: #fff;
line-height: 40px;
display: inline-block;
}
.back-icon{
width: 36rpx;
height: 36rpx;
position: absolute;
top: 50%;
left: 36rpx;
}
.top-bg {
width: 100%;

382
pages/home/index.css

@ -1,382 +0,0 @@
.home-page{
padding-bottom: 190rpx;
}
.page-top-box{
width: 100%;
height: 598rpx;
position: relative;
}
.page-title{
width: 100%;
color: #fff;
text-align: center;
position: relative;
}
.top-bg{
width: 100%;
height: 598rpx;
position: absolute;
}
.top-box-content{
position: relative;
}
.search-box{
color: #fff;
font-size: 32rpx;
padding: 0 60rpx 0 40rpx;
}
.localtion-box image{
width: 26rpx;
height: 31rpx;
margin-right: 10rpx;
}
.search{
width: 448rpx;
height: 68rpx;
font-size: 28rpx;
padding: 16rpx 20rpx;
background: rgba(255, 255, 255, 0.38);
border-radius: 8rpx;
}
.search image{
width: 35rpx;
height: 35rpx;
margin-right: 16rpx;
}
.message-icon{
width: 36rpx;
height: 36rpx;
}
.home-menu-box{
width: 670rpx;
height: 286rpx;
background: #FFFFFF;
box-shadow: 0px 6rpx 20rpx rgba(151, 69, 34, 0.28);
border-radius: 12rpx;
margin: 38rpx auto 0;
padding: 42rpx;
}
.menu-list{
color: #1D1D1D;
font-size: 24rpx;
}
.menu-item{
width: 20%;
/* margin-right:16rpx; */
margin-bottom: 34rpx;
}
.menu-item:nth-child(5n){
margin-right: 0;
}
.menu-item image{
width: 52rpx;
height: 52rpx;
}
.investment-box{
width: 100%;
padding-left: 40rpx;
}
.investment-title-box{
width: 100%;
padding-right: 40rpx;
}
.fz32{
font-size: 32rpx;
color: #1D1D1D;
}
.hot{
width: 26rpx;
height: 26rpx;
text-align: center;
line-height: 26rpx;
background: linear-gradient(147deg, #FB7E4A 0%, #FF5100 100%);
border-radius: 8rpx 0px 8rpx 0px;
font-size: 18rpx;
color: #fff;
margin-left: 16rpx;
}
.more{
font-size: 24rpx;
color: #999999;
}
.more image{
width: 9rpx;
height: 16rpx;
margin-left: 12rpx;
margin-top: 2rpx;
}
.investement-list{
width: 100%;
margin-top: 34rpx;
}
.scroll-view_H{
white-space: nowrap;
width: 100%;
}
.investment-item{
display: inline-block;
width: 324rpx;
height: 408rpx;
margin-right:20rpx;
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
border-radius: 8rpx;
position: relative;
}
.investment-item .item-bg{
width: 324rpx;
height: 408rpx;
position: absolute;
}
.tips-box{
position: relative;
top: 20rpx;
}
.tips-item{
padding: 6rpx 10rpx;
line-height: 28rpx;
font-size: 20rpx;
color: #fff;
background: rgba(255, 81, 0, 0.63);
border-radius: 8rpx;
margin-right: 14rpx;
}
.bg2{
background: rgba(255, 170, 0, 0.63);
}
.item-info-box{
width: 300rpx;
height: 102rpx;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.2);
border-radius: 8rpx;
position: absolute;
bottom: 18rpx;
left: 50%;
margin-left: -150rpx;
font-size: 22rpx;
color: #404040;
}
.item-info-box image{
width: 14rpx;
height: 17rpx;
margin: 0 12rpx 0 12rpx;
}
.welfare-box{
width: 100%;
padding-left: 40rpx;
margin-top: 52rpx;
}
.welfare-title{
font-size: 32rpx;
color: #1D1D1D;
margin-bottom: 38rpx;
}
.welfare-list-box{
width: 100%;
}
.welfare-item{
display: inline-block;
margin-right: 6rpx;
padding: 12rpx;
}
.item-box{
width: 650rpx;
height: 248rpx;
background: #FFFFFF;
box-shadow: 0px 0rpx 12rpx rgba(0, 0, 0, 0.16);
padding: 22rpx 16rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
position: relative;
}
.buy-btn{
width: 144rpx;
height: 52rpx;
text-align: center;
line-height: 52rpx;
background: linear-gradient(315deg, #FB966C 0%, #FFC2AA 100%);
border-radius: 12rpx;
color: #fff;
font-size: 24rpx;
position: absolute;
bottom: 30rpx;
right: 30rpx;
}
.item-box image{
width: 198rpx;
height: 204rpx;
margin-right: 12rpx;
}
.welfare-info-box{
width: 394rpx;
}
.w-name{
width: 390rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #1D1D1D;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.w-address{
font-size: 24rpx;
line-height: 34rpx;
color: #707070;
margin: 8rpx 0 14rpx;
}
.w-price{
font-size: 28rpx;
font-weight: bold;
line-height: 40rpx;
color: #FF7942;
}
.w-oldPrice{
font-size: 20rpx;
color: #BCBCBC;
text-decoration: line-through;
}
.demandhall-box{
width: 100%;
padding: 40rpx;
}
.tabs-box{
padding-left: 30rpx;
padding-right: 12rpx;
}
.tab-item{
font-size: 28rpx;
color: #9C9C9C;
padding-bottom: 8rpx;
}
.tab-item-a{
color: #1D1D1D;
border-bottom: 4rpx solid #FF7942;
}
.list-box{
width: 100%;
margin-top: 36rpx;
}
.item{
width: 670rpx;
background: #FFFFFF;
box-shadow: 0px 6rpx 12rpx rgba(190, 190, 190, 0.3);
border-radius: 12rpx;
padding: 28rpx 20rpx 18rpx;
margin-bottom: 32rpx;
}
.item-top{
padding-bottom: 24rpx;
position: relative;
}
.item-top .buy-btn{
right: 0;
}
.project-name{
width: 400rpx;
font-size: 32rpx;
font-weight: 500;
line-height: 58rpx;
color: #1D1D1D;
}
.tags-box2{
margin-top: 12rpx;
}
.price{
color: #FF5100;
font-size: 28rpx;
position: absolute;
top: 0;
right: 0rpx;
}
.tag{
color: #74BDF7;
font-size: 20rpx;
line-height: 28rpx;
margin: 12rpx 0 20rpx;
}
.desc{
font-size: 24rpx;
line-height: 34rpx;
color: #666666;
margin-top: 8rpx;
}
.company-box{
padding-top: 12rpx;
position: relative;
border-top: 2rpx solid #ECECEC;
}
.company-box image{
width: 128rpx;
height: 128rpx;
}
.fz28{
font-size: 28rpx;
line-height: 40rpx;
color: #1D1D1D;
}
.fz24{
font-size: 24rpx;
line-height: 34rpx;
}
.fz20{
font-size: 20rpx;
line-height: 28rpx;
}
.company-info{
margin-left: 12rpx;
}
.item-top .buy-btn{
top: 0;
}
.into-btn{
font-size: 20rpx;
color: #FF5100;
width: 144rpx;
height: 40rpx;
border: 1rpx solid #FF5100;
opacity: 1;
border-radius: 20rpx;
position: absolute;
top: 18rpx;
right: 0rpx;
}
.into-btn image{
width: 21rpx;
height: 19rpx;
margin-right: 6rpx;
}
.tag-item{
width: 112rpx;
height: 36rpx;
line-height: 34rpx;
text-align: center;
border: 1rpx solid #FFAA00;
color: #FFAA00;
border-radius: 4rpx;
margin-right: 8rpx;
}
.bgG{
border: 1rpx solid #3A9EFA;
color: #3A9EFA;
}
.bgO{
border: 1rpx solid #FC9367;
color: #FC9367;
}
.to-demandhall{
font-size: 28rpx;
color: #A7A7A7;
margin-bottom: 28rpx;
}
.to-demandhall image{
width: 13rpx;
height: 23rpx;
margin-left: 15rpx;
}

39
pages/home/index.vue

@ -1,17 +1,15 @@
<template>
<view class="productSort">
<!-- 顶部主页 -->
<skeleton v-if="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
<!-- <view class="pageTitle-box" :class="isFixed ? 'showPageTitle' : ''"
:style="{'padding-top':navTopHeight + 'px',height:navHeight*2+ 'px'}">
<view class="top-logo acea-row row-center"
:style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">禅易云生态
</view>
</view> -->
<CustomNav :title="title" :isFixed="isFixed"></CustomNav>
<!-- 顶部主页 -->
<view class="main-box skeleton-rect">
<view class="back-bg">
<image src="https://download.cyjyyjy.com/life-bg.png" mode=""></image>
<image src="https://download.cyjyyjy.com/life-bg.png" class="top-bg"></image>
<view class="head_box">
<cu-custom :isBack="false" :bgColor="bgColor">
<block slot="content">
<text class="nav-title shopro-selector-rect" :class="isFixed ? 'colBlack' : '' ">禅易云生态</text>
</block>
</cu-custom>
</view>
<view class="details-btn skeleton-rect" @click="tolearnMore">了解详情</view>
</view>
@ -186,15 +184,13 @@
mapGetters
} from 'vuex'
import CustomNav from '@/components/CustomNavigator.vue'
import vSwiper from '@/components/vSwiper.vue'
import skeleton from '@/components/quick-skeleton/quick-skeleton'
const app = getApp();
export default {
components: {
vSwiper,
skeleton,
CustomNav
skeleton
},
computed: mapGetters(['userInfo']),
props: {},
@ -206,6 +202,7 @@
search: "",
lock: false,
currentTabIndex: 0,
bgColor: 'transparent',
flowList: [],
isFixed: false,
loadStatus: 'loadmore',
@ -268,8 +265,10 @@
onPageScroll(e) {
if (e.scrollTop > 60) {
this.isFixed = true;
this.bgColor = '#ffffff'
} else {
this.isFixed = false;
this.bgColor = 'transprant'
};
},
methods: {
@ -390,10 +389,22 @@
};
</script>
<style lang="less" scoped>
.nav-title {
width: 100%;
text-align: center;
display: inline-block;
font-size: 32rpx;
color: #fff;
line-height: 40px;
}
.colBlack{
color: #000;
}
.see-more{
font-size: 28rpx;
color: #333333;
text-align: center;
margin-top: 30rpx;
}
.productSort {
background: #EEEEEE !important;
@ -476,7 +487,7 @@
position: relative;
}
.back-bg image {
.top-bg{
width: 100%;
height: 522rpx;
}

1146
pages/life/index.vue

File diff suppressed because it is too large Load Diff

39
pages/life/learnMore/index.vue

@ -1,6 +1,10 @@
<template>
<view class="more-page">
<view class="page-title acea-row row-middle row-center" :style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'"><image src="../../../static/images/back.png" mode="" @tap="toBackHome"></image>详情</view>
<view class="head_box">
<cu-custom :isBack="true" :bgColor="'transparent'">
<block slot="content">详情</block>
</cu-custom>
</view>
<swiper class="swiper-box" autoplay="true" indicator-dots='true' indicator-color='#B17815'
indicator-active-color='#FFB93E'>
<swiper-item>
@ -20,12 +24,10 @@
</template>
<script>
const app = getApp();
export default {
data() {
return {
menuHeight: app.globalData.menuHeight,
menuTop: app.globalData.menuTop,
};
},
methods:{
@ -43,17 +45,24 @@
height: 100%;
position: relative;
}
.page-title{
width: 100%;
color: #fff;
position: relative;
z-index: 999;
image{
width: 30rpx;
height: 35rpx;
position: absolute;
left: 40rpx;
}
.action,.content{
color: #fff;
}
.nav-title {
width: calc(100% - 36rpx);
text-align: center;
font-size: 32rpx;
color: #fff;
line-height: 40px;
display: inline-block;
}
.back-icon{
width: 36rpx;
height: 36rpx;
position: absolute;
top: 50%;
left: 36rpx;
}
.swiper-box {

47
pages/user/agreement/index.css

@ -1,47 +0,0 @@
/* pages/user/agreement/index.wxss */
.agreement-box{
width: 100%;
position: relative;
}
.agreement-box image{
width: 100%;
display: block;
}
.agreement-box .img{
height: 2848rpx;
}
.agreement-box .img1{
height: 924rpx;
}
.agreement-box .img2{
height: 834rpx;
}
.agreement-box .img3{
height: 1090rpx;
}
.btn-box{
width: 440rpx !important;
height: 142rpx !important;
padding: 0 !important;
position: absolute;
top: 658rpx;
left: 50%;
margin-left: -220rpx !important;
background: none !important;
}
.pay-box{
width: 100%;
min-height: 100vh;
}
.pay-box image{
width: 100%;
display: block;
}
.pay-box .img1{
height: 609rpx;
}
.pay-box .img2{
height: 1235rpx;
}

13
pages/user/agreement/index.vue

@ -1,9 +1,9 @@
<template>
<!--pages/user/agreement/index.wxml-->
<view>
<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage">
<image src="/static/images/back.png" mode></image>
</view>
<cu-custom :bgColor="'transparent'" :isBack="true">
<block slot="backText">返回</block>
</cu-custom>
<view class="pay-box" v-if="userInfo.nickname != '' && userInfo.isVip == 1">
<image src="https://download.cyjyyjy.com/pay1.png" class="img1"></image>
<image src="https://download.cyjyyjy.com/pay2.png" class="img2"></image>
@ -30,7 +30,7 @@
export default {
data() {
return {
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10,
CustomBar: this.CustomBar,
userInfo: null,
canIUse: uni.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
@ -253,6 +253,11 @@
.pay-box {
width: 100%;
min-height: 100vh;
position: absolute;
top: 0;
}
.action{
color: #fff;
}
.pay-box image {

134
pages/user/completeData/index.css

@ -1,134 +0,0 @@
/* pages/user/completeData/index.wxss */
page{
width: 100%;
height: 100vh;
}
.page-box{
width: 100%;
height: 100%;
position: relative;
}
.bg-img-box{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.bg-img-box image{
width: 100%;
height: 100%;
}
.mail-box{
width: 687rpx;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.mail-box .mail-img-box{
position: absolute;
}
.mail-top,.mail-bottom{
z-index: 3;
}
.mail-top{
z-index: 4;
top: 10rpx;
/* top: 314rpx; */
}
.top-move{
animation: topMove 2s ease;
animation-fill-mode: forwards;
}
.mail-top image{
width: 687rpx;
height: 445rpx;
}
.mail-center image{
width: 684rpx;
height: 648rpx;
transform: scale(0.99);
}
.mail-center{
top: 316rpx;
}
.mail-bottom image{
width: 687rpx;
height: 432rpx;
}
.mail-bottom{
top: 616rpx;
}
.btm-move{
animation: btmMove 1.5s ease;
animation-fill-mode: forwards;
}
@keyframes topMove{
0% {
top: 10rpx;
opacity: 0.8;
}
100% {
top: 314rpx;
opacity: 1;
}
}
@keyframes btmMove{
0% {
top: 616rpx;
opacity: 0.2;
}
100% {
top: 532rpx;
opacity: 1;
}
}
.tips{
width: 100%;
color:#EFDACA;
font-size: 40rpx;
line-height: 56rpx;
position: absolute;
top: 1000rpx;
text-align: center;
}
.word-move{
animation: wordMove 1s ease;
animation-fill-mode: forwards;
}
@keyframes wordMove{
0%{
left: -100%;
}
100%{
left: 0;
}
}
.pay-btn{
width: 686rpx;
height: 82rpx;
position: absolute;
top: 1100rpx;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%);
border-radius: 62rpx;
text-align: center;
line-height: 82rpx;
color: #946F46;
}
.tip{
width: 100%;
text-align: center;
color: #EFDACA;
font-size: 32rpx;
line-height: 44rpx;
position: absolute;
top: 1200rpx;
left: 50%;
transform: translateX(-50%);
}

11
pages/user/completeData/index.vue

@ -1,9 +1,9 @@
<template>
<!--pages/user/completeData/index.wxml-->
<view class="page-box">
<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage">
<image src="/static/images/back.png" mode></image>
</view>
<cu-custom :bgColor="'transparent'" :isBack="true">
<block slot="backText">返回</block>
</cu-custom>
<view class="bg-img-box">
<image src="https://download.cyjyyjy.com/personalPage-bg.png"></image>
</view>
@ -33,7 +33,7 @@
data() {
return {
showMove: false,
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10
CustomBar: this.CustomBar
};
},
@ -119,6 +119,9 @@
width: 100%;
height: 100vh;
}
.action{
color: #fff;
}
.page-box {
width: 100%;

118
pages/user/incomeDetail/index.css

@ -1,118 +0,0 @@
/* pages/user/incomeDetail/index.wxss */
page{
background: #212226;
}
.detail-page{
width: 100%;
position: relative;
}
.top-bg{
width: 100%;
height: 450rpx;
}
.top-bg image{
width: 100%;
height: 450rpx;
position: absolute;
}
.income-box{
width: 100%;
min-height: 200rpx;
position: relative;
top: 140rpx;
left: 0rpx;
}
.income-box image{
width: 670rpx;
height: 208rpx;
position: absolute;
top: 0;
left: 0;
}
.income-l{
width: 50%;
height: 100%;
position: absolute;
left: 0;
z-index: 2;
color: #946F46;
padding: 30rpx 0 20rpx;
}
.t{
color:#E4C6B0;
}
.num{
color: #E4C6B0;
font-size: 36rpx;
font-weight: bold;
margin: 20rpx 0;
}
.btn{
width: 124rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
background: #EFDACA;
border-radius: 62rpx;
font-size: 26rpx;
}
.income-r{
height: auto;
left: 50%;
}
.invitation-list-box{
position: relative;
z-index: 99;
top: -80rpx;
}
.invi-title{
padding-left: 40rpx;
font-size: 32rpx;
color: #EFDACA;
line-height: 40rpx;
margin-bottom: 12rpx;
}
.list-box{
width: 100%;
min-height: 200rpx;
background: #212226;
border-radius: 40rpx 40rpx 0px 0px;
padding-top: 36rpx;
}
.rank-list-box{
width: 100%;
max-height: 780rpx;
padding: 0 40rpx;
font-size: 24rpx;
overflow-y: scroll;
color: #E4C6B0;
}
.rank-item .num{
min-width: 38rpx;
height: 32rpx;
color: #E4C6B0;
font-size: 26rpx;
}
.item-right-l image{
width: 74rpx;
height: 74rpx;
border-radius: 50%;
margin-right: 16rpx;
}
.item-right-l{
width: 70%;
}
.item-right-l .name{
font-size: 24rpx;
color: #fff;
width: 80%;
line-height: 34rpx;
margin-top: 6rpx;
}
.item-right{
width: 618rpx;
height: 132rpx;
border-bottom: 1px solid #6B6158;
}

6
pages/user/incomeDetail/index.vue

@ -1,7 +1,7 @@
<template>
<!--pages/user/incomeDetail/index.wxml-->
<view class="detail-page">
<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage">
<view class="back-btn" :style="'top:' + CustomBar + 'rpx'" @tap="backPage">
<image src="/static/images/back.png" mode></image>
</view>
<view class="top-bg">
@ -49,7 +49,7 @@ const app = getApp();
export default {
data() {
return {
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10,
CustomBar: this.CustomBar,
pageData: {}
};
},
@ -173,7 +173,7 @@ page{
}
.list-box{
width: 100%;
min-height: 200rpx;
min-height: 80vh;
background: #212226;
border-radius: 40rpx 40rpx 0px 0px;
padding-top: 36rpx;

170
pages/user/index.css

@ -1,170 +0,0 @@
.home-page{
min-height: 100vh;
padding-bottom: 130rpx;
background: #F3F3F3;
}
.page-top-box{
width: 100%;
height: 575rpx;
position: relative;
}
.page-title{
width: 100%;
color: #fff;
text-align: center;
position: relative;
}
.top-bg{
width: 100%;
height: 598rpx;
position: absolute;
}
.top-box-content{
position: relative;
padding: 0 40rpx;
color: #fff;
}
.top-set-box{
}
.top-set-box .setIcon{
width: 32rpx;
height: 29rpx;
}
.top-set-box .message{
width: 38rpx;
height: 29rpx;
margin-left: 34rpx;
}
.set-box-l{
width: 160rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
background: #FFA583;
border-radius: 22rpx;
font-size: 24rpx;
}
.userInfo-box{
margin-top: 34rpx;
}
.userInfo-box .header-img{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 12rpx;
}
.userInfo-r .name{
font-size: 36rpx;
line-height: 50rpx;
}
.level{
padding: 2rpx 20rpx;
font-size: 24rpx;
background: #FEC313;
text-align: center;
border-radius: 25px;
}
.img-tags {
margin-top: 14rpx;
}
.userInfo-r image{
width: 132rpx;
height: 48rpx;
}
.userInfo-r .tyg-tag{
width: 188rpx;
height: 44rpx;
margin-left: 22rpx;
}
.my-reminds-box {
margin-top: 20rpx;
}
.remind-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 28rpx;
}
.count{
font-size: 36rpx;
}
.to-tyg-box{
text-align: center;
margin-top: 24rpx;
}
.to-tyg-box image{
width: 670rpx;
height: 114rpx;
}
.menu-list-box{
width: 100%;
padding: 40rpx;
}
.needs-menu-list,.resources-menu-list,.searver-menu-list{
width: 100%;
background: #fff;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.07);
border-radius: 12rpx;
margin-bottom: 32rpx;
}
.menu-list{
width: 100%;
padding: 40rpx 22rpx 22rpx;
}
.menu-item{
/* width: 100%; */
}
.title-box{
width: 100%;
padding: 16rpx 20rpx;
border-bottom: 1px solid #F0F0F0;
font-size: 28rpx;
color: #303030;
}
.seemore{
font-size: 24rpx;
color: #BFBFBF;
}
.seemore image{
width: 12rpx;
height: 22rpx;
margin-left: 10rpx;
}
.menu-item{
width: 25%;
margin-bottom: 32rpx;
color: #4A4A4A;
font-size: 24rpx;
line-height: 34rpx;
}
.menu-item image{
width: 48rpx;
height: 48rpx;
margin-bottom: 14rpx;
}
.torelease-img {
position: relative;
width: 100%;
height: 90rpx;
}
.torelease-img image{
width: 630rpx;
height: 62rpx;
position: absolute;
left: 20rpx;
}
.to-btn{
width: 118rpx;
height: 34rpx;
line-height: 34rpx;
text-align: center;
font-size: 20rpx;
color: #ED7632;
background: #FFFFFF;
border-radius: 20rpx;
position: absolute;
right: 44rpx;
top: 14rpx;
}

82
pages/user/index.vue

@ -2,18 +2,20 @@
<view class="home-page">
<view class="page-top-box">
<image src="https://download.cyjyyjy.com/top-bg.png" class="top-bg"></image>
<!-- <view class="page-title" :style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'">禅易云生态</view> -->
<CustomNav :title="'禅易云生态'" :isFixed="isFixed"></CustomNav>
<view class="top-box-content" :style="'top: '+ (menuTop) + 'px;' + 'padding-top:4px;'">
<view class="top-set-box acea-row row-between row-middle">
<view class="set-box-l" v-if="authType == 1 || authType == 2" @click="toAuthInfo">{{authType == 1 ? '企业' : '个人'}}中心</view>
<view v-else></view>
<view class="set-box-r acea-row">
<!-- <image src="../../images/user/set-icon.png" class="setIcon"></image> -->
<!-- <image src="../../images/user/message-icon.png" class="message"></image> -->
</view>
</view>
<view class="head_box">
<cu-custom :isBack="true" :bgColor="bgColor">
<block slot="backText">
<view class="set-box-l"
v-if="authType == 1 || authType == 2"
@click="toAuthInfo">{{authType == 1 ? '企业' : '个人'}}中心
</view>
</block>
<block slot="content">
<text class="nav-title shopro-selector-rect" :class="isFixed ? 'isBlack' : ''">禅易云生态</text>
</block>
</cu-custom>
</view>
<view class="top-box-content">
<view class="userInfo-box acea-row row-middle">
<image :src="userInfo.avatar || '/static/images/user/header.png'" class="header-img"></image>
<view class="userInfo-r">
@ -53,7 +55,7 @@
</view>
</view>
</view>
<view style="padding: 58rpx 40rpx 0; border-radius: 12rpx; overflow: hidden;"
<view style="padding: 0rpx 40rpx 0; border-radius: 12rpx; overflow: hidden;"
v-if="(userInfo.mpOpenId == 0 || !userInfo.mpOpenId) && (scene == 1047 || scene == 1001 || scene == 1011)">
<official-account></official-account>
</view>
@ -222,19 +224,13 @@
</template>
<script>
// pages/life/index.js
const app = getApp();
import CustomNav from '@/components/CustomNavigator.vue'
import tabbar from "../../tabbarComponent/tabbar";
export default {
data() {
return {
tabbar: {},
userInfo: {},
navTopHeight: app.globalData.navTopHeight,
menuHeight: app.globalData.menuHeight,
menuTop: app.globalData.menuTop,
CustomBar: this.CustomBar,
demandCounts: 0,
supplyCounts: 0,
authStatus: 0,
@ -243,18 +239,20 @@ export default {
currentTabIndex: 4,
scene: app.globalData.scene,
isFixed: false,
bgColor: 'transprant'
};
},
components: {
tabbar,
CustomNav
},
props: {},
onPageScroll(e) {
if (e.scrollTop > 60) {
this.isFixed = true;
this.isFixed = true
this.bgColor = "#ffffff"
} else {
this.isFixed = false;
this.isFixed = false
this.bgColor = "transprant"
};
},
/**
@ -448,11 +446,14 @@ export default {
min-height: 100vh;
padding-bottom: 130rpx;
background: #F3F3F3;
}
.page-top-box{
width: 100%;
// height: 575rpx;
position: relative;
.page-top-box{
width: 100%;
position: relative;
height: 560rpx;
}
.cuIcon-back{
display: none;
}
}
.page-title{
width: 100%;
@ -460,9 +461,20 @@ export default {
text-align: center;
position: relative;
}
.nav-title {
width: 100%;
text-align: center;
font-size: 32rpx;
color: #fff;
line-height: 40px;
display: inline-block;
}
.isBlack{
color: #000;
}
.top-bg{
width: 100%;
height: 598rpx;
height: 568rpx;
position: absolute;
}
.top-box-content{
@ -470,9 +482,7 @@ export default {
padding: 0 40rpx;
color: #fff;
z-index: 999;
}
.top-set-box{
top: 20rpx;
}
.top-set-box .setIcon{
width: 32rpx;
@ -491,9 +501,11 @@ export default {
background: #FFA583;
border-radius: 22rpx;
font-size: 24rpx;
color: #fff;
margin-top: 16rpx;
}
.userInfo-box{
margin-top: 60rpx;
// margin-top: 60rpx;
}
.userInfo-box .header-img{
width: 120rpx;
@ -561,7 +573,7 @@ export default {
}
.menu-list-box{
width: 100%;
padding: 40rpx;
padding: 0 40rpx 40rpx;
}
.needs-menu-list,.resources-menu-list,.searver-menu-list{
width: 100%;

293
pages/user/mine/index.css

@ -1,293 +0,0 @@
/* pages/user/index.wxss */
page{
background: #212226;
}
image{
width: 100%;
height: 100%;
}
.user-index-box{
min-height: 100vh;
color: #EFDACA;
position: relative;
}
.user-index-top{
width: 100%;
height: 1020rpx;
position: relative;
}
.user-index-top .top-bg{
position: absolute;
top: 0;
left: 0;
}
.user-info-box{
position: absolute;
top: 112rpx;
left: 40rpx;
z-index: 2;
}
.header-img{
width: 134rpx;
height: 134rpx;
margin-right: 34rpx;
}
.header-img image{
width: 134rpx;
height: 134rpx;
border-radius: 50%;
}
.user-info{
width: 450rpx;
}
.user-title{
width: 242rpx;
height: 56rpx;
}
.user-title image{
width: 242rpx;
height: 56rpx;
}
.menu-box{
width: 670rpx;
height: 244rpx;
border: 2px solid #EFDACA;
border-radius: 16rpx;
position: absolute;
top: 290rpx;
left: 40rpx;
padding: 20rpx 0 16rpx 16rpx;
}
.menu-title-box{
font-size: 32rpx;
line-height: 44rpx;
font-weight: bold;
}
.fz20{
font-size: 20rpx;
font-weight: normal;
}
.see-more image{
width: 10rpx;
height: 18rpx;
display: block;
margin-left: 10rpx;
}
.scroll-view_H{
white-space: nowrap;
width: 100%;
}
.menu-list{
margin-top: 36rpx;
}
.menu-item{
display: inline-block;
text-align: center;
margin-right: 30rpx;
}
.menu-item image{
width: 70rpx;
height: 70rpx;
display: inline-block;
margin-bottom: 6rpx;
}
.myIncome-box{
position: absolute;
top: 576rpx;
left: 40rpx;
}
.income-box{
width: 670rpx;
height: 208rpx;
border-radius: 12rpx;
margin-top: 10rpx;
position: relative;
}
.income-box image{
width: 670rpx;
height: 208rpx;
position: absolute;
top: 0;
left: 0;
}
.income-l{
width: 50%;
height: 100%;
position: absolute;
left: 0;
z-index: 2;
color: #946F46;
padding: 30rpx 0 20rpx;
}
.num{
color: #363636;
font-size: 36rpx;
font-weight: bold;
}
.btn{
width: 124rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
background: #EFDACA;
border-radius: 62rpx;
font-size: 26rpx;
}
.income-r{
left: 50%;
}
.invitation-list-box{
position: relative;
z-index: 99;
top: -140rpx;
}
.invi-title{
padding-left: 40rpx;
font-size: 32rpx;
color: #EFDACA;
line-height: 40rpx;
margin-bottom: 12rpx;
}
.list-box{
width: 100%;
background: #212226;
border-radius: 40rpx 40rpx 0px 0px;
padding-top: 36rpx;
}
.medal-box{
}
.medal{
width: 224rpx;
height: 336rpx;
font-size: 20rpx;
color: #946F46;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
text-align: center;
line-height: 38rpx;
}
.medal .medal-bg{
width: 224rpx;
height: 336rpx;
position: absolute;
}
.medal-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 22;
}
.user-header{
width: 86rpx;
height: 86rpx;
border-radius: 50%;
overflow: hidden;
position: absolute;
left: 50%;
top: -43rpx;
transform: translateX(-50%);
}
.medal-content .user-name{
color: #363636;
font-size: 24rpx;
line-height: 34rpx;
margin-bottom: 16rpx;
margin-top: 56rpx;
}
.income-money{
font-size: 28rpx;
color: #363636;
font-weight: bold;
margin-top: 16rpx;
}
.medal-icon{
width: 136rpx;
height: 136rpx;
position: absolute;
right: -68rpx;
bottom: -10rpx;
}
.medal1{
margin: 0 22rpx;
z-index: 99;
}
.medal2,.medal3{
width: 202rpx;
height: 303rpx;
margin-top: 80rpx;
}
.medal3{
margin-top: 100rpx;
}
.medal2 .medal-icon{
width: 112rpx;
height: 112rpx;
bottom: -20rpx;
right: -20rpx;
}
.medal2 .medal-bg,.medal3 .medal-bg{
width: 202rpx;
height: 303rpx;
}
.medal3 .medal-icon{
width: 100rpx;
height: 100rpx;
right: -20rpx;
}
.rank-list-box{
width: 100%;
max-height: 780rpx;
padding: 0 40rpx;
font-size: 24rpx;
overflow-y: scroll;
}
.rank-item .num{
min-width: 50rpx;
color: #E4C6B0;
}
.item-right-l image{
width: 74rpx;
height: 74rpx;
border-radius: 50%;
margin-right: 16rpx;
}
.item-right-l{
width: 70%;
}
.item-right-l .name{
font-size: 24rpx;
color: #fff;
width: 80%;
}
.item-right{
width: 618rpx;
height: 132rpx;
border-bottom: 1px solid #6B6158;
}
.item-right-r{
text-align: right;
}
.share-btn{
width: 334rpx !important;
height: 132rpx !important;
padding: 0 !important;
margin: 40rpx auto !important;
background: transparent !important;
position: fixed;
bottom: 0rpx;
left: 50%;
margin-left: -162rpx !important;
z-index: 999;
}
.share-btn image{
width: 334rpx;
height: 132rpx;
display: inline-block;
}

20
pages/user/mine/index.vue

@ -3,8 +3,10 @@
<view class="user-index-box">
<view class="user-index-top">
<image src="https://download.cyjyyjy.com/userIndex-top-bg.png" class="top-bg"></image>
<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backUserIndex">
<image src="/static/images/back.png" mode></image>
<view class="head_box">
<cu-custom bgColor="transparent" :isBack="true">
<block slot="backText">返回</block>
</cu-custom>
</view>
<view class="user-info-box acea-row">
<view class="header-img">
@ -135,7 +137,7 @@
export default {
data() {
return {
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10,
CustomBar: this.CustomBar,
userInfo: {},
pageData: {},
rankList: [],
@ -168,7 +170,6 @@
icon: "https://download.cyjyyjy.com/menu9.png"
}],
shareFlag: false,
CustomBar: app.globalData.CustomBar
};
},
@ -272,7 +273,7 @@
}
};
</script>
<style>
<style lang="less">
/* pages/user/index.wxss */
page {
background: #212226;
@ -282,6 +283,15 @@
width: 100%;
height: 100%;
}
.backIcon{
width: 36rpx;
margin-left: 36rpx;
line-height: 40rpx;
image{
width: 36rpx;
height: 36rpx;
}
}
.user-index-box {
min-height: 100vh;

6
pages/user/personalData/index.vue

@ -1,8 +1,8 @@
<template>
<!--pages/user/personalData/index.wxml-->
<view class="personal-index">
<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage">
<image src="/static/images/back.png" mode></image>
<view class="back-btn" :style="'top:' + CustomBar + 'rpx'" @tap="backPage">
<image src="/static/images/back.png" mode></image>
</view>
<view class="bg-img-box"><image src="https://download.cyjyyjy.com/personalPage-bg.png"></image></view>
<view class="logo-box acea-row row-column">
@ -65,7 +65,7 @@ const app = getApp();
export default {
data() {
return {
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 20,
CustomBar: this.CustomBar,
form: {
realName: '',
idcard: '',

Loading…
Cancel
Save