wxd / MShopWeApp

Commit 7acc00c8ad0e0e7a65f591bed3e9ef7efcce4f74

Authored by taiyuan
1 parent acda5d3b

预约服务预约表格

Inline Side-by-side
Showing 3 changed files with 186 additions and 17 deletions
app.wxss
  View file @7acc00c
@@ -646,9 +646,9 @@ background: #ffe3e2; @@ -646,9 +646,9 @@ background: #ffe3e2;
646 /* 图标字体(ty) */ 646 /* 图标字体(ty) */
647 @font-face { 647 @font-face {
648 font-family: 'iconfont'; /* Project id 2054717 */ 648 font-family: 'iconfont'; /* Project id 2054717 */
649 - src: url('//at.alicdn.com/t/font_2054717_yuggz804p8.woff2?t=1620980590195') format('woff2'),  
650 - url('//at.alicdn.com/t/font_2054717_yuggz804p8.woff?t=1620980590195') format('woff'),  
651 - url('//at.alicdn.com/t/font_2054717_yuggz804p8.ttf?t=1620980590195') format('truetype'); 649 + src: url('//at.alicdn.com/t/font_2054717_hcnqrwwkh97.woff2?t=1620986106765') format('woff2'),
  650 + url('//at.alicdn.com/t/font_2054717_hcnqrwwkh97.woff?t=1620986106765') format('woff'),
  651 + url('//at.alicdn.com/t/font_2054717_hcnqrwwkh97.ttf?t=1620986106765') format('truetype');
652 } 652 }
653 653
654 .iconfont { 654 .iconfont {
@@ -659,6 +659,10 @@ background: #ffe3e2; @@ -659,6 +659,10 @@ background: #ffe3e2;
659 -moz-osx-font-smoothing: grayscale; 659 -moz-osx-font-smoothing: grayscale;
660 } 660 }
661 661
  662 +.icon-sandian:before {
  663 + content: "\e665";
  664 +}
  665 +
662 .icon-meirong:before { 666 .icon-meirong:before {
663 content: "\e60e"; 667 content: "\e60e";
664 } 668 }
packageA/pages/my_service/appment_main.wxml
  View file @7acc00c
@@ -19,64 +19,179 @@ @@ -19,64 +19,179 @@
19 </view> 19 </view>
20 20
21 21
22 - <view class="table flex"> 22 + <view class="table flex fs26">
23 <view class="left t-c"> 23 <view class="left t-c">
24 - <view class="td">时间</view> 24 + <view class="td pr">
  25 + <view class="time-box"><view class="time">时间</view></view>
  26 + <view class="md-box"><view class="md">美导</view></view>
  27 + </view>
25 <view class="td">8:00</view> 28 <view class="td">8:00</view>
26 <view class="td">9:00</view> 29 <view class="td">9:00</view>
  30 + <view class="td">10:00</view>
  31 + <view class="td">11:00</view>
  32 + <view class="td">12:00</view>
  33 + <view class="td">13:00</view>
  34 + <view class="td">14:00</view>
  35 + <view class="td">15:00</view>
  36 + <view class="td">16:00</view>
  37 + <view class="td">17:00</view>
  38 + <view class="td">18:00</view>
  39 + <view class="td">19:00</view>
27 </view> 40 </view>
28 <scroll-view scroll-x class="right" bindscroll="scroll"> 41 <scroll-view scroll-x class="right" bindscroll="scroll">
29 <view class="flex t-c" bindtap="rect"> 42 <view class="flex t-c" bindtap="rect">
30 <view bindtap="rect"> 43 <view bindtap="rect">
31 - <view class="td blue">张三</view> 44 + <view class="td bg-pink">张三</view>
32 <view class="td" bindtap="print">100</view> 45 <view class="td" bindtap="print">100</view>
33 <view class="td">200</view> 46 <view class="td">200</view>
  47 + <view class="td">200</view>
  48 + <view class="td">200</view>
  49 + <view class="td">200</view>
  50 + <view class="td">200</view>
  51 + <view class="td">200</view>
  52 + <view class="td">200</view>
  53 + <view class="td">200</view>
  54 + <view class="td">200</view>
  55 + <view class="td">200</view>
  56 + <view class="td">200</view>
  57 + <view class="td">200</view>
  58 + <view class="td">200</view>
  59 + <view class="td">200</view>
  60 + <view class="td">200</view>
  61 + <view class="td">200</view>
34 </view> 62 </view>
35 <view> 63 <view>
36 - <view class="td blue">张三</view> 64 + <view class="td bg-pink">张三</view>
37 <view class="td">100</view> 65 <view class="td">100</view>
38 <view class="td">200</view> 66 <view class="td">200</view>
  67 + <view class="td">200</view>
  68 + <view class="td">200</view>
  69 + <view class="td">200</view>
  70 + <view class="td">200</view>
  71 + <view class="td">200</view>
  72 + <view class="td">200</view>
  73 + <view class="td">200</view>
  74 + <view class="td">200</view>
  75 + <view class="td">200</view>
  76 + <view class="td">200</view>
  77 + <view class="td">200</view>
  78 + <view class="td">200</view>
  79 + <view class="td">200</view>
  80 + <view class="td">200</view>
  81 + <view class="td">200</view>
  82 + <view class="td">200</view>
39 </view> 83 </view>
40 <view> 84 <view>
41 - <view class="td blue">张三</view> 85 + <view class="td bg-pink">张三</view>
42 <view class="td" bindtap="print">100</view> 86 <view class="td" bindtap="print">100</view>
43 <view class="td">200</view> 87 <view class="td">200</view>
  88 +
  89 + <view class="td">200</view>
  90 + <view class="td">200</view>
  91 + <view class="td">200</view>
  92 + <view class="td">200</view>
  93 + <view class="td">200</view>
  94 + <view class="td">200</view>
  95 + <view class="td">200</view>
  96 + <view class="td">200</view>
  97 + </view>
  98 + <view>
  99 + <view class="td bg-pink">张三</view>
  100 + <view class="td">100</view>
  101 + <view class="td">200</view>
44 </view> 102 </view>
45 <view> 103 <view>
46 - <view class="td blue">张三</view> 104 + <view class="td bg-pink">张三</view>
47 <view class="td">100</view> 105 <view class="td">100</view>
48 <view class="td">200</view> 106 <view class="td">200</view>
49 </view> 107 </view>
50 <view> 108 <view>
51 - <view class="td blue">张三</view> 109 + <view class="td bg-pink">张三</view>
52 <view class="td">100</view> 110 <view class="td">100</view>
53 <view class="td">200</view> 111 <view class="td">200</view>
54 </view> 112 </view>
55 <view> 113 <view>
56 - <view class="td blue">张三</view> 114 + <view class="td bg-pink">张三</view>
57 <view class="td">100</view> 115 <view class="td">100</view>
58 <view class="td">200</view> 116 <view class="td">200</view>
59 </view> 117 </view>
60 <view> 118 <view>
61 - <view class="td blue">张三</view> 119 + <view class="td bg-pink">1张三</view>
  120 + <view class="td">300</view>
  121 + <view class="td">300</view>
  122 + </view>
  123 + <view>
  124 + <view class="td bg-pink">张三</view>
  125 + <view class="td">100</view>
  126 + <view class="td">200</view>
  127 + </view>
  128 + <view>
  129 + <view class="td bg-pink">张三</view>
62 <view class="td">100</view> 130 <view class="td">100</view>
63 <view class="td">200</view> 131 <view class="td">200</view>
64 </view> 132 </view>
65 <view> 133 <view>
66 - <view class="td blue">1张三</view> 134 + <view class="td bg-pink">1张三</view>
  135 + <view class="td">300</view>
  136 + <view class="td">300</view>
  137 + </view>
  138 + <view>
  139 + <view class="td bg-pink">张三</view>
  140 + <view class="td">100</view>
  141 + <view class="td">200</view>
  142 + </view>
  143 + <view>
  144 + <view class="td bg-pink">张三</view>
  145 + <view class="td">100</view>
  146 + <view class="td">200</view>
  147 + </view>
  148 + <view>
  149 + <view class="td bg-pink">1张三</view>
  150 + <view class="td">300</view>
  151 + <view class="td">300</view>
  152 + </view>
  153 + <view>
  154 + <view class="td bg-pink">张三</view>
  155 + <view class="td">100</view>
  156 + <view class="td">200</view>
  157 + </view>
  158 + <view>
  159 + <view class="td bg-pink">张三</view>
  160 + <view class="td">100</view>
  161 + <view class="td">200</view>
  162 + </view>
  163 + <view>
  164 + <view class="td bg-pink">1张三</view>
67 <view class="td">300</view> 165 <view class="td">300</view>
68 <view class="td">300</view> 166 <view class="td">300</view>
69 </view> 167 </view>
70 </view> 168 </view>
71 </scroll-view> 169 </scroll-view>
72 <view class="card"> 170 <view class="card">
  171 + <view class="t-c c-c7"><text class="iconfont icon-sandian"></text></view>
73 <view class="t-c pd20"> 172 <view class="t-c pd20">
74 <text class="iconfont icon-meirong fs40"></text> 173 <text class="iconfont icon-meirong fs40"></text>
75 <view class="fs24">项目1</view> 174 <view class="fs24">项目1</view>
76 </view> 175 </view>
77 <view class="t-c pd20"> 176 <view class="t-c pd20">
78 <text class="iconfont icon-meirong fs40"></text> 177 <text class="iconfont icon-meirong fs40"></text>
79 - <view class="fs24">项目1</view> 178 + <view class="fs24">项目2</view>
  179 + </view>
  180 + <view class="t-c pd20">
  181 + <text class="iconfont icon-meirong fs40"></text>
  182 + <view class="fs24">项目3</view>
  183 + </view>
  184 + <view class="t-c pd20">
  185 + <text class="iconfont icon-meirong fs40"></text>
  186 + <view class="fs24">项目4</view>
  187 + </view>
  188 + <view class="t-c pd20">
  189 + <text class="iconfont icon-meirong fs40"></text>
  190 + <view class="fs24">项目5</view>
  191 + </view>
  192 + <view class="t-c pd20">
  193 + <text class="iconfont icon-meirong fs40"></text>
  194 + <view class="fs24">项目6</view>
80 </view> 195 </view>
81 </view> 196 </view>
82 </view> 197 </view>
packageA/pages/my_service/appment_main.wxss
  View file @7acc00c
@@ -296,6 +296,9 @@ button { @@ -296,6 +296,9 @@ button {
296 .blue { 296 .blue {
297 background: rgba(241, 252, 255, 1); 297 background: rgba(241, 252, 255, 1);
298 } 298 }
  299 +.bg-pink {
  300 + background-color: #FFDEF0;
  301 +}
299 .td { 302 .td {
300 width: 100rpx; 303 width: 100rpx;
301 height: 100rpx; 304 height: 100rpx;
@@ -312,14 +315,61 @@ button { @@ -312,14 +315,61 @@ button {
312 315
313 .right { 316 .right {
314 width: calc(100% - 102rpx); 317 width: calc(100% - 102rpx);
315 - padding-right: 102rpx; 318 +
316 box-sizing: border-box; 319 box-sizing: border-box;
317 } 320 }
318 321
319 .card { 322 .card {
320 position: fixed; 323 position: fixed;
  324 + top: 50%;
321 right: 0; 325 right: 0;
  326 + transform: translateY(-50%);
322 background-color: white; 327 background-color: white;
323 - box-shadow: 4px 0px 12px #e7e9eb;  
324 - border-radius: 8rpx; 328 +
  329 + border-radius: 10rpx;
  330 + box-shadow: -2px 0px 6px #ccc;
  331 +}
  332 +
  333 +.icon-meirong {
  334 + color: pink;
  335 +}
  336 +
  337 +
  338 +
  339 +.time-box {
  340 + width: 0;
  341 + height: 0;
  342 + border-width: 50rpx;
  343 + border-style: solid;
  344 + border-color: transparent transparent white white;
  345 + position: absolute;
  346 + left: 0;
  347 + bottom: 0;
  348 +}
  349 +.time {
  350 + position: absolute;
  351 + bottom: -22px;
  352 + width: 53rpx;
  353 + z-index: 999;
  354 + left: -22px;
  355 + font-size: 12px;
  356 +}
  357 +
  358 +.md-box {
  359 + width: 0;
  360 + height: 0;
  361 + border-width: 50rpx;
  362 + border-style: solid;
  363 + border-color: #FFDEF0 #FFDEF0 transparent transparent;
  364 + position: absolute;
  365 + right: 0;
  366 + top: 0;
  367 +}
  368 +.md {
  369 + position: absolute;
  370 + top: -18px;
  371 + width: 53rpx;
  372 + z-index: 999;
  373 + right: -24px;
  374 + font-size: 12px;
325 } 375 }