You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1560 lines
40 KiB
1560 lines
40 KiB
<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> |