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 646 /* 图标字体(ty) */
647 647 @font-face {
648 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 654 .iconfont {
... ... @@ -659,6 +659,10 @@ background: #ffe3e2;
659 659 -moz-osx-font-smoothing: grayscale;
660 660 }
661 661  
  662 +.icon-sandian:before {
  663 + content: "\e665";
  664 +}
  665 +
662 666 .icon-meirong:before {
663 667 content: "\e60e";
664 668 }
... ...
packageA/pages/my_service/appment_main.wxml
  View file @7acc00c
... ... @@ -19,64 +19,179 @@
19 19 </view>
20 20  
21 21  
22   - <view class="table flex">
  22 + <view class="table flex fs26">
23 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 28 <view class="td">8:00</view>
26 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 40 </view>
28 41 <scroll-view scroll-x class="right" bindscroll="scroll">
29 42 <view class="flex t-c" bindtap="rect">
30 43 <view bindtap="rect">
31   - <view class="td blue">张三</view>
  44 + <view class="td bg-pink">张三</view>
32 45 <view class="td" bindtap="print">100</view>
33 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 62 </view>
35 63 <view>
36   - <view class="td blue">张三</view>
  64 + <view class="td bg-pink">张三</view>
37 65 <view class="td">100</view>
38 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 83 </view>
40 84 <view>
41   - <view class="td blue">张三</view>
  85 + <view class="td bg-pink">张三</view>
42 86 <view class="td" bindtap="print">100</view>
43 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 102 </view>
45 103 <view>
46   - <view class="td blue">张三</view>
  104 + <view class="td bg-pink">张三</view>
47 105 <view class="td">100</view>
48 106 <view class="td">200</view>
49 107 </view>
50 108 <view>
51   - <view class="td blue">张三</view>
  109 + <view class="td bg-pink">张三</view>
52 110 <view class="td">100</view>
53 111 <view class="td">200</view>
54 112 </view>
55 113 <view>
56   - <view class="td blue">张三</view>
  114 + <view class="td bg-pink">张三</view>
57 115 <view class="td">100</view>
58 116 <view class="td">200</view>
59 117 </view>
60 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 130 <view class="td">100</view>
63 131 <view class="td">200</view>
64 132 </view>
65 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 165 <view class="td">300</view>
68 166 <view class="td">300</view>
69 167 </view>
70 168 </view>
71 169 </scroll-view>
72 170 <view class="card">
  171 + <view class="t-c c-c7"><text class="iconfont icon-sandian"></text></view>
73 172 <view class="t-c pd20">
74 173 <text class="iconfont icon-meirong fs40"></text>
75 174 <view class="fs24">项目1</view>
76 175 </view>
77 176 <view class="t-c pd20">
78 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 195 </view>
81 196 </view>
82 197 </view>
... ...
packageA/pages/my_service/appment_main.wxss
  View file @7acc00c
... ... @@ -296,6 +296,9 @@ button {
296 296 .blue {
297 297 background: rgba(241, 252, 255, 1);
298 298 }
  299 +.bg-pink {
  300 + background-color: #FFDEF0;
  301 +}
299 302 .td {
300 303 width: 100rpx;
301 304 height: 100rpx;
... ... @@ -312,14 +315,61 @@ button {
312 315  
313 316 .right {
314 317 width: calc(100% - 102rpx);
315   - padding-right: 102rpx;
  318 +
316 319 box-sizing: border-box;
317 320 }
318 321  
319 322 .card {
320 323 position: fixed;
  324 + top: 50%;
321 325 right: 0;
  326 + transform: translateY(-50%);
322 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 }
... ...