index.js

const userCases = {
  微信小程序: [
    {
      name: '京东购物',
      url: 'http://storage.jd.com/taro-resource/cases/京东购物.png',
    },
    {
      name: 'TOPLIFE',
      url: 'http://storage.jd.com/taro-resource/cases/TOPLIFE.png',
    },
    {
      name: '7FRESH',
      url: 'http://storage.jd.com/taro-resource/cases/image20.jpeg',
    },
    {
      name: '玲珑',
      url: 'http://storage.jd.com/taro-resource/cases/玲珑.png',
    },
    {
      name: '一起有局',
      url: 'http://storage.jd.com/taro-resource/cases/一起有局.png',
    },
    {
      name: '荐一物',
      url: 'http://storage.jd.com/taro-resource/cases/jian.png',
    },
    {
      name: 'iLove',
      url:
        'https://user-images.githubusercontent.com/26370198/83001596-92d3ec00-a03e-11ea-9cfe-ae38423ba69e.jpg',
    },
    {
      name: '壹赫兹',
      url: 'http://storage.jd.com/taro-resource/cases/hz.png',
    },
    {
      name: '京品百货',
      url: 'http://storage.jd.com/taro-resource/cases/image4.png',
    },
    {
      name: 'Taro UI',
      url: 'http://storage.jd.com/taro-resource/cases/image16.jpeg',
    },
    {
      name: '淘票票',
      url: 'https://img.alicdn.com/tfs/TB1RoXxixD1gK0jSZFyXXciOVXa-430-430.png',
    },
    {
      name: '豆芽名片',
      url:
        'https://user-images.githubusercontent.com/16730031/64512839-d0aaac00-d319-11e9-94fb-7d10b9bc2b22.jpg',
    },
    {
      name: '吐个槽社区',
      url: 'http://storage.jd.com/taro-resource/cases/image3.png',
    },
    {
      name: '轻松问卷',
      url: 'http://storage.jd.com/taro-resource/cases/image5.png',
    },
    {
      name: '喵呜部落',
      url: 'http://storage.jd.com/taro-resource/cases/image4.jpeg',
    },
    {
      name: '小鱼的信',
      url: 'http://storage.jd.com/taro-resource/cases/image6.jpeg',
    },
    {
      name: '罗网部落',
      url: 'http://storage.jd.com/taro-resource/cases/image2.jpeg',
    },
    {
      name: '学区房',
      url: 'http://storage.jd.com/taro-resource/cases/image8.jpeg',
    },
    {
      name: '还呗申请',
      url: 'http://storage.jd.com/taro-resource/cases/image18.jpeg',
    },
    {
      name: '多趣游戏盒',
      url: 'http://storage.jd.com/taro-resource/cases/image23.jpeg',
    },
    {
      name: '妈妈医选',
      url: 'http://storage.jd.com/taro-resource/cases/image29.jpeg',
    },
    {
      name: 'uCourse',
      url: 'http://storage.jd.com/taro-resource/cases/image9.jpeg',
    },
    {
      name: '作业部落',
      url: 'http://storage.jd.com/taro-resource/cases/image7.jpeg',
    },
    {
      name: '开始喝茶',
      url: 'http://storage.jd.com/taro-resource/cases/image10.jpeg',
    },
    {
      name: '多肉宝宝',
      url: 'http://storage.jd.com/taro-resource/cases/image11.jpeg',
    },
    {
      name: '工资算一算',
      url: 'http://storage.jd.com/taro-resource/cases/image12.jpeg',
    },
    {
      name: '精巧待办事项',
      url: 'http://storage.jd.com/taro-resource/cases/image13.jpeg',
    },
    {
      name: '君博教育',
      url: 'http://storage.jd.com/taro-resource/cases/image24.jpeg',
    },
    {
      name: '吉珠小助手',
      url: 'http://storage.jd.com/taro-resource/cases/image28.jpeg',
    },
    {
      name: '掌 buy',
      url: 'http://storage.jd.com/taro-resource/cases/image14.jpeg',
    },
    {
      name: '脑洞阅读',
      url: 'http://storage.jd.com/taro-resource/cases/image3.jpeg',
    },
    {
      name: '指尖推',
      url: 'http://storage.jd.com/taro-resource/cases/image1.png',
    },
    {
      name: '良乌深触',
      url: 'http://storage.jd.com/taro-resource/cases/image17.jpeg',
    },
    {
      name: '猫眼试用',
      url: 'http://storage.jd.com/taro-resource/cases/maoyan.png',
    },
    {
      name: '新笑傲福利站',
      url: 'http://storage.jd.com/taro-resource/cases/image21.jpeg',
    },
    {
      name: '万邦法务',
      url: 'http://storage.jd.com/taro-resource/cases/image25.jpeg',
    },
    {
      name: '我要个性',
      url: 'http://storage.jd.com/taro-resource/cases/image27.jpeg',
    },
    {
      name: '时装衣橱',
      url: 'http://storage.jd.com/taro-resource/cases/image22.jpeg',
    },
    {
      name: '税扣扣',
      url: 'http://storage.jd.com/taro-resource/cases/image26.jpeg',
    },
    {
      name: '小来打卡 Pro',
      url: 'http://storage.jd.com/taro-resource/cases/image5.jpeg',
    },
    {
      name: '精雀赛事',
      url: 'http://storage.jd.com/taro-resource/cases/image31.jpeg',
    },
    {
      name: '车轮社区',
      url: 'http://storage.jd.com/taro-resource/cases/image32.jpeg',
    },
    {
      name: '斗店',
      url: 'http://storage.jd.com/taro-resource/cases/image33.jpeg',
    },
    {
      name: '低碳打卡',
      url: 'http://storage.jd.com/taro-resource/cases/image34.jpeg',
    },
    {
      name: '优投房',
      url: 'http://storage.jd.com/taro-resource/cases/image35.jpeg',
    },
    {
      name: '湖人赛程',
      url: 'http://storage.jd.com/taro-resource/cases/image30.jpeg',
    },
    {
      name: '印象分',
      url: 'http://storage.jd.com/taro-resource/cases/image19.jpeg',
    },
    {
      name: '秀设计',
      url: 'http://storage.jd.com/taro-resource/cases/image15.jpeg',
    },
    {
      name: '戒烟助理',
      url: 'https://github.com/hugetiny/quit-smoking/raw/master/weappcode.jpg',
    },
    {
      name: '酒桌gameing',
      url:
        'https://raw.githubusercontent.com/YTU94/taro-weapp/master/static/QQ20190718-0.png',
    },
    {
      name: '赛后',
      url:
        'https://user-images.githubusercontent.com/3993655/50722899-28e93880-1111-11e9-8647-3761b59926a1.jpg',
    },
    {
      name: 'Gitter',
      url:
        'https://user-images.githubusercontent.com/8692455/51429898-b159f400-1c4e-11e9-91a1-59cd1fab5042.png',
    },
    {
      name: '前端小助手',
      url:
        'https://user-images.githubusercontent.com/8676711/51724267-84b33b80-2097-11e9-98ed-b4cf94aacb5b.jpg',
    },
    {
      name: '尾巴生活',
      url:
        'https://user-images.githubusercontent.com/25095653/51814579-ecb38d00-22f6-11e9-8b45-9f3505baace6.jpg',
    },
    {
      name: '时时慢',
      url:
        'https://user-images.githubusercontent.com/1301338/51829422-73cd2900-2328-11e9-9a8f-443d9c1eff15.jpg',
    },
    {
      name: '最佳专辑',
      url:
        'https://user-images.githubusercontent.com/1298241/51992353-cdc81d00-24e7-11e9-98ea-17f32aa873cb.jpg',
    },
    {
      name: 'Unsplash',
      url:
        'https://user-images.githubusercontent.com/18414813/52836944-b152f400-3127-11e9-8891-db950c3e7c85.jpeg',
    },
    {
      name: '爱享到',
      url:
        'https://user-images.githubusercontent.com/14814560/52850000-63e97d80-314d-11e9-8e03-57e15d17900d.jpg',
    },
    {
      name: 'Giteer',
      url:
        'https://user-images.githubusercontent.com/13462780/53848985-5a875e80-3ff1-11e9-836b-10d3d07658db.jpg',
    },
    {
      name: '剪刀侠',
      url:
        'https://user-images.githubusercontent.com/7202516/57500122-b2ee1b80-7314-11e9-9fda-e6e6f44b9230.png',
    },
    {
      name: 'AE-EDIT',
      url:
        'https://user-images.githubusercontent.com/24741025/53931673-25ead400-40d1-11e9-84f5-4e217dfc9f4f.jpg',
    },
    {
      name: 'Natsuha Weather',
      url:
        'https://user-images.githubusercontent.com/7202516/57504280-73c8c600-7326-11e9-896f-733991ac58d2.jpg',
    },
    {
      name: '备案查询助手',
      url:
        'https://user-images.githubusercontent.com/25195267/54258064-65fffa00-459c-11e9-9cc2-4ff4e6dba973.jpg',
    },
    {
      name: '钢琴轻音乐曲谱',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%A0%81.jpg',
    },
    {
      name: '启东实时公交',
      url:
        'https://user-images.githubusercontent.com/7202516/57913946-42b93a00-78c0-11e9-862b-a732eb28a179.jpeg',
    },
    {
      name: '动态密码验证',
      url:
        'https://camo.githubusercontent.com/6127c7c6c0fd2801ba1fa5557eafebbb7c5ca206/68747470733a2f2f692e6c6f6c692e6e65742f323031392f30332f32322f356339343730643364636137302e6a7067',
    },
    {
      name: '距离多远',
      url:
        'https://user-images.githubusercontent.com/6435874/54963306-422cb300-4fa3-11e9-8c0c-bde74cd43833.png',
    },
    {
      name: '业之峰装饰',
      url: 'https://yenova-bucket1.oss-cn-qingdao.aliyuncs.com/2019/yzfxcx.png',
    },
    {
      name: '魔方9号楼',
      url:
        'https://user-images.githubusercontent.com/7202516/57462386-560a4b00-72ab-11e9-903e-c449ab9d1c25.jpg',
    },
    {
      name: '小地铁通',
      url:
        'https://user-images.githubusercontent.com/7202516/57452352-26047d00-7296-11e9-9ead-08737c540ea0.jpg',
    },
    {
      name: '马卡龙玩图',
      url:
        'https://static01.versa-ai.com/upload/09e8ff91612b/37f5a990-6037-4ebf-a3c8-ae38b0b07270.jpg',
    },
    {
      name: '酸壁纸',
      url:
        'https://user-images.githubusercontent.com/7885757/56015407-8e118300-5d2b-11e9-87ae-003589cb5069.jpg',
    },
    {
      name: '报考管家',
      url:
        'https://user-images.githubusercontent.com/20960902/55077973-02b1b400-50d4-11e9-8023-d33edd936dfe.jpg',
    },
    {
      name: '奇妙壁纸',
      url:
        'https://user-images.githubusercontent.com/36564529/55272719-b9dc4400-52fb-11e9-8efd-853941474a4b.png',
    },
    {
      name: '集客商城',
      url:
        'https://user-images.githubusercontent.com/2168473/56793629-0190b580-683f-11e9-8cdb-f540d941a4bf.png',
    },
    {
      name: '拼多多卷商',
      url:
        'https://user-images.githubusercontent.com/2168473/56793746-43216080-683f-11e9-926d-e456ed648550.png',
    },
    {
      name: '题多多搜题',
      url:
        'https://user-images.githubusercontent.com/16409424/56859246-a4ba0a00-69ba-11e9-9941-d43e3cdebef0.png',
    },
    {
      name: 'Koopa',
      url:
        'https://user-images.githubusercontent.com/13031838/57196074-e4b95800-6f8b-11e9-9a61-3bcdd45c2062.jpg',
    },
    {
      name: '激似',
      url:
        'https://user-images.githubusercontent.com/7518455/57525808-4ac42780-735e-11e9-8955-f163775168b0.jpg',
    },
    {
      name: '豆豆菜谱',
      url:
        'https://user-images.githubusercontent.com/7202516/57913059-5b285500-78be-11e9-9b05-97f6e567f7c8.jpeg',
    },
    {
      name: '你头像真棒',
      url:
        'https://user-images.githubusercontent.com/31771183/57899485-d1fa2980-788f-11e9-923c-9af4ab2e3854.jpg',
    },
    {
      name: '听一听',
      url:
        'https://user-images.githubusercontent.com/127009/57964828-312e6b80-796e-11e9-9401-eb98405dd0de.jpg',
    },
    {
      name: '宝宝乐学',
      url:
        'https://user-images.githubusercontent.com/5229158/57964786-cbda7a80-796d-11e9-8369-d914f5a8d4ff.jpg',
    },
    {
      name: '贝壳学堂',
      url:
        'https://user-images.githubusercontent.com/18849626/57982872-8e651280-7a7d-11e9-9b78-dd6136d63248.png',
    },
    {
      name: 'SteamCN',
      url:
        'https://user-images.githubusercontent.com/9652227/58032363-08b49600-7b55-11e9-9d0f-469fbdf88ad3.png',
    },
    {
      name: '学伴',
      url:
        'https://user-images.githubusercontent.com/7202516/58466803-03ff6b80-816d-11e9-8afd-f56bdff5a60a.jpg',
    },
    {
      name: 'NBA数据统计',
      url:
        'https://user-images.githubusercontent.com/3993655/58761178-d43cd300-8573-11e9-9066-c05fc7452457.png',
    },
    {
      name: '创业问',
      url:
        'https://user-images.githubusercontent.com/7202516/58928098-b940ad80-8783-11e9-91e3-f2c2d1359f91.jpg',
    },
    {
      name: '种子备忘录',
      url:
        'https://raw.githubusercontent.com/wxingheng/example/master/images/todo_list.png',
    },
    {
      name: '程序员英语',
      url:
        'https://user-images.githubusercontent.com/7202516/59607522-0fc7c780-9146-11e9-8753-ea9f80d3021a.jpg',
    },
    {
      name: '电商零售案例',
      url:
        'https://github.com/IooBot/taro-shop-graphql/raw/master/screenshots/ecommerce_xcx.jpg',
    },
    {
      name: '数字酋长客服',
      url:
        'https://user-images.githubusercontent.com/7202516/59986775-c0642880-966a-11e9-83d9-79f66087d1f2.jpg',
    },
    {
      name: '麦德龙到家',
      url:
        'https://user-images.githubusercontent.com/9426456/60314192-5a421300-9994-11e9-9448-a0806a975263.jpg',
    },
    {
      name: '天宝国际航服',
      url:
        'https://raw.githubusercontent.com/TigerHee/taro-init/master/src/assets/img/xcx.jpg',
    },
    {
      name: '弦弹格格',
      url:
        'https://dev.tencent.com/u/bizbetter/p/appresource/git/raw/master/images/appimg/mychords/ads/qr_green.jpg',
    },
    {
      name: '最美退役军人',
      url:
        'https://cache-1256738511.cos.ap-chengdu.myqcloud.com/images/vote.jpg',
    },
    {
      name: '赫兹品牌服务',
      url:
        'https://cache-1256738511.cos.ap-chengdu.myqcloud.com/images/hotel.jpg',
    },
    {
      name: '幻熊科技',
      url:
        'https://user-images.githubusercontent.com/7202516/64671021-b7c90480-d499-11e9-83af-007a428d57ca.jpg',
    },
    {
      name: '表情包自制大师',
      url:
        'https://blog-1254147258.cos.ap-guangzhou.myqcloud.com/ercode/wechat.jpg',
    },
    {
      name: 'Astron',
      url:
        'https://github.com/jevonsofcode/Astron/raw/master/READMESOURCE/qrcode.jpg',
    },
    {
      name: '智科车联',
      url: 'http://itink.com.cn/assets/weapp/itink.jpg',
    },
    {
      name: '袋小鼠爱编程',
      url: 'https://www.tdreamer.com/images/codekidtop/weixin_mp_qrcode.jpg',
    },
    {
      name: '古典音乐品鉴',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/weapp.jpg',
    },
    {
      name: '睿推客',
      url: 'https://wx.ryuntech.com/upload/20190911184122.jpg',
    },
    {
      name: '四六级管家',
      url:
        'https://user-images.githubusercontent.com/7202516/66696220-965b7280-ecfc-11e9-8b09-171dd4700c5a.jpg',
    },
    {
      name: '剃头推子',
      url:
        'https://user-images.githubusercontent.com/7202516/66696219-965b7280-ecfc-11e9-9f4e-dc312afbe7ab.jpg',
    },
    {
      name: '给我去水印',
      url:
        'https://user-images.githubusercontent.com/3080820/68095428-83475700-fee4-11e9-80f5-f985d516baaf.jpg',
    },
    {
      name: '军运小助手',
      url:
        'https://user-images.githubusercontent.com/9426456/66698390-45ee1000-ed10-11e9-826e-310cf96f7ed8.jpg',
    },
    {
      name: 'AI导诊',
      url:
        'https://user-images.githubusercontent.com/3080820/66974069-8fea4380-f0cc-11e9-8a7b-e95a5b7c34d4.png',
    },
    {
      name: 'AI预诊',
      url:
        'https://user-images.githubusercontent.com/3080820/66974120-bb6d2e00-f0cc-11e9-8e9c-113ab77d94a8.png',
    },
    {
      name: '郑州长途客运',
      url:
        'https://user-images.githubusercontent.com/23094123/68311776-02a77700-00ed-11ea-805c-5927e944abe3.JPG',
    },
    {
      name: '龙湖冠寓租房',
      url:
        'https://user-images.githubusercontent.com/3080820/68370238-fd8f0a00-0176-11ea-8a2b-32bea244bc35.jpg',
    },
    {
      name: '甩甩宝宝',
      url:
        'https://camo.githubusercontent.com/8f0cec6cae8b210c496239f731f0598d0afd5390/68747470733a2f2f77782e73716d69616f3030312e636f6d2f6173737365742f7a7567616e672f62616f62616f2f636f64655f68352e6a7067',
    },
    {
      name: '微赛通',
      url:
        'https://user-images.githubusercontent.com/3080820/69857235-742cac80-12ca-11ea-8f66-dadbc06f2ec7.jpg',
    },
    {
      name: '美餐',
      url:
        'https://camo.githubusercontent.com/aa8cd4985a4d2d73692c42ffc40bc1276a50805a/68747470733a2f2f7777772e6d656963616e7374617469632e636f6d2f7374612f66652f6d656963616e2d6170702f6d656963616e2d6d702f696d616765732f6d70636f64652e6a7067',
    },
    {
      name: '画线九宫格',
      url:
        'https://user-images.githubusercontent.com/3080820/72341163-8a6cbb80-3704-11ea-89ea-ac3749825ad0.jpg',
    },
    {
      name: '极速打车',
      url:
        'https://user-images.githubusercontent.com/9129438/72401422-eaa44180-3786-11ea-84e5-dc86939c2d11.jpg',
    },
    {
      name: '掌上高铁',
      url:
        'https://user-images.githubusercontent.com/9129438/72402071-ee38c800-3788-11ea-9b35-b3b8ea721dfc.png',
    },
    {
      name: '上海虹桥站',
      url:
        'https://user-images.githubusercontent.com/9129438/72402129-293afb80-3789-11ea-9640-54993d1012dd.jpg',
    },
    {
      name: '文件解压工具',
      url:
        'https://user-images.githubusercontent.com/7518455/77147522-5657a300-6a85-11ea-9006-8e1f5657db24.jpg',
    },
    {
      name: '神马排队 云上排号排队预约专家',
      url:
        'https://user-images.githubusercontent.com/3080820/77616715-43edd580-6f6d-11ea-9672-d63dd33eef44.jpg',
    },
    {
      name: '辅助小能手',
      url:
        'https://user-images.githubusercontent.com/3080820/78114236-8747b880-7433-11ea-83f3-07c2b5b1cda6.jpg',
    },
    {
      name: '光速超跑',
      url:
        'https://user-images.githubusercontent.com/3080820/78113598-8f532880-7432-11ea-9858-434b20bf7407.jpg',
    },
    {
      name: '58同城新房楼盘精选',
      url:
        'https://pic7.58cdn.com.cn/nowater/fangfe/n_v2e796d3ef187743b092d31a41d619ebb8.jpg',
    },
    {
      name: '安居客新房楼盘精选',
      url:
        'https://pic1.58cdn.com.cn/nowater/fangfe/n_v23b727496a84c4dcb831900db0abc3e74.jpg',
    },
    {
      name: '我的衡师',
      url:
        'https://user-images.githubusercontent.com/3080820/78109823-94ad7480-742c-11ea-9c8b-8a685fbde983.jpg',
    },
    {
      name: '谁来做家务',
      url:
        'https://user-images.githubusercontent.com/3080820/78957925-3a41a180-7b19-11ea-82f6-8fc9c078fd1d.jpg',
    },
    {
      name: '美菜商城',
      url:
        'https://user-images.githubusercontent.com/3080820/78957569-45480200-7b18-11ea-8760-002c5eb8ac0b.jpg',
    },
    {
      name: '红口袋',
      url: 'http://img.maigang360.com/Bcode/appCode/1586760742875.png',
    },
    {
      name: '趣扫云商户通',
      url:
        'https://user-images.githubusercontent.com/3080820/80064006-b6040b00-8569-11ea-9d77-53b8e8257abc.jpg',
    },
    {
      name: '轻点名片',
      url:
        'https://user-images.githubusercontent.com/25032899/81496991-29d63f80-92ee-11ea-888f-b9e9ad7ab990.jpg',
    },
    {
      name: '智能票据夹',
      url:
        'https://user-images.githubusercontent.com/37186113/82115675-df920a00-9796-11ea-85d7-03358d78af92.jpg',
    },
  ],
  H5: [
    {
      name: '袋小鼠爱编程',
      url: 'https://www.tdreamer.com/images/codekidtop/h5_web_qrcode.png',
    },
    {
      name: '作业部落',
      url:
        'https://user-images.githubusercontent.com/7202516/57504894-efc40d80-7328-11e9-9414-518c5b20e301.png',
    },
    {
      name: '猫眼电影',
      url:
        'https://user-images.githubusercontent.com/15929863/43410114-6ba5ae00-9458-11e8-8f2a-e2ab9d8c4141.png',
    },
    {
      name: '指尖推',
      url: 'http://storage.jd.com/taro-resource/cases/zhijian_h5.png',
    },
    {
      name: '时装衣橱',
      url:
        'https://github.com/EasyTuan/taro-msparis/raw/master/screenshots/qr-code.png',
    },
    {
      name: '仿网易严选',
      url:
        'https://camo.githubusercontent.com/b0f85f75689c94ebf935d1d924d73f381153277e/68747470733a2f2f7169742d7465616d2e6769746875622e696f2f7075626c69632f696d616765732f7461726f2d79616e7875616e2f68352d71722d636f64652e706e67',
    },
    {
      name: '淘宝卷商',
      url:
        'https://user-images.githubusercontent.com/2168473/56794061-f68a5500-683f-11e9-90ba-32e878dca9c3.png',
    },
    {
      name: '报考管家',
      url:
        'https://user-images.githubusercontent.com/20960902/55078112-53291180-50d4-11e9-8876-21a270fec3f1.png',
    },
    {
      name: '学伴',
      url:
        'https://user-images.githubusercontent.com/7202516/58466807-06fa5c00-816d-11e9-81ec-9be385d8a4d1.png',
    },
    {
      name: '每日好心情',
      url:
        'https://user-images.githubusercontent.com/7972688/64514458-3cdadf00-d31d-11e9-8494-4262c6d4d565.jpg',
    },
    {
      name: '极速打车',
      url:
        'https://user-images.githubusercontent.com/9129438/72401533-3bb43580-3787-11ea-8b34-f35f7c2d8d04.png',
    },
  ],
  支付宝小程序: [
    {
      name: '时光简纸',
      url:
        'https://user-images.githubusercontent.com/30850497/52847223-8deb7180-3146-11e9-90f4-e668233284f9.jpg',
    },
    {
      name: '爱享到',
      url:
        'https://user-images.githubusercontent.com/14814560/52850049-84193c80-314d-11e9-8048-e4b48edeadf1.png',
    },
    {
      name: '趣叨叨古典音乐',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/alipay.jpg',
    },
    {
      name: '货拉拉',
      url:
        'https://raw.githubusercontent.com/Andrewuetyang/pics/master/hll_alipay_mp.png',
    },
    {
      name: '神马排队',
      url:
        'https://user-images.githubusercontent.com/3080820/77616874-b78fe280-6f6d-11ea-98f6-336dc2a222e2.jpg',
    },
    {
      name: '美菜商城',
      url:
        'https://user-images.githubusercontent.com/3080820/78957586-51cc5a80-7b18-11ea-8994-3f2ef8300ce1.jpg',
    },
    {
      name: '趣扫云商户通',
      url:
        'https://user-images.githubusercontent.com/3080820/80064021-bc928280-8569-11ea-8ebb-48bed3ab7ab4.png',
    },
  ],
  百度智能小程序: [
    {
      name: '京东好物街',
      url: 'http://storage.jd.com/taro-resource/cases/haowujie.png',
    },
    {
      name: '启信宝',
      url:
        'https://user-images.githubusercontent.com/38108442/54411078-fcf9bd00-4728-11e9-9e4d-c61f6ff43f86.png',
    },
    {
      name: '业之峰装饰集团',
      url:
        'https://yenova-bucket1.oss-cn-qingdao.aliyuncs.com/2019/yzfbdxcx.png',
    },
    {
      name: '钢琴轻音乐曲谱',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/baidu_miniprogram.png',
    },
    {
      name: '柠檬爱美',
      url:
        'https://user-images.githubusercontent.com/7202516/57913062-60859f80-78be-11e9-9eeb-4543d17f5218.png',
    },
    {
      name: '袋小鼠爱编程',
      url: 'https://www.tdreamer.com/images/codekidtop/swan_mp_qrcode.jpg',
    },
    {
      name: '淘票票',
      url: 'https://img.alicdn.com/tfs/TB19p4xiBr0gK0jSZFnXXbRRXXa-150-150.png',
    },
    {
      name: '趣叨叨古典音乐',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/swan.png',
    },
    {
      name: '画线九宫格',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/draw9/swan.png',
    },
  ],
  移动端应用: [
    {
      name: '袋小鼠爱编程',
      url: 'https://www.tdreamer.com/images/codekidtop/ios_app_qrcode.jpg',
    },
    {
      name: '仿网易严选',
      url:
        'https://qr.api.cli.im/qr?data=https%253A%252F%252Fsnack.expo.io%252F%2540caiminxing%252Ftaro-yanxuan&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=ad14cc9c74800daec783744be81d68d8',
    },
  ],
  QQ小程序: [
    {
      name: '袋小鼠爱编程',
      url: 'https://www.tdreamer.com/images/codekidtop/qq_mp_qrcode.jpg',
    },
    {
      name: '表情包大师',
      url:
        'https://blog-1254147258.cos.ap-guangzhou.myqcloud.com/ercode/QQ.png',
    },
    {
      name: '古典音乐品鉴',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/qq.png',
    },
    {
      name: '四六级管家',
      url:
        'https://user-images.githubusercontent.com/7202516/66696217-95c2dc00-ecfc-11e9-99cd-ae06ad08654e.png',
    },
    {
      name: '剃头推子',
      url:
        'https://user-images.githubusercontent.com/7202516/66696218-95c2dc00-ecfc-11e9-98a6-dad868590c79.png',
    },
    {
      name: '给我去水印',
      url:
        'https://user-images.githubusercontent.com/3080820/68095430-86424780-fee4-11e9-8882-95f7a3f45dee.png',
    },
    {
      name: '画线九宫格',
      url:
        'https://user-images.githubusercontent.com/3080820/72341326-e5061780-3704-11ea-8434-8a9ff0e01399.png',
    },
    {
      name: '极速打车',
      url:
        'https://user-images.githubusercontent.com/9129438/72401497-2939fc00-3787-11ea-8697-53f8e9f9ea6c.png',
    },
    {
      name: 'iLove',
      url:
        'https://user-images.githubusercontent.com/26370198/83001601-94051900-a03e-11ea-8801-1e51ba29f811.jpg',
    },
  ],
  字节跳动小程序: [
    {
      name: '袋小鼠爱编程',
      url: 'https://www.tdreamer.com/images/codekidtop/tt_mp_qrcode.jpg',
    },
    {
      name: '淘票票',
      url: 'https://img.alicdn.com/tfs/TB1qxXripY7gK0jSZKzXXaikpXa-150-150.png',
    },
    {
      name: '古典音乐品鉴',
      url:
        'https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/tt.jpg',
    },
    {
      name: '老照片修复工具',
      url: 'https://lzp.tianhuichang.xyz/mp_qr_code.jpg',
    },
  ],
};

function chunkArray(ary) {
  const tempAry = [];
  const MAX_COLUMN = 8;
  for (let i = 0; i < ary.length; i += MAX_COLUMN) {
    tempAry.push(ary.slice(i, i + MAX_COLUMN));
  }
  if (tempAry[0].length < MAX_COLUMN) {
    tempAry[0].push(...Array(MAX_COLUMN - tempAry[0].length).fill({}));
  }
  return tempAry;
}

function renderCases(cases) {
  var navhtml = Object.keys(cases)
    .map((key) => {
      return `<a href='#${key}'>${key}<span>(${cases[key].length})</span></a>`;
    })
    .join('');
  navhtml = `<div class='grid_c1 app_nav'>${navhtml}</div>`;

  var casehtml = Object.keys(cases)
    .map((key) => {
      return `
      <h2 id=${key}>${key}</h2>
      <table
        border="0"
        cellpadding="0"
        cellspacing="0"
      >
      <tbody>
        ${renderTr(cases[key])}
      </tbody>
      </table>
    `;
    })
    .join('');
  return navhtml + casehtml;
}

function renderTr(arr) {
  return chunkArray(arr)
    .map((a) => {
      return `<tr>
        ${a
          .map((o) => {
            return `<td align="center">
                  <img class="${
                    o.url ? '' : 'hidden'
                  }" height="80" width="80" src="${o.url}" />
                  <p class="${o.url ? '' : 'hidden'}">${o.name}</p>
                </td>`;
          })
          .join('')}
      </tr>
    `;
    })
    .join('');
}

document.getElementById('app').innerHTML = renderCases(userCases);