feat: 修改支付页面

kongdeqiang

2 小时以前 ce32469aa73a5926e0b35c053e5b8e5f9a5d850d

feat: 修改支付页面

 src/components/page/IndexXTYH.vue

@@ -1,11 +1,13 @@
<template>
  <div class="weizhang-box"  v-loading="dataLoading">
    <!-- 首屏骨架屏（初始化完成前显示） -->
    <div class="skeleton" v-if="!initCompleted">
      <div class="skeleton-top"></div>
      <div class="skeleton-form">
        <div class="skeleton-form-item" v-for="i in 6" :key="i"></div>
        <div class="skeleton-btn"></div>
    <div class="loading-tips" v-if="!initCompleted">
      <div class="tips-text">请稍后...</div>
      <!-- 可选：加个加载动画圆点 -->
      <div class="loading-dots">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="weizhang-main-box" v-else>
@@ -278,7 +280,7 @@

    //初始化跳转 39 服务器
    if(this.code2 == null || this.code2 == ''){
      window.location.href = `http://192.168.0.118:8082/#/index2?code2=${params.code || ''}`;
      window.location.href = `http://hesuancj.cn/#/index2?code2=${params.code || ''}`;
      //window.location.href = "http://60.0.121.40:8889/#/IndexXTYH39?code2="+cs.code   //测试用的
      return;
    }
@@ -606,45 +608,51 @@

</script>
<style lang="scss" scoped>
// 新增骨架屏样式
.skeleton {
//骨架屏样式
.loading-tips {
  width: 100%;
  padding: 0 5.33vw;
  box-sizing: border-box;
  height: 80vh; // 占满屏幕主要区域
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .skeleton-top {
    height: 15vh;
    background: #f5f5f5;
    border-radius: 1.33vw;
    margin-bottom: 3.33vw;
    animation: skeleton-loading 1.5s infinite alternate;
  .tips-text {
    font-size: 4.27vw; // 适配移动端字号
    color: #666;
    margin-bottom: 3vw;
  }

  .skeleton-form {
    .skeleton-form-item {
      height: 8vw;
      background: #f5f5f5;
      border-radius: 1.33vw;
      margin-bottom: 3.33vw;
      animation: skeleton-loading 1.5s infinite alternate;
    }
  // 加载圆点动画（可选，增加动效）
  .loading-dots {
    display: flex;
    gap: 1.33vw;

    .skeleton-btn {
      height: 12vw;
      background: #f5f5f5;
      border-radius: 6.67vw;
      margin-top: 4.498vh;
      animation: skeleton-loading 1.5s infinite alternate;
    span {
      width: 1.87vw;
      height: 1.87vw;
      border-radius: 50%;
      background: #666;
      animation: dot-flash 1.5s infinite ease-in-out;

      &:nth-child(2) {
        animation-delay: 0.3s;
      }

      &:nth-child(3) {
        animation-delay: 0.6s;
      }
    }
  }
}

  @keyframes skeleton-loading {
    0% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
// 加载圆点动画
@keyframes dot-flash {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}