@use './index';


.mn-footer-ad-pc {
    color: white;
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 80px;
    background: index.$themeColor;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
} 
.mn-footer-ad-m {
    display: none;
}



@media only screen and (max-width:960px) {
    .mn-footer-ad-pc {
      display: none;
    }
  
    .mn-footer-ad-m  {
      display: block;
      width: 90%;
      max-width: 750px;
      margin: auto;
      position: relative;
    }
  
    .mn-footer-ad-m .fixed_collect_close {
      position: absolute;
      top: 6vw;
      right: 2.5vw;
      width: 3vw;
      min-width: 15px;
    }
}

 <div id="mn-footer-ad">
            <div className="mn-footer-ad-pc">
                <div className="opa_img">
                    <img src="https://pteplus.com.au/img/all-in-one-icon/shan@2x.png" alt="" />
                </div>
                <div className="app_adverttext">
                    <p>限时领取PTE大礼包！</p>
                    <p>立马获取价值<span style={{color: "red"}}>AU$200</span>PTE练习材料！</p>
                </div>
                <div className="collect_form">
                    <img className="form_icon" src="/assets/images/icon_phone.png" alt="" />
                    <input className="form_input" type="text" placeholder="请输入您的手机号" maxlength="11" />
                    <button className="form_submit">免费领取</button>
                </div>
                <img className="fixed_collect_close" data-clsoe="" src="/assets/images/icon_close.png" alt="" />
            </div>

            <div className="mn-footer-ad-m">
                <img className="fixed_collect_bg" data-bg="" src="/assets/images/fix_footer_bg_m.png" alt="" />
                <img className="fixed_collect_close" data-clsoe="" src="/assets/images/icon_close.png" alt="" />
            </div>
        </div>