体育世界杯 卡片组件

npm install ss_fifa_card --save
或
npm install --save git+ssh://[email protected]:ssfe/2022fifacard.git

1. 赛程比赛卡

import { MatchCard } from "ss_fifa_card"

<MatchCard
:card="cardData"
@handleClick="handleClick"
@btnClick="btnClick"
></MatchCard>

cardData = {
    "Finals": false,  //是否是决赛
    "AdPic":  'https://n.sinaimg.cn/default/b5eb0bc4/20220904/ad_pic.png', //标题顶部广告logo 可以为空
    "AdPicDark":'http://n.sinaimg.cn/default/b5eb0bc4/20220904/ad_pic_dark.png', //标题顶部广告logo（ios暗黑下展示） 可以为空
    "BtnText": '参与讨论', //卡片右部按钮 空不展示
    "Title": '世界杯小组赛 A组第1轮', //顶部标题
    "Date": "11月22日",   //比赛 日期
    "Time": "00:00",    //比赛开始 时间
    "Team1": {         //球队1
      "ID": "1806",
      "Name": "塞内加尔", //名称
      "Points": "",
      "Icon85": "//www.sinaimg.cn/lf/sports/logo85/1806.png" //球队logo
    },
    "Team2": {  //球队2
      "ID": "927",
      "Name": "荷兰",
      "Points": "",
      "Icon85": "//www.sinaimg.cn/lf/sports/logo85/927.png"
    }
  }

  handleClick(item) {  //卡片点击事件
    console.log('handleClick', item)
  } 
  btnClick(item) {  //卡片右侧按钮点击事件
    console.log('btnClick', item)
  }

2. 积分

import { Rank } from "ss_fifa_card"

<Rank :list="ranList" @handleClick="handleClick" :actives="actives"></Rank>

actives = [0, 1]  //排行高亮索引
ranList = {
  //积分表头
  Topic: {  
    Name: '球队',
    Played: '赛',
    WDL: '胜/平/负',
    GOL: '进/失',
    Score: '积分',
  },
  //积分列表
  Chart: [{
      Rank: '1', //排名
      Group: 'A', 
      Played: '0',
      WDL: '0/0/0',
      GOL: '0/0',
      Score: '0',
      Team: {  //国家信息
        ID: '927',
        Name: '荷兰',
        Icon85: '//www.sinaimg.cn/lf/sports/logo85/927.png',
      },
    }
  ],
}

handleClick(item) {  //卡片点击事件
  console.log('handleClick', item)
}