start_controls_section('stages_section',['label'=>'流程板块']); $this->add_control('version',['type'=>\Elementor\Controls_Manager::RAW_HTML,'raw'=>'滚动生长流程 v1.4.2 · 建站老王
向下滚动：阶梯同步上升 → 露出固定轨道 → 方形从左边入场并滚动变圆。向上滚动：倒放。','content_classes'=>'elementor-panel-alert elementor-panel-alert-info']); $this->add_control('label',['label'=>'板块名称（供读屏识别）','type'=>\Elementor\Controls_Manager::TEXT,'default'=>'我们的工作流程']); $r=new \Elementor\Repeater(); $r->add_control('title',['label'=>'标题','type'=>\Elementor\Controls_Manager::TEXTAREA,'default'=>'流程标题','rows'=>2,'dynamic'=>['active'=>true],'description'=>'可以换行。']); $r->add_control('description',['label'=>'文字描述','type'=>\Elementor\Controls_Manager::TEXTAREA,'default'=>'在这里填写这一阶段的说明。','rows'=>4,'dynamic'=>['active'=>true]]); $r->add_control('background',['label'=>'此板块背景颜色','type'=>\Elementor\Controls_Manager::COLOR,'default'=>'#d41132']); $r->add_control('card_bg_image',['label'=>'此板块背景图片','type'=>\Elementor\Controls_Manager::MEDIA,'default'=>['url'=>''],'selectors'=>['{{WRAPPER}} .asp-card{{CURRENT_ITEM}}'=>'background-image: url("{{URL}}");'],'description'=>'未选择图片时使用背景颜色。']); $r->add_control('card_bg_size',['label'=>'此板块背景图片显示方式','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'cover','options'=>['cover'=>'覆盖区域','contain'=>'完整显示','auto'=>'原始大小'],'selectors'=>['{{WRAPPER}} .asp-card{{CURRENT_ITEM}}'=>'background-size: {{VALUE}};']]); $r->add_control('card_bg_position',['label'=>'此板块背景图片位置','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'center center','options'=>['left top'=>'左上','center top'=>'中上','right top'=>'右上','left center'=>'左中','center center'=>'居中','right center'=>'右中','left bottom'=>'左下','center bottom'=>'中下','right bottom'=>'右下'],'selectors'=>['{{WRAPPER}} .asp-card{{CURRENT_ITEM}}'=>'background-position: {{VALUE}};']]); $r->add_control('card_bg_repeat',['label'=>'此板块背景图片重复','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'no-repeat','options'=>['no-repeat'=>'不重复','repeat'=>'平铺','repeat-x'=>'横向重复','repeat-y'=>'纵向重复'],'selectors'=>['{{WRAPPER}} .asp-card{{CURRENT_ITEM}}'=>'background-repeat: {{VALUE}};']]); $r->add_control('text_color',['label'=>'此板块文字颜色','type'=>\Elementor\Controls_Manager::COLOR,'default'=>'#ffffff']); $defaults=[]; foreach ([['需求\n调研','了解目标、需求与现状，为接下来的工作确定清晰方向。'],['方案\n设计','把想法变成可讨论的方案，通过沟通和调整逐步完善细节。'],['精细\n实施','按照确认的方案推进制作，让每一个细节成为完整体验的一部分。'],['交付\n支持','完成检查与交付，并为后续使用、调整和成长提供支持。']] as $row) { $defaults[]=['title'=>str_replace('\\n',"\n",$row[0]),'description'=>$row[1],'background'=>'#d41132','text_color'=>'#ffffff']; } $this->add_control('stages',['label'=>'添加、删除或拖动排序','type'=>\Elementor\Controls_Manager::REPEATER,'fields'=>$r->get_controls(),'title_field'=>'{{{ title }}}','default'=>$defaults,'description'=>'默认 4 个，可自行增加或减少。超出每屏展示数量后，画面会随滚动横向移动。']); $this->add_control('heading_tag',['label'=>'标题 HTML 标签','type'=>\Elementor\Controls_Manager::SELECT,'options'=>['h2'=>'H2','h3'=>'H3','h4'=>'H4'],'default'=>'h3']); $this->add_control('show_numbers',['label'=>'显示顺序编号','type'=>\Elementor\Controls_Manager::SWITCHER,'return_value'=>'yes','default'=>'yes']); $this->end_controls_section(); $this->start_controls_section('top_section',['label'=>'顶部内容区']); $this->add_control('top_mode',['label'=>'顶部显示内容','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'text','options'=>['text'=>'文字 / 留白','template'=>'已保存的 Elementor 模板']]); $this->add_control('top_title',['label'=>'顶部标题','type'=>\Elementor\Controls_Manager::TEXT,'default'=>'','label_block'=>true,'dynamic'=>['active'=>true],'condition'=>['top_mode'=>'text']]); $this->add_control('top_content',['label'=>'顶部文本','type'=>\Elementor\Controls_Manager::WYSIWYG,'default'=>'','condition'=>['top_mode'=>'text'],'description'=>'可以放标题、说明或链接；留空时只保留顶部空间。']); $this->add_control('top_template_id',['label'=>'顶部模板 ID','type'=>\Elementor\Controls_Manager::NUMBER,'min'=>0,'step'=>1,'default'=>0,'condition'=>['top_mode'=>'template'],'description'=>'先将上方需要的组件组合保存为 Elementor 模板，再填写该模板 ID（模板列表的短代码中可看到）。只显示已发布且未设密码的模板。']); $this->add_control('top_help',['type'=>\Elementor\Controls_Manager::RAW_HTML,'raw'=>'顶部内容会和卡片一起固定。空间大小在「样式 → 布局与尺寸 → 彩色卡片高度」中调整；数值越小，顶部内容区越大。顶部模板不要再放本滚动组件。']); $this->end_controls_section(); $this->start_controls_section('scroll_section',['label'=>'滚动与编辑预览']); $this->add_control('preview_progress',['label'=>'编辑器预览进度（%）','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>0,'max'=>100,'step'=>1]],'default'=>['size'=>50],'description'=>'仅在 Elementor 编辑器中生效。前台按页面真实滚动进度播放。']); $this->add_control('scroll_distance',['label'=>'每个板块的滚动距离（屏高 %）','type'=>\Elementor\Controls_Manager::NUMBER,'min'=>25,'max'=>250,'step'=>5,'default'=>75,'description'=>'越大，完成动画需要滚动越久。与下方速度设置共同决定实际滚动长度。']); $this->add_control('overall_speed',['label'=>'整体播放速度（倍速）','type'=>\Elementor\Controls_Manager::NUMBER,'min'=>0.25,'max'=>2,'step'=>0.05,'default'=>0.65,'description'=>'默认 0.65 倍，滚动过程更慢。数值越小，同样滚轮距离推进越少；不会修改浏览器滚轮设置。']); $this->add_control('growth_speed',['label'=>'卡片增长速度（倍速）','type'=>\Elementor\Controls_Manager::NUMBER,'min'=>0.25,'max'=>2,'step'=>0.05,'default'=>1,'description'=>'单独调整阶梯增长：0.5 更慢，1 标准，2 更快。']); $this->add_control('shape_speed',['label'=>'图形滚动速度（倍速）','type'=>\Elementor\Controls_Manager::NUMBER,'min'=>0.25,'max'=>2,'step'=>0.05,'default'=>1,'description'=>'单独调整图形移动及变形速度。卡片上升较慢时会自动限制图形速度，避免它跑出颜色区域。']); $this->add_responsive_control('top_offset',['label'=>'固定顶部预留高度（px）','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>0,'max'=>240]],'default'=>['size'=>0],'selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-top-offset: {{SIZE}}px;'],'description'=>'有固定导航栏时填写导航栏高度，例如 80。WordPress 管理工具栏会自动识别。']); $this->add_control('mobile_mode',['label'=>'手机显示方式','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'animate','options'=>['animate'=>'保留滚动动画','static'=>'改为普通纵向卡片']]); $this->add_control('road_hint',['type'=>\Elementor\Controls_Manager::RAW_HTML,'raw'=>'轨道波浪由图形轮廓自动计算，随四边形 → 五边形 → 六边形 → … → 十二边形 → 圆形逐渐变平，以保持接触。']); $this->add_control('show_wave',['label'=>'显示波浪路径','type'=>\Elementor\Controls_Manager::SWITCHER,'return_value'=>'yes','default'=>'yes']); $this->add_control('show_center',['label'=>'显示虚线中心线','type'=>\Elementor\Controls_Manager::SWITCHER,'return_value'=>'yes','default'=>'yes']); $this->add_control('show_shape',['label'=>'显示滚动变形图形','type'=>\Elementor\Controls_Manager::SWITCHER,'return_value'=>'yes','default'=>'yes']); $this->end_controls_section(); $this->start_controls_section('layout_section',['label'=>'布局与尺寸','tab'=>\Elementor\Controls_Manager::TAB_STYLE]); $this->add_responsive_control('header_gap',['label'=>'顶部与生长板块间距（px）','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>0,'max'=>200,'step'=>1]],'default'=>['size'=>0],'render_type'=>'template','selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-header-gap: {{SIZE}}px;'],'description'=>'板块完全生长后仍保留此间距，可分别设置电脑、平板和手机。间距从可用高度中预留。']); $this->add_responsive_control('panel_height',['label'=>'彩色卡片高度（可用屏高 %）','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>55,'max'=>100,'step'=>1]],'default'=>['size'=>82],'tablet_default'=>['size'=>82],'mobile_default'=>['size'=>85],'render_type'=>'template','selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-panel-height: {{SIZE}};'],'description'=>'默认 82%，其余 18% 留给顶部内容。设为 100% 可恢复原来的满屏卡片。']); $this->add_responsive_control('text_bottom',['label'=>'标题和描述距底部（px）','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>0,'max'=>120,'step'=>1]],'default'=>['size'=>24],'render_type'=>'template','selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-text-bottom: {{SIZE}}px;'],'description'=>'越小越靠下。默认 24px；标题和描述作为一个整体移动。']); $this->add_responsive_control('visible_count',['label'=>'每屏展示几个板块','type'=>\Elementor\Controls_Manager::NUMBER,'min'=>1,'max'=>6,'step'=>1,'default'=>4,'tablet_default'=>2,'mobile_default'=>1,'selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-visible: {{VALUE}};']]); $this->add_responsive_control('gap',['label'=>'板块之间留白','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>0,'max'=>60]],'default'=>['size'=>12],'selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-gap: {{SIZE}}px;']]); $this->add_responsive_control('edge',['label'=>'画面四周留白','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>0,'max'=>80]],'default'=>['size'=>16],'mobile_default'=>['size'=>12],'selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-edge: {{SIZE}}px;']]); $this->add_responsive_control('card_padding',['label'=>'卡片文字内边距','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>8,'max'=>60]],'default'=>['size'=>24],'selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-card-padding: {{SIZE}}px;']]); $this->add_control('shape_size',['label'=>'图形相对大小（%）','type'=>\Elementor\Controls_Manager::NUMBER,'min'=>15,'max'=>45,'step'=>1,'default'=>29,'description'=>'以单张卡片宽度为基准，自动适应屏幕高度。']); $this->add_control('background',['label'=>'板块外侧背景颜色','type'=>\Elementor\Controls_Manager::COLOR,'default'=>'#ffffff','selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-background: {{VALUE}};']]); $this->add_control('line_color',['label'=>'图形与线条颜色','type'=>\Elementor\Controls_Manager::COLOR,'default'=>'#ffffff','selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-line-color: {{VALUE}};']]); $this->add_control('line_width',['label'=>'线条粗细','type'=>\Elementor\Controls_Manager::SLIDER,'range'=>['px'=>['min'=>0.5,'max'=>5,'step'=>0.5]],'default'=>['size'=>1.5],'selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-line-width: {{SIZE}};']]); $this->end_controls_section(); $this->start_controls_section('top_style_section',['label'=>'顶部标题与文本','tab'=>\Elementor\Controls_Manager::TAB_STYLE]); $this->add_control('top_background',['label'=>'顶部背景颜色','type'=>\Elementor\Controls_Manager::COLOR,'selectors'=>['{{WRAPPER}} .asp-header'=>'background-color: {{VALUE}};']]); $this->add_control('top_bg_image',['label'=>'顶部背景图片','type'=>\Elementor\Controls_Manager::MEDIA,'default'=>['url'=>''],'selectors'=>['{{WRAPPER}} .asp-header'=>'background-image: url("{{URL}}");'],'description'=>'未选择图片时使用背景颜色。']); $this->add_control('top_bg_size',['label'=>'顶部背景图片显示方式','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'cover','options'=>['cover'=>'覆盖区域','contain'=>'完整显示','auto'=>'原始大小'],'selectors'=>['{{WRAPPER}} .asp-header'=>'background-size: {{VALUE}};']]); $this->add_control('top_bg_position',['label'=>'顶部背景图片位置','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'center center','options'=>['left top'=>'左上','center top'=>'中上','right top'=>'右上','left center'=>'左中','center center'=>'居中','right center'=>'右中','left bottom'=>'左下','center bottom'=>'中下','right bottom'=>'右下'],'selectors'=>['{{WRAPPER}} .asp-header'=>'background-position: {{VALUE}};']]); $this->add_control('top_bg_repeat',['label'=>'顶部背景图片重复','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'no-repeat','options'=>['no-repeat'=>'不重复','repeat'=>'平铺','repeat-x'=>'横向重复','repeat-y'=>'纵向重复'],'selectors'=>['{{WRAPPER}} .asp-header'=>'background-repeat: {{VALUE}};']]); $this->add_responsive_control('heading_vertical',['label'=>'标题区垂直对齐','type'=>\Elementor\Controls_Manager::SELECT,'default'=>'flex-start','options'=>['flex-start'=>'顶部','center'=>'居中','flex-end'=>'底部'],'selectors'=>['{{WRAPPER}} .asp-root'=>'--asp-heading-align: {{VALUE}};']]); $this->add_responsive_control('top_padding',['label'=>'顶部内边距','type'=>\Elementor\Controls_Manager::DIMENSIONS,'size_units'=>['px','%','em'],'selectors'=>['{{WRAPPER}} .asp-header-inner'=>'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};']]); $this->add_group_control(\Elementor\Group_Control_Typography::get_type(),['name'=>'top_title_typography','label'=>'顶部标题字体','selector'=>'{{WRAPPER}} .asp-top-title']); $this->add_control('top_title_color',['label'=>'顶部标题颜色','type'=>\Elementor\Controls_Manager::COLOR,'selectors'=>['{{WRAPPER}} .asp-top-title'=>'color: {{VALUE}};']]); $this->add_responsive_control('top_title_align',['label'=>'顶部标题对齐','type'=>\Elementor\Controls_Manager::CHOOSE,'options'=>['left'=>['title'=>'居左','icon'=>'eicon-text-align-left'],'center'=>['title'=>'居中','icon'=>'eicon-text-align-center'],'right'=>['title'=>'居右','icon'=>'eicon-text-align-right']],'selectors'=>['{{WRAPPER}} .asp-top-title'=>'text-align: {{VALUE}};']]); $this->add_group_control(\Elementor\Group_Control_Typography::get_type(),['name'=>'top_text_typography','label'=>'顶部文本字体','selector'=>'{{WRAPPER}} .asp-top-text']); $this->add_control('top_text_color',['label'=>'顶部文本颜色','type'=>\Elementor\Controls_Manager::COLOR,'selectors'=>['{{WRAPPER}} .asp-top-text'=>'color: {{VALUE}};']]); $this->add_responsive_control('top_text_align',['label'=>'顶部文本对齐','type'=>\Elementor\Controls_Manager::CHOOSE,'options'=>['left'=>['title'=>'居左','icon'=>'eicon-text-align-left'],'center'=>['title'=>'居中','icon'=>'eicon-text-align-center'],'right'=>['title'=>'居右','icon'=>'eicon-text-align-right']],'selectors'=>['{{WRAPPER}} .asp-top-text'=>'text-align: {{VALUE}};']]); $this->end_controls_section(); $this->start_controls_section('text_section',['label'=>'标题与描述字体','tab'=>\Elementor\Controls_Manager::TAB_STYLE]); $this->add_group_control(\Elementor\Group_Control_Typography::get_type(),['name'=>'title_font','label'=>'标题字体','selector'=>'{{WRAPPER}} .asp-title']); $this->add_group_control(\Elementor\Group_Control_Typography::get_type(),['name'=>'description_font','label'=>'描述字体','selector'=>'{{WRAPPER}} .asp-description']); $this->end_controls_section(); } protected function render() { if (self::$rendering_top) { return; } $s=$this->get_settings_for_display(); $items=is_array($s['stages']??null)?$s['stages']:[]; if (!$items) { echo '
请在「流程板块」中添加至少一个板块。
'; return; } $tag=in_array($s['heading_tag']??'', ['h2','h3','h4'], true)?$s['heading_tag']:'h3'; $config=['distance'=>max(25,min(250,(float)($s['scroll_distance']??75))),'preview'=>max(0,min(100,(float)($s['preview_progress']['size']??50))),'shapeSize'=>max(15,min(45,(float)($s['shape_size']??29))),'overallSpeed'=>max(.25,min(2,(float)($s['overall_speed']??.65))),'growthSpeed'=>max(.25,min(2,(float)($s['growth_speed']??1))),'shapeSpeed'=>max(.25,min(2,(float)($s['shape_speed']??1))),'mobileStatic'=>($s['mobile_mode']??'animate')==='static']; ?>
post_type==='elementor_library' && $template->post_status==='publish' && $template->post_password==='') { self::$rendering_top=true; // Elementor renders published template markup and its registered widgets. // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped try { echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($template_id, true); } finally { self::$rendering_top=false; } } } else { if (trim((string)($s['top_title']??''))!=='') { echo '

'.esc_html($s['top_title']).'

'; } if (trim((string)($s['top_content']??''))!=='') { echo '
'.wp_kses_post($s['top_content']).'
'; } } ?>
$item) { $bg=sanitize_hex_color($item['background']??'')?:'#d41132'; $text=sanitize_hex_color($item['text_color']??'')?:'#ffffff'; ?>
< class="asp-title">>