React移动端项目-02

一些不实装功能的静态页面

底部导航栏“问答”页面

目标：实现问答页面的静态结构和样式

操作步骤

将资源包的样式拷贝到 pages/Question/目录下，然后在该目录下的 index.js中编写组件代码：

import NavBar from '@/components/NavBar'
import styles from './index.module.scss'

const Question = () => {
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar>问答</NavBar>

      {/* 问答列表 */}
      <div className="question-list">
        <div className="question-item">
          <div className="left">
            <h3>作为 IT 行业的过来人，你有什么话想对后辈说的？</h3>
            <div className="info">
              <span>赞同 1000+</span>
              <span>评论 500+</span>
              <span>1小时前</span>
            </div>
          </div>
          <div className="right">
            <img
              src="https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
              alt=""
            />
          </div>
        </div>
        <div className="question-item">
          <div className="left">
            <h3>作为 IT 行业的过来人，你有什么话想对后辈说的？</h3>
            <div className="info">
              <span>赞同 1000+</span>
              <span>评论 500+</span>
              <span>1小时前</span>
            </div>
          </div>
          <div className="right">
            <img
              src="https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
              alt=""
            />
          </div>
        </div>
        <div className="question-item">
          <div className="left">
            <h3>作为 IT 行业的过来人，你有什么话想对后辈说的？</h3>
            <div className="info">
              <span>赞同 1000+</span>
              <span>评论 500+</span>
              <span>1小时前</span>
            </div>
          </div>
          <div className="right">
            <img
              src="https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
              alt=""
            />
          </div>
        </div>
        <div className="question-item">
          <div className="left">
            <h3>作为 IT 行业的过来人，你有什么话想对后辈说的？</h3>
            <div className="info">
              <span>赞同 1000+</span>
              <span>评论 500+</span>
              <span>1小时前</span>
            </div>
          </div>
          <div className="right">
            <img
              src="https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
              alt=""
            />
          </div>
        </div>
        <div className="question-item">
          <div className="left">
            <h3>作为 IT 行业的过来人，你有什么话想对后辈说的？</h3>
            <div className="info">
              <span>赞同 1000+</span>
              <span>评论 500+</span>
              <span>1小时前</span>
            </div>
          </div>
          <div className="right">
            <img
              src="https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default Question

底部导航栏“视频”页面

目标：实现视频页面的静态结构和样式

操作步骤

将资源包的样式拷贝到 pages/Video/目录下，然后在该目录下的 index.js中编写组件代码：

import NavBar from '@/components/NavBar'
import styles from './index.module.scss'

const Video = () => {
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar>视频</NavBar>

      {/* 视频列表 */}
      <div className="video-list">
        <div className="video-item">
          <h3 className="title">
            格力电器将继续发展手机业务，并将向全产业覆盖！
          </h3>
          <div className="play">
            <video src="https://ips.ifeng.com/video19.ifeng.com/video09/2021/05/26/p6803231351488126976-102-8-161249.mp4?reqtype=tsl&vid=2c791e3b-444e-4578-83e3-f4808228ae3b&uid=0puFR4&from=v_Free&pver=vHTML5Player_v2.0.0&sver=&se=&cat=&ptype=&platform=pc&sourceType=h5&dt=1622096387396&gid=6a4poXmsep1E&sign=39f76885daca6503ebf90acbfffc1ff1&tm=1622096387396"></video>
          </div>
          <span>1563次播放</span>
        </div>

        <div className="video-item">
          <h3 className="title">
            你用上5G了吗？我国5G手机终端达3.1亿 占全球比例超80％
          </h3>
          <div className="play">
            <video src="https://ips.ifeng.com/video19.ifeng.com/video09/2021/05/26/p6803268684325330944-102-8-184104.mp4?reqtype=tsl&vid=ec74b1e4-d1fa-488b-aaf5-71984ca7d13e&uid=1Vun5L&from=v_Free&pver=vHTML5Player_v2.0.0&sver=&se=&cat=&ptype=&platform=pc&sourceType=h5&dt=1622096310639&gid=fg3vsXmseXFv&sign=38e7c790561e1fd1b57e61a1cbd8031c&tm=1622096310639"></video>
          </div>
          <span>1563次播放</span>
        </div>
      </div>
    </div>
  )
}

export default Video

个人中心“用户反馈”页面

目标：实现用户反馈页面的静态结构和样式

操作步骤

将资源包的样式拷贝到 pages/Profile/Feedback/目录下，然后在该目录下的 index.js中编写组件代码：

import NavBar from '@/components/NavBar'
import { ImagePicker, InputItem } from 'antd-mobile'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'

const ProfileFeedback = () => {
  const history = useHistory()

  return (
    <div className={styles.root}>
      <NavBar onLeftClick={() => history.go(-1)}>意见反馈</NavBar>

      <div className="wrapper">
        <div className="feedback-item">
          <p className="title">简介</p>
          <div className="textarea-wrap">
            <textarea className="textarea" placeholder="请输入"></textarea>
            <div className="count">0/100</div>
          </div>
          <ImagePicker files={[]} multiple />
          <p className="image-picker-desc">最多6张，单个图片不超过20M。</p>
        </div>

        <div className="feedback-item">
          <p className="title">联系方式</p>
          <InputItem placeholder="请输入手机号码便于联系（非必填）" />
        </div>

        <div className="feedback-item feedback-submit">
          <button>提交反馈</button>
        </div>
      </div>
    </div>
  )
}

export default ProfileFeedback