<template>
<view class="">
<!-- 头部 -->
<view class="usertop">
<view class="shang">
<view class="zuo">
<view class="cz">
<image src="public/img/touxiang.jpg" class="img" mode="widthFix"></image>
</view>
<view class="viphuiyuan">普通会员</view>
</view>
<view class="you">
<view class="username">
<view class="cz">
梦雨
<text class="span">修改绑定</text>
</view>
</view>
<view class="p">
<text class="span">电话：</text>****
</view>
<view class="p">
<text class="span">余额：</text>0
<view class="a">充值</view>
</view>
<view>
<text class="span">签名：</text>什么都没留下
</view>
</view>
</view>
<view class="xia">
<view class="a">
客服<text class="userxiaoxi">1</text>
</view>
<view class="a">签到</view>
</view>
</view>
<!-- 创作 -->
<view class="orchat-flex orchat-flex-one">
<view class="orchat-flex-box">
<view class="orchat-mine-cell">
<view class="h2">0</view>
<view class="p">累计创作</view>
</view>
</view>
<view class="orchat-flex-box">
<view class="orchat-mine-cell orchat-mine-cell-one">
<view class="h2">0</view>
<view class="p">硕士创作剩余</view>
</view>
</view>
<view class="orchat-flex-box">
<view class="orchat-mine-cell orchat-mine-cell-one">
<view class="h2">0</view>
<view class="p">博士创作剩余</view>
</view>
</view>
</view>
<!-- 订单 -->
<view class="dingdanzx">
<view class="top">
<view class="title">订单中心</view>
<view class="chakan">
查看全部<i class="fa fa-angle-right"></i>
</view>
</view>
<view class="xiafang">
<view class="a">
<image src="/static/img/dfk.png" class="img" mode="widthFix"></image>
<view class="p">待付款</view>
</view>
<view class="a">
<image src="/static/img/dfh.png" class="img" mode="widthFix"></image>
<view class="p">待发货</view>
</view>
<view class="a">
<image src="/static/img/dsh.png" class="img" mode="widthFix"></image>
<view class="p">待收货</view>
</view>
<view class="a">
<image src="/static/img/dpj.png" class="img" mode="widthFix"></image>
<view class="p">待评价</view>
</view>
</view>
</view>
<!-- 菜单 -->
<view class="orchat-mine-list">
<view class="a">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">余额/明细</view>
<view class="orchat-arrow">
<text class="span">查看</text>
</view>
</view>
<view class="a">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">VIP会员</view>
<view class="orchat-arrow">
<text class="span">购买</text>
</view>
</view>
<view class="a">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">创作收藏</view>
<view class="orchat-arrow">
<text class="span"></text>
</view>
</view>
<view class="a">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">商品收藏</view>
<view class="orchat-arrow">
<text class="span"></text>
</view>
</view>
<view class="a">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">最近登录</view>
<view class="orchat-arrow">
<text class="span">8天前</text>
</view>
</view>
<view class="a">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">登录IP</view>
<view class="orchat-arrow">
<text class="span">106.32.19.192</text>
</view>
</view>
<view class="a">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">聊天</view>
<view class="orchat-arrow">
<text class="span">累计聊天0条记录</text>
</view>
</view>
<view class="qux">
<view class="orchat-cou-img">
<image src="template/love/public/svg/yue.svg" class="img" mode="widthFix"></image>
</view>
<view class="orchat-flex-box">关于我们</view>
<view class="orchat-arrow">
<text class="span"></text>
</view>
</view>
<view class="guanyu">专注于婚姻指导 恋爱挽救 脱单技巧 魅力提升</view>
</view>
</view>
</template>
<script>
</script>
<style>
page{background-color:#f2f5f9}
.usertop{
background-color: white;
padding: 15px;
}
.usertop .shang{
overflow: auto;
}
.usertop .shang .zuo{
width: 80px;
float: left;
}
.usertop .shang .zuo .viphuiyuan{text-align: center;margin-top: 10px;}
.usertop .shang .zuo .img{
width: 80px;
height: 80px;
border-radius: 10px;
background-color: #f2f2f2;
}
.usertop .shang .you{
float: right;
width: calc(100% - 100px);
}
.usertop .shang .you .username{
color: #3c3c3c;
margin-bottom: 10px;
}
.usertop .shang .you .username .span{
background-color: #4CAF50;
padding: 0 11px;
border-radius: 50px;
color: white;
font-size: 12px;
position: absolute;
right: 15px;
}
.usertop .shang .you .p{
font-size: 14px;
color: #949494;
line-height: 24px;
position: relative;
margin-bottom: 3px;
}
.usertop .shang .you .p .a{background-color: #FF5722;padding: 0 11px; top: 0;border-radius: 50px;color: white;font-size: 12px;position: absolute;right: 0px;}
.usertop .shang .you .p .span{
color: #1b1b1b;
}
.usertop .xia{
width: 100%;
overflow: auto;
margin-top: 20px;
}
.usertop .xia .a{width: calc(50% - 10px);text-align: center;display: block;float: left;border-radius: 50px;color: aliceblue;background-color: #03A9F4;margin: 5px;line-height: 38px;}
.usertop .xia .userxiaoxi {
background-color: #ff5722;
text-align: center;
line-height: 20px;
min-width: 20px;
position: absolute;
border-radius: 50px;
margin-top: 9px;
margin-left: 10px;
font-size: 12px;
padding: 0 4px;
}
.orchat-flex{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:15px;position:relative}
.orchat-flexbg{background-color:#fff;border-top:1px solid #ebebeb;border-bottom:1px solid #ebebeb;border-radius:10px;padding:30px 15px}
.orchat-flex-box{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0;font-size:14px;color:#333}
.orchat-palace{padding:.5rem 0;position:relative;overflow:hidden}
.orchat-palace-grid{position:relative;float:left;padding:1px;width:20%;box-sizing:border-box;margin:5px 0}
.orchat-palace-grid-icon{width:30px;height:30px;margin:0 auto}
.orchat-palace-grid-icon .img{display:block;width:100%;height:100%;border:none}
.orchat-palace-grid-text{display:block;text-align:center;color:#333;font-size:.85rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-top:.2rem}
.orchat-palace-grid-text .h2{font-size:.8rem;font-weight:400;color:#666}
.orchat-user-img{width:60px;height:60px;margin-right:1rem}
.orchat-user-img .img{width:100%;height:auto;display:block;border:none}
.orchat-flex-box .h2{font-size:22px;color:#656565;font-weight:700}
.orchat-arrow{text-align:right;color:#394154;padding-right:12px;position:relative;font-size:.85rem;cursor:pointer}
.orchat-arrow .span{color:#c2cad0;font-size:16px;margin-right:10px;line-height:50px}
.orchat-arrow:after{content:" ";display:inline-block;height:8px;width:8px;border-width:2px 2px 0 0;border-color:#cdcdcd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-5px;right:2px;border-radius:1px}
.orchat-mine-cell{background:-webkit-linear-gradient(left,#63cc83,#00967a);background:-o-linear-gradient(right,#63cc83,#00967a);background:-moz-linear-gradient(right,#63cc83,#00967a);background:linear-gradient(to right,#63cc83,#00967a);margin:0 .4rem;border-radius:10px;text-align:center;padding: 5px 0;}
.orchat-mine-cell .h2{color:rgba(255,255,255,.98);margin-bottom: 2px;font-weight:700;}
.orchat-mine-cell .p{color:rgba(255,255,255,.98);margin-bottom:.3rem;font-weight:700}
.orchat-flex-box .orchat-mine-cell p{color:rgb(255 255 255 / 98%);font-size:14px;font-weight:unset}
.orchat-mine-cell-one{background:-webkit-linear-gradient(left,#7eb1fe,#b9e5ff);background:-o-linear-gradient(right,#7eb1fe,#b9e5ff);background:-moz-linear-gradient(right,#7eb1fe,#b9e5ff);background:linear-gradient(to right,#7eb1fe,#b9e5ff)}
.orchat-flex-one{padding:15px 10px;background-color: #ffffff;margin-top:10px;}
.orchat-mine-list{margin-top: 10px;background-color:#fff;border-radius:10px;padding:20px;}
.orchat-mine-list .a{display:flex;border-bottom:1px solid #f2f2f2;}
.orchat-mine-list .orchat-cou-img .img{width:22px;height:22px;margin-right:10px;margin-top: 11px;}
.orchat-mine-list .orchat-flex-box{font-size: 16px;font-weight:unset;margin-top: 13px;}
.orchat-mine-list .name{display:none}
.orchat-mine-list .qux{display:flex;border-bottom:unset}
.dingdanzx{
border-radius: 10px;
background-color: white;
padding: 20px;
margin-top: 10px;
}
.dingdanzx .top{
overflow: auto;
margin-bottom: 10px;
}
.dingdanzx .top .title{
float: left;
}
.dingdanzx .top .chakan{
float: right;
color: #6d6d6d;
font-size: 14px;
}
.dingdanzx .top .chakan i{
margin-left: 10px;
}
.dingdanzx .xiafang {
display: flex;
width: 100%;
}
.dingdanzx .xiafang .a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
color: #a8a8a8;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
position: relative;
}
.dingdanzx .xiafang .img {
width: 28px;
height: 28px;
border-radius: 5px;
margin-top: 15px;
}
.dingdanzx .xiafang .p {
margin: 10px 0;
font-size: 14px;
}
.dingdanzx .xiafang .span {
position: absolute;
top: 5px;
right: 4px;
font-size: 12px;
background-color: rgb(255 61 0);
color: aliceblue;
width: 18px;
line-height: 18px;
border-radius: 50px;
text-align: center;
}
.guanyu {
color: #d6d6d6;
font-size: 14px;
border: 1px solid #f1f1f1;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
}
</style>