首页根据原型图重新做了

dcc

2024-05-08 6622d5dc21b1f0a63c01afb15f1ac8f565479b8f

 src/page/promote/index.vue

@@ -3,22 +3,22 @@
    <assets-head :title="$t('推荐')" />
    <div class="advise w-828 h-220 p-40 box-border flex flex-col items-start justify-center"
      :class="{ 'h-260 ': $i18n.locale !== 'CN' }">
      <span v-if="$i18n.locale === 'CN'" class="font-600 font-50" style="color:#273549;">{{ $t('邀请好友，一起赚币') }}</span>
      <span v-if="$i18n.locale === 'CN'" class="font-900 font-50" style="color:#273549;">{{ $t('邀请好友，一起赚币') }}</span>
      <span v-else class="font-900 w-445 font-55">{{ $t('邀请好友，一起赚币') }}</span>
      <span class="w-500 mt-20 font-40 font-600" style="color:#273549">{{ $t('马上充值即刻获取佣金') }}</span>
      <span class="w-500 mt-20 font-28 font-500" style="color:#273549">{{ $t('马上充值即刻获取佣金') }}</span>
    </div>
    <div class="performance-title">
      <div class="performance-title-1 flex-col flex items-start"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
        {{ $t('我的总推广') }}
        {{ $t('我的推荐') }}
        <div class="performance-text text-left">{{ promote_list.total && promote_list.total.children }}</div>
      </div>
      <div class="performance-title-2  flex-col flex items-center"
      <div class="performance-title-2  flex-col flex"
        :class="{ 'performance-title-1-1': $i18n.locale !== 'CN' }">
        {{ $t('总充值') }}
        <div class="performance-text2 text-left">{{ promote_list.recharge_sum ? (promote_list.recharge_sum * 1).toFixed(2)
        {{ $t('团队质押收益') }}
        <div class="performance-text2 text-left">{{ promote_list.recharge_sum ? (promote_list.recharge_sum * 1)
          :
          '0.00' }}</div>
          '0' }}</div>
      </div>
      <div class="flex items-center w-160 justify-end colorMain" style="align-self: start">
        <div class="performance-title-3" @click="$router.push('/promote/rules')">{{ $t('规则') }}</div>
@@ -26,49 +26,30 @@
        <img class="performance-title-4" src="../../assets/image/promote/right.png" />
      </div>
    </div>
    <div class="numberOfPeople">
      <div class="numberOfPeople-text flex flex-col align-center">
        {{ $t('一代人数') }}
        <div class="mt-20 numberOfPeople-text4 text-center">{{ promote_list.total && promote_list.total.level_1
        }}</div>
      </div>
      <div class="numberOfPeople-text2 flex flex-col align-center">
        {{ $t('二代人数') }}
        <div class="mt-20 numberOfPeople-text5 flex-1 text-center ">{{ promote_list.total &&
          promote_list.total.level_2
        }}</div>
      </div>
      <!--      <div style="flex: 1;"></div>-->
      <div class="numberOfPeople-text3 flex flex-col align-center">
        {{ $t('三代人数') }}
        <div class="mt-20 numberOfPeople-text6  flex-1 text-center ">{{ promote_list.total &&
          promote_list.total.level_3
        }}</div>
      </div>
    </div>
    <div class="Recommend">
      <div class="Recommend-text btnMain text-white" @click="ShareQRCode_push">{{ $t('立即推广') }}</div>
      <div class="Recommend-text bg-blue text-white" @click="ShareQRCode_push">{{ $t('立即推广') }}</div>
    </div>
    <div class="segmentation-max"></div>
    <div class="MyRecommendation-title">{{ $t('我的推广') }}</div>
    <div class="MyRecommendation-title">
      <span>{{$t('我的代理等级')}}</span>
      <div class="status"></div>
    </div>
    <div class="commendTitle">
      <div class="bg-blue text-white px-28 py-14 rounded-lg">{{$t('我的团队')}}</div>
    </div>
    <div style="width: 100%;">
      <van-tabs ref="tabs" v-model="active" sticky animated @change="onChange">
        <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
          <div class="Recommendation-tab-title">
            <div class="Recommendation-tab-title1">{{ $t('用户名') }}</div>
            <div class="Recommendation-tab-title1">{{ $t('总人数') }}</div>
            <div class="Recommendation-tab-title1">{{ $t('总充值') }}</div>
        <div class="Recommendation-tab-title">
          <div class="Recommendation-tab-title1">{{ $t('用户名') }}</div>
          <div class="Recommendation-tab-title1">{{ $t('总人数') }}</div>
          <div class="Recommendation-tab-title1">{{ $t('总充值') }}</div>
        </div>
        <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad"
                  :loading-text="$t('加载中...')">
          <div v-for="(item, index) in promote_list_data" :key="index" class="Recommendation-tab">
            <div class="Recommendation-tab1">{{ item.username }}</div>
            <div class="Recommendation-tab1">{{ item.reco_sum }}</div>
            <div class="Recommendation-tab1">{{ (item.recharge_sum * 1).toFixed(2) }}</div>
          </div>
          <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad"
            :loading-text="$t('加载中...')">
            <div v-for="(item, index) in promote_list_data" :key="index" class="Recommendation-tab">
              <div class="Recommendation-tab1">{{ item.username }}</div>
              <div class="Recommendation-tab1">{{ item.reco_sum }}</div>
              <div class="Recommendation-tab1">{{ (item.recharge_sum * 1).toFixed(2) }}</div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
        </van-list>
    </div>
  </div>
</template>
@@ -190,14 +171,14 @@
}

.performance-title-1 {
  width: 200px;
  width: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  font-size: 2.1875rem;
  color: #848E9C;

  &.performance-title-1-1 {
    width: 250px;
    width: auto;
    font-size: 26px;
    text-align: center;
    margin-right: 10px;
@@ -208,7 +189,7 @@
  flex: 1;
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  font-size: 2.1875rem;
  color: #848E9C;

  &.performance-title-1-1 {
@@ -220,7 +201,8 @@
.performance-title-3 {
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  font-size: 2.1875rem;
  color: #1d91ff;
}

.performance-title-4 {
@@ -244,7 +226,6 @@
  font-weight: 600;
  font-size: 66px;
  color: #2EBD85;
  margin-top: 22px;
}

.performance-text2 {
@@ -253,7 +234,6 @@
  font-weight: 600;
  font-size: 66px;
  color: #2EBD85;
  margin-top: 22px;
}

.numberOfPeople {
@@ -383,4 +363,31 @@
  text-align: center;
  color: #333333;
}
.MyRecommendation-title {
  height: 6.25rem;
  background: #f5f5f5;
  font-style: normal;
  font-weight: 400;
  font-size: 2.125rem;
  color: #000;
  display: flex;
  justify-content: space-between;
  margin: 0 2.1875rem;
  align-items: center;
  margin-top: 1.875rem;
  padding: 0 .625rem;
  .status {
    height: 3.75rem;
    line-height: 3.75rem;
    padding: 0 2.5rem;
    border-radius: .375rem;
    background: #eceaea;
  }
}
.commendTitle {
  margin: 0 2.1875rem;
  align-items: center;
  margin-top: 1.875rem;
  display: flex;
}
</style>