6 changed files with 587 additions and 484 deletions
@ -1,167 +1,199 @@ |
|||||
<!--pages/user/user.wxml--> |
<!--pages/user/user.wxml--> |
||||
<view> |
<view class="bg"> |
||||
<image lazy-load class="topbg" style="height:calc({{height}}px + 341rpx)" |
<!-- 顶部背景与用户信息 --> |
||||
src="https://static.ticket.sz-trip.com/xcxImages/user/topbg.png" mode="aspectFill"></image> |
<view class="top-background"> |
||||
<view style="height:{{height}}rpx"></view> |
<image class="bg-img" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/topBg.png" mode="widthFix"></image> |
||||
<navigator url="profile/index" catchtap="pagePoint" data-event="mine_information" class="top-box" wx:if="{{info}}"> |
|
||||
<image lazy-load class="headimg" src="{{info.avatar}}" mode="aspectFill"></image> |
<!-- 用户信息 (浮动) --> |
||||
<view class="userinfo"> |
<navigator url="profile/index" catchtap="pagePoint" data-event="mine_information" class="user-top-new" wx:if="{{info}}"> |
||||
<view class="username">{{info.nickname}}<image lazy-load wx:if="{{info.gender==1 || info.gender==2}}" mode="widthFix" |
<view class="avatar-box"> |
||||
src="https://static.ticket.sz-trip.com/xcxImages/user/sex{{info.gender}}.png"></image> |
<image class="headimg" src="{{info.avatar}}" mode="aspectFill"></image> |
||||
</view> |
</view> |
||||
<view>id:{{info.id}}</view> |
<view class="info-text"> |
||||
</view> |
<view class="name-row"> |
||||
</navigator> |
<text class="nickname text-overflow">{{info.nickname}}</text> |
||||
<view class="user-box" style="padding-bottom:20rpx"> |
<image class="gender-icon" src="https://static.ticket.sz-trip.com/xcxImages/user/sex{{info.gender}}.png" mode="aspectFit"></image> |
||||
<navigator url="order/list" catchtap="pagePoint" data-event="mine_order" class="user-box-top"> |
</view> |
||||
<text>我的订单</text> |
<view class="id-row">id:{{info.id}}</view> |
||||
<view class="all-text">全部订单 <text class="iconfont icon-you"></text></view> |
</view> |
||||
|
<!-- <view class="arrow-right"> |
||||
|
<text class="iconfont icon-you" style="color: #fff; font-size: 32rpx;"></text> |
||||
|
</view> --> |
||||
</navigator> |
</navigator> |
||||
<view class="user-order-types"> |
|
||||
<navigator url="order/list?type=WAIT_PAYMENT" catchtap="pagePoint" data-event="mine_order" class="user-order-type"> |
|
||||
<image lazy-load src="https://static.ticket.sz-trip.com/xcxImages/user/dfk.png" mode="aspectFill"></image> |
|
||||
<view>待付款</view> |
|
||||
</navigator> |
|
||||
<navigator url="order/list?type=WAIT_POST" catchtap="pagePoint" data-event="mine_order" class="user-order-type"> |
|
||||
<image lazy-load src="https://static.ticket.sz-trip.com/xcxImages/user/dfh.png" mode="aspectFill"></image> |
|
||||
<view>待发货</view> |
|
||||
</navigator> |
|
||||
<navigator url="order/list?type=WAIT_USE" catchtap="pagePoint" data-event="mine_order" class="user-order-type"> |
|
||||
<image lazy-load src="https://static.ticket.sz-trip.com/xcxImages/user/dcx.png" mode="aspectFill"></image> |
|
||||
<view>待出行</view> |
|
||||
</navigator> |
|
||||
<navigator url="order/list?type=WAIT_DELIVERY" catchtap="pagePoint" data-event="mine_order" class="user-order-type"> |
|
||||
<image lazy-load src="https://static.ticket.sz-trip.com/xcxImages/user/dsh.png" mode="aspectFill"></image> |
|
||||
<view>待收货</view> |
|
||||
</navigator> |
|
||||
<navigator url="order/list?type=WAIT_COMMENT" catchtap="pagePoint" data-event="mine_order" class="user-order-type"> |
|
||||
<image lazy-load src="https://static.ticket.sz-trip.com/xcxImages/user/ddp.png" mode="aspectFill"></image> |
|
||||
<view>待评价</view> |
|
||||
</navigator> |
|
||||
<navigator url="order/list?type=NEED_REFUND" catchtap="pagePoint" data-event="mine_order" class="user-order-type"> |
|
||||
<image lazy-load src="https://static.ticket.sz-trip.com/xcxImages/user/th.png" mode="aspectFill"></image> |
|
||||
<view>退货/退款</view> |
|
||||
</navigator> |
|
||||
</view> |
|
||||
<view class="pay" wx:if="{{list[0]}}" > |
|
||||
<swiper autoplay interval="{{3500}}" circular="true" class="swiper"> |
|
||||
<swiper-item wx:for="{{list}}"> |
|
||||
<view class="s-box" bindtap="gotoDetail" data-item="{{orderList[index]}}"> |
|
||||
<image lazy-load style="width:248rpx;height:168rpx" mode="aspectFill" src="{{item.product_img}}"></image> |
|
||||
<view class="box-r"> |
|
||||
<view class="wpay">等待付款</view> |
|
||||
<view class="time">剩余时间: <text>{{formatTime[index]}}</text></view> |
|
||||
<navigator class="btn" url="/pages/order/pay/index?id={{orderList[index].order_id}}">去支付</navigator> |
|
||||
</view> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
</swiper> |
|
||||
</view> |
|
||||
</view> |
</view> |
||||
|
|
||||
<navigator url="/pages/pbService/web/index?weburl=https://m.cloud.sz-trip.com/groupTradesNew" |
<!-- 主要内容区域 (向上浮动) --> |
||||
style="width: 696rpx;height: 107rpx;margin: 26rpx auto;line-height: 1;background: #FFFFFF;display: flex;align-items: center;justify-content: space-between;border-radius: 20rpx;padding: 0 20rpx;box-sizing: border-box;"> |
<view class="main-container"> |
||||
<view class="com-flex"> |
|
||||
<view style="font-size: 29rpx;color: #333;margin-right: 6rpx;">团购订单</view> |
<!-- 1. 我的订单 --> |
||||
<image style="width: 46.63rpx;height:46.63rpx;" mode="widthFix" src="https://kswtgl.com/uploads/20260122/86e50cdee3bed939990086abc2431477.png"></image> |
<view class="card-box my-order"> |
||||
</view> |
<view class="title"> |
||||
<view class="com-flex"> |
<text class="main-title">我的订单</text> |
||||
<view style="font-size: 27rpx;color: #888;">更多</view> |
<navigator url="order/list" catchtap="pagePoint" data-event="mine_order" class="sub-title"> |
||||
<text class="iconfont icon-you" style="font-size: 24rpx;color: #888;"></text> |
全部订单 <text class="iconfont icon-you" style="font-size: 24rpx;"></text> |
||||
</view> |
</navigator> |
||||
</navigator> |
</view> |
||||
|
|
||||
|
<view class="order-list"> |
||||
|
<!-- 待付款 --> |
||||
|
<navigator url="order/list?type=WAIT_PAYMENT" catchtap="pagePoint" data-event="mine_order" class="order-item"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/dfk.png" mode="aspectFit"></image> |
||||
|
<text>待付款</text> |
||||
|
<view class="total" wx:if="{{dfkTotal > 0}}">{{dfkTotal}}</view> |
||||
|
</navigator> |
||||
|
<!-- 待发货 --> |
||||
|
<navigator url="order/list?type=WAIT_POST" catchtap="pagePoint" data-event="mine_order" class="order-item"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/dfh.png" mode="aspectFit"></image> |
||||
|
<text>待发货</text> |
||||
|
</navigator> |
||||
|
<!-- 待出行 --> |
||||
|
<navigator url="order/list?type=WAIT_USE" catchtap="pagePoint" data-event="mine_order" class="order-item"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/dcx.png" mode="aspectFit"></image> |
||||
|
<text>待出行</text> |
||||
|
</navigator> |
||||
|
<!-- 待收货 --> |
||||
|
<navigator url="order/list?type=WAIT_DELIVERY" catchtap="pagePoint" data-event="mine_order" class="order-item"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/dsh.png" mode="aspectFit"></image> |
||||
|
<text>待收货</text> |
||||
|
</navigator> |
||||
|
<!-- 退货/退款 --> |
||||
|
<navigator url="order/list?type=NEED_REFUND" catchtap="pagePoint" data-event="mine_order" class="order-item"> |
||||
|
<image src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/thtk.png" mode="aspectFit"></image> |
||||
|
<text>退货/退款</text> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
|
||||
<view class="user-box"> |
<!-- 待付款轮播 --> |
||||
<navigator url="cartlist/list" class="user-box-line" catchtap="pagePoint" data-event="mine_cart"> |
<view class="pay-swiper-box" wx:if="{{list && list.length > 0}}"> |
||||
购物车 |
<swiper autoplay interval="{{3500}}" circular="true" class="swiper"> |
||||
</navigator> |
<swiper-item wx:for="{{list}}" wx:key="index"> |
||||
|
<view class="dfkBox" bindtap="gotoDetail" data-item="{{orderList[index]}}"> |
||||
|
<image class="prod-img" mode="aspectFill" src="{{item.product_img}}"></image> |
||||
|
<view class="contentBox"> |
||||
|
<view class="status-text">等待付款</view> |
||||
|
<view class="time-text">剩余时间: <text style="color: #FB6E4D;">{{formatTime[index]}}</text></view> |
||||
|
<navigator class="orderBtn" catchtap="stopBubble" url="/pages/order/pay/index?id={{orderList[index].order_id}}">去支付</navigator> |
||||
|
</view> |
||||
|
</view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
<!-- <navigator url="order/team/list" class="user-box-line" catchtap="pagePoint" data-event="mine_teamorder"> |
<!-- 2. 团购订单 --> |
||||
团体预约订单 |
<navigator url="/pages/pbService/web/index?weburl=https://m.cloud.sz-trip.com/groupTradesNew" class="card-box group-order-row" wx:if="{{isShowGroup}}"> |
||||
</navigator> --> |
<view class="left"> |
||||
<navigator url="/pages/pbService/web/index?weburl=https://m.cloud.sz-trip.com/PrizeLog" class="user-box-line"> |
<text class="main-title">团购订单</text> |
||||
中奖记录 |
<image class="group-icon" src="https://static.ticket.sz-trip.com/uploads/20260122/86e50cdee3bed939990086abc2431477.png" mode="widthFix"></image> |
||||
|
</view> |
||||
|
<view class="right sub-title"> |
||||
|
全部订单 <text class="iconfont icon-you" style="font-size: 24rpx;"></text> |
||||
|
</view> |
||||
</navigator> |
</navigator> |
||||
|
|
||||
<!-- <navigator url="service/index" class="user-box-line" catchtap="pagePoint" data-event="mine_customerservice"> |
<!-- 3. 常用功能 (手动硬编码保留原逻辑) --> |
||||
在线客服 |
<view class="section-box"> |
||||
</navigator> --> |
<view class="section-title">常用功能</view> |
||||
<view class="user-box-line" bindtap="phoneCall"> |
<view class="common-func-grid"> |
||||
人工客服 |
<!-- 购物车 --> |
||||
|
<navigator url="cartlist/list" catchtap="pagePoint" data-event="mine_cart" class="func-item" style="background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/gwc.png');"></navigator> |
||||
|
|
||||
|
<!-- 我的优惠券 --> |
||||
|
<navigator url="coupon/index" catchtap="pagePoint" data-event="mine_card" class="func-item" style="background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/wdyhq.png');"></navigator> |
||||
|
|
||||
|
<!-- 中奖记录 --> |
||||
|
<navigator url="/pages/pbService/web/index?weburl=https://m.cloud.sz-trip.com/PrizeLog" class="func-item" style="background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/zjjl.png');"></navigator> |
||||
|
|
||||
|
<!-- 人工客服 --> |
||||
|
<view bindtap="phoneCall" class="func-item" style="background-image: url('https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/rgkf.png');"></view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
<navigator url="coupon/index" class="user-box-line" catchtap="pagePoint" data-event="mine_card"> |
|
||||
我的卡券 |
|
||||
</navigator> |
|
||||
<navigator url="likes/index" class="user-box-line" catchtap="pagePoint" data-event="mine_collection"> |
|
||||
我的收藏 |
|
||||
</navigator> |
|
||||
<view bindtap="supplier" class="user-box-line">商户入驻</view> |
|
||||
<!-- <navigator url="/pages/group/mine/index" class="user-box-line"> |
|
||||
我的团购 |
|
||||
</navigator> |
|
||||
<navigator url="/pages/kj/mine/index" class="user-box-line"> |
|
||||
我的砍价 |
|
||||
</navigator> --> |
|
||||
<!-- <view bindtap="retail" class="user-box-line"> |
|
||||
我要分销 |
|
||||
</view> --> |
|
||||
<navigator url="verify/index" class="user-box-line" catchtap="pagePoint" data-event="mine_verify" wx:if="{{info && info.name_verification=='UNCERTFIED'}}"> |
|
||||
实名认证 |
|
||||
</navigator> |
|
||||
</view> |
|
||||
<view class="user-box" style="margin-bottom:0"> |
|
||||
<navigator url="linkman/index" class="user-box-line" catchtap="pagePoint" data-event="mine_travelinfo"> |
|
||||
出游人信息 |
|
||||
</navigator> |
|
||||
<navigator url="address/index" class="user-box-line" catchtap="pagePoint" data-event="mine_receiveinfo"> |
|
||||
收货地址 |
|
||||
</navigator> |
|
||||
</view> |
|
||||
|
|
||||
<view class="user-box" style="margin-bottom:0;margin-top: 18rpx;"> |
<!-- 4. 更多服务 (手动硬编码保留原逻辑) --> |
||||
<navigator url="userPrivacy/index?id=9" class="user-box-line" catchtap="pagePoint" data-event="mine_travelinfo"> |
<view class="section-box"> |
||||
用户协议 |
<view class="section-title">更多服务</view> |
||||
</navigator> |
<view class="more-service-grid"> |
||||
<navigator url="suggest/suggest" class="user-box-line" catchtap="pagePoint" data-event="mine_travelinfo"> |
|
||||
投诉建议 |
<!-- 出游人信息 --> |
||||
</navigator> |
<navigator url="linkman/index" catchtap="pagePoint" data-event="mine_travelinfo" class="service-item"> |
||||
<navigator url="userPrivacy/index?id=12" class="user-box-line" catchtap="pagePoint" data-event="mine_receiveinfo"> |
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/cyrxx.png" mode="aspectFit"></image> |
||||
隐私政策 |
<view class="service-name">出游人信息</view> |
||||
</navigator> |
</navigator> |
||||
<navigator url="personalInfo/index" class="user-box-line" catchtap="pagePoint" data-event="mine_receiveinfo"> |
|
||||
个人信息收集清单 |
|
||||
</navigator> |
|
||||
<navigator url="userPrivacy/index?id=14" class="user-box-line" catchtap="pagePoint" data-event="mine_receiveinfo"> |
|
||||
第三方共享信息清单 |
|
||||
</navigator> |
|
||||
<navigator url="/pages/pbService/web/index?weburl=https://m.supplier.cloud.sz-trip.com" class="user-box-line" catchtap="pagePoint" data-event="mine_receiveinfo"> |
|
||||
商户核销 |
|
||||
</navigator> |
|
||||
</view> |
|
||||
|
|
||||
<view class="bottom-intro"> |
<!-- 收货地址 --> |
||||
<view>主办方:苏州市文化广电和旅游局</view> |
<navigator url="address/index" catchtap="pagePoint" data-event="mine_receiveinfo" class="service-item"> |
||||
<view>承办方:苏州市文旅融合发展中心</view> |
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/shdz.png" mode="aspectFit"></image> |
||||
<view>备案号:苏ICP备19064944号-3X@君到苏州</view> |
<view class="service-name">收货地址</view> |
||||
</view> |
</navigator> |
||||
</view> |
|
||||
<!-- <view class="mask" wx:if="{{showModel}}"> |
<!-- 商户入驻 --> |
||||
<view class="model"> |
<view bindtap="supplier" class="service-item"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/shrz.png" mode="aspectFit"></image> |
||||
|
<view class="service-name">商户入驻</view> |
||||
|
</view> |
||||
|
|
||||
<view class="model-content"> |
<!-- 商户核销 --> |
||||
<view>即将跳转人工客服</view> |
<navigator url="/pages/pbService/web/index?weburl=https://m.supplier.cloud.sz-trip.com" catchtap="pagePoint" data-event="mine_receiveinfo" class="service-item"> |
||||
<view style="margin-top: 40rpx;">客服服务时间:09:00-12:00,</view> |
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/shhx.png" mode="aspectFit"></image> |
||||
<view style="margin-top: 30rpx;">13:00-18:00</view> |
<view class="service-name">商户核销</view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- 我的收藏 --> |
||||
|
<navigator url="likes/index" catchtap="pagePoint" data-event="mine_collection" class="service-item"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/wdsc.png" mode="aspectFit"></image> |
||||
|
<view class="service-name">我的收藏</view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- 投诉建议 --> |
||||
|
<navigator url="suggest/suggest" catchtap="pagePoint" data-event="mine_travelinfo" class="service-item"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/tsjy.png" mode="aspectFit"></image> |
||||
|
<view class="service-name">投诉建议</view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- 用户协议 --> |
||||
|
<navigator url="userPrivacy/index?id=9" catchtap="pagePoint" data-event="mine_travelinfo" class="service-item"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/yhxy.png" mode="aspectFit"></image> |
||||
|
<view class="service-name">用户协议</view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- 隐私政策 --> |
||||
|
<navigator url="userPrivacy/index?id=12" catchtap="pagePoint" data-event="mine_receiveinfo" class="service-item"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/yszc.png" mode="aspectFit"></image> |
||||
|
<view class="service-name">隐私政策</view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- 个人信息收集清单 --> |
||||
|
<navigator url="personalInfo/index" catchtap="pagePoint" data-event="mine_receiveinfo" class="service-item"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/grxxsjqd.png" mode="aspectFit"></image> |
||||
|
<view class="service-name"><text>个人信息\n收集清单</text></view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- 第三方共享信息清单 --> |
||||
|
<navigator url="userPrivacy/index?id=14" catchtap="pagePoint" data-event="mine_receiveinfo" class="service-item"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/gxxxqd.png" mode="aspectFit"></image> |
||||
|
<view class="service-name"><text>第三方共享\n信息清单</text></view> |
||||
|
</navigator> |
||||
|
|
||||
|
<!-- 实名认证 --> |
||||
|
<navigator url="verify/index" catchtap="pagePoint" data-event="mine_verify" class="service-item" wx:if="{{info && info.name_verification=='UNCERTFIED'}}"> |
||||
|
<image class="service-icon" src="https://static.ticket.sz-trip.com/jundaosuzhou/images/user2026/smrz.png" mode="aspectFit"></image> |
||||
|
<view class="service-name">实名认证</view> |
||||
|
</navigator> |
||||
|
|
||||
|
</view> |
||||
</view> |
</view> |
||||
<view class="btn-list"> |
|
||||
<button class="model-btn" bindtap="closeModel"> |
<!-- 底部文字 --> |
||||
取消 |
<view class="bottom-intro"> |
||||
</button> |
<view>主办方:苏州市文化广电和旅游局</view> |
||||
<button class="model-btn" style="color:#0B898E;border-left:#D8D8D8 solid 1rpx;" open-type="contact"> |
<view>承办方:苏州市文旅融合发展中心</view> |
||||
确定 |
<view>备案号:苏ICP备19064944号-3X@君到苏州</view> |
||||
</button> |
|
||||
</view> |
</view> |
||||
|
|
||||
</view> |
</view> |
||||
</view> --> |
|
||||
|
<view style="height:20rpx"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 客服弹窗组件 --> |
||||
<kefuCom wx:if="{{showModel}}" bind:hideModal="closeModel"></kefuCom> |
<kefuCom wx:if="{{showModel}}" bind:hideModal="closeModel"></kefuCom> |
||||
<view style="height:20rpx"></view> |
|
||||
@ -1,236 +1,327 @@ |
|||||
/* pages/user/user.wxss */ |
/* pages/user/user.wxss */ |
||||
page { |
page { |
||||
background: #EDEDED; |
background: #F7F7F7; |
||||
|
padding-bottom: 20rpx; |
||||
} |
} |
||||
.top-box { |
|
||||
padding: 0 30rpx; |
.bg { |
||||
display: flex; |
min-height: 100vh; |
||||
align-items: center; |
} |
||||
justify-content: space-between; |
|
||||
color: #fff; |
/* 顶部背景区域 */ |
||||
height: 180rpx; |
.top-background { |
||||
|
width: 100%; |
||||
|
height: 480rpx; /* 对应 H5 的 6.5rem 左右 */ |
||||
position: relative; |
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.bg-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
/* 顶部遮罩 */ |
||||
|
.top-background::after { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0,0,0,0.25); |
||||
|
z-index: 2; |
||||
} |
} |
||||
.topbg { |
|
||||
|
/* 用户信息 */ |
||||
|
.user-top-new { |
||||
position: absolute; |
position: absolute; |
||||
|
top: 150rpx; /* 根据导航栏高度调整 */ |
||||
|
left: 0; |
||||
width: 100%; |
width: 100%; |
||||
z-index: -1; |
z-index: 3; |
||||
|
padding: 0 40rpx; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
} |
} |
||||
.top-box .headimg { |
|
||||
width: 100rpx; |
.avatar-box { |
||||
height: 100rpx; |
width: 135rpx; |
||||
|
height: 135rpx; |
||||
border-radius: 50%; |
border-radius: 50%; |
||||
|
border: 4rpx solid rgba(255,255,255,0.9); |
||||
|
overflow: hidden; |
||||
|
margin-right: 30rpx; |
||||
flex-shrink: 0; |
flex-shrink: 0; |
||||
margin-right: 20rpx; |
|
||||
} |
} |
||||
.userinfo { |
|
||||
|
.headimg { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.info-text { |
||||
flex: 1; |
flex: 1; |
||||
font-size: 24rpx; |
color: #fff; |
||||
} |
} |
||||
.username { |
|
||||
|
.name-row { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
font-size: 36rpx; |
|
||||
font-weight: bold; |
|
||||
margin-bottom: 15rpx; |
margin-bottom: 15rpx; |
||||
} |
} |
||||
.username image { |
|
||||
width: 31rpx; |
.nickname { |
||||
margin-left: 20rpx; |
font-size: 37rpx; |
||||
|
font-weight: bold; |
||||
|
margin-right: 15rpx; |
||||
|
max-width: 350rpx; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.gender-icon { |
||||
|
width: 34rpx; |
||||
|
height: 34rpx; |
||||
|
} |
||||
|
|
||||
|
.id-row { |
||||
|
font-size: 28rpx; |
||||
|
opacity: 0.9; |
||||
} |
} |
||||
.user-box { |
|
||||
margin: 0 30rpx; |
|
||||
margin-bottom: 20rpx; |
|
||||
background: white; |
|
||||
border-radius: 20rpx; |
|
||||
padding: 0rpx 20rpx; |
|
||||
font-size: 29rpx; |
|
||||
color: #333; |
|
||||
|
|
||||
|
.arrow-right { |
||||
|
padding: 15rpx; |
||||
} |
} |
||||
.user-box-top { |
|
||||
|
/* 主容器 */ |
||||
|
.main-container { |
||||
|
position: relative; |
||||
|
margin-top: -80rpx; |
||||
|
z-index: 10; |
||||
|
padding: 20rpx 30rpx; |
||||
|
background: #f7f7f7; |
||||
|
border-radius: 33rpx 33rpx 0 0; |
||||
|
} |
||||
|
|
||||
|
/* 卡片通用样式 */ |
||||
|
.card-box { |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 30rpx 20rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02); |
||||
|
} |
||||
|
|
||||
|
/* 标题 */ |
||||
|
.title { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
|
||||
justify-content: space-between; |
justify-content: space-between; |
||||
padding: 30rpx 0; |
align-items: center; |
||||
height: 28rpx; |
margin-bottom: 30rpx; |
||||
|
padding: 0 10rpx; |
||||
} |
} |
||||
.all-text { |
|
||||
|
.main-title { |
||||
|
font-size: 34rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.sub-title { |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
font-size: 27rpx; |
|
||||
color: #888; |
|
||||
} |
} |
||||
.all-text .iconfont { |
|
||||
font-size: 24rpx; |
/* 订单部分 */ |
||||
|
.order-list { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 30rpx; |
||||
|
padding: 0 10rpx; |
||||
} |
} |
||||
.user-order-types { |
|
||||
|
.order-item { |
||||
display: flex; |
display: flex; |
||||
|
flex-direction: column; |
||||
align-items: center; |
align-items: center; |
||||
flex-wrap: wrap; |
position: relative; |
||||
|
width: 20%; |
||||
} |
} |
||||
.user-order-type { |
|
||||
width: 25%; |
.order-item image { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.order-item text { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.total { |
||||
|
position: absolute; |
||||
|
min-width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
line-height: 36rpx; |
||||
text-align: center; |
text-align: center; |
||||
font-size: 27rpx; |
background: linear-gradient(0deg, #FF8826, #FF2726); |
||||
margin-bottom: 30rpx; |
border-radius: 18rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #FFFFFF; |
||||
|
right: 10rpx; |
||||
|
top: -10rpx; |
||||
|
padding: 0 6rpx; |
||||
} |
} |
||||
.user-order-type image { |
|
||||
width: 60rpx; |
/* 待付款轮播 */ |
||||
height: 60rpx; |
.pay-swiper-box { |
||||
display: block; |
width: 100%; |
||||
margin: 0 auto; |
height: 200rpx; |
||||
margin-bottom: 20rpx; |
} |
||||
|
|
||||
|
.swiper { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.dfkBox { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
background: #F9F9F9; |
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.prod-img { |
||||
|
width: 220rpx; |
||||
|
height: 160rpx; |
||||
|
margin-right: 20rpx; |
||||
|
border-radius: 8rpx; |
||||
|
flex-shrink: 0; |
||||
} |
} |
||||
.user-box-line { |
|
||||
line-height: 120rpx; |
.contentBox { |
||||
border-bottom: 1rpx solid #d8d8d8; |
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
} |
} |
||||
.user-box .user-box-line:last-child { |
|
||||
border-bottom: none; |
.status-text { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
} |
} |
||||
|
|
||||
|
.time-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
.pay { |
.orderBtn { |
||||
width: 648rpx; |
width: 150rpx; |
||||
height: 204rpx; |
height: 52rpx; |
||||
margin: 0 auto; |
background: #FB6E4D; |
||||
background: #F6F6F6; |
border-radius: 26rpx; |
||||
padding: 18rpx; |
text-align: center; |
||||
|
line-height: 52rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #FFFFFF; |
||||
|
align-self: flex-end; |
||||
|
} |
||||
|
|
||||
|
/* 团购订单行 */ |
||||
|
.group-order-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 30rpx 30rpx; |
||||
|
} |
||||
|
|
||||
|
.group-order-row .left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.group-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-left: 15rpx; |
||||
|
} |
||||
|
|
||||
|
/* 常用功能 */ |
||||
|
.section-box { |
||||
|
padding: 20rpx 20rpx 0; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 34rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin: 10rpx 0 20rpx 10rpx; |
||||
} |
} |
||||
|
|
||||
.s-box { |
.common-func-grid { |
||||
display: flex; |
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
padding-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.func-item { |
||||
|
width: 315rpx; |
||||
|
height: 110rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
background-size: 100% 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
} |
||||
|
|
||||
|
/* 更多服务 */ |
||||
|
.more-service-grid { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.service-item { |
||||
|
width: 25%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
align-items: center; |
align-items: center; |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.service-icon { |
||||
|
width: 50rpx; |
||||
|
height: 50rpx; |
||||
|
margin-bottom: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.service-name { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
text-align: center; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
line-height: 1.3; |
||||
overflow: hidden; |
|
||||
} |
} |
||||
|
|
||||
.btn { |
/* 底部文字 */ |
||||
width: 162rpx; |
.bottom-intro { |
||||
height: 56rpx; |
padding: 40rpx 0; |
||||
background: #FB6E4D; |
|
||||
border-radius: 28rpx; |
|
||||
font-size: 32rpx; |
|
||||
font-family: PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
line-height: 56rpx; |
|
||||
text-align: center; |
text-align: center; |
||||
margin-top: 10rpx; |
font-size: 24rpx; |
||||
float:right; |
color: #999; |
||||
} |
line-height: 36rpx; |
||||
.swiper{ |
} |
||||
height: 100% !important; |
|
||||
} |
|
||||
.box-r{ |
|
||||
margin-left: 30rpx; |
|
||||
width: 388rpx; |
|
||||
} |
|
||||
.wpay{ |
|
||||
|
|
||||
font-size: 32rpx; |
|
||||
font-family: PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #333333; |
|
||||
|
|
||||
} |
|
||||
.time{ |
|
||||
font-size: 28rpx; |
|
||||
font-family: PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #666666; |
|
||||
margin-top: 10rpx; |
|
||||
} |
|
||||
.mask { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
background-color: rgba(0, 0, 0, 0.5); |
|
||||
z-index: 999; |
|
||||
} |
|
||||
.model{ |
|
||||
width: 561rpx; |
|
||||
min-height: 449rpx; |
|
||||
background: #FFFFFF; |
|
||||
border-radius: 13rpx; |
|
||||
position: absolute; |
|
||||
box-sizing: border-box; |
|
||||
|
|
||||
} |
|
||||
.model-title{ |
|
||||
text-align: center; |
|
||||
font-size: 34rpx; |
|
||||
font-family: PingFang SC; |
|
||||
font-weight: bold; |
|
||||
color: #333333; |
|
||||
margin-top: 32rpx; |
|
||||
box-sizing: border-box; |
|
||||
|
|
||||
} |
|
||||
.model-content{ |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
flex-wrap: wrap; |
|
||||
margin-top: 100rpx; |
|
||||
font-size: 34rpx; |
|
||||
font-family: PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #333333; |
|
||||
} |
|
||||
.btn-list{ |
|
||||
height: 106rpx; |
|
||||
width: 100%; |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
border-top: 1rpx solid rgba(216, 216, 216, .99); |
|
||||
padding: 10rpx; |
|
||||
box-sizing: border-box; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
} |
|
||||
.model-btn{ |
|
||||
width: 50%; |
|
||||
text-align: center; |
|
||||
height: 86rpx; |
|
||||
line-height: 86rpx; |
|
||||
|
|
||||
font-size: 34rpx; |
|
||||
font-family: PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #333333; |
|
||||
} |
|
||||
|
|
||||
button{ |
|
||||
margin:0; |
|
||||
padding:0; |
|
||||
border-radius:0; |
|
||||
border:none; |
|
||||
background-color:transparent; |
|
||||
} |
|
||||
|
|
||||
button::after{ |
|
||||
border: none; |
|
||||
} |
|
||||
|
|
||||
.bottom-intro{ |
|
||||
width: 100%; |
|
||||
padding: 75rpx; |
|
||||
font-family: PingFang-SC, PingFang-SC; |
|
||||
font-weight: 500; |
|
||||
font-size: 25rpx; |
|
||||
color: #999999; |
|
||||
line-height: 40rpx; |
|
||||
text-align: center; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
|
|||||
Loading…
Reference in new issue