wxapp_shuibei/pages/user/index.vue

<template>
  <view class="mycontent">
    <view class="banner"></view>
    <view class="header">
      <view class="userInfo">
        <view class="avator-box">
          <image
            class="avatar"
            :src="isHttpsImage(appStore.$userInfo?.avatar)"
            mode="scaleToFill"
          ></image>
        </view>

        <view class="right">
          <view class="name">
            <view class="left">
              <!-- 昵称： -->
              <span v-if="appStore.isLogin">
                {{ appStore.$userInfo?.nickname }}
              </span>
              <span v-else @click="navigateTo('/pages/users/login/index')">
                未登录
              </span>

              <image
                v-if="appStore.$userInfo?.svip"
                style="height: 30rpx"
                :src="svipUrl"
                mode="heightFix"
              ></image>
              <image
                v-if="isDg"
                class="dgImg"
                style="height: 38rpx"
                src="https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/%E6%B0%B4%E8%B4%9D%E4%BB%A3%E8%B4%AD.png"
                mode="heightFix"
              ></image>
              <image
                v-if="isTjg"
                class="dgImg"
                style="height: 30rpx"
                src="https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/%E6%8E%A8%E8%8D%90%E5%AE%98.png"
                mode="heightFix"
              ></image>
            </view>
            <view class="vip-img">
              <image
                v-if="appStore.$userInfo?.vip"
                :src="appStore.$userInfo.vipIcon"
                mode="heightFix"
              ></image>
            </view>

            <view class="detail">
              <view class="detaik-item"
                >性别：{{
                  { 0: "未知", 1: "男", 2: "女" }[appStore.$userInfo?.sex] ||
                  "未知"
                }}</view
              >
              <view class="detaik-item"
                >年龄：{{ appStore.$userInfo?.age }}</view
              >
              <view class="detaik-item"
                >城市：{{ address ? address : "未知" }}</view
              >
              <view class="detaik-item"
                >贝币：{{ appStore.$userInfo?.integral }}</view
              >
            </view>
          </view>
          <!-- <view class="edit" @click="nativeTo('/pageA/user/setting')"></view> -->
        </view>
      </view>

      <!-- 滚动顶部提示 -->
      <view
        class="notice-bar-box"
        v-if="appStore.$wxConfig?.myPageAnnouncement"
      >
        <uni-notice-bar
          show-icon
          color="#e8c279"
          background-color="#ffffff"
          scrollable
          :text="appStore.$wxConfig?.myPageAnnouncement"
        />
      </view>

      <!-- 勋章 -->
      <view class="medal-content">
        <view
          v-for="(item, index) in medalList"
          :key="index"
          class="one-gird"
          @click="medalTip(item)"
        >
          <image
            mode="heightFix"
            class="medalIamge"
            :src="item.medalStatus ? item.icon : item.iconFail"
          ></image>
        </view>
      </view>

      <!-- <tm-listitem
      v-if="userInfo.role && userInfo.role.includes('manager')"
      title="管理后台"
      leftIcon="icon-display-code"
      showLeftIcon
      leftIconColor="mymain"
      @click="uni.navigateTo(`/pages/system/home`)"
    ></tm-listitem>
    <tm-listitem
      v-if="userInfo.role && userInfo.role.includes('manager')"
      title="数据看板"
      leftIcon="icon-display-code"
      showLeftIcon
      leftIconColor="mymain"
      @click="uni.navigateTo(`/pageA/user/adminData`)"
    ></tm-listitem> -->

      <view class="block">
        <view class="menu-group">
          <block v-for="(item, index) in group1" :key="index">
            <view
              class="menu-group-item"
              @click="nativeToOrder(item)"
              v-if="
                !item.is_show ||
                (item.is_show && !appStore.$wxConfig.auditModeEnabled)
              "
            >
              <view class="image-box">
                <image
                  mode="widthFix"
                  class="menu-img"
                  :src="item.icon"
                  :style="{
                    width: item.width + 'rpx',
                    height: item.height + 'rpx',
                  }"
                />
              </view>
              <view class="menu-item-right">
                <text class="menu-item-title">{{ item.text }}</text>
                <view class="menu-btn">{{ ">" }}</view>
              </view>
            </view>
          </block>
        </view>
      </view>
      <up-popup
        :show="showOfficial"
        closeOnClickOverlay
        mode="center"
        @close="close"
      >
        <view class="upopup-box">
          <image
            style="width: 100%"
            src="https://mp-c7c90a6c-c53b-48dd-bd94-692abc111f89.cdn.bspapp.com/2025/08/04/85093216-23858947-0.jpg"
            mode="widthFix"
            showMenuByLongpress
          ></image>
          <view style="width: 100%; text-align: center; color: #999"
            >长按识别跳转公众号</view
          >
        </view>
      </up-popup>
      <!-- 弹窗 -->
      <uni-popup ref="popup" type="center" :isMaskClick="true">
        <view class="medal-loading" style="background-color: #fff">
          <view class="title">{{ medalTips.title }}</view>
          <view class="content">
            <view>{{ medalTips.content }}</view>
            <view>{{ medalTips.effect }}</view>
          </view>
          <view class="btn-box"
            ><view class="btn" @click="popup.close">我已了解</view></view
          >
        </view>
      </uni-popup>

      <up-popup
        :show="showCallList"
        closeOnClickOverlay
        mode="bottom"
        @close="showCallList = false"
      >
        <view class="callService">
          <view class="list-box">
            <view
              v-for="(item, index) in callList"
              :key="index"
              class="list-item"
              @click="callService(item)"
            >
              <view class="item-left">
                <view class="item-name">{{ item.serviceName }}</view>
              </view>
            </view>
          </view>
        </view>
      </up-popup>
    </view>
  </view>
</template>

<script setup>
import { useAppStore } from "@/stores/app";
import { onLoad, onLaunch } from "@dcloudio/uni-app";
import { ref, computed, watch } from "vue";
import { isHttpsImage } from "@/utils/util";
// import { getCustomerServiceList } from "@/api/message";
import { useToast } from "@/hooks/useToast";
import { getOtherUserInfo } from "@/api/user";
const appStore = useAppStore();
const { Toast } = useToast();

// 基础值类型
const userInfo = ref({});
const showPic = ref("");
const encryptedKey = ref("");
const invite_img = ref("");
const invite_code = ref("");
const show = ref(false);
const showInvite = ref(false);
const showOfficial = ref(false);
const official_img = ref("");
const system = ref(false);
const vipImgWidth = ref(0);
const isLogin = ref(false);
const callList = ref([]);
const showCallList = ref(false);
const noticeText = ref("");
const popup = ref(null);
const svipUrl = ref(
  "https://sb-admin.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2025/08/28/956c1b714a7343a88844c630c9512faf1xcd2jqu1m.gif"
);
// 勋章列表
const medalList = ref([]);

// 勋章提示信息
const medalTips = ref({
  title: "",
  content: "",
  effect: "",
});

// 地址信息
const address = computed(() => {
  const address = appStore.$userInfo?.addres || "";
  const addressParts = address.split("-");
  const targetValue = addressParts[1];
  return targetValue;
});
// 订单列表2
const secondOrderList = ref([
  {
    icon: `https://mp-c7c90a6c-c53b-48dd-bd94-692abc111f89.cdn.bspapp.com/static/lj.png`,
    text: "存金",
    url: "/pages/order/list",
  },
  {
    icon: `https://mp-c7c90a6c-c53b-48dd-bd94-692abc111f89.cdn.bspapp.com/static/我的/recieve@3x.png`,
    text: "回收",
    url: "/pageA/recycle/list",
  },
]);

// 功能组1
const group1 = ref([
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/address-card-solid%403x.png`,
    text: "基本资料",
    url: "/pages/personal_info/personal_info",
    is_show: false,
    width: 46,
    height: 70,
  },
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/user-check-solid%403x.png`,
    text: "实名认证",
    url: "/pages/users/face_detect/index",
    is_show: true,
    width: 46,
    height: 70,
  },
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/%E8%B7%AF%E5%BE%84717%403x.png
`,
    text: "账号设置",
    url: "/pages/change_password/change_password",
    is_show: false,
    width: 43,
    height: 70,
  },
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/%E8%B7%AF%E5%BE%84716%403x.png
`,
    text: "收货地址",
    url: "/pages/users/user_address_list/index",
    is_show: false,
    width: 43,
    height: 70,
  },
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/wallet-solid%403x.png`,
    text: "卡包管理",
    url: "/pages/users/card_page/index",
    is_show: true,
    width: 42,
    height: 70,
  },
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/pelpeo_20251011145117_887_6.png`,
    text: "关于我们",
    url: "/pages/users/about/index",
    is_show: false,
    width: 38,
    height: 70,
  },
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/%E7%BB%84779%403x.png
`,
    text: "官方公众号",
    is_show: false,
    width: 46,
    height: 70,
  },
  // {
  //   icon: `https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/user/加盟我们.png`,
  //   text: "加盟我们",
  //   url: "/pageA/user/joinUs/joinUs",
  //   is_show: true,
  //   width: 49,
  //   height: 70,
  // },
  {
    icon: `https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/user_icon/%E5%9B%BE%E5%B1%82_x0020_1%403x.png

`,
    text: "联系客服",
    is_show: false,
    width: 37,
    height: 70,
    url: "callList",
  },
]);

onLoad(async () => {
//   fetchUserInfo();
});
const medalTip = (item) => {
  // 打开弹窗
  popup.value.open();
  medalTips.value = {
    title: item.title,
    content: item.content,
    effect: item.effect,
  };
};
// 获取用户信息
async function fetchUserInfo() {
  try {
    const { data } = await getOtherUserInfo(appStore.$userInfo.userId);

    userInfo.value = data;
    console.log("userInfo==>", userInfo.value);

    appStore.UPDATE_userPanelInfo(data);
    medalList.value = data.medalList;
  } catch (error) {
    console.error("otherUserinfo", error);
    Toast({ title: "获取用户信息失败" });
  }
}
const callService = async (item) => {
  wx.openCustomerServiceChat({
    corpId: item.enterpriseId,
    extInfo: {
      url: item.serviceLink,
    },
  });
};

const navigateTo = (url) => {
  if (!url) return;
  uni.navigateTo({ url });
};

const nativeToOrder = (item) => {
  // if (item?.text === "实名认证" && this?.auth_status) {
  //   console.log(this.auth_status);
  //   uni.navigateTo("/pageA/faceBioAssay/faceBioSuccess");
  //   return true;
  // }

  if (item.text === "联系客服") {
    if (!appStore.isLogin) {
      Toast({ title: "未登录，请登录后再联系客服" });
      setTimeout(() => {
        uni.navigateTo({
          url: "/pages/users/login/index",
        });
      }, 1000);
      return;
    }
    showCallList.value = true;
    return true;
  }
  if (item.text === "官方公众号") {
    officialClick();
    return true;
  }
  if (item.text === "基本资料") {
    uni.navigateTo({
      url: "/pageA/user/setting",
      success: (res) => {
        // 1代表账号设置
        res.eventChannel.emit("setting", { setting: 1 });
      },
    });
  }

  uni.navigateTo({ url: item.url });
};

const officialClick = () => {
  showOfficial.value = true;
};

function close() {
  // 关闭逻辑，设置 show 为 false
  showOfficial.value = false;
  // console.log("close");
}
const isDg = computed(() => {
  if (userInfo.value.joinRoles) {
    return userInfo.value?.joinRoles.find((item) => item.roleType == 1);
  }
});
const isTjg = computed(() => {
  if (userInfo.value.joinRoles) {
    return userInfo.value?.joinRoles.find((item) => item.roleType == 2);
  }
});
</script>

<style scoped lang="scss">
.dgImg {
  margin-top: 2rpx;
}
.upopup-box {
  width: 600rpx;
  border-radius: 30rpx;
  overflow: hidden;
}
.medal-loading {
  width: 450rpx;
  height: auto;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  // align-items: center;
  position: relative;
  .title {
    height: 69rpx;
    width: 100%;
    border-bottom: 2rpx dashed #c1c1c1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
  }
  .content {
    font-size: 26rpx;
    margin: 20rpx 20rpx;
    text-align: center;
  }
  .btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10rpx 0;
    margin-bottom: 20rpx;
    .btn {
      // position: absolute;
      // left: 50%;
      // bottom: 20rpx;
      // transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #cc9933;
      width: 180rpx;
      height: 50rpx;
      border-radius: 30rpx;
      font-size: 26rpx;
      color: #ffffff;
    }
  }
}

.callService {
  padding: 20px 10px 0px;
  // background-color: #ddcca3;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 16px;
  // margin-bottom: 30rpx;

  .list-box {
    background: #fff;
    border-radius: 20px;

    .list-item {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #e1e1e1;
    }
  }
}
.notice-bar-box {
  margin-bottom: 10rpx;
}
// 顶部提示
.tips {
  width: 650rpx;
  height: 48rpx;
  background-color: #ffffff;
  box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(0, 0, 0, 0.07);
  border-radius: 100rpx;
  font-family: Source Han Sans CN;
  font-size: 22rpx;
  color: #666666;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  // padding: 0 40rpx;
  padding-left: 40rpx;
  margin: 30rpx auto;
  image {
    width: 26rpx;
  }
  text {
    margin-left: 20rpx;
  }
}

::v-deep .uni-noticebar {
  box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(0, 0, 0, 0.07);
  border-radius: 100rpx;
  height: 48rpx !important;
  width: 650rpx !important;
  justify-content: center;
  margin: 0 auto;
  // text {
  //     font-size: 26rpx !important;
  // }
}
.orderlist-second {
  display: flex;
  justify-content: space-between;

  .order-box {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100rpx;
    margin-left: 40rpx;
    box-sizing: border-box;

    &:nth-child(1) {
      border-right: 2rpx dashed #d9d9d9;
    }

    &:nth-child(2) {
      .image {
        padding-left: 64rpx;
      }
    }

    .image {
      height: 56rpx;
    }

    .text {
      margin-left: 30rpx;
      font-size: 28rpx;
      color: #000000;
      font-family: "Source Han Sans CN";
    }
  }
}

.menu-group {
  width: 100%;
  background-color: #ffffff;
  padding: 0 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .menu-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 95rpx;
    border-bottom: 2rpx dashed #c1c1c1;
    &:last-child {
      border-bottom: none;
    }
    .image-box {
      width: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .menu-img {
        width: 46rpx;
        margin-left: 20rpx;
        // height: 40rpx;
      }
    }

    .menu-item-right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 30rpx;

      .menu-item-title {
        color: #666666;
        font-family: "Source Han Sans CN";
        font-size: 26rpx;
      }

      .menu-btn {
        color: #999999;
        // font-family: 'Source Han Sans CN';
        font-size: 20rpx;
      }
    }
    &:nth-child(5) {
      .menu-img {
        width: 42rpx;
      }
    }
  }
}

.mycontent {
  height: 100vh;
  background-image: $uni-bg-primary !important;
  position: relative;
  z-index: 1;
}

.header {
  box-sizing: border-box;
  padding-top: 62.5px;
  margin-bottom: 28rpx;
  height: 100%;
}

.banner {
  box-sizing: border-box;
  // background: linear-gradient(to bottom, #b7ad94, #fcfcfc);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  z-index: -1;
}

.bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;

  .barItem {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;

    &:nth-child(odd) {
      border-right: 1px solid #5f5f5f;
    }
  }
}

.userInfo {
  margin-top: 80rpx;
  display: flex;
  margin-bottom: 60rpx;
  position: relative;
  padding: 0 40rpx;
  height: 150rpx;
  .avator-box {
    width: 150rpx;
    height: 100%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      flex-shrink: 0;
    }
  }

  .right {
    // flex: 1;
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 66%;
    // padding: 20rpx 0;
    height: 100%;

    .name {
      width: 100%;
      align-items: center;
      font-size: 0.9375rem;
      font-weight: bold;
      white-space: nowrap;
      height: 100%;
      display: flex;
      text-overflow: ellipsis;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .vip-img {
      width: 100%;
      display: flex;
      margin-top: 8rpx;
      image {
        height: 27rpx;
      }
    }

    .left {
      margin-right: 10px;
      display: flex;
    }

    .detail {
      width: 100%;
      color: #5f5f5f;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      font-weight: 500;
      margin-top: 20rpx;
      .detaik-item {
        width: 33%;
        // margin-bottom: rpx;
      }
    }

    .progress-box {
      width: 90%;
      padding-top: 14px;
    }
  }

  .edit {
    width: 20px;
    height: 20px;
    background-image: url(https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/base/bg.png);
    background-position: -140px -279px;
  }
}

.block {
  padding: 0px 20px;
  margin-bottom: 10px;
  height: calc(100vh - 750rpx);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 73rpx;

  .header {
    padding-left: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 10rpx;
    width: 100%;

    &::before {
      position: absolute;
      top: 50%;
      transform: translatey(-40%);
      left: 0;
      content: "";
      width: 2px;
      height: 18px;
      background-color: #daa520;
    }

    .title {
      font-weight: 500;
      font-size: 32rpx;
      font-family: "黑体";
    }
  }

  .group-item {
    margin: 10rpx;
    padding: 20rpx 10rpx;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #cbcbcb;

    &:last-child {
      border-bottom: none;
    }

    .group-value {
      display: flex;
      align-items: center;
      width: 100%;

      .group-img-box {
        margin-right: 10rpx;
        height: 90rpx;

        .group-img {
          height: 100%;
        }

        .new-group-img {
          // height: 80rpx;
          width: 23px;
          height: 18px;
        }
      }

      .group-title-box {
        // width: 450rpx;
        flex: 1;
        padding-right: 20rpx;

        .group-title {
          margin-top: 5rpx;
          margin-left: 8rpx;
          font-size: 28rpx;
          color: #666666;
          font-weight: 500;
          font-family: "黑体";
          margin-top: 10rpx;
        }
      }

      .group-label {
        font-size: 20rpx;
        margin-top: 6rpx;
        color: #989898;
        font-weight: 400;
        font-family: "宋体";
        line-height: 30rpx;
      }
    }
  }

  .group-btn-box {
    width: 15rpx;
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: center;

    .group-btn {
      color: #999999;
      font-size: 28rpx;
      margin-top: 10rpx;
    }
  }
}

.grouplist {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30rpx;

  .listitem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 150rpx;
    // height: 150rpx;
    margin-bottom: 50rpx;
  }

  .list-img,
  .list-tit {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .list-tit {
    font-size: 26rpx;
    color: #1c1c1c;
    font-weight: 400;
    margin-top: 15rpx;
  }
}

.footer {
  width: 100%;
  text-align: center;
  bottom: 40px;
  font-size: 12px;
  color: #b8b8b8;
}
// 勋章
.medal-content {
  padding: 0px 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .one-gird {
    .medalIamge {
      height: 67rpx;
    }
  }
}

.member-level {
  position: relative;
  margin-left: 14px;
  width: 60px;
  height: 16px;
  line-height: 16px;
  border-radius: 0 8px 8px 0;
  white-space: nowrap;
}

.myinvite {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;

  .share-button {
    bottom: 54px;
    height: 34px;
    width: 120px;
    background-color: transparent;
    position: absolute;
  }
}

.loginPoup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* #ifdef H5 */

  /* #endif */
  padding: 20px 0 50px;

  .loginTitle {
    font-size: 32rpx;
    font-weight: 600;
  }

  .xbtn {
    width: 300px;
    margin-top: 10px;
    border-radius: 40px;
    background-color: #b5aa90 !important;
    color: #ffffff;
  }

  .password {
    margin-top: 20px;
    font-size: 14px;
  }
}

.isOpen {
  height: 50px;
  background-color: #b9b9b9;
  position: fixed;
  bottom: 0px;
  /* #ifdef H5 */
  bottom: 50px;
  /* #endif */
  width: 100%;
  color: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>