<template>
  <div class="exothecium">
    <div class="roots">
      <div class="exothecium-body flex">
        <div class="orderList" v-if="state">
          <div class="order-left">
            <div class="order-message">
              <span class="faillette"></span>
              <div class="header" v-if="this.cancelStatus==0">待支付 ￥{{this.total}}</div>
              <div class="date" v-if="this.cancelStatus==0">
                <span>请在{{this.m+":"+this.s}}内支付，逾期订单将被取消</span>
              </div>
              <div class="header" v-if="this.cancelStatus!=0">下单</div>
            </div>
            <div
              class="order-message"
              v-if="orderStatus >= orderStatusEnum.audit || cancelStatus < orderStatusEnum.reduceNum"
            >
              <span :class="orderStatus >= orderStatusEnum.audit ? 'faillette' : 'faillettes' "></span>
              <div class="header">多抓鱼拣货</div>
              <div :class="orderStatus >= orderStatusEnum.audit? 'date' : 'vertical'"></div>
            </div>
            <div
              class="order-message"
              v-if="orderStatus >= 4 || cancelStatus < orderStatusEnum.reduceNum"
            >
              <span :class="orderStatus >=4 ? 'faillette' : 'faillettes'"></span>
              <div class="header">快递发货</div>
            </div>
            <div
              class="order-message"
              v-if="orderStatus >= 4 || cancelStatus < orderStatusEnum.reduceNum"
            >
              <span :class="orderStatus >=4 ? 'faillette' : 'faillettes'"></span>
              <div class="header">完成</div>
            </div>
            <div class="order-message" v-if="cancelStatus >= orderStatusEnum.reduceNum">
              <span class="faillette"></span>
              <div class="header">订单已取消</div>
            </div>
          </div>
          <div class="order-right">
            <div class="order-button">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="rgb(170, 170, 170)"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                xmlns="http://www.w3.org/2000/svg"
                class="Icon"
                v-if="state"
                @click.prevent.stop="updateState"
              >
                <polyline points="18 15 12 9 6 15" />
              </svg>
            </div>
          </div>
        </div>
        <div class="orderList" v-if="!state">
          <div class="order-left">
            <div class="order-message">
              <span class="faillette"></span>
              <div class="header" v-if="this.cancelStatus==0">待支付 ￥{{this.total}}</div>
              <div class="date" v-if="this.cancelStatus==0">
                <span>请在{{this.m+":"+this.s}}前支付，逾期订单将被取消</span>
              </div>
              <div class="header" v-if="this.cancelStatus!=0">下单</div>
            </div>
            <div class="order-message" v-if="orderStatus ===1  && cancelStatus != 11">
              <span :class="orderStatus >= orderStatusEnum.audit ? 'faillette' : 'faillettes' "></span>
              <div class="header">多抓鱼拣货</div>
              <div :class="orderStatus >= orderStatusEnum.audit? 'date' : 'vertical'"></div>
            </div>
            <div class="order-message" v-if="orderStatus === 3">
              <span :class="orderStatus >= orderStatusEnum.takeBook? 'faillette' : 'faillettes'"></span>
              <div class="header">快递发货</div>
            </div>
            <div class="remit" v-if="orderStatus === 4">
              <span :class="orderStatus >=orderStatusEnum.remit ? 'faillette' : 'faillettes'"></span>
              <div class="header">完成</div>
              <div class="headers-intro"></div>
            </div>
            <div
              class="top"
              v-if="cancelStatus === 15 || cancelStatus === 10 || cancelStatus === 11"
            >
              <span class="faillette"></span>
              <div class="header">订单已取消</div>
            </div>
          </div>
          <div class="order-right">
            <div class="order-button">
              <span v-if="!state" class="find-detail" @click.prevent.stop="updateState">查看详情</span>
            </div>
          </div>
        </div>
        <div class="user-discounts" @click="clickJumpAdvertis">
          <div class="discount">
            <img
              src="../../assets/img/coupon_order_20.png"
              style="height: 77.9px;width: 342px;"
              alt
            />
          </div>
        </div>
        <div class="boot-list">
          <div class="boot-header">
            <div class="boot-count">共{{this.sellBooks.length}}本</div>
          </div>
          <div class="boot-body">
            <div class="book-lists">
              <div
                class="book-inner"
                v-for="(book,i) in this.sellBooks"
                :key="i"
                @click="entrance(book.id)"
              >
                <div class="imgHeight">
                  <div class="book-img">
                    <img :src="book.cover" alt style="height: 70px;width: 50px;" />
                  </div>
                </div>
                <div class="boot-intro">
                  <div class="boot-title">{{book.name}}</div>
                  <span style="font-size: 12px;color: rgb(102, 102, 102);">{{book.author}}</span>
                </div>
                <div class="boot-right">
                  <span>￥{{(book.price*book.minDiscount)/10| numeral('0,0.00') }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="book-money">
            <div class="money-list">
              <div class="buy-max">
                <div class="max-intro">
                  <span class="intro-text">总价</span>
                </div>
                <div class="max-price">
                  <span
                    v-if="this.couponAmount > 0"
                  >￥{{this.total-this.user.freight+this.couponAmount| numeral('0,0.00')}}</span>
                  <span v-else-if="this.total>=99">￥{{this.total| numeral('0,0.00')}}</span>
                  <span v-else>￥{{this.total-this.user.freight| numeral('0,0.00')}}</span>
                </div>
              </div>
              <div class="buy-max">
                <div class="max-intro">
                  <span class="intro-text">运费</span>
                </div>
                <div class="max-price">
                  <span v-if="this.total>=99">满99包邮</span>
                  <span v-else>￥{{this.user.freight | numeral('0,0.00')}}</span>
                </div>
              </div>
              <div class="buy-max" v-if="this.couponAmount != 0">
                <div class="max-intro">
                  <span class="intro-text">优惠劵</span>
                </div>
                <div class="max-price" style="color:red">
                  <span>￥-{{this.couponAmount | numeral('0,0.00')}}</span>
                </div>
              </div>
            </div>
            <div class="footer">
              <div class="footers">
                下单支付
                <span
                  class="allmoney"
                  v-if="this.total>=99"
                >￥{{(this.total)| numeral('0,0.00')}}</span>
                <span class="allmoney" v-else>￥{{(this.total)| numeral('0,0.00')}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="boot-cat">
          <div class="cat-title">
            <h3>开电子发票</h3>
            <h3 style="color: rgb(170, 170, 170);font-size: 13px;">订单签收后能开</h3>
          </div>
        </div>
        <div class="order-information">
          <div class="information">
            <div class="serial-number">
              <div class="serial-name">订单编号</div>
              <div class="serial-figure">{{this.orderId}}</div>
              <div class="button-copy">复制</div>
            </div>
            <div class="shipments">
              <div class="shipments-name">收件人</div>
              <div>{{this.user.userName}} {{this.user.phone}}</div>
            </div>
            <div class="address">
              <div class="address-name">收货地址</div>
              <div>{{this.addrs}}</div>
            </div>
            <div @click="clickJump"></div>
            <div class="homepage">
              <router-link to="/" tag="div">
                <div class="home-buttom">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="22"
                    height="22"
                    viewBox="0 0 22 22"
                  >
                    <path
                      fill="none"
                      stroke="#fff"
                      stroke-width="1.5"
                      d="M19.022 10.252v7.64a3 3 0 0 1-3 3H5.66a3 3 0 0 1-3-3v-7.676C.582 9.8.393 8.267 2.424 6.429l4.212-3.814c2.378-2.153 6.226-2.16 8.612 0L19.46 6.43c2.088 1.89 1.825 3.466-.438 3.823zM7.76 20.865h6.364v-4.327c0-1.11-.711-2.005-1.59-2.005H9.35c-.878 0-1.59.898-1.59 2.005v4.327z"
                    />
                  </svg>
                </div>
              </router-link>
            </div>
          </div>
        </div>
        <div class="fixed">
          <div class="fixed-buttom">
            <div class="fixed-bar">
              <div class="fixed-bainner" @click="pay" v-if="this.user.status==0">
                <div class="contact-service" style="background-color: rgb(242, 129, 129);">
                  <div class="contact-inner" style="color:#fff;">微信支付</div>
                </div>
              </div>
              <div
                class="fixed-bainner"
                @click="affirm"
                v-if=" orderStatus >0 && cancelStatus < orderStatusEnum.delivery"
              >
                <div class="contact-service" style="background-color: rgb(242, 129, 129);">
                  <div class="contact-inner" style="color:#fff;">确认收货</div>
                </div>
              </div>
              <div
                class="fixed-bainner"
                v-if="orderStatus < orderStatusEnum.takeBook && cancelStatus < orderStatusEnum.reduceNum"
                @click="updateOrder"
              >
                <div class="contact-service">
                  <div class="contact-inner">修改订单</div>
                </div>
              </div>
              <div
                class="fixed-bainner"
                v-if="orderStatus < orderStatusEnum.takeBook && cancelStatus < orderStatusEnum.reduceNum"
              >
                <div class="contact-service" @click="mask=true">
                  <div class="contact-inner">取消订单</div>
                </div>
              </div>
              <div class="fixed-bainner">
                <div class="contact-service">
                  <div class="contact-inner">联系客服</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="prompt-dialog-box" v-show="mask===true">
      <div class="layer">
        <div class="layer-content">
          <div class="items">
            <div class="content">
              <div class="title">确定取消订单么？每天取消买书订单不能超过 5 次</div>
              <div class="button" @click="mask=false">
                <div class="order">返回</div>
                <div class="order cancel" @click="cancelOrder">取消订单</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { type } from "os";
const orderStatusEnum = {
  audit: 1,
  takeBook: 2,
  inTransit: 3,
  delivery: 5,
  remit: 6,
  reduceNum: 10,
  percent: 10
};
const conditionEnum = {
  brandNew: 0,
  medium: 1,
  fail: 2
};
export default {
  data() {
    return {
      conditionEnum,
      orderStatusEnum,
      conditions: [],
      state: false,
      sellBooks: {},
      sellOrder: {},
      orderStatus: "",
      orderId: "",
      cancelStatus: "",
      total: "",
      addrs: {},
      value: "",
      discount: 0.7,
      mask: false,
      freight: {},
      user: {},
      couponAmount: 0,
      Object: {},
      m: 15, //分
      s: 0 //秒
    };
  },
  computed: {
    sellTotalPrice() {
      let total = 0;
      for (let i = 0; i < this.sellBooks.length; i++) {
        total += (this.sellBooks[i].price * this.sellBooks[i].maxDiscount) / 10;
      }
      return total;
    },
    sellMinPrice() {
      let total = 0;
      for (let i = 0; i < this.sellBooks.length; i++) {
        total += (this.sellBooks[i].price * this.sellBooks[i].minDiscount) / 10;
      }
      return total;
    }
  },
  methods: {
    async refresh() {
      //this.orderId = this.$route.params.orderId;
      let data = await this.$http.get("/order/" + this.orderId);
      console.info(data.data);
      if (data.code === 0) {
        this.user = data.data;
        this.sellBooks = data.data.orderBooksConditions;
        console.info(this.sellBooks);
        this.sellOrder = data.data;
        this.cancelStatus = data.data.status;
        this.total = this.user.orderPay.finalPrice;
        this.couponAmount = this.user.orderPay.couponAmount;
        console.info(this.user.orderPay.couponAmount);
        this.addrs =
          this.user.province +
          this.user.city +
          this.user.district +
          this.user.street;
        this.orderStatus =
          this.cancelStatus >= orderStatusEnum.reduceNum
            ? this.cancelStatus - orderStatusEnum.reduceNum
            : this.cancelStatus;
        console.info("cancelStatus:" + this.cancelStatus);
        console.info("orderStatus:" + this.orderStatus);
      } else {
        console.info(data.desc);
      }
    },
    updateOrder() {
      this.$router.push("/order/addr/update/" + this.orderId);
    },
    pay() {
      this.$http
        .post("/order/pay?equipment=" + 0, {
          orderId: this.orderId,
          payType: 1
        })
        .then(res => {
          console.info(res);
          this.Object = {
            orderId: this.orderId,
            total: this.total,
            WeChat: res.data.img
          };
          this.$router.push({ path: "/pay", query: { Object: this.Object } });
        })
        .catch(res => {
          console.info(res);
        });
    },
    jumpQualityAudit() {
      this.$router.push("/audit");
    },
    entrance(id) {
      this.$router.push({
        path: "/boo/:id",
        name: "book",
        params: {
          id: id
        }
      });
    },
    clickJump() {
      this.$router.push("/order/succeed/" + this.orderId);
    },
    clickJumpAdvertis() {
      this.$router.push("/invitation");
    },
    updateState() {
      this.state = !this.state;
      console.info(this.state);
    },
    async cancelOrder() {
      this.orderId = this.$route.query.id;
      let data = await this.$http.put("/order", {
        id: this.orderId,
        status: 10 //取消订单
      });

      if (data.code === 0) {
        this.cancelStatus = data.status;
        this.orderStatus =
          this.cancelStatus >= orderStatusEnum.reduceNum
            ? this.cancelStatus - orderStatusEnum.reduceNum
            : this.cancelStatus;
        this.refresh();
      } else {
        console.info(data.desc);
      }
    },
    affirm() {
      this.orderId = this.$route.query.id;
      console.info(this.orderId);
      this.$http
        .put("/order", {
          id: this.orderId,
          status: 5 //确认收货
        })
        .then(res => {
          console.info(res);
          if (res.code === 0) {
            this.cancelStatus = 4;
            this.orderStatus =
              this.cancelStatus >= orderStatusEnum.reduceNum
                ? this.cancelStatus - orderStatusEnum.reduceNum
                : this.cancelStatus;
            this.refresh();
          } else {
            console.info(res.data);
          }
        })
        .catch(res => {
          console.info(res);
        });
    }
    // stat() {
    //   if (this.m == 0 && this.s == 0) {
    //     console.info("订单超时自动取消");
    //   } else if (this.m >= 0) {
    //     if (this.s > 0) {
    //       console.info(this.m + ":" + this.s);
    //       this.s--;
    //     } else if (this.s == 0) {
    //       this.m--;
    //       this.s = 59;
    //     }
    //   }
    // }
    // let recursive = setInterval(() => {
    //   this.stat();
    //   if (this.m == 0 && this.s == 0) {
    //     clearInterval(recursive);
    //   }
    // }, 1000);
  },
  //初始化订单书籍列表
  created() {
    this.orderId = this.$route.query.id;
    this.refresh();
  }
};
</script>

<style lang="scss" scoped>
.exothecium {
  max-width: 600px;
  margin: 0px auto;
  .roots {
    position: relative;
    min-height: 100vh;
    background-color: rgb(242, 242, 242);
    .exothecium-body {
      padding-bottom: 51px;
      box-sizing: border-box;
      min-height: 100vh;
      .orderList {
        display: flex;
        margin-bottom: 15px;
        padding: 0px 15px;
        background: rgb(255, 255, 255);
        .order-left {
          padding-top: 22px;
          flex-grow: 1;
          .top::before {
            background: rgb(24, 195, 170);
            top: -23px;
            bottom: 23px;
            left: 17px;
            content: "";
            position: absolute;
            width: 1.5px;
          }
          .top {
            position: relative;
            box-sizing: border-box;
            padding: 0px 0px 15px 35px;
            .faillette {
              background: rgb(24, 195, 170);
              position: absolute;
              z-index: 1;
              left: 14px;
              top: 6.5px;
              width: 7.5px;
              height: 7.5px;
              border-radius: 999px;
              .header {
                font-weight: 400;
                font-size: 16px;
              }
            }
          }
          .remit::before {
            background: rgb(24, 195, 170);
            top: -23px;
            bottom: 46px;
            left: 17px;
            content: "";
            position: absolute;
            width: 1.5px;
          }
          .remit {
            position: relative;
            box-sizing: border-box;
            padding: 0px 0px 15px 35px;
            .faillette {
              background: #18c3aa;
              position: absolute;
              z-index: 1;
              left: 14px;
              top: 6.5px;
              width: 7.5px;
              height: 7.5px;
              border-radius: 999px;
            }
            .headers-intro {
              display: flex;
              align-items: center;
              min-height: 15px;
              margin-top: 2px;
              color: #aaaaaa;
              font-size: 11px;
            }
          }
          .order-message {
            position: relative;
            box-sizing: border-box;
            padding: 0px 0px 15px 35px;
            .faillette {
              background: rgb(24, 195, 170);
              position: absolute;
              z-index: 1;
              left: 14px;
              top: 6.5px;
              width: 7.5px;
              height: 7.5px;
              border-radius: 999px;
              .header {
                font-weight: 400;
                font-size: 16px;
              }
            }

            .faillettes {
              background: rgb(233, 233, 233);
              position: absolute;
              z-index: 1;
              left: 14px;
              top: 6.5px;
              width: 7.5px;
              height: 7.5px;
              border-radius: 999px;
            }
            .vertical {
              color: #aaaaaa;
              font-size: 11px;
            }
          }
          .order-message.exothecium::before {
            top: 0px;
            height: 12px;
            content: "";
            position: absolute;
            left: 17px;
            width: 1.5px;
          }
          .date {
            display: flex;
            align-items: center;
            min-height: 15px;
            margin-top: 2px;
            color: rgb(170, 170, 170);
            font-size: 11px;
          }
          .date::after {
            background: rgb(24, 195, 170);
            top: 12px;
            bottom: -2px;
            left: 17px;
            content: "";
            position: absolute;
            width: 1.5px;
          }
          .headers-intro {
            display: flex;
            align-items: center;
            min-height: 15px;
            margin-top: 2px;
            color: rgb(170, 170, 170);
            font-size: 11px;
          }
          .vertical intro {
            display: flex;
            align-items: center;
            min-height: 15px;
            margin-top: 2px;
            color: rgb(170, 170, 170);
            font-size: 11px;
          }
          .vertical::after {
            top: 12px;
            bottom: 0px;
            left: 17px;
            content: "";
            position: absolute;
            width: 1.5px;
            background: rgb(233, 233, 233);
          }
        }
        .order-find {
          display: flex;
          align-items: flex-end;
          padding-bottom: 21px;
        }
        .order-right {
          padding-bottom: 28px;
          display: flex;
          align-items: flex-end;
          .order-button {
            width: 20px;
            height: 10px;
            padding: 2px;
            .orders-button {
              padding: 2px;
            }
            .find-detail {
              position: absolute;
              color: rgb(24, 195, 170);
              font-size: 12px;
              width: 68px;
              height: 28px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100px;
              border-width: 0.5px;
              border-style: solid;
              border-color: rgb(24, 195, 170);
              border-image: initial;
              margin-left: -46px;
            }
          }
          svg {
            fill: none;
            stroke: rgb(170, 170, 170);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
          }
          user agent stylesheet svg:not(:exothecium),
          symbol,
          image,
          marker,
          pattern,
          foreignObject {
            overflow: hidden;
          }
          user agent stylesheet html|* > svg {
            transform-origin: 50% 50% 0px;
          }
          user agent stylesheet * {
            transform-origin: 0px 0px 0px;
          }
        }
      }
      .user-discounts {
        padding: 0px 16px 15px;
        .discount {
          background-size: cover;
          display: flex;
        }
      }
      .boot-list {
        margin-bottom: 15px;
        padding: 0px 15px;
        background: rgb(255, 255, 255);
        .boot-header {
          display: flex;
          padding: 15px 0px;
          border-bottom: 0.5px solid rgb(242, 242, 242);
          .boot-count {
            flex: 1 1 0%;
          }
        }

        .book-lists {
          border-bottom: 0.5px solid rgb(242, 242, 242);
          .book-inner {
            display: flex;
            font-size: 14px;
            padding: 12px 0px;
            border-bottom: 0.5px solid rgb(230, 230, 230);
            .imgHeight {
              width: 50px;
              height: 70px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
              .book-img {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                display: block;
                max-width: 100%;
                max-height: 100%;
              }
            }
            .boot-intro {
              flex-grow: 1;
              margin-left: 8px;
              overflow: hidden;
              .boot-title {
                line-height: 1.29;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-weight: 400;
                overflow: hidden;
              }
              .boot-matha {
                margin-top: 6px;
                line-height: 1.5;
                color: rgb(170, 170, 170);
                font-size: 12px;
              }
            }
            .boot-right {
              display: flex;
              flex-direction: column;
              flex-shrink: 0;
              align-items: center;
              margin-left: 12px;
            }
          }
        }
        .money-list {
          padding: 14px 0px;
          border-bottom: 0.5px solid rgb(242, 242, 242);
          .buy-max {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 0px;
            .max-intro {
              display: flex;
              flex-grow: 1;
              flex-direction: row;
              align-items: center;
              margin-right: 1em;
              overflow: hidden;
              .intro-text {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .max-price {
              flex-shrink: 0;
              font-weight: 400;
              line-height: 1;
            }
          }
        }
        .footer {
          border-bottom: none;
          display: flex;
          justify-content: flex-end;
          padding: 14px 0px;
          .allmoney {
            font-size: 1.33em;
            font-weight: 400;
            color: rgb(242, 129, 129);
          }
        }
        .price-ranger {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          margin-top: -7px;
          padding-bottom: 24px;
          font-size: 12px;
          font-weight: 300;
          line-height: 1.33;
          color: rgb(170, 170, 170);
          text-align: right;
        }
      }
      .boot-cat {
        margin-bottom: 15px;
        background: rgb(255, 255, 255);
        .cat-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 18px 15px;
        }
        h3 {
          margin: 0;
          font: inherit;
          display: block;
        }
        .cat-course {
          width: 98%;
          margin-left: 2px;
          .cat-feature {
            position: relative;
            height: 40px;
            max-height: 6vh;
            .reality {
              left: -3%;
              z-index: 1;
              position: absolute;
              bottom: 0px;
              height: 100%;
            }
            .sham {
              left: 2.16%;
              opacity: 0.5;
              position: absolute;
              bottom: 0px;
              height: 100%;
            }
          }
          .progress {
            border: none;
            position: relative;
            width: 100%;
            height: 10px;
            border-radius: 99px;
            overflow: hidden;
            .progress-practical {
              width: 0.5%;
              background-color: rgb(24, 195, 170);
              z-index: 1;
              position: absolute;
              top: 0px;
              left: 0px;
              height: 10px;
            }
            .progress-anticipated {
              width: 8.66%;
              background-color: rgba(24, 195, 170, 0.2);
              position: absolute;
              top: 0px;
              left: 0px;
              height: 10px;
            }
            .progress-blank {
              width: 100%;
              height: 100%;
              background-color: rgba(242, 242, 242, 0.6);
            }
          }
        }
      }
      .order-information {
        margin-bottom: 15px;
        padding: 0px 15px;
        background: rgb(255, 255, 255);
        .information {
          font-size: 14px;
          line-height: 20px;
          padding: 15px 0px;
          .serial-number {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .serial-name {
              flex-shrink: 0;
              width: 4em;
              margin-right: 1em;
              color: rgb(170, 170, 170);
              text-align: right;
            }
            .button-copy {
              font-weight: 300;
              margin-left: 10px;
              padding: 2px 10px;
              font-size: 12px;
              display: inline-block;
              box-sizing: border-box;
              text-align: center;
              text-decoration: none;
              white-space: nowrap;
              border: 0.5px solid rgb(242, 242, 242);
              border-radius: 999px;
              // pointer-events: auto;
              cursor: pointer;
            }
          }
          .shipments {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .shipments-name {
              flex-shrink: 0;
              width: 4em;
              margin-right: 1em;
              color: rgb(170, 170, 170);
              text-align: right;
            }
          }
          .address {
            margin-bottom: 0px;
            align-items: flex-start;
            display: flex;
            .address-name {
              flex-shrink: 0;
              width: 4em;
              margin-right: 1em;
              color: rgb(170, 170, 170);
              text-align: right;
            }
          }
          .sign {
            width: 46px;
            height: 46px;
            box-sizing: border-box;
            position: fixed;
            bottom: 130px;
            right: 16px;
            border-radius: 50%;
            border-width: 4px;
            border-style: solid;
            border-color: rgb(214, 186, 140);
            border-image: initial;
            background-color: red;
            background-position: center center;
            background-repeat: no-repeat;
          }
          .home-buttom {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 46px;
            height: 46px;
            position: fixed;
            bottom: 180px;
            right: 16px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px 0px;
            border-radius: 50%;
            background: rgba(102, 102, 102, 0.96);
          }
        }
      }
      .fixed {
        background-color: rgb(255, 255, 255);
        border-top: 0.5px solid rgb(210, 210, 210);
        z-index: 10;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        .fixed-buttom {
          .fixed-bar {
            overflow-x: scroll;
            display: flex;
            flex-direction: row-reverse;
            display: flex;

            .fixed-bainner {
              height: 50px;
              padding-top: 6px;
              .contact-service {
                margin-right: 10px;
                display: inline-block;
                height: 32px;
                padding: 0 1em;
                font-size: 13px;
                border-color: rgb(217, 217, 217);
                border: 0.5px solid rgb(242, 242, 242);
                .contact-inner {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
  .prompt-dialog-box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.3);
    .layer {
      margin: 0px 2em;
      display: flex;
      height: 100%;
      margin: 0 1em;
      flex-direction: column;
      pointer-events: none;
      .layer-content {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .items {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          max-width: 340px;
          background: #fff;
          border-radius: 10px;
          overflow-x: hidden;
          pointer-events: auto;
          .content {
            padding: 0px;
            margin: 0px;
            font-size: 16px;
            text-align: center;
            white-space: pre-wrap;
            .title {
              font-size: 16px;
              font-weight: 300;
              line-height: 1.5;
              text-align: center;
              padding: 36px 24px 32px;
            }
            .button {
              display: flex;
              flex-direction: row;
              border-top: 1px solid rgb(247, 247, 247);
              .order {
                flex-grow: 1;
                flex-shrink: 0;
                flex-basis: 0px;
                height: 54px;
                text-align: center;
                border-top-color: initial;
                border-bottom-color: initial;
                border-left-color: initial;
                color: rgb(170, 170, 170);
                font-weight: normal;
                border-width: 0px 1px 0px 0px;
                border-style: none solid none none;
                border-image: initial;
                border-right: 1px solid rgb(247, 247, 247);
              }
              .cancel {
                color: rgb(24, 195, 170);
              }
            }
          }
        }
      }
    }
  }
}
</style>
