Commit 581109a1f7ad34d505d28f8eab658542f61efa4b

Authored by 前端开发-叶丹清
1 parent 5ea1865a

瘦身日记排版优化

packageE/pages/user/slimming/slimming.wxml
1 1 <wxs module="g_filter" src="g_filter.wxs"></wxs>
2 2 <view class="pd20 fs30" wx:for="{{portrait_list}}">
3 3 <!-- 上 -->
4   - <view class="card pd20 flex jc_sb" style="height: 210rpx;box-sizing: border-box;">
5   - <image style="margin-right: 26rpx;width: 158rpx;height: 158rpx;border-radius: 50%;"
  4 + <view class="card pd20 flex jc_sb fw_box">
  5 + <image class="fw_img"
6 6 src="{{userInfo.head_pic}}"/>
7 7  
8 8  
9   - <view class="flex mgt10" style="width: 70%;flex-direction: column;">
  9 + <view class="flex mgt10 img_right" >
10 10 <view class="flex jc_sb fs26 mgb20">
11   - <view style="color: #FE3A62;">{{item.customername || '-'}}</view>
12   - <view style="color: #FE3A62;">{{item.mobiletel || '-'}}</view>
13   - <view style="color: #FE3A62;" class="flex ai_c">{{item.age || '-'}}
14   - <view style="color: #383838;">岁
  11 + <view class="c-red">{{item.customername || '-'}}</view>
  12 + <view class="c-red">{{item.mobiletel || '-'}}</view>
  13 + <view class="flex ai_c c-red">{{item.age || '-'}}
  14 + <view class="c-38">岁
15 15 </view>
16 16 </view>
17 17 </view>
18 18 <view class="flex fs26 mgb20">
19   - <view style="color: #383838;" class="flex ai_c">减重疗程数:
20   - <view style="color: #FE3A62;">
  19 + <view class="flex ai_c c-38">减重疗程数:
  20 + <view class="c-red">
21 21 {{item.weightlosscourse || '0'}}
22 22 </view>
23 23 </view>
24   - <view style="color: #383838;margin-left: 30rpx;" class="flex ai_c">塑身疗程数:
25   - <view style="color: #FE3A62;">{{item.shapecourse || '0'}}</view>
  24 + <view style="margin-left: 30rpx;" class="flex ai_c c-38">塑身疗程数:
  25 + <view class="c-red">{{item.shapecourse || '0'}}</view>
26 26 </view>
27 27  
28 28 </view>
29 29 <view class="flex fs26 mgb20">
30   - <view style="color: #383838;" class="flex ai_c">购买日期:
31   - <view style="color: #FE3A62;">{{item.signingdate || '-'}}</view>
  30 + <view class="flex ai_c c-38">购买日期:
  31 + <view class="c-red">{{item.signingdate || '-'}}</view>
32 32 </view>
33 33 </view>
34 34 </view>
... ... @@ -37,125 +37,106 @@
37 37 <view class="card mgt20">
38 38 <view>
39 39 <view class="flex pd20 jc_sb ai_c">
40   - <view style="color: #383838;" class="fs32">日常打卡</view>
  40 + <view class="fs32 c-38">日常打卡</view>
41 41 <view bindtap="goto" data-url="/packageE/pages/user/punchInhistory/punchInhistory?customerid={{item.id}}&diffweight={{item.diffweight}}&howday={{item.tostoreqty}}&standardweight={{item.ideaweight}}"
42   - style="border: 1.75rpx solid #FE3A62;border-radius: 88rpx;width: 123rpx;height: 48rpx;color:#FE3A62;line-height: 48rpx;text-align: center;"
43   - class="fs26">查看全部
  42 + class="fs26 fw_see_more">查看全部
44 43 </view>
45 44 </view>
46 45  
47   - <view class="flex pd20 jc_sb ai_c"
48   - style="flex-direction: column;border-bottom: 1rpx solid #F0F0F0;">
49   - <view class="flex" style="margin-right:20rpx;">
50   - <view wx:if="{{item.dayweight>0 }}" class="ellipsis-2"
  46 + <view class="flex pd20 jc_sb ai_c fw_detail_box">
  47 + <view class="flex mgr20">
  48 + <view wx:if="{{item.dayweight>0 }}" class="ellipsis-2 fw_day_weight"
51 49 style="color: #FE3A62;font-size: 84rpx;width: 250rpx;text-align: right;margin-left: 40rpx;">
52 50 {{ g_filter.toFixTwo(item.dayweight ) }}
53 51 </view>
54   - <view wx:else class="ellipsis-2"
55   - style="color: #FE3A62;font-size: 84rpx;width: 250rpx;text-align: right;margin-left: 40rpx;margin-right: 50rpx;margin-bottom: 20rpx;">
  52 + <view wx:else class="ellipsis-2 fw_no_day_weight">
56 53 _ _
57 54 </view>
58   - <view style="color: #383838;margin-top: 40rpx;" class="fs26">斤</view>
59   - <view style="width: 30rpx;height: 30rpx;margin-top: 20rpx;padding: 20rpx;"
  55 + <view class="fs26 c-38 mgt40">斤</view>
  56 + <view class="fw_edit_img_box"
60 57 bindtap="goto" data-url="/packageE/pages/punchIn/punchIn?mobiletel={{item.mobiletel}}&iswhere=1&gradenames=true&isMy=1">
61   - <image :src="imghost+'mdd_img/modigoods.png'" style="width: 30rpx;height: 30rpx;" mode=""></image>
  58 + <image :src="imghost+'mdd_img/modigoods.png'" class="fw_edit_img" mode=""></image>
62 59 </view>
63 60 </view>
64 61 <view style="color: #383838;" class="fs26">今日体重</view>
65 62 </view>
66 63 </view>
67 64  
68   -<view class="flex jc_sa"
69   - style="height: 160rpx;padding: 20rpx 0;box-sizing: border-box;border-bottom: 1rpx solid #F0F0F0;">
70   - <view class="flex txt-center" style="flex-direction: column;width: 33%;">
71   - <view class="flex" style="margin-left: 20rpx;">
72   - <view style="color: #FE3A62;font-size: 52rpx;width: 60%;text-align: right;"
73   - class="ellipsis-2">{{g_filter.toFixTwo(item.ringratioweight)}}
  65 +<view class="flex jc_sa fw_tiny_box">
  66 + <view class="flex txt-center fw_tiny_top">
  67 + <view class="flex jc_c">
  68 + <view class="ellipsis-2 flex fs52 c-red">{{g_filter.toFixTwo(item.ringratioweight)}}
  69 + <view class="fs26 mgt20 c-38">斤</view>
74 70 </view>
75   - <view style="color: #383838;text-align: left;" class="fs26 mgt20">斤</view>
76 71  
77 72 </view>
78   - <view style="color: #383838;" class="fs26 mgt20">环比重量</view>
  73 + <view class="fs26 mgt20 c-38">环比重量</view>
79 74 </view>
80   - <view class="flex txt-center" style="flex-direction: column;width: 33%;">
81   - <view class="flex" style="margin-left: 20rpx;">
82   - <view style="color: #FE3A62;font-size: 52rpx;width: 60%;text-align: right;"
83   - class="ellipsis-2">{{ g_filter.toFixTwo(item.actualweight)}}
  75 + <view class="flex txt-center fw_tiny_top">
  76 + <view class="flex jc_c">
  77 + <view class="ellipsis-2 flex fs52 c-red">{{ g_filter.toFixTwo(item.actualweight)}}
  78 + <view class="fs26 mgt20 c-38">斤</view>
84 79 </view>
85 80  
86   - <view style="color: #383838;text-align: left;" class="fs26 mgt20">斤
87   - </view>
  81 +
88 82 </view>
89   - <view style="color: #383838;" class="fs26 mgt20">实际减重</view>
  83 + <view class="fs26 mgt20 c-38">实际减重</view>
90 84 </view>
91   - <view class="flex txt-center" style="flex-direction: column;width: 33%;">
92   - <view class="flex" style="margin-left: 20rpx;">
93   - <view style="color: #FE3A62;font-size: 52rpx;width: 60%;text-align: right;"
94   - class="ellipsis-2">{{g_filter.toFixTwo(item.diffweight)}}
  85 + <view class="flex txt-center fw_tiny_top">
  86 + <view class="flex jc_c">
  87 + <view class="ellipsis-2 flex fs52 c-red">{{g_filter.toFixTwo(item.diffweight)}}
  88 + <view class="fs26 mgt20 c-38">斤</view>
95 89 </view>
96 90  
97   - <view style="color: #383838;text-align: left;" class="fs26 mgt20">斤
98   - </view>
99 91 </view>
100   - <view style="color: #383838;" class="fs26 mgt20">累计减重</view>
  92 + <view class="fs26 mgt20 c-38">累计减重</view>
101 93 </view>
102 94 </view>
103 95  
104   -<view class="flex jc_sa"
105   - style="height: 160rpx;padding: 20rpx 0;box-sizing: border-box;border-bottom: 1rpx solid #F0F0F0;">
106   - <view class="flex txt-center" style="flex-direction: column;width: 33%;">
107   - <view class="flex" style="margin-left: 20rpx;">
108   - <view style="color: #FE3A62;font-size: 52rpx;width: 60%;text-align: right;;"
109   - class="ellipsis-2">{{item.tostoreqty || '0'}}
110   - </view>
111   - <view style="color: #383838;text-align: left;" class="fs26 mgt20">次
  96 +<view class="flex jc_sa fw_tiny_box" >
  97 + <view class="flex txt-center fw_tiny_top">
  98 + <view class="flex jc_c">
  99 + <view class="ellipsis-2 flex fs52 c-red">{{item.tostoreqty || '0'}}
  100 + <view class="fs26 mgt20 c-38">次</view>
112 101 </view>
  102 +
113 103 </view>
114   - <view style="color: #383838;" class="fs26 mgt20">累计到店</view>
  104 + <view class="fs26 mgt20 c-38">累计到店</view>
115 105 </view>
116   - <view class="flex txt-center" style="flex-direction: column;width: 33%;">
117   - <view class="flex" style="margin-left: 20rpx;">
118   - <view style="color: #FE3A62;font-size: 52rpx;width: 60%;text-align: right;"
119   - class="ellipsis-2">{{ g_filter.toFixTwo(item.undeduced)}}
120   - </view>
121   -
122   - <view style="color: #383838;text-align: left;" class="fs26 mgt20">斤
  106 + <view class="flex txt-center fw_tiny_top">
  107 + <view class="flex jc_c">
  108 + <view class="ellipsis-2 flex fs52 c-red">{{ g_filter.toFixTwo(item.undeduced)}}
  109 + <view class="fs26 mgt20 c-38">斤</view>
123 110 </view>
  111 +
124 112 </view>
125   - <view style="color: #383838;" class="fs26 mgt20">未减斤数</view>
  113 + <view class="fs26 mgt20 c-38">未减斤数</view>
126 114 </view>
127   - <view class="flex txt-center" style="flex-direction: column;width: 33%;">
128   - <view class="flex" style="margin-left: 20rpx;">
129   - <view style="color: #FE3A62;font-size: 52rpx;width: 60%;text-align: right;"
130   - class="ellipsis-2">{{g_filter.toFixTwo(item.minweight) }}
  115 + <view class="flex txt-center fw_tiny_top">
  116 + <view class="flex jc_c">
  117 + <view class="ellipsis-2 flex fs52 c-red">{{g_filter.toFixTwo(item.minweight) }}
  118 + <view class="fs26 mgt20 c-38">斤</view>
131 119 </view>
132   - <view style="color: #383838;text-align: left;" class="fs26 mgt20">斤</view>
133 120 </view>
134   - <view style="color: #383838;" class="fs26 mgt20">最低体重</view>
  121 + <view class="fs26 mgt20 c-38">最低体重</view>
135 122 </view>
136 123 </view>
137 124  
138   -<view class="flex jc_sa"
139   - style="height: 68rpx;border-bottom: 1rpx solid #F0F0F0;padding: 20rpx 0;box-sizing: border-box;">
140   - <view style="color: #383838;" class="fs26 flex ai_c">初始体重<view style="color: #FE3A62;"
141   - class="fs26">{{ g_filter.toFixTwo(item.weight) }}</view>斤
  125 +<view class="flex jc_sa fw_3weight">
  126 + <view class="fs26 flex ai_c c-38">初始体重<view class="fs26 c-red">{{ g_filter.toFixTwo(item.weight) }}</view>斤
142 127 </view>
143   - <view style="color: #383838;" class="fs26 flex ai_c">标准体重<view style="color: #FE3A62;"
144   - class="fs26">{{ g_filter.toFixTwo(item.standardweight)}}</view>斤
  128 + <view class="fs26 flex ai_c c-38">标准体重<view class="fs26 c-red">{{ g_filter.toFixTwo(item.standardweight)}}</view>斤
145 129 </view>
146   - <view style="color: #383838;" class="fs26 flex ai_c">应减斤数<view style="color: #FE3A62;"
147   - class="fs26">{{g_filter.toFixTwo(item.subtracted)}}</view>斤
  130 + <view class="fs26 flex ai_c c-38">应减斤数<view class="fs26 c-red">{{g_filter.toFixTwo(item.subtracted)}}</view>斤
148 131 </view>
149 132 </view>
150   -<view class="flex jc_sb"
151   - style="height: 68rpx;border-bottom: 1rpx solid #F0F0F0;padding: 20rpx 0;box-sizing: border-box;padding: 0 20rpx;">
152   - <view style="color: #383838;line-height: 68rpx;" class="fs26">减重顾问</view>
153   - <view style="color: #383838;line-height: 68rpx;" class="fs26">{{item.advisername || '-'}}</view>
  133 +<view class="flex jc_sb fw_bottom_box">
  134 + <view class="fs26 c-38 lh68">减重顾问</view>
  135 + <view class="fs26 c-38 lh68">{{item.advisername || '-'}}</view>
154 136 </view>
155   -<view class="flex jc_sb"
156   - style="height: 68rpx;border-bottom: 1rpx solid #F0F0F0;padding: 20rpx 0;box-sizing: border-box;padding: 0 20rpx;">
157   - <view style="color: #383838;line-height: 68rpx;" class="fs26">减重美体师</view>
158   - <view style="color: #383838;line-height: 68rpx;" class="fs26">{{item.beautyconsultant || '-'}}</view>
  137 +<view class="flex jc_sb fw_bottom_box">
  138 + <view class="fs26 c-38 lh68">减重美体师</view>
  139 + <view class="fs26 c-38 lh68">{{item.beautyconsultant || '-'}}</view>
159 140 </view>
160 141  
161 142 </view>
... ...
packageE/pages/user/slimming/slimming.wxss
... ... @@ -29,4 +29,116 @@ page{
29 29 }
30 30 .txt-center{
31 31 text-align: center;
  32 +}
  33 +.fw_box {
  34 + height: 210rpx;
  35 + box-sizing: border-box;
  36 +}
  37 +
  38 +.fw_img {
  39 + margin-right: 26rpx;
  40 + width: 158rpx;
  41 + height: 158rpx;
  42 + border-radius: 50%;
  43 +}
  44 +
  45 +.img_right {
  46 + width: 70%;
  47 + flex-direction: column;
  48 +}
  49 +
  50 +.c-38 {
  51 + color: #383838;
  52 +}
  53 +
  54 +.mgl {
  55 + margin-left: 30rpx;
  56 +}
  57 +
  58 +.fw_see_more {
  59 + border: 1.75rpx solid #FE3A62;
  60 + border-radius: 88rpx;
  61 + width: 123rpx;
  62 + height: 48rpx;
  63 + color: #FE3A62;
  64 + line-height: 48rpx;
  65 + text-align: center;
  66 +}
  67 +
  68 +.fw_detail_box {
  69 + flex-direction: column;
  70 + border-bottom: 1rpx solid #F0F0F0;
  71 +}
  72 +
  73 +.fw_day_weight {
  74 + color: #FE3A62;
  75 + font-size: 84rpx;
  76 + width: 250rpx;
  77 + text-align: right;
  78 + margin-left: 40rpx;
  79 +}
  80 +
  81 +.fw_no_day_weight {
  82 + color: #FE3A62;
  83 + font-size: 84rpx;
  84 + width: 250rpx;
  85 + text-align: right;
  86 + margin-left: 40rpx;
  87 + margin-right: 50rpx;
  88 + margin-bottom: 20rpx;
  89 +}
  90 +
  91 +.mgt40 {
  92 + margin-top: 40rpx
  93 +}
  94 +
  95 +.fw_edit_img_box {
  96 + width: 30rpx;
  97 + height: 30rpx;
  98 + margin-top: 20rpx;
  99 + padding: 20rpx;
  100 +}
  101 +
  102 +.fw_edit_img {
  103 + width: 30rpx;
  104 + height: 30rpx;
  105 +}
  106 +
  107 +.fw_tiny_box {
  108 + height: 160rpx;
  109 + padding: 20rpx 0;
  110 + box-sizing: border-box;
  111 + border-bottom: 1rpx solid #F0F0F0;
  112 +}
  113 +
  114 +.fw_tiny_top {
  115 + flex-direction: column;
  116 + width: 33%;
  117 +}
  118 +
  119 +.fs52 {
  120 + font-size: 52rpx;
  121 +}
  122 +
  123 +.fw_3weight {
  124 + height: 68rpx;
  125 + border-bottom: 1rpx solid #F0F0F0;
  126 + padding: 20rpx 0;
  127 + box-sizing: border-box;
  128 +}
  129 +
  130 +.fw_bottom_box {
  131 + height: 68rpx;
  132 + border-bottom: 1rpx solid #F0F0F0;
  133 + padding: 20rpx 0;
  134 + box-sizing: border-box;
  135 + padding: 0 20rpx;
  136 +}
  137 +
  138 +.lh68 {
  139 + line-height: 68rpx;
  140 +}
  141 +
  142 +.jc_c{
  143 + justify-content: center;
32 144 }
33 145 \ No newline at end of file
... ...