Skip to content

M
mr-julyedu
Commit 46feb184 by xuzhenghua
Options

6

parent 0531f09b
Showing with 514 additions and 28 deletions
.idea/workspace.xml
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="60bc3527-5f9e-436f-8ed9-968e6eddd66e" name="Default Changelist" comment="" /> <list default="true" id="60bc3527-5f9e-436f-8ed9-968e6eddd66e" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/components/Index/course.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/Index/course.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/Index/index.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/Index/scroll.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Index/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Index/index.js" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/node_modules/" /> <ignored path="$PROJECT_DIR$/node_modules/" />
<ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" /> <ignored path="$PROJECT_DIR$/temp/" />
...@@ -13,14 +20,47 @@ ...@@ -13,14 +20,47 @@
<option name="LAST_RESOLUTION" value="IGNORE" /> <option name="LAST_RESOLUTION" value="IGNORE" />
</component> </component>
<component name="FileEditorManager"> <component name="FileEditorManager">
<leaf> <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="42">
<caret line="2" column="21" lean-forward="true" selection-start-line="2" selection-end-line="3" />
<folding>
<element signature="e#0#41#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/components/Index/course.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="672">
<caret line="32" column="17" lean-forward="true" selection-start-line="32" selection-start-column="17" selection-end-line="32" selection-end-column="17" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/main.js"> <entry file="file://$PROJECT_DIR$/src/components/Index/course.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="168"> <state relative-caret-position="231">
<caret line="8" lean-forward="true" selection-start-line="8" selection-end-line="8" /> <caret line="11" column="43" lean-forward="true" selection-start-line="11" selection-start-column="43" selection-end-line="11" selection-end-column="43" />
<folding> <folding>
<element signature="e#0#26#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/common/Tabbar/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="198">
<caret line="35" column="17" lean-forward="true" selection-start-line="35" selection-start-column="17" selection-end-line="35" selection-end-column="17" />
<folding>
<element signature="e#0#41#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
...@@ -28,10 +68,37 @@ ...@@ -28,10 +68,37 @@
</file> </file>
</leaf> </leaf>
</component> </component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="CSS File" />
<option value="JavaScript File" />
</list>
</option>
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>sass</find>
<find>setState</find>
<find>data</find>
<find>constructor</find>
</findStrings>
</component>
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component> </component>
<component name="ProjectFrameBounds" extendedState="6" fullScreen="true"> <component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/src/components/Index/scroll.js" />
<option value="$PROJECT_DIR$/src/components/Index/index.css" />
<option value="$PROJECT_DIR$/src/components/Index/index.js" />
<option value="$PROJECT_DIR$/src/components/Index/course.css" />
<option value="$PROJECT_DIR$/src/components/Index/course.js" />
</list>
</option>
</component>
<component name="ProjectFrameBounds" fullScreen="true">
<option name="x" value="38" /> <option name="x" value="38" />
<option name="y" value="23" /> <option name="y" value="23" />
<option name="width" value="1402" /> <option name="width" value="1402" />
...@@ -42,7 +109,6 @@ ...@@ -42,7 +109,6 @@
<foldersAlwaysOnTop value="true" /> <foldersAlwaysOnTop value="true" />
</navigator> </navigator>
<panes> <panes>
<pane id="Scope" />
<pane id="ProjectPane"> <pane id="ProjectPane">
<subPane> <subPane>
<expand> <expand>
...@@ -53,39 +119,70 @@ ...@@ -53,39 +119,70 @@
<path> <path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" /> <item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" /> <item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="public" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="common" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="common" type="462c0819:PsiDirectoryNode" />
<item name="Tabbar" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="components" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path> <path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" /> <item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" /> <item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="scripts" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
<item name="components" type="462c0819:PsiDirectoryNode" />
<item name="classify" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path> <path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" /> <item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" /> <item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
<item name="components" type="462c0819:PsiDirectoryNode" />
<item name="Index" type="462c0819:PsiDirectoryNode" />
</path> </path>
<path> <path>
<item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" /> <item name="mr-julyedu" type="b2602c69:ProjectViewProjectNode" />
<item name="mr-julyedu" type="462c0819:PsiDirectoryNode" /> <item name="mr-julyedu" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" /> <item name="src" type="462c0819:PsiDirectoryNode" />
<item name="components" type="462c0819:PsiDirectoryNode" /> <item name="components" type="462c0819:PsiDirectoryNode" />
<item name="study" type="462c0819:PsiDirectoryNode" />
</path> </path>
</expand> </expand>
<select /> <select />
</subPane> </subPane>
</pane> </pane>
<pane id="Scope" />
</panes> </panes>
</component> </component>
<component name="PropertiesComponent"> <component name="PropertiesComponent">
<property name="WebServerToolWindowFactoryState" value="false" /> <property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" /> <property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="list.type.of.created.stylesheet" value="CSS" />
<property name="node.js.detected.package.eslint" value="true" /> <property name="node.js.detected.package.eslint" value="true" />
<property name="node.js.path.for.package.eslint" value="project" /> <property name="node.js.path.for.package.eslint" value="project" />
<property name="node.js.selected.package.eslint" value="$PROJECT_DIR$/node_modules/eslint" /> <property name="node.js.selected.package.eslint" value="$PROJECT_DIR$/node_modules/eslint" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" /> <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" /> <property name="nodejs_npm_path_reset_for_default_project" value="true" />
</component> </component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/components/Index" />
</key>
</component>
<component name="RunDashboard"> <component name="RunDashboard">
<option name="ruleStates"> <option name="ruleStates">
<list> <list>
...@@ -108,24 +205,22 @@ ...@@ -108,24 +205,22 @@
<option name="number" value="Default" /> <option name="number" value="Default" />
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1555481508116</updated> <updated>1555481508116</updated>
<workItem from="1555481509516" duration="544000" /> <workItem from="1555481509516" duration="2393000" />
<workItem from="1555494639819" duration="2193000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="544000" /> <option name="totallyTimeSpent" value="4586000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="0" y="0" width="1440" height="900" extended-state="6" /> <frame x="0" y="0" width="1440" height="900" extended-state="6" />
<editor active="true" />
<layout> <layout>
<window_info id="npm" side_tool="true" /> <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.21564482" />
<window_info id="Favorites" side_tool="true" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24947146" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" /> <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" /> <window_info id="npm" order="2" side_tool="true" />
<window_info anchor="bottom" id="Version Control" /> <window_info id="Favorites" order="3" side_tool="true" />
<window_info anchor="bottom" id="Terminal" />
<window_info anchor="bottom" id="Event Log" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" /> <window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" /> <window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" /> <window_info anchor="bottom" id="Run" order="2" />
...@@ -133,6 +228,10 @@ ...@@ -133,6 +228,10 @@
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" /> <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" /> <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" /> <window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" />
<window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
<window_info anchor="bottom" id="Terminal" order="10" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" /> <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" /> <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" /> <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
...@@ -142,22 +241,128 @@ ...@@ -142,22 +241,128 @@
<option name="version" value="1" /> <option name="version" value="1" />
</component> </component>
<component name="editorHistoryManager"> <component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/src/components/my/index.js">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/package-lock.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="279">
<caret line="11508" column="20" lean-forward="true" selection-start-line="11508" selection-start-column="20" selection-end-line="11508" selection-end-column="20" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/menu.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-576">
<caret line="2" column="28" selection-start-line="2" selection-start-column="24" selection-end-line="2" selection-end-column="28" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/main.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="252">
<caret line="12" column="13" lean-forward="true" selection-start-line="12" selection-start-column="13" selection-end-line="12" selection-end-column="13" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/App.test.js">
<provider selected="true" editor-type-id="text-editor">
<state>
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/router.js">
<provider selected="true" editor-type-id="text-editor">
<state>
<folding>
<element signature="e#0#25#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/scroll.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="126">
<caret line="6" column="17" selection-end-line="14" selection-end-column="21" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/public/favicon.ico">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/src/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="126">
<caret line="6" column="21" lean-forward="true" selection-start-line="6" selection-end-line="7" />
<folding>
<element signature="e#0#26#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/index.css">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.css">
<provider selected="true" editor-type-id="text-editor">
<state>
<caret lean-forward="true" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/classify/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="273">
<caret line="13" lean-forward="true" selection-end-line="14" selection-end-column="24" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/study/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="168">
<caret line="8" column="18" lean-forward="true" selection-start-line="6" selection-start-column="12" selection-end-line="8" selection-end-column="18" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/course.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="672">
<caret line="32" column="17" lean-forward="true" selection-start-line="32" selection-start-column="17" selection-end-line="32" selection-end-column="17" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/components/Index/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="42">
<caret line="2" column="21" lean-forward="true" selection-start-line="2" selection-end-line="3" />
<folding>
<element signature="e#0#41#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/common/Tabbar/index.js"> <entry file="file://$PROJECT_DIR$/src/common/Tabbar/index.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="237"> <state relative-caret-position="198">
<caret line="36" column="47" lean-forward="true" selection-start-line="36" selection-start-column="47" selection-end-line="36" selection-end-column="47" /> <caret line="35" column="17" lean-forward="true" selection-start-line="35" selection-start-column="17" selection-end-line="35" selection-end-column="17" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
</entry> </entry>
<entry file="file://$PROJECT_DIR$/src/main.js"> <entry file="file://$PROJECT_DIR$/src/components/Index/course.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="168"> <state relative-caret-position="231">
<caret line="8" lean-forward="true" selection-start-line="8" selection-end-line="8" /> <caret line="11" column="43" lean-forward="true" selection-start-line="11" selection-start-column="43" selection-end-line="11" selection-end-column="43" />
<folding> <folding>
<element signature="e#0#26#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
</state> </state>
</provider> </provider>
......
src/components/Index/course.css 0 → 100644
.course-detail {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;}
li {
width: 47.8%;
margin-top: 15px;
margin-bottom: 5px;
}
img {
width: 100%;
height: 119px;
}
.course-title {
font-size: 13px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 19px;
margin-top: 9px;
}
.course-price {
margin-top: 15px;
}
.new {
color: #FF2121;
font-size: 15px;
}
.old {
color: #999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
.isbuy {
margin-top:15px;
width: 61px;
height: 18px;
background-color: #09f;
border-radius: 9px;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 18px;
}
src/components/Index/course.js 0 → 100644
import React, {Component} from 'react';
import './course.css';
class Classify extends Component {
constructor(props) {
super(props)
this.state = {
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 200,
'price1': 2000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 100,
'price1': 1000
}
]
}
}
render() {
return (
<div>
<ul className="course-detail">
{
this.state.dataList.map((item, index) => {
return (
<li key={index}>
<a href="">
<img src={item.src} alt=""/>
<p className="course-title">{item.title}</p>
</a>
if({item.isbuy === 0}){
<p className="course-price">
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
} else {
<a href="" className="isbuy">已购买</a>
}
</li>
)
})
}
</ul>
</div>
)
}
}
export default Classify;
\ No newline at end of file
src/components/Index/index.css 0 → 100644
body,html {
background-color: #fff;
}
.tabbox {
width: 100%;
height: 103px;
padding: 20px;
}
.tabbox ul {
display: flex;
justify-content: space-between;
list-style: none;
}
.tabbox ul li img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.tabbox ul li span {
color: #606060;
font-size: 13px;
display: block;
margin-top: 10px;
}
\ No newline at end of file
src/components/Index/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Carousel, WingBlank } from 'antd-mobile';
import './index.css';
class Index extends Component { class Index extends Component {
state = {
data: ['1', '2', '3'],
imgHeight: 176,
}
componentDidMount() {
// simulate img loading
setTimeout(() => {
this.setState({
data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
});
}, 100);
}
render() { render() {
return ( return (
<div> <div>
首页 <WingBlank>
<Carousel className="space-carousel"
frameOverflow="visible"
cellSpacing={10}
slideWidth={0.8}
autoplay
infinite
beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
afterChange={index => this.setState({ slideIndex: index })}
>
{this.state.data.map((val, index) => (
<a
key={val}
href="http://www.alipay.com"
style={{
display: 'block',
position: 'relative',
top: this.state.slideIndex === index ? -10 : 0,
height: this.state.imgHeight,
boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
}}
>
<img
src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
alt=""
style={{ width: '100%', verticalAlign: 'top' }}
onLoad={() => {
// fire window resize event to change height
window.dispatchEvent(new Event('resize'));
this.setState({ imgHeight: 'auto' });
}}
/>
</a>
))}
</Carousel>
</WingBlank>
<div className="tabbox">
<ul>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt="" /><span>公开课</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt="" /><span>精品特惠</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt="" /><span>赚奖学金</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt="" /><span>每日一题</span></li>
<li><img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt="" /><span>企业内训</span></li>
</ul>
</div>
</div> </div>
) );
} }
} }
......
src/components/Index/scroll.js 0 → 100644
import React, { Component } from 'react';
class Index extends Component {
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ 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