program/src/pages/competition/index.vue

<template>
  <!-- 图片前缀 https://img.shuimuai.com/ -->
  <scroll-view id="index_container" @scroll="onListenScroll" scroll-y style="height: 100%;">
    <!--    死底部分-->
    <div class="index_container">

      <!--    用户信息模块-->
      <van-row>
        <van-col :span="12">

          <div class="userinfo " :class="{not_show:userinfo.user_id == false}">
            <van-row>
              <van-col :span="5">
                <van-image :src="userinfo.portrait" width="32px" height="32px"></van-image>
              </van-col>
              <van-col :span="10">
                <p>{{ userinfo.user_name }}</p>
                <p>{{ userinfo.phone }}</p>
              </van-col>
            </van-row>
          </div>
        </van-col>
      </van-row>
      <!-- 用户信息模块 -->

      <!-- 倒计时模块 -->
      <van-row>
        <div class="count_down_container">
          <van-count-down :time="complete_time" use-slot @change="onTimeChange" format="DD:HH:mm:ss"
                          v-if="complete_time">
            <span class="count_down_time">{{ timeData.days }}</span>
            <span class="count_down_time">{{ timeData.hours }}</span>
            <span class="count_down_time">{{ timeData.minutes }}</span>
            <span class="count_down_time">{{ timeData.seconds }}</span>
          </van-count-down>
          <div class="none_count_down" v-else>
            <span class="count_down_time">00</span>
            <span class="count_down_time">00</span>
            <span class="count_down_time">00</span>
            <span class="count_down_time">00</span>
          </div>
        </div>
      </van-row>
      <!-- 倒计时模块 -->

      <!-- 分享和参与比赛的按钮 -->
      <van-row gutter="7" :class="{'complete_btns':is_fixed == false,'complete_btns_fixed':is_fixed}">
        <van-col :span="11" :offset="1">
          <!--分享按钮-->
          <van-image src="https://img.shuimuai.com/share_btn@2x.png" @click="show_share_window"
                     width="160px" height="49px"
          ></van-image>
        </van-col>
        <van-col :span="10" :offset="1">
          <!--参与按钮-->
          <van-image src="https://img.shuimuai.com/join_btn@2x.png"
                     @click="to_info"
                     width="160px" height="49px"
                     v-if="joined == false"
          ></van-image>
          <van-image src="https://img.shuimuai.com/rank@2x.png" alt="" @click="to_rank"
                     width="160px" height="49px"
                     v-else
          ></van-image>
        </van-col>
      </van-row>


      <van-overlay :show="share_show" class="share_info" :z-index="99">
        <img src="https://img.shuimuai.com/share_arrow.png" alt="" class="share_arrow">
        <img src="https://img.shuimuai.com/share_content.png" alt="" class="share_content">
        <img src="https://img.shuimuai.com/know_btn.png" alt="" @click="close_share_window" class="know_btn">
      </van-overlay>
      <!-- 分享和参与比赛的按钮 -->
    </div>


    <div id="info"></div>


    <!--    自创模块-->
    <div class="diy_container">
      <!--   排行榜模块   -->
      <div class="rank_container" id="rank_container">
        <div class="rank_title">
          <img src="https://img.shuimuai.com/rank_title@2x.png" alt="" class="rank_title_img">
        </div>
        <div class="rank_main">
          <!--     排行榜tabs     -->
          <view class="rank_header">
            <van-row>
              <van-col span="8">
                <img src="https://img.shuimuai.com/yu_sai_rank@2x.png" alt="" class="rank_card"
                     @click="changeRankAction(1)">
                <img src="https://img.shuimuai.com/yu_sai_tg@2x.png" alt="" class="rank_arrow"
                     :class="{not_show:rank_action!=1}">
              </van-col>
              <van-col span="8">
                <img src="https://img.shuimuai.com/raise_rank@2x.png" alt="" class="rank_card"
                     @click="changeRankAction(2)">
                <img src="https://img.shuimuai.com/raise_tg@2x.png" alt="" class="rank_arrow"
                     :class="{not_show:rank_action!=2}">
              </van-col>
              <van-col span="8">
                <img src="https://img.shuimuai.com/final_rank@2x.png" alt="" class="rank_card"
                     @click="changeRankAction(3)">
                <img src="https://img.shuimuai.com/final_tg@2x.png" alt="" class="rank_arrow"
                     :class="{not_show:rank_action!=3}">
              </van-col>
            </van-row>

          </view>
          <!--     排行榜榜单     -->
          <!--     预选赛榜单     -->
          <div class="rank_main_list" v-if="rank_action==1">
            <!--      我的成绩      -->
            <div class="my_score" v-if="my_report.user_id">
              <span class="right_title" @click="to_report">成绩报告详情</span>
              <van-row class="rank_item">
                <van-col span="4" offset="1">
                  <span class="rank_num">第{{ my_report.ranking }}名</span>
                </van-col>
                <van-col span="2" offset="1">
                  <van-image :src="my_report.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
                </van-col>
                <van-col span="5">
                  <span class="rank_username">{{ my_report.user_name }}</span>
                </van-col>
                <van-col span="5">
                  <template v-if="icon_show">
                    <van-image src="https://img.shuimuai.com/rise@2x.png" alt="" class="" width="19px" height="10px"
                               v-if="my_report.promotion_status==1"></van-image>
                    <van-image src="https://img.shuimuai.com/luo_xuan@2x.png" alt="" class="" width="19px" height="10px"
                               v-if="my_report.promotion_status==2"></van-image>
                    <van-image src="https://img.shuimuai.com/qi_quan@2x.png" alt="" class="" width="19px" height="10px"
                               v-if="my_report.promotion_status==3"></van-image>
                  </template>
                </van-col>
                <van-col span="5">
                  <span class="rank_score">{{ my_report.att_average }}分</span>
                </van-col>

              </van-row>
            </div>

            <!--     排行榜列表   -->
            <div class="rank_list">
              <van-row>
                <van-col span="4" offset="1">
                  <span class="rank_list_title">排名</span>
                </van-col>
                <van-col span="2" offset="1">
                  <span class="rank_list_title">姓名</span>
                </van-col>
                <van-col span="5" offset="10">
                  <span class="rank_list_title">得分</span>
                </van-col>
              </van-row>
              <div v-for="(item,index) in promotion_rank" :key="index">
                <view class="rank_item">
                  <van-row>
                    <van-col span="4" offset="1" class=" ">
                      <span class="rank_num" v-if="index > 2">第{{ index + 1 }}名</span>
                      <van-image src="https://img.shuimuai.com/gold_award@2x.png" alt="" v-if="index == 0"
                                 width="16px" height="24px"
                      ></van-image>
                      <van-image src="https://img.shuimuai.com/second_award@2x.png" alt="" v-if="index == 1"
                                 width="16px" height="24px"
                      ></van-image>
                      <van-image src="https://img.shuimuai.com/third_btn@2x.png" alt="" v-if="index == 2"
                                 width="16px" height="24px"
                      ></van-image>
                    </van-col>
                    <van-col span="2" offset="1" class=" ">
                      <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
                    </van-col>
                    <van-col span="5">
                      <span class="rank_username">{{ item.user_name }}</span>
                    </van-col>
                    <van-col span="5">
                      <template v-if="icon_show">
                        <van-image src="https://img.shuimuai.com/rise@2x.png" alt="" class="" width="19px" height="10px"
                                   v-if="item.promotion_status==1"></van-image>
                        <van-image src="https://img.shuimuai.com/luo_xuan@2x.png" alt="" class="" width="19px"
                                   height="10px"
                                   v-if="item.promotion_status==2"></van-image>
                        <van-image src="https://img.shuimuai.com/qi_quan@2x.png" alt="" class="" width="19px"
                                   height="10px"
                                   v-if="item.promotion_status==3"></van-image>
                      </template>
                    </van-col>
                    <van-col span="5">
                      <span class="rank_score">{{ item.att_average }}分</span>
                    </van-col>
                  </van-row>

                </view>
                <div class="under_line"></div>
              </div>

            </div>
          </div>
          <!--     晋级赛榜单     -->
          <div class="rank_main_list" v-if="rank_action==2">
            <div class="my_score" v-if="my_report_2.user_id">
              <span class="right_title" @click="to_report">成绩报告详情</span>
              <view class="rank_item">
                <van-row>
                  <van-col span="4" offset="1">
                    <span class="rank_num">第{{ my_report_2.ranking }}名</span>
                  </van-col>
                  <van-col span="2" offset="1">
                    <van-image :src="my_report_2.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
                  </van-col>
                  <van-col span="5">
                    <span class="rank_username">{{ my_report_2.user_name }}</span>
                  </van-col>
                  <van-col span="5" class="not_show">
                  </van-col>
                  <van-col span="5">
                    <span class="rank_score">{{ my_report_2.att_average }}分</span>
                  </van-col>

                </van-row>
              </view>
            </div>
            <!--     排行榜列表   -->
            <div class="rank_list">
              <van-row>
                <van-col span="4" offset="1">
                  <span class="rank_list_title">排名</span>
                </van-col>
                <van-col span="2" offset="1">
                  <span class="rank_list_title">姓名</span>
                </van-col>
                <van-col span="5" offset="10">
                  <span class="rank_list_title">得分</span>
                </van-col>
              </van-row>
              <div v-for="(item,index) in final_rank" :key="index">
                <view class="rank_item">

                  <van-row>
                    <van-col span="4" offset="1" class="">
                      <span class="rank_num" v-if="index > 2">第{{ item.ranking }}名</span>
                      <van-image src="https://img.shuimuai.com/gold_award@2x.png" alt="" v-if="index == 0"
                                 width="16px" height="24px"
                      ></van-image>
                      <van-image src="https://img.shuimuai.com/second_award@2x.png" alt="" v-if="index == 1"
                                 width="16px" height="24px"
                      ></van-image>
                      <van-image src="https://img.shuimuai.com/third_btn@2x.png" alt="" v-if="index == 2"
                                 width="16px" height="24px"
                      ></van-image>
                    </van-col>
                    <van-col span="2" offset="1" class="">
                      <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
                    </van-col>
                    <van-col span="5">
                      <span class="rank_username">{{ item.user_name }}</span>
                    </van-col>
                    <van-col span="5" class="not_show">
                      <van-image src="https://img.shuimuai.com/rise@2x.png" alt="" class="" width="19px" height="10px"
                                 v-if="item.finals_status==1"></van-image>
                      <van-image src="https://img.shuimuai.com/luo_xuan@2x.png" alt="" class="" width="19px"
                                 height="10px"
                                 v-if="item.finals_status==2"></van-image>
                      <van-image src="https://img.shuimuai.com/qi_quan@2x.png" alt="" class="" width="19px"
                                 height="10px"
                                 v-if="item.finals_status==3"></van-image>
                    </van-col>
                    <van-col span="5">
                      <span class="rank_score">{{ item.att_average }}分</span>
                    </van-col>
                  </van-row>
                </view>
                <div class="under_line"></div>
              </div>

            </div>
          </div>
          <!--     决赛榜单     -->
          <div class="rank_main_list" v-if="rank_action==3">
            <!--     排行榜列表   -->
            <div class="rank_list_ext">

              <div v-for="(item,index) in all_final_rank" :key="item">

                <!--      特等奖        -->
                <view class="gold_award_container last_sort" v-if="item.prize==0">
                  <van-row >
                    <van-col span="2" offset="9" class="">
                      <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
                    </van-col>
                    <van-col span="5">
                      <span class="rank_username">{{ item.user_name }}</span>
                    </van-col>
                    <van-col span="4">
                      <span class="slogen">总决赛积分</span>
                    </van-col>
                    <van-col span="2">
                      <span class="rank_score">{{ item.att_average }}</span>
                    </van-col>
                  </van-row>
                </view>
                <!--      一等奖        -->
                <van-row class="first_award_container " v-if="item.prize == 1">
                  <div class="first_award_bg last_sort_ext">
                    <van-col>
                      <van-image src="https://img.shuimuai.com/h5/first.png" alt=""
                                 width="87px" height="25px"
                      ></van-image>
                    </van-col>
                    <van-col span="2" offset="1" class="">
                      <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
                    </van-col>
                    <van-col span="5">
                      <span class="rank_username">{{ item.user_name }}</span>
                    </van-col>
                    <van-col span="4">
                      <span class="slogen">总决赛积分</span>
                    </van-col>
                    <van-col span="2">
                      <span class="rank_score">{{ item.att_average }}</span>
                    </van-col>
                  </div>
                </van-row>
                <!--      二等奖        -->
                <div class="second_award_container " v-if="item.prize == 2">
                  <div class="second_award_bg last_sort_ext">
                    <van-col>
                      <van-image src="https://img.shuimuai.com/h5/second.png" alt=""
                                 width="87px" height="25px"
                      ></van-image>
                    </van-col>
                    <van-col span="2" offset="1" class="">
                      <van-image :src="item.portrait" alt="" class="avatar" width="25px" height="25px"></van-image>
                    </van-col>
                    <van-col span="5">
                      <span class="rank_username second_text">{{ item.user_name }}</span>
                    </van-col>
                    <van-col span="4">
                      <span class="slogen second_text">晋级赛积分</span>
                    </van-col>
                    <van-col span="2">
                      <span class="rank_score second_text">{{ item.att_average }}</span>
                    </van-col>
                  </div>
                </div>

              </div>
            </div>
          </div>

        </div>
      </div>

      <!--   精彩时刻模块   -->
      <div class="wonderful_container">
        <img src="https://img.shuimuai.com/jing_cai_shi_ke@2x.png" alt="" class="wonderful_container_img">
      </div>

      <!--   扫码关注我们模块   -->
      <div class="qrcode_container">
        <img src="https://img.shuimuai.com/code@2x.png" alt="" class="qrcode_container_img">

      </div>
    </div>
    <van-toast id="van-toast"/>
  </scroll-view>

</template>

<script>
import store from "../../store/competition";
import {cal_down_time} from "../../utils";
import {
  checkJoined,
  doEnroll,
  get_user_by_code,
  getActivity, getAllFinalsRanking,
  getFinalsRanking, getJsSDK,
  getPromotionRanking
} from "../../requests/competition";
import Toast from '../../../static/vant/toast/toast';
import {reload_userinfo} from "../../utils/user";

var $this;
var $now = Math.round(new Date() / 1000);

export default {
  name: "index",
  data() {
    return {
      //活动id
      activity_id: 0,
      //分享显示
      share_show: false,
      //结束时间
      complete_time: "",
      //排行榜
      rank_action: 1,
      joined: false,
      //预选赛排行
      promotion_rank: [],
      //晋级赛排行
      final_rank: [],
      //总决赛排行
      all_final_rank: [],
      //我的成绩
      my_report: {},
      my_report_2: {},
      timeData: {},
      //用户个人信息
      userinfo: {
        phone: 0,
        portrait: "",
        user_id: "",
        user_name: ""
      },
      icon_show: false,
      // 是否悬浮
      is_fixed: false
    }
  },
  watch: {
    rank_action($new, $old) {
      if ($new == 2) {
        if ($this.final_rank.length == 0) {
          $this.rank_action = $old
        }
      }
      if ($new == 3) {
        if ($this.all_final_rank.length == 0) {
          $this.rank_action = $old
        }
      }
    }
  },
  methods: {
    to_report() {
      // $this.$router.push({name: "Report"})
    },
    get_init() {
    },
    //打开分享窗口
    show_share_window() {
      $this.share_show = true
    },
    //关闭分享窗口
    close_share_window() {
      $this.share_show = false
    },
    //跳转比赛信息位置
    to_info() {
      if (!$this.userinfo.user_id) {
        Toast.fail({
          message:'请登录水母智脑小程序后进行参与比赛',
          onClose(){
            wx.navigateTo({
              url:"/pages/index/main"
            })
          }
        })
        return false
      }
      //判断有用户id 就 参加比赛
      if ($this.userinfo.user_id && $this.joined == false) {
        doEnroll($this.activity_id, $this.userinfo.user_id).then((res) => {
          let $res = res.data
          if ($res.code == 0) {
            Toast.success("参加成功");
            $this.joined = true
          } else {
            Toast.fail($res.errmsg)
          }
        }).catch((e) => {
          Toast.fail(e)
        })
      }

      if ($this.joined == true) {
        //没有则跳转到地址
        window.location.href = '#info'
      }
    },

    //跳转比赛信息位置
    to_rank() {
      window.location.href = '#rank_container'
    },
    //时间产生变化时
    onTimeChange($e) {
      $this.timeData = $e.mp.detail
      for (let $key in $e) {
        if ($e[$key].toString().length == 1) {
          $e[$key] = "0" + $e[$key]
        }
      }
    },
    //切换排行榜
    changeRankAction($action) {
      $this.rank_action = $action
    },
    // 获取互动
    getActivity($activity_id) {
      getActivity($activity_id).then((res) => {
        let $res = res.data;
        let $data = $res.data;

        // 倒计时模块
        if ($now > $data['promotion_start_time'] && $now < $data['promotion_end_time']) {
          //预选塞时间范围内
          $this.calDownTime($data['promotion_end_time'])
        }

        //晋级赛时间范围内
        if ($now > $data['finals_start_time'] && $now < $data['finals_end_time']) {
          $this.rank_action = 2
        }

        //总决赛时间范围内
        if ($now > $data['all_finals_start_time'] && $now < $data['all_finals_end_time']) {
          $this.rank_action = 3
        }

        //显示预选赛排行
        if ($now > $data['promotion_start_time']) {
          //获取预选赛排行榜
          $this.getPromotionRanking($activity_id)
        }
        //显示晋级赛排行
        if ($now > $data['finals_start_time']) {
          //获取晋级赛排行榜
          $this.getFinalsRanking($activity_id)
        }
        //  显示总决赛排行榜
        if ($now > $data['all_finals_end_time']) {
          $this.getAllFinalsRanking($activity_id)
        }

        if ($now > $data['promotion_end_time']) {
          $this.icon_show = true
        }


      })
    },
    //获取预选赛排行
    getPromotionRanking($activity_id) {
      getPromotionRanking($activity_id).then((res) => {
        let $res = res.data;
        let $data = $res.data;
        $data.forEach(($val, $index) => {
          if ($val['user_id'] == $this.userinfo.user_id) {
            $this.my_report = $val
          }
        })
        $this.promotion_rank = $data

      })
    },

    //获取晋级赛排行
    getFinalsRanking($activity_id) {
      getFinalsRanking($activity_id).then((res) => {
        let $res = res.data;
        let $data = $res.data;
        $data.forEach(($val, $index) => {
          if ($val['user_id'] == $this.userinfo.user_id) {
            $this.my_report_2 = $val
          }
        })
        $this.final_rank = $res.data
      })
    },
    //获取总决赛排行
    getAllFinalsRanking($activity_id) {
      getAllFinalsRanking($activity_id).then((res) => {
        let $res = res.data;
        $this.all_final_rank = $res.data
      })
    },
    //  计算结束时间差
    calDownTime($time) {
      //计算倒计时
      // 获取比赛结束日
      let $time_result = cal_down_time($time)
      $this.complete_time = $time_result.differ
    },
    //监听滚动
    onListenScroll(event) {
      let $scrollTop = event.mp.detail.scrollTop
      $this.is_fixed = $scrollTop > 400
    }
  },
  mounted() {
  },
  created() {
    $this = this;
    //获取浏览器信息
    reload_userinfo($this)
  },
  onLoad($options) {
    $this.activity_id = $options.activity_id
    $this.getActivity($this.activity_id)

  }
}
</script>
<style>

page {
  height: 100%;
}
</style>
<style scoped>
/*//死底模块*/
#index_container {
  background-color: #2b2760;
}

.index_container {
  background: url("https://img.shuimuai.com/h5/background_1%402x.png");
  background-size: 100% 100%;
  background-position: center;
  height: 2487px;
  width: 100%;
}

.userinfo {
  padding: 10px;
}

.userinfo p {
  font-size: 9px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  line-height: 14px;
}

.complete_btns {
  position: absolute;
  top: 580px;
}

.complete_btns_fixed {
  position: fixed;
  bottom: 0px;
  z-index: 99;
}

.share_info {
  text-align: center;
}

.share_info .share_arrow {
  width: 84px;
  height: 113px;
  float: right;
  margin-top: 18px;
  margin-right: 33px;
}

.share_info .share_content {
  width: 324px;
  height: 116px;
  margin: 0px auto;
}

.share_info .know_btn {
  width: 189px;
  height: 73px;
  margin-top: 49px;
}

.count_down_container {
  background-image: url("https://img.shuimuai.com/count_down_container@2x.png");
  background-size: 100% 100%;
  background-position: center;
  width: 294px;
  height: 49px;
  position: absolute;
  top: 323px;
  left: 41px;
}

.count_down_container .count_down_time {
  font-size: 24px;
  font-family: zihun59hao-chuangcuhei;
  font-weight: 400;
  color: #FFFFFF;
  position: relative;
}

.count_down_container .count_down_time:nth-child(1) {
  left: 70px;
  top: 15px;
  bottom: 16px;
}

.count_down_container .count_down_time:nth-child(2) {
  left: 90px;
  top: 15px;
  bottom: 16px;
}

.count_down_container .count_down_time:nth-child(3) {
  left: 115px;
  top: 15px;
  bottom: 16px;
}

.count_down_container .count_down_time:nth-child(4) {
  left: 135px;
  top: 15px;
  bottom: 16px;
}

.none_count_down .count_down_time {
  top: 8px !important;
}

/*# sourceMappingURL=index.css.map */
/*//diy模块*/
.max_width_and_center {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.diy_container {
  margin-top: 15px;
}

.diy_container .rank_container .rank_title {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.diy_container .rank_container .rank_title_img {
  width: 352px;
  height: 32px;
}

.diy_container .rank_container .rank_main {
  margin-top: 20px;
  text-align: center;
}

.diy_container .rank_container .rank_main .rank_card {
  width: 105px;
  height: 50px;
}

.diy_container .rank_container .rank_main .rank_arrow {
  width: 67px;
  height: 55px;
  position: relative;
  top: -28px;
  left: 0px;
  z-index: 2;
}

.diy_container .rank_container .rank_main .rank_main_list {
  width: 322px;
  height: 486px;
  background: #1B1746;
  border: 2px solid #585399;
  border-radius: 9px;
  margin: 0px auto;
  position: relative;
  bottom: 60px;
  z-index: 1;
  overflow-y: scroll;
}

.diy_container .rank_container .rank_main .rank_main_list .my_score {
  background-image: url("https://img.shuimuai.com/my_score_bg@2x.png");
  background-size: 100% 100%;
  background-position: center;
  width: 306px;
  height: 48px;
  margin: 10px auto;
}

.diy_container .rank_container .rank_main .rank_main_list .my_score .right_title {
  width: 55px;
  height: 10px;
  font-size: 9px;
  font-family: zihun59hao-chuangcuhei;
  font-weight: 400;
  text-decoration: underline;
  color: #FFBA00;
  line-height: 12px;
  position: relative;
  left: 110px;
  bottom: 5px;
}

.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item {
  display: flex;
}

.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .rank_num {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFC600;
  line-height: 14px;
}

.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .rank_username {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #E2E0FF;
  line-height: 14px;
}

.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .avatar {
  width: 24px;
  height: 25px;
}

.diy_container .rank_container .rank_main .rank_main_list .my_score .rank_item .rank_score {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #E2E0FF;
  line-height: 14px;
}

.diy_container .rank_list_title {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #8F8AC3;
  line-height: 14px;
}

.diy_container .rank_list .avatar {
  width: 24px;
  height: 25px;
}

.diy_container .rank_list .rank_item {
  /*display: flex;*/
  height: 30px;
  margin: 10px 0px;
  /*align-items: center;*/
}

.diy_container .rank_list .rank_item .rank_num {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  line-height: 14px;
}

.diy_container .rank_list .rank_item .yellow {
  color: #FFC600;
}

.diy_container .rank_list .rank_item .avatar {
  width: 24px;
  height: 25px;
}

.diy_container .rank_list .rank_item .rank_username {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #E2E0FF;
  line-height: 14px;
}

.diy_container .rank_list .rank_item .rank_score {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #E2E0FF;
  line-height: 14px;
}

.diy_container .rank_list .under_line {
  width: 281px;
  height: 1px;
  background: #474186;
  margin: 0px auto;
}

.diy_container .rank_list .gold_award_container {
  margin: 10px auto;
  background-image: url("https://img.shuimuai.com/gold_award_bg.png");
  background-size: 100% 100%;
  background-position: center;
  width: 299px;
  height: 44px;
}

.diy_container .rank_list .first_award_bg {
  margin: auto;
  background-image: url("https://img.shuimuai.com/first_award_bg.png");
  background-size: 100%;
  background-position: center;
  width: 299px;
  height: 44px;
}

.diy_container .rank_list .first_award_container {
  margin: 10px auto;
}

.diy_container .rank_list .second_award_bg {
  margin: auto;
  background-image: url("https://img.shuimuai.com/second_award_bg.png");
  background-size: 100%;
  background-position: center;
  width: 299px;
  height: 44px;
}

.diy_container .rank_list .second_award_container {
  margin: 10px auto;
}

.diy_container .rank_list_ext_title {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #8F8AC3;
  line-height: 14px;
}

.diy_container .rank_list_ext .avatar {
  width: 24px;
  height: 25px;
}

.diy_container .rank_list_ext .rank_num {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fff;
  line-height: 14px;
}

.diy_container .rank_list_ext .yellow {
  color: #FFC600;
}

.diy_container .rank_list_ext .avatar {
  width: 24px;
  height: 25px;
}

.diy_container .rank_list_ext .rank_username {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #392121;
  line-height: 14px;
}

.diy_container .rank_list_ext .slogen {
  font-size: 7px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #392121;
  line-height: 14px;
}

.diy_container .rank_list_ext .rank_score {
  font-size: 10px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #392121;
  line-height: 14px;
}

.diy_container .rank_list_ext .under_line {
  width: 281px;
  height: 1px;
  background: #474186;
  margin: 0px auto;
}

.diy_container .rank_list_ext .gold_award_container {
  margin: 10px auto;
  background-image: url("https://img.shuimuai.com/h5/gold.png");
  background-size: 100% 100%;
  background-position: center;
  width: 299px;
  height: 44px;
}

.diy_container .rank_list_ext .first_award_bg {
  margin: auto;
  background-image: url("https://img.shuimuai.com/first_award_bg.png");
  background-size: 100%;
  background-position: center;
  width: 299px;
  height: 44px;
}

.diy_container .rank_list_ext .first_award_container {
  margin: 10px auto;
}

.diy_container .rank_list_ext .second_award_bg {
  margin: auto;
  background-image: url("https://img.shuimuai.com/second_award_bg.png");
  background-size: 100%;
  background-position: center;
  width: 299px;
  height: 44px;
}

.diy_container .rank_list_ext .second_award_container {
  margin: 10px auto;
}

.diy_container .rank_list_ext .second_text {
  color: #C1A98E;
}

.diy_container .wonderful_container {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.diy_container .wonderful_container_img {
  width: 366px;
  height: 365px;
}

.diy_container .qrcode_container {
  width: 100%;
  text-align: center;
  margin-top: 30px;
  padding-bottom: 80px;
}

.diy_container .qrcode_container_img {
  width: 352px;
  height: 194px;
}

.not_show {
  visibility: hidden;
}

#info {
  position: relative;
  bottom: 155px;
}

.rank_header {
  padding: 0px 25px;
}
.last_sort{
  padding: 10px 0px;
}

.last_sort_ext{
  padding: 10px;
}
/*# sourceMappingURL=diy.css.map */
</style>