web-base-h5/pages/mine/index.vue

<template>
  <view class="content">
    <!-- 上方头部 -->
    <view class="topBox">
      <view class="top_inder">
        <view class="top_left">
          <view class="left_img">
            <image
              class="headerimg"
              :src="
                userInfo.headPath
                  ? userInfo.headPath
                  : userInfo.settleCountryCircularIcon
              "
              mode=""
            >
            </image>
          </view>

          <view class="left_text">
            <view class="name_box">
              <view class="tTit1">{{ userInfo.memberCode }}</view>
              
            </view>
            <view class="cmem">
              <view 
                style="margin-right: 20rpx; display: flex;"
              >
                <view style="margin-right: 10rpx;">{{ '结算等级' }}:</view>
                <view class="jxTit1">{{ userInfo.pkGradeVal }}</view>
              </view>
              <view class="grade_left">
                <view class="gra_left1" v-if="userData.registerAuthority">
                  <image
                    class="gra_icon"
                    src="@/static/images/fw_icon.png"
                    mode=""
                  ></image>
                  <view class="">
                    {{ userData.registerAuthorityVal }}
                  </view>
                </view>
              </view>
            </view>
            <view class="cmem">
              <view style="margin-right: 10rpx;">{{ '荣誉奖衔' }}:</view>
              <view class="jxTit1">{{ userInfo.pkAwardsVal }}</view>
            </view>
          </view>
          
        </view>
        <view class="top_right" @click="goTo('/pages/userData/index')">
          <view class="ricon">
            <u-icon color="#ffffff" size="22" name="setting-fill"></u-icon>
          </view>
        </view>
      </view>
    </view>
   
              
    <view class="ju_grade" v-if="!ifSpecial">
      <view v-if="awards.tarAwardsName" class="awards-progress-summary"  style="text-align: center;">
        <span class="descriptive-text">当前距离</span>
        <span class="highlight-name">
          {{ awards.tarAwardsName }}
        </span>
        <span class="descriptive-text">奖衔,小区仅需</span>
        <span class="highlight-pv">
          {{
            
            sprintProgress.achieved
          }}</span>
      </view>
      
      <view class="jugrade_flex">
        <view class="ju_left">
          <view class="yestDay">
            <view class="yes_t">昨日业绩</view>
            <view :class="awards.aNewPv!=0&&awards.bNewPv!=0?'ju_left_bottom1':'ju_left_bottom'">
              <view
                class="current-progress"
                :style="{
                  width: yesPercent(awards.aNewPv, awards.bNewPv),
                }"
              ></view>
              <view class="cha">
                左区 {{ awards.aNewPv || 0 }}/右区 {{ awards.bNewPv || 0 }}
              </view>
            </view>
          </view>
          <view class="yestDay">
            <view class="yes_t">当月业绩</view>
            <view :class="awards.aMonthPv!=0&&awards.bMonthPv!=0?'ju_left_bottom1':'ju_left_bottom'">
              <view
                class="current-progress"
                :style="{
                  width: yesPercent(awards.aMonthPv, awards.bMonthPv),
                }"
              ></view>
              <view class="cha">
                
                左区 {{ awards.aMonthPv || "0.00" }}/右区 {{ awards.bMonthPv || "0.00" }}
              </view>
            </view>
          </view>
          <view class="yestDay">
            <view class="yes_t">{{ '历史业绩' }}</view>
            <view :class="awards.aSumPv!=0&&awards.bSumPv!=0?'ju_left_bottom1':'ju_left_bottom'">
              <view
                class="current-progress"
                :style="{
                  width: yesPercent(awards.aSumPv, awards.bSumPv),
                }"
              ></view>
              <view class="cha">
                左区 {{ awards.aSumPv }}/右区 {{ awards.bSumPv }}</view
              >
            </view>
          </view>
          <view v-if="awards.tarAwardsName" class="yestDay">
            <view class="yes_t">奖衔冲刺</view>
            <view class="ju_left_bottom sprint-progress-container">
              <view 
                class="sprint-current-progress" 
                :style="{ width: sprintProgress.percentageString }"
              ></view>
              <view class="cha sprint-progress-text">
                已完成 {{ awards.sumRealPv }} / 目标 {{ sprintProgress.target }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="my_order">
      <view class="my_title">
        <text class="thetitle">{{ '我的订单' }}</text>
        <view class="findallorder" @click="goTo('/pages/mine/order/index')">
          <text>{{ '全部订单' }}</text>
          <u-icon name="arrow-right" color="#999999" size="16rpx"></u-icon>
        </view>
      </view>
      <view class="order_flex thepadding">
        <view class="theorderflex1" @click="goOrder(0)">
          <image class="order_img2" src="../../static/images/myorder_1.png" />
          <view class="order_text">{{ '待付款' }}</view>
          <view v-if="waitPayNum" class="qiu">{{ waitPayNum }}</view>
        </view>
        <view class="theorderflex1" @click="goOrder(1)">
          <image class="order_img2" src="../../static/images/myorder_2.png" />
          <view class="order_text">{{ '待发货' }}</view>
          <view v-if="payNum" class="qiu">{{ payNum }}</view>
        </view>
        <view class="theorderflex1" @click="goOrder(3)">
          <image class="order_img2" src="../../static/images/myorder_3.png" />
          <view class="order_text">{{ '待收货' }}</view>
        </view>
        <view class="theorderflex1" @click="goOrder(5)">
          <image class="order_img2" src="../../static/images/myorder_4.png" />
          <view class="order_text">{{ '已收货' }}</view>
        </view>
      </view>
    </view>

    <!-- 市场动态 -->
    <view class="my_order" v-if="actMenu">
      <view class="my_title">
        <text class="thetitle">{{ '市场动态' }}</text>
      </view>
      <view class="order_flex">
        <template v-for="(item, index) in markMenuList">
          <view
            class="theorderflex1"
            @click="goTo(item.url)"
            v-if="item.ifshow"
            :key="index"
          >
            <image class="order_img" :src="item.imgurl" />
            <view class="order_text">{{ item.name }}</view>
          </view>
        </template>
      </view>
    </view>

    <view class="my_order">
      <view class="order_flex">
        <template v-for="(item, index) in otherMenuList">
          <view
            class="theorderflex1"
            v-if="item.ifshow"
            :key="index"
            @click="goTo(item.url)"
          >
            <image class="order_img" :src="item.imgurl" />
            <view class="order_text">{{ item.name }}</view>
          </view>
        </template>
        <!-- <view
          class="theorderflex1"
          @click="goTo('/pages/mine/feedBack/feedBack')"
        >
          <image class="order_img" src="../../static/images/my_icon12.png" />
          <view class="order_text">{{ '意见反馈' }}</view>
        </view> -->
        <!-- <picker
          :range="getLanguageList"
          :value="index"
          range-key="label"
          @change="bindPickerChange"
        >
          <view class="theorderflex1" @click="goTo('')">
            <image class="order_img" src="../../static/images/mark6.png" />
            <view class="order_text">{{ '多语言切换' }}</view>
          </view>
        </picker> -->
        <!-- <view
          class="theorderflex1"
          @click="goTo('/pages/mine/branchAddress/branchAddress')"
        >
          <image class="order_img" src="../../static/images/my_icon9.png" />
          <view class="order_text"
            >{{ '分公司' }}{{ '地址' }}</view
          >
        </view> -->

         <!-- <view class="theorderflex1" @click="goYear">
                    <image class='order_img' src="../../static/images/my_icon12.png" />
                    <view class="order_text">{{ '年度奖衔' }}</view>
                </view>  -->
        <!-- <view class="theorderflex1" @click="goTo('')">
                    <image class='order_img' src="../../static/images/my_icon12.png" />
                    <view class="order_text">关于我们</view>
                </view> -->
      </view>
    </view>

    <!-- 会员中心 -->

    <view class="btnbox">
      <u-button
        shape="circle"
        @click="loginOut()"
        color="#005BAC"
        :text="'退出登录'"
      ></u-button>
    </view>
    <cl-tabbar :current="4"></cl-tabbar>
    <u-popup
      :show="pswShow"
      class="pspopup"
      mode="center"
      closeable
      @close="pswShow = false"
    >
      <view class="t_tit">{{ '二级密码' }}</view>
      <view class="box">
        <view class="c_tit">{{ '请输入二级密码' }}</view>

        <u--input
          border="surround"
          type="password"
          v-model="password"
        ></u--input>
        <u-button
          type="success"
          class="uBtn"
          shape="circle"
          @tap="surePsw"
          color="#005BAC"
          >{{ '确认' }}
        </u-button>
      </view>
    </u-popup>
    <!-- <talentList :drShow="drShow" @closeShow="closeShow"></talentList> -->
  </view>
</template>

<script>
import clTabbar from "@/components/cl-tabbar.vue";
import * as min from "@/config/balance.js";
import * as api from "@/config/login.js";
// import talentList from "@/components/talentList.vue";
export default {
  components: {
    "cl-tabbar": clTabbar,
    // talentList,
  },
  data() {
    return {
      getLanguageList: [],
      index: 0,
      userInfo: {},
      userData: {},
      pswShow: false,
      password: "",
      waitPayNum: "",
      payNum: "",
      awards: {},
      markMenuList: [
        {
          url: "/pages/performanceEchart/index",
          name: '数据查询',
          imgurl: "../../static/images/mark1.png",
          menuKey: "marketDynamics",
          ifshow: true,
        },
        {
          url: "/pages/bonus/index",
          name: '奖金明细',
          imgurl: "../../static/images/mark2.png",
          menuKey: "incomeDetail",
          ifshow: false,
        },

        {
          url: "/pages/market/examineDetail/examineDetail",
          name: '考核明细',
          imgurl: "../../static/images/mark5.png",
          menuKey: "appraisal",
          ifshow: false,
        },
        {
          url: "/pages/market/registerList/registerList",
          name: '注册列表',
          imgurl: "../../static/images/mark6.png",
          menuKey: "registration",
          ifshow: false,
        },
        {
          url: "/pages/market/investmentList/investmentList",
          name: '招商列表',
          imgurl: "../../static/images/mark7.png",
          menuKey: "investment",
          ifshow: false,
        },
        {
          url: "/pages/market/activeArea/index",
          name: '活动专区',
          imgurl: "../../static/images/mark9.png",
          menuKey: "activeZone",
          ifshow: false,
        },
        {
          url: "/pages/architecture/architecture",
          name: '架构管理',
          imgurl: "../../static/images/my_icon14.png",
          menuKey: "recommend",
          ifshow: false,
        },
      ],

      otherMenuList: [
        {
          url: "1",
          name: '我的钱包',
          imgurl: "../../static/images/my_icon1.png",
          menuKey: "wallet",
          ifshow: false,
        },
        {
          url: "/pages/pickupArea/pickupArea",
          name: '提货专区',
          imgurl: "../../static/images/my_icon3.png",
          menuKey: "pickGoods",
          ifshow: false,
        },
        // {
        //   url: "/pages/memberCard/index",
        //   name: '电子会员卡',
        //   imgurl: "../../static/images/mark5.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        {
          url: "/pages/makerspaceView/index",
          name: '创客空间认证',
          imgurl: "../../static/images/my_icon5.png",
          menuKey: "space",
          ifshow: false,
        },
        {
          url: "/pages/selfService/index",
          name: '自助服务',
          imgurl: "../../static/images/my_icon6.png",
          menuKey: "selfHelp",
          ifshow: false,
        },
        {
          url: "/pages/userSecure/index",
          name: '账号安全',
          imgurl: "../../static/images/my_icon8.png",
          menuKey: "",
          ifshow: false,
        },
        {
          url: "/pages/addressList/index",
          name: '地址管理',
          imgurl: "../../static/images/my_icon9.png",
          menuKey: "",
          ifshow: false,
        },
        {
          url: "/pages/mine/bindBank/index",
          name: '银行信息',
          imgurl: "../../static/images/my_icon10.png",
          menuKey: "",
          ifshow: false,
        },
        // {
        //   url: "2",
        //   name: "达人榜单",
        //   imgurl: "../../static/images/my_icon10.png",
        //   menuKey: "",
        //   ifdr: 1,
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/myMarket/myMarket",
        //   name: '我的市场',
        //   imgurl: "../../static/images/my_icon9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/globalDistribution/globalDistribution",
        //   name: '全球分布',
        //   imgurl: "../../static/images/my_icon9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/honorHall/honorHall",
        //   name: "荣誉馆",
        //   imgurl: "../../static/images/my_icon9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/giftAddress/list",
        //   name: '礼品地址',
        //   imgurl: "../../static/images/mark9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        // {
        //   url: "/pages/mine/space/list",
        //   name: '创客空间',
        //   imgurl: "../../static/images/mark9.png",
        //   menuKey: "",
        //   ifshow: false,
        // },
        {
          url: "/pages/mine/addNewPv/index",
          name: '新增业绩',
          imgurl: "../../static/images/mark9.png",
          menuKey: "iNewAchievement",
          ifshow: false,
        },
      
      ],
      drShow: false,
      actMenu: false,
      iHonorAward: false,
      ifSpecial: false,
      awardsList: "",
    };
  },
  onShow() {
    this.getInfo();
    this.orderNum();
    this.getUserAwardss();
  },

  computed: {
    sprintProgress() {
      const targetPvStr = this.awards.targetPv;
      const sumRealPvStr = this.awards.sumRealPv; // 这是"小区仅需"的量，即差距

      const targetPv = parseFloat(targetPvStr);
      const sumRealPv = parseFloat(sumRealPvStr);

      let achievedPv = 0;
      let percentage = 0;
      const numericTargetPv = Math.floor((isNaN(targetPv) ? 0 : targetPv) * 100) / 100;

      if (!isNaN(targetPv) && targetPv > 0) {
        // sumRealPv 是差距，所以已完成的是 targetPv - sumRealPv
        achievedPv = targetPv - (isNaN(sumRealPv) ? 0 : sumRealPv);
        
        achievedPv = Math.max(0, Math.min(achievedPv, targetPv));
        
        percentage = (sumRealPvStr / targetPv) * 100;
      } else if (!isNaN(targetPv) && targetPv === 0 && !isNaN(sumRealPv) && sumRealPv <=0) {
        // 如果目标是0，且差距也是0或负数（表示已满足或超越0目标），则认为是100%
         achievedPv = 0;
         percentage = 100;
      }


      const clampedPercentage = Math.min(100, Math.max(0, percentage));

      return {
        percentageString: `${Math.floor(clampedPercentage)}%`,
        achieved: (Math.floor(achievedPv * 100) / 100).toFixed(2),
        target: numericTargetPv.toFixed(2),
        rawPercentage: clampedPercentage
      };
    }
  },

  methods: {
    goYear(){
      uni.navigateTo({
        url: "/pages/mine/yearGift/index",
      });
    },
    closeShow() {
      this.drShow = false;
    },
    goHonoray() {
      uni.navigateTo({
        url: "/pages/mine/honoraryAwards/honoraryAwards",
      });
    },
    //获取用户真实奖衔
    getUserAwardss() {
      api.getUserAwards().then((res) => {
        this.awards = res.data;
      });
    },
    GetPercent(num, total) {
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      if (total == 0) {
        return "0%";
      } else if (total < 0) {
        return 100 + "%";
      } else {
        return Math.round((num / total) * 10000) / 100.0 + "%";
      }
    },
    yesPercent(left, right) {
      left = parseFloat(left);
      right = parseFloat(right);
      if (isNaN(left) || isNaN(right)) {
        return '0%';
      }
      return right + left == 0
        ? "0%"
        : Math.round((left / (right + left)) * 10000) / 100.0 + "%";
    },
    orderNum() {
      api.orderNum().then((res) => {
        this.waitPayNum = res.data.waitPayNum;
        this.payNum = res.data.payNum;
      });
    },
    getInfo() {
      api.getInfo().then((res) => {
        if (res) {
          this.userInfo = res.data;
          if (this.userInfo.memberCode == "CN688806280001") {
            this.ifSpecial = true;
            this.otherMenuList = [
              {
                url: "1",
                name: '我的钱包',
                imgurl: "../../static/images/my_icon1.png",
                menuKey: "wallet",
                ifshow: false,
              },
              {
                url: "/pages/pickupArea/pickupArea",
                name: '提货专区',
                imgurl: "../../static/images/my_icon3.png",
                menuKey: "pickGoods",
                ifshow: true,
              },
              // {
              //   url: "/pages/memberCard/index",
              //   name: '电子会员卡',
              //   imgurl: "../../static/images/mark5.png",
              //   menuKey: "",
              //   ifshow: false,
              // },
              {
                url: "/pages/makerspaceView/index",
                name: '创客空间认证',
                imgurl: "../../static/images/my_icon5.png",
                menuKey: "space",
                ifshow: false,
              },
              {
                url: "/pages/selfService/index",
                name: '自助服务',
                imgurl: "../../static/images/my_icon6.png",
                menuKey: "selfHelp",
                ifshow: true,
              },
              {
                url: "/pages/userSecure/index",
                name: '账号安全',
                imgurl: "../../static/images/my_icon8.png",
                menuKey: "",
                ifshow: true,
              },
              {
                url: "/pages/addressList/index",
                name: '地址管理',
                imgurl: "../../static/images/my_icon9.png",
                menuKey: "",
                ifshow: true,
              },
              {
                url: "/pages/mine/bindBank/index",
                name: '银行信息',
                imgurl: "../../static/images/my_icon10.png",
                menuKey: "",
                ifshow: false,
              },
              {
                url: "2",
                name: "达人榜单",
                imgurl: "../../static/images/my_icon10.png",
                menuKey: "",
                ifdr: 1,
                ifshow: false,
              },
              {
                url: "/pages/mine/myMarket/myMarket",
                name: '我的市场',
                imgurl: "../../static/images/my_icon9.png",
                menuKey: "",
                ifshow: true,
              },
              {
                url: "/pages/mine/globalDistribution/globalDistribution",
                name: '全球分布',
                imgurl: "../../static/images/my_icon9.png",
                menuKey: "",
              },
              {
                url: "/pages/mine/honorHall/honorHall",
                name: "荣誉馆",
                imgurl: "../../static/images/my_icon9.png",
                menuKey: "",
                ifshow: false,
              },
              {
                url: "/pages/mine/giftAddress/list",
                name: '礼品地址',
                imgurl: "../../static/images/mark9.png",
                menuKey: "",
                ifshow: false,
              },
              {
                url: "/pages/mine/space/list",
                name: '创客空间',
                imgurl: "../../static/images/mark9.png",
                menuKey: "",
                ifshow: false,
              },
              // {
              // 	url: '/pages/mine/addNewPv/index',
              // 	name: '新增业绩',
              // 	imgurl: '../../static/images/mark9.png',
              // 	menuKey: '',
              // 	ifshow: false,

              // },
            ];
          } else {
            this.ifSpecial = false;
          }
        }
      });
      api.getData().then((res) => {
        if (res.code == 200) {
          this.userData = res.data;
        }
      });

      api.getMenuList().then((res) => {
        res.data.forEach((item) => {
          if (item.menuKey == "iHonorAward") {
            this.iHonorAward = true;
          }
          this.markMenuList.forEach((ele) => {
            if (ele.menuKey == item.menuKey || ele.menuKey == "") {
              ele.ifshow = true;
            }
          });
          this.otherMenuList.forEach((ele) => {
            if (ele.menuKey == item.menuKey || ele.menuKey == "") {
              ele.ifshow = true;
            }
          });
        });
        console.log("🌈ad", this.otherMenuList);

        let a = this.markMenuList.some((item) => {
          return item.ifshow == true;
        });
        this.actMenu = a;
      });
      // api.memberAwards().then((res) => {
      //   this.awardsList = res.data;
      // });
    },
    goTo(url) {
      if (url == 1) {
        this.pswShow = true;
      } else if (url == 2) {
        //达人榜单
        this.drShow = true;
      } else {
        uni.navigateTo({
          url: url,
        });
      }
    },
    goOrder(index) {
      //全部订单
      uni.navigateTo({
        url: "/pages/mine/order/index?isTab=" + index,
      });
    },
    goRoad(index) {
      //1等级2奖衔
      if (index == 1) {
        uni.navigateTo({
          url: "/pages/mine/growthRoad/gradeRoad",
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: "/pages/mine/growthRoad/awardRoad",
        });
      }
    },
    loginOut() {
      uni.setStorageSync("pkCountry", "");
      uni.setStorageSync("showInfo", 0);
      this.$store.dispatch("LogOut");
      uni.reLaunch({
        url: "/pages/login/index",
      });
    },
    surePsw() {
      min
        .checkPwd({
          pwd: this.password,
        })
        .then((res) => {
          if (res.code == 200) {
            this.password = "";
            this.pswShow = false;
            uni.navigateTo({
              url: "/pages/mine/balance/index",
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "error",
            });
          }
        });
    },
    goSpecialArea() {
      uni.switchTab({
        url: "/pages/specialArea/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ju_grade {
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 20rpx;
  padding: 20rpx;
  background: #ffffff;
  font-size: 24rpx;

  .descriptive-text {
    font-size: 22rpx;
    color: #666666;
    margin-right: 8rpx;
  }

  .highlight-name {
    font-size: 30rpx; /* 示例字号，您可以根据需要调整 */
    font-weight: bold;
    color: #005BAC; /* 示例颜色，您可以根据需要调整 */
    padding: 0 8rpx; /* 增加一些内边距，使其更突出 */
    margin-right: 10rpx; /* 在名称和下一个标签之间添加间距 */
  }

  .highlight-pv {
    font-size: 30rpx; /* 示例字号，您可以根据需要调整 */
    font-weight: bold;
    color: #FF5722; /* 示例颜色，您可以根据需要调整 */
    padding: 0 8rpx; /* 增加一些内边距，使其更突出 */
  }

  .ju_title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #666666;
    // padding-bottom: 10rpx;
    // border-bottom: 2rpx solid #eeeeee;
    // display: flex;
    // justify-content: space-between
  }
  .ju_title1 {
    font-size: 18px;
  }
  .jugrade_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin-top: 20rpx;
  }

  .ju_left {
    flex: 1;

    .ju_left_top {
      color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      .ju_text1 {
        font-weight: 400;
        color: #333;
      }

      .ju_text2 {
        color: #005BAC;
        font-weight: bold;
        font-size: 16px;
        padding: 0 6rpx;
      }
    }

    .ju_left_bottom {
      // width: 100%;
      flex: 1;
      height: 34rpx;
      background: #eeeeee;
      border-radius: 20rpx;
      margin: 10rpx;
      // margin-top: 23rpx;
      position: relative;


    }
    .ju_left_bottom1 {
      // width: 100%;
      flex: 1;
      height: 34rpx;
      background: #FFB74D;
      border-radius: 20rpx;
      margin: 10rpx;
      // margin-top: 23rpx;
      position: relative;


    }
      // .current-schedule1 {
      //   position: absolute;
      //   width: 30%;
      //   background: #005BAC;
      //   height: 34rpx;
      //   border-radius: 20px;
      // }
      // .current-schedule2 {
      //   position: absolute;
      //   width: 30%;
      //   background: #005BAC;
      //   height: 34rpx;
      //   border-radius: 20px;
      // }
      // .current-schedule3 {
      //   position: absolute;
      //   width: 30%;
      //   background: #005BAC;
      //   height: 34rpx;
      //   border-radius: 20px;
      // }
      .current-progress {
        position: absolute;
        width: 30%;
        background: #3385D6;
        height: 34rpx;
        border-radius: 20px;
      }
      .cha {
        width: 100%;
        position: absolute;
        top: 60%;
        left: 0;
        transform: translate(0%, -55%);
        white-space: nowrap;
        text-align: center;
        
      }
    .yestDay {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
    }
    .yes_t {
      margin-right: 20rpx;
    }
  }

  .ju_right {
    width: 104rpx;
    height: 94rpx;
    margin-left: 20rpx;

    .ju_img {
      width: 100%;
      height: 100%;
    }
  }
}

.my_order {
  background-color: #ffffff;
  box-shadow: 0px 4px 20px 0px rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  padding: 0 20rpx;
  margin-top: 20rpx;

  .my_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #eeeeee;
    padding: 20rpx 0;

    .thetitle {
      font-size: 28rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }

    .findallorder {
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999999;
      font-size: 16rpx;
      display: flex;
      align-items: center;
    }
  }

  .thepadding {
    padding: 20rpx 0;
  }

  .order_flex {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .theorderflex1 {
      margin: 18rpx 0;
      width: 165rpx;
      text-align: center;
      position: relative;

      .order_img {
        width: 48rpx;
        height: 46rpx;
      }

      .order_text {
        margin-top: 15rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      .order_img2 {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
        border-bottom: 20rpx;
      }

      .order_text2 {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .qiu {
        position: absolute;
        width: 20px;
        height: 20px;
        background: rgb(249, 48, 38);
        top: -10px;
        right: 10px;
        border-radius: 50%;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
      }
    }
  }

  .order_flex2 {
    justify-content: flex-start;

    .theorderflex1 {
      width: 120rpx; // flex: 1;
      margin-right: 66rpx;
    }
  }
}

.pspopup {
  .t_tit {
    text-align: center;
    margin-top: 40rpx;
    font-weight: bold;
    font-size: 32rpx;
  }

  .c_tit {
    margin-bottom: 40rpx;
  }

  .box {
    padding: 40rpx 40rpx;
    text-align: center;
  }

  .uBtn {
    margin-top: 40rpx;
  }
}

.content {
  padding: 0 22rpx;
  padding-bottom: 100rpx; // background-color: #f2f2f2;
  position: relative;
  font-size: 24rpx;
  background-image: linear-gradient(
    to bottom,
    #005BAC 5%,
    #f2f2f2 50%
  ); // background-position: top;

  .topBox {
    padding: 43rpx 0 20rpx 0;

    .top_inder {
      display: flex;
      justify-content: space-between;

      .top_left {
        display: flex;

        .left_img {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          border: 5rpx solid #ffffff;
          margin-right: 18rpx;

          .headerimg {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .left_text {
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name_box {
            display: flex;
            align-items: center;

            .tTit1 {
              font-size: 28rpx;
              font-family: Source Han Sans CN;
              font-weight: bold;
              margin-right: 22rpx;
            }

            .kuang {
              background-color: rgba(0, 0, 0, 0.25);
              padding: 14rpx 18rpx;
              border-radius: 40rpx;
              font-size: 20rpx;
            }
          }
        }
      }

      .top_right {
        position: absolute;
        top: 40rpx;
        right: 3%;
        color: #ffffff;
        .rtitle {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
        }
      }
    }

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

    .grade_left {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #005BAC;
      font-weight: 400;
      // margin-left: 20rpx;
      .gra_left1 {
        background: #ffffff;
        border: 1rpx solid #ffffff;
        border-radius: 20rpx 0 20rpx 20rpx;
        // margin-right: 30rpx;
        padding: 6rpx 20rpx;
        display: flex;
        align-items: center;

        .gra_icon {
          width: 26rpx;
          height: 26rpx;
          margin-right: 6rpx;
        }
      }
      // .gra_left1:last-child {
      //   margin-left: 20rpx;
      // }
    }

    .grade_flex {
      display: flex;
      align-items: center;
      color: #ffffff;
    }

    .btom_inder {
      display: flex;
      align-items: center; // margin-top: 24rpx;

      .jxbox {
        width: 65rpx;
        height: 65rpx;
        margin-right: 26rpx;

        .jximg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .jiangxian {
    display: flex;
    color: #ffffff;
    align-items: center;
    margin: 0rpx 0 10rpx 0;
  }
  .yt1 {
    font-weight: 600;
    font-size: 18px;
    margin-left: 10rpx;
  }
  .hisImg {
    width: 50rpx;
    height: 50rpx;
    margin-left: 10rpx;
  }

  .jxTit {
    flex: 1;
    text-align: center;
  }
  .jxTit1 {
    font-weight: 600;
    font-size: 24rpx;
  }
  .contentLink {
    .linktitle {
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      margin-bottom: 25rpx;
    }

    background-color: #ffffff; // border-radius: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 35rpx 25rpx;

    .my_icon {
      width: 39rpx;
      height: 37rpx;
    }

    .my_icon2 {
      width: 39rpx;
      height: 43rpx;
    }

    .my_icon3 {
      width: 43rpx;
      height: 37rpx;
    }

    .u-cell-text {
      margin-left: 25rpx;
    }
  }
}

::v-deep .u-line {
  border: none !important;
}

.btnbox {
  margin-top: 30rpx;
  padding: 20rpx 22rpx 150rpx 22rpx;
}

.sprint-progress-container {
  flex: 1;
  height: 34rpx;
  background: #eeeeee;
  border-radius: 20rpx;
  margin: 10rpx;
  position: relative;
  overflow: hidden;
}

.sprint-current-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #ED9A38 0%, #FDD05F 50%, #E68A2E 100%);
  transition: width 0.6s ease-in-out;
  box-shadow: none;
  overflow: hidden;
}

.sprint-current-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: translateX(-100%);
  animation: premium_shimmer_animation 2.5s infinite linear;
}

@keyframes premium_shimmer_animation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.sprint-progress-text {
  width: 100%;
  position: absolute;
  top: 60%;
  left: 0;
  transform: translate(0%, -55%);
  white-space: nowrap;
  text-align: center;
  font-size: 24rpx;
  color: #333333;
}
</style>