program/src/pages/competition/index.vue

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

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

          <div
            class="userinfo "
            :class="{not_show:!userinfo.user_id}"
          >
            <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>
      <!-- 倒计时模块 -->

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

      <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_may_1.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_may_1.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_may_1.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">
                  <div
                    class="rank_user_status"
                    v-if="!icon_show"
                  >

                  </div>
                  <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">
                      <div
                        class="rank_user_status"
                        v-if="!icon_show"
                      >

                      </div>
                      <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"
                    offset='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_bottom.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";
import { userDetail } from "../../requests/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,
      is_fixed: true,
      scroll_id: "",
    };
  },
  // 监听
  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() {
      $this.scroll_id = "rank_container";
    },
    //时间产生变化时
    onTimeChange($e) {
      let $datetime = ($this.timeData = $e.mp.detail);
      for (let $key in $datetime) {
        if ($datetime[$key].toString().length == 1) {
          $datetime[$key] = "0" + $datetime[$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);
      console.log($time_result);
      $this.complete_time = $time_result.differ;
    },
    //监听滚动
    onListenScroll(event) {
      let $scrollTop = event.mp.detail.scrollTop;
      $this.is_fixed = $scrollTop > -1;
      $this.scroll_id = "";
    },
  },
  mounted() {
    userDetail().then((res) => {
      let $data = res.data;
      $this.userinfo = $data.data;
      $this.userinfo["validity_time"] = formatTime(
        $this.userinfo["validity_time"]
      );
      $this.userinfo["level_name"] = utils.get_level_name(
        $this.userinfo["level"]
      );
      $this.userinfo["free_time"] = formatSeconds($this.userinfo["free_time"]);
      store.setters.set_userinfo($this.userinfo);
    });
    let $userinfo = wx.getStorageSync("userinfo");
    //检查用户是否参与比赛了
    checkJoined($this.activity_id, $userinfo.user_id).then((res) => {
      let $res = res.data;
      let $data = $res.data;
      $this.joined = $data["match_status"] == 1;
    });
  },
  created() {
    $this = this;
    //获取浏览器信息
  },
  onLoad($options) {
    $this.activity_id = $options.activity_id;
    $this.getActivity($this.activity_id);
  },
  onShareAppMessage() {
    return {
      title: "欢迎参加 “专注勇士PK赛”",
      imageUrl: "http://img.shuimuai.com/sharePkPahe_two.jpg",
      path: "/pages/competition/main?activity_id=" + $this.activity_id,
    };
  },
};
</script>
<style>
page {
  height: 100%;
}
</style>
<style scoped>
/*//死底模块*/
#index_container {
  background-color: #2b2760;
}

.index_container {
  /* background: url("https://img.shuimuai.com//mp/pk/background_3%402x.png");  小乌龟 */
  background: url("https://img.shuimuai.com/mppkbackground_May_7.png");

  background-size: 100% 100%;
  background-position: center;
  /* height: 2487px; */
  height: 2695px;
  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: 650px;
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.complete_btns_fixed {
  position: fixed;
  bottom: 0px;
  z-index: 99;
  display: flex;
  width: 100%;
  justify-content: space-around;
  height: 80px;
  align-items: center;
  background: url(https://img.shuimuai.com/complete_bg.png);
  background-size: 100% 100%;
}
.complete_btns_fixed_img {
  margin-top: 7px;
}

.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: 408px;
  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: 145px;
  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; */
  color: #aeafff;
  line-height: 12px;
  position: relative;
  left: 110px;
  bottom: 4px;
}

.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;
}

.rank_user_status {
  display: inline-block;
}

.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: 228px;
}

.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>