<template>
  <view class="background" style="overflow: hidden" >
    <view class="transition">
      <!-- NBA图片过渡界面 -->
      <image v-show="showNBA" src="@/static/transition/nba.png" class="transition_nba"></image>
      <!-- Logo图片过渡界面 -->
      <image v-show="showLogo" src="@/static/transition/logo.png" class="transition_logo"></image>
      <!-- 签名 -->
      <view v-show="showSignature" class="transition_signature">
        <view class="transition_text">体育直播可视化系统</view>
        <text class="transition_text">102201435 龚嘉伟</text>
      </view>
    </view>
    <!-- 内容 -->
    <!-- 如果要显示过渡动画 在下面添加如下部分 v-show="!showNBA && !showLogo && !showSignature"   -->
    <view class="content" :style="{ minHeight: '100vh' }">
      <!-- 顶部Logo部分     -->
      <view class="top_logo">
        <image src="@/static/transition/nba.png" class="top_logo_nba"></image>
        <text class="top_logo_signature">体育直播可视化系统</text>
        <image src="@/static/transition/logo.png" class="top_logo_all_sport"></image>
      </view>
      <!-- 过渡线     -->
      <image src="@/static/content/line/line.png" class="line1"></image>
      <!-- 篮球比赛部分 -->
      <view class="basketball_match">
        <image src="@/static/content/court/basketball_court.png" class="image"></image>
        
        <!-- 比赛事件显示屏 -->
        <view class="event_screen">
          <text class="event_title">比赛事件</text>
          <view class="event_content">
            <text class="event_text">{{currentEvent}}</text>
          </view>
        </view>

        <!--     湖人队进攻动画部分   -->
        <view class="laker_attack" v-if="is_laker_attack">
          <image class="arrow_laker_attack"  src="@//static/content/court/arrow_back.png"></image>
          <text class="laker_word_area">湖人队进攻</text>
        </view>
        <!--     森林狼队进攻动画部分   -->
        <view class="wolf_attack" v-if="is_wolf_attack">
          <image class="arrow_wolf_attack" src="@/static/content/court/arrow.png"></image>
          <text class="wolf_word_area">森林狼队进攻</text>
        </view>
      </view>
      <!-- 过渡线     -->
      <image src="@/static/content/line/line.png" class="line2"></image>
    </view>



    <!-- 比分部分 -->
    <view class="score">
      <text class="now_time1">剩余时间</text>
      <text class="now_time2">第{{now_class}}节 {{now_minute}}:{{now_seconds}}</text>
      <image class="wolf_score_text" src="@/static/content/score/wole_score_text.png"></image>
      <image class="vs" src="@/static/content/score/vs.png"></image>
      <image class="laker_score_text" src="@/static/content/score/laker_score_text.png"></image>
      <text class="wolf_score">{{wolf_score}}</text>
      <text class="laker_score">{{laker_score}}</text>
    </view>

    <!-- 球队数据部分 -->
    <view class="team_statics">
      <image class="cut_off_line" src="@/static/content/team_statics/cut_off_line.png"></image>
      <text class="statistics1">各队技术统计</text>
      <text class="statistics2">各队技术统计</text>

      <text class="three_point_wolf">三分球得分    {{three_point_shot_wolf}}</text>
      <text class="three_point_laker">三分球得分    {{three_point_shot_laker}}</text>


      <text class="two_point_wolf">两分球得分    {{two_point_shot_wolf}}</text>
      <text class="two_point_laker">两分球得分    {{two_point_shot_laker}}</text>
      <!--   湖人队得分统计图   -->
      <view class="charts-box-score-wolf">
        <qiun-data-charts
            type="pie"
            :opts="opts_wolf_score"
            :chartData="chartData_wolf_score"
        />
      </view>
      <!--   湖人队得分统计图   -->
      <view class="charts-box-score-laker">
        <qiun-data-charts
            type="pie"
            :opts="opts_laker_score"
            :chartData="chartData_laker_score"
        />


      </view>
      <text class="foul_wolf">犯规数    {{foul_wolf}}</text>
      <text class="block_wolf">盖帽数   {{block_wolf}}</text>
      <text class="rebound_wolf">篮板数    {{rebound_wolf}}</text>
      <text class="steal_wolf">抢断    {{steal_wolf}}</text>
      <!--   森林狼队技术统计图   -->
      <view class="charts-box-tech-wolf">
        <qiun-data-charts
            type="pie"
            :opts="opts_wolf_tech"
            :chartData="chartData_wolf_tech"
        />
      </view>

      <text class="foul_laker">犯规数    {{foul_laker}}</text>
      <text class="block_laker">盖帽数   {{block_laker}}</text>
      <text class="rebound_laker">篮板数    {{rebound_laker}}</text>
      <text class="steal_laker">抢断    {{steal_laker}}</text>
      <!--   湖人队技术统计图   -->
      <view class="charts-box-tech-laker">
        <qiun-data-charts
            type="pie"
            :opts="opts_laker_tech"
            :chartData="chartData_laker_tech"
        />
      </view>
    </view>
    <!-- 过渡线 -->
    <image src="@/static/content/line/line.png" class="line3"></image>












    <!-- 球员数据部分 -->
    <view class="human_statics">
      <text class="tech">双方球员技术统计</text>
      <image class="laker_icon" src="@/static/content/players/laker.png"></image>
      <!-- 湖人队数据表格 -->
      <view class="player_table laker_table">
        <view class="table_header">
          <text class="header_cell">球员</text>
          <text class="header_cell">位置</text>
          <text class="header_cell">时间</text>
          <text class="header_cell">投篮</text>
          <text class="header_cell">三分</text>
          <text class="header_cell">罚球</text>
          <text class="header_cell">进攻</text>
          <text class="header_cell">防守</text>
          <text class="header_cell">总计</text>
          <text class="header_cell">助攻</text>
          <text class="header_cell">犯规</text>
          <text class="header_cell">抢断</text>
          <text class="header_cell">失误</text>
          <text class="header_cell">盖帽</text>
          <text class="header_cell">得分</text>
        </view>
        <view class="table_content">
          <view class="table_row" v-for="(player, index) in lakerPlayers" :key="index">
            <text class="cell">{{player.name}}</text>
            <text class="cell">{{player.position}}</text>
            <text class="cell">{{player.time}}</text>
            <text class="cell">{{player.fieldGoals}}</text>
            <text class="cell">{{player.threePoints}}</text>
            <text class="cell">{{player.freeThrows}}</text>
            <text class="cell">{{player.offenseRebounds}}</text>
            <text class="cell">{{player.defenseRebounds}}</text>
            <text class="cell">{{player.totalRebounds}}</text>
            <text class="cell">{{player.assists}}</text>
            <text class="cell">{{player.fouls}}</text>
            <text class="cell">{{player.steals}}</text>
            <text class="cell">{{player.turnovers}}</text>
            <text class="cell">{{player.blocks}}</text>
            <text class="cell">{{player.points}}</text>
          </view>
        </view>
      </view>




      <image class="wolf_icon" src="@/static/content/players/wolf.png"></image>
      <!-- 森林狼队数据表格 -->
      <view class="player_table wolf_table">
        <view class="table_header">
          <text class="header_cell">球员</text>
          <text class="header_cell">位置</text>
          <text class="header_cell">时间</text>
          <text class="header_cell">投篮</text>
          <text class="header_cell">三分</text>
          <text class="header_cell">罚球</text>
          <text class="header_cell">进攻</text>
          <text class="header_cell">防守</text>
          <text class="header_cell">总计</text>
          <text class="header_cell">助攻</text>
          <text class="header_cell">犯规</text>
          <text class="header_cell">抢断</text>
          <text class="header_cell">失误</text>
          <text class="header_cell">盖帽</text>
          <text class="header_cell">得分</text>
        </view>
        <view class="table_content">
          <view class="table_row" v-for="(player, index) in wolfPlayers" :key="index">
            <text class="cell">{{player.name}}</text>
            <text class="cell">{{player.position}}</text>
            <text class="cell">{{player.time}}</text>
            <text class="cell">{{player.fieldGoals}}</text>
            <text class="cell">{{player.threePoints}}</text>
            <text class="cell">{{player.freeThrows}}</text>
            <text class="cell">{{player.offenseRebounds}}</text>
            <text class="cell">{{player.defenseRebounds}}</text>
            <text class="cell">{{player.totalRebounds}}</text>
            <text class="cell">{{player.assists}}</text>
            <text class="cell">{{player.fouls}}</text>
            <text class="cell">{{player.steals}}</text>
            <text class="cell">{{player.turnovers}}</text>
            <text class="cell">{{player.blocks}}</text>
            <text class="cell">{{player.points}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};
export default {
  data() {
    return {
      chartData_wolf_score: {},
      chartData_wolf_tech: {},
      chartData_laker_score: {},
      chartData_laker_tech: {},
      opts_laker_score: {
        color: ["#a983d5", "#1d55cd"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          },

        }
      },
      opts_wolf_score: {
        color: ["#a983d5", "#1d55cd"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          }
        }
      },
      opts_wolf_tech: {
        color: ["#a983d5", "#1d55cd","#61ca86","#cc8324"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        width: 200,
        height: 200,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          }
        }
      },
      opts_laker_tech: {
        color: ["#a983d5", "#1d55cd","#61ca86","#cc8324"],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        fontSize: 24,
        width: 200,
        height: 200,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            labelFontSize: 24,
            labelLineHeight: 30,
          }
        }
      },
      nbaDuration: 2000, // NBA 图片显示时长（毫秒）
      logoDuration: 2000, // Logo 图片显示时长（毫秒）
      signatureDuration: 2000, // 签名显示时长（毫秒）
      is_wolf_attack: true,
      is_laker_attack: true,
      showNBA: true, // 是否显示NBA图片  后期要改true
      showLogo: false, // 是否显示Logo图片
      showSignature: false, // 是否显示签名
      left_time: "",
      now_class: "4", //当前节数
      now_minute: "8", //当前分钟
      now_seconds: "23", //当前秒数
      laker_score: 57, // 湖人队得分
      wolf_score: 58, // 森林狼队得分
      three_point_shot_laker: 38, // 湖人队三分球得分
      two_point_shot_laker: 1, // 湖人队2分球得分


      three_point_shot_wolf: 38, // 森林狼队三分球得分
      two_point_shot_wolf: 20, // 森林狼队2分球得分
      foul_laker: 1, // 湖人队犯规数
      block_laker: 2, // 湖人队盖帽数
      rebound_laker: 3, // 湖人队篮板数
      steal_laker: 4, // 湖人队抢断数


      foul_wolf: 5, // 森林狼队犯规数
      block_wolf: 6, // 森林狼队盖帽数
      rebound_wolf: 7, // 森林狼队篮板数
      steal_wolf: 8, // 森林狼队抢断数

      lakerPlayers: [
        {
          name: '奥斯汀·里维斯',
          position: '后卫',
          time: '36',
          fieldGoals: '6-14',
          threePoints: '0-5',
          freeThrows: '0-1',
          offenseRebounds: '4',
          defenseRebounds: '5',
          totalRebounds: '9',
          assists: '4',
          fouls: '4',
          steals: '1',
          turnovers: '0',
          blocks: '1',
          points: '12'
        },
        {
          name: '德安杰洛·拉塞尔',
          position: '后卫',
          time: '34',
          fieldGoals: '4-12',
          threePoints: '1-7',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '1',
          totalRebounds: '1',
          assists: '5',
          fouls: '2',
          steals: '2',
          turnovers: '1',
          blocks: '0',
          points: '9'
        },
        {
          name: '勒布朗·詹姆斯',
          position: '前锋',
          time: '35',
          fieldGoals: '7-16',
          threePoints: '1-4',
          freeThrows: '1-1',
          offenseRebounds: '0',
          defenseRebounds: '5',
          totalRebounds: '5',
          assists: '4',
          fouls: '3',
          steals: '0',
          turnovers: '2',
          blocks: '2',
          points: '16'
        },
        {
          name: '八村塁',
          position: '前锋',
          time: '35',
          fieldGoals: '7-14',
          threePoints: '1-4',
          freeThrows: '3-4',
          offenseRebounds: '3',
          defenseRebounds: '2',
          totalRebounds: '5',
          assists: '1',
          fouls: '2',
          steals: '2',
          turnovers: '0',
          blocks: '1',
          points: '18'
        },
        {
          name: '安东尼·戴维斯',
          position: '中锋',
          time: '38',
          fieldGoals: '11-23',
          threePoints: '1-3',
          freeThrows: '13-15',
          offenseRebounds: '3',
          defenseRebounds: '13',
          totalRebounds: '16',
          assists: '4',
          fouls: '1',
          steals: '1',
          turnovers: '1',
          blocks: '3',
          points: '36'
        },
        {
          name: '盖布·文森特',
          position: '后卫',
          time: '17',
          fieldGoals: '1-2',
          threePoints: '0-0',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '2',
          totalRebounds: '2',
          assists: '2',
          fouls: '1',
          steals: '0',
          turnovers: '2',
          blocks: '0',
          points: '2'
        },
        {
          name: '道尔顿·克里克特',
          position: '后卫',
          time: '16',
          fieldGoals: '2-4',
          threePoints: '1-3',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '1',
          totalRebounds: '1',
          assists: '2',
          fouls: '1',
          steals: '1',
          turnovers: '1',
          blocks: '0',
          points: '5'
        },
        {
          name: '贾克森·海耶斯',
          position: '中锋',
          time: '15',
          fieldGoals: '4-5',
          threePoints: '0-0',
          freeThrows: '2-2',
          offenseRebounds: '3',
          defenseRebounds: '1',
          totalRebounds: '4',
          assists: '0',
          fouls: '3',
          steals: '0',
          turnovers: '0',
          blocks: '1',
          points: '10'
        },
        {
          name: '马克斯·克里斯蒂',
          position: '前锋',
          time: '11',
          fieldGoals: '0-3',
          threePoints: '0-3',
          freeThrows: '2-2',
          offenseRebounds: '1',
          defenseRebounds: '1',
          totalRebounds: '2',
          assists: '0',
          fouls: '5',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '2'
        },
        {
          name: '布朗尼·詹姆斯',
          position: '前锋',
          time: '3',
          fieldGoals: '0-2',
          threePoints: '0-1',
          freeThrows: '0-0',
          offenseRebounds: '1',
          defenseRebounds: '0',
          totalRebounds: '1',
          assists: '0',
          fouls: '0',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '0'
        }
      ],
      wolfPlayers: [
        {
          name: '安东尼·爱德华兹',
          position: '后卫',
          time: '41',
          fieldGoals: '10-25',
          threePoints: '5-13',
          freeThrows: '2-3',
          offenseRebounds: '0',
          defenseRebounds: '6',
          totalRebounds: '6',
          assists: '3',
          fouls: '3',
          steals: '0',
          turnovers: '4',
          blocks: '0',
          points: '27'
        },
        {
          name: '迈克·康利',
          position: '后卫',
          time: '20',
          fieldGoals: '1-7',
          threePoints: '0-5',
          freeThrows: '3-3',
          offenseRebounds: '2',
          defenseRebounds: '2',
          totalRebounds: '4',
          assists: '2',
          fouls: '1',
          steals: '1',
          turnovers: '3',
          blocks: '0',
          points: '5'
        },
        {
          name: '朱利叶斯·兰德尔',
          position: '前锋',
          time: '34',
          fieldGoals: '5-10',
          threePoints: '1-3',
          freeThrows: '5-7',
          offenseRebounds: '3',
          defenseRebounds: '6',
          totalRebounds: '9',
          assists: '4',
          fouls: '3',
          steals: '0',
          turnovers: '2',
          blocks: '0',
          points: '16'
        },
        {
          name: '杰登·麦克丹尼尔斯',
          position: '前锋',
          time: '16',
          fieldGoals: '3-8',
          threePoints: '0-3',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '2',
          totalRebounds: '2',
          assists: '1',
          fouls: '5',
          steals: '1',
          turnovers: '1',
          blocks: '0',
          points: '6'
        },
        {
          name: '戈贝尔',
          position: '中锋',
          time: '12',
          fieldGoals: '1-3',
          threePoints: '0-0',
          freeThrows: '1-2',
          offenseRebounds: '1',
          defenseRebounds: '4',
          totalRebounds: '5',
          assists: '0',
          fouls: '1',
          steals: '0',
          turnovers: '2',
          blocks: '0',
          points: '3'
        },
        {
          name: '拿斯列特',
          position: '前锋',
          time: '10',
          fieldGoals: '1-1',
          threePoints: '1-1',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '3',
          totalRebounds: '3',
          assists: '0',
          fouls: '1',
          steals: '0',
          turnovers: '1',
          blocks: '0',
          points: '3'
        },
        {
          name: '迪温琴佐',
          position: '后卫',
          time: '8',
          fieldGoals: '1-3',
          threePoints: '0-1',
          freeThrows: '0-2',
          offenseRebounds: '1',
          defenseRebounds: '0',
          totalRebounds: '1',
          assists: '3',
          fouls: '1',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '2'
        },
        {
          name: '尼基尔-亚历山大-沃克',
          position: '后卫',
          time: '6',
          fieldGoals: '1-1',
          threePoints: '1-1',
          freeThrows: '0-0',
          offenseRebounds: '0',
          defenseRebounds: '0',
          totalRebounds: '0',
          assists: '0',
          fouls: '0',
          steals: '0',
          turnovers: '0',
          blocks: '0',
          points: '3'
        }
      ],
      currentEvent: "爱德华兹 三分投篮命中 (3分) (朱利叶斯-兰德尔 2次助攻)", // 当前显示的比赛事件
    };
  },
  onReady() {
    this.getServerData_wolf_score();
    this.getServerData_laker_score();
    this.getServerData_laker_tech();
    this.getServerData_wolf_tech();
  },
  onLoad() {
    uni.connectSocket(
        {
          url: "ws:// 192.168.12.106:8080/ ws",
          complete: (e) => {
            console.log("socket :", e);
          }
        });//创建一个websocket连接
    this.transition();
  },
  methods: {
    transition() {
      // 显示NBA图片
      setTimeout(() => {
        this.showNBA = false; // 隐藏NBA图片
        this.showLogo = true; // 显示Logo图片
        // 显示Logo图片后隐藏并显示签名
        setTimeout(() => {
          this.showLogo = false; // 隐藏Logo图片
          this.showSignature = true; // 显示签名
          // 签名显示后隐藏并显示内容
          setTimeout(() => {
            this.showSignature = false; // 隐藏签名
          }, this.signatureDuration);
        }, this.logoDuration);
      }, this.nbaDuration);
    },
    getServerData_wolf_score() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [{"name": "三分球", "value": this.three_point_shot_wolf},
                {"name": "两分球", "value": this.two_point_shot_wolf}]
            }
          ]
        };
        this.chartData_wolf_score = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getServerData_laker_score() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [{"name": "三分球", "value": this.three_point_shot_laker},
                {"name": "两分球", "value": this.two_point_shot_laker}]
            }
          ]
        };
        this.chartData_laker_score = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getServerData_wolf_tech() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        let res = {
          series: [
            {
              data: [
                {"name": "犯规数", "value": this.foul_wolf},
                {"name": "盖帽数", "value": this.block_wolf},
                {"name": "篮板数", "value": this.rebound_wolf},
                {"name": "抢断", "value": this.steal_wolf}
              ]
            }
          ]
        };
        this.chartData_wolf_tech = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getServerData_laker_tech() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        let res = {
          series: [
            {
              data: [
                {"name": "犯规数", "value": this.foul_laker},
                {"name": "盖帽数", "value": this.block_laker},
                {"name": "篮板数", "value": this.rebound_laker},
                {"name": "抢断", "value": this.steal_laker}
              ]
            }
          ]
        };
        this.chartData_laker_tech = JSON.parse(JSON.stringify(res));
      }, 500);
    }
  },
};
</script>
<style>
/* 定义图片渐变消失动画 */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.background {
  position: relative;
  background-color: #000; /* 黑色背景 */
  height: 530vh; /* 设置高度覆盖视口 */
  overflow: hidden;
  -ms-overflow-style:none; //兼容Edge
  scrollbar-width: none;//兼容火狐



  /*过渡界面部分*/

  .transition {
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: 1;
    .transition_nba {
      position: absolute;
      height: 40%;
      width: 20%;
      left: 40%;
      top: 30%;
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */
    }

    .transition_logo {
      position: absolute;
      height: 40%;
      width: 30%;
      left: 35%;
      top: 30%;
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */
    }

    .transition_signature {
      position: absolute;
      top: 40%;
      width: 100%;
      text-align: center; /* 居中对齐 */
      color: #ffffff; /* 白色文字 */
      font-size: 50px; /* 调整字体大小 */
      line-height: 1.5; /* 设置行高 */
      font-weight: bold; /* 加粗 */
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */

      .transition_text {
        display: block; /* 强制换行 */
        margin-bottom: 5px; /* 设置行间距（可选） */
      }
    }

  } /*过渡部分结束*/
  /*比赛内容部分*/
  .content {
    position: relative;
    width: 100%;
    z-index: 0;

    .top_logo {
      position: absolute;
      width: 100%;
      height: 12%;
      z-index: 1;

      .top_logo_nba {
        position: absolute;
        height: 80%;
        width: 5%;
        top: 10%;
        margin: 0 auto;
        display: block;
      }

      .top_logo_signature {
        position: absolute;
        height: 100%;
        width: 40%;
        left: 30%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #ffffff;
        font-size: 55px;
        line-height: 1.5;
        font-weight: bold;
      }

      .transition_text {
        display: block;
        margin-bottom: 5px;
      }

      .top_logo_all_sport {
        position: absolute;
        height: 89%;
        width: 9%;
        top: 5%;
        left: 89%;
        margin: 0 auto;
        display: block;
      }
    }


    .line1 {
      position: absolute;
      width: 90%;
      height: 2px;
      left: 5%;
      top: 14%;
      background-color: #ffffff;
      z-index: 1;
    }

    .basketball_match {
      position: absolute;
      width: 100%;
      height: 87%;
      top: 13%;

      z-index: 1;

      .image {
        width: 95%;
        height: 90%;
        left: 2.5%;
        top: 4%;
      }
      .arrow_wolf_attack {
        position: absolute;
        width: 50%;
        height: 20%;
        left: 15%;
        top: 60%;
        z-index: 100;
        opacity: 0.7; /* 设置透明度为低 */
      }
      .wolf_word_area {
        position: absolute;
        height: 16%;
        width: 30%;
        left: 25%;
        top: 62%;

        z-index: 101;
        display: flex;  /* 使用 flexbox 来控制内容布局 */
        justify-content: center;  /* 居中对齐 */
        align-items: center;  /* 垂直居中对齐 */
        text-align: center;  /* 文字水平居中 */
        color: #000000;  /* 字体颜色为黑色 */
        font-size: 16px;  /* 字体大小，适当调整 */
        font-weight: bold;  /* 加粗字体 */
        word-wrap: break-word;  /* 自动换行 */
        white-space: normal;  /* 允许文本换行 */
        padding: 5px;  /* 可选：添加内边距来增加空间 */
        line-height: 1.5;  /* 行高，适当调整 */
      }


      .arrow_laker_attack {
        position: absolute;
        width: 50%;
        height: 20%;
        left: 28%;
        top: 63%;
        z-index: 100;
        opacity: 0.7; /* 设置透明度为低 */
      }
      .laker_word_area{
        position: absolute;
        height: 16%;
        width: 30%;
        left: 38%;
        top:65%;

        z-index: 101;
      }

      .event_screen {
        position: absolute;
        width: 40%;
        height: 25%;
        left: 30%;
        top: 6.5%;
        background-color: rgba(0, 0, 0, 0.7);
        border: 2px solid #4cd964;
        border-radius: 10px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-shadow: 0 0 10px rgba(76, 217, 100, 0.5);
      }

      .event_title {
        color: #4cd964;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
        border-bottom: 1px solid #4cd964;
        padding-bottom: 5px;
      }

      .event_content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
      }

      .event_text {
        color: #ffffff;
        font-size: 20px;
        text-align: center;
        line-height: 1.5;
        padding: 0 10px;
      }
    }
    .line2{
      position: absolute;
      width: 90%;
      height: 2px;
      left: 5%;
      top: 98%;
      background-color: #ffffff;
      z-index: 1;
    }
    .score{
      position: absolute;
      width: 100%;
      height: 7%;
      top: 100%;
    /*  border: #4cd964 solid 2px;*/
    }
  }/*比赛内容部分结束*/

  /*比分部分开始*/
  .score {
    position: relative;
    height: 50vh;

    .now_time1 {
      position: absolute;
      height: 10%;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #ffffff;
      font-size: 55px;  /* 设置字体大小 */
      line-height: 1.5;
      font-weight: bold;
      top: 2%;  /* 定位在顶部 */
    }

    .now_time2 {
      position: absolute;
      height: 10%;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #ffffff;
      font-size: 40px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
      top: 14%;
    }
    .wolf_score_text{
      position: absolute;
      height: 14%;
      width: 14%;
      left: 8%;
      top: 27%;
    }
    .vs{
      position: absolute;
      height: 60%;
      width: 32%;
      left: 34%;
      top: 28%;
    }
    .laker_score_text{
      position: absolute;
      height: 14%;
      width: 11%;
      right: 10%;
      top: 27%;
    }
    .wolf_score{
      position: absolute;

      height: 40%;
      top: 48%;
      left: 10%;
      width: 9%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 120px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;

    }
    .laker_score{
      position: absolute;
      height: 40%;
      top: 48%;
      right: 10%;
      width: 9%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 120px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
  }/*比分部分结束*/

  /*球队数据开始*/
  .team_statics{
    position: relative;
    height: 150vh;
    .cut_off_line{
      position: absolute;
      height: 100%;
      width: 2px;
      left: 50%;
    }
    .statistics1{
      position: absolute;

      height: 8%;
      top: 1%;
      right: 5%;
      width: 40%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 50px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .statistics2{
      position: absolute;

      height: 8%;
      top: 1%;
      left: 5%;
      width: 40%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 50px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .three_point_wolf{
      position: absolute;

      height: 15%;
      top: 8%;
      left: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .three_point_laker{
      position: absolute;

      height: 15%;
      top: 8%;
      right: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }



    .charts-box-score-wolf{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 18%;
      left: 12%;
    }
    .charts-box-score-laker{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 18%;
      right: 12%;
    }
    .charts-box-tech-wolf{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 68%;
      left: 12%;
    }
    .charts-box-tech-laker{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 68%;
      right: 12%;
    }



    .two_point_wolf{
      position: absolute;

      height: 15%;
      top: 8%;
      left: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .two_point_laker{
      position: absolute;

      height: 15%;
      top: 8%;
      right: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .foul_wolf{
      position: absolute;

      height: 15%;
      top: 40%;
      left: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .block_wolf{
      position: absolute;

      height: 15%;
      top: 50%;
      left: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .rebound_wolf{
      position: absolute;

      height: 15%;
      top: 40%;
      left: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .steal_wolf{
      position: absolute;

      height: 15%;
      top: 50%;
      left: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .foul_laker{
      position: absolute;

      height: 15%;
      top: 40%;
      right: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .block_laker{
      position: absolute;

      height: 15%;
      top: 50%;
      right: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .rebound_laker{
      position: absolute;

      height: 15%;
      top: 40%;
      right: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .steal_laker{
      position: absolute;

      height: 15%;
      top: 50%;
      right: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
  }/*球队数据部分结束*/
  .line3{
    position: absolute;
    height: 2px;
    width: 90%;
    left: 5%;
    top: 57%;
  }
















  /*球员数据开始*/
  .human_statics{
    position: relative;
    height: 230vh;
  /*  border: #4cd964 2px solid;*/
    .tech{
      position: absolute;
      height: 8%;
      top: 0%;
      left: 35%;
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.0;
      font-weight: normal;
      letter-spacing: 10px;
    }
    .laker_icon{
      position: absolute;
      height: 8%;
      width: 30%;
      top: 5%;
      left: 35%;
    }
    .laker_charts{
      position: absolute;
      height: 40%;
      width: 90%;
      top: 13.5%;
      left: 5%;
    }
    .wolf_icon{
      position: absolute;
      height: 8%;
      width: 40%;
      top: 53%;
      left: 30%;
    }
    .wolf_charts{
      position: absolute;
      height: 36%;
      width: 90%;
      top: 61%;
      left: 5%;
    }
    .player_table {
      position: absolute;
      width: 95%;
      left: 2.5%;
      border: #4cd964 2px solid;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      height: 100%; /* 确保表格容器占满整个高度 */
    }

    .laker_table {
      top: 13.5%;
      height: 35%;
    }

    .wolf_table {
      top: 61%;
      height: 35%;
    }

    .table_header {
      display: flex;
      background-color: rgba(255, 255, 255, 0.2);
      padding: 10px 0;
      flex: 0 0 auto; /* 表头固定高度 */
    }

    .table_row {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 8px 0;
      flex: 1; /* 让每一行平均分配剩余空间 */
      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
    }

    .header_cell, .cell {
      flex: 1;
      text-align: center;
      color: #ffffff;
      font-size: 14px;
      padding: 0 2px;
      white-space: nowrap;
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
    }

    .header_cell:nth-child(1), .cell:nth-child(1) {
      flex: 2;
    }
    .header_cell:nth-child(2), .cell:nth-child(2) {
      flex: 0.8;
    }
    .header_cell:nth-child(3), .cell:nth-child(3) {
      flex: 0.8;
    }

    .header_cell {
      font-weight: bold;
      font-size: 16px;
    }

    /* 让表格内容区域占满剩余空间 */
    .table_content {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: auto; /* 如果内容过多则显示滚动条 */
    }
  }/*球员数据部分结束*/

}

</style>