SmartParks_uniapp/pages/sys/workbench/meet/meetDetail.vue

<template>
  <view class="container">
    <!-- 会议室详情展示 -->
    <view class="meeting-room-detail">
      <!-- 多图轮播 -->
      <view class="swiper-container">
        <swiper class="room-swiper" :autoplay="false"  @change="swiperChange">
          <swiper-item v-for="(img, index) in roomImages" :key="index">
            <image class="room-image" :src="img" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
        <view class="swiper-pagination">
          {{ currentIndex + 1 }}/{{ roomImages.length }}
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="basic-info">
        <text class="room-name">1号会议室3289</text>
        <view class="info-row">
          <view class="info-item" v-for="(item, index) in facilityItems" :key="index">
            <view class="icon-text-wrapper">
              <image class="info-icon" src="/static/ic_tip.png"></image>
              <text class="info-value">{{ item }}</text>
            </view>
          </view>
        </view>
        <view class="info-row">
          <image class="info-icon-location" src="/static/ic_location.png"></image>
          <text class="info-value">综合服务中心测试1栋1单元1层1222</text>
        </view>
      </view>

      <!-- 会议室描述 -->
      <view class="description-section">
        <text class="section-title">会议室描述</text>
        <text class="description-text">
          这间会议室坐落于办公楼中层，窗外是开阔的城市天际线，自然光透过双层隔音玻璃洒入，既保证了采光充足，又隔绝了外界的喧嚣。室内采用简约现代的装修风格，浅灰色地毯柔软厚实，吸音效果极佳，墙面以米白色为主调，搭配深木色饰条，营造出专业而不失温馨的氛围。

          会议室整体呈长方形，面积约80平方米，中间摆放着一张长8米、宽1.5米的胡桃木色实木会议桌，桌沿线条圆润，桌面光滑如镜，可同时容纳24人围坐。桌下隐藏着走线槽，确保各类设备的线缆整齐有序，不影响整体美观。

          在设备配置上，会议室堪称"智能高效"的典范。正面墙面上悬挂着一块120英寸的4K超清智能交互屏，支持触控操作和无线投屏，无论是播放PPT、视频会议还是实时标注，都能流畅完成。屏幕两侧各安装了一组高保真音响，配合吊顶中央的360度拾音麦克风，确保即使是坐在角落的参会者，也能清晰听到每一句话。

          此外，会议桌两端各配备了一台高清摄像头，可实现全景拍摄与特写切换，满足远程会议的多角度需求。房间四角安装了智能灯光系统，能根据不同场景自动调节亮度，比如投影时自动调暗，讨论时调至柔和模式。角落里还放置了一台大容量加湿器和空气净化器，时刻保持室内湿度与空气质量的舒适。
        </text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="price-info">
        <text class="current-price">¥168.00</text>
        <text class="original-price">¥190</text>
      </view>
      <button class="confirm-button" @click="confirmBooking">立即选择</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      roomImages: [
        '/static/meeting.png',
        '/static/meeting.png',
        '/static/meeting.png',
        '/static/meeting.png',
        '/static/meeting.png',
        '/static/meeting.png',
        '/static/meeting.png',
        '/static/meeting.png'
      ],
      facilityItems: [
        '可容纳119人',
        '音响',
        '音响',
        '音响',
        '音响',
        '投影仪',
        '话筒×2'
      ],
      currentDate: '',
      selectedSlot: 0,
    };
  },
  methods: {
    swiperChange(e) {
      this.currentIndex = e.detail.current;
    },
    confirmBooking() {
      uni.showToast({
        title: '预订成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.meeting-room-detail {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.swiper-container {
  position: relative;
  width: 100%;
  height: 400rpx;
  display: flex;
  justify-content: center;
}

.room-swiper {
  width: 96%;
  height: 400rpx;
  display: flex;
  justify-content: center;
}

.swiper-pagination {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.room-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.basic-info {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.room-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.info-row {
  display: flex;
  align-items: flex-end; /* 修改为底部对齐 */
  margin-bottom: 12rpx;
  font-size: 28rpx;
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  margin-right: 20rpx;
}

.icon-text-wrapper {
  display: flex;
  align-items: center; /* 确保图标和文字底部对齐 */
}

.info-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
  position: relative;
  top: -2rpx; /* 微调图标位置 */
}

.info-icon-location {
  width: 24rpx;
  height: 28rpx;
  margin-right: 10rpx;
  position: relative;
  top: -6rpx; /* 微调图标位置 */
}

.info-value {
  font-family: AdobeHeitiStd;
  font-weight: bold;
  color: #0F83F5;
  line-height: 1.2; /* 调整行高 */
  letter-spacing: 4rpx;
}

.description-section {
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.description-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 15rpx;
}

.current-price {
  font-size: 36rpx;
  color: #ff6b00;
  font-weight: bold;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.confirm-button {
  width: 280rpx;
  height: 100%;
  line-height: 120rpx;
  background: linear-gradient(to right, #ff9500, #ff6b00);
  color: #fff;
  font-size: 32rpx;
  border-radius: 30rpx 0 0 30rpx;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
  right: -30rpx;
}
</style>