rank_backend/.figma/0_2/index.jsx

import React from 'react';

import styles from './index.module.scss';

const Component = () => {
  return (
    <div className={styles.lunacyBackground}>
      <div className={styles.autoWrapper}>
        <img src="../image/mhcw5e6e-krjj7v6.svg" className={styles.frame} />
        <p className={styles.text}>AI棒榜</p>
        <img src="../image/mhcw5e6d-58eu18x.svg" className={styles.frame2} />
      </div>
      <div className={styles.frame3}>
        <p className={styles.text2}>微短剧爆火</p>
        <p className={styles.text3}>中国“血统”的ReelShort征服美国</p>
      </div>
      <img src="../image/mhcw5e6d-8fwj6ae.svg" className={styles.frame4} />
      <div className={styles.autoWrapper2}>
        <p className={styles.a2}>日榜 2025年10月19日/周日</p>
        <img src="../image/mhcw5e6e-zupmsq9.svg" className={styles.frame5} />
      </div>
      <div className={styles.autoWrapper3}>
        <div className={styles.frame6}>
          <p className={styles.a22}>全部</p>
        </div>
        <div className={styles.frame7}>
          <p className={styles.a23}>小说</p>
        </div>
        <div className={styles.frame7}>
          <p className={styles.a23}>动漫</p>
        </div>
        <div className={styles.frame7}>
          <p className={styles.a23}>短剧</p>
        </div>
      </div>
      <div className={styles.frame39}>
        <div className={styles.frame17}>
          <div className={styles.frame16}>
            <img src="../image/mhcw5e6e-u278byr.png" className={styles.frame8} />
            <div className={styles.autoWrapper7}>
              <p className={styles.a24}>奶团</p>
              <div className={styles.autoWrapper5}>
                <div className={styles.autoWrapper4}>
                  <img
                    src="../image/mhcw5e6e-5gc00qy.svg"
                    className={styles.frame9}
                  />
                  <img
                    src="../image/mhcw5e6e-19alacf.svg"
                    className={styles.frame10}
                  />
                  <img
                    src="../image/mhcw5e6e-7kk4jjy.svg"
                    className={styles.frame11}
                  />
                </div>
                <p className={styles.a25}>
                  剧场名：爱微剧场&nbsp;&nbsp;&nbsp;
                  <br />
                  承制 ：妙想制片厂&nbsp;&nbsp;&nbsp;&nbsp;
                  <br />
                  版权：可梦&nbsp;&nbsp;
                </p>
              </div>
              <div className={styles.autoWrapper6}>
                <img
                  src="../image/mhcw5e6e-6bvf0dd.svg"
                  className={styles.frame12}
                />
                <p className={styles.a26}>9999W</p>
                <img
                  src="../image/mhcw5e6e-5hzy6ee.svg"
                  className={styles.frame13}
                />
                <p className={styles.a26}>374W</p>
              </div>
            </div>
            <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame14} />
            <p className={styles.a27}>300W</p>
            <div className={styles.frame15}>
              <p className={styles.a1}>1</p>
            </div>
          </div>
          <p className={styles.a28}>用户评论总结</p>
        </div>
        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame18} />
        <div className={styles.frame23}>
          <img src="../image/mhcw5e6e-kdsx4vj.png" className={styles.frame8} />
          <div className={styles.autoWrapper9}>
            <p className={styles.a24}>奶团</p>
            <div className={styles.frame20}>
              <img src="../image/mhcw5e6e-5gc00qy.svg" className={styles.frame19} />
              <p className={styles.a25}>剧场名：爱微剧场&nbsp;&nbsp;&nbsp;</p>
            </div>
            <div className={styles.autoWrapper8}>
              <img src="../image/mhcw5e6e-6kmpbld.svg" className={styles.frame12} />
              <p className={styles.a26}>9999W</p>
              <img src="../image/mhcw5e6e-l10msdd.svg" className={styles.frame13} />
              <p className={styles.a26}>374W</p>
            </div>
          </div>
          <div className={styles.autoWrapper11}>
            <div className={styles.autoWrapper10}>
              <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame21} />
              <p className={styles.a29}>300W</p>
            </div>
            <p className={styles.a210}>用户评论总结</p>
          </div>
          <div className={styles.frame22}>
            <p className={styles.a1}>2</p>
          </div>
        </div>
        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame24} />
        <div className={styles.frame28}>
          <div className={styles.frame27}>
            <img src="../image/mhcw5e6e-myt1pbz.png" className={styles.frame8} />
            <div className={styles.autoWrapper15}>
              <p className={styles.a24}>奶团</p>
              <div className={styles.autoWrapper13}>
                <div className={styles.autoWrapper12}>
                  <img
                    src="../image/mhcw5e6e-5gc00qy.svg"
                    className={styles.frame9}
                  />
                  <img
                    src="../image/mhcw5e6e-19alacf.svg"
                    className={styles.frame10}
                  />
                </div>
                <p className={styles.a25}>
                  剧场名：爱微剧场&nbsp;&nbsp;&nbsp;
                  <br />
                  承制 ：妙想制片厂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </p>
              </div>
              <div className={styles.autoWrapper14}>
                <img
                  src="../image/mhcw5e6e-6kmpbld.svg"
                  className={styles.frame12}
                />
                <p className={styles.a26}>9999W</p>
                <img
                  src="../image/mhcw5e6e-l10msdd.svg"
                  className={styles.frame13}
                />
                <p className={styles.a26}>374W</p>
              </div>
            </div>
            <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame25} />
            <p className={styles.a27}>300W</p>
            <div className={styles.frame26}>
              <p className={styles.a1}>3</p>
            </div>
          </div>
          <p className={styles.a211}>用户评论总结</p>
        </div>
        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame24} />
        <div className={styles.frame33}>
          <div className={styles.frame30}>
            <div className={styles.frame29}>
              <p className={styles.a1}>4</p>
            </div>
          </div>
          <div className={styles.autoWrapper17}>
            <p className={styles.a24}>奶团</p>
            <div className={styles.frame32}>
              <img src="../image/mhcw5e6e-cpzpf35.svg" className={styles.frame31} />
              <p className={styles.a25}>
                剧场名：爱微剧场&nbsp;&nbsp;&nbsp;
                <br />
                承制 ：妙想制片厂&nbsp;&nbsp;&nbsp;&nbsp;
                <br />
                版权：可梦&nbsp;&nbsp;
              </p>
            </div>
            <div className={styles.autoWrapper16}>
              <img src="../image/mhcw5e6e-6kmpbld.svg" className={styles.frame12} />
              <p className={styles.a26}>9999W</p>
              <img src="../image/mhcw5e6e-l10msdd.svg" className={styles.frame13} />
              <p className={styles.a26}>374W</p>
            </div>
          </div>
          <div className={styles.autoWrapper19}>
            <div className={styles.autoWrapper18}>
              <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame21} />
              <p className={styles.a29}>300W</p>
            </div>
            <p className={styles.a210}>用户评论总结</p>
          </div>
        </div>
        <img src="../image/mhcw5e6e-epiv9as.svg" className={styles.frame24} />
        <div className={styles.frame38}>
          <div className={styles.frame37}>
            <div className={styles.frame35}>
              <div className={styles.frame34}>
                <p className={styles.a1}>5</p>
              </div>
            </div>
            <div className={styles.autoWrapper17}>
              <p className={styles.a24}>奶团</p>
              <div className={styles.frame32}>
                <img
                  src="../image/mhcw5e6e-cpzpf35.svg"
                  className={styles.frame31}
                />
                <p className={styles.a25}>
                  剧场名：爱微剧场&nbsp;&nbsp;&nbsp;
                  <br />
                  承制 ：妙想制片厂&nbsp;&nbsp;&nbsp;&nbsp;
                  <br />
                  版权：可梦&nbsp;&nbsp;
                </p>
              </div>
              <div className={styles.autoWrapper16}>
                <img
                  src="../image/mhcw5e6e-6kmpbld.svg"
                  className={styles.frame12}
                />
                <p className={styles.a26}>9999W</p>
                <img
                  src="../image/mhcw5e6e-l10msdd.svg"
                  className={styles.frame13}
                />
                <p className={styles.a26}>374W</p>
              </div>
            </div>
            <img src="../image/mhcw5e6e-5x5ujui.svg" className={styles.frame36} />
            <p className={styles.a27}>300W</p>
          </div>
          <p className={styles.a212}>用户评论总结</p>
        </div>
      </div>
    </div>
  );
}

export default Component;