wxd / MShopWeApp

Commit 54cf5620a7574d285ab2ce94e7d1626acd02d700

Authored by iceling
1 parent ba0a3d82

预约主界面排版

Inline Side-by-side
Showing 4 changed files with 235 additions and 0 deletions
pages/user/Appment_main/Appment_main.js 0 → 100644
  View file @54cf562
  1 +var e = getApp(), a = e.globalData.setting, os = a, t = e.request;
  2 +Page({
  3 +
  4 + /**
  5 + * 页面的初始数据
  6 + */
  7 + data: {
  8 + iurl: a.imghost,
  9 + },
  10 +
  11 + /**
  12 + * 生命周期函数--监听页面加载
  13 + */
  14 + onLoad: function (options) {
  15 +
  16 + },
  17 +
  18 + /**
  19 + * 生命周期函数--监听页面显示
  20 + */
  21 + onShow: function () {
  22 +
  23 + }
  24 +})
0 \ No newline at end of file 25 \ No newline at end of file
pages/user/Appment_main/Appment_main.json 0 → 100644
  View file @54cf562
  1 +{
  2 + "navigationBarTitleText": "预约服务"
  3 +}
0 \ No newline at end of file 4 \ No newline at end of file
pages/user/Appment_main/Appment_main.wxml 0 → 100644
  View file @54cf562
  1 +<view class="container">
  2 + <image class="main" src="{{iurl}}/miniapp/images/yyservice/main.png"></image>
  3 +
  4 + <view class="Fram">
  5 + <!-- 选择门店 -->
  6 + <view class="flex-vertical mabot">
  7 + <!-- 门店 -->
  8 + <view class="flex-vertical-between head fs28">
  9 + <view>门</view>
  10 + <view>店</view>
  11 + </view>
  12 +
  13 + <!-- 选择门店 -->
  14 + <view class="flex-vertical-between fs26 select">
  15 + <input placeholder="选择服务门店" />
  16 + <view class="angle">∟</view>
  17 + </view>
  18 + </view>
  19 +
  20 + <!-- 选择美容师 -->
  21 + <view class="flex-vertical mabot">
  22 + <!-- 门店 -->
  23 + <view class="flex-vertical-between head fs28">
  24 + <view>美</view>
  25 + <view>容</view>
  26 + <view>师</view>
  27 + </view>
  28 +
  29 + <!-- 选择门店 -->
  30 + <view class="flex-vertical-between fs26 Cosmetology">
  31 + <input placeholder="选择美容师" />
  32 + <view class="angle">∟</view>
  33 + </view>
  34 + <image class="user" src="{{iurl}}/miniapp/images/yyservice/user.png"></image>
  35 + </view>
  36 +
  37 + <!-- 选择时间 -->
  38 + <view class="flex-vertical mabot">
  39 + <!-- 门店 -->
  40 + <view class="head fs28">
  41 + <view>预约时间</view>
  42 + </view>
  43 +
  44 + <!-- 选择门店 -->
  45 + <view class="flex-vertical-between fs26 select">
  46 + <input placeholder="选择时间" />
  47 + <view class="angle">∟</view>
  48 + </view>
  49 + </view>
  50 +
  51 + <!-- 备注 -->
  52 + <view class="flex Remarks">
  53 + <!-- 门店 -->
  54 + <view class="flex-space-between head fs28">
  55 + <view>备</view>
  56 + <view>注</view>
  57 + </view>
  58 + <view class="flex">
  59 + <textarea placeholder="剩余可预约人数10人" placeholder-class="fs26">
  60 + </textarea>
  61 + </view>
  62 + </view>
  63 +
  64 + <view class="submitMax flex-space-between fs30">
  65 + <view class="appment flex-center">
  66 + <view>我的预约</view>
  67 + </view>
  68 + <view class="sub_appment flex-center">
  69 + <view>提交预约</view>
  70 + </view>
  71 + </view>
  72 +
  73 + <block wx:if="{{false}}">
  74 + <view class="subSuccess fs36">
  75 + <image class="Success" src="{{iurl}}/miniapp/images/yyservice/Success.png"></image>
  76 + <view>预约成功</view>
  77 + </view>
  78 + </block>
  79 +
  80 +
  81 +
  82 +
  83 + </view>
  84 +
  85 +
  86 +
  87 +
  88 +
  89 +
  90 +
  91 +
  92 +
  93 +
  94 +
  95 +
  96 +
  97 +
  98 +
  99 +
  100 +
  101 +</view>
0 \ No newline at end of file 102 \ No newline at end of file
pages/user/Appment_main/Appment_main.wxss 0 → 100644
  View file @54cf562
  1 +.container{
  2 + border-top: 7rpx solid rgb(245, 245, 245);
  3 +}
  4 +.main {
  5 + width: 100%;
  6 + height: 305rpx;
  7 +}
  8 +
  9 +.angle {
  10 + transform: rotate(-45deg);
  11 + margin-right: 15rpx;
  12 + margin-bottom: 10rpx;
  13 + font-size: 26rpx;
  14 +}
  15 +
  16 +.user {
  17 + width: 40rpx;
  18 + height: 45rpx;
  19 +}
  20 +
  21 +.Fram {
  22 + padding: 0rpx 60rpx;
  23 + margin-top: 60rpx;
  24 +}
  25 +
  26 +.subSuccess {
  27 + position: fixed;
  28 + z-index: 3;
  29 + top: 420rpx;
  30 + left: 110rpx;
  31 + width: 540rpx;
  32 + height: 315rpx;
  33 + background-color: #a6a6a6a4;
  34 + text-align: center;
  35 + border-radius: 20rpx;
  36 + color: rgb(255, 255, 255);
  37 + font-weight: bold;
  38 +}
  39 +
  40 +.Success {
  41 + width: 110rpx;
  42 + height: 110rpx;
  43 + margin-top: 70rpx;
  44 + margin-bottom: 30rpx;
  45 +}
  46 +
  47 +.appment, .sub_appment {
  48 + width: 270rpx;
  49 + height: 55rpx;
  50 + border-radius: 25rpx;
  51 +}
  52 +
  53 +.appment {
  54 + background-color: rgb(238, 238, 238);
  55 +}
  56 +
  57 +.sub_appment {
  58 + background-color: rgb(214, 1, 33);
  59 + color: rgb(255, 255, 255);
  60 +}
  61 +
  62 +.head {
  63 + width: 115rpx;
  64 + margin-right: 40rpx;
  65 +}
  66 +
  67 +textarea {
  68 + width: 435rpx;
  69 + background-color: rgb(238, 238, 238);
  70 + border-radius: 10rpx;
  71 + height: 115rpx;
  72 + padding-left: 40rpx;
  73 + padding-top: 20rpx;
  74 + margin-bottom: 60rpx;
  75 +}
  76 +
  77 +.mabot {
  78 + margin-bottom: 35rpx;
  79 +}
  80 +
  81 +.select {
  82 + width: 420rpx;
  83 + height: 50rpx;
  84 + line-height: 50rpx;
  85 + background-color: rgb(238, 238, 238);
  86 + border-radius: 10rpx;
  87 + padding-left: 40rpx;
  88 + padding-right: 15rpx;
  89 +}
  90 +
  91 +.Cosmetology {
  92 + padding-left: 40rpx;
  93 + padding-right: 15rpx;
  94 + width: 365rpx;
  95 + background-color: rgb(238, 238, 238);
  96 + height: 50rpx;
  97 + line-height: 50rpx;
  98 + border-radius: 10rpx;
  99 + margin-right: 15rpx;
  100 +}
  101 +.submitMax {
  102 + margin-top: 50rpx;
  103 + padding: 0rpx 15rpx;
  104 +}
  105 +.Remarks{
  106 + margin-top: 15rpx;
  107 +}
0 \ No newline at end of file 108 \ No newline at end of file