share_h5/pages/goods.vue

<template>
  <view class="container">
    <view class="view-alert" v-if="showHint">
      <view class="alert-text">
        点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开。
      </view>
      <image class="alert-arrow" src="../static/alert-arrow.png" mode="aspectFit"></image>
    </view>
    <view class="product">
      <view class="u-bg-fff pb40">
        <view class="pic">
          <!-- <image src="../../../static/delImg/product2.png" mode="aspectFill"></image> -->
          <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500" circular="true">
            <swiper-item v-if="dataForm.video_url">
              <video :src="dataForm.video_url" style="height:100%"></video>
            </swiper-item>
            <swiper-item v-for="(item, index) in imglist" :key="index">
              <image :src="item" mode="aspectFill"></image>
            </swiper-item>
          </swiper>

          <view class="p-price">
            <view class="pd24 u-flex-center">
              <view class="u-FFF u-font36" v-if="type == 1">
                <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text>
              </view>
              <view class="u-FFF u-font36" v-if="type == 2 || type == 3">
                <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_price)"></rich-text>
              </view>
              <view class="u-FFF u-font36" v-if="type == 5">
                {{ dataForm.min_exchange_point }}积分
                <!-- <rich-text :nodes="$mUtil.priceBigSmall(dataForm.min_sale_price)"></rich-text> -->
              </view>
              <text class="discount u-font24 u-ml20 u-del" v-if="type == 1">￥{{ dataForm.max_market_price }}</text>
              <text class="discount u-font24 u-ml20 u-del"
                v-if="type == 2 || type == 3">￥{{ dataForm.max_sale_price }}</text>
            </view>
            <view class="p-ab u-flex-center" v-if="type == 2 || type == 3">
              <view class="triangle-bottomright"></view>
              <view class="seckill u-text-center u-font28">
                <!-- active_state 0：未开始 * 1：进行中 * 2：已结束 -->
                <view class="u-bold" v-if="dataForm.active_state == 2">已结束</view>
                <view class="u-bold" v-if="dataForm.active_state == 1">距结束</view>

                <view class="u-bold" v-if="dataForm.active_state == 0">离开抢</view>
                <view v-if="dataForm.active_state != 2">
                  <uni-countdown :backgroundColor="'none'" @timeup="overDown1" :color="'#00321e'"
                    :splitorColor="'#00321e'" :show-day="time1[0] > 0" :day="time1[0]" :hour="time1[1]"
                    :minute="time1[2]" :second="time1[3]"></uni-countdown>
                </view>
              </view>
            </view>
          </view>

          <view class="mt30 u-plr30">
            <view>
              <text class="u-font34 u-bold u-1A1A1A">{{ dataForm.title }}</text>
            </view>
            <view class="u-font24 u-mt15 u-999" v-if="type==1 ">
              <text>已售
                <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件，仅剩<text class="u-FF0000">{{
                  dataForm.residual_inventory
                }}</text>件</text>
            </view>
            <view class="u-font24 u-mt15 u-999" v-else>
              <text>已售
                <text class="u-FF0000">{{ dataForm.result_sale_num }}</text>件</text>
            </view>
          </view>
        </view>
      </view>

      <view class="u-bg-fff u-mt10">
        <view class="u-plr30 u-flex-center-sb pt-pb35">
          <view class="u-flex-center">
            <view>
              <image class="u-avatar104" :src="shop.logo"></image>
            </view>
            <view class="u-ml25">
              <view class="u-font28 u-1A1A1A u-bold">{{ shop.shop_name }}</view>
              <view class="u-999 u-font24 u-mt5 u-text2">
                <text class="iconfont u-193E2C">&#xe64b;</text>
                {{ shop.province_name }}{{ shop.city_name }}{{ shop.area_name
                }}{{ shop.address }}
              </view>
            </view>
          </view>
          <!-- <view class="iconfont">&#xe6c7;</view> -->
        </view>
      </view>

      <view class="u-bg-fff u-mt10">
        <view class="tab u-flex-center-sa u-font30 u-1A1A1A u-border-one-one"
          :style="`top: calc(${statusBarHeight}px + 44px)`">
          <view @tap="change(0)" class="pb30" :class="{ active: isChecked == 0 }">商品详情</view>
          <view @tap="change(1)" class="pb30" :class="{ active: isChecked == 1 }">
            用户评论({{ commentList.length }})</view>
        </view>
        <view class="u-mt10">
          <!--商品详情-->
          <view v-if="isChecked == 0">
            <view class="richText ql-editor-box">
              <rich-text :nodes="goodsInfo.mobile_detail"></rich-text>
            </view>
          </view>
          <!--评论-->
          <view class="u-plr30" v-else>
            <comment :value="commentList"></comment>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <view class="leftbox">
          <button @click="handleTip()" class="u-text-center goods-tools">
            <view class="iconfont2 u-font44 u-999">&#xe684;</view>
            <view class="u-font28 u-1A1A1A">分享</view>
          </button>
          <view class="goods-tools service" @click="handleTip()">
            <image src="@/static/kefu.png" mode="aspectFill"></image>
            <view class="u-font28 u-1A1A1A">客服</view>
          </view>
          <view class="cart" @click="handleTip()">
            <view class="u-text-center goods-tools">
              <view class="iconfont2 car-icon u-font44 u-999">&#xe600;</view>
              <view class="u-font28 u-1A1A1A">购物车</view>
            </view>
          </view>
        </view>
        <!--普通商品-->
        <view class="u-flex-center">
          <button class="cart-btn u-font30" @click="handleTip()" v-if="dataForm.area_feature != 1">
            加入购物车
          </button>
          <button class="buy-btn u-font30" @click="handleTip()">
            立即购买
          </button>
        </view>
      </view>
    </view>

    <view class="jump-box" @click="openApp">
      <image class="logo-img" src="/static/logo.png" mode="aspectFill"></image>
      <view class="tip">打开宜格服务APP</view>
    </view>
    
    <view class="wx-open">
      <wx-open-launch-app id="launch-btn" appid="wx2cbf40f5fffa9e80" :extinfo="query" @launch="launchApp" @error="errorApp">
        <script type="text/wxtag-template">
          <style>.btn { padding: 50px;width: 300px;height:100px; }</style>
          <button class="btn">App内查看</button>
        </script>
      </wx-open-launch-app>
    </view>

    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script>
  import comment from "@/components/ld-comment/ld-comment.vue";
  export default {
    components: {
      comment
    },
    data() {
      return {
        config: {
          back: false, //false是tolbar页面 是则不写
          title: "商品详情",
          color: "#FFFFFF",
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#00321E"],
          statusBarFontColor: "#FFFFFF",
          backTabPage: "",
        },
        //手机状态栏高度
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
        imglist: [], //详情图片数组
        dataForm: {}, //商品详情
        shop: {}, //店铺信息
        cover: "",
        loading: true,
        btnText: "打开App",
        time1: [0, 0, 0, 0],
        type: null,
        commentList: [],
        isChecked: 0,
        goodsInfo: {},
        timer: null,
        showHint: false,
        query: {}
      };
    },
    props: {
      options: {
        type: Object,
        default: null,
      },
    },
    watch: {
      options(n) {
        this.options = n;
      },
    },
    created() {
      this.type = this.options.type;
      this.query = {
        jumpType: "goods",
        goodsType: this.options.type,
        goodsId: this.options.id
      }
      if ((this.options.type == 1 || this.options.type == 5) && this.options.id) {
        this.getDefaultDetailInfo(this.options.id);
      }
      if (this.options.type == 2 && this.options.id) {
        this.getSeckillDetail(this.options.id);
      }
      if (this.options.type == 3 && this.options.id) {
        this.getGroupsDetailInfo(this.options.id);
      }
      if (this.options.type == 4 && this.options.id) {
        this.getserviceDetailInfo(this.options.id);
      }
      this.goodsDetail(this.options.id)
      this.loadComment(this.options.id);
    },
    onShow() {
      document.addEventListener("visibilitychange", function() {
        if (that.timer) {
          that.opening = false
          clearTimeout(that.timer)
        }
      }, false);
    },
    onLoad(options) {},

    methods: {
      launchApp(e) {
        console.log(e, 1111)
      },
      errorApp(e) {
        console.log(e, 1111)
      },
      openApp() {
        const ua = navigator.userAgent.toLowerCase()
        const isWeixin = ua.indexOf('micromessenger') != -1;
        if (isWeixin) {
          this.showHint = isWeixin;
          uni.pageScrollTo({
            scrollTop: 0
          })
        } else {
          const osName = uni.getSystemInfoSync().osName
          if (osName == 'android') {
            this.getData(0)
          } else {
            this.getData(1)
          }
        }
      },
      getData(type) {
        this.$http.get("/app/version/newest", {
          type: type
        }).then((res) => {
          if (res && res.data && res.code == 200) {
            // try {
            //   if (type == 0) {
            //     window.location = "ygfwUrlSchemes://"
            //   }
            // } catch (e) {}
            // window.location.href = res.data.downloadLink;
            this.browserOpenApp(type, res.data.downloadLink)
          } else {
            this.$mUtil.toast("暂无下载地址")
          }
        });
      },
      browserOpenApp(type, url) {
        let that = this
        that.opening = true
        let params = JSON.stringify({
          goodsTypeJump: that.options.type,
          goodsIdJump: that.options.id
        })
        let schemeUrl = `ygfwUrlSchemes://jumpType=goods&goodsType=${that.options.type}&goodsId=${that.options.id}`
        if (type == 0) { //  安卓处理
          let ifr = document.createElement('iframe');
          ifr.src = schemeUrl;
          ifr.style.display = 'none';
          document.body.appendChild(ifr);
          that.timer = window.setTimeout(function() { //  未安装的情况
            that.opening = false
            document.body.removeChild(ifr);
            //  提示下载
            let r = confirm("未安装APP? 是否去下载页下载！")
            if (r) {
              uni.navigateTo({
                url: '/pages/down'
              })
            }
          }, 5000)
        } else { //  IOS处理
          window.location = schemeUrl
          that.timer = setTimeout(function() { //  未安装的情况
            that.opening = false
            //  跳转app store
            let r = confirm("未安装APP? 是否去下载页下载！")
            if (r) {
              uni.navigateTo({
                url: '/pages/down'
              })
            }
          }, 5000);
        }
      },
      handleTip() {
        uni.showToast({
          title: '请前往宜格服务APP操作！',
          icon: 'none',
          duration: 2000
        })
      },

      // 获取主页数据
      getIndexList(shopid) {
        this.$shopHttp.get("/yxt/shop/info/" + shopid).then((res) => {
          uni.stopPullDownRefresh();
          this.loading = false;
          if (res.data && res.code == 200) {
            this.shop = res.data;
          }
        });
      },

      //普通商品
      getDefaultDetailInfo(id) {
        this.$shopHttp.get("/goods/info/" + id).then((res) => {
          this.loading = false;
          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.goodsId = res.data.id;
            this.imglist = res.data.images;
            this.shareImg = res.data.cover;
            this.shareTitle = res.data.title;

            if (res.data.point_goods) {
              this.type = 5;
            }
            this.getIndexList(res.data.shop_id);
          }
        });
      },
      /**组团商品*/
      getGroupsDetailInfo(id) {
        this.$shopHttp.get("/groupbuy/activitygoods/goodsInfo/" + id).then((res) => {
          this.loading = false;

          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.goodsId = res.data.id;
            this.imglist = res.data.cover.split(",");

            this.getIndexList(res.data.shop_id);

            if (res.data.active_state == 0) {
              this.time1 = this.$mUtil
                .countDown(res.data.activity_start_time)
                .split(":");
            } else {
              this.time1 = this.$mUtil
                .countDown(res.data.finish_time)
                .split(":")
                .map((val) => Number(val));
            }
          }
        });
      },
      getSeckillDetail(id) {
        this.$shopHttp
          .get("/marketing/seckillActivityGoods/info/" + id)
          .then((res) => {
            this.loading = false;
            if (res && res.code == 200) {
              this.dataForm = res.data;
              this.goodsId = res.data.id;
              this.$shopHttp.get("/yxt/shop/info/" + res.data.shop_id).then((res) => {
                if (res.data && res.code == 200) {
                  this.shop = res.data;
                }
              });
              this.imglist = res.data.cover.split(",");

              if (res.data.active_state == 0) {
                this.time1 = this.$mUtil
                  .countDown(res.data.activity_start_time)
                  .split(":");
              } else {
                this.time1 = this.$mUtil
                  .countDown(res.data.finish_time)
                  .split(":");
              }
            }
          });
      },
      getserviceDetailInfo(id) {
        this.$shopHttp.get("/service/goods/info/" + id).then((res) => {
          this.loading = false;
          if (res && res.code == 200) {
            this.dataForm = res.data;
            this.goodsId = res.data.id;
            this.imglist = res.data.images;
            this.shareImg = res.data.cover;
            this.shareTitle = res.data.title;

            this.getIndexList(res.data.shop_id);
          }
        });
      },
      /**
       * 详情
       * */
      goodsDetail(id) {
        this.$shopHttp.get(`/goods/content/${id}`).then((res) => {
          if (res && res.code == 200) {
            this.goodsInfo = res.data;
          }
        });
      },
      /*评论*/
      loadComment(id) {
        this.$shopHttp
          .get(`/comment/orderGoods/getgoodscomments/${id}`)
          .then((res) => {
            if (res && res.code == 200) {
              this.commentList = res.list;
            }
          });
      },
      //评论，商品详情切换
      change(i) {
        this.isChecked = i;
      },
    },
  };
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }

  .pd24 {
    padding: 24rpx;
  }

  .pd20 {
    padding: 20rpx;
  }

  .pt20-pb14 {
    padding-top: 20rpx;
    padding-bottom: 14rpx;
  }

  .pt28-pb18 {
    padding-top: 28rpx;
    padding-bottom: 18rpx;
  }

  .pb30 {
    padding-bottom: 30rpx;
  }

  .pb40 {
    padding-bottom: 40rpx;
  }

  .pb50 {
    padding-bottom: 50rpx;
  }

  .pt-pb30 {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
  }

  .pt-pb35 {
    padding-top: 35rpx;
    padding-bottom: 35rpx;
  }

  .ml54 {
    margin-left: 54rpx;
  }

  .ml138 {
    margin-left: 138rpx;
  }

  .br-rd10 {
    border-radius: 10rpx;
  }

  .br-rd20 {
    border-radius: 20rpx;
  }

  .stb-btn {
    padding: 8rpx 18rpx;
    border-radius: 10rpx;
  }

  .br-FF0000 {
    border: 1rpx solid #ff0000;
    border-radius: 24rpx;
    padding: 6rpx 12rpx;
  }

  .bg-FFF6EE {
    background-color: #fff6ee;
  }

  .mt30 {
    margin-top: 30rpx;
  }

  .product {
    padding-bottom: 150rpx;
  }

  .pic {
    width: 100%;
    position: relative;

    .swiper {
      height: 700rpx;

      video {
        width: 100%;
        height: 700rpx;
      }

      image {
        width: 100%;
        height: 700rpx;
      }
    }

    .p-price {
      width: 100%;
      position: absolute;
      top: 580rpx;
      background: #FA6138;
      position: relative;
      top: 0px;
      z-index: 9;

      .discount {
        color: #ffffff;
      }

      .p-ab {
        position: absolute;
        top: -5px;
        right: 0;
      }
    }
  }

  .richText {
    padding: 30rpx;

    /deep/ img {
      margin-top: 0 !important;
      vertical-align: middle;
    }
  }

  // 富文本展示
  .ql-editor-box {
    text-align: justify;

    /deep/ .ql-indent-1 {
      margin-left: 96rpx;
    }

    /deep/ .ql-indent-2 {
      margin-left: 192rpx;
    }

    /deep/ .ql-indent-3 {
      margin-left: 288rpx;
    }

    /deep/ .ql-indent-4 {
      margin-left: 384rpx;
    }

    /deep/ .ql-indent-5 {
      margin-left: 480rpx;
    }

    /deep/ .ql-indent-6 {
      margin-left: 576rpx;
    }

    /deep/ .ql-indent-7 {
      margin-left: 672rpx;
    }

    /deep/ .ql-indent-8 {
      margin-left: 768rpx;
    }

    /deep/ img {
      max-width: 100%;
    }

    /deep/ .ql-align-center {
      text-align: center;
    }

    /deep/ .ql-align-right {
      text-align: right;
    }

    /deep/ blockquote {
      display: block;
      border-left: 8px solid #d0e5f2;
      padding: 5px 10px;
      margin: 10px 0;
      line-height: 1.4;
      font-size: 100%;
      background-color: #f1f1f1;
    }

    /deep/ .ql-indent-1 {
      margin-left: 60rpx;
    }

    /deep/ .ql-indent-2 {
      margin-left: 120rpx;
    }

    /deep/ .ql-indent-3 {
      margin-left: 180rpx;
    }

    /deep/ .ql-indent-4 {
      margin-left: 240rpx;
    }

    /deep/ .ql-indent-5 {
      margin-left: 300rpx;
    }

    /deep/ .ql-size-huge {
      font-size: 80rpx;
      display: inline-block;
      line-height: 90rpx;
    }

    /deep/ .ql-size-large {
      font-size: 48rpx;
      display: inline-block;
      line-height: 50rpx;
    }

    /deep/ .ql-size-small {
      font-size: 24rpx;
      display: inline-block;
      line-height: 30rpx;
    }

    /deep/ .ql-font-serif {
      font-family: Georgia, Times New Roman, serif;
    }

    /deep/ .ql-font-monospace {
      font-family: Monaco, Courier New, monospace;
    }
  }

  //秒杀，拼团样式
  .p-ab {
    position: absolute;
    top: 448rpx;
  }

  .stb-list {
    padding-bottom: 10rpx;
  }

  .triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 108rpx solid #FA6138;
    border-left: 60rpx solid transparent;
  }

  .seckill {
    background-color: #FA6138;
    color: #00321e;
    padding: 16rpx;
    padding-right: 28rpx;
    border-radius: 5rpx 20rpx 0px 0px;
  }

  .seckill-btn {
    width: 86%;
  }

  .br-284534 {
    border-bottom: 1rpx solid rgba($color: #284534, $alpha: 0.3);
  }

  .gb-te {
    padding-top: 20rpx;
    padding-bottom: 15rpx;
  }

  .gb-btn {
    padding: 18rpx 80rpx 8rpx;
    line-height: 30rpx;
  }

  .btn-bg-dccda4 {
    background: #FA6138;
    border-radius: 48rpx 0rpx 0rpx 48rpx;
  }

  .btn-bg-00321E {
    background: #00321e;
    border-radius: 0px 48px 48px 0px;
  }

  .tab {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding-top: 38rpx;
    z-index: 9;

    .pb30 {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: #FA6138;
        transition: all 0.3s;
      }

      &.active {
        font-size: 30rpx;
        color: #FA6138;
        font-weight: 700;

        &::before {
          width: 100%;
        }
      }
    }
  }

  .bottom-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 9;
    border-top: 1rpx solid #e6e6e6;

    .leftbox {
      display: flex;
      align-items: center;
      height: 84rpx;

      .u-text-center {
        margin-right: 20rpx;
      }

      .service {

        image {
          width: 40rpx;
          height: 40rpx;
          margin: 0 auto;
        }

        margin-right: 20rpx;
      }
    }

    .cart {
      position: relative;

      .car-icon {
        position: relative;

        .nums {
          font-size: 20rpx;
          color: #FFFFFF;
          font-weight: 400;
          padding: 4rpx;
          height: 30rpx;
          min-width: 30rpx;
          line-height: 23rpx;
          background-color: #FF0000;
          border-radius: 15rpx;
          position: absolute;
          right: 5rpx;
          top: -10rpx;
        }
      }

      .number {
        position: absolute;
        top: -10rpx;
        left: 45rpx;
        padding: 4rpx 8rpx;
        background-color: #ff0000;
        border: 4rpx solid #ffffff;
        border-radius: 40rpx;
      }
    }

    .cart-btn {
      width: 200rpx;
      height: 85rpx;
      line-height: 85rpx;
      background: #FF9651;
      color: white;
      border-radius: 40rpx;
      margin-right: 10rpx;
    }

    .buy-btn {
      width: 200rpx;
      height: 85rpx;
      color: white;
      line-height: 85rpx;
      background: #FA6138;
      border-radius: 40rpx;
      margin-left: 10rpx;
    }
  }

  .flex-sb {
    display: flex;
    justify-content: space-between;
  }

  //弹窗
  .spec {
    border-radius: 18rpx 18rpx 0rpx 0rpx;
    padding-top: 30rpx;
    max-height: 900rpx;
    overflow-y: auto;

    .spec-item {
      background-color: #f6f6f6;
      border: 1px solid #f6f6f6;
      padding: 12rpx 30rpx;
      font-size: 24rpx;
      color: #1a1a1a;
      border-radius: 4px;
    }

    .activeColor {
      background-color: #e1e6e3;
      border: 1px solid #01321d;
      color: #01321d;
      border-radius: 4px;
    }

    .spec-item:not(:last-child) {
      margin-right: 24rpx;
    }

    //减号
    .minus {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 8rpx 0rpx 0rpx 8rpx;
    }

    .num {
      width: 74rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      border: 1px solid #dedede;
    }

    //加号
    .plus-sign {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background: #dedede;
      border-radius: 0rpx 8rpx 8rpx 0rpx;
    }

    .specOpen-btn {
      margin-top: 68rpx;
      padding-bottom: 34rpx;

      button {
        background-color: #01331f;
        color: #ffffff;
      }
    }
  }

  .goods-tools {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 84rpx;
    line-height: 42rpx;
  }

  .jump-box {
    position: fixed;
    left: 50%;
    bottom: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350rpx;
    height: 80rpx;
    color: #fff;
    background-color: #6be5f8;
    border-radius: 40rpx;
    transform: translateX(-50%);
    z-index: 99;

    .logo-img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
      box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
    }

    .tip {
      font-size: 28rpx;
    }
  }

  .view-alert {
    /* position: absolute;
  	left: 0;
  	top: 0;
  	z-index: 9; */
    width: 750rpx;
    background: rgb(52, 52, 52);
    margin-left: 0px;
    margin-right: 0px;
    padding: 60rpx 30rpx 60rpx 60rpx;
    box-shadow: rgba(22, 22, 23, 0.62) 0px -10px 16px inset;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    box-sizing: border-box;

    .alert-text {
      flex: 1;
      color: #7f7e7e;
      font-weight: 400 !important;
      padding-right: 60rpx;
      line-height: 1.5;
    }

    .alert-arrow {
      flex-shrink: 0;
      width: 60rpx;
      height: 60rpx;
      margin-top: -30rpx;
    }
  }
  
  .wx-open {
    position: fixed;
    bottom: 400rpx;
    left: 50%;
    width: 300rpx;
    height: 100rpx;
    color: #fff;
    background-color: red;
    transform: translateX(-50%);
    z-index: 9;
    
    #launch-btn {
      width: 100%;
      height: 100%;
    }
  }
</style>