Some static pages that do not implement functions
Bottom navigation bar “Questions and Answers” page
Goal: Implement the static structure and styling of the Q&A page
Operating steps
Copy the style of the resource package to the pages/Question/ directory, and then write the component code in index.js in this directory:
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
const Question = () => {
return (
<div className={styles. root}>
{/* top navigation bar */}
<NavBar>Questions and Answers</NavBar>
{/* list of questions and answers */}
<div className="question-list">
<div className="question-item">
<div className="left">
<h3>As a person who has experienced in the IT industry, what do you want to say to the younger generation? </h3>
<div className="info">
<span>1000+ Likes </span>
<span>Comments 500 + </span>
<span>1 hour ago</span>
</div>
</div>
<div className="right">
<img
src="//i2.wp.com/pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
alt=""
/>
</div>
</div>
<div className="question-item">
<div className="left">
<h3>As a person who has experienced in the IT industry, what do you want to say to the younger generation? </h3>
<div className="info">
<span>1000+ Likes </span>
<span>Comments 500 + </span>
<span>1 hour ago</span>
</div>
</div>
<div className="right">
<img
src="//i2.wp.com/pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
alt=""
/>
</div>
</div>
<div className="question-item">
<div className="left">
<h3>As a person who has experienced in the IT industry, what do you want to say to the younger generation? </h3>
<div className="info">
<span>1000+ Likes </span>
<span>Comments 500 + </span>
<span>1 hour ago</span>
</div>
</div>
<div className="right">
<img
src="//i2.wp.com/pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
alt=""
/>
</div>
</div>
<div className="question-item">
<div className="left">
<h3>As a person who has experienced in the IT industry, what do you want to say to the younger generation? </h3>
<div className="info">
<span>1000+ Likes </span>
<span>Comments 500 + </span>
<span>1 hour ago</span>
</div>
</div>
<div className="right">
<img
src="//i2.wp.com/pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
alt=""
/>
</div>
</div>
<div className="question-item">
<div className="left">
<h3>As a person who has experienced in the IT industry, what do you want to say to the younger generation? </h3>
<div className="info">
<span>1000+ Likes </span>
<span>Comments 500 + </span>
<span>1 hour ago</span>
</div>
</div>
<div className="right">
<img
src="//i2.wp.com/pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73"
alt=""
/>
</div>
</div>
</div>
</div>
)
}
export default Question
Bottom navigation bar “Video” page
Goal: Implement the static structure and style of the video page
Operating steps
Copy the style of the resource pack to the pages/Video/ directory, and then write the component code in index.js in this directory:
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
const Video = () => {
return (
<div className={styles. root}>
{/* top navigation bar */}
<NavBar>Video</NavBar>
{/* video list */}
<div className="video-list">
<div className="video-item">
<h3 className="title">
Gree Electric will continue to develop the mobile phone business and will cover the entire industry!
</h3>
<div className="play">
<video src="//i2.wp.com/ips.ifeng.com/video19.ifeng.com/video09/2021/05/26/p6803231351488126976-102-8-161249.mp4?reqtype=tsl & amp; vid=2c791e3b-444e-4578-83e3-f4808228ae3b & amp;uid=0puFR4 & amp;from=v_Free & amp;pver=vHTML5Player_v2.0.0 & amp;sver= & amp;se= & amp;cat= & amp;ptype = & amp;platform=pc & amp;sourceType=h5 &dt=1622096387396 &gid=6a4poXmsep1E &sign=39f76885daca6503ebf90acbfffc1ff1 &tm=1622096387396"></video>
</div>
<span>1563 plays</span>
</div>
<div className="video-item">
<h3 className="title">
Have you used 5G yet? my country's 5G mobile phone terminals reached 310 million, accounting for more than 80% of the world
</h3>
<div className="play">
<video src="//i2.wp.com/ips.ifeng.com/video19.ifeng.com/video09/2021/05/26/p6803268684325330944-102-8-184104.mp4?reqtype=tsl & amp; vid=ec74b1e4-d1fa-488b-aaf5-71984ca7d13e & amp;uid=1Vun5L & amp;from=v_Free & amp;pver=vHTML5Player_v2.0.0 & amp;sver= & amp;se= & amp;cat= & amp;ptype = & amp;platform=pc & amp;sourceType=h5 &dt=1622096310639 &gid=fg3vsXmseXFv &sign=38e7c790561e1fd1b57e61a1cbd8031c &tm=1622096310639"></video >
</div>
<span>1563 plays</span>
</div>
</div>
</div>
)
}
export default Video
Personal Center “User Feedback” page
Goal: Implement the static structure and style of the user feedback page
Operating steps
Copy the style of the resource package to the pages/Profile/Feedback/ directory, and then write the component code in index.js in this directory:
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)}>Feedback</NavBar>
<div className="wrapper">
<div className="feedback-item">
<p className="title">Introduction</p>
<div className="textarea-wrap">
<textarea className="textarea" placeholder="Please enter"></textarea>
<div className="count">0/100</div>
</div>
<ImagePicker files={[]} multiple />
<p className="image-picker-desc">Up to 6 pictures, no more than 20M for a single picture.</p>
</div>
<div className="feedback-item">
<p className="title">Contact</p>
<InputItem placeholder="Please enter a mobile phone number for easy contact (optional)" />
</div>
<div className="feedback-item feedback-submit">
<button>Submit Feedback</button>
</div>
</div>
</div>
)
}
export default Profile Feedback