虚拟点餐系统(1) 首页界面

初始化配置 app.json

{
  "pages":[
    "pages/index/index",
    "pages/review/review",
    "pages/order/order",
    "pages/member/member"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#00cc00",
    "navigationBarTitleText": "虚拟点餐系统",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "color":"#000000",
    "selectedColor":"#00cc00",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"主页",
        "iconPath":"icon/home.png",
        "selectedIconPath":"icon/home_fill.png"
      },
      {
        "pagePath":"pages/review/review",
        "text":"点评",
        "iconPath":"icon/review.png",
        "selectedIconPath":"icon/review_fill.png"
      },
      {
        "pagePath":"pages/order/order",
        "text":"订单",
        "iconPath":"icon/order.png",
        "selectedIconPath":"icon/order_fill.png"
      },
      {
        "pagePath":"pages/member/member",
        "text":"会员",
        "iconPath":"icon/member.png",
        "selectedIconPath":"icon/member_fill.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

餐厅logo和餐厅名称

<!--pages/index/index.wxml-->

<!--餐厅logo及名称 开始-->

<view class="index-box">
  <view class="index-logo">
    <image src="/icon/xnct.JPG"></image>
  </view>
  <view class="index-info">
      <text class="index-info-title">虚拟餐厅</text>
      <text class="index-info-welcome">欢迎光临</text>
  </view>
</view>

<!--餐厅logo及名称 结束-->

/* pages/index/index.wxss */
page{
  background:#f7f7f7; /*页面背景色*/
}

/*餐厅logo及名称 开始*/

.index-box{
  display:flex; /*弹性布局*/
  height:300rpx; /*高度*/
  background:#00cc00; /*背景颜色*/
}
.index-box .index-logo{
  width:150rpx;
  height:150rpx;
}
.index-box .index-logo image{
  width:100%;
  height:100%;
  border-radius:50%;  /*圆角*/
  box-shadow:5rpx 3rpx 3rpx #ccc; /*阴影效果*/
}
.index-box view{
  margin:20rpx 0 0 40rpx;
}
.index-box .index-info text{
  display:block;
  margin-bottom:20rpx;
}
.index-box .index-info .index-info-title{
  font-size:38rpx;
  font-weight:blod;
  color:#fff;
}
.index-box .index-info .index-info-welcome{
  font-size:30rpx;
  color:#ccc;
}

/*餐厅logo及名称 结束*/

 

餐厅服务

<!--pages/index/index.wxml-->
<!--内容 开始-->
<view class="index-content">
  <!--服务 开始-->
  <view class="index-service">
    <view>
      <image src="/icon/ScanCode.png" />
      <view class="index-service-title">扫码</view>
    </view>
    <view>
      <image src="/icon/reservation.png" />
      <view class="index-service-title">预约</view>
    </view>
    <view>
      <image src="/icon/pay.png" />
      <view class="index-service-title">买单</view>
    </view>
    <view>
      <image src="/icon/number.png" />
      <view class="index-service-title">取号</view>
    </view>
  </view>
  <!--服务 结束-->
</view>
<!--内容 结束-->

/* pages/index/index.wxss */
/*内容 开始*/
.index-content{
  width:96%;
  position:absolute;
  top:200rpx;
  left:2%;
}
/*内容结束*/

/*服务 开始*/
.index-service{
  display:flex;
  width:100%;
  height:180rpx;
  background:#fff;
}
.index-service image{
  width:80rpx;
  height:80rpx;
  margin:15rpx 50rpx;
}
.index-service .index-service-title{
  font-size:30rpx;
  text-align:center;
}
/*服务结束*/

餐厅详细信息

<!--餐厅详情介绍 开始-->
  <view class="index-detail">
    <view class="index-detail-store">
     <view class="index-detail-logo"> <image src="/icon/store.png" /></view>
     <view class="index-detail-title">虚拟餐厅</view>
     <view class="index-detail-store-coupon">领取优惠券</view>
    </view>
    <view class="index-detail-line"></view>
    <view class="index-detail-time">
     <view  class="index-detail-logo"> <image src="/icon/time.png" /></view>
     <view class="index-detail-title">10:30-20:30</view>
    </view>
    <view class="index-detail-line"></view>
    <view class="index-detail-phone">
     <view  class="index-detail-logo"> <image src="/icon/phone.png" /></view>
     <view class="index-detail-title">16800000000</view>
     <view  class="index-detail-arrow" ><text decode="{{true}}">&gt;</text></view>
    </view>
    <view class="index-detail-line"></view>
    <view class="index-detail-map">
     <view  class="index-detail-logo"> <image src="/icon/map.png" /></view>
     <view class="index-detail-title">人民广场1号</view>
     <view class="index-detail-arrow"><text decode="{{true}}">&gt;</text></view>
    </view>
    <view class="index-detail-env">
     <view>店内环境</view>
    </view>
    <view class="index-detail-env-img">
     <image src="/icon/index-1.png" />
    </view>
  </view>
  <!--餐厅详情介绍 结束-->

/* 餐厅详情介绍 开始*/
.index-detail{
  width:100%;
  margin-top:20rpx;
  background:#fff;
}
.index-detail .index-detail-store,.index-detail-time,.index-detail-phone,.index-detail-map{
  display:flex;
  height:120rpx;
  line-height:120rpx;
  padding:0 15rpx;
}
.index-detail .index-detail-logo image{
  width:60rpx;
  height:60rpx;
  vertical-align:middle;
}
.index-detail .index-detail-title{
  font-size:30rpx;
  color:#999;
  margin-left:20rpx;
}
.index-detail .index-detail-store-coupon{
  background:#f00;
  color:#fff;
  font-size:24rpx;
  border-radius:50%;
  width:180rpx;
  height:60rpx;
  line-height:60rpx;
  text-align:center;
  margin:30rpx 0 0 150rpx;
}
.index-detail .index-detail-arrow{
  font-size:38rpx;
  color:#999;
  margin-right:20rpx;
  width:60%;
  text-align:right;
}
.index-detail .index-detail-env{
  color:#999;
  padding:0 15rpx;
  margin-left:15rpx;
  border-left:5px solid #f00;
}
.index-detail .index-detail-env-img{
  width:100%;
  text-align:center;
  margin-top:20rpx;
}
.index-detail .index-detail-env-img image{
  width:96%;
}
.index-detail .index-detail-line{
  background:#eee;
  height:2px;
  width:96%;
  margin:0 auto;
}
/* 餐厅详情介绍 结束*/