Skip to content

M
mr-julyedu
Commit 17c60f42 by zhoule
Options

代提交：首页更改

parent 5819b984
Showing with 540 additions and 67 deletions
src/components/Index/index.js
......@@ -14,7 +14,9 @@ import TopSwiper from "./TopSwiper"
// import ExpandActiveToast from './expandActiveToast'
import TeacherList from "./tercher"
import Teaching from "./teaching"
import Translate from "./translate"
import Review from "./review"
import Robot from "./robot"
//tan框
import UserGift from "src/common/UserGift"
......@@ -240,7 +242,13 @@ class Index extends Component {
<p className="borderTop" />
{/* <botton className="fix"><a href="https://live.easyliao.com/live/chat.do?c=27526&g=53481&config=81372"><span>点击</span><span>咨询</span></a></botton> */}
<Teaching />
<p className="borderTop" />
<Translate />
<p className="borderTop" />
<Review />
<p className="borderTop" />
<Robot />
<p className="borderTop" />
{/* <AllCourseNavigation /> */}
{/* 直播间预约 */}
......
src/components/Index/index.scss
@import "src/assets/css/variable";
#chatBtn {
bottom: 60px !important;
}
......@@ -77,6 +78,7 @@
.swiper-slide {
height: 187px !important;
img {
width: 100%;
height: 187px;
......@@ -183,14 +185,16 @@
display: inline-block;
}
}
/*
会员广告位
*/
.vip{
.vip {
height: 95px;
padding-top: 15px;
position: relative;
.govip{
.govip {
position: absolute;
display: block;
width: 48px;
......@@ -199,24 +203,29 @@
bottom: 13px;
}
}
.teacher{
.teacher {
padding: 15px 15px 40px 15px;
.cont{
.cont {
font-size: 16px;
color: #000000;
font-weight: 400;
padding: 6px 0 10px 0;
}
.teabox{
.teabox {
// width: 167px;
.tealist{
.tealist {
display: flex;
// height: 147px;
border-bottom: 1px solid #F3F4F8;
.pic{
.pic {
width: 30%;
img{
img {
margin-top: 15%;
width: 89px;
height: 103px;
......@@ -224,19 +233,23 @@
border-radius: 6px;
}
}
.detail{
.detail {
flex: 1;
.name{
.name {
margin-top: 10px;
display: flex;
align-items: center;
b{
b {
font-size: 18px;
font-weight: 600;
}
}
.title{
.title {
background: #E2BA7E;
line-height: 20px;
......@@ -245,8 +258,9 @@
border-radius: 3px;
}
}
.desc{
height:70px;
.desc {
height: 70px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
......@@ -263,10 +277,12 @@
}
.active1 {
// height:200px;
height: auto !important;
.desc{
.desc {
height: auto !important;
// word-break: break-all;
text-overflow: clip !important;
......@@ -275,35 +291,58 @@
// margin-bottom: 8px;
}
}
.consult{
height: 41px;
display: flex;
justify-content: center;
padding: 20px;
a{
.consult {
height: 41px;
display: flex;
justify-content: center;
padding: 20px;
a {
display: flex;
width: 223px;
height: 41px;
background: linear-gradient(167deg, #E2BA7E 0%, #E1A64D 100%);
border-radius: 20px;
color: #fff;
font-size: 16px;
justify-content: center;
align-items: center;
}
}
.consult1 {
height: 41px;
display: flex;
justify-content: center;
padding: 20px;
a {
display: flex;
background: #0099FF;
border-radius: 20px;
width: 223px;
height: 41px;
background: linear-gradient(167deg, #E2BA7E 0%, #E1A64D 100%);
border-radius: 20px;
color: #fff;
font-size: 16px;
justify-content: center;
align-items: center;
height: 41px;
color: #fff;
font-size: 16px;
justify-content: center;
align-items: center;
}
}
}
.teaching{
}
}
.teaching {
.cont{
.cont {
font-size: 16px;
color: #000000;
font-weight: 400;
padding: 10px 0;
padding: 15px 0px 0 15px;
}
.scroll-box2 {
padding: 0px 15px 60px 15px;
width: 100%;
......@@ -327,63 +366,76 @@ align-items: center;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
background-color: $bg_fff;
border-radius: 5px;
div{
div {
margin-top: 55px;
margin-left: 17px;
margin-right: 16px;
h2{
h2 {
font-weight: 600;
line-height: 20px;
}
p{
p {
line-height: 20px;
color: #525C65;
}
}
}
li:nth-child(1){
li:nth-child(1) {
background-image: url('https://julyedu-img.oss-cn-beijing.aliyuncs.com/sanbaiduomingai.png');
background-size:cover;
background-size: cover;
}
li:nth-child(2){
li:nth-child(2) {
background-image: url('https://julyedu-img.oss-cn-beijing.aliyuncs.com/sanbaiduowanaixueyuan.png');
background-size:cover;
div{
p:nth-of-type(1){
background-size: cover;
div {
p:nth-of-type(1) {
display: flex;
justify-content: space-between;
}
h2:nth-of-type(2){
h2:nth-of-type(2) {
margin-top: 20px;
}
p:nth-of-type(2){
span:nth-child(2){
p:nth-of-type(2) {
span:nth-child(2) {
margin-left: 10px;
}
}
}
}
li:nth-child(3){
li:nth-child(3) {
background-image: url('https://julyedu-img.oss-cn-beijing.aliyuncs.com/shierweibalabala.png');
background-size:cover;
div{
p{
background-size: cover;
div {
p {
display: flex;
justify-content: space-between;
}
}
}
li:nth-child(4){
li:nth-child(4) {
background-image: url('https://julyedu-img.oss-cn-beijing.aliyuncs.com/wubaijiabalabala.png');
background-size:cover;
background-size: cover;
}
li:nth-child(5){
li:nth-child(5) {
background-image: url('https://julyedu-img.oss-cn-beijing.aliyuncs.com/shuangyunbalabala.png');
background-size:cover;
p:nth-of-type(2){
background-size: cover;
p:nth-of-type(2) {
// margin-top: 10px;
}
}
......@@ -402,9 +454,167 @@ align-items: center;
.scroll-box2 {
height: 307px;
}
}
}
.paper {
padding: 15px 15px 16px 15px;
.cont {
font-size: 16px;
color: #000000;
font-weight: 400;
padding: 6px 0 10px 0;
font-weight: 700;
}
.teabox {
background: #F6FBFF;
padding: 16px;
border-radius: 8px;
margin-bottom: 16px;
// width: 167px;
&:last-child {
margin-bottom: 0;
}
.tealist {
display: flex;
// height: 147px;
border-bottom: 1px solid #F3F4F8;
.pic {
width: 30%;
img {
margin-top: 15%;
width: 89px;
height: 103px;
border-radius: 6px;
}
}
.detail {
flex: 1;
.name {
margin-top: 10px;
display: flex;
align-items: center;
b {
font-size: 18px;
font-weight: 600;
}
}
.title {
background: #E2BA7E;
line-height: 20px;
padding: 2px 10px;
color: #fff;
border-radius: 3px;
}
}
.desc {
height: 70px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
margin-top: 8px;
margin-bottom: 8px;
color: $color_999;
}
}
.paper-desc {
font-size: 14px;
color: #151515;
text-align: center;
font-weight: 500;
}
.paper-p {
margin-top: 12px;
margin-bottom: 16px;
text-align: center;
}
.paper-box {
margin-top: 16px;
display: flex;
justify-content: space-around;
div {
text-align: center;
}
}
}
.active1 {
// height:200px;
height: auto !important;
.desc {
height: auto !important;
// word-break: break-all;
text-overflow: clip !important;
overflow: visible !important;
display: inline-block !important;
// margin-bottom: 8px;
}
}
.consult {
height: 41px;
display: flex;
justify-content: center;
padding: 20px;
a {
display: flex;
width: 223px;
height: 41px;
background: linear-gradient(167deg, #E2BA7E 0%, #E1A64D 100%);
border-radius: 20px;
color: #fff;
font-size: 16px;
justify-content: center;
align-items: center;
}
}
.consult1 {
// height: 41px;
display: flex;
justify-content: center;
padding: 20px;
a {
display: flex;
background: #0099FF;
border-radius: 20px;
width: 223px;
height: 41px;
color: #fff;
font-size: 16px;
justify-content: center;
align-items: center;
}
}
}
......@@ -880,18 +1090,21 @@ align-items: center;
background-color: #f3f4f8;
}
.index-box ~ .year19-index {
.index-box~.year19-index {
display: none;
}
.bq{
.bq {
display: flex;
justify-content: center;
padding: 10px 0;
.hot2{
width:187px;
}
.hot2 {
width: 187px;
}
}
.fix{
.fix {
position: fixed;
top: 70%;
right: 10px;
......@@ -902,11 +1115,11 @@ align-items: center;
box-shadow: -3px 3px 13px 0px rgba(136, 205, 250, 0.64);
border-radius: 50%;
font-size: 16px;
color: #F3F4F8;
padding-top: 5px;
span{
color: #F3F4F8;
padding-top: 5px;
span {
display: block;
text-align: center;
}
}
\ No newline at end of file
}
src/components/Index/review/index.js 0 → 100644
import React, { Component } from "react"
import "./../index.scss"
import { http } from "src/utils"
import { Link } from "react-router-dom"
import { Toast } from "antd-mobile"
import icon1 from "../image/paperTranslate1.png"
import icon2 from "../image/paperReview2.png"
import icon3 from "../image/paperTranslate3.png"
import icon4 from "../image/2-2@2x.png"
class TeacherList extends Component {
constructor(props) {
super(props)
this.state = {
data: [],
active: "",
isToggleOn: false,
liClass1: "",
}
}
bgChange = (index) => {
console.log(index, 999)
this.setState({
active: index,
})
this.setState((prevState) => ({
isToggleOn: !prevState.isToggleOn,
liClass1: prevState.isToggleOn ? "" : "active1",
}))
}
componentDidMount() {
http.get(`${API.home}/m/mobTeachers`).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data,
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
render() {
const { active, liClass1, isToggleOn } = this.state
return (
<div className="paper">
<p className="cont">论文审稿系统</p>
<div className="teabox">
<div className="paper-desc">
我司通过对开源模型的优化，可对英文论文进行全面评审，评审效果超过GPT4
</div>
<div className="paper-box">
<div>
<img width={88} src={icon1} alt="" />
<div>1.上传论文</div>
</div>
<div>
<img width={88} src={icon2} alt="" />
<div>2.论文解析</div>
</div>
<div>
<img width={88} src={icon3} alt="" />
<div>
3.输出审稿
<br />
意见
</div>
</div>
</div>
</div>
<div className="teabox">
<div className="paper-desc">
分析论文的优势、亮点，可能通过的原因、可能被拒绝的原因，提出针对性改进建议等
</div>
<div className="paper-box">
<div>
<img width={311} src={icon4} alt="" />
</div>
</div>
<div className="consult1">
<a>请前往PC端体验</a>
</div>
</div>
</div>
)
}
}
export default TeacherList
src/components/Index/robot/index.js 0 → 100644
import React, { Component } from "react"
import "./../index.scss"
import { http } from "src/utils"
import { Link } from "react-router-dom"
import { Toast } from "antd-mobile"
import icon2 from "../image/3-2@2x.png"
import icon1 from "../image/3-1@2x.png"
class TeacherList extends Component {
constructor(props) {
super(props)
this.state = {
data: [],
active: "",
isToggleOn: false,
liClass1: "",
}
}
bgChange = (index) => {
console.log(index, 999)
this.setState({
active: index,
})
this.setState((prevState) => ({
isToggleOn: !prevState.isToggleOn,
liClass1: prevState.isToggleOn ? "" : "active1",
}))
}
componentDidMount() {
http.get(`${API.home}/m/mobTeachers`).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data,
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
render() {
const { active, liClass1, isToggleOn } = this.state
return (
<div className="paper">
<p className="cont">机器人解决方案</p>
<div className="teabox">
<div className="paper-desc">结合企业特定的业务场景，进行定制开发</div>
<p className="paper-p">
基于HumanPlus二次开发出面向汽车的自动喷涂机器人
</p>
<div className="paper-box">
<div>
<img width={311} src={icon1} alt="" />
</div>
</div>
<p className="paper-p">
基于DexCap二次开发出面向工厂的自动线缆插拔机器人
</p>
<div className="paper-box">
<div>
<img width={311} src={icon2} alt="" />
</div>
</div>
</div>
</div>
)
}
}
export default TeacherList
src/components/Index/translate/index.js 0 → 100644
import React, { Component } from "react"
import "./../index.scss"
import { http } from "src/utils"
import { Link } from "react-router-dom"
import { Toast } from "antd-mobile"
import icon1 from "../image/paperTranslate1.png"
import icon2 from "../image/paperTranslate2.png"
import icon3 from "../image/paperTranslate3.png"
import icon4 from "../image/1-2@2x.png"
class TeacherList extends Component {
constructor(props) {
super(props)
this.state = {
data: [],
active: "",
isToggleOn: false,
liClass1: "",
}
}
bgChange = (index) => {
console.log(index, 999)
this.setState({
active: index,
})
this.setState((prevState) => ({
isToggleOn: !prevState.isToggleOn,
liClass1: prevState.isToggleOn ? "" : "active1",
}))
}
componentDidMount() {
http.get(`${API.home}/m/mobTeachers`).then((res) => {
if (res.data.code === 200) {
this.setState({
data: res.data.data,
})
} else {
Toast.info(res.data.msg, 2)
}
})
}
render() {
const { active, liClass1, isToggleOn } = this.state
return (
<div className="paper">
<p className="cont">论文翻译系统</p>
<div className="teabox">
<div className="paper-desc">
基于GPT模型，提供高效、准确的学术论文翻译服务
</div>
<div className="paper-box">
<div>
<img width={88} src={icon1} alt="" />
<div>1.上传论文</div>
</div>
<div>
<img width={88} src={icon2} alt="" />
<div>
2.选择模型
<br />
GPT3.5/4.0
</div>
</div>
<div>
<img width={88} src={icon3} alt="" />
<div>
3.输出翻译
<br />
结果
</div>
</div>
</div>
</div>
<div className="teabox">
<div className="paper-desc">原文与译文左右对照，同步查询</div>
<div className="paper-box">
<div>
<img width={311} src={icon4} alt="" />
</div>
</div>
<div className="consult1">
<a>请前往PC端体验</a>
</div>
</div>
</div>
)
}
}
export default TeacherList
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