Skip to content

M
mr-julyedu
Commit 978a7ae5 by FE
Options

share basic complete

parent 9f3a7d5a
Showing with 297 additions and 2 deletions
src/common/HeaderBar/index.js
......@@ -33,7 +33,7 @@ class HeaderBar extends Component {
}
render() {
const { toHref } = this.props
const { toHref, home } = this.props;
return (
<div className="detail-header" style={{...this.props.style}}>
{
......@@ -57,6 +57,10 @@ class HeaderBar extends Component {
this.props.delete &&
<i className='iconfont iconiconfront-56' onClick={this.props.toDelete}></i>
}
{
home &&
<i className="iconfont iconshouye-xianxing"></i>
}
</div>
);
}
......
src/components/python/index.js 0 → 100644
import React, { Component } from 'react';
import classnames from 'classnames';
import {HeaderBar} from '@/common';
import { browser } from '@/utils';
import './index.scss';
class PythonClass extends Component {
constructor(props) {
super(props);
this.state = {
isWechat: browser.isWechat,
isShare: true,
entryMode: 1, // 0：扫码页，1:落地页
}
}
render() {
const { isWechat, isShare, entryMode } = this.state;
return (
<>
<HeaderBar
title='Python基础语法'
arrow={true}
home={true}
/>
<PythonContent
isWechat={isWechat}
isShare={isShare}
entryMode={entryMode}
/>
</>
);
}
}
function PythonContent(props) {
const { isWechat, isShare, entryMode } = props;
return (
<div className={classnames(
"python-container",
{
'python-container--page': entryMode === 1
})}>
{/* 微信 */}
{
(entryMode === 0 && isWechat) &&
<div className="python-header">
<p className="python-wechat__title">请点击右上角分享</p>
<i className="iconfont iconyindao"></i>
</div>
}
{/* 非微信 */}
{
(entryMode === 0 && !isWechat) &&
<div className="python-header">
<p className="python-wechat__title">
{isShare? '快分享给好友吧' : '快发给好友求助吧'}
</p>
</div>
}
<div className="python-content">
<div className="python-user">
<div className="python-user__portrait">
<img src="" alt=""/>
</div>
<h2 className="python-user__id">这里是用户ID</h2>
{/* 分享 */}
{
(entryMode === 0 && isShare) &&
<p className="python-user__desc">
完成了
<span>【练习-听见无脸男的声音】</span>
</p>
}
{
(entryMode === 1 && isShare) &&
<p className="python-user__desc">
在
<span>【练习-听见无脸男的声音】</span>完成了<br />
练习-听见无脸男的声音
</p>
}
{/* 求助 */}
{
(entryMode === 0 && !isShare) &&
<p className="python-user__desc">
在
<span>【练习-听见无脸男的声音】</span>
遇到了困难
</p>
}
{
(entryMode === 1 && !isShare) &&
<p className="python-user__desc">
在
<span>【练习-听见无脸男的声音】</span>的<br />
课程-萌新的进化遇到了困难
</p>
}
</div>
<h4 className="python-code__title">
{ entryMode === 1 && isShare? '这是Ta的第723行代码' : '运行结果'}
</h4>
<div className="python-code__content">
code
</div>
<h4 className="python-code__title">代码</h4>
<div className="python-code__content">
code
{
(entryMode === 1 && isShare) &&
<button className="python-button python-button__execute">运行看看</button>
}
</div>
</div>
{
entryMode === 1 &&
<button className="python-button python-button__study">我也要学Python</button>
}
</div>
);
}
export default PythonClass;
\ No newline at end of file
src/components/python/index.scss 0 → 100644
.python-container {
padding: 0 8px 29px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/python-bg.png');
background-size: cover;
}
.python-container--page {
padding-top: 50px;
}
.python-header {
position: relative;
height: 100px;
padding-top: 34px;
box-sizing: border-box;
.iconfont {
position: absolute;
top: -6px;
right: 40px;
font-size: 38px;
color: #fff;
}
}
.python-wechat__title {
margin: 0;
font-size: 17px;
color: #FCFF1D;
text-align: center;
line-height: 1;
}
.python-content {
padding-bottom: 37px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/python-content-bg.png');
background-size: cover;
}
.python-user {
position: relative;
margin: 0 5px;
padding-top: 45px;
border-bottom: 1px dashed #000;
}
.python-user__portrait {
position: absolute;
top: -30px;
left: 0;
right: 0;
width: 60px;
height: 60px;
margin: auto;
padding: 5px;
border-radius: 50%;
box-sizing: border-box;
background-color: #fff;
img {
display: block;
width: 100%;
}
}
.python-user__id {
margin: 0;
font-size: 15px;
font-weight: 500;
color: #111;
text-align: center;
line-height: 1;
}
.python-user__desc {
height: 48px;
margin: 4px 0;
font-size: 16px;
color: #333;
text-align: center;
span {
color: #2D57F0;
}
}
.python-code__title {
position: relative;
margin: 32px 16px 21px;
padding-left: 16px;
font-size: 17px;
font-weight: 600;
color: #2D56F0;
line-height: 1;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
height: 12px;
margin: auto 0;
background-color: #2D56F0;
}
}
.python-code__content {
position: relative;
height: 171px;
margin: 0 16px;
border-radius: 5px;
border: 1px solid #67E4FF;
box-sizing: border-box;
background-color: #272822;
}
.python-button {
padding: 0;
border-style: none;
cursor: pointer;
outline: none;
}
.python-button__study {
display: block;
width: 233px;
height: 44px;
margin: 35px auto 0;
border-radius: 22px;
font-size: 16px;
font-weight: 500;
color: #2D56F0;
line-height: 44px;
background-color: #FFF95B;
box-shadow: 0px 5px 0px rgba(255,210,0,1);
}
.python-button__execute {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 110px;
height: 32px;
margin: auto;
border-radius: 16px;
font-size: 15px;
color: #fff;
line-height: 32px;
background-color: #0099FF;
}
\ No newline at end of file
src/router/router-config.js
......@@ -31,6 +31,7 @@ const CampTest = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/compo
const CampResolve = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/components/video/camp/campResolve'))
const ShareCourse = loadable(() => import(/* webpackChunkName: 'ShareCourse'*/'@/components/ShareCourse/index'))
const Country = loadable(() => import(/* webpackChunkName: 'Country' */'@/components/country/index'))
const PythonClass = loadable(() => import(/* webpackChunkName: 'Country' */'@/components/python/index'))
export default [
{
path: '/',
......@@ -168,5 +169,9 @@ export default [
{
path: '/aist-share',
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share'))
}
},
{
path: '/python',
component: PythonClass
},
]
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment