Skip to content

C
Chameleon

DiDi / Chameleon

通知 13
Star 1
Fork 0
C
Chameleon

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
col.html 31.5 KB
Newer Older
J
doc: update  
JiM-W 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>col | Chameleon 变色龙</title>
    <meta name="description" content="一套代码运行多端，一端所见即多端所见">
    <meta name="generator" content="VuePress 1.4.0">
    <link rel="icon" href="/brand/logo.png">
    
    <link rel="preload" href="/assets/css/0.styles.4f526a61.css" as="style"><link rel="preload" href="/assets/js/app.99fcbcce.js" as="script"><link rel="preload" href="/assets/js/59.508d9d70.js" as="script"><link rel="preload" href="/assets/js/1.6e133947.js" as="script"><link rel="preload" href="/assets/js/29.6d241a0d.js" as="script"><link rel="preload" href="/assets/js/2.7c7fd3bd.js" as="script"><link rel="prefetch" href="/assets/js/10.3f3c97ec.js"><link rel="prefetch" href="/assets/js/11.8fd0e8ae.js"><link rel="prefetch" href="/assets/js/12.7eb44a90.js"><link rel="prefetch" href="/assets/js/13.42430351.js"><link rel="prefetch" href="/assets/js/14.aab83fd9.js"><link rel="prefetch" href="/assets/js/15.237669db.js"><link rel="prefetch" href="/assets/js/16.1b9de261.js"><link rel="prefetch" href="/assets/js/17.c0bf57ea.js"><link rel="prefetch" href="/assets/js/18.386d3bfe.js"><link rel="prefetch" href="/assets/js/19.b9becf3c.js"><link rel="prefetch" href="/assets/js/20.7ebc7997.js"><link rel="prefetch" href="/assets/js/21.6724581d.js"><link rel="prefetch" href="/assets/js/22.69ec1ad0.js"><link rel="prefetch" href="/assets/js/23.858a223b.js"><link rel="prefetch" href="/assets/js/24.f243c259.js"><link rel="prefetch" href="/assets/js/25.bfa416fc.js"><link rel="prefetch" href="/assets/js/26.2154d5c8.js"><link rel="prefetch" href="/assets/js/27.bb92a04b.js"><link rel="prefetch" href="/assets/js/28.15bdd9a1.js"><link rel="prefetch" href="/assets/js/30.c7013aea.js"><link rel="prefetch" href="/assets/js/31.a2cc4043.js"><link rel="prefetch" href="/assets/js/32.876f052c.js"><link rel="prefetch" href="/assets/js/33.443a092c.js"><link rel="prefetch" href="/assets/js/34.10e2e96a.js"><link rel="prefetch" href="/assets/js/35.d2681381.js"><link rel="prefetch" href="/assets/js/36.c06aa7dd.js"><link rel="prefetch" href="/assets/js/37.3a2c7e3f.js"><link rel="prefetch" href="/assets/js/38.7359be1a.js"><link rel="prefetch" href="/assets/js/39.58154c72.js"><link rel="prefetch" href="/assets/js/4.e4489a0a.js"><link rel="prefetch" href="/assets/js/40.dc6c6a82.js"><link rel="prefetch" href="/assets/js/41.4f328cc0.js"><link rel="prefetch" href="/assets/js/42.db6f5dbf.js"><link rel="prefetch" href="/assets/js/43.5c867da9.js"><link rel="prefetch" href="/assets/js/44.e1a4f56b.js"><link rel="prefetch" href="/assets/js/45.efc06433.js"><link rel="prefetch" href="/assets/js/46.435e0121.js"><link rel="prefetch" href="/assets/js/47.630e64bc.js"><link rel="prefetch" href="/assets/js/48.bf913c8c.js"><link rel="prefetch" href="/assets/js/49.1db8624e.js"><link rel="prefetch" href="/assets/js/5.c07f5998.js"><link rel="prefetch" href="/assets/js/50.7829e330.js"><link rel="prefetch" href="/assets/js/51.8cf85456.js"><link rel="prefetch" href="/assets/js/52.00305991.js"><link rel="prefetch" href="/assets/js/53.503b2ea4.js"><link rel="prefetch" href="/assets/js/54.d4f5c566.js"><link rel="prefetch" href="/assets/js/55.d0e4387b.js"><link rel="prefetch" href="/assets/js/56.57fecbfb.js"><link rel="prefetch" href="/assets/js/57.1b68b234.js"><link rel="prefetch" href="/assets/js/58.c2b7d564.js"><link rel="prefetch" href="/assets/js/6.9e8e6b26.js"><link rel="prefetch" href="/assets/js/60.527eb36e.js"><link rel="prefetch" href="/assets/js/61.5247339f.js"><link rel="prefetch" href="/assets/js/62.54c884bf.js"><link rel="prefetch" href="/assets/js/63.331544bf.js"><link rel="prefetch" href="/assets/js/64.caa5c449.js"><link rel="prefetch" href="/assets/js/65.bb36b5a9.js"><link rel="prefetch" href="/assets/js/66.fb7fc181.js"><link rel="prefetch" href="/assets/js/67.b39d0300.js"><link rel="prefetch" href="/assets/js/68.c4ac29dd.js"><link rel="prefetch" href="/assets/js/69.f37635c5.js"><link rel="prefetch" href="/assets/js/7.7bb6da72.js"><link rel="prefetch" href="/assets/js/70.2c24a379.js"><link rel="prefetch" href="/assets/js/71.ac03b9f4.js"><link rel="prefetch" href="/assets/js/72.8242c89c.js"><link rel="prefetch" href="/assets/js/73.0aac4225.js"><link rel="prefetch" href="/assets/js/74.cca48904.js"><link rel="prefetch" href="/assets/js/75.78bc877f.js"><link rel="prefetch" href="/assets/js/76.edea28d3.js"><link rel="prefetch" href="/assets/js/77.79dae385.js"><link rel="prefetch" href="/assets/js/78.e551f7e8.js"><link rel="prefetch" href="/assets/js/79.5f148893.js"><link rel="prefetch" href="/assets/js/8.5d390741.js"><link rel="prefetch" href="/assets/js/80.d0cf063e.js"><link rel="prefetch" href="/assets/js/81.db96036b.js"><link rel="prefetch" href="/assets/js/82.4e4da58b.js"><link rel="prefetch" href="/assets/js/83.145895b5.js"><link rel="prefetch" href="/assets/js/84.eeaeb4af.js"><link rel="prefetch" href="/assets/js/85.717dd2c6.js"><link rel="prefetch" href="/assets/js/86.49f3e4f1.js"><link rel="prefetch" href="/assets/js/87.cce28408.js"><link rel="prefetch" href="/assets/js/88.80db1d50.js"><link rel="prefetch" href="/assets/js/89.005c3932.js"><link rel="prefetch" href="/assets/js/9.101b2658.js">
    <link rel="stylesheet" href="/assets/css/0.styles.4f526a61.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/brand/logo.png" alt="Chameleon 变色龙" class="logo"> <span class="site-name can-hide">Chameleon 变色龙</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/components/base" class="sidebar-heading clickable open"><span>内置组件</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/view.html" class="sidebar-link">view</a></li><li><a href="/components/cover-view.html" class="sidebar-link">cover-view</a></li><li><a href="/components/text.html" class="sidebar-link">text</a></li><li><a href="/components/richtext.html" class="sidebar-link">richtext</a></li><li><a href="/components/page.html" class="sidebar-link">page</a></li><li><a href="/components/block.html" class="sidebar-link">block</a></li><li><a href="/components/cell.html" class="sidebar-link">cell</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>布局</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/scroller.html" class="sidebar-link">scroller</a></li><li><a href="/components/list.html" class="sidebar-link">list</a></li><li><a href="/components/container.html" class="sidebar-link">container</a></li><li><a href="/components/row.html" class="sidebar-link">row</a></li><li><a href="/components/col.html" class="active sidebar-link">col</a></li><li><a href="/components/carousel.html" class="sidebar-link">carousel</a></li><li><a href="/components/carousel-item.html" class="sidebar-link">carousel-item</a></li><li><a href="/components/refresh-view.html" class="sidebar-link">refresh-view</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>表单</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/button.html" class="sidebar-link">button</a></li><li><a href="/components/input.html" class="sidebar-link">input</a></li><li><a href="/components/textarea.html" class="sidebar-link">textarea</a></li><li><a href="/components/switch.html" class="sidebar-link">switch</a></li><li><a href="/components/radio.html" class="sidebar-link">radio</a></li><li><a href="/components/checkbox.html" class="sidebar-link">checkbox</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>媒体</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/image.html" class="sidebar-link">image</a></li><li><a href="/components/video.html" class="sidebar-link">video</a></li><li><a href="/components/audio.html" class="sidebar-link">video</a></li></ul></section></li></ul></section></li><li><section class="sidebar-group depth-0"><a href="/components/expand" class="sidebar-heading clickable"><span>扩展组件</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/components/c-toast.html" class="sidebar-link">c-toast</a></li><li><a href="/components/c-loading.html" class="sidebar-link">c-loading</a></li><li><a href="/components/c-dialog.html" class="sidebar-link">c-dialog</a></li><li><a href="/components/c-popup.html" class="sidebar-link">c-popup</a></li><li><a href="/components/c-tip.html" class="sidebar-link">c-tip</a></li><li><a href="/components/c-actionsheet.html" class="sidebar-link">c-actionsheet</a></li><li><a href="/components/c-tab.html" class="sidebar-link">c-tab</a></li><li><a href="/components/c-picker.html" class="sidebar-link">c-picker</a></li><li><a href="/components/c-picker-panel.html" class="sidebar-link">c-picker-panel</a></li><li><a href="/components/c-picker-item.html" class="sidebar-link">c-picker-item</a></li><li><a href="/components/c-checkbox-group.html" class="sidebar-link">c-checkbox-group</a></li><li><a href="/components/c-radio-group.html" class="sidebar-link">c-radio-group</a></li><li><a href="/components/c-tabbar.html" class="sidebar-link">c-tabbar</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="col"><a href="#col" class="header-anchor">#</a> col</h1> <hr> <p>纵向 flex 布局容器</p> <p>与<code>&lt;row&gt;</code> 组件结合使用，可快速构建整洁干净的 flex 布局。</p> <h3 id="属性"><a href="#属性" class="header-anchor">#</a> 属性</h3> <table><tr><th width="200px">属性名</th> <th>类型</th> <th width="60px">必填</th> <th>默认值</th> <th>说明</th></tr> <tr><td>width</td> <td>Number</td> <td>否</td> <td>0</td> <td>容器宽度，值为0时容器宽度由内部元素宽度决定</td></tr> <tr><td>height</td> <td>Number</td> <td>否</td> <td>0</td> <td>容器高度，值为0时容器高度由内部元素高度决定</td></tr> <tr><td>background-color</td> <td>String</td> <td>否</td> <td></td> <td>容器背景色</td></tr> <tr><td>margin</td> <td>Number</td> <td>否</td> <td>0</td> <td>容器左右间隔（单位cpx）</td></tr></table> <h3 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h3> <div class="language-vue extra-class"><pre class="language-vue"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>row</span> <span class="token attr-name">margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{100}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{100}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>col</span> <span class="token attr-name">margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{50}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>col-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>col</span> <span class="token attr-name">margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{50}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>col-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>col</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>col</span> <span class="token attr-name">margin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{50}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>col-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>col</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>row</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

<span class="token keyword">class</span> <span class="token class-name">Col</span>  <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Col</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.col-item</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span>200cpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span>100cpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">cml-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token punctuation">{</span>
  <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div style="display:flex;flex-direction:row;justify-content:space-around;align-items:flex-end;"><div style="display:flex;flex-direction:column;align-items:center;"><img src="/assets/img/row_wx.2eb6f4be.png" width="200px"> <text style="color:#fda775;font-size:24px;">wx</text></div> <div style="display:flex;flex-direction:column;align-items:center;"><img src="/assets/img/row_web.2884c6b8.png" width="200px"> <text style="color:#fda775;font-size:24px;">web</text></div> <div style="display:flex;flex-direction:column;align-items:center;"><img src="/assets/img/row_weex.9e6bb3b3.png" width="200px"> <text style="color:#fda775;font-size:24px;">native</text></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/components/row.html" class="prev">
        row
      </a></span> <span class="next"><a href="/components/carousel.html">
        carousel
      </a>
      →
    </span></p></div> <footer class="footer" data-v-aa5c954a><div class="content" data-v-aa5c954a><div class="left" data-v-aa5c954a><a href="/" class="brand" data-v-aa5c954a><img src="data:image/png;base64,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" alt="logo" data-v-aa5c954a> <span data-v-aa5c954a>Chameleon</span></a> <div class="info" data-v-aa5c954a>Copyright © 2020 DiDi Chuxing Inc.</div></div> <div class="right" data-v-aa5c954a><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>资源</h4> <a href="/components/expand.html" data-v-aa5c954a>Chameleon UI</a><a href="https://github.com/beatles-chameleon/cml-demo" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon Demo
            </a><a href="https://github.com/chameleon-team/awesome-cml" target="_blank" rel="noopener" data-v-aa5c954a>
              Awesome Chameleon
            </a><a href="https://github.com/didi/chameleon/releases" target="_blank" rel="noopener" data-v-aa5c954a>
              更新记录
            </a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>社区</h4> <a href="https://github.com/didi/chameleon/issues" target="_blank" rel="noopener" data-v-aa5c954a>
              GitHub
            </a><a data-v-aa5c954a><span data-v-aa5c954a>微信交流群</span> <img src="/assets/img/qr_weixin.59cd000a.png" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>QQ 交流群</span> <img src="/assets/img/qr_qq.115678d7.jpg" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>顺风公鹿</span> <img src="/assets/img/qr_deer.e2ddb653.png" alt="image" data-v-aa5c954a></a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>关于</h4> <a href="https://github.com/didi/chameleon/wiki/Chameleon%E5%9B%A2%E9%98%9F" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon 团队
            </a><a href="https://github.com/didi/chameleon/wiki/%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC" target="_blank" rel="noopener" data-v-aa5c954a>
              加入我们
            </a><a href="mailto:CML@didichuxing.com" target="_blank" rel="noopener" data-v-aa5c954a>
              联系我们
            </a><a href="https://github.com/didi/chameleon/wiki/Contributors" target="_blank" rel="noopener" data-v-aa5c954a>
              贡献者
            </a></div></div></div></footer></main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.99fcbcce.js" defer></script><script src="/assets/js/59.508d9d70.js" defer></script><script src="/assets/js/1.6e133947.js" defer></script><script src="/assets/js/29.6d241a0d.js" defer></script><script src="/assets/js/2.7c7fd3bd.js" defer></script>
  </body>
</html>