全局组件CSS的代码模式下（字体、颜色、版心宽度、母版标题）

:root {
    --color:#0B50C1;
    --fcolor:#e60100;
    --bgcolor:#f5f5f5;
    --padding: clamp(1.875rem, 1.546rem + 1.32vw, 3.125rem) 0px;
}
body {
    background-color: white;
    word-break: break-word;
    font-family: poppins, Arial, helvetica, sans-serif;
}
@font-face {
    font-family: "poppins";
    font-weight: normal;
    src: url(https://omo-oss-file.thefastfile.com/portal-saas/pg2024032914373722588/cms/file/poppins-regular.ttf);
    font-display: swap;
}
#Cross-border .main .Printing {
    max-width: 1600px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#Cross-border .main .title_style {
    font-size: var(--fs40);
    color: #000;
    line-height: 2;
}

◐ 手机端客服固定在底部（使用后台在线客服）

◐ 在线客服添加返回顶部（后台需要选择：在线客服4） 

◐ PC端右边询盘组件样式，会自动添加名称（目前3款样式输入框填写：1/2/3）

◐ 导航下拉添加类名.active 下拉滚动50px（控制面板开启）

◐ 页面顺滑的滚动（控制面板开启）

◐ 禁止全站的文字复制和图片下载（控制面板开启）（.copy-ok 添加类名开启文字复制功能）

◐ 屏蔽页面的全部链接（控制面板开启）

◐ 屏蔽手机端访问（控制面板开启）

◐ 屏蔽页面上图片的alt/title提示（控制面板开启）

◐ 开启全局默认动画滚动，默认都是向上展示（控制面板开启）（.no-animate 添加类名将停止动画）

◐ 翻页样式 （默认）

◐  智慧客服按钮悬浮拖拽（默认）

◐ 邮箱自动添加链接（默认）

◐ 自定义浏览器滚动条（默认）

◐ 将文本是邮箱转为 mailto 链接（默认）

◐ 表单提示错误样式（控制面板修改词条）

◐ 图片alt标题设置（控制面板修改内容）

◐ 电子邮箱链接添加主题 + 外链优化（外链会新窗口打开）

◐ 智慧客服图标位置可以贴附移动

◐ 循环体没有内容时（控制面板修改文字）

◐ SVG调取  例如：<svg-icon name="Facebook"></svg-icon>

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gap-4 { gap: 4px; }
.gap-5 { gap: 5px; }
/* *一直到 gap-40**/

@media (max-width: 1024px) {
.ipad-cols-2 { grid-template-columns: repeat(2, 1fr); }
/** 同理 ipad-cols-3 到 ipad-cols-10 **//
.ipad-gap-4 { gap: 4px; }
/** 同理 ipad-gap-5 到 ipad-gap-40 **/
}

@media (max-width: 768px) {
.mo-cols-2 { grid-template-columns: repeat(2, 1fr); }
/** mo-cols-3 到 mo-cols-10 **/
.mo-gap-4 { gap: 4px; }
/** mo-gap-5 到 mo-gap-40 **/
}

用法举例（结合 HTML）：
class="grid cols-4 gap-10 ipad-cols-2 ipad-gap-8 mo-cols-1 mo-gap-4">

这个在：
桌面端显示 4 列、间距 10px；
iPad 显示 2 列、间距 8px；
手机端显示 1 列（未定义会继承或默认）、间距 20px。

写法的方式有2种
第一种：CSS方式 font-size:var(--fs12) ;font-size:var(--fs14) ; -----  font-size:var(--fs72) ;
第二种：class方式 class="fs12 fs14 fs72" ，类名从12到72之间（双数） fs12/fs14/fs20/fs48/fs60 --  fs72

样式的方式有2种
第一种：class="btn-solid"
第二种：class="btn-white"

.aspect-1-1 { aspect-ratio:1 / 1; } 
.aspect-2-1 { aspect-ratio:2 / 1; } 
.aspect-3-1 { aspect-ratio:3 / 1; } .aspect-3-2 { aspect-ratio:3 / 2; } 
.aspect-4-1 { aspect-ratio:4 / 1; } .aspect-4-2 { aspect-ratio:4 / 2; } .aspect-4-3 { aspect-ratio:4 / 3; } 
.aspect-5-1 { aspect-ratio:5 / 1; } .aspect-5-2 { aspect-ratio:5 / 2; } .aspect-5-3 { aspect-ratio:5 / 3; } .aspect-5-4 { aspect-ratio:5 / 4; } 
.aspect-16-9 { aspect-ratio:16 / 9; }

选项卡同步切换功能

支持两种交互方式：鼠标悬停(mouseenter)和点击(click)
自动为第一个选项卡项添加active类
通过事件委托实现选项卡同步切换

<div id="tab-hover">

 <!-- 第一个选项卡组 -->
 <div class="p_list">
   <div class="p_loopitem">选项卡1</div>
   <div class="p_loopitem">选项卡2</div>
   <div class="p_loopitem">选项卡3</div>
 </div>
 <!-- 第二个选项卡组（与第一个同步） -->
 <div class="p_list">
   <div class="p_loopitem">内容面板1</div>
   <div class="p_loopitem">内容面板2</div>
   <div class="p_loopitem">内容面板3</div>
 </div>
</div>

<div id="tab-click">
 <!-- 同上结构，用于点击切换 -->
 <div class="p_list">...</div>
 <div class="p_list">...</div>
</div>

SVG调取  例如：<svg-icon name="Facebook"></svg-icon>

使用方式：在要使用的网站地址页面 按ESC下面的 ~ 调取控制面板 -- 点击要用的图标会自动复制调用方式，到设计器粘贴到要放的位置即可

备注：使用（跨境精灵云-Quick Link）才能按快捷键

1. 添加基础类名
在需要动画的元素上添加两个基础类：

wow （用于WOW.js识别）
fadeInLeft（Animate.css的必备基类）

2. 指定动画效果
添加所需的动画类名，例如：

<div class="wow fadeInRight">内容</div>

3. 配置动画参数（可选）
通过data-属性控制动画行为：

data-wow-duration：动画时长（如：2s）
data-wow-delay：延迟时间（如：0.5s）
data-wow-offset：触发距离（元素距离视窗底部多少像素时触发，如：100）
data-wow-iteration：重复次数（如：3，infinite）

默认开启手风琴功能，支持鼠标移入展开；

开启方式：class="accordion"  data-open-index="0" data-open-width="60"

data-open-index="0" （默认开启哪个 0代表第一个）当前的那个会添加类名 .active

data-open-width="30"（展开的宽度，单位为百分百 例如：30 == 30%）

若未设置属性 data-swiper data-Swiper-Open="mo"：手机端仍会启用手风琴效果（适配触屏）；

若设置了属性 data-swiper data-Swiper-Open="mo"：则手机端禁用手风琴逻辑， ipad 平板和手机都会禁用手风琴逻辑，可配合 Swiper.js 实现移动端轮播。

<!-- 手风琴实例1：始终开启 -->
<div class="accordion" data-open-index="0" data-open-width="60">
 <div>Item 1</div>
 <div>Item 2</div>
 <div>Item 3</div>
</div>

<!-- 手风琴实例2：手机端禁用 -->
<div class="accordion" data-swiper data-Swiper-Open="mo" data-breakpoints="1" data-open-index="0" data-open-width="30">
 <div>Slide A</div>
 <div>Slide B</div>
 <div>Slide C</div>
</div>
 

给你想要点击放大的图片组的父级添加类名  .modelTostParents

点击 .modelTostParents 内任意图片时，会弹出全屏弹窗显示大图

弹窗中主图可通过左右按钮切换图片

下方缩略图展示8张，点击即可切换主图

按键盘方向键← →可切换，ESC关闭弹窗

点击弹窗背景也会关闭弹窗

弹窗不会修改原始 DOM，只新增一个 .modelTost 弹窗层

<div class="modelTostParents">
 <div><img src="https://example.com/image1.png"></div>
 <div><img src="https://example.com/image1.png"></div>
 <div><img src="https://example.com/image1.png"></div>
</div>

· 邮箱输入自动补全（dome代码直接替换）
在用户输入邮箱时，根据输入的内容智能推荐常见邮箱域名后缀，支持键盘上下箭头选择和回车确认，提高填写效率和准确度。

表单元素（邮箱）：

<div class="${elemId} ${styleClass} form-group {{#eq ${state} 'hidden'}}formHide{{/eq}}" needjs="true" {{#if
    ${validate}.required.value}}required{{/if}}> {{#if ${showLabel}}} <label class="p_label"> <span
            class="s_label">{{${label}}}</span> </label> {{/if}} {{#eq ${state} 'readOnly'}} <p
        class="s_input p_formValue">{{${value}}}</p> {{/eq}} <div class="{{#eq ${state} 'readOnly'}}hide{{/eq}}">
        <div class="input-group suggest-wrapper"> {{#eq ${type} 'countryMobile'}} <div class="input-group-prepend">
                <select class="form-control p_phoneCode" name="phoneDail"></select> <input type="hidden"
                    name="phoneIso" /> </div> {{/eq}} <input type="text"
                class="form-control s_form-control s_input p_input clueEmail" name="{{${cuname}}}" data-name="${elemId}"
                {{#if ${showPlaceholder}}}placeholder="{{${placeholder}}}" {{/if}} {{#if ${value}}}value="{{${value}}}"
                {{/if}} {{#eq ${state} 'disabled' }}disabled{{/eq}}>
            <ul class="emailSuggestList email-suggest-list"></ul>
            <div class="invalid-feedback"></div>
        </div>
    </div>
</div>
 

国际电话区号选择 （dome代码直接替换）
支持输入或选择国际电话区号，自动匹配过滤区号列表，并支持点击选择，同时将区号及对应国家代码存储到隐藏字段，方便后端处理。

表单元素--单行文本：表单类型 手机/电话（国际码）

<div class="${elemId} ${styleClass} form-group {{#eq ${state} 'hidden'}}formHide{{/eq}}" needjs="true" {{#if
    ${validate}.required.value}}required{{/if}}> {{#if ${showLabel}}} <label class="p_label"> <span
            class="s_label">{{${label}}}</span> </label> {{/if}} {{#eq ${state} 'readOnly'}} <p
        class="s_input p_formValue">{{${value}}}</p> {{/eq}} <div class="{{#eq ${state} 'readOnly'}}hide{{/eq}}">
        <div class="input-group"> {{#eq ${type} 'countryMobile'}} <div class="input-group-prepend">
                <div class="p_phoneCode">
                    <div class="form-control p_currentCode"> <span class="hide control_Naner">+86</span> <input
                            type="text" class="form-control s_form-control s_input p_input dialInput"
                            name="{{${cuname}}}" data-name="${elemId}" required placeholder="区号" /> </div>
                    <ul class="p_codeList"></ul> <input type="hidden" name="phoneDail" value="+86"> <input type="hidden"
                        name="phoneIso" value="CN">
                </div>
            </div> {{/eq}} {{#eq ${type} 'countryTel'}} <div class="input-group-prepend">
                <div class="p_phoneCode">
                    <div class="form-control p_currentCode">
                        <div class="form-control p_currentCode"> <span class="hide control_Naner">+86</span> <input
                                type="text" class="form-control s_form-control s_input p_input dialInput"
                                name="{{${cuname}}}" data-name="${elemId}" required placeholder="区号" /> </div>
                        <ul class="p_codeList"></ul>
                    </div>
                    <ul class="p_codeList">
                        <li class="p_codeItem p_active"> <span class="p_enDial">+86</span> <span
                                class="p_enCode">CN</span> </li>
                    </ul> <input type="hidden" name="phoneDail" value="+86"> <input type="hidden" name="phoneIso"
                        value="CN">
                </div>
            </div> {{/eq}} <input type="text" class="form-control s_form-control s_input p_input" name="{{${cuname}}}"
                data-name="${elemId}" {{#if ${showPlaceholder}}}placeholder="{{${placeholder}}}" {{/if}} {{#if
                ${value}}}value="{{${value}}}" {{/if}} {{#eq ${state} 'disabled' }}disabled{{/eq}}>
            <div class="invalid-feedback"></div>
        </div>
    </div>
</div>

给循环体添加 Swiper 滚动插件

无需开发者手动调用 Swiper 初始化代码 
如果你想在你的网站中快速部署多个 Swiper 实例，配合 data-* 属性，这段代码几乎就是开箱即用的

如果在调用位置添加 swiper_External 类名切换按钮就会在Slide的外部（不加就会在内部）。

<div data-swiper data-autoplay="3000" data-navigation="true" data-pagination="bullets" data-breakpoints="4,2,1"> 
 <div>Slide 1</div> 
 <div>Slide 2</div> 
 <div>Slide 3</div> 
</div>

对于3端是否选择开启可单写 pc, ipad, mo （没写就是默认3端开启）

类型：boolean

默认值：true

data-Swiper-Open="pc"

data-Swiper-Open="pc,ipad"

data-Swiper-Open="pc, ipad, mo"

是否开启循环模式（无缝滚动 true / false）

类型：boolean

默认值：true

data-loop="true"

自动播放间隔，单位毫秒。设置为0或不设置则关闭自动播放

number (毫秒) | false

data-autoplay="3000"

切换动画速度，单位毫秒

类型：number

默认值：3000

data-speed="500"

slide 之间间距，单位px 格式为 "pc, ipad, mo"

类型：number

默认值：20,15,10

data-space-between="20,15,10"

是否启用居中模式(是否选择开启可单写 pc, ipad, mo)

类型：boolean

默认值：false

data-centered-slides="true"

data-centered-slides="pc"

data-centered-slides="pc, ipad, mo"

分页器类型，支持 bullets, fraction, progressbar, 设置 false 关闭分页

类型：string | false

默认值：bullets

使用方式：data-pagination="bullets" 

是否开启自由滑动模式，无吸附效果 true / false

类型：boolean

默认值：false

data-free-mode="true"

是否显示左右切换按钮 true / false

类型：boolean

默认值：false

data-navigation="true"

自定义切换按钮 （data-navigation="false"， data-nav-id="a"上下对应，按钮添加类名“custom_navigation”）

 <div data-swiper data-navigation="false" data-nav-id="a">

 <div>Slide 1</div>
 <div>Slide 2</div>
 <div>Slide 3</div>

</div>

<!-- 自定义切换按钮 -->
<div class="custom_navigation" data-nav-id="a">
  <div class="swiper-prev">上一页</div>
  <div class="swiper-next">下一页</div>
</div>

 每页显示多少个 slide，支持数字或 auto

类型：number | auto

默认值：4

data-slides-per-view="auto"

每页显示多少个 slide，支持数字或 auto

类型：number

默认值：true

data-slides-per-group="1"

响应式断点配置，格式为 "pc, ipad, mo"

类型：string (格式: "4,2,1")

默认值：4,2,1

data-breakpoints="4,2,1"

Swiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical 。

类型：string

默认值：horizontal

data-direction="vertical"

设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）。

类型：string

默认值：slide

data-effect="fade"

在loop 模式下使用 slidesPerview:'auto' ，还需使用该参数设置所要用到的loop 个数(一般设置大于可视slide个数2个即可)。

类型：number

默认值：undefined

data-looped-slides="3"

触摸比例。触摸距离与slide滑动距离的比率。
默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动

类型：number

默认值：1

data-touch-ratio="0.5"

thumbs组件专门用于制作带缩略图的swiper，比使用controller组件更为简便，且在loop状态下更友好。

类型：需手动初始化主轮播，示例中自动初始化了缩略图

默认值：false

<!-- 主轮播 -->
<div id="mainSwiper" data-swiper data-slides-per-view="1" data-loop="true" data-pagination="bullets" data-navigation="true">
  <div>主幻灯片 1</div>
  <div>主幻灯片 2</div>
  <div>主幻灯片 3</div>
</div>

<!-- 缩略图 -->
<div data-swiper data-slides-per-view="4" data-loop="true" data-free-mode="true" data-watch-slides-progress="true" data-thumb-for="#mainSwiper">
  <div>缩略图 1</div>
  <div>缩略图 2</div>
  <div>缩略图 3</div>
  <div>缩略图 4</div>
</div>

<script>
  const mainSwiper = new Swiper('#mainSwiper', {
    loop: true,
    navigation: {
      nextEl: '#mainSwiper .swiper-button-next',
      prevEl: '#mainSwiper .swiper-button-prev',
    },
    pagination: {
      el: '#mainSwiper .swiper-pagination',
      clickable: true,
    },
  });

  const thumbSwiper = new Swiper('[data-thumb-for="#mainSwiper"]', {
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
    loop: true,
  });

  mainSwiper.controller.control = thumbSwiper;
  thumbSwiper.controller.control = mainSwiper;
</script>