web-backset.cn/apps/web/src/view/Subscribe/index.tsx

import Checkmark12Filled from "@ricons/fluent/Checkmark12Filled";
import { Icon } from "@ricons/utils";
import "./index.less";

function Subscribe() {
  return (
    <div className="subscribe">
      <div className="container">
        <h2>订阅</h2>
        <h4>订阅后，全站免费，无任何其他附加收费</h4>
        <h4>IF 忘记备注、开通慢，加微信： x-arctanx</h4>
        <div className="options overlay">
          <section>
            <h3>微信</h3>
            <p>请备注: 手机号</p>
            <img src="/wx256.jpg" />
          </section>
          <section>
            <h3>支付宝</h3>
            <p>请备注: 手机号</p>
            <img src="/ali256.jpg" />
          </section>
          {/* popular */}
          <section className="popular">
            <div className="original">￥499</div>
            <div className="price">256</div>
            <h3>年度订阅</h3>
            <p>
              12个月内，在线学习所有课程(视频、文字)，快速掌握各种指标编写技术。随着菜场猪肉价格波动，订阅价格也会产生波动，越早订阅越划算
            </p>
            {/* <button className="bs btn br3" style={{ width: "100%" }}>
              订阅
            </button> */}
            <ul>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>全部课程观看免费</div>
              </li>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>私人小群</div>
              </li>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>物料下载</div>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </div>
  );
}

export default Subscribe;