描述:空间设施

miniprogram/pages/meeting/meetingRoom/meetingFacilities/meetingFacilities.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    },
+    "navigationBarTitleText": "空间设施"
 }

miniprogram/pages/meeting/meetingRoom/meetingFacilities/meetingFacilities.wxml

@@ -0,0 +1,32 @@
+<view class="containerView">
+    <!-- 设施 -->
+    <view class="facilitiesView">
+        <view class="leftLineTitle">空间设施</view>
+        <view class="itemView">
+            <view class="singleItem" wx:for="{{10}}">
+                <van-icon name="after-sale" size="40px" />
+                <view class="name">VIP</view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 增值服务 -->
+    <view class="serviceView">
+        <view class="leftLineTitle">增值服务</view>
+        <view class="serviceItemView">
+            <view class="serviceItem" wx:for="{{6}}">
+                <view class="name">专业设备调试、音源专业设备调试、音源专业设备调试、音源专业设备调试、音源</view>
+                <view class="content">500元、800元、1000元/场次</view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 声明信息 -->
+    <view class="statementView">
+        <view class="content">如果您需要获取增值服务，请随时联系我们的现场运营人员如果您需要获取增值服务，请随时联系我们的现场运营人员</view>
+        <view class="content">张三：15116171818</view>
+        <view class="content">李四：15161718999</view>
+        <view class="content">我们将竭诚为您提供帮助</view>
+    </view>
+
+</view>

miniprogram/pages/meeting/meetingRoom/meetingFacilities/meetingFacilities.wxss

@@ -0,0 +1,101 @@
+.containerView {
+    height: 100vh;
+    width: 100vw;
+    overflow: auto;
+    padding-bottom: 100rpx;
+    background: #ffffff;
+}
+
+.leftLineTitle {
+    border-left: 8rpx solid #76aef9;
+    padding-left: 10rpx;
+    font-size: 32rpx;
+}
+
+.facilitiesView {
+    margin: 50rpx 20rpx;
+}
+
+.facilitiesView .itemView {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.facilitiesView .itemView .singleItem {
+    box-sizing: border-box;
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30rpx;
+}
+
+.facilitiesView .itemView .singleItem .name {
+    margin-top: 4rpx;
+}
+
+.serviceView {}
+
+.serviceView .leftLineTitle {
+    margin-left: 20rpx;
+}
+
+.serviceView .serviceItemView {
+    margin-top: 30rpx;
+}
+
+.serviceView .serviceItemView .serviceItem {
+    border-bottom: 1px solid rgb(126, 126, 126, 0.2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    word-break: break-all;
+    padding: 40rpx 20rpx;
+}
+
+.serviceView .serviceItemView .serviceItem:first-of-type {
+    border-top: 1px solid rgb(126, 126, 126, 0.2);
+}
+
+.serviceView .serviceItem .name {
+    position: relative;
+    flex: 1;
+    margin-right: 20rpx;
+    padding-left: 30rpx;
+    font-size: 26rpx;
+}
+
+.serviceView .serviceItem .name::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 12rpx;
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 20rpx;
+    background: #4c4949;
+}
+
+.serviceView .serviceItem .content {
+    color: red;
+    font-size: 24rpx;
+    max-width: 400rpx;
+}
+
+.statementView {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 80rpx 40rpx;
+}
+
+.statementView .content {
+    font-size: 24rpx;
+    color: gray;
+    margin-bottom: 10rpx;
+}

miniprogram/pages/meeting/meetingRoom/meetingRoom.js

@@ -46,6 +46,13 @@ Page({
         })
     },
 
+    // 跳转空间设施
+    jumpMeetingFacilities() {
+        wx.navigateTo({
+          url: '/pages/meeting/meetingRoom/meetingFacilities/meetingFacilities',
+        })
+    },
+
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

miniprogram/pages/meeting/meetingRoom/meetingRoom.wxml

@@ -36,7 +36,7 @@
     </view>
 
     <!-- 设施 -->
-    <view class="facilitiesView">
+    <view class="facilitiesView" bind:tap="jumpMeetingFacilities">
         <view class="leftLineTitle">空间设施</view>
         <view class="itemView">
             <view class="singleItem" wx:for="{{10}}">