版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

View file
name首页视觉图.zip
height250

2、6.0自定义内容区域代码

2.1、默认代码样式

代码块
collapsetrue
<!-- 新手引导 三列 -->
<div class="v5-guide effect-fade cols-3">
  <h2 class="title-text text-1-cl">{{locale.home.custom_text1}}</h2>
  <div class="title-tip text-2-cl">{{locale.home.custom_text2}}</div>
  <div class="guide-content">
    <dl class="guide-item item-1">
      <dt>
        <img src="{{sourceMap.home_guide_1}}" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">{{locale.home.custom_text3}}</dd>
    </dl>
    <dl class="guide-item item-2">
      <dt>
        <img src="{{sourceMap.home_guide_2}}" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">{{locale.home.custom_text4}}</dd>
    </dl>
    <dl class="guide-item item-3">
      <dt>
        <img src="{{sourceMap.home_guide_3}}" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">{{locale.home.custom_text5}}</dd>
    </dl>
  </div>
</div>
<!-- 新手引导 二列 -->
<div class="v5-guide effect-fade cols-2">
  <h2 class="title-text text-1-cl">{{locale.home.custom_text1}}</h2>
  <div class="title-tip text-2-cl">{{locale.home.custom_text2}}</div>
  <div class="guide-content">
    <dl class="guide-item item-1">
      <dt>
        <img src="{{sourceMap.home_guide_4}}" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">{{locale.home.custom_text3}}</dd>
    </dl>
    <dl class="guide-item item-2">
      <dt>
        <img src="{{sourceMap.home_guide_5}}" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">{{locale.home.custom_text4}}</dd>
    </dl>
  </div>
</div>
<!-- 服务支持 一排 -->
<div class="v5-service effect-fade rows-1">
  <h2 class="title-text text-1-cl">{{locale.home.custom_text14}}</h2>
  <div class="service-content">
    <dl class="service-item item-1">
      <dt><img src="{{sourceMap.home_service_1}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text15}}</div>
        <span class="text-2-cl">{{locale.home.custom_text16}}</span>
      </dd>
    </dl>
    <dl class="service-item item-2">
      <dt><img src="{{sourceMap.home_service_2}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text17}}</div>
        <span class="text-2-cl">{{locale.home.custom_text18}}</span>
      </dd>
    </dl>
    <dl class="service-item item-3">
      <dt><img src="{{sourceMap.home_service_3}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text19}}</div>
        <span class="text-2-cl">{{locale.home.custom_text20}}</span>
      </dd>
    </dl>
    <dl class="service-item item-4">
      <dt><img src="{{sourceMap.home_service_4}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text21}}</div>
        <span class="text-2-cl">{{locale.home.custom_text22}}</span>
      </dd>
    </dl>
  </div>
</div>
<!-- 服务支持 二排 -->
<div class="v5-service effect-fade rows-2">
  <h2 class="title-text text-1-cl">{{locale.home.custom_text14}}</h2>
  <div class="service-content">
    <dl class="service-item item-1">
      <dt><img src="{{sourceMap.home_service_1}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text15}}</div>
        <span class="text-2-cl">{{locale.home.custom_text16}}</span>
      </dd>
    </dl>
    <dl class="service-item item-3">
      <dt><img src="{{sourceMap.home_service_3}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text19}}</div>
        <span class="text-2-cl">{{locale.home.custom_text20}}</span>
      </dd>
    </dl>
    <dl class="service-item item-4">
      <dt><img src="{{sourceMap.home_service_4}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text21}}</div>
        <span class="text-2-cl">{{locale.home.custom_text22}}</span>
      </dd>
    </dl>
    <dl class="service-item item-2">
      <dt><img src="{{sourceMap.home_service_2}}" alt=""></dt>
      <dd>
        <div class="text-1-cl">{{locale.home.custom_text17}}</div>
        <span class="text-2-cl">{{locale.home.custom_text18}}</span>
      </dd>
    </dl>
  </div>
</div>
<!-- 邀请奖励 文字左侧 -->
<div class="v5-invite effect-fade text-left">
  <div class="invite-text">
    <h2 class="title-text text-1-cl">
      <div>{{locale.home.custom_text29}}</div>
      <div>{{locale.home.custom_text30}}</div>
    </h2>
    <div class="invite-text_subTitle text-2-cl">
      {{locale.home.custom_text31}}
    </div>
    <a class="invite-button main-1-bg text-4-cl" href="/register">
      {{locale.home.custom_text27}}
    </a>
  </div>
  <div class="invite-img">
    <img src="{{sourceMap.home_invite_1}}" alt="">
  </div>
</div>
<!-- 邀请奖励 文字右侧 -->
<div class="v5-invite effect-fade text-right">
  <div class="invite-img">
    <img src="{{sourceMap.home_invite_1}}" alt="">
  </div>
  <div class="invite-text">
    <h2 class="title-text text-1-cl">
      <div>{{locale.home.custom_text29}}</div>
      <div>{{locale.home.custom_text30}}</div>
    </h2>
    <div class="invite-text_subTitle text-2-cl">
      {{locale.home.custom_text31}}
    </div>
    <a class="invite-button main-1-bg text-4-cl" href="/register">
      {{locale.home.custom_text27}}
    </a>
  </div>
</div>
<!-- 功能支持 三列 -->
<div class="v5-features effect-fade cols-3">
  <h2 class="title-text text-1-cl">{{locale.home.custom_text32}}</h2>
  <ul class="features-list">
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">{{locale.home.custom_text33}}</div>
        <div class="features-sub_text text-2-cl">{{locale.home.custom_text34}}</div>
      </div>
      <div class="features-img">
        <img src="{{sourceMap.home_feature_1}}" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">{{locale.home.custom_text35}}</div>
        <div class="features-sub_text text-2-cl">{{locale.home.custom_text36}}</div>
      </div>
      <div class="features-img">
        <img src="{{sourceMap.home_feature_2}}" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">{{locale.home.custom_text37}}</div>
        <div class="features-sub_text text-2-cl">{{locale.home.custom_text38}}</div>
      </div>
      <div class="features-img">
        <img src="{{sourceMap.home_feature_3}}" alt="">
      </div>
      <div class="layout"></div>
    </li>
  </ul>
</div>
<!-- 功能支持 二列 -->
<div class="v5-features effect-fade cols-2">
  <h2 class="title-text text-1-cl">{{locale.home.custom_text32}}</h2>
  <ul class="features-list">
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">{{locale.home.custom_text33}}</div>
        <div class="features-sub_text text-2-cl">{{locale.home.custom_text34}}</div>
      </div>
      <div class="features-img">
        <img src="{{sourceMap.home_feature_4}}" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">{{locale.home.custom_text35}}</div>
        <div class="features-sub_text text-2-cl">{{locale.home.custom_text36}}</div>
      </div>
      <div class="features-img">
        <img src="{{sourceMap.home_feature_5}}" alt="">
      </div>
      <div class="layout"></div>
    </li>
  </ul>
</div>
<!-- APP下载 图片右侧 -->
<div class="v5-appDownload effect-fade img-right">
  <div class="app-introduce">
    <h2 class="title-text text-1-cl">{{locale.home.custom_text6}}</h2>
    <div class="title-tip text-2-cl">{{locale.home.custom_text7}}</div>
    <ul class="intro-list">
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">{{locale.home.custom_text8}}</p>
          <span class="text-2-cl">{{locale.home.custom_text9}}</span>
        </div>
      </li>
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">{{locale.home.custom_text10}}</p>
          <span class="text-2-cl">{{locale.home.custom_text11}}</span>
        </div>
      </li>
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">{{locale.home.custom_text12}}</p>
          <span class="text-2-cl">{{locale.home.custom_text13}}</span>
        </div>
      </li>
    </ul>
    <div class="download">
      <a href="/appDownload">
        <img class="download-store" src="{{sourceMap.home_download_1}}" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <a href="/appDownload">
        <img class="download-store" src="{{sourceMap.home_download_2}}" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <div class="qrcode">
        <div class="qrcode-icon">
          <img src="{{sourceMap.home_download_3}}" alt="">
          <div class="hover-layout"></div>
        </div>
        <aside class="qrcode-preview text-1-bg box-shadow">
          <img src="{{ appDownLoad.app_page_url }}" alt="">
        </aside>
      </div>
    </div>
  </div>
  <div class="app-preview">
    <img src="{{sourceMap.home_appview_1}}" alt="">
  </div>
</div>
<!-- APP下载 图片左侧 -->
<div class="v5-appDownload effect-fade img-left">
  <div class="app-preview">
    <img src="{{sourceMap.home_appview_3}}" alt="">
  </div>
  <div class="app-introduce">
    <h2 class="title-text text-1-cl">{{locale.home.custom_text6}}</h2>
    <div class="title-tip text-2-cl">{{locale.home.custom_text7}}</div>
    <div class="qrcode-img fill-5-bd">
      <img src="{{ appDownLoad.app_page_url }}" alt="">
    </div>
    <div class="download">
      <a href="/appDownload">
        <img class="download-store" src="{{sourceMap.home_download_1}}" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <a href="/appDownload">
        <img class="download-store" src="{{sourceMap.home_download_2}}" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
    </div>
  </div>
</div>
<!-- 注册引导 换色 -->
<div class="v5-register-guide transparentColor effect-fade">
  <div class="register-guide-content" style="background-image: url('{{sourceMap.home_register_1}}');">
    <h2 class="title-text text-1-cl">{{locale.home.custom_text25}}</h2>
    <div class="title-text-sub text-1-cl">{{locale.home.custom_text26}}</div>
    <a href="/register" class="main-1-bg link-href text-4-cl">
      <span class="link-href_text">{{locale.home.custom_text27}}</span>
      <span class="link-icon">→</span>
      <div class="hover-layout"></div>
      <div class="active-layout"></div>
    </a>
  </div>
</div>
<!-- 注册引导 主色 -->
<div class="v5-register-guide mainColor effect-fade">
  <div class="register-guide-content" style="background-image: url('{{sourceMap.home_register_2}}');">
    <h2 class="title-text text-4-cl">{{locale.home.custom_text25}}</h2>
    <div class="title-text-sub text-4-cl">{{locale.home.custom_text26}}</div>
    <a href="/register" class="text-4-bg link-href text-5-cl">
      <span class="link-href_text">{{locale.home.custom_text27}}</span>
      <span class="link-icon">→</span>
      <div class="hover-layout"></div>
      <div class="active-layout"></div>
    </a>
  </div>
</div>


2.2、中文默认文案样式

代码块
collapsetrue
<!-- 新手引导 三列 -->
<div class="v5-guide effect-fade cols-3">
  <h2 class="title-text text-1-cl">新手引导</h2>
  <div class="title-tip text-2-cl">即可开启数字货币交易学习</div>
  <div class="guide-content">
    <dl class="guide-item item-1">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/292eb65d500b808700500ea53afa2cbb.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">快速了解法币交易</dd>
    </dl>
    <dl class="guide-item item-2">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/f97f2cecaa83ea83b49202e6868b9bd2.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">如何购买数字货币</dd>
    </dl>
    <dl class="guide-item item-3">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/bb84383699c85cdc01ee114dcb410fc1.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">如何出售数字货币</dd>
    </dl>
  </div>
</div>
<!-- 新手引导 二列 -->
<div class="v5-guide effect-fade cols-2">
  <h2 class="title-text text-1-cl">新手引导</h2>
  <div class="title-tip text-2-cl">即可开启数字货币交易学习</div>
  <div class="guide-content">
    <dl class="guide-item item-1">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/158e985d1233f1b58dcdf083bcf76ae2.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">快速了解法币交易</dd>
    </dl>
    <dl class="guide-item item-2">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/c2dca1b12339f690ffacfa22c6597206.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">如何购买数字货币</dd>
    </dl>
  </div>
</div>
<!-- 服务支持 一排 -->
<div class="v5-service effect-fade rows-1">
  <h2 class="title-text text-1-cl">开启你的数字货币之旅</h2>
  <div class="service-content">
    <dl class="service-item item-1">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/050ada765b457b81fa717615403b790f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">最低的手续费</div>
        <span class="text-2-cl">最低的手续费,最快捷的交易,强劲的 API 以及更多</span>
      </dd>
    </dl>
    <dl class="service-item item-2">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/bc196b083f714f5ef7dcb788be4b1b05.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">最优的交易费率</div>
        <span class="text-2-cl">优惠的交易费率,富有竞争力的VIP权益,享受最优品质服务</span>
      </dd>
    </dl>
    <dl class="service-item item-3">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/ebfb0fb8ef0cc045ca7751ff1fbc5600.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">可信赖的安全保障</div>
        <span class="text-2-cl">我们复杂的安全措施保护您的数字资产免受所有风险</span>
      </dd>
    </dl>
    <dl class="service-item item-4">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/15346dd141d121d1c95e513f5d485f5f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">24*7小时客服支持</div>
        <span class="text-2-cl">24*7小时全天候、全日制运营模式,第一时间为您解答相关咨询。</span>
      </dd>
    </dl>
  </div>
</div>
<!-- 服务支持 二排 -->
<div class="v5-service effect-fade rows-2">
  <h2 class="title-text text-1-cl">开启你的数字货币之旅</h2>
  <div class="service-content">
    <dl class="service-item item-1">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/050ada765b457b81fa717615403b790f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">最低的手续费</div>
        <span class="text-2-cl">最低的手续费,最快捷的交易,强劲的 API 以及更多</span>
      </dd>
    </dl>
    <dl class="service-item item-3">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/ebfb0fb8ef0cc045ca7751ff1fbc5600.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">可信赖的安全保障</div>
        <span class="text-2-cl">我们复杂的安全措施保护您的数字资产免受所有风险</span>
      </dd>
    </dl>
    <dl class="service-item item-4">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/15346dd141d121d1c95e513f5d485f5f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">24*7小时客服支持</div>
        <span class="text-2-cl">24*7小时全天候、全日制运营模式,第一时间为您解答相关咨询。</span>
      </dd>
    </dl>
    <dl class="service-item item-2">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/bc196b083f714f5ef7dcb788be4b1b05.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">最优的交易费率</div>
        <span class="text-2-cl">优惠的交易费率,富有竞争力的VIP权益,享受最优品质服务</span>
      </dd>
    </dl>
  </div>
</div>
<!-- 邀请奖励 文字左侧 -->
<div class="v5-invite effect-fade text-left">
  <div class="invite-text">
    <h2 class="title-text text-1-cl">
      <div>邀请好友</div>
      <div>获取奖励</div>
    </h2>
    <div class="invite-text_subTitle text-2-cl">
      享受全新奖励中心,赢取更多USDT!
    </div>
    <a class="invite-button main-1-bg text-4-cl" href="/register">
      邀请好友
    </a>
  </div>
  <div class="invite-img">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/727d081b49e1db13958c61eafd6ac93f.png" alt="">
  </div>
</div>
<!-- 邀请奖励 文字右侧 -->
<div class="v5-invite effect-fade text-right">
  <div class="invite-img">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/727d081b49e1db13958c61eafd6ac93f.png" alt="">
  </div>
  <div class="invite-text">
    <h2 class="title-text text-1-cl">
      <div>邀请好友</div>
      <div>获取奖励</div>
    </h2>
    <div class="invite-text_subTitle text-2-cl">
      享受全新奖励中心,赢取更多USDT!
    </div>
    <a class="invite-button main-1-bg text-4-cl" href="/register">
      邀请好友
    </a>
  </div>
</div>
<!-- 功能支持 三列 -->
<div class="v5-features effect-fade cols-3">
  <h2 class="title-text text-1-cl">探索无限可能</h2>
  <ul class="features-list">
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">跟单</div>
        <div class="features-sub_text text-2-cl">交易专家、精准策略、前沿观点,让你的资产在市场波动中不断增值。</div>
      </div>
      <div class="features-img">
        <img src="https://saas-osss.oss-accelerate.aliyuncs.com/upload/99a3fb0cda700db7177e61de61f62cc3.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">选择交易所支付,助力企业成长</div>
        <div class="features-sub_text text-2-cl">凭借无国界支付技术提供加密货币收付款功能,触达更多客户。</div>
      </div>
      <div class="features-img">
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/8ea18c0e62ccdd863b0baf359eede336.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">理财</div>
        <div class="features-sub_text text-2-cl">持有加密货币资金,赚取可观收益。</div>
      </div>
      <div class="features-img">
        <img src="https://saas-osss.oss-cn-hongkong.aliyuncs.com/transfer_dev/upload/8fa4520bf645900016d66286a105318a.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
  </ul>
</div>
<!-- 功能支持 二列 -->
<div class="v5-features effect-fade cols-2">
  <h2 class="title-text text-1-cl">探索无限可能</h2>
  <ul class="features-list">
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">跟单</div>
        <div class="features-sub_text text-2-cl">交易专家、精准策略、前沿观点,让你的资产在市场波动中不断增值。</div>
      </div>
      <div class="features-img">
        <img src="https://saas-osss.oss-accelerate.aliyuncs.com/upload/1004af897a969e4e91b521f16bbe376e.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">交易专家、精准策略、前沿观点,让你的资产在市场波动中不断增值。</div>
        <div class="features-sub_text text-2-cl">凭借无国界支付技术提供加密货币收付款功能,触达更多客户。</div>
      </div>
      <div class="features-img">
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/88caa6c83dd40b01883963276b50d605.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
  </ul>
</div>
<!-- APP下载 图片右侧 -->
<div class="v5-appDownload effect-fade img-right">
  <div class="app-introduce">
    <h2 class="title-text text-1-cl">随时随地交易</h2>
    <div class="title-tip text-2-cl">立即下载APP,所有交易尽在手中。</div>
    <ul class="intro-list">
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">快速交易</p>
          <span class="text-2-cl">提供多种交易类型选择,快速下单</span>
        </div>
      </li>
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">自定义交易面板</p>
          <span class="text-2-cl">根据不同交易习惯自由定义交易布局</span>
        </div>
      </li>
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">轻松查看资产</p>
          <span class="text-2-cl">E轻松转移账户中的资产,实时数字资产概览</span>
        </div>
      </li>
    </ul>
    <div class="download">
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/dbcccab91097cd6100c744927fdf975a.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/49ed8f98cf300a298903329838dfcb43.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <div class="qrcode">
        <div class="qrcode-icon">
          <img src="{{sourceMap.home_download_3}}" alt="">
          <div class="hover-layout"></div>
        </div>
        <aside class="qrcode-preview text-1-bg box-shadow">
          <img src="{{ appDownLoad.app_page_url }}" alt="">
        </aside>
      </div>
    </div>
  </div>
  <div class="app-preview">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/6ab4da591d9f52dbec19f56e3ed0661c.png" alt="">
  </div>
</div>
<!-- APP下载 图片左侧 -->
<div class="v5-appDownload effect-fade img-left">
  <div class="app-preview">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/cc9be28c951971588c84a3c731e3da4e.png" alt="">
  </div>
  <div class="app-introduce">
    <h2 class="title-text text-1-cl">随时随地交易</h2>
    <div class="title-tip text-2-cl">立即下载APP,所有交易尽在手中。</div>
    <div class="qrcode-img fill-5-bd">
      <img src="{{ appDownLoad.app_page_url }}" alt="">
    </div>
    <div class="download">
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/dbcccab91097cd6100c744927fdf975a.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/49ed8f98cf300a298903329838dfcb43.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
    </div>
  </div>
</div>
<!-- 注册引导 换色 -->
<div class="v5-register-guide transparentColor effect-fade">
  <div class="register-guide-content" style="background-image: url('https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/d97d3010ef107e9db9ca0961e570003f.png');">
    <h2 class="title-text text-1-cl">马上开启交易之旅</h2>
    <div class="title-text-sub text-1-cl">注册账号开始交易</div>
    <a href="/register" class="main-1-bg link-href text-4-cl">
      <span class="link-href_text">立即注册</span>
      <span class="link-icon">→</span>
      <div class="hover-layout"></div>
      <div class="active-layout"></div>
    </a>
  </div>
</div>
<!-- 注册引导 主色 -->
<div class="v5-register-guide mainColor effect-fade">
  <div class="register-guide-content" style="background-image: url('https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/5032e353317ea8a6ac5c2bb705c04558.png');">
    <h2 class="title-text text-4-cl">马上开启交易之旅</h2>
    <div class="title-text-sub text-4-cl">注册账号开始交易</div>
    <a href="/register" class="text-4-bg link-href text-5-cl">
      <span class="link-href_text">立即注册</span>
      <span class="link-icon">→</span>
      <div class="hover-layout"></div>
      <div class="active-layout"></div>
    </a>
  </div>
</div>


2.3、英文默认样式–带文案

代码块
collapsetrue
<!-- 新手引导 三列 -->
<div class="v5-guide effect-fade cols-3">
  <h2 class="title-text text-1-cl">Beginner's Guide </h2>
  <div class="title-tip text-2-cl">You can start learning about digital currency trading </div>
  <div class="guide-content">
    <dl class="guide-item item-1">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/292eb65d500b808700500ea53afa2cbb.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">Quickly understand fiat currency transactions in three minutes</dd>
    </dl>
    <dl class="guide-item item-2">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/f97f2cecaa83ea83b49202e6868b9bd2.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">How to buy digital currency </dd>
    </dl>
    <dl class="guide-item item-3">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/bb84383699c85cdc01ee114dcb410fc1.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">How to sell numerical currency transactions</dd>
    </dl>
  </div>
</div>
<!-- 新手引导 二列 -->
<div class="v5-guide effect-fade cols-2">
  <h2 class="title-text text-1-cl">Beginner's Guide</h2>
  <div class="title-tip text-2-cl">You can start learning about digital currency trading</div>
  <div class="guide-content">
    <dl class="guide-item item-1">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/158e985d1233f1b58dcdf083bcf76ae2.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">Quickly understand fiat currency transactions in three minutes</dd>
    </dl>
    <dl class="guide-item item-2">
      <dt>
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/c2dca1b12339f690ffacfa22c6597206.png" alt="">
        <a href="javascript:void;" class="layout"></a>
      </dt>
      <dd class="text-1-cl">How to buy digital currency</dd>
    </dl>
  </div>
</div>
<!-- 服务支持 一排 -->
<div class="v5-service effect-fade rows-1">
  <h2 class="title-text text-1-cl">Get In Touch. Stay In Touch.</h2>
  <div class="service-content">
    <dl class="service-item item-1">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/050ada765b457b81fa717615403b790f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">0 fee digital currency trading</div>
        <span class="text-2-cl">Multi-terminals are perfectly compatible to meet the transaction needs of various scenarios at any time</span>
      </dd>
    </dl>
    <dl class="service-item item-2">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/bc196b083f714f5ef7dcb788be4b1b05.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">Rich trading currencies</div>
        <span class="text-2-cl">Support the transaction of 500+ currency assets</span>
      </dd>
    </dl>
    <dl class="service-item item-3">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/ebfb0fb8ef0cc045ca7751ff1fbc5600.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">Rich gameplay</div>
        <span class="text-2-cl">Support spot, legal currency, contracts, leveraged trading, ETF trading, etc.</span>
      </dd>
    </dl>
    <dl class="service-item item-4">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/15346dd141d121d1c95e513f5d485f5f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">24/7 Customer Support</div>
        <span class="text-2-cl">Dedicated customer service to provide you with satisfactory customer service</span>
      </dd>
    </dl>
  </div>
</div>
<!-- 服务支持 二排 -->
<div class="v5-service effect-fade rows-2">
  <h2 class="title-text text-1-cl">Get In Touch. Stay In Touch.</h2>
  <div class="service-content">
    <dl class="service-item item-1">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/050ada765b457b81fa717615403b790f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">0 fee digital currency trading</div>
        <span class="text-2-cl">Multi-terminals are perfectly compatible to meet the transaction needs of various scenarios at any time</span>
      </dd>
    </dl>
    <dl class="service-item item-3">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/ebfb0fb8ef0cc045ca7751ff1fbc5600.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">Rich gameplay</div>
        <span class="text-2-cl">Support spot, legal currency, contracts, leveraged trading, ETF trading, etc.</span>
      </dd>
    </dl>
    <dl class="service-item item-4">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/15346dd141d121d1c95e513f5d485f5f.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">24/7 Customer Support</div>
        <span class="text-2-cl">Dedicated customer service to provide you with satisfactory customer service</span>
      </dd>
    </dl>
    <dl class="service-item item-2">
      <dt><img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/bc196b083f714f5ef7dcb788be4b1b05.png" alt=""></dt>
      <dd>
        <div class="text-1-cl">Rich trading currencies</div>
        <span class="text-2-cl">Support the transaction of 500+ currency assets</span>
      </dd>
    </dl>
  </div>
</div>
<!-- 邀请奖励 文字左侧 -->
<div class="v5-invite effect-fade text-left">
  <div class="invite-text">
    <h2 class="title-text text-1-cl">
      <div>Invite Friends</div>
      <div>Enjoy Rewards</div>
    </h2>
    <div class="invite-text_subTitle text-2-cl">
      Rewarding. Transparent. Instant Redemption
    </div>
    <a class="invite-button main-1-bg text-4-cl" href="/register">
      Register Now
    </a>
  </div>
  <div class="invite-img">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/727d081b49e1db13958c61eafd6ac93f.png" alt="">
  </div>
</div>
<!-- 邀请奖励 文字右侧 -->
<div class="v5-invite effect-fade text-right">
  <div class="invite-img">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/727d081b49e1db13958c61eafd6ac93f.png" alt="">
  </div>
  <div class="invite-text">
    <h2 class="title-text text-1-cl">
      <div>Invite Friends</div>
      <div>Enjoy Rewards</div>
    </h2>
    <div class="invite-text_subTitle text-2-cl">
      Rewarding. Transparent. Instant Redemption
    </div>
    <a class="invite-button main-1-bg text-4-cl" href="/register">
      Register Now
    </a>
  </div>
</div>
<!-- 功能支持 三列 -->
<div class="v5-features effect-fade cols-3">
  <h2 class="title-text text-1-cl">Explore Endless Possibilities</h2>
  <ul class="features-list">
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">Dive into the world of NFTs</div>
        <div class="features-sub_text text-2-cl">Open rare Mystery Boxes, explore IGOs, Fan Tokens, and more with Exchnage NFT.</div>
      </div>
      <div class="features-img">
        <img src="https://saas-osss.oss-accelerate.aliyuncs.com/upload/99a3fb0cda700db7177e61de61f62cc3.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">Grow your business with Exchange Pay</div>
        <div class="features-sub_text text-2-cl">Reach more customers as you pay and get paid in crypto with our borderless payment technology on Exchange Pay & Exchange Marketplace</div>
      </div>
      <div class="features-img">
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/8ea18c0e62ccdd863b0baf359eede336.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">Exchange Earn</div>
        <div class="features-sub_text text-2-cl">Hold your crypto funds and start earning</div>
      </div>
      <div class="features-img">
        <img src="https://saas-osss.oss-cn-hongkong.aliyuncs.com/transfer_dev/upload/8fa4520bf645900016d66286a105318a.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
  </ul>
</div>
<!-- 功能支持 二列 -->
<div class="v5-features effect-fade cols-2">
  <h2 class="title-text text-1-cl">Explore Endless Possibilities</h2>
  <ul class="features-list">
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">Dive into the world of NFTs</div>
        <div class="features-sub_text text-2-cl">Open rare Mystery Boxes, explore IGOs, Fan Tokens, and more with Exchnage NFT.</div>
      </div>
      <div class="features-img">
        <img src="https://saas-osss.oss-accelerate.aliyuncs.com/upload/1004af897a969e4e91b521f16bbe376e.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
    <li class="features-item fill-3-bg">
      <div class="features-text">
        <div class="features-main_text text-1-cl">Grow your business with Exchange Pay</div>
        <div class="features-sub_text text-2-cl">Reach more customers as you pay and get paid in crypto with our borderless payment technology on Exchange Pay & Exchange Marketplace</div>
      </div>
      <div class="features-img">
        <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/88caa6c83dd40b01883963276b50d605.png" alt="">
      </div>
      <div class="layout"></div>
    </li>
  </ul>
</div>
<!-- APP下载 图片右侧 -->
<div class="v5-appDownload effect-fade img-right">
  <div class="app-introduce">
    <h2 class="title-text text-1-cl">Trade Anytime, Anywhere.</h2>
    <div class="title-tip text-2-cl">Quality products for you</div>
    <ul class="intro-list">
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">Lightning Trading Performance</p>
          <span class="text-2-cl">Provides a variety of transaction types and quick order speed</span>
        </div>
      </li>
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">Custom Trading Panel</p>
          <span class="text-2-cl">Freely define trading layout according to different trading habits</span>
        </div>
      </li>
      <li class="intro-item">
        <svg aria-hidden="true" class="icon icon-24">
          <use xlink:href="#icon-v5_6"></use>
        </svg>
        <div>
          <p class="text-1-cl">Easy Asset Switching</p>
          <span class="text-2-cl">Easily transfer assets in your account with real-time digital asset overview</span>
        </div>
      </li>
    </ul>
    <div class="download">
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/dbcccab91097cd6100c744927fdf975a.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/49ed8f98cf300a298903329838dfcb43.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <div class="qrcode">
        <div class="qrcode-icon">
          <img src="{{sourceMap.home_download_3}}" alt="">
          <div class="hover-layout"></div>
        </div>
        <aside class="qrcode-preview text-1-bg box-shadow">
          <img src="{{ appDownLoad.app_page_url }}" alt="">
        </aside>
      </div>
    </div>
  </div>
  <div class="app-preview">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/6ab4da591d9f52dbec19f56e3ed0661c.png" alt="">
  </div>
</div>
<!-- APP下载 图片左侧 -->
<div class="v5-appDownload effect-fade img-left">
  <div class="app-preview">
    <img src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/cc9be28c951971588c84a3c731e3da4e.png" alt="">
  </div>
  <div class="app-introduce">
    <h2 class="title-text text-1-cl">Trade Anytime, Anywhere</h2>
    <div class="title-tip text-2-cl">Quality products for you</div>
    <div class="qrcode-img fill-5-bd">
      <img src="{{ appDownLoad.app_page_url }}" alt="">
    </div>
    <div class="download">
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/dbcccab91097cd6100c744927fdf975a.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
      <a href="/appDownload">
        <img class="download-store" src="https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/49ed8f98cf300a298903329838dfcb43.png" alt="">
        <div class="hover-layout"></div>
        <div class="active-layout"></div>
      </a>
    </div>
  </div>
</div>
<!-- 注册引导 换色 -->
<div class="v5-register-guide transparentColor effect-fade">
  <div class="register-guide-content" style="background-image: url('https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/d97d3010ef107e9db9ca0961e570003f.png');">
    <h2 class="title-text text-1-cl">Want To Start Trading Right Away?</h2>
    <div class="title-text-sub text-1-cl">Register your account immediately and start trading</div>
    <a href="/register" class="main-1-bg link-href text-4-cl">
      <span class="link-href_text">Register Now</span>
      <span class="link-icon">→</span>
      <div class="hover-layout"></div>
      <div class="active-layout"></div>
    </a>
  </div>
</div>
<!-- 注册引导 主色 -->
<div class="v5-register-guide mainColor effect-fade">
  <div class="register-guide-content" style="background-image: url('https://saas-test-bucket-21.s3.ap-northeast-1.amazonaws.com/1411/upload/5032e353317ea8a6ac5c2bb705c04558.png');">
    <h2 class="title-text text-4-cl">Want To Start Trading Right Away?</h2>
    <div class="title-text-sub text-4-cl">Register your account immediately and start trading</div>
    <a href="/register" class="text-4-bg link-href text-5-cl">
      <span class="link-href_text">Register Now</span>
      <span class="link-icon">→</span>
      <div class="hover-layout"></div>
      <div class="active-layout"></div>
    </a>
  </div>
</div>

...