shopify liquid 完成一个左图右文的组件

{%- if section.settings.background_type == 'boxed' -%}
  {%- assign is_boxed = true -%}
{%- else -%}
  {%- assign is_boxed = false -%}
{%- endif -%}
<style>
    .img_Productdescribe_left img{
        width: 100%;
    }
    @media (max-width:900px) {
        .img_Productdescribe_box {
            margin: 50px 0;
        }
        .img_Productdescribe_title{
            font-weight: 700;
            margin-top: 40px;
            line-height: 24px;
        }
        .img_Productdescribe_text {
            margin-top: 12px;
            line-height: 16px;
        }
        .img_Productdescribe_buttton{
            border-radius: 100px;
            width: 100%;
            font-weight: 500;
            background: #2E6963;
            display: flex;
            align-items: center;
            color: #fff;
            margin-top: 20px;
            justify-content: center;
        }
        
    }
    @media(min-width:901px) {
     
        #shopify-section-{{ section.id }} .img-describe-all{
            width: 100%;
            padding-top: {{section.settings.margin_top}}px;
            padding-bottom: {{section.settings.margin_bottom}}px;
        }
        #shopify-section-{{ section.id }} .img_Productdescribe_title {
            line-height: 48px;
            font-weight: 500;
        }
   
        #shopify-section-{{ section.id }} .img_Productdescribe_rightDiv_left{
            display: flex;
            justify-content: flex-start;
        }
        #shopify-section-{{ section.id }} .img_Productdescribe_rightDiv_center{
            display: flex;
            justify-content: center;
        }
        #shopify-section-{{ section.id }} .img_Productdescribe_rightDiv_right{
            display: flex;
            justify-content: flex-end;
        }
        .img_Productdescribe_text{
            line-height: 24px; 
        }
        .img_Productdescribe_box{
            display: flex;
        }
        .img_Productdescribe_left{
            border-radius: 16px;
            width: 50%;
            overflow: hidden;
        }
        .img_Productdescribe_left video{
            width: 100%;
        }
        .img_Productdescribe_left img{
            width: 100%;
        }
        .img_Productdescribe_right{
            width: 50%;
        }

        .img_Productdescribe_text{
            padding-top: 24px;
        }

        .img_Productdescribe_right{
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .img_Productdescribe_rightDiv{
            width: 100%;
        }
        .img_Productdescribe_boxs .img_Productdescribe_right{
            align-items: flex-end;
        }
        .img_Productdescribe_buttton{
            border-radius: 100px;
            font-weight: 500;
            height: 64px;
            background: #2E6963;
            display: flex;
            align-items: center;
            color: #fff;
            margin-top: 32px;
            justify-content: center;     
   
        }
    }

    @media(min-width:741px) and (max-width:1200px){
        .img_Productdescribe_text{
            line-height: 1.5;
        }
    }
</style>
    <div class="img-describe-all">
    <div class="{% if is_boxed %} container{% endif %}">
        <div class="img_Productdescribe_box {%if section.settings.check %} img_Productdescribe_boxs {%endif%}" {%if section.settings.check %} style="flex-flow:row-reverse" {%endif%}>
            <div class="img_Productdescribe_left {% if section.settings.ImgHover_img %}ImgHover_img{% endif %}"> 
               <div class="hover_img">
                    <img loading="lazy" src="{{section.settings.img | img_url: '750x'}}" alt="{{section.settings.img.alt}}" class="pc">
                    <img loading="lazy" src="{{section.settings.img_mobile | img_url: '750x'}}" alt="{{section.settings.img_mobile.alt}}" class="mobile">
               </div>
            </div>
            <div class="img_Productdescribe_right" style="{%if section.settings.check %} align-items: flex-start; {% else %} align-items: flex-end; {%endif%} background-color: {{ section.settings.bg_color}};" >
                <div class="img_Productdescribe_rightDiv img_Productdescribe_rightDiv_{{section.settings.position}}">
                    <div class="img_Productdescribe_rightDiv_box" style="width: {{section.settings.div_width}}%;">
                        <div class="img_Productdescribe_title my_h_40 my_m_18">
                            {{section.settings.title}}
                        </div>
                        <div class="img_Productdescribe_text my_h_18 my_m_14" style="width: {{section.settings.text_width}}%;">
                            {{ section.settings.text}}
                        </div>
                        {% if section.settings.button != blank %}
                            <a href="{{section.settings.link}}" class="img_Productdescribe_buttton button_small m18h_18 my6m_14">
                                {{section.settings.button}}
                            </a>
                        {% endif %} 
                    </div>
                </div>
            </div>
        </div>
   
    </div>

    </div>


  
  {% schema %}
  {
  "name": "Image describe",
  "class": "shopify-section--Image_describe",
  "settings": [
    {
        "type": "select",
        "id": "background_type",
        "label": "Background",
        "options": [
        {
            "value": "full_width",
            "label": "Full width"
        },
        {
            "value": "boxed",
            "label": "Boxed"
        }
        ],
        "default": "boxed"
        },
       {
            "type": "checkbox",
            "id": "ImgHover_img",
            "label": "ImgHover img",
            "default": true
        },
        {
            "type": "checkbox",
            "id": "check",
            "label": "Right picture and left text",
            "default": true
        },
        {
            "type": "range",
            "id": "margin_top",
            "label": "margin top",
            "unit": "px",
            "min": 0,
            "max": 120,
            "step": 2,
            "default": 0
          },
          {
            "type": "range",
            "id": "margin_bottom",
            "label": "margin bottom",
            "unit": "px",
            "min": 0,
            "max": 120,
            "step": 2,
            "default": 0
        },
        {
            "type": "range",
            "id": "margin_top_mobile",
            "label": "margin top mobile",
            "unit": "px",
            "min": 0,
            "max": 120,
            "step": 2,
            "default": 0
          },
          {
            "type": "range",
            "id": "margin_bottom_mobile",
            "label": "margin bottom mobile",
            "unit": "px",
            "min": 0,
            "max": 120,
            "step": 2,
            "default": 0
        },
        {
            "type": "image_picker",
            "id": "img",
            "label": "Img"
        },
        {
            "type": "image_picker",
            "id": "img_mobile",
            "label": "Img mobile"
        },
        {
            "type": "richtext",
            "id": "title",
            "label": "title"
        
        },
     
        {
            "type": "richtext",
            "id": "text",
            "label": "text"
        },
        {
            "type": "url",
            "id": "link",
            "label": "link"
        },
        {
            "type": "text",
            "id": "button",
            "label": "button",
            "default": "Shop Now"
        },
        {
            "type": "select",
            "id": "position",
            "label": "position",
            "options": [
                {
                    "value": "left",
                    "label": "left"
                },
                {
                    "value": "center",
                    "label": "center"
                },
                {
                    "value": "right",
                    "label": "right"
                }
            ]
        },
        {
            "type": "range",
            "id": "div_width",
            "label": "width",
            "unit": "%",
            "min": 1,
            "max": 100,
            "step": 1,
            "default": 82
        },
        {
            "type": "range",
            "id": "text_width",
            "label": "text width",
            "unit": "%",
            "min": 1,
            "max": 100,
            "step": 1,
            "default": 100
        },
        {
            "type": "color",
            "id": "bg_color",
            "label": "background color",
            "default": "#fff"
            
        }
  ],
  "blocks": [
    
    
  ],
  "presets": [
  {
  "name": "Image describe"
  }
  ]
  }
  {% endschema %}