<template> <view class="page"> <u-navbar title="个人中心" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='38'></u-navbar> <view class="navtop"> <view class="left"> <!-- <view class="" style="width: 90rpx;height: 90rpx;margin-right: 30rpx;"> <image src="../../static/image/nt20.jfif" mode=""></image> </view> --> <view class="leftpic"> <view class="name"> 微信用户 </view> <view class="phone"> 138****1123 </view> </view> </view> <!-- <view class="rightewm"> 查看二维码 <u-icon name="arrow-right"></u-icon> </view> --> </view> <view class="gerenbd"> <!-- 用户 --> <view class="bdlist"> <view class="grlist" @click="btnpage(1)" style="margin-top: 0;"> <view class=""> <image src="../../static/image/icon5.png" mode=""></image> <text class="wz">押金</text> <text class="cz">未充值</text> </view> <view class=""> <u-icon name="arrow-right"></u-icon> </view> </view> <view class="grlist" @click="btnpage(2)"> <view class=""> <image src="../../static/image/icon6.png" mode=""></image> <text class="wz">我的订单</text> </view> <view class=""> <u-icon name="arrow-right"></u-icon> </view> </view> <view class="grlist" @click="btnpage(3)"> <view class=""> <image src="../../static/image/icon3.png" mode=""></image> <text class="wz">用户协议</text> </view> <view class=""> <u-icon name="arrow-right"></u-icon> </view> </view> <view class="grlist" @click="btnpage(4)"> <view class=""> <image src="../../static/image/icon4.png" mode=""></image> <text class="wz">隐私政策</text> </view> <view class=""> <u-icon name="arrow-right"></u-icon> </view> </view> <view class="grlist" @click="btnpage(5)"> <view class=""> <image src="../../static/image/icon2.png" mode=""></image> <text class="wz">关于我们</text> </view> <view class=""> <u-icon name="arrow-right"></u-icon> </view> </view> <view class="grlist" @click="btnpage(6)" style="border: 0;"> <view class=""> <image src="../../static/image/icon4.png" mode=""></image> <text class="wz">合作加盟</text> </view> <view class=""> <u-icon name="arrow-right"></u-icon> </view> </view> </view> <view class="bdpic"> <image src="../../static/image/a5.png" mode=""></image> </view> <view class="anniu"> <view class="" @click="btnpage(0)"> 我是代理商 </view> </view> </view> </view> </template> <script> export default { data() { return { } }, onLoad() { }, methods: { btnpage(num) { if (num == 1) { uni.navigateTo({ url: '/pages/deposit/index' }) } else if (num == 2) { uni.navigateTo({ url: '/pages/myorder/index' }) }else if(num == 0){ uni.navigateTo({ url:'/pages/agentpages/index/index' }) }else if(num == 6){ uni.navigateTo({ url:'/page_user/hezuo/index' }) }else if(num == 3){ uni.navigateTo({ url:'/page_user/about?tit=' + '用户协议' }) }else if(num == 4){ uni.navigateTo({ url:'/page_user/about?tit=' + '隐私政策' }) }else if(num == 5){ uni.navigateTo({ url:'/page_user/about?tit=' + '关于我们' }) } } } } </script> <style lang="scss"> page { // background-color: ; background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%); // border-radius: 0rpx 0rpx 0rpx 0rpx; } .page { width: 750rpx; // padding-left: 34rpx; // padding-right: 34rpx; // box-sizing: border-box; position: fixed; top: 0; left: 0; .navtop { margin-top: 40rpx; padding: 0 80rpx; display: flex; justify-content: space-between; width: 100%; padding-bottom: 60rpx; box-sizing: border-box; .left { display: flex; image { width: 90rpx; height: 90rpx; border-radius: 50%; margin-right: 40rpx; } .leftpic { padding-top: 10rpx; .daili-id { display: flex; position: fixed; left: 42rpx; top: 160px; view{ background: #7FE3BA; border-radius: 6rpx 6rpx 6rpx 6rpx; margin-right: 10rpx; padding: 8rpx 16rpx; box-sizing: border-box; font-size: 20rpx; color: #3D3D3D; } } .name { font-size: 32rpx; color: #3D3D3D; .qiehuan { width: 112rpx; height: 32rpx; border-radius: 22rpx 22rpx 22rpx 22rpx; border: 2rpx solid #3D3D3D; font-size: 20rpx; color: #3D3D3D; padding: 2rpx 16rpx; margin-left: 30rpx; } } .phone { margin-top: 4rpx; font-size: 20rpx; color: #3D3D3D; } } } .rightewm { padding-top: 50rpx; font-size: 20rpx; color: #3D3D3D; } } .gerenbd { width: 100%; height: 1288rpx; background-color: #fff; border-radius: 50rpx 50rpx 0 0; padding-top: 36rpx; .bdlist { width: 680rpx; margin: auto; padding: 18rpx 54rpx; box-sizing: border-box; height: 555rpx; background: #FFFFFF; box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 34rpx 34rpx 34rpx 34rpx; .grlist { display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; padding-bottom: 20rpx; // margin-top: 18rpx; padding-top: 20rpx; box-sizing: border-box; position: relative; image { width: 40rpx; height: 40rpx; } .wz { display: inline-block; margin-left: 28rpx; vertical-align: top; } .cz { width: 80rpx; height: 28rpx; background: #FFEFEF; border-radius: 17rpx 17rpx 17rpx 17rpx; font-size: 16rpx; color: #FA5F5F; padding: 5rpx 10rpx; margin-left: 24rpx; display: inline-block; text-align: center; position: absolute; top: 28rpx; } } } .daili { width: 680rpx; margin: auto; padding: 18rpx 54rpx; box-sizing: border-box; height: 366rpx; background: #FFFFFF; box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08); border-radius: 34rpx 34rpx 34rpx 34rpx; .grlist { display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; padding-bottom: 20rpx; // margin-top: 18rpx; padding-top: 20rpx; box-sizing: border-box; position: relative; image { width: 40rpx; height: 40rpx; } .wz { display: inline-block; margin-left: 28rpx; vertical-align: top; } .cz { width: 80rpx; height: 28rpx; background: #FFEFEF; border-radius: 17rpx 17rpx 17rpx 17rpx; font-size: 16rpx; color: #FA5F5F; padding: 5rpx 10rpx; margin-left: 24rpx; display: inline-block; text-align: center; position: absolute; top: 28rpx; } } } .bdpic { width: 100%; height: 238rpx; margin-top: 32rpx; image { width: 100%; height: 100%; } } .anniu { width: 680rpx; height: 90rpx; line-height: 80rpx; border-radius: 54rpx 54rpx 54rpx 54rpx; border: 4rpx solid #26D089; position: fixed; bottom: 54rpx; left: 50%; transform: translateX(-50%); font-weight: 500; font-size: 40rpx; color: #21CF86; text-align: center; } } } </style>