<!-- 预测 -->
<template>
  <van-pull-refresh  v-model="loading" @refresh="onRefresh">
    <template #loosing> 
        <div class="refresh-txt">
            <svg-icon className="icon" iconName="loading" :class="{ 'is-spinning': loading }"></svg-icon>
            <span>释放即可刷新</span>
        </div> 
    </template>
    <template #loading>  
        <div class="refresh-txt">
            <svg-icon className="icon" iconName="loading" :class="{ 'is-spinning': loading }"></svg-icon>
            <span>加载中……</span>
        </div>
    </template> 
    <template #success>  
        <div class="refresh-txt">
            <svg-icon className="icon" iconName="loading" :class="{ 'is-spinning': loading }"></svg-icon>
            <span>刷新成功</span>
        </div>
    </template>
  <div class="model-box">
    <!--预留的广告位-->
    <div class="guang-gao"></div>

    <!--赛事预测-->
    <div class="ssyc box" v-if="is_look.zq_ssyc && ssyc_detail && ssyc_detail?.ailuo_items">
      <div class="event-top">
        <div class="event-title">
          <img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_saishi.png'}"
            height="22px" />&nbsp;<span>本场赛事分析</span>
        </div>
        <div class="more-event">
          <a href="/model/predict?zq&from_vue">更多<img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_in.png'}"
              width="20px" /></a>
        </div>
      </div>
      <div class="vip">
        <table class="vip-table">
          <tr>
            <th>艾因算法</th>
            <th>马克斯算法</th>
            <th>牛顿进球数</th>
          </tr>
          <tr>
            <td v-if="ssyc_detail?.ailuo_items?.values">{{ ssyc_detail?.ailuo_items?.values.join("") }}</td>
            <td v-if="ssyc_detail?.predict_items?.values">{{ ssyc_detail?.predict_items?.values.join("") }}(<span style="color: #227AFF;">{{ ssyc_detail?.predict_items?.rate }}可能</span>)</td>
            <td v-if="ssyc_detail?.balls_items?.values">全场总进<br/>{{ ssyc_detail?.balls_items?.values.join("、") }}球</td>
          </tr>
        </table>
        <div class="tip">以上观点仅供参考！</div>
      </div>
    </div>

    <!--牛牛分析-->
    <div class="nnjq box"  v-if="is_look.zq_nnjq && nnjq_detail">
      <div class="event-top">
        <div class="event-title">
          <img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_niuniujieqiu.png'}" height="22px" />&nbsp;<span>本场解球观点</span>
        </div>
        <div class="more-event">
          <a href="/model/jie_qiu?zq&from_vue">更多<img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_in.png'}" width="20px" /></a>
        </div>
      </div>
      <div class="vip">
        <div class="nnjq-context">
        <div class="title">通过解球大数据模型分析:</div>
        <span class="text">本场比赛看好：{{nnjq_detail?.prediction_7203.join("、")}}</span><br>
        <span class="text">看好打出比分：{{nnjq_detail?.prediction_7202.join("、")}}</span><br>
        <span class="text">本场看好：{{nnjq_detail?.prediction_7206.join("、")}}</span>
        </div>
        <div class="tip"><a :href="`/model/jie_qiu/detail/${yiqiu_id}?zq&from_vue`">点击查看解球详情>></a></div>
      </div>
    </div>

    <!--海外预测-->
    <div class="hwyc box" v-if="is_look.zq_hwyc && hwyc_detail && hwyc_detail?.predictz_info">
      <div class="event-top">
        <div class="event-title">
          <img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_haiwai.png'}" height="22px" />&nbsp;<span>本场海外媒体预测</span>
        </div>
        <div class="more-event">
          <a href="/model/hwyc?zq&from_vue">更多<img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_in.png'}" width="20px" /></a>
        </div>
      </div>
      <div class="vip">
        <table class="vip-table">
          <tr>
            <th v-if="hwyc_detail?.predictz_info">欧洲预测</th>
            <th v-if="hwyc_detail?.macao_prediction">澳门预测</th>
            <th v-if="hwyc_detail?.oversea_info_0">美国预测</th>
          </tr>
          <tr>
            <td v-if="hwyc_detail?.predictz_info">{{hwyc_detail?.predictz_info?.predict_result?.result=='Home' ? '主胜' : hwyc_detail?.predictz_info?.predict_result?.result=='Away' ? '客胜' : '平'}}<br/>{{ hwyc_detail?.predictz_info?.predict_result?.home }} - {{hwyc_detail?.predictz_info?.predict_result?.guest}}</td>
            <td v-if="hwyc_detail?.macao_prediction">{{hwyc_detail?.macao_prediction?.p.length > 4 ? hwyc_detail?.macao_prediction?.p.substr(0,4) : hwyc_detail?.macao_prediction?.p}}</td>
            <td v-if="hwyc_detail?.oversea_info_0">{{hwyc_detail?.oversea_info_0?.predict_result?.home > hwyc_detail?.oversea_info_0?.predict_result?.guest ? '主胜' :  hwyc_detail?.oversea_info_0?.predict_result?.guest > hwyc_detail?.oversea_info_0?.predict_result?.home ? '客胜' : '平'}}<br/>{{ hwyc_detail.oversea_info_0.predict_result.home }} - {{hwyc_detail.oversea_info_0.predict_result.guest}}</td>
          </tr>
        </table>
        <div class="tip">海外媒体观点仅供参考！</div>
      </div>
    </div>

    <!--赛事预测 非会员 或者无数据-->
    <div class="ssyc box" v-if="!(is_look.zq_ssyc && ssyc_detail && ssyc_detail?.ailuo_items)">
        <div class="event-top">
        <div class="event-title">
          <img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_saishi.png'}"
            height="22px" />&nbsp;<span>赛事预测</span><span class="more-txt">(当前共有{{game_predict_list?.total_count}}场赛事)</span>
        </div>
        <div class="more-event">
          <a href="/model/predict?zq&from_vue">更多<img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_in.png'}"
              width="20px" /></a>
        </div>
      </div>
        <div class="event-box">
          <a class="ssyc-box" href="/model/predict?zq&from_vue&type=ailuo">
            <div>胜平负算法</div>
            <div class="zhanji">近期战绩:正确{{game_predict_list?.predict_hit_count}}场</div>
          </a>
          <a class="ssyc-box" href="/model/predict?zq&from_vue&type=balls">
            <div>进球数算法</div>
            <div class="zhanji">近期战绩:正确{{game_predict_list?.balls_hit_count}}场</div>
          </a>
        </div>
        <div class="go-vip" v-if="!is_look.zq_ssyc">
          <a :href="user_info?.user_id ? '/user/vip_zq?zq&vip_name=ZQ_SSYC&from=/game' : '/login?return_url=/game/predict?yiqiuid='+yiqiu_id ">
            <div class="suo"><img src="https://img2.ydniu.com/app/images/ai/su.png" width="20"/></div>
            <div class="current">当前解锁<span class="people">{{1500 + Math.ceil(Math.random() * 10)}}</span>人</div>
            <div class="kaitong"><img src="https://img2.ydniu.com/app/images/sports_ydniu/model/ic_qukaitong.png"/></div>
          </a>
        </div>
    </div>

     <!--牛牛分析 非会员 或者无数据-->
    <div class="nnjq box"  v-if="!(is_look.zq_nnjq && nnjq_detail) && nnjq_data_list && nnjq_data_list?.matchs && nnjq_data_list?.matchs.length > 0">
      <div class="event-top">
        <div class="event-title">
          <img src="https://img2.ydniu.com/app/images/sports_ydniu/model/ic_niuniujieqiu.png"
            height="22px" />&nbsp;<span>牛牛分析</span><span class="more-txt">(上期竞足正确{{nnjq_data_list?.hit_total}}场)</span>
        </div>
        <div class="more-event">
          <a href="/model/jie_qiu?zq&from_vue">更多<img src="https://img2.ydniu.com/app/images/sports_ydniu/model/ic_in.png"
              width="20px" /></a>
        </div>
      </div>
      <div class="swiper nnjq_swiper" v-if="nnjq_data_list && nnjq_data_list?.matchs ">
        <van-swipe :loop="false" :show-indicators="false" :width="270">
          <van-swipe-item style="margin-right:15px" v-for="game in nnjq_data_list.matchs" :key="game?.id">
            <div class="match">
								<a rel="nofollow" gntj="热门赛事1" href="/model/jie_qiu?zq&from_vue">
									<div class="match-top"><span class="c-name">{{game.competition_name}}</span> {{game.match_time}}<span class="all-score">{{ game.score[0]+ game.score[1] }}球</span></div>
									<div class="match-box">
										<div class="main-passenger">
											<div class="home">
												<div class="match-left">
													<img v-lazy="{src:game.yiqiu_host_team_logo,error:'https://img2.ydniu.com/app/images/team_logo.png'}">
													{{game.host_name}}
													<span>{{ game.score[0] }}</span>
												</div>
											</div>
											<div class="guest">
												<div class="match-left">
													<img v-lazy="{src:game.yiqiu_guest_team_logo,error:'https://img2.ydniu.com/app/images/team_logo.png'}">
													{{ game.away_name }}
													<span>{{ game.score[1] }}</span>
												</div>
											</div>
										</div>
									<div class="recommend-number" v-if="game.is_win_7202 || game.is_win_7203 || game.is_win_7206">
											<div class="hit"></div>
											<div class="hit-result">
                        <div v-html="getPrediction(7203, game.prediction_7203, game.score)"></div>
                        <div v-html="getPrediction(7202, game.prediction_7202, game.score)"></div>
                        <div v-html="getPrediction(7206, game.prediction_7206, game.score)"></div>
											</div>
									</div>
                  <div class="recommend-number" v-else-if="game.is_win_7202 == false && game.is_win_7203 == false && game.is_win_7206 == false">
											<div class="fail"></div>
											<div class="no-hit-result"></div>
									</div>
								</div>
								</a>
								</div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="go-vip" v-if="!is_look.zq_nnjq">
        <a :href="user_info?.user_id ? '/user/vip_zq?zq&vip_name=ZQ_NNJQ&from=/game' : '/login?return_url=/game/predict?yiqiuid='+yiqiu_id ">
          <div class="suo"><img src="https://img2.ydniu.com/app/images/ai/su.png" width="20"/></div>
          <div class="current">当前解锁<span class="people">{{1510 + Math.ceil(Math.random() * 10)}}</span>人</div>
          <div class="kaitong"><img src="https://img2.ydniu.com/app/images/sports_ydniu/model/ic_qukaitong.png"/></div>
        </a>
      </div>
    </div>

    <!--海外预测 非会员 或者无数据-->
    <div class="hwyc box" v-if="!(is_look.zq_hwyc && hwyc_detail && hwyc_detail?.predictz_info) && hwyc_predict_list && hwyc_predict_list?.matchs && hwyc_predict_list?.matchs.length > 0">
      <div class="event-top">
        <div class="event-title">
          <img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_haiwai.png'}"
            height="22px" />&nbsp;<span>海外预测</span><span class="more-txt">(当前{{hwyc_predict_list.total}}场赛事 内附比分)</span>
        </div>
        <div class="more-event">
          <a href="/model/hwyc?zq&from_vue">更多<img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_in.png'}"
              width="20px" /></a>
        </div>
      </div>
      <div class="swiper hwyc_swiper" v-if="hwyc_predict_list && hwyc_predict_list?.matchs">
        <van-swipe :loop="false" :width="250" :show-indicators="false">
          <van-swipe-item style="margin-right:15px" v-for="game in hwyc_predict_list.matchs" :key="game.id">
            <div class="match">
								<a rel="nofollow" gntj="海外预测" href="/model/hwyc?zq&from_vue">
									<div class="match-box">
										<span class="team-name">{{game.host_name}}</span>
										<span>{{game.score.join(" : ")}}</span>
										<span class="team-name">{{game.away_name}}</span>
									</div>
									<div class="match-box">
										<span class="en-name">{{ game.predictz_info.host_name.length > 8 ? game.predictz_info.host_name.substr(0,8) : game.predictz_info.host_name }}</span>
										<span class="en-name">{{ game.yiqiu_competition_short_name }}</span>
										<span class="en-name">{{ game.predictz_info.guest_name.length > 8 ? game.predictz_info.guest_name.substr(0,8) : game.predictz_info.guest_name }}</span>
									</div>
									<div class="match-result">
											<span class="red" v-if="game.predictz_info.check_result"><b>胜平负</b></span>
											<span class="red" v-if="game.predictz_info.check_result && (game.score[0] == game.predictz_info.predict_result.home) && (game.score[1] == game.predictz_info.predict_result.guest)"><b>比分</b></span>
										<span>正确</span> 
									</div>
								</a>
							</div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="go-vip" v-if="!is_look.zq_hwyc">
        <a :href="user_info?.user_id ? '/user/vip_zq?zq&vip_name=ZQ_HWYC&from=/game' : '/login?return_url=/game/predict?yiqiuid='+yiqiu_id ">
          <div class="suo"><img v-lazy="{src:'https://img2.ydniu.com/app/images/ai/su.png'}" width="20"/></div>
          <div class="current">当前解锁<span class="people">{{1420 + Math.ceil(Math.random() * 10)}}</span>人</div>
          <div class="kaitong"><img v-lazy="{src:'https://img2.ydniu.com/app/images/sports_ydniu/model/ic_qukaitong.png'}"/></div>
        </a>
      </div>
    </div>

  </div>
  </van-pull-refresh>
</template>
<script lang="ts">
import { ref, defineComponent, onMounted, toRef, watch, computed } from "vue";
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import * as moment from 'moment';
import * as game_api from "@/api/game_api";
import * as user_api from "@/api/user_api";

export default defineComponent({
  name: "GamePredict",
  components: {},
  props: { 
    yiqiu_id: {  
      type: [String, Number],  
      default:'', 
    } 
  },
  setup(props:any) {
    const route = useRoute();
    const store: any = useStore();
    const yiqiu_id:any = toRef(props,'yiqiu_id');
    const user_info: any = computed(() => store.state.userInfo);
    const loading = ref(false);
    const game_predict_list:any = ref({});
    const nnjq_data_list:any = ref({});
    const hwyc_predict_list:any = ref({});
    const ssyc_detail:any = ref(null);
    const nnjq_detail:any = ref(null);
    const hwyc_detail:any = ref(null);
    const is_look: any = ref({
      zq_ssyc: false,
      zq_nnjq: false,
      zq_hwyc: false
    })

    const init_data = async() => {
      if (!user_info.value?.user_id) {
        user_info.value = await getUserInfo();
      }
      if (user_info.value?.user_id) {
        getUserLevel(user_info.value);
      }
      //获取预测数据
      await getPredictData();
      await getPredictDetail();
      loading.value = false;
    }

    onMounted(init_data);

    watch(() => route.query.yiqiuid || route.params.yiqiuid, (newVal: any) => {
        if (newVal && newVal != yiqiu_id.value) {
            console.info('predict',newVal,yiqiu_id.value)
            init_data();
        }
    });

    const onRefresh = () => {
      setTimeout(() => {
        init_data()
        loading.value = false;
      }, 500);
    };

    const getPredictData = async() => {
      let get_predict_datas:any = await game_api.get_predict_datas();
      
      if(get_predict_datas){
        game_predict_list.value = get_predict_datas?.game_predict_list;
        let nnjq_result = get_predict_datas?.nnjq_data_list;
        let hwyc_result = get_predict_datas?.hwyc_predict_list;
        if(nnjq_result && nnjq_result.matchs){
          for(let game of nnjq_result.matchs){
            let host_name = game.yiqiu_host_team_short_name || game.yiqiu_host_team_name || game.host_short_name || game.host_name;
						let away_name = game.yiqiu_guest_team_short_name || game.yiqiu_guest_team_name || game.away_short_name || game.away_name;
						let competition_name = game.yiqiu_competition_short_name || game.competition_short_name || game.yiqiu_competition_name || game.competition_name;
						let score = JSON.parse(game.score);
            game.host_name = host_name.length > 4 ? host_name.substr(0,4) : host_name;
            game.away_name = away_name.length> 4 ? away_name.substr(0,4) : away_name;
            game.competition_name = competition_name;
            game.score = score;
            game.match_time = moment.default(game.match_time).format("MM/DD HH:mm")
          }
          nnjq_data_list.value = nnjq_result;
        }
        if(hwyc_result && hwyc_result.matchs){
          for(let game of hwyc_result.matchs){
            let host_name = game.yiqiu_host_team_short_name || game.yiqiu_host_team_name || game.host_short_name || game.host_name;
						let away_name = game.yiqiu_guest_team_short_name || game.yiqiu_guest_team_name || game.away_short_name || game.away_name;
						let competition_name = game.yiqiu_competition_short_name || game.competition_short_name || game.yiqiu_competition_name || game.competition_name;
						let score = JSON.parse(game.score);
            game.host_name = host_name.length > 5 ? host_name.substr(0,5) : host_name;
            game.away_name = away_name.length> 5 ? away_name.substr(0,5) : away_name;
            game.competition_name = competition_name;
            game.score = score;
          }
          hwyc_predict_list.value = hwyc_result;
        }
      }
    }

    const getPredictDetail = async() => {
      let id = yiqiu_id.value || route.query.yiqiuid || route.params.yiqiuid
      if(is_look.value.zq_ssyc){
        let ssyc:any = await game_api.get_game_ssyc_detail({yiqiu_id:id});
        if(ssyc?.result){
          ssyc_detail.value = ssyc.result;
        }
      }
      if(is_look.value.zq_nnjq){
        let nnjq:any = await game_api.get_game_nnjq_detail({yiqiu_id:id});
        if(nnjq?.result){
          nnjq_detail.value = nnjq.result;
        }
      }
      if(is_look.value.zq_hwyc){
        let hwyc:any = await game_api.get_game_hwyc_detail({yiqiu_id:id});
        if(hwyc?.result){
          hwyc_detail.value = hwyc.result;
        }
      }
    }

    const getUserInfo = async () => {
      let result = await user_api.get_logined_virtual_account();
      if (result?.Error !== "未登录" && result?.Result != null) {
        return result.Result;
      } else {
        return null;
      }
    };

    const getUserLevel = (user: any) => {
      let level = user && user.vip_level && (typeof user.vip_level === 'object') ? user.vip_level : {};
      if (moment.default(level[`zq_end_time`]) > moment.default(level.zq_ssyc_end_time)) {
        level.zq_ssyc_end_time = level[`zq_end_time`];
      }
      if (moment.default(level[`zq_end_time`]) > moment.default(level.zq_hwyc_end_time)) {
        level.zq_hwyc_end_time = level[`zq_end_time`];
      }
      if (moment.default(level[`zq_end_time`]) > moment.default(level.zq_nnjq_end_time)) {
        level.zq_nnjq_end_time = level[`zq_end_time`];
      }
      is_look.value.zq_hwyc = moment.default(level['zq_hwyc_end_time']).isAfter(moment.default());
      is_look.value.zq_nnjq = moment.default(level['zq_nnjq_end_time']).isAfter(moment.default());
      is_look.value.zq_ssyc = moment.default(level['zq_ssyc_end_time']).isAfter(moment.default());
    }

    const getPrediction = (play:any,prediction_value:any,score:any) => {
      let html = [];
      if(score && score.length == 2){
        let total = score[0] + score[1];
        let spf = score[0] > score[1] ? '胜' : score[0] < score[1] ? '负' : '平';
        for(let value of prediction_value){
          if(play == 7203 && value.replace('球','')==total){
            html.push(`<span class="zhong">${value}</span>`)
          }else if(play == 7202 && value == score.join(':')){
            html.push(`<span class="zhong">${value}</span>`)
          }else if(play == 7206 && value == spf){
            html.push(`<span class="zhong">${value}</span>`)
          }
        }
      }
      return html.join("、")
    }

    return {
      loading,
      is_look,
      game_predict_list,
      nnjq_data_list,
      hwyc_predict_list,
      ssyc_detail,
      nnjq_detail,
      hwyc_detail,
      user_info,
      getPrediction,
      onRefresh
    };
  }
});
</script>

<style lang="scss" scoped>
@use '@/common/style/common' as *;
.model-box {
  background-color: #f7f8fc;
  .box{
    margin:10px;
    padding-bottom: 30px;
    background-color: #fff;
    position: relative;
    @include border-radius(5px);
  }
  .vip{
    margin: 0 10px;
    .vip-table {
      width: 100%;
      text-align: center;
      border-spacing: 0;
      border-collapse:collapse;
      background: #fff;
      color: #777777;
      position: relative;
      border-right:1px solid #F2EEEB;
      border-bottom:1px solid #F2EEEB;
      th {
        background-color: #FBF7F5;
        color: #333333;
        line-height: 38px;
        border-left: solid 1px #F2EEEB;
        border-top: solid 1px #F2EEEB;
        width:33%;
      }

      td {
        border-left: solid 1px #F2EEEB;
        border-top: solid 1px #F2EEEB;
        height: 49px;
      }
    }
    .nnjq-context{
      background-color: #F6F7F8;
      text-align: left;
      padding:10px;
      position: relative;
      @include border-radius(5px);
      .title{
        font-size: 14px;
        font-weight: 500;
        color:#227AFF;
      }
      .text{
        position: relative;
        color:#574B4B;
        font-size: 15px;
        padding-left: 15px;
        line-height: 28px;
      }
      .text::after {
          content: "";
          position: absolute;
          width: 8px;
          left: 0px;
          bottom: 10px;
          height: 8px;
          border-radius: 8px;
          background: #227AFF;
          animation: .4s both activeScaleX;
          -webkit-animation: .4s both activeScaleX;
          z-index: 0;
      }
    }
  }

  .tip {
    text-align: center;
    padding-top: 10px;
    @include sc(12px, #AAA);
    a{
      color:#3AA4F2;
    }
  }

  .go-vip{
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #FFFFFF 100%);
    border-radius: 0px 0px 4px 4px;
    position:absolute;
    bottom: 0;
    height: 76px;
    z-index: 9;
    width: 100%;
    padding:0 10px;
    a{
      width:90%;
      margin:20px 5% 0 5%;
      padding:10px 20px;
      height: 38px;
      line-height: 38px;
      background: linear-gradient(90deg, #F9D9AD 0%, #E4C585 100%);
      @include border-radius(19px);
      display: flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      .suo img{
        margin-right: 10px;
       @include wh(20px,20px);
      }
      .current{
        @include sc(16px,#917650);
        .people{
          color:#FF2121;
          padding:0 2px;
        }
      }
      .kaitong img{
        margin-left: 20px;
        @include wh(62px,18px);
      }

    }
  }
}

.event-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px;
  width: 100%;

  .event-title {
    font-size: 16px;
    font-weight: 700;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: auto !important;
    }

    .more-txt {
      font-size: 14px;
      color: #aaaaaa;
      font-weight: normal;
      padding-left: 10px;
    }
  }

  .more-event a {
    color: #3aa4f2;
    display: flex;
    justify-content: center;
    font-size:12px;
    img {
      width: 20px;
    }
  }
}

.event-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 10px;
}

.ssyc-box {
  -webkit-box-flex: 0.49;
  -ms-flex: 0.49;
  flex: 0.49;
  text-align: center;
  background: linear-gradient(135deg, #ffefef 0%, #fffff1 100%);
  border: 1px solid;
  -o-border-image: linear-gradient(148deg,
      rgba(255, 189, 189, 1),
      rgba(255, 244, 237, 1)) 1 1;
  border-image: linear-gradient(148deg,
      rgba(255, 189, 189, 1),
      rgba(255, 244, 237, 1)) 1 1;
  font-weight: 500;
  color: #333333;
  font-size: 16px;
  padding: 20px 0;

  .zhanji {
    font-weight: 400;
    color: #ff2121;
    font-size: 15px;
    padding-top: 5px;
  }
}

.match {
  -webkit-box-flex: 0.5;
  -ms-flex: 0.5;
  flex: 0.5;
  background: #ffffff;
  border-radius: 5px;
  -o-border-image: linear-gradient(143deg,
      rgba(214, 237, 254, 1),
      rgba(238, 255, 255, 1)) 1 1;
  border-image: linear-gradient(143deg,
      rgba(214, 237, 254, 1),
      rgba(238, 255, 255, 1)) 1 1;
  background: linear-gradient(126deg, #fffcee 0%, #d5edff 100%);

  a {
    display: block;
    padding: 10px;
    color: #333;
    line-height: 30px;
  }

  .match-top {
    color: #999;
    text-align: left;
    span {
      padding-left: 5px;
      color: #333;
    }

    .time {
      color: #3b52d6;
    }

    .red {
      color: #333;
    }

    .all-score {
      color: red;
      float: right;
    }
  }

  .match-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    .home,
    .guest {
      height: 22px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .match-left {
      font-weight: bold;
      font-size: 15px;

      img {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
    }

    .recommend-number {
      -webkit-box-flex: 0.6;
      -ms-flex: 0.6;
      flex: 0.6;
      color: red;
      line-height: 18px;

      .hit,
      .fail {
        width: 50px;
        height: 50px;
        background: url(https://img2.ydniu.com/app/images/sports_ydniu/model/ic_mingzhong.png) no-repeat left top;
        background-size: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      .fail {
        width: 50px;
        height: 50px;
        background: url(https://img2.ydniu.com/app/images/sports_ydniu/model/ic_weimingzhong.png) no-repeat left top;
        background-size: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }

  

  
}
.hwyc {
    .en-name {
      font-size: 12px;
      font-family: SFProDisplay-Regular, SFProDisplay;
      font-weight: 400;
      color: #777777;
    }

    .team-name {
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .match-result {
      background: #ff2121;
      border-radius: 4px;
      color: #fff;
      font-weight: bold;
      text-align: center;
      width: 80%;
      margin: 0 auto;
    }

  }

/*滑动样式*/
.swiper {
  margin: 0 10px;
}

.nnjq_swiper .swiper-slide {
  width: 65% !important;
  margin-right: 20px !important;
}

.hwyc_swiper .swiper-slide {
  width: 55% !important;
  margin-right: 20px !important;
}</style>
