SOURCE

const data = [
["5A-rated tourist attraction","/faɪv eɪ reɪtɪd/","5A级风景名胜区"],
["architecture","/ˈɑːkɪtektʃə(r)/","建筑物"],
["artifact","/ˈɑːtɪfækt/","手工艺品，古器物"],
["boulder","/ˈbəʊldə(r)/","经风雨侵蚀的巨石"],
["bumper earning","/ˈbʌmpə ɜːnɪŋ/","巨额盈利"],
["capacity","/kəˈpæsəti/","容量，吞吐量"],
["cash in","/kæʃ ɪn/","获得利润，兑换现金"],
["clan","/klæn/","家族，氏族"],
["conception","/kənˈsepʃn/","观念，概念"],
["connotation","/ˌkɒnəˈteɪʃn/","隐含意义，内涵"],
["conserve","/kənˈsɜːv/","保护，节约"],
["debut tour","/ˈdeɪbjuː tʊə(r)/","首发团，首次出访"],
["diameter","/daɪˈæmɪtə(r)/","直径"],
["expressway","/ɪkˈspresweɪ/","高速公路"],
["extrasensory","/ˌekstrəˈsensəri/","超感官的"],
["feature sth.","/ˈfiːtʃə(r)/","以...为特征"],
["geological structure","/ˌdʒiːəˈlɒdʒɪkl/","地质构造"],
["grotesque","/ɡrəʊˈtesk/","奇异怪状的"],
["Hong Kong-Zhuhai-Macao Bridge","/brɪdʒ/","港珠澳大桥"],
["imposing","/ɪmˈpəʊzɪŋ/","雄伟壮观的"],
["impressionistic","/ɪmˌpreʃəˈnɪstɪk/","印象派的"],
["in full swing","/ɪn fʊl swɪŋ/","全力开展，火热进行"],
["intact","/ɪnˈtækt/","完好无损的"],
["interconnecting","/ˌɪntəkəˈnektɪŋ/","纵横交错的"],
["landform","/ˈlændfɔːm/","地貌"],
["marshal","/ˈmɑːʃl/","元帅"],
["martyr","/ˈmɑːtə(r)/","烈士"],
["one-hour traffic circle","/ˈsɜːkl/","一小时生活圈"],
["oriental","/ˌɔːriˈentl/","东方的"],
["pagoda","/pəˈɡəʊdə/","宝塔"],
["Peking Man","/ˌpiːˈkɪŋ mæn/","北京人"],
["precipice","/ˈpresəpɪs/","悬崖"],
["quartz sandstone peak forest","/kwɔːts ˈsændstəʊn/","石英砂岩峰林地貌"],
["residential","/ˌrezɪˈdenʃl/","住宅的"],
["revenge holiday","/rɪˈvendʒ/","报复性度假"],
["revolutionary base","/ˌrevəˈluːʃənəri/","革命根据地"],
["revolution-themed tourism","/ˈtʊərɪzəm/","红色旅游"],
["routine","/ruːˈtiːn/","常规的，惯例"],
["Sangzhi Folk Songs","/sɒŋz/","桑植民歌"],
["Second Front Red Army","/ˈɑːmi/","红军第二方面军"],
["skydiving","/ˈskaɪdaɪvɪŋ/","跳伞运动"],
["solar energy","/ˈsəʊlə ˈenədʒi/","太阳能"],
["splurge on sth.","/splɜːdʒ/","挥霍"],
["Terracotta Warrior","/ˌterəˈkɒtə/","兵马俑"],
["the preceding year","/prɪˈsiːdɪŋ/","去年"],
["tip","/tɪp/","给小孩"],
["unearth","/ʌnˈɜːθ/","出土"],
["UNESCO List of World Heritage Sites","/juːˈneskəʊ/","世界遗产名录"],
["UNICEF","/ˈjuːnɪsef/","联合国儿童基金会"],
["virgin land","/ˈvɜːdʒɪn/","处女地"],
["Zhangjiajie National Forest Park","/dʒɑːŋ dʒiə dʒie/","张家界国家森林公园"],
["zipline","/ˈzaɪplaɪn/","滑索"],
["allergic","/əˈlɜːdʒɪk/","过敏的"],
["amusement park","/əˈmjuːzmənt/","游乐园"],
["an array of","/əˈreɪ/","一大批，一系列"],
["Bay Area","/ˈbeɪ ˈeəriə/","（旧金山）湾区"],
["broth","/brɒθ/","高汤，浓汤"],
["carnival","/ˈkɑːnɪvl/","嘉年华"],
["chef","/ʃef/","厨师长"],
["Chinese Valentine's Day","/ˈvæləntaɪnz/","七夕"],
["condiment","/ˈkɒndɪmənt/","作料，调味品"],
["cookery","/ˈkʊkəri/","烹饪"],
["crispy","/ˈkrɪspi/","酥脆的"],
["cuisine","/kwɪˈziːn/","烹饪，烹调"],
["culinary","/ˈkʌlɪnəri/","烹饪的"],
["delicacy","/ˈdelɪkəsi/","珍馐，佳肴"],
["dim sum","/ˌdɪm ˈsʌm/","点心"],
["dressy","/ˈdresi/","衣着考究的，盛装的"],
["eight-set Beijing style pastries","/ˈpeɪstriz/","京八件"],
["gastronomic","/ˌɡæstrəˈnɒmɪk/","烹饪的，美食的"],
["ginger","/ˈdʒɪndʒə(r)/","姜"],
["greasy","/ˈɡriːsi/","油腻的"],
["international exposition","/ˌekspəʊˈzɪʃn/","国际博览会"],
["knockout","/ˈnɒkaʊt/","令人印象深刻的"],
["morsel","/ˈmɔːsl/","少量，一小块"],
["nutrition","/njuˈtrɪʃn/","营养"],
["pancake","/ˈpænkeɪk/","薄煎饼"],
["preeminent","/priˈemɪnənt/","卓越的"],
["scallion","/ˈskæliən/","大葱"],
["simmer","/ˈsɪmə(r)/","煨制"],
["sodium","/ˈsəʊdiəm/","钠"],
["spout","/spaʊt/","茶壶嘴"],
["steam","/stiːm/","蒸"],
["stir-fried beef with broccoli","/ˈbrɒkəli/","芥蓝牛肉"],
["street food","/striːt fuːd/","街头美食"],
["sweet and sour spare ribs","/rɪbz/","糖醋排骨"],
["table manners","/ˈmænəz/","餐桌礼仪"],
["tonic properties","/ˈprɒpətiz/","滋补功效"],
["trace back to","/treɪs/","追溯"],
["tree fungus","/ˈfʌŋɡəs/","木耳"],
["variable","/ˈveəriəbl/","变量"],
["variation","/ˌveəriˈeɪʃn/","变化，变异"],
["vermicelli","/ˌvɜːmɪˈtʃeli/","意大利细面条"],
["business association","/əˌsəʊsiˈeɪʃn/","商业协会"],
["CABIS","/ˈkeɪbɪs/","中国-东盟商务与投资峰会"],
["CAEXPO","/ˌkeɪekspəʊ/","中国-东盟博览会"],
["CCPIT","/siː siː piː ˈtiː/","中国国际贸易促进委员会"],
["CES","/siː iː es/","美国国际消费电子展"],
["CIIE","/siː aɪ aɪ ˈiː/","中国国际进口博览会"],
["CISMEF","/ˈsɪzmef/","中国国际中小企业博览会"],
["consumer electronics","/ɪˌlekˈtrɒnɪks/","消费电子产品"],
["distribution","/ˌdɪstrɪˈbjuːʃn/","分销"],
["Dubai Airshow","/duː ˈbaɪ/","迪拜航展"],
["exposition","/ˌekspəʊˈzɪʃn/","博览会，展览会"],
["fabric","/ˈfæbrɪk/","面料"],
["Flora Exposition","/ˈflɔːrə/","花博会"],
["framework agreement","/ˈfreɪmwɜːk/","框架协议"],
["FTA","/ˌef tiː ˈeɪ/","自由贸易区"],
["generative AI","/ˈdʒenərətɪv/","生成式人工智能"],
["GTAI","/ˌdʒiː tiː eɪ ˈaɪ/","德国联邦外贸与投资署"],
["guest of honor","/ɡest əv ˈɒnə(r)/","主宾国"],
["HKTDC","/ˌeɪtʃ keɪ tiː diː siː/","香港贸易发展局"],
["Informa Markets","/ɪnˈfɔːmə/","亚洲英富曼会展"],
["innovation and entrepreneurship","/ˌɪnəˈveɪʃn/","创业创新示范基地"],
["intermediary agent","/ˌɪntəˈmiːdiəri/","中介服务组织"],
["investment and financing institution","/ɪnˈvestmənt/","投融资机构"],
["Law of the People's Republic of China","/ˈpiːplz rɪˈpʌblɪk/","中华人民共和国中小企业促进法"],
["light apparel","/əˈpærəl/","轻便服饰"],
["memorandum","/ˌmeməˈrændəm/","备忘录"],
["MICE","/maɪs/","会展旅游"],
["MIIT","/ˌem aɪ aɪ ˈtiː/","工信部"],
["MOFCOM","/ˈmɒfkəm/","商务部"],
["MSME","/ˌem es em ˈiː/","中小微企"],
["RCEP","/ˌɑː siː iː ˈpiː/","区域全面经济伙伴关系协定"],
["sophisticated technology","/səˈfɪstɪkeɪtɪd/","精密技术"],
["southern hemisphere","/ˈsʌðən ˈhemɪsfɪə(r)/","南半球"],
["sports goods","/spɔːts ɡʊdz/","体育用品"],
["state-of-the-art","/ˌsteɪt əv ði ˈɑːt/","先进的"],
["strategic investor","/strəˈtiːdʒɪk/","战略投资商"],
["trade barrier","/ˈbæriə(r)/","贸易壁垒"],
["trade facilitation","/fəˌsɪlɪˈteɪʃn/","贸易便利化"],
["venue","/ˈvenjuː/","会址"],
["bargain","/ˈbɑːɡən/","讨价还价，议价"],
["capital chain","/ˈkæpɪtl tʃeɪn/","资金链"],
["cash flow","/kæʃ fləʊ/","现金流"],
["close a deal/strike a bargain","/kləʊz ə diːl/","成交"],
["compromise/meet halfway","/ˈkɒmprəmaɪz/","折中"],
["concession","/kənˈseʃn/","让步"],
["counteroffer","/ˈkaʊntərɒfə(r)/","还价，还盘"],
["cost price","/kɒst praɪs/","成本价"],
["deposit/advance payment","/dɪˈpɒzɪt/","定金"],
["CIF","/siː aɪ ˈef/","成本、保险费加运费，到岸价"],
["containerized goods","/kənˈteɪnəraɪzd/","集装箱货物"],
["D/A","/diː eɪ/","承兑交单"],
["discount","/ˈdɪskaʊnt/","折扣"],
["floor offer","/flɔː ˈɒfə(r)/","最低报价，底盘"],
["FOB","/ˌef əʊ ˈbiː/","装运港船上交货，离岸价"],
["freight","/freɪt/","运费"],
["goodwill","/ˌɡʊdˈwɪl/","商誉，信誉"],
["inquiry","/ɪnˈkwaɪəri/","询盘"],
["inventory/stock","/ˈɪnvəntri/","库存"],
["irrevocable L/C","/ɪˈrevəkəbl/","不可撤销信用证"],
["L/C at sight","/el siː ət saɪt/","即期信用证"],
["L/C 60 days after sight","/ˈsɪksti deɪz/","见票后60天付款信用证"],
["lead time","/liːd taɪm/","制造周期，交货时间"],
["OEM","/ˌəʊ iː ˈem/","原始设备生产商"],
["offer","/ˈɒfə(r)/","报盘，发盘"],
["price ceiling","/praɪs ˈsiːlɪŋ/","价格上限"],
["price-performance ratio","/pəˈfɔːməns ˈreɪʃiəʊ/","性价比"],
["purchasing contract","/ˈpɜːtʃəsɪŋ/","购买合同"],
["quote","/kwəʊt/","报价"],
["sample","/ˈsɑːmpl/","样品"],
["sourcing/procuring","/ˈsɔːsɪŋ/","采购"],
["subject to market fluctuation","/ˈsʌbdʒɪkt/","随市场波动"],
["T/T","/tiː tiː/","电汇"],
["cover","/ˈkʌvə(r)/","喜欢，喜爱"],
["astronomy","/əˈstrɒnəmi/","天文学"],
["Azerbaijan","/ˌæzəbaɪˈdʒɑːn/","阿塞拜疆"],
["bronze chariots and horses","/brɒnz/","铜车马"],
["calligraphy","/kəˈlɪɡrəfi/","书法"],
["Chaozhou embroidery","/ɪmˈbrɔɪdəri/","潮绣、潮瓷、潮剧"],
["cheongsam","/tʃiːɒŋˈsæm/","旗袍"],
["Chinese character","/ˈkærəktə(r)/","汉字"],
["classical folk epic Gesar","/ˈklæsɪkl/","古典民族史诗格萨尔"],
["coffered ceiling","/ˈkɒfəd/","藻井"],
["comprise sth.","/kəmˈpraɪz/","包含，由...组成"],
["consumerism","/kənˈsjuːmərɪzəm/","消费主义"],
["cultural and creative product","/ˈkʌltʃərəl/","文创产品"],
["cultural relic","/ˈrelɪk/","文物"],
["Culture of Guy tea","/ɡaɪ tiː/","恰伊（茶）文化"],
["embody","/ɪmˈbɒdi/","体现，蕴涵"],
["embroidery","/ɪmˈbrɔɪdəri/","刺绣"],
["Emperor Qinshihuang's Mausoleum","/ˌmɔːsəˈliːəm/","秦始皇陵"],
["evolve","/ɪˈvɒlv/","演变，发展"],
["exotic","/ɪɡˈzɒtɪk/","国外的，外来的"],
["Forbidden City","/fəˈbɪdn/","紫禁城"],
["four treasures of study","/ˈtreʒəz/","文房四宝"],
["genre","/ˈʒɒnrə/","流派，派别，风格"],
["Great Hall of the People","/ɡreɪt hɔːl/","人民大会堂"],
["Hezhen Yimakan storytelling","/ˈstɔːritelɪŋ/","赫哲族伊玛堪说唱"],
["indigenous","/ɪnˈdɪdʒənəs/","当地的，土著的"],
["inflated lifestyle","/ɪnˈfleɪtɪd/","奢华生活方式"],
["ingrained","/ɪnˈɡreɪnd/","根深蒂固的"],
["inkstone","/ˈɪŋkstəʊn/","砚"],
["intangible cultural heritage (ICH)","/ɪnˈtændʒəbl/","非物质文化遗产"],
["Li Brocade of Hainan Province","/brəʊˈkeɪd/","海南黎锦"],
["Major Historical and Cultural Sites","/hɪˈstɒrɪkl/","全国重点文物保护单位"],
["martial arts","/ˌmɑːʃl ˈɑːts/","武术"],
["minimum wage","/ˈmɪnɪməm weɪdʒ/","法定最低工资标准"],
["ostentation","/ˌɒstenˈteɪʃn/","炫耀，卖弄"],
["Palace Museum","/ˈpæləs mjuˈziːəm/","故宫"],
["Palace of Versailles","/veəˈsaɪ/","凡尔赛宫"],
["ridge beast","/rɪdʒ biːst/","脊兽"],
["Tibetan Carpet","/tɪˈbetn ˈkɑːpɪt/","青藏高原的编织藏毯"],
["tranquil","/ˈtræŋkwɪl/","平静，安静"],
["UNESCO Representative List","/ˌreprɪˈzentətɪv/","人类非物质文化遗产代表作名录"],
["variety show","/vəˈraɪəti ʃəʊ/","综艺节目"],
["vote","/vəʊt/","投票权，选举权"],
["writing brush","/ˈraɪtɪŋ brʌʃ/","毛笔"],
["adjudication","/əˌdʒuːdɪˈkeɪʃn/","审裁"],
["bank guarantee","/ˌɡærənˈtiː/","银行担保"],
["be sentenced to","/ˈsentənst/","判处，判决"],
["be suspected of","/səˈspektɪd/","涉嫌"],
["border control","/ˈbɔːdə kənˈtrəʊl/","边境管制"],
["bribe","/braɪb/","贿赂"],
["cocaine","/kəʊˈkeɪn/","可卡因"],
["commercial fraud","/kəˈmɜːʃl frɔːd/","商业诈骗"],
["confession","/kənˈfeʃn/","供认，忏悔"],
["controversial","/ˌkɒntrəˈvɜːʃl/","有争议的"],
["correlate","/ˈkɒrəleɪt/","使相互关联"],
["ecstasy","/ˈekstəsi/","摇头丸"],
["entrapment","/ɪnˈtræpmənt/","诱捕"],
["floating/mobile population","/ˈfləʊtɪŋ/","流动人口"],
["halal","/həˈlɑːl/","清真的"],
["Hong Kong International Arbitration Centre","/ˌɑːbɪˈtreɪʃn/","香港国际仲裁中心"],
["illegal employment","/ɪˈliːɡl/","非法就业"],
["incarcerate","/ɪnˈkɑːsəreɪt/","监禁"],
["inmate","/ˈɪnmeɪt/","囚犯"],
["interception","/ˌɪntəˈsepʃn/","监听，截取"],
["interrogation","/ɪnˌterəˈɡeɪʃn/","审问"],
["look for a needle in a haystack","/ˈheɪstæk/","大海捞针"],
["Maldives","/ˈmɔːldiːvz/","马尔代夫"],
["mediation","/ˌmiːdiˈeɪʃn/","调解"],
["medical bail","/ˈmedɪkl/","保外就医"],
["pernicious","/pəˈnɪʃəs/","恶性的"],
["polygraph/lie detector","/ˈpɒlɪɡrɑːf/","测谎仪"],
["resolution","/ˌrezəˈluːʃn/","解决"],
["share-holding company","/ˈkʌmpəni/","控股公司"],
["socialist rule of law with Chinese characteristics","/ˈsəʊʃəlɪst/","中国特色社会主义法治"],
["squad","/skwɒd/","小队"],
["surveillance","/sɜːˈveɪləns/","监视"],
["visa","/ˈviːzə/","签证"]
];

const app = document.getElementById('app');

data.forEach(item => {
    let div = document.createElement('div');
    div.className = 'item';
    div.innerHTML = `<span class="en">${item[0]}</span><span class="ph">${item[1]}</span><span class="zh">${item[2]}</span>`;
    
    // 点击发音
    div.onclick = () => {
        window.speechSynthesis.cancel();
        let u = new SpeechSynthesisUtterance(item[0]);
        u.lang = 'en-US';
        u.rate = 0.85;
        window.speechSynthesis.speak(u);
    };
    
    app.appendChild(div);
});

<div id="app"></div>

body { padding: 10px; font-family: sans-serif; margin: 0; background: #fff; }
.item { padding: 12px 5px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; }
.item:active { background: #f0f0f0; }
.en { font-weight: bold; color: #2b6cb0; margin-right: 8px; font-size: 18px; }
.ph { color: #e53e3e; margin-right: 8px; font-family: "Times New Roman", serif; font-size: 15px; }
.zh { color: #333; font-size: 16px; }