<template>
  <view class="restaurant-detail" v-if="details.Name">
    <scroll-view
      scroll-y="true"
      style="width: 100%; height: 100%"
      @scroll="scroll"
    >
      <view class="media" :style="{ opacity: 100 - boxOption + '%' }">
        <u-swiper
          :list="imgsList"
          :effect3d="false"
          :height="407"
          :interval="5000"
          :border-radius="0"
          @click="openPicture"
          name="picUrl"
          v-if="active == 1"
        ></u-swiper>
        <!-- #ifdef MP-WEIXIN  -->
        <view
          @click="goback"
          :style="[titleStyle, { opacity: '100% !important' }]"
          style="position: fixed; top: 0; left: 0; padding-left: 6rpx"
        >
          <u-icon
            name="arrow-left"
            size="44"
            color="#FFF"
            style="margin-top: 22rpx"
          ></u-icon>
        </view>
        <!-- #endif -->
      </view>
      <view class="restaurant-title" :style="[titleStyle]">
        <view @click="goback">
          <!-- #ifdef MP-WEIXIN  -->
          <u-icon name="arrow-left" size="44"></u-icon>
          <!-- #endif -->
        </view>
        <view
          style="
            flex: 1;
            margin-left: 30rpx;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          "
          class="name-ali"
          >{{ details.Name }}</view
        >
      </view>
      <view class=""> </view>
      <view class="restaurant-content">
        <view class="restaurant-base">
          <view class="head">
            <view style="flex: 1">
              <view class="restaurant-name">{{ details.Name }}</view>
              <view
                class="restaurant-tag"
                style="display: flex; flex-wrap: wrap"
              >
                <view v-for="(item, index) in details.FoodTag" :key="index">
                  <u-tag
                    style="margin-right: 22rpx"
                    :text="item"
                    mode="plain"
                    border-color="#DFBE6E"
                    color="#DFBE6E"
                    size="mini"
                    v-if="item"
                  />
                </view>
                <view
                  v-for="(item, index) in details.GeographicTag"
                  :key="index"
                >
                  <u-tag
                    style="margin-right: 22rpx"
                    :text="item"
                    mode="plain"
                    border-color="#DFBE6E"
                    color="#DFBE6E"
                    size="mini"
                    v-if="item"
                  />
                </view>
              </view>
            </view>
            <!-- 关注 -->
            <view class="op-box">
              <image
                v-if="details.FollowId === 0"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622453740000_840.png"
                @click="changeLike"
              ></image>
              <image
                v-if="details.FollowId > 0"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622453740000_764.png"
                @click="changeLike"
              ></image>
            </view>
          </view>
          <view
            class="location"
            style="
              margin-bottom: 36rpx;
              padding-bottom: 36rpx;
              border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            "
          >
            <view class="loc-left">
              <view class="loc-name">
                <u-icon name="clock" size="28" />
                <text style="margin-left: 14rpx; width: 70%"
                  >营业时间 {{ details.OpeningHours }}</text
                >
                <u-tag
                  style="margin-left: 22rpx"
                  text="营业中"
                  bg-color="#DFBE6E"
                  border-color="#DFBE6E"
                  color="#ffffff"
                  v-if="details.BusinessState === 1"
                />
              </view>
              <view class="loc-remark">
                <!-- <view>无休息日，全年营业</view> -->
              </view>
            </view>
          </view>
          <view class="location" style="margin-bottom: 50rpx">
            <view class="loc-left">
              <view class="loc-name">
                <u-icon name="location" size="28" />
                <text style="margin-left: 14rpx">{{ details.Address }}</text>
              </view>
              <view class="loc-remark">
                <view>{{ details.ParkInfo }}</view>
                <!-- <view>距车站约1km，驾车约5min</view> -->
              </view>
            </view>
            <view class="loc-right">
              <text
                style="margin-right: 20rpx"
                @click="goMap(details.Address, details.Lng, details.Lat)"
                >地图详情</text
              >
              <u-icon name="arrow" size="20" />
            </view>
          </view>

          <view class="empty-block" style="margin: 0 -50rpx"></view>
          <view class="big-title" style="margin-top: 50rpx">
            <text>推荐菜品</text>
          </view>
          <view class="chooseDate" @click="chooseDate">
            <text>选择日期</text>
            <text v-if="Date">:{{ Date }}</text>
          </view>

          <ul
            class="title-style-one hr"
            v-if="details.FoodRecommendList.length > 0"
          >
            <li v-for="(item, index) in details.FoodRecommendList" :key="index">
              <view class="item-title regular">{{ item.FoodName }}</view>
            </li>
          </ul>
          <view class="big-title">
            <text>优惠套餐</text>
          </view>
          <view class="restaurant-room">
            <view class="no-data" v-if="details.resultMealList.length === 0">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/no-data.png"
                mode="aspectFit"
                class="no-data-img"
              ></image>
              <view class="zhanwu"> 暂无数据 </view>
            </view>
            <view
              v-for="(item, index) in details.resultMealList"
              :key="index"
              class="room-list"
              v-if="details.resultMealList.length >= 0"
            >
              <package-good
                :data="item"
                @success="previewOrder(item)"
              ></package-good>
              <!-- <package-good-test></package-good-test> -->
            </view>
          </view>
          <view class="empty-block" style="margin-bottom: 40rpx"></view>
          <view class="">
            <view class="flex">
              <view class="big-title">
                <text>发现周边</text>
              </view>
              <view class="flex" style="margin-left: 64rpx">
                <view
                  class="nearby-type"
                  :class="{ active: nearbyType == 0 }"
                  @click="changeNearbyType(0)"
                  >景区
                </view>
                <view
                  class="nearby-type"
                  :class="{ active: nearbyType == 1 }"
                  @click="changeNearbyType(1)"
                  >酒店
                </view>
              </view>
            </view>
            <view class="flex" style="margin: 50rpx 0; overflow-x: auto">
              <template v-if="nearbyType == 0">
                <template
                  v-if="details.TicketCouponsList"
                  v-for="subItem in details.TicketCouponsList"
                >
                  <near-good :goodItem="subItem" :goodType="2"></near-good>
                </template>
              </template>
              <template v-if="nearbyType == 1">
                <template
                  v-if="details.HotelList"
                  v-for="subItem in details.HotelList"
                >
                  <near-good :goodItem="subItem" :goodType="1"></near-good>
                </template>
              </template>
            </view>
            <view class="flex">
              <view class="big-title">
                <text>精选推荐</text>
              </view>
              <view class="flex" style="margin-left: 64rpx">
                <view class="nearby-type active"
                  >附近满足条件美食({{ foodArr.length }})</view
                >
              </view>
            </view>
            <view>
              <recommed-hotel
                :foodArr="foodArr"
                :dayObj="dayObj"
                :searchObj="searchObj"
              >
              </recommed-hotel>
            </view>
          </view>
        </view>

        <u-popup
          v-model="showTimePopup"
          mode="bottom"
          border-radius="40"
          :safe-area-inset-bottom="true"
        >
          <view class="" style="margin-top: 40rpx">
            <calendar
              ref="calendar"
              :insert="true"
              :selected="calendar"
              @change="changeDate"
            ></calendar>
            <view class="caledar-btn" @click="confirm"> 确定 </view>
          </view>
        </u-popup>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import packageGood from "./components/package-good.vue";
import packageGoodTest from "./components/package-good2.vue";
import nearGood from "./components/near-good.vue";
import recommedHotel from "./components/recommed-hotel.vue";
import recommedRestaurant from "./components/recommed-restaurant.vue";
import calendar from "./components/uni-calendar/uni-calendar.vue";
export default {
  data() {
    return {
      imgsList: [],
      ID: 0,
      details: {},
      typeList: [
        {
          Id: 0,
          Name: "视频",
        },
        {
          Id: 1,
          Name: "图片",
        },
      ],
      boxOption: 0,
      titleStyle: {},
      mainColor: "",
      showTimePopup: false,
      controls: false,
      videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
      active: 1,
      nearbyType: 0,
      calendar: [
        {
          date: "",
          info: "",
        },
      ],
      Date: "",
      Up: 0,
      nearbyType: 0,
      foodArr: [], //推荐景点
    };
  },
  components: {
    packageGood,
    packageGoodTest,
    nearGood,
    recommedRestaurant,
    calendar,
    recommedHotel,
  },
  created() {
    let d3 = new Date();
    let nextDate = new Date(d3.getTime() + 24 * 60 * 60 * 1000);
    let year = nextDate.getFullYear();
    let month = nextDate.getMonth() + 1;
    if (month < 10) {
      month = "0" + month;
    }
    let day = nextDate.getDate();
    if (day < 10) {
      day = "0" + day;
    }
    let tomorrow = year + "-" + month + "-" + day;
    this.calendar[0].date = tomorrow;

    this.Date = tomorrow;
    console.log(this.calendar, this.Date);
    this.Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
  },
  onShareTimeline() {
    // setTimeout(() => {
    //   console.log("分享朋友圈调用");
    // }, 2500);
    let uid = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserId
      : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").SmallShopId
      : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
        : 0;
    }
    let title = this.details.Name ? this.details.Name : "美食";
    let imageUrl = this.details.AllPicList[0].TagPicList[0].Path
      ? this.details.AllPicList[0].TagPicList[0].Path
      : "";
    let id = this.ID;
    return {
      title: title,
      query:
        "id=" +
        this.id +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up,
      imageUrl: imageUrl,
    };
  },
  onShareAppMessage(res) {
    // setTimeout(() => {
    //   console.log("分享好友调用");
    // }, 2500);
    let u = uni.getStorageSync("mall_UserInfo");
    let uid = u.UserId ? u.UserId : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
    }
    console.log(
      "/pages/index/index?id=" +
        this.ID +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up +
        "&JumpType=16"
    );
    return {
      title: this.details.Name ? this.details.Name : "美食",
      path:
        "/pages/index/index?id=" +
        this.ID +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        this.Up +
        "&JumpType=16",
      imageUrl: this.details.AllPicList[0].TagPicList[0].Path
        ? this.details.AllPicList[0].TagPicList[0].Path
        : "",
    };
  },
  onLoad(options) {
    console.log(options);
    if (options && options.id) {
      this.ID = options.id;
      this.getDetail();
    }
    let that = this;
    uni.getSystemInfo({
      success(res) {
        that.titleStyle = {
          height: "45px",
          paddingTop: `${res.statusBarHeight}px`,
          opacity: "0",
        };
      },
    });
    this.mainColor = this.$uiConfig.mainColor;
    this.getRecomHotel();
  },
  methods: {
    chooseDate() {
      this.showTimePopup = true;
      // this.$refs.calendar.open();
    },
    changeDate(e) {
      this.Date = e.fulldate;
      this.calendar[0].date = e.fulldate;
    },
    confirm() {
      this.showTimePopup = false;
      this.getMealListByDate();
    },
    goMap(name, lon, lat) {
      let newLon = parseFloat(lon);
      let newLat = parseFloat(lat);
      uni.openLocation({
        latitude: newLat,
        longitude: newLon,
        scale: 18,
        name,
        address: name,
        success: (res) => {
          // console.log(res)
        },
        fail: (err) => {
          // console.log(err)
        },
      });
    },
    openPicture() {
      uni.navigateTo({
        url: "/pages/restaurant/picture?id=" + this.ID,
      });
    },
    openDescription() {
      uni.navigateTo({
        url: "/pages/restaurant/description",
      });
    },

    changeLike() {
      this.request2(
        {
          url: "/api/AppletDining/GetFollowDining",
          data: {
            ID: this.details.FollowId,
            SourceId: this.details.ID,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.getDetail();
          }
        }
      );
    },

    scroll(e) {
      this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
      this.titleStyle.opacity =
        e.detail.scrollTop - 100 < 0
          ? 0
          : Math.floor(e.detail.scrollTop - 100) / 100 > 1
          ? 1
          : Math.floor(e.detail.scrollTop - 100) / 100;
      this.$forceUpdate();
    },

    goback() {
      uni.navigateBack({
        delta: 1,
      });
    },
    changeHandler(i) {
      this.active = i;
    },
    //获取详情
    getDetail() {
      uni.showLoading({
        title: "加载中...",
      });
      this.request2(
        {
          url: "/api/AppletDining/GetDiningDetails",
          data: {
            ID: this.ID,
          },
        },
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            res.data.FoodTag = res.data.FoodTag.split(",");
            res.data.GeographicTag = res.data.GeographicTag.split(",");
            this.details = res.data;

            this.imgsList = [];
            res.data.AllPicList[0].TagPicList.map((i) => {
              let obj = {
                picUrl: i.Path,
              };
              this.imgsList.push(obj);
            });
          }
        },
        (err) => {
          uni.hideLoading();
        }
      );
    },
    //根据日期获取套餐列表
    getMealListByDate() {
      this.request2(
        {
          url: "/api/AppletDining/GetDiningMealList",
          data: {
            ID: this.ID,
            BuyDate: this.Date,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.details.resultMealList = res.data;
          }
        }
      );
    },
    previewOrder(item) {
      let data = {
        MealName: item.MealName,
        date: this.Date,
        Unit_Price:
          this.$utils.getretailer() == true ? item.LPriceB : item.LPriceC,
        MealId: item.Id,
        DiningId: this.details.ID,
        MakeDay: item.MakeDay,
        IsHoliday: item.IsHoliday,
        OtherTag: item.OtherTag,
      };
      uni.navigateTo({
        url:
          "/pages/restaurant/order?data=" +
          encodeURIComponent(JSON.stringify(data)),
      });
    },
    changeNearbyType(t) {
      this.nearbyType = t;
    },
    //获取推餐食
    getRecomHotel() {
      this.request2(
        {
          url: "/api/AppletDining/GetDiningPage",
          data: {
            pageIndex: 1,
            pageSize: 10,
            Name: "",
            OrderBy: 3,
            FoodTypeIds: 0,
            DiningPriceType: 0,
            ID: parseInt(this.ID),
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            console.log(res, "推荐景点");
            this.foodArr = [];
            let tempHotel = res.data.pageData;
            tempHotel.forEach((x) => {
              if (this.foodArr.length < 2) {
                this.foodArr.push(x);
              }
            });
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.no-data {
  margin: 40rpx 0;
  .no-data-img {
    width: 180rpx;
    height: 240rpx;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .zhanwu {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 20rpx;
  }
}

.chooseDate {
  width: 275rpx;
  margin: 20rpx 0;
  /* display: inline-block; */
  /* height: 60rpx; */
  background-color: #ecf1f4;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
  text-align: center;
  line-height: 58rpx;
  padding: 0 10rpx;
}

.caledar-btn {
  width: 700rpx;
  height: 80rpx;
  background-color: #111111;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 78rpx;
  margin: 20rpx auto;
}

.restaurant-detail {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  font-family: "pingfang";
}

.restaurant-detail .flex {
  display: flex;
  align-items: center;
}

.restaurant-detail .f12 {
  font-size: 24rpx !important;
}

.restaurant-detail .king {
  color: #dfbe6e !important;
}

.restaurant-detail .regular {
  font-weight: 500 !important;
}

.restaurant-detail .restaurant-content {
  position: relative;
  z-index: 2;
  // top: -110rpx;
}

.restaurant-detail .restaurant-content .date-box {
  margin: 30rpx 0;
  background: #ecf1f4;
  border-radius: 16rpx;
  padding: 25rpx;
}

.restaurant-detail .restaurant-content .date-box .hr-line {
  width: 24rpx;
  height: 4rpx;
  background: #222;
  margin-right: 24rpx;
}

.restaurant-detail .restaurant-content .date-box .ver-line {
  width: 1px;
  height: 49rpx;
  background: #a8a8a8;
  opacity: 0.3;
  margin-right: 24rpx;
}

.restaurant-detail .restaurant-content .date-box .date {
  font-size: 24rpx;
  font-weight: bold;
  color: #111111;
  margin-right: 24rpx;
}

.restaurant-detail .restaurant-content .date-box .date .date-week {
  font-size: 24rpx;
  font-weight: 500;
  color: #6e6e6e;
  margin-left: 18rpx;
}

.restaurant-detail .restaurant-content .restaurant-more-info {
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #ffffff;
  border: 1px solid #111111;
  border-radius: 8rpx;
  margin: 0 auto;
  font-size: 24rpx;
  font-weight: 500;
  color: #1f1f1f;
  text-align: center;
}

.restaurant-detail .empty-block {
  height: 20rpx;
  background-color: #ecf1f4;
}

.restaurant-detail .restaurant-content .detail-box {
  padding: 50rpx;
}

.restaurant-detail .restaurant-content .nearby-type {
  padding: 0 16rpx;
  height: 40rpx;
  line-height: 40rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-right: 10rpx;

  font-size: 28rpx;
  font-weight: 500;
  color: #1f1f1f;
}

.restaurant-detail .restaurant-content .nearby-type.active {
  color: #dfbe6e;
  background: rgba(223, 190, 110, 0.2);
}

.restaurant-detail .restaurant-content .title-style-one {
  padding: 0;
  margin: 50rpx 0;
  display: block;
}

.restaurant-detail .restaurant-content .title-style-one.hr {
  display: flex;
  flex-wrap: wrap;
}

.restaurant-detail .restaurant-content .title-style-one.hr li {
  width: 50%;
  flex-shrink: 0;
  margin: 0;
}

.restaurant-detail .restaurant-content .title-style-one li {
  list-style: none;
  margin-bottom: 40rpx;
  padding-left: 33rpx;
  position: relative;
}

.restaurant-detail .restaurant-content .title-style-one li::before {
  content: " ";
  display: block;
  width: 10rpx;
  height: 10rpx;
  background: #111111;
  border-radius: 50%;

  position: absolute;
  left: 0;
  top: 15rpx;
}

.restaurant-detail .restaurant-content .title-style-one li:last-child {
  margin-bottom: 0px;
}

.restaurant-detail .restaurant-content .title-style-one li .item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f1f1f;
  margin-bottom: 20rpx;
}

.restaurant-detail .restaurant-content .title-style-one li .item-content {
  font-size: 24rpx;
  font-weight: 500;
  color: #6e6e6e;
}

.restaurant-detail .restaurant-content .big-title {
  position: relative;
}

.restaurant-detail .restaurant-content .big-title::before {
  display: block;
  width: 71rpx;
  height: 12rpx;
  background: #dfbe6e;
  border-radius: 4rpx;
  content: " ";

  position: absolute;
  left: 0;
  bottom: 6rpx;
  z-index: 1;
}

.restaurant-detail .restaurant-content .big-title text {
  font-size: 34rpx;
  font-weight: bold;
  color: #1f1f1f;
  position: relative;
  z-index: 2;
}
.restaurant-detail .restaurant-content .restaurant-base {
  width: 750rpx;
  position: absolute;
  top: -50px;
  z-index: 5;
}
.restaurant-detail
  .restaurant-content
  .restaurant-base
  .restaurant-room
  .room-type {
  /* padding:10rpx 30rpx; */
  display: flex;
  align-items: center;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.restaurant-detail .restaurant-content .restaurant-base .room-list {
  padding-top: 40rpx;
}

.restaurant-detail
  .restaurant-content
  .restaurant-base
  .restaurant-room
  .room-type
  .item {
  padding: 16rpx 30rpx;
  background: #ecf1f4;
  border-radius: 8rpx;
  margin-right: 26rpx;
  font-size: 22rpx;
  color: #999999;
  font-weight: 400;
  flex-shrink: 0;
}

.restaurant-detail
  .restaurant-content
  .restaurant-base
  .restaurant-room
  .room-type
  .item.active {
  background: #111111;
  color: #ffffff;
}

.restaurant-detail
  .restaurant-content
  .restaurant-base
  .restaurant-room
  .room-type
  .item:last-child {
  margin-right: 0;
}

.restaurant-detail .restaurant-content .restaurant-base {
  /* position: relative;
		top: -140rpx; */
  border-top-left-radius: 60rpx;
  border-top-right-radius: 60rpx;
  background-color: #fff;
  padding: 50rpx;
}

.location {
  display: flex;
  align-items: center;
}

.location .loc-left {
  width: 1px;
  flex: 1;
}

.location .loc-left .loc-name {
  font-size: 28rpx;
  font-weight: 800;
  color: #111111;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.location .loc-left .loc-remark {
  font-size: 22rpx;
  font-weight: 500;
  color: #6e6e6e;
  line-height: 34rpx;
}

.location .loc-right {
  font-size: 24rpx;
  font-weight: 500;
  color: #111111;
  display: flex;
  align-items: center;
}

.restaurant-detail .restaurant-content .restaurant-base .head {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.restaurant-detail .restaurant-content .restaurant-base .head .restaurant-name {
  font-size: 36rpx;
  font-weight: 800;
  color: #111111;
}

.restaurant-detail .restaurant-content .restaurant-base .head .restaurant-tag {
  margin-top: 20rpx;
  /* font-size: 22rpx;
		font-weight: 500;
		color: #6E6E6E; */
}

.restaurant-detail .restaurant-content .restaurant-base .head .op-box {
  margin-top: -160rpx;
}

.restaurant-detail .restaurant-content .restaurant-base .head .op-box image {
  width: 109rpx;
  height: 109rpx;
}

.restaurant-detail .restaurant-content .restaurant-base .shebei {
  padding: 34rpx 0;
  margin-bottom: 34rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.restaurant-detail .restaurant-content .restaurant-base .shebei .sb-left {
  width: 1px;
  flex: 1;
  display: flex;
  align-items: center;
}

.restaurant-detail
  .restaurant-content
  .restaurant-base
  .shebei
  .sb-left
  .sb-item {
  padding: 7rpx 13rpx;
  background: #ecf1f4;
  border-radius: 4rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #111111;
  margin-right: 10rpx;
}

.restaurant-detail .restaurant-content .restaurant-base .shebei .sb-right {
  font-size: 24rpx;
  font-weight: 500;
  color: #111111;
  display: flex;
  align-items: center;
}

.restaurant-detail .restaurant-title {
  line-height: 45px !important;
  font-size: 16px;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  color: #111;
  box-sizing: content-box;
  z-index: 5;
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  padding-left: 6rpx;
}

.restaurant-detail .media {
  height: 407rpx;
  position: relative;
  z-index: 1;
}

.restaurant-detail .media .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -49rpx;
  margin-left: -49rpx;
  width: 98rpx;
  height: 98rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.restaurant-detail .media .video-box {
  background-color: #111;
  height: 407rpx;
  position: relative;
}

.restaurant-detail .media .type-box {
  width: 100px;
  height: 50rpx;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50rpx;
  left: 50%;
  bottom: 80px;
  margin-left: -50px;
}

.restaurant-detail .media .media-info .type-img-box {
  background-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  height: 96rpx;
  width: 96rpx;
  padding: 8rpx;
  border-radius: 12rpx;
  position: relative;
}

.restaurant-detail .media .media-info .type-img-box image {
  height: 80rpx;
  width: 80rpx;
  border-radius: 12rpx;
  opacity: 0.5;
}

.restaurant-detail .media .media-info .type-img-box .content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: 20rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

.restaurant-detail .media .media-info .type-img-box text {
  font-size: 22rpx;
  font-family: pingfang;
  margin-left: 6rpx;
}

.restaurant-detail .media .media-info {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.35);
  top: 287rpx;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx 50rpx;
}

.restaurant-detail .media .media-info .mi-left {
  flex: 1;
}
.name-ali {
  // #ifdef MP-ALIPAY
  box-sizing: border-box;
  padding-left: 30rpx;
  // #endif
}
</style>
