Skip to content

X
xiaomai-website-ssr-template
Commit e220d791 by liguokang
Options

feat: ⚡

parents
Showing with 10293 additions and 0 deletions
.eslintrc.js 0 → 100644
/*
* @Author: liguokang
* @Date: 2021-05-27 11:32:32
* @LastEditors: liguokang
* @LastEditTime: 2021-07-14 20:41:52
* @Description:
* @Copyrigh: ©2021 杭州杰竞科技有限公司 版权所有
*/
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module',
},
env: {
browser: true,
es6: false,
},
extends: 'airbnb-base',
plugins: ['html'],
rules: {
indent: ['error', 2],
complexity: ['error', { max: 12 }],
radix: 0,
eqeqeq: [0],
quotes: [
1,
'single',
{
allowTemplateLiterals: true,
},
],
'import/extensions': [
'error',
'always',
{
js: 'never',
vue: 'never',
},
],
'import/no-extraneous-dependencies': [
'error',
{
optionalDependencies: ['test/unit/index.js'],
},
],
'arrow-parens': 0,
'global-require': 0,
'no-param-reassign': 0,
'no-plusplus': 0,
'max-nested-callbacks': ['error', 3],
'max-depth': ['error', 5],
'max-len': ['error', 160],
'no-nested-ternary': 2,
'no-alert': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'default-case': 2,
'no-shadow': 2,
'no-underscore-dangle': 0,
'react/react-in-jsx-scope': 0,
'class-methods-use-this': 0,
'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'],
'object-shorthand': [0],
'func-names': [0],
'no-unused-vars': [0],
'spaced-comment': [0],
'prefer-template': [0],
'prefer-arrow-callback': [0],
'no-use-before-define': [0],
'arrow-body-style': [0],
'no-lonely-if': [0],
'no-unused-expressions': [0],
'guard-for-in': [0],
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-unused-vars': 0,
'no-var': 2,
'no-empty': [0],
'space-before-function-paren': 0,
'no-else-return': 0,
'no-new': 0,
'linebreak-style': [0, 'error', 'windows'],
'comma-dangle': [
1,
{
arrays: 'always-multiline',
objects: 'always-multiline',
imports: 'always-multiline',
exports: 'always-multiline',
functions: 'always-multiline',
},
],
'no-restricted-globals': [
0,
{
name: 'location',
message: 'Use local parameter instead.',
},
],
'prefer-destructuring': [
0,
{
array: true,
object: true,
},
],
'prefer-const': 1,
'dot-notation': 0,
'object-curly-newline': 0,
'import/prefer-default-export': 0,
},
};
.gitignore 0 → 100644
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
.prettierrc.json 0 → 100644
{
"trailingComma": "all",
"singleQuote": true,
"proseWrap": "preserve",
"printWidth": 160,
"tabWidth": 2
}
README.md 0 → 100644
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
components/CarouselArea.less 0 → 100644
.carousel-area{
width: 100%;
overflow: hidden;
.tem{
width: 100%;
}
}
\ No newline at end of file
components/CarouselArea.tsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-03 16:50:59
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-03 17:26:22
* @Description: 轮播图
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import { Carousel } from 'antd';
import './CarouselArea.less';
export default function CarouselArea() {
return (
<div className='carousel-area'>
<Carousel autoplay>
<div className='tem'>
<img src='' />
</div>
</Carousel>
</div>
);
}
\ No newline at end of file
components/Footer.less 0 → 100644
footer {
background-color: #30343e;
position: relative;
.module-model {
width: 100%;
background: linear-gradient(
313deg,
rgba(255, 188, 111, 1) 0%,
rgba(255, 162, 85, 1) 74%,
rgba(255, 153, 75, 1) 100%
);
.big-img {
.big-img-svg {
width: 150%;
transform: translate3d(-300px, 0px, 0px);
}
position: relative;
width: 100%;
height: 240px;
background-size: contain;
.wrap {
border: 1px solid transparent;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
.module-img {
.btn-wrap {
display: inline-block;
width: 100%;
color: #ff8d46;
.btn-click {
width: 160px;
height: 34px;
background: #fff;
border-radius: 2px;
text-align: center;
margin: 0 auto;
line-height: 34px;
margin-bottom: 80px;
cursor: pointer;
position: absolute;
right: 50%;
margin-right: -80px;
z-index: 99;
&:hover {
opacity: 0.8;
}
}
}
}
.text {
margin: 0 auto;
font-size: 44px;
line-height: 62px;
margin-bottom: 20px;
text-align: center;
color: #fff;
margin-top: 80px;
}
}
}
}
.footer-middle {
height: 335px;
width: 100%;
border-top: 2px solid #434753;
border-bottom: 2px solid #434753;
.fl {
float: left;
}
.fr {
float: right;
}
ul {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding-top: 60px;
height: 100%;
margin: 0;
li {
text-align: left;
cursor: pointer;
&:first-child {
margin-left: -27px;
}
&:last-child {
margin-left: -20px;
}
a {
display: block;
text-decoration: none;
}
span {
display: block;
font-size: 14px;
font-weight: 400;
color: rgba(162, 166, 178, 1);
line-height: 30px;
&:hover {
color: #ff8534;
}
}
p {
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 25px;
margin-bottom: 18px;
cursor: text;
}
.img {
width: 100px;
color: rgba(162, 166, 178, 1);
height: 100px;
cursor: text;
.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/NBn48icbJ2.png");
background-size: contain;
width: 100%;
height: 100%;
margin-right: 13px;
}
.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/KapYGcKXHj.png");
background-size: contain;
width: 100%;
height: 100%;
margin-left: 0px;
}
}
}
> :nth-child(4) {
span {
&:hover {
color: rgba(162, 166, 178, 1);
cursor: text;
}
}
}
> :nth-child(5) {
span {
&:hover {
cursor: text;
color: rgba(162, 166, 178, 1);
}
text-align: center;
line-height: 50px;
}
}
> :nth-child(6) {
span {
&:hover {
cursor: text;
color: rgba(162, 166, 178, 1);
}
text-align: center;
line-height: 50px;
}
}
}
}
.footer-bottom {
width: 100%;
height: 100px;
p {
font-size: 14px;
font-weight: 400;
color: rgba(162, 166, 178, 1);
display: flex;
justify-content: center;
align-items: center;
line-height: 50px;
a {
color: rgba(162, 166, 178, 1);
text-decoration: none;
}
margin: 0;
}
}
}
components/Footer.tsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-03 15:13:39
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:14:29
* @Description: 页脚
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import Link from 'next/link';
import { useEffect } from 'react';
import lottie from "lottie-web";
import './Footer.less';
interface FooterProps {
isTrial?: boolean;
}
export default function Footer(props: FooterProps) {
useEffect(() => {
if (props.isTrial) {
generateAnimation()
}
}, []);
// 生成动画
function generateAnimation() {
lottie.loadAnimation({
container: document.getElementById("big-img-svg"),
path: "https://image.xiaomaiketang.com/xm/JPpibc4xdD.json",
renderer: "svg",
loop: true,
autoplay: true,
name: "Hello World",
});
}
return (
<footer>
{
props.isTrial &&
<div className="content-module content-module-8">
<div className="module-model">
<div className="center">
<div className="big-img" id="big-img-4">
<div className="big-img-svg" id="big-img-svg">
<div className="wrap">
<div className="text">体验教育信息化新模式</div>
<div className="module-img">
<span className="btn-wrap">
<div className="btn-click free-trial" id="btn-free-try"
onClick={() => {
// window.WEBTRACING('WebG_foot_clickEvent_clickFreeUse', 'WebG_页面底部_点击事件_点击免费试用', { page: this.props.page })
this.renderModal(true);
}}>
免费试用
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
<div className="center">
<div className="footer-middle">
<ul>
<li className="item">
<p>产品</p>
<div className="fl">
<Link href="/xmErp">
<span>小麦助教</span>
</Link>
<Link href="/cloud-class">
<span>
云课堂</span>
</Link>
<Link href="/xm-school-info">
<span>小麦校讯通</span>
</Link>
<Link href="/micro-brand-web">
<span>微官网</span>
</Link>
</div>
<div className="fr" style={{ marginLeft: "30px" }}>
<Link href="/xm-show">
<span>小麦秀</span>
</Link>
<Link href="/mm-checkIn">
<span>麦麦打卡</span>
</Link>
<Link href="/mm-poster">
<span>麦萌海报</span>
</Link>
<Link href="/mm-chain">
<span>小麦连锁版</span>
</Link>
</div>
</li>
<li className="item">
<p>招商加盟</p>
<Link href="/wheat-system">
<span>小麦助教系统</span>
</Link>
</li>
<li className="item">
<p>关于我们</p>
<Link href="/company-profile">
<span>公司简介</span>
</Link>
<Link href="/honorary-certificate">
<span>荣誉资质</span>
</Link>
<Link href="/new-dynamic">
<span>新闻动态</span>
</Link>
<Link href="/join-us">
<span>加入我们</span>
</Link>
<a
href="https://image.xiaomaiketang.com/xm/XGSwRGwacP.pdf"
target="_blank"
rel="noopener noreferrer"
>
<span>隐私声明</span>
</a>
</li>
<li className="item">
<p>联系我们</p>
<span>咨询电话：400-6677-456</span>
<span>联系地址 : 杭州市西湖区古墩路598号同人广场A座3楼</span>
</li>
<li className="item">
<div className="img">
<div className="img1"></div>
</div>
<span>小麦助教公众号</span>
</li>
<li className="item">
<div className="img">
<div className="img2"></div>
</div>
<span>下载小麦助教</span>
</li>
</ul>
</div>
<div className="footer-bottom">
<p>
©2015-2021&nbsp;&nbsp;杭州杰竞科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;
<a
target="_blank"
rel="noopener noreferrer"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602006090"
>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img
src="https://image.xiaomaiketang.com/xm/6mH2HnzP3k.png"
alt=""
style={{
width: "16px",
height: "16px",
display: "inline-block",
margin: "0 4px 0 0",
verticalAlign: "-3px",
}}
/>
浙公网安备33010602006090号
</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a
style={{ marginLeft: "20px" }}
target="_blank"
rel="noopener noreferrer"
href="https://beian.miit.gov.cn/#/Integrated/index"
>
浙ICP备15025826号-2
</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a
style={{ marginLeft: "20px" }}
target="_blank"
rel="noopener noreferrer"
href="https://image.xiaomaiketang.com/xm/ffXeG5fXn8.jpg"
>
增值电信业务经营许可证：浙B2-20180802
</a>
</p>
<p>
<span style={{ marginLeft: "20px" }}>教APP备3300311号</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span style={{ marginLeft: "20px" }}>教APP备3300313号</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span style={{ marginLeft: "20px" }}>教APP备3300315号</span>
</p>
</div>
</div>
</footer>
);
}
components/Header.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-22 14:52:25
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-04 11:39:10
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { Component } from "react";
import Link from 'next/link';
import "./Header.less";
// import FreeTrial from "@/components/FreeTrial";
class Header extends Component {
constructor(props) {
super(props);
this.state = {
active: "home",
isShow: false,
};
}
//在componentDidMount生命周期中添加window的handleScroll滑动监听事件
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
this.setState({
active: this.props.active,
});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
//定义handleScroll事件函数
handleScroll = (e) => {
var header = document.getElementById("header"); //定义一个dom节点为'header'的header变量
if (window.pageYOffset >= 20) {
//if语句判断window页面Y方向的位移是否大于或者等于导航栏的height像素值
header && header.classList.add("header_bg"); //当Y方向位移大于80px时，定义的变量增加一个新的样式'header_bg'
}
else if(window.location.href.indexOf("mmChain") >= 0){
header && header.classList.add("header_bg");
}
else if(window.location.href.indexOf("home") >= 0){
header && header.classList.add("header_bg");
}
else {
header && header.classList.remove("header_bg"); //否则就移除'header_bg'样式
}
};
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
render() {
const active = this.state.active;
return (
<div className='header' id="header">
<div className="top">
<div className="center clearfix">
<div className="header-left fl">
<div className="logo fl" id="xmtd-logo">
<h1 className="site-name">小麦助教</h1>
<a href="index.html">
<div className="img"></div>
</a>
</div>
</div>
<div className="header-right fr">
<div className="nav fl">
<ul className="nav-bar-title">
<li
className={
active === "home" ? "nav-bar-li on" : "nav-bar-li"
}
>
<Link href="/home">首页</Link>
</li>
<li
className={
active === "product" ? "nav-bar-li on" : "nav-bar-li"
}
id="show-choice"
>
<a>产品</a>
<span className="icon iconfont">&#xe614;</span>
<div id="module-choice" className="module-choice bgc-white">
<div className="triangle-up"></div>
<div
className="module-father"
style={{ position: "position", top: "-9px" }}
>
<ul
className="module-choice-hover bgc-white"
style={{ top: "8px", left: -150 }}
>
<li>
<div
className="fl"
style={{ width: "180px"}}
>
{/* <Link href="/xmErp">
<div className="fl icon xmzj"></div>
<div className="fl text">
<p className="title">小麦助教</p>
<p className="detail">校务管理</p>
</div>
</Link>
<Link href="/cloudClass" style={{margin:'10px 0'}}>
<div className="fl icon ykt"></div>
<div className="fl text">
<p className="title">云课堂</p>
<p className="detail">在线教学</p>
</div>
</Link>
<Link href="/xmSchoolInfo">
<div className="fl icon xmxxt"></div>
<div className="fl text">
<p className="title">小麦校讯通</p>
<p className="detail">家校服务</p>
</div>
</Link>
<Link href="/microBrandWeb" style={{margin:'10px 0'}}>
<div className="fl icon wgw"></div>
<div className="fl text">
<p className="title">微官网</p>
<p className="detail">品牌传播</p>
</div>
</Link>
</div>
<div className="fr">
<Link href="/xmShow">
<div className="fl icon xmx"></div>
<div className="fl text">
<p className="title">小麦秀</p>
<p className="detail">招生营销</p>
</div>
</Link>
<Link href="/mmCheckIn" style={{margin:'10px 0'}}>
<div className="fl icon mmdk"></div>
<div className="fl text">
<p className="title">麦麦打卡</p>
<p className="detail">课后督学</p>
</div>
</Link>
<Link href="/mmPoster">
<div className="fl icon poster"></div>
<div className="fl text">
<p className="title">麦萌海报</p>
<p className="detail">品牌设计</p>
</div>
</Link>
<Link href="/mmChain" style={{margin:'10px 0'}}>
<div className="fl icon icon-chain"></div>
<div className="fl text">
<p className="title">小麦连锁版</p>
<p className="detail">多校区管理</p>
</div>
</Link> */}
</div>
</li>
</ul>
</div>
</div>
</li>
<li
className={
active === "customerCase" ? "nav-bar-li on" : "nav-bar-li"
}
>
<Link href="/customercase">客户案例</Link>
</li>
<li
className={
active === "joinIn" ? "nav-bar-li on" : "nav-bar-li"
}
id="show-us"
>
<a>招商加盟</a>
<span className="icon iconfont">&#xe614;</span>
<div id="about-choice" className="module-choice bgc-white">
<div className="triangle-up"></div>
<div
className="module-father"
style={{
position: "relative",
top: "-9px",
width: 126,
}}
>
<ul
className="module-choice-hover bgc-white"
style={{ top: 18, width: 138, left: 10 }}
>
<li id="xmtd-sumary">
<Link href="/wheatsystem">小麦助教系统</Link>
</li>
</ul>
</div>
</div>
</li>
<li
className={
active === "wheatSchool" ? "nav-bar-li on" : "nav-bar-li"
}
>
<Link href="/wheatschool">小麦学院</Link>
</li>
<li
className={
active === "aboutUs" ? "nav-bar-li on" : "nav-bar-li"
}
id="show-us"
>
<a>关于我们</a>
<span className="icon iconfont">&#xe614;</span>
<div id="about-choice" className="module-choice bgc-white">
<div className="triangle-up"></div>
<div
className="module-father"
style={{
position: "relative",
top: "-9px",
width: 126,
}}
>
<ul
className="module-choice-hover bgc-white"
style={{ top: 18 }}
>
<li id="xmtd-sumary">
<Link href="/companyprofile">公司简介</Link>
</li>
<li id="xmtd-team-pic">
<Link href="/honoraryCertificate">荣誉资质</Link>
</li>
<li id="xmtd-join-us">
<Link href="/joinUs">加入我们</Link>
</li>
<li id="xmtd-news">
<Link href="/newsDynamic">新闻动态</Link>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div className="login-box fl">
<span
className="free-trial btn fl"
id="free-try"
onClick={() => {
this.renderModal(true);
}}
>
免费试用
</span>
<a
href="https://b.xiaomai5.com"
target="_blank"
rel="noopener noreferrer"
>
<span className="login btn" id="xmtd-inst-login">
机构登录
</span>
</a>
</div>
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
</div>
);
}
}
export default Header;
components/Header.less 0 → 100644
@primary-color: #ff8534;
.header {
z-index: 100;
position: absolute;
top: 0;
width: 100%;
.top {
height: 60px;
width: 100%;
.header-left {
.logo {
width: 114px;
h1 {
position: absolute;
left: -1000px;
}
.img {
width: 114px;
height: 60px;
background-image: url("https://image.xiaomaiketang.com/xm/XQkhrY2jMp.png");
background-size: contain;
}
}
}
.header-right {
position: relative;
.nav {
line-height: 30px;
font-size: 14px;
.nav-bar-title {
.nav-bar-li {
cursor: pointer;
float: left;
margin: 0 24px;
.iconfont,
a {
color: #ffffff;
}
position: relative;
padding: 0 10px;
&.on::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #fff;
}
&::after {
content: "";
position: absolute;
left: 0;
bottom: -15px;
width: 100%;
height: 2px;
background: #fff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out,
-webkit-transform 0.3s ease-in-out;
}
&:hover::after {
transform: scaleX(1);
}
}
#show-choice {
position: relative;
&:hover {
.module-choice {
opacity: 1;
.triangle-up {
display: block;
}
.module-choice-hover {
display: block;
}
}
}
.module-choice {
position: absolute;
top: 61px;
transition: 0.2s all 0.1s;
left: -36%;
opacity: 0;
width: 120px;
background: transparent;
z-index: 1;
.triangle-up {
position: relative;
top: 10px;
left: 42%;
display: none;
}
.module-choice-hover {
background: #fff;
position: relative;
display: none;
top: 9px;
left: 0;
text-align: center;
box-shadow: 0 1px 1px #f2f2f2;
border-radius: 4px;
width: 430px;
height: 273px;
font-size: 16px;
line-height: 2.6;
padding: 17px 19px;
&::before {
content: "";
border: 8px solid;
border-color: transparent transparent #fff;
position: absolute;
top: -14px;
right: 50%;
}
li {
border: none;
height: 60px;
text-align: left;
padding: 6px 10px;
box-sizing: border-box;
a {
color: #595959;
display: block;
width: 180px;
height: 50px;
padding: 8px 0 8px 20px;
&:hover {
background: #f4f6f9;
.text {
.title {
// color: #ff8534;
}
}
}
.icon {
width: 34px;
height: 34px;
margin-right: 18px;
background-size: 34px;
}
.text {
.title {
color: #333333;
font-size: 14px;
line-height: 20px;
margin: 0;
}
.detail {
font-size: 12px;
color: #666;
margin: 0;
line-height: 17px;
}
}
}
}
}
}
}
#show-us {
position: relative;
&:hover {
.module-choice {
opacity: 1;
.triangle-up {
display: block;
}
.module-choice-hover {
display: block;
}
}
}
.module-choice {
position: absolute;
top: 61px;
transition: 0.2s all 0.1s;
left: -36%;
opacity: 0;
width: 120px;
background: transparent;
z-index: 1;
.triangle-up {
position: relative;
top: 10px;
left: 42%;
display: none;
}
.module-choice-hover {
background: #fff;
position: relative;
display: none;
top: 9px;
left: 20px;
text-align: center;
box-shadow: 0 1px 1px #f2f2f2;
border-radius: 4px;
width: 110px;
font-size: 14px;
line-height: 1.5;
padding: 10px 15px;
&::before {
content: "";
border: 8px solid;
border-color: transparent transparent #fff;
position: absolute;
top: -14px;
right: 50%;
margin-right: -8px;
}
li {
border: none;
height: 30px;
text-align: center;
padding: 6px 10px;
box-sizing: border-box;
&:hover {
a {
color: #ff8534;
}
}
a {
color: #595959;
display: block;
height: 50px;
}
}
}
}
}
}
}
.login-box {
margin-top: 13px;
.free-trial,
.login {
width: 100px;
height: 34px;
font-size: 14px;
line-height: 34px;
text-align: center;
}
.free-trial {
background-color: #fff;
color: @primary-color;
margin-right: 10px;
}
.login {
color: #fff;
border: 1px solid #fff;
box-sizing: border-box;
}
span {
display: inline-block;
}
}
}
}
}
.header.header_bg {
height: 60px;
background-color: #fff;
position: fixed;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
transition: 0.3s;
.top {
height: 60px;
width: 100%;
.header-left {
.logo {
width: 114px;
h1 {
position: absolute;
left: -1000px;
}
.img {
width: 114px;
height: 60px;
background-image: url("https://image.xiaomaiketang.com/xm/tXGkSTisNP.png");
background-size: contain;
}
}
}
.header-right {
position: relative;
.nav {
line-height: 30px;
font-size: 14px;
.nav-bar-title {
.nav-bar-li {
cursor: pointer;
float: left;
margin: 0 24px;
.iconfont,
a {
color: #333;
}
position: relative;
&.on {
.iconfont,
a {
color: @primary-color;
}
}
&:hover {
.iconfont,
a {
color: @primary-color;
}
}
&.on::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: @primary-color;
}
&::after {
content: "";
position: absolute;
left: 0;
bottom: -16px;
width: 100%;
height: 2px;
background: @primary-color;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out,
-webkit-transform 0.3s ease-in-out;
}
&:hover::after {
transform: scaleX(1);
}
}
}
}
.login-box {
margin-top: 13px;
.free-trial,
.login {
width: 100px;
height: 34px;
font-size: 14px;
line-height: 34px;
text-align: center;
}
.free-trial {
background-color: @primary-color;
color: #fff;
margin-right: 10px;
}
.login {
background-color: #fff;
color: @primary-color;
border: 1px solid @primary-color;
box-sizing: border-box;
}
span {
display: inline-block;
}
}
}
}
}
.login-box {
margin-top: 13px;
.free-trial,
.login {
width: 100px;
height: 34px;
font-size: 14px;
line-height: 34px;
text-align: center;
}
.free-trial {
border-radius: 2px;
background-color: #fff;
color: @primary-color;
margin-right: 10px;
cursor: pointer;
}
.login {
color: #fff;
border: 1px solid #fff;
border-radius: 2px;
box-sizing: border-box;
}
span {
display: inline-block;
}
}
components/SiderBar.tsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-04 14:01:52
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-04 14:30:18
* @Description: 侧边导航栏
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import './SiderBar.less';
export default function SiderBar() {
return (
<div className="sider-bar">
<div className="sider-tell">
<img src="https://image.xiaomaiketang.com/xm/kyiit34CzK.png" style={{ marginTop: 17 }} alt="" />
<p>咨询热线</p>
<div className="content">
<div className="consult-img fl"></div>
<div className="title fl">了解产品和优惠<br />免费拨打</div>
<div className="detail fl">400-6677-456</div>
</div>
</div>
<div
className="sider-apply"
onClick={() => {
this.renderModal(true);
}}
>
<div className="bg" style={{ marginTop: 17 }}></div>
<p>申请试用</p>
</div>
<div className="sider-focus">
<div className="bg"></div>
<p>扫码关注</p>
<div className="content">
<div className="consult-img fl"></div>
<div className="title fl">小麦助教公众号</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
</div>
);
}
components/siderBar.less 0 → 100644
.sider-bar {
position: fixed;
right: 0;
top: 60%;
background-size: 100%;
border-radius: 2px 0px 0px 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
z-index: 1000;
cursor: pointer;
p {
margin: 0;
}
.sider-tell {
width: 76px;
color: #fff;
background: #fd994d;
height: 80px;
position: relative;
text-align: center;
cursor: pointer;
&:hover {
.content {
display: block;
animation: hideIndex 0.5s;
box-shadow: 0 2px 20px #000000 0.5;
}
}
img {
width: 20px;
height: 24px;
}
.content {
width: 202px;
height: 80px;
position: absolute;
top: 0;
left: -208px;
padding: 7px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
color: #333333;
text-align: center;
display: none;
z-index: 1;
.title {
font-size: 12px;
width: 100px;
font-weight: 400;
line-height: 17px;
margin: 4px 0;
}
.detail {
margin-left: 6px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.consult-img {
display: block;
width: 66px;
height: 66px;
background-image: url("https://image.xiaomaiketang.com/xm/wN6BRkTk82.png");
background-size: contain;
margin-right: 10px;
}
&::after {
content: "";
border: 4px solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
margin-top: -4px;
right: -8px;
}
}
}
.sider-apply {
width: 76px;
background: #fff;
color: #fd994d;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
height: 80px;
position: relative;
text-align: center;
cursor: pointer;
&:hover {
color: #fff;
background: #fd994d;
.bg {
background-image: url("https://image.xiaomaiketang.com/xm/KKdbZR7yWw.png");
}
}
.bg {
display: block;
width: 20px;
height: 24px;
display: inline-block;
background-image: url("https://image.xiaomaiketang.com/xm/eKKCc5RsF7.png");
background-size: contain;
}
}
.sider-focus {
width: 76px;
background: #fff;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
color: #fd994d;
height: 80px;
position: relative;
text-align: center;
cursor: pointer;
&:hover {
.content {
display: block;
animation: hideIndex 0.5s;
}
}
.bg {
display: block;
margin-top: 17px;
width: 20px;
height: 24px;
display: inline-block;
background-image: url("https://image.xiaomaiketang.com/xm/SwJbkrMsBM.png");
background-size: contain;
}
.content {
width: 104px;
height: 101px;
position: absolute;
top: -13px;
left: -110px;
padding: 7px 7px 6px 11px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
color: #333333;
text-align: center;
display: none;
.title {
display: inline-block;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 4px 0;
}
.consult-img {
display: inline-block;
width: 66px;
height: 66px;
background-image: url("https://image.xiaomaiketang.com/xm/NBn48icbJ2.png");
background-size: contain;
margin-left: 9px;
}
&::after {
content: "";
border: 4px solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
margin-top: -4px;
right: -8px;
}
}
}
@keyframes hideIndex {
0% {
opacity: 0;
transform: translate(6px, 0);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
}
contants/home.js 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-03 10:59:09
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-03 14:26:05
* @Description: 主页组件的常量
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
export const ProductContant = [
{
imgUrl: 'https://image.xiaomaiketang.com/xm/G8aSPPSFw6.png',
name: '小麦助教',
desc: '智能化运作，提升运营管理效率',
buttonName: '校务管理'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/HJpCr6iP5T.png',
name: '小麦秀',
desc: '数百套招生方案，激活家长社交圈',
buttonName: '招生营销'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/T3AkGtGFQF.png',
name: '云课堂',
desc: '支持1v1、小班互动、大班直播等多种教学形态',
buttonName: '在线教学'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/cXtnWZtTEG.png',
name: '麦麦打卡',
desc: '创建教学闭环，提升社群活跃',
buttonName: '课后督学'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/GtYzY4dPKD.png',
name: '小麦校讯通',
desc: '提升家长满意度，铸口碑促续费',
buttonName: '家校服务'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/jw6cZh4s3S.png',
name: '卖萌海报',
desc: '在线设计精美海报，轻松打造品牌形象',
buttonName: '品牌设计'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/ndPEynsXSK.png',
name: '微官网',
desc: '机构简介、名师风采……多维度展示机构',
buttonName: '品牌传播'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/THZR3akYpY.png',
name: '小麦连锁版',
desc: '总部赋能，校区多维度数字化升级',
buttonName: '多校区管理'
},
];
export const coreAdvantageContant = [
{
imgUrl: 'https://image.xiaomaiketang.com/xm/kZ6T8iKnAM.png',
name: '技术领先',
desc: '专业研发团队倾力打造'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/GS4TpKs4Xj.png',
name: '安全保障',
desc: '符合国际标准信息安全认证'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/zNkN63tBs7.png',
name: '服务贴心',
desc: '7*13.5h在线响应需求'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/T5TJCSHYaG.png',
name: '口碑优质',
desc: '数万家机构信赖之选'
},
];
export const customerNumContant = [
{
count: '8',
company: '个',
desc: '教育品牌的选择'
},
{
count: '105',
company: '位',
desc: '校长和老师持续使用'
},
{
count: '4500',
company: '名',
desc: '学员和家长共同见证'
}
];
contants/honorary-certificate.js 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-03 17:49:15
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-03 17:53:40
* @Description: 荣誉资质界面常量
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
export const honoraryContant = [
{
imgUrl: 'https://image.xiaomaiketang.com/xm/BEtryFkAfX.png',
desc: 'IAF和CNAS联合认证颁发《信息安全管理体系认证证书》'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/j4ifkMb2bn.png',
desc: '公安部颁发《信息系统安全等级保护证书》'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/3RdEb8rdKk.png',
desc: '荣获“浙江省高新技术企业”'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/62zWcNccEQ.png',
desc: '新华网教育2020年度“公信力教育服务商品牌”'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/zB83mFKDTS.png',
desc: '36Kr企业服务领域“最具影响力企业”'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/hAy5mB4tf6.png',
desc: '亿欧“2019年度全球教育科技TOP50”'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/b58Pepm74C.png',
desc: '新浪教育“2019年度品牌实力教育服务商”'
},
{
imgUrl: 'https://image.xiaomaiketang.com/xm/iRmcwScj5E.png',
desc: '腾讯教育“2019年度科技创新教育品牌”'
}
];
data-source/join-us/request-apis.ts 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-08-04 15:12:42
* @LastEditors: zangsuyun
* @LastEditTime: 2020-08-04 15:16:03
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import axios from 'axios';
export const getJobs = () => {
return axios.get("https://image.xiaomaiketang.com/xm/jobs.json")
}
data-source/news/news-apis.ts 0 → 100644
/*
* @Author: hongxutao
* @Date: 2021-03-08 09:59:58
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-04 16:26:24
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import fetch from '@/common/js/fetch';
class NewsAPI {
// 获取新闻动态列表
FetchPublishedNews(params: any) {
return fetch.post({
url: 'workbench/anon/website/fetchPublishedNews',
data: params,
})
}
}
export default new NewsAPI()
\ No newline at end of file
hooks/commit-msg.js 0 → 100644
#! /usr/bin/env node
/*
* @Author: 吴文洁
* @Date: 2020-06-05 14:59:14
* @LastEditors: 吴文洁
* @LastEditTime: 2020-08-04 19:28:08
* @Description:
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
const fs = require('fs')
const [
messageFile,
commitType,
] = process.env.HUSKY_GIT_PARAMS.split(' ');
if (commitType == null) {
const currentMessage = fs.readFileSync(messageFile, 'utf8');
// eslint-disable-next-line no-console
const pattern = new RegExp('(feat|fix|style|docs|refactor|pref|test):');
const _currentMessage = currentMessage.replace('\n', '');
if (!pattern.test(currentMessage) && currentMessage.indexOf('Merge branch') === -1) {
// eslint-disable-next-line no-console
console.error(`\x1b[31m ${_currentMessage}不符合commit-msg规范，具体规范请访问 http://wiki.ixm5.cn/pages/viewpage.action?pageId=2918494 \x1b[31m`);
process.exit(1);
}
if (_currentMessage.length <= 10) {
// eslint-disable-next-line no-console
console.error(`\x1b[31m ${_currentMessage}提交的信息字数不得少于5个字符`);
process.exit(1);
}
process.exit(0);
}
hooks/pre-commit.js 0 → 100644
#! /usr/bin/env node
/*
* @Author: 吴文洁
* @Date: 2020-06-05 09:38:03
* @LastEditors: 吴文洁
* @LastEditTime: 2020-08-12 10:58:38
* @Description:
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
const execSync = require('child_process').execSync;
// 获取当前分支名称
const branchName = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
// 校验分支名是否合法
const firstPattern = new RegExp('dev|rc|gray|master');
const secondPattern = new RegExp('(feature|hotfix)/[a-z]{4,}/[0-9]{8,}/[a-zA-Z-]{4,}');
const firstMatch = firstPattern.test(branchName);
const secondMatch = secondPattern.test(branchName);
if (!firstMatch && !secondMatch) {
// eslint-disable-next-line no-console
console.error(`\x1b[31m ${branchName}不符合分支规范，具体规范请访问 http://wiki.ixm5.cn/pages/viewpage.action?pageId=2918496 \x1b[31m`);
process.exit(1);
}
// 获取缓存区内容
// 通过diff指令获得所有改动过（不包括删除）的js文件路径
const fileNameStr = execSync('git diff --diff-filter=AM --cached HEAD --name-only').toString();
const fileNameList = fileNameStr.split('\n');
// 获取需要检测的文件
const detectedFileList = fileNameList.filter(file => {
// 过滤掉空的和hooks文件夹下所有的文件
return file && file.indexOf('hooks') < 0;
});
// 遍历需要检测的文件
let errorFileList = [];
detectedFileList.forEach((file) => {
const results = execSync(`git diff --cached ${file}`);
const pattern = /^http:\/\/{1,}/;
if (pattern.test(results.toString())) {
errorFileList.push(file);
}
});
if (errorFileList.length > 0) {
const errorFileStr = JSON.stringify(errorFileList);
// eslint-disable-next-line no-console
console.error(`\x1b[31m ${errorFileStr}文件中存在不合法的http://，请将http替换为https \x1b[31m`);
process.exit(1);
}
// 校验是否有冲突
const conflictPattern = new RegExp('^<<<<<<<\\s|^=======$|^>>>>>>>\\s');
const conflictFileList = [];
fileNameList.forEach((file) => {
const results = execSync(`git diff --cached ${file}`);
if (conflictPattern.test(results)) {
conflictFileList.push(file);
}
})
if (conflictFileList.length > 0) {
const conflictFileStr = JSON.stringify(conflictFileList);
// eslint-disable-next-line no-console
console.error(`\x1b[31m ${conflictFileStr}文件中存在冲突，请解决冲突之后再提交 \x1b[31m`);
process.exit(1);
}
process.exit(0);
\ No newline at end of file
next-env.d.ts 0 → 100644
/// <reference types="next" />
/// <reference types="next/types/global" />
next.config.js 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-02 17:04:29
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-02 17:04:47
* @Description: 描述一下咯
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
const withLess = require('@zeit/next-less')
module.exports = withLess({
/* config options here */
})
package.json 0 → 100644
{
"name": "xiaomai-web-office-ssr",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"antd": "^4.3.3",
"axios": "^0.19.2",
"@zeit/next-less": "^1.0.1",
"less": "^4.1.1",
"next": "10.2.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"lottie-web": "^5.7.1"
},
"devDependencies": {
"@types/react": "^17.0.9",
"typescript": "^4.3.2",
"webpack": "^4.37.0"
}
}
pages/HonoraryCertificate.less 0 → 100644
.honorary-certificate {
.honorary-certificate-title {
width: 100%;
height: 266px;
background-image: url("https://image.xiaomaiketang.com/xm/wCnhdDPwXh.png");
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
background-position: top;
background-size: cover;
margin-bottom: 80px;
p {
font-size: 38px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
position: absolute;
left: 50%;
top: 100px;
margin-left: -76px;
}
}
.center {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.content {
.honorary-area {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.honorary-list {
width: 580px;
text-align: center;
margin-bottom: 66px;
img {
width: 580px;
height: 435px;
}
p {
font-size: 20px;
color: #333;
}
}
}
}
}
pages/WheatSystem.less 0 → 100644
.wheat-system {
.banner {
background: url(https://image.xiaomaiketang.com/xm/NfZexe2Azs.png) no-repeat;
width: 100vw;
height: 38.5vw;
background-size: auto 100%;
overflow: hidden;
text-align: center;
.text {
font-size: 0.8rem;
font-family: "PingFangSC-Semibold";
color: white;
font-weight: 600;
text-align: center;
margin-top: 1.5rem;
p {
margin: 0;
}
.subTitle {
font-size: 0.475rem;
font-family: "PingFangSC-Regular";
font-weight: 400;
opacity: 0.8;
}
.button {
margin-top: 0.6rem;
font-family: "PingFangSC-Regular";
display: inline-block;
width: 2.76rem;
height: 0.8rem;
background: white;
color: #fe913b;
font-size: 0.4rem;
border-radius: 0.4rem;
line-height: 0.8rem;
font-weight: 400;
transition: 0.2s;
cursor: pointer;
&:hover {
box-shadow: 0px 8px 16px 0px rgba(202, 99, 5, 0.41);
}
}
}
}
.tab {
ul {
padding: 0;
}
.tab-margin {
padding-top: 1.6rem;
}
.title {
font-size: 0.68rem;
text-align: center;
font-family: "PingFangSC-Medium";
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 68px;
margin-bottom: 1rem;
}
.tab-1 {
background: none;
ul {
display: flex;
justify-content: space-between;
padding: 0 2rem;
box-sizing: border-box;
width: 100%;
li {
flex: 1;
font-size: 0;
border-radius: 4px;
padding: 0 0.2rem;
& > div {
transition: 0.3s;
}
&:hover {
& > div {
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
border-radius: 4px;
}
}
img {
width: 100%;
}
div {
padding: 0.25rem 0;
p {
text-align: center;
font-size: 0.34rem;
color: rgba(51, 51, 51, 1);
}
}
}
}
}
.tab-2 {
background: none;
ul {
display: flex;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
& > li {
flex: 1;
// height: 4.6rem;
height: 5rem;
text-align: center;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
img {
transition: 0.3s;
}
&:hover {
img {
transform: scale(1.1, 1.1);
}
}
img {
width: 100%;
position: absolute;
}
p {
position: absolute;
}
& > p:nth-of-type(1) {
font-size: 0.6rem;
font-family: PingFangSC-Semibold;
font-weight: 600;
// color: rgba(255, 255, 255, 1);
top: 1.8rem;
margin-bottom: 0.1rem;
}
& > p:nth-of-type(2) {
font-size: 0.36rem;
top: 2.8rem;
}
}
}
}
.tab-3 {
background: none;
ul {
display: flex;
& > li {
flex: 1;
height: 5.3rem;
display: flex;
justify-content: center;
// align-items: center;
padding-top: 1.54rem;
box-sizing: border-box;
color: white;
font-size: 0.25rem;
position: relative;
overflow: hidden;
&:hover {
.tab3-background {
opacity: 1;
}
}
.tab3-background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(
90deg,
rgba(255, 170, 27, 1) 0%,
rgba(255, 134, 52, 1) 100%
);
opacity: 0;
transition: 0.3s;
}
& > div.tab3-fontsie {
text-align: center;
z-index: 1;
font-family: PingFangSC-Semibold;
p {
font-size: 0.8rem;
line-height: 0.8rem;
font-weight: 800;
margin-bottom: 0.3rem;
}
}
}
li:nth-of-type(1) {
background: url("https://image.xiaomaiketang.com/xm/KEprBeyRaD.png")
no-repeat;
background-size: cover;
}
li:nth-of-type(2) {
background: url("https://image.xiaomaiketang.com/xm/6me7EQYrxJ.png")
no-repeat;
background-size: cover;
}
li:nth-of-type(3) {
background: url("https://image.xiaomaiketang.com/xm/WiWFXaa5Nw.png")
no-repeat;
background-size: cover;
}
li:nth-of-type(4) {
background: url("https://image.xiaomaiketang.com/xm/m234bbrCmt.png")
no-repeat;
background-size: cover;
}
li:nth-of-type(5) {
background: url("https://image.xiaomaiketang.com/xm/Aa7xcPtGp4.png")
no-repeat;
background-size: cover;
}
}
}
.tab-4 {
background: rgba(249, 249, 249, 1);
ul {
display: flex;
flex-wrap: wrap;
padding: 1.05rem 1.8rem;
background: url(https://image.xiaomaiketang.com/xm/wJHiPm76rH.png)
no-repeat;
background-size: auto 100%;
li {
width: 25%;
height: 3.86rem;
padding: 0.65rem 1rem;
// padding: 1rem 0.31rem;
box-sizing: border-box;
// background: rgba(249, 249, 249, 1);
background: #fff;
&:hover {
padding: 0 0.31rem;
box-sizing: border-box;
display: flex;
background: rgba(249, 249, 249, 1);
// justify-content: center;
align-items: center;
.show-way {
display: none;
}
.introduce {
display: block;
width: 100%;
}
}
.show-way {
text-align: center;
img {
width: 1.9rem;
height: 1.9rem;
margin-bottom: 0.1rem;
}
span {
color: rgba(51, 51, 51, 1);
font-size: 0.34rem;
}
}
.introduce {
display: none;
h4 {
text-align: center;
color: rgba(51, 51, 51, 1);
font-size: 0.36rem;
font-weight: 300;
margin-bottom: 0.3rem;
}
& > p,
& > div {
font-size: 0.2rem;
color: #333;
}
}
}
}
}
.tab-5 {
padding-bottom: 1.6rem;
ul {
display: flex;
padding: 0 1.94rem;
li {
flex: 1;
text-align: center;
img {
width: 1.9rem;
height: 1.9rem;
margin-bottom: 0.29rem;
}
p {
font-size: 0.32rem;
color: #666;
line-height: 0.5rem;
&.supplement {
color: rgba(153, 153, 153, 1);
font-size: 0.22rem;
}
}
}
}
}
.tab-6 {
.step-pic {
width: 100vw;
height: 8.62rem;
background: url(https://image.xiaomaiketang.com/xm/25MKzZyWKa.png)
no-repeat;
background-size: auto 100%;
color: white;
overflow: hidden;
padding: 0 2.75rem;
box-sizing: border-box;
text-align: center;
h4 {
font-size: 0.7rem;
text-align: center;
margin-top: 1.2rem;
margin-bottom: 0.8rem;
color: #fff;
}
ul {
display: flex;
.step {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
img {
width: 2rem;
height: 2rem;
margin-bottom: 0.36rem;
}
span {
font-size: 0.36rem;
}
}
.direct {
width: 1.9rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
img {
width: 0.62rem;
}
}
}
.button {
margin-top: 0.8rem;
font-family: "PingFangSC-Regular";
display: inline-block;
text-align: center;
width: 4rem;
height: 0.9rem;
background: #ff8534;
color: #fff;
font-size: 0.4rem;
border-radius: 0.45rem;
line-height: 0.9rem;
font-weight: 400;
cursor: pointer;
&:hover {
background: rgba(252, 156, 107, 1);
}
}
}
.footer {
background: url("https://image.xiaomaiketang.com/xm/wfPsYMZMWA.png")
no-repeat;
background-size: auto 100%;
width: 100vw;
height: 4.3rem;
display: flex;
padding: 1.2rem 1rem 1.2rem 3.6rem;
box-sizing: border-box;
.contact {
color: white;
box-sizing: border-box;
font-size: 0.3rem;
display: flex;
// padding: 1rem 0;
flex-direction: column;
justify-content: space-around;
p {
line-height: 0.7rem;
}
}
.QR-code {
display: flex;
flex: 1;
// padding: 1rem 0;
flex-direction: column;
justify-content: center;
align-items: center;
img {
width: 1.48rem;
height: 1.48rem;
margin-bottom: 0.12rem;
}
p {
width: 1.48rem;
font-size: 0.3rem;
color: #fff;
text-align: center;
}
}
}
}
}
}
pages/about.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-02 15:13:37
* @LastEditors: liguokang
* @LastEditTime: 2021-07-14 20:40:05
* @Description: 描述一下咯
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
function About() {
return <div>About</div>
}
export default About
pages/api/hello.js 0 → 100644
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default (req, res) => {
res.status(200).json({ name: 'John Doe' })
}
pages/cloud-class.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-23 15:38:38
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:13:47
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Button } from "antd";
// import FreeTrial from "@/components/FreeTrial";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./cloudClass.less";
class cloudClass extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: false,
};
}
componentWillMount(){
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap.html";
// }
}
componentDidMount() {
this.firstMove();
this.secondMove();
// window.WEBTRACING('WebG_product_cloudClass_showEvent_openPage', 'WebG_产品_云课堂_曝光事件_打开页面', {page: 'cloudClass'})
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
firstMove() {
var oImgContainer = document.getElementById("img-container1");
var oImgUl = oImgContainer.getElementsByTagName("ul")[0];
var aImgLi = oImgUl.children;
var oTextContainer = document.getElementById("text-container1");
var oTextUl = oTextContainer.getElementsByTagName("ul")[0];
var aTextLi = oTextUl.children;
var timer = null;
var bgshadow = oTextContainer.children[0];
// // 设置ul的宽度
// oImgUl.offsetWidth = (aImgLi.length + 1) * aImgLi[0].offsetWidth;
// 定位imgUrl的初始位置
var iNow = 0;
// console.log(aTextLi[1].offsetHeight);
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = 26 + "px";
timer = setInterval(() => {
iNow++;
if (iNow == 3) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = aTextLi[1].offsetHeight * iNow + 26 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
for (let i = 0; i < aTextLi.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi[i].onmouseover = function () {
clearInterval(timer);
bgshadow.style.top = bgshadow.offsetHeight * i + 26 + "px";
for (let j = 0; j < aImgLi.length; j++) {
aImgLi[j].className = "fl";
}
aImgLi[i].className = "fl on";
oImgUl.style.left = -aImgLi[0].offsetWidth * i + "px";
};
}
// 当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(() => {
iNow++;
if (iNow == 3) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = bgshadow.offsetHeight * iNow + 26 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
};
}
secondMove() {
var oImgContainer = document.getElementById("img-container2");
var oImgUl = oImgContainer.getElementsByTagName("ul")[0];
var aImgLi = oImgUl.children;
var oTextContainer = document.getElementById("text-container2");
var oTextUl = oTextContainer.getElementsByTagName("ul")[0];
var aTextLi = oTextUl.children;
var timer = null;
var bgshadow = oTextContainer.children[0];
// // 设置ul的宽度
// oImgUl.offsetWidth = (aImgLi.length + 1) * aImgLi[0].offsetWidth;
// 定位imgUrl的初始位置
var iNow = 0;
console.log(aTextLi[1].offsetHeight);
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = 0 + "px";
timer = setInterval(() => {
iNow++;
if (iNow == 6) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = aTextLi[1].offsetHeight * iNow + 0 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
for (let i = 0; i < aTextLi.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi[i].onmouseover = function () {
clearInterval(timer);
bgshadow.style.top = bgshadow.offsetHeight * i + 0 + "px";
for (let j = 0; j < aImgLi.length; j++) {
aImgLi[j].className = "fl";
}
aImgLi[i].className = "fl on";
oImgUl.style.left = -aImgLi[0].offsetWidth * i + "px";
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(() => {
iNow++;
if (iNow == 6) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = bgshadow.offsetHeight * iNow + 0 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
};
}
render() {
return (
<div className="" style={{ background: "#fff" }}>
<Header active={"product"}></Header>
<div className="cloud-class">
<div className="xm-head-content center">
<div className="title">云课堂，教培机构专属在线课堂</div>
<div className="content">
支持1v1、小班课、大班课，覆盖专业线上教学场景
</div>
<Button
size="large"
onClick={() => {
window.WEBTRACING('WebG_product_cloudClass_showEvent_openPage', 'WebG_产品_云课堂_Banner_点击事件_点击免费试用', {page: 'cloudClass'})
this.renderModal(true);
}}
>
免费试用
</Button>
</div>
</div>
<div className="content-module"></div>
<div className="content-module content-module-3">
<div className="center">
<div className="module-item">
<div className="module-title">覆盖专业线上教学场景</div>
<div className="online-teach">
<div className="online-teach-item">
<div className="img1"></div>
<p>班型</p>
<span>
支持1v1、小班互动、 <br /> 大班直播等多种教学形态
</span>
</div>
<div className="online-teach-item">
<div className="img2"></div>
<p>互动</p>
<span>
音、视频实时同步，一键分发
<br /> 答题器，趣味师生互动，课
<br /> 堂氛围佳
</span>
</div>
<div className="online-teach-item">
<div className="img3"></div>
<p>回顾</p>
<span>
支持学生无限次回放视频， <br /> 及时查漏补缺
</span>
</div>
<div className="online-teach-item">
<div className="img4"></div>
<p>课件</p>
<span>
支持PPT/PDF/WORD/ <br /> MP4+屏幕共享
</span>
</div>
<div className="online-teach-item">
<div className="img5"></div>
<p>白板</p>
<span>
支持外接手写设备，还原教 <br /> 师黑板状态
</span>
</div>
</div>
</div>
</div>
</div>
<div className="content-module content-module-3">
<div className="center">
<div className="module-item">
<div className="module-title">支持多种班型，轻松开启在线课堂</div>
<div className="cloud-content-module-body">
<div className="module-img" id="img-container1">
<div className="img-wrap">
<ul className="ul ul2">
<li className="fl on">
<img
src="https://image.xiaomaiketang.com/xm/W6wBJZnzcY.png"
alt=""
className="img1 picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/x3CmjFJBXH.png"
alt=""
className="img2 on picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/xYMBNnrac3.png"
alt=""
className="img3 picture"
/>
</li>
</ul>
</div>
</div>
<div className="module-text" id="text-container1">
<div className="bg-shadow"></div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">1v1小班课</div>
<div className="detail">
师生音视频实时同步，1v1沉浸式教学场景，保障高
效学习氛围
</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">多人小班课</div>
<div className="detail">
支持1v2....1v12多种类型互动课，老师上课期间可一键开关学生音视频
</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">千人大班课</div>
<div className="detail">
直播不卡顿，支持1-12个学生举手连麦上讲台 ，大
班课更生动有趣
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="content-module content-module-3">
<div className="body-center center">
<div className="module-title">
配套多样化教学工具，提供教学全流程解决方案
</div>
<div
className="cloud-content-module-body"
style={{ padding: "40px 20px 0 40px" }}
>
<div className="module-text" id="text-container2">
<div className="bg-shadow2"></div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">课前丨上课提醒通知</div>
<div className="detail">
支持教务老师、助教、教学老师一键通知上课学员，减少老师通知工作量
</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">课中丨课件与白板</div>
<div className="detail">
支持PPT/PDF/WORD/MP4等各类格式课件，支持教师共享屏幕，白板工具实时同步书写、画图
</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">课中丨互动答题</div>
<div className="detail">
客观题答题器支持单选、多选，答题统计实时反馈，把握课中教学效果，及时查漏补缺
</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">课后丨学生回顾课程</div>
<div className="detail">
支持无限次回放，做到温故而知新，及时复盘线上教学结果
</div>
</div>
</li>
<li>
<div className="left-img img5"></div>
<div className="right-text">
<div className="title">课后丨资料同步</div>
<div className="detail">
专属备课云盘，老师在线保存直播课资料，学生随时随地可查看
</div>
</div>
</li>
<li>
<div className="left-img img6"></div>
<div className="right-text">
<div className="title">课后丨数据反馈</div>
<div className="detail">
上课数据实时反馈，学生课后复习情况一手掌握
</div>
</div>
</li>
</ul>
</div>
<div className="module-img-2" id="img-container2">
<div className="img-wrap">
<ul className="ul ul2">
<li className="fl on">
<img
src="https://image.xiaomaiketang.com/xm/hW4WSN2ECZ.png"
alt="打卡作业"
className="img1 picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/zb5aSJmCpD.png"
alt="内容分享"
className="img2 on picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/7DweirK7ce.png"
alt="内容分享"
className="img2 on picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/nz7HZ7fRaA.png"
alt="内容分享"
className="img2 on picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/B5f7cTriPn.png"
alt="内容分享"
className="img2 on picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/e8Chfhk5RH.png"
alt="内容分享"
className="img2 on picture"
/>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="cloudClass" isTrial={true}></Footer>
<SiderBar />
</div>
);
}
}
export default cloudClass;
pages/cloudClass.less 0 → 100644
.cloud-class {
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/FdZCEhY2fZ.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
}
.online-teach{
display: flex;
margin: 110px 0 31px 0;
justify-content: space-between;
.online-teach-item{
width:212px;
height:178px;
background:rgba(255,255,255,1);
box-shadow:0px 2px 40px 0px rgba(234,238,244,1);
border-radius:4px;
text-align: center;
font-size:14px;
line-height:20px;
p{
font-weight:500;
color: #333333;
margin-bottom: 8px;
margin-top: -10px;
}
span{
color: #666666;
font-weight:400;
}
img{
width: 69px;
transform: translateY(-50%);
}
.img1{
width: 69px;
height: 69px;
display: inline-block;
transform: translateY(-50%);
background: url('https://image.xiaomaiketang.com/xm/cYepcpPfwH.png');
background-size: contain;
background-position: center;
// cursor: pointer;
// &:hover{
// background: url("https://image.xiaomaiketang.com/xm/zxnCzzWGCW.png");
// background-size: contain;
// }
}
.img2{
width: 69px;
height: 69px;
display: inline-block;
transform: translateY(-50%);
background: url('https://image.xiaomaiketang.com/xm/8Ppt7xGXHK.png');
background-size: contain;
background-position: center;
// cursor: pointer;
// &:hover{
// background: url("https://image.xiaomaiketang.com/xm/TianCteAz5.png");
// background-size: contain;
// }
}
.img3{
width: 69px;
height: 69px;
display: inline-block;
transform: translateY(-50%);
background: url('https://image.xiaomaiketang.com/xm/ZZZ2wDXpMM.png');
background-size: contain;
background-position: center;
// cursor: pointer;
// &:hover{
// background: url("https://image.xiaomaiketang.com/xm/BbtWMdeshm.png");
// background-size: contain;
// }
}
.img4{
width: 69px;
height: 69px;
display: inline-block;
transform: translateY(-50%);
background: url('https://image.xiaomaiketang.com/xm/E5x5Yspic8.png');
background-size: contain;
background-position: center;
// cursor: pointer;
// &:hover{
// background: url("https://image.xiaomaiketang.com/xm/8sBD7NNHXS.png");
// background-size: contain;
// }
}
.img5{
width: 69px;
height: 69px;
display: inline-block;
transform: translateY(-50%);
background: url('https://image.xiaomaiketang.com/xm/WDysjJa8Xr.png');
background-size: contain;
background-position: center;
// cursor: pointer;
// &:hover{
// background: url("https://image.xiaomaiketang.com/xm/ie5Qzr3SFe.png");
// background-size: contain;
// }
}
}
}
.cloud-content-module-body {
display: flex;
justify-content: space-between;
.module-img {
box-sizing: border-box;
position: relative;
.img-wrap {
width: 660px;
ul {
width: 2023px;
position: relative;
li {
left: 0;
width: 618px;
opacity: 0;
&.on{
transition: opacity 0.5s;
opacity: 1;
}
.picture {
width: 618px;
padding: 20px;
border: #D7DFE8 2px dashed;
box-shadow: 0 0 10px rgba(234, 239,246,0.5);
}
}
}
}
}
.module-img-2 {
margin-top: 110px;
margin-left: 70px;
padding: 52px 16px 108px 0px;
box-sizing: border-box;
position: relative;
.img-wrap {
width: 630px;
margin-left: -19px;
ul {
width: 4023px;
position: relative;
left: 22px;
&.ul2 {
left: 0px;
}
&.ul3 {
left: 0px;
}
li {
width: 618px;
opacity: 0;
&.on{
transition: opacity 0.5s;
opacity: 1;
}
.picture {
width: 588px;
padding: 20px;
border: #D7DFE8 2px dashed;
box-shadow: 0 0 10px rgba(234, 239,246,0.5);
}
}
}
}
}
.web-img {
box-shadow: 0 0 30px #eaeff6;
}
.module-text {
position: relative;
overflow: hidden;
.bg-shadow{
width: 100%;
height: 126px;
background-color: #fff;
// opacity: 0.1;
position: absolute;
// top:100px;
transition: top 0.2s;
}
.bg-shadow2{
width: 100%;
height: 126px;
background-color: #f4f6f9;
// opacity: 0.1;
position: absolute;
// top:100px;
transition: top 0.2s;
}
ul {
li {
position: relative;
z-index: 10;
padding: 31px 53px 32px 25px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
&.on {
background-color: rgba(244, 246, 249, 1);
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/fWd2KAh3F2.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/ZmBFfNMHAr.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/AHz2aFMCEZ.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/Ata3XQK4FE.png");
}
&.img5 {
background-image: url("https://image.xiaomaiketang.com/xm/wt7aEawwE8.png");
}
&.img6 {
background-image: url("https://image.xiaomaiketang.com/xm/SQrmWc6yra.png");
}
}
.right-text {
width: 276px;
.title {
font-size: 16px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 22px;
margin-bottom: 7px;
}
.detail {
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 17px;
}
}
}
}
&#text-container1 {
ul {
margin-top: 26px;
li {
&.on {
background-color: #fff;
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/RPnMDpE82X.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/MhEzRRQWfn.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/zzYdbxsEQ6.png");
}
}
}
}
}
}
}
\ No newline at end of file
pages/company-profile.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-04 14:38:09
* @LastEditors: liguokang
* @LastEditTime: 2021-07-14 20:39:36
* @Description: 公司简介页面
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import './CompanyProfile.less';
export default function CompanyProfile() {
return (
<div className="company-profile" style={{ background: "#fff" }}>
<Header active={"aboutUs"}></Header>
<div className="swiper-img">
<div className="swiper-img-content center">
<p>为教育产业赋能</p>
<span>
小麦助教，隶属于杭州杰竞科技有限公司，是专业的教育信息化全场景服务商，以数据和技术为引擎，为教育机构提供一站式数字化运营管理解决方案，致力于构建教育信息化新生态。目前已成功服务超80000家教育品牌， 超105万位教育从业者，连接近4500万名学员和家长。
</span>
</div>
</div>
<div className="content">
<div className="center">
<div
className="content-module content-module-1"
style={{ paddingTop: 0, background: '#fff' }}
>
<div className="content-module-body">
<p>
基于互联网领域的创新技术及对用户行为的洞察，小麦助教打通了教育机构线上线下的各类真实场景，实现教育机构的信息化办公，极大提升了教育行业的整体经营效率。目前小麦助教的业务已覆盖全国200多个城市和地区，现产品体系包含小麦助教管理系统、小麦秀、小麦校讯通、小麦云课堂、麦麦打卡、小麦学院、小麦收银等，帮助教育机构解决招生营销、教务管理、家校服务、在线教学、课后督学、品牌传播、经营进阶等全流程运营管理难题，率先实现了在SaaS信息化服务、内容营销、金融服务等多元领域的落地应用。
</p>
<p>以“为教育产业赋能”为使命，小麦助教愿做教育路上的助力者，用科技创新为中国的教育事业贡献力量。</p>
</div>
</div>
</div>
<div className="content-module content-module-1">
<div className="center">
<div className="module-title">我们的价值观</div>
<div className="content-module-img">
<div className="img">
<img
src="https://image.xiaomaiketang.com/xm/x8ErbPGQXD.png"
alt="小麦助教价值观-严谨"
title="小麦助教价值观-严谨"
/>
<div className="img-tip">
<h2>严谨</h2>
<span>RIGOROUS</span>
</div>
</div>
<div className="img">
<img
src="https://image.xiaomaiketang.com/xm/GxeN3dHHz5.png"
alt="小麦助教价值观-激情"
title="小麦助教价值观-激情"
/>
<div className="img-tip">
<h2>激情</h2>
<span>ENTHUSIASM</span>
</div>
</div>
<div className="img">
<img
src="https://image.xiaomaiketang.com/xm/ZyxZh3SHTa.png"
alt="小麦助教价值观-成长"
title="小麦助教价值观-成长"
/>
<div className="img-tip">
<h2>成长</h2>
<span>DEVELOPMENT</span>
</div>
</div>
</div>
</div>
</div>
<div className="content-module content-module-1" style={{ background: '#fff' }}>
<div className="center">
<div className="module-title">我们的服务宗旨</div>
<div className="content-module-img">
<div className="img1">
<img
style={{ width: "100%" }}
src="https://image.xiaomaiketang.com/xm/y4zh3eWWXM.png"
alt="小麦助教服务宗旨-客户成功，小麦成功"
title="小麦助教服务宗旨-客户成功，小麦成功"
/>
<div className="img-tip">客户成功 小麦成功</div>
</div>
</div>
</div>
</div>
<div className="content-module content-module-2">
<div className="center">
<div id="team-pic" className="anchor"></div>
<div className="module-title">团队照片</div>
<div className="content-module-body">
<div className="picture-wrap center">
<div className="left">
<div className="top tran-scale">
<img
src="https://image.xiaomaiketang.com/xm/GixsZkGpYA.png"
alt="小麦助教团队照片"
/>
</div>
<div className="bottom tran-scale">
<img
src="https://image.xiaomaiketang.com/xm/rmxbJd8fdD.png"
alt="小麦助教团队照片"
/>
</div>
</div>
<div className="right">
<div className="top">
<div className="top-left tran-scale">
<img
src="https://image.xiaomaiketang.com/xm/Sryk6k7mwB.png"
alt="小麦助教团队照片"
/>
</div>
<div className="top-right tran-scale">
<img
src="https://image.xiaomaiketang.com/xm/axyPA5EpkY.png"
alt="小麦助教团队照片"
/>
</div>
</div>
<div className="middle tran-scale">
<img
src="https://image.xiaomaiketang.com/xm/5rHjiWnPGh.png"
alt="小麦助教团队照片"
/>
</div>
<div className="bottom">
<div className="bottom-left tran-scale">
<img
src="https://image.xiaomaiketang.com/xm/hxWNwYB7F6.png"
alt="小麦助教团队照片"
/>
</div>
<div className="bottom-right tran-scale">
<img
src="https://image.xiaomaiketang.com/xm/dkbNb3x2E2.png"
alt="小麦助教团队照片"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer></Footer>
<SiderBar />
</div>
);
}
pages/companyProfile.less 0 → 100644
.company-profile {
.swiper-img {
min-width: 1729px;
height: 626px;
background-image: url(https://image.xiaomaiketang.com/xm/pXNA4ZsXN4.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
position: relative;
.swiper-img-content {
z-index: 2;
color: #f5f7fa;
width: 1200px;
padding-top: 130px;
text-align: left;
p {
font-size: 50px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 40px;
margin-bottom: 20px;
}
span {
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 40px;
display: inline-block;
width: 411px;
text-align: justify;
}
}
}
.content-module-1 {
padding-bottom: 78px !important;
background-color: #fff;
.module-title {
font-size: 38px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 53px;
text-align: center;
margin-bottom: 42px;
}
.content-module-body {
p {
font-size: 20px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 40px;
text-indent: 40px;
}
}
.content-module-img {
display: flex;
justify-content: space-between;
.img {
width: 373px;
height: 460px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 5px 16px 0px rgba(110, 123, 140, 0.1);
border-radius: 5px;
text-align: center;
padding-top: 24px;
position: relative;
.img-tip{
width:269px;
height:162px;
background:rgba(255,255,255,0.7);
box-shadow:0px 5px 16px 0px rgba(110,123,140,0.1);
border-radius:4px;
position: absolute;
left: 50%;
margin-left: -134.5px;
bottom: 25px;
padding: 19px;
span{
font-size:18px;
margin-top: 11px;
font-weight:400;
color:rgba(153,153,153,1);
line-height:25px;
text-shadow:0px 5px 16px rgba(110,123,140,0.1);
}
h2{
font-size:48px;
font-weight:500;
color:rgba(51,51,51,1);
line-height:67px;
text-shadow:0px 5px 16px rgba(110,123,140,0.1);
}
}
img{
width: 318px;
height: 344px;
margin-bottom: 12px;
}
}
.img1{
height:342px;
width: 1200px;
box-shadow: 0px 5px 16px 0px rgba(110, 123, 140, 0.1);
padding: 19px 27px;
position: relative;
.img-tip{
width:526px;
height:86px;
background:rgba(255,255,255,0.7);
position: absolute;
z-index: 11;
font-size:48px;
font-weight:400;
color:rgba(51,51,51,1);
line-height:67px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
margin-left: -263px;
bottom: 18px;
}
}
}
}
.content-module-2 {
height: 1178px !important;
padding-top: 0px !important;
.module-title {
font-size: 36px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 50px;
text-align: center;
margin-bottom: 42px;
}
.content-module-body {
.picture-wrap {
height: 970px;
width: 100%;
display: flex;
justify-content: space-between;
.tran-scale {
transition: transform 0.5s ease-in-out;
&:hover {
transform: scale(1.05, 1.05);
}
}
.left {
display: flex;
justify-content: space-between;
flex-direction: column;
.top {
img {
width: 553px;
height: 391px;
}
}
.bottom {
img {
width: 553px;
height: 553px;
}
}
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
display: flex;
justify-content: space-between;
.top-left {
img {
width: 252px;
height: 188px;
}
}
.top-right {
img {
width: 345px;
height: 188px;
}
}
}
.middle {
img {
width: 623px;
height: 391px;
}
}
.bottom {
display: flex;
justify-content: space-between;
.bottom-left {
img {
width: 326px;
height: 339px;
}
}
.bottom-right {
img {
width: 271px;
height: 339px;
}
}
}
}
}
}
}
}
pages/customer-case.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-23 13:55:11
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:38:23
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Carousel, Button } from 'antd';
import lottie from 'lottie-web'
// import Swiper from '../../common/js/swiper.min.js'
// import "../../common/css/swiper.min.css"
// import Swiper from "swiper"
// import "swiper/swiper.less"
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./customerCase.less"
// import $ from 'jquery'
// import FreeTrial from "@/components/FreeTrial";
class CustomerCase extends React.Component {
constructor(props) {
super(props);
this.state = {
activeFlag: 1,
settings: {
variableWidth: true,
arrows: true,
autoplay: true,
speed: 2000,
autoplaySpeed: 5000,
cssEase: 'linear'
},
datalist: [
{
title: '艺萌舞蹈 江苏·徐州',
keyWord: '关键词：课后作业',
content: ' 以前艺萌舞蹈通过微信群布置作业，消息容易被刷屏淹没、提交作业的节点模糊，作业质量有待提升，使用系统后家长对于课后作业的关注度明显提升。',
src: 'https://image.xiaomaiketang.com/xm/E8ZmRtjyA7.png',
url: 'https://mp.weixin.qq.com/s/il9M2wKL15Bf4Ao40fZUoA'
},
{
title: '翼飞教育 江苏·南京',
keyWord: '关键词：数据沉淀 优质服务',
content: ' 2020APC峰会上，小麦助教有幸收获了一份来自翼飞教育的表扬信。作为万人大校，翼飞教育在信息化工具的助力下，校区决策有数可依，运营管理效率大幅提升。',
src: 'https://image.xiaomaiketang.com/xm/dBd8ECMm5G.png',
url: 'https://mp.weixin.qq.com/s/hXVm0pRgEZ1nFLouBW1meQ'
},
{
title: '弘悦教育 山西·大同',
keyWord: '关键词：教学服务 营销引流',
content: ' “每每看到家长们看了成长档案后，感慨孩子的字写得越来越好了，我们真是说不出的开心。”校区负责人范老师笑着说到。',
src: 'https://image.xiaomaiketang.com/xm/m8menarKfh.png',
url: 'https://mp.weixin.qq.com/s/6xtAhR2r8sgpM98rkiP-CQ'
},
{
title: '仁义武道 江西·吉安',
keyWord: '关键词：家长满意度提升',
content: ' 通过微官网、公众号运营等方式，仁义武道在品牌传播和家校互动上做得越来越好，家长满意度和续费率持续提升。',
src: 'https://image.xiaomaiketang.com/xm/PCZ3J7GRN3.png',
url: 'https://mp.weixin.qq.com/s/wcRucmoH49U2IQLGjLK3QA'
},
{
title: '金声飞扬语言艺术中心 河南·信阳',
keyWord: '关键词：续费预警',
content: ' 招生非常重要，同时保生也意义重大。续费预警功能方便老师提前了解学员续费情况，为保生续班活动做准备。',
src: 'https://image.xiaomaiketang.com/xm/CjJaNAHkj4.png',
url: 'https://mp.weixin.qq.com/s/1vCHEU65-dt8uJUdStfOFQ'
},
{
title: '橙子里艺术空间 陕西·西安 ',
keyWord: '关键词：教务管理 成长档案',
content: ' 课前、课中、课后各环节纳入信息化管理，实时记录学员成长点滴，小麦助教让橙子里艺术空间的每一处细节做得更加完善。',
src: 'https://image.xiaomaiketang.com/xm/GDpPcTcfs2.png',
url: 'https://mp.weixin.qq.com/s/6RkqcYr0GHWxwSabh5RMOA'
}
],
list: [
{
title: '比爱诺钢琴 北京市',
keyWord: '关键词：云课堂、OMO',
content: ' 短短两个月，比爱诺钢琴单月线上课次从20多节到230多节，覆盖学员数超过40%，实现了OMO教学模式升级。',
src: 'https://image.xiaomaiketang.com/xm/tpDQxAFQKy.png',
url: 'https://mp.weixin.qq.com/s/ojHdMl0BiOe5HM1qrRVKyw'
},
{
title: '暖色调儿童美学 山东·青岛',
keyWord: '关键词：教务管理',
content: ' 暖色调是一家小而美的工作室，使用小麦助教后大量繁杂的人工统计工作均纳入线上系统管理，大幅度减轻了老师的工作压力。',
src: 'https://image.xiaomaiketang.com/xm/ebCD63ZFPe.png',
url: 'https://mp.weixin.qq.com/s/WOy4wcAHIIOmZ6E20Lay3A'
},
{
title: '爱豆时代艺术学院 福建·福州',
keyWord: '关键词：家校互动、品牌传播',
content: ' 爱豆时代学院目前拥有两大校区，旗下拥有3000名在读学员，通过小麦校讯通、微官网等工具，让家长和学员更直观地了解机构，拉近了家校距离。',
src: 'https://image.xiaomaiketang.com/xm/xKfTY5QidM.png',
url: 'https://mp.weixin.qq.com/s/hVjpjSqEMlaCejI5W_Z2Kw'
},
{
title: '橙果儿少儿美学馆 浙江·嘉兴',
keyWord: '关键词：数据沉淀',
content: ' 校长王老师在创业前就已经是小麦的用户，依托于数据中心，销售、教务、家校、财务全业务环节都有数据沉淀，有效提升校区经营决策效率。',
src: 'https://image.xiaomaiketang.com/xm/xTxfss364D.png',
url: 'https://mp.weixin.qq.com/s/yBPMqXEjkLWgzcTFsForIA'
},
{
title: '智高点教育 山东·临沂',
keyWord: '关键词：教务管理 家校互动',
content: ' 通过小麦助教平台，智高点教育在教师管理、学员管理、家校互动、市场推广等方面的工作效率大大提升，校区的各项工作都更有秩序。',
src: 'https://image.xiaomaiketang.com/xm/wMDNRhtZnG.png',
url: 'https://mp.weixin.qq.com/s/QUEAyYJ0hC77zP6ho2vDOw'
},
{
title: '戏舞巴士 浙江·杭州',
keyWord: '关键词：移动化办公',
content: ' 针对舞蹈课需要多场景办公的性质，小麦助教APP端和微信端有效满足移动化办公需求，机构对于家长端的服务响应更加及时。',
src: 'https://image.xiaomaiketang.com/xm/NJaW4i3XfD.png',
url: 'https://mp.weixin.qq.com/s/lBgCUb9zqknKmY-8v5cYbw'
},
]
}
}
componentWillMount() {
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap/cooperationCase.html";
// }
}
componentDidMount() {
var animation = lottie.loadAnimation({
container: document.getElementById('bag'), // Required
path: 'https://image.xiaomaiketang.com/xm/azRYmTyrBR.json', // Required
renderer: 'svg', // Required
loop: false, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
})
// window.WEBTRACING('WebG_customerCase_showEvent_openPage', 'WebG_客户案例_曝光事件_打开页面', { page: 'customerCase' })
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
render() {
const activeFlag = this.state.activeFlag;
const list = this.state.list
const datalist = this.state.datalist
return (
<div style={{ background: '#fff' }}>
<Header active={'customerCase'}></Header>
<div className="customerCase">
<div className="xm-customerCase-content center">
<div className="title">超80000家培训机构都在使用小麦助教</div>
<div className="content">快人一步，实现校区信息化升级</div>
<Button style={{ background: '#383944', color: '#FFFFFF' }} size="large"
onClick={() => {
window.WEBTRACING('WebG_customerCase_banner_clickEvent_clickFreeUse', 'WebG_客户案例_Banner_点击事件_点击免费试用', { page: 'customerCase' })
this.renderModal(true);
}}>免费试用</Button>
</div>
</div>
<div className="content">
<div className="instHopes">
<div className="title">
深度满足机构经营需求，为客户创造更大价值
</div>
<div className="swiper-container">
<div className="swiper-wrapper">
<Carousel style={{ width: 1200 }} slidesToShow={1}
>
<div className="swiper-slide">
<div className="module-products clearfix">
{
list &&
list.map((item, index) => {
return (
<div
className="product" key={index}
>
<img src={item.src} alt="" />
<div className="module-contents">
<p className="product_title">{item.title}</p>
<p className="keyWord">{item.keyWord}</p>
<p className="content">{item.content}</p>
<Button onClick={() => {
const openWindow = window.open('_blank');
openWindow.location = item.url;
}}>
查看案例
</Button>
</div>
</div>
)
})
}
</div>
</div>
<div className="swiper-slide">
<div className="module-products clearfix">
{
datalist &&
datalist.map((item, index) => {
return (
<div
className="product" key={index}
>
<img src={item.src} alt="" />
<div className="module-contents">
<p className="product_title">{item.title}</p>
<p className="keyWord">{item.keyWord}</p>
<p className="content">{item.content}</p>
<Button onClick={() => {
const openWindow = window.open('_blank');
openWindow.location = item.url;
}}>
查看案例
</Button>
</div>
</div>
)
})
}
</div>
</div>
</Carousel>,
</div>
</div>
</div>
<div className="instHope">
<div className="title">
机构寄语
</div>
<div className="swiper-container">
<div className="swiper-all" >
<div className="prev" onClick={() => {
this.refs.welcome.prev()
}}></div>
<div className="next" onClick={() => {
this.refs.welcome.next()
}}></div>
<div className="swiper-wrapper">
<Carousel autoplay autoplaySpeed={7000} style={{ width: 1200 }} slidesToShow={3}
ref="welcome"
beforeChange={(oldIndex, newIndex) => {
if (newIndex === 6) newIndex = -1
this.setState({
activeFlag: newIndex + 1
})
}}>
<div className={activeFlag === 0 ? "swiper-slide on" : "swiper-slide"}>
<div className="item">
<div className="text">
小麦助教——优质的系统平台，服务周到，培训老师耐心专业，是一家值得信赖的企业。希望小麦助教系统可以更加完善，更加全面，同时也预祝小麦可以越走越远！
<img src="https://image.xiaomaiketang.com/xm/c2eW5XFP5y.png" alt="" className="left" />
<img src="https://image.xiaomaiketang.com/xm/QEPmb7d4dS.png" alt="" className="right" />
</div>
<div className="item_bottom">
<div className='item_bottom_left'>
<p>顾校长</p>
<p>佰特机器人</p>
</div>
<div>
<img className='portrait' src="https://image.xiaomaiketang.com/xm/yWtshSjKQK.png" alt="" />
</div>
</div>
</div>
</div>
<div className={activeFlag === 1 ? "swiper-slide on" : "swiper-slide"}>
<div className="item">
<div className="text">
大数据不仅改变了生活，也同样改变了教育产业。小麦对数据的整合在教培行业中展现出了极高的水平，它所提供的便捷性，实用性以及延展性，非常贴合目前的教培市场。希望小麦不断提升，能为教培市场开辟新的视角，带来新的变革。
<img src="https://image.xiaomaiketang.com/xm/c2eW5XFP5y.png" alt="" className="left" />
<img src="https://image.xiaomaiketang.com/xm/QEPmb7d4dS.png" alt="" className="right" />
</div>
<div className="item_bottom">
<div className='item_bottom_left'>
<p>胡校长</p>
<p>艺之韵艺术培训</p>
</div>
<div>
<img className='portrait' src="https://image.xiaomaiketang.com/xm/KPNJQrpKac.png" alt="" />
</div>
</div>
</div>
</div>
<div className={activeFlag === 2 ? "swiper-slide on" : "swiper-slide"}>
<div className="item">
<div className="text">
小麦助教用了一年了，到现在已得心应手，离不开运营老师的帮助。信息化时代，用系统代替人工是必然趋势。小麦系统给我们带来了很多便利：报名管理、消课统计、财务管理、老师管理等等。我最喜欢的是家校互动功能，清楚记录孩子的每一步成长，同时也让家长感觉到我们的用心。希望小麦办得越来越好！
<img src="https://image.xiaomaiketang.com/xm/c2eW5XFP5y.png" alt="" className="left" />
<img src="https://image.xiaomaiketang.com/xm/QEPmb7d4dS.png" alt="" className="right" />
</div>
<div className="item_bottom">
<div className='item_bottom_left'>
<p>小米校长</p>
<p>宁波想象粒集团</p>
</div>
<div>
<img className='portrait' src="https://image.xiaomaiketang.com/xm/xbT2QtCnkA.png" alt="" />
</div>
</div>
</div>
</div>
<div className={activeFlag === 3 ? "swiper-slide on" : "swiper-slide"}>
<div className="item">
<div className="text">
在遇到小麦助教之前，我都用着手记方式登记学员报名和课消等，耗费大量精力还容易出错。庆幸自己遇到小麦助教，只用一部手机，到哪都可以随时工作。我还借助小麦秀给机构增加了几千流量。最让我感动的是小麦助教还提供了感恩母亲节活动，家长看了孩子们的视频都很感动，也让家长对我们机构更认可。为小麦助教疯狂打call！
<img src="https://image.xiaomaiketang.com/xm/c2eW5XFP5y.png" alt="" className="left" />
<img src="https://image.xiaomaiketang.com/xm/QEPmb7d4dS.png" alt="" className="right" />
</div>
<div className="item_bottom">
<div className='item_bottom_left'>
<p>周校长</p>
<p>思明书画私塾</p>
</div>
<div>
<img className='portrait' src="https://image.xiaomaiketang.com/xm/WyR6ZzZDiy.png" alt="" />
</div>
</div>
</div>
</div>
<div className={activeFlag === 4 ? "swiper-slide on" : "swiper-slide"}>
<div className="item">
<div className="text">
最早在老单位工作的时候就用小麦助教，后来自己创立画室，毫不犹豫再次选择了小麦助教。信息化、数字化是大势所趋。依托于小麦助教的数据中心，销售、教务、家校、财务全业务环节都有相应的数据记录和分析，在校区经营决策上发挥了很大的作用，橙果儿顺利完成了数字化管理升级。
<img src="https://image.xiaomaiketang.com/xm/c2eW5XFP5y.png" alt="" className="left" />
<img src="https://image.xiaomaiketang.com/xm/QEPmb7d4dS.png" alt="" className="right" />
</div>
<div className="item_bottom">
<div className='item_bottom_left'>
<p>王校长</p>
<p>橙果儿少儿美学馆</p>
</div>
<div>
<img className='portrait' src="https://image.xiaomaiketang.com/xm/JPENn435S2.png" alt="" />
</div>
</div>
</div>
</div>
<div className={activeFlag === 5 ? "swiper-slide on" : "swiper-slide"}>
<div className="item">
<div className="text">
简单高效是我们选择小麦助教的初衷。有了小麦助教后，智高点的学校管理水平更上一层楼，校区的各项工作都更有秩序。前台忙碌的场景不见了，各项数据有效沉淀下来，和家长之间的互动也越来越好，信息化管理模式受到了老师、学员、家长的一致认可。我相信在小麦助教的助力下，未来校区运转将会更加科学、理性、健康。
<img src="https://image.xiaomaiketang.com/xm/c2eW5XFP5y.png" alt="" className="left" />
<img src="https://image.xiaomaiketang.com/xm/QEPmb7d4dS.png" alt="" className="right" />
</div>
<div className="item_bottom">
<div className='item_bottom_left'>
<p>彭校长</p>
<p>智高点教育</p>
</div>
<div>
<img className='portrait' src="https://image.xiaomaiketang.com/xm/KwQ3xbfnZc.png" alt="" />
</div>
</div>
</div>
</div>
<div className={activeFlag === 6 ? "swiper-slide on" : "swiper-slide"}>
<div className="item">
<div className="text">
在我眼里，橙子里不仅仅是一个画画班，更是有情怀、有温度、带给人美好体验的空间，“注重细节”是橙子里一直以来坚持做的事。从点对点的上课提醒到考勤消课，再到课后作业点评、成长档案，每一处细节都有小麦助教的身影。大数据不仅让我们更好地见证孩子的点滴成长，也记录了我们校区的发展与进步，选择小麦助教，拥抱数据智能未来！
<img src="https://image.xiaomaiketang.com/xm/c2eW5XFP5y.png" alt="" className="left" />
<img src="https://image.xiaomaiketang.com/xm/QEPmb7d4dS.png" alt="" className="right" />
</div>
<div className="item_bottom">
<div className='item_bottom_left'>
<p>李校长</p>
<p>橙子里艺术空间</p>
</div>
<div>
<img className='portrait' src="https://image.xiaomaiketang.com/xm/i5GpBe7z5Z.png" alt="" />
</div>
</div>
</div>
</div>
</Carousel>,
</div>
</div>
</div>
</div>
<div className="inst">
<div className="title">为教育产业持续赋能，与万家机构共同进步</div>
<div className="list">
<img src="https://image.xiaomaiketang.com/xm/EWApYHJSKz.png" alt="" />
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="customerCase" isTrial={true}></Footer>
<SiderBar />
</div>
)
}
}
export default CustomerCase;
\ No newline at end of file
pages/customerCase.less 0 → 100644
.customer-case {
height: 100vh;
width: 100%;
position: relative;
background: rgba(48, 52, 62, 1);
.box {
position: absolute;
left: 50%;
margin-left: -55.5vh;
width: 111vh;
top: 5.37vh;
.img {
width: 111vh;
}
}
.data {
position: absolute;
width: 100%;
bottom: 0px;
height: 180px;
background: rgba(255, 255, 255, 0.1175);
padding-top: 1px;
.content {
width: 901px;
margin: 50px auto 0;
overflow: hidden;
.item {
width: 300px;
float: left;
text-align: center;
.num {
text-align: center;
// font-size:46px;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(255, 255, 255, 1);
line-height: 65px;
span {
font-size: 20px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 28px;
}
.pre-unit,
.number {
text-align: center;
font-size: 46px;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(255, 255, 255, 1);
line-height: 65px;
}
}
p {
font-size: 16px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 22px;
margin-top: 10px;
}
}
}
}
}
.customerCase {
width: 100%;
height: 720px;
background-image: url(https://image.xiaomaiketang.com/xm/FrZfn72eDp.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
}
.instHope {
position: relative;
.prev:hover {
transform: scale(1.2);
}
.next:hover {
transform: scale(1.2);
}
.prev {
width: 25px;
cursor: pointer;
height: 45px;
position: absolute;
top: 50%;
left: 1%;
background-image: url(https://image.xiaomaiketang.com/xm/tWtf8Hh3e4.png);
background-size: contain;
z-index: 99;
}
.next {
width: 25px;
cursor: pointer;
height: 45px;
margin-left: 50px;
top: 50%;
right: 1%;
position: absolute;
background-image: url(https://image.xiaomaiketang.com/xm/th5m2MZryW.png);
background-size: contain;
z-index: 99;
}
// .swiper-pagination {
// width: 140px;
// height: 8px;
// margin: 0 auto;
// position: static;
// transition: all 3s 3s ;
// .swiper-pagination-bullet {
// width: 25px;
// height: 8px;
// background: rgba(216, 216, 216, 1);
// border-radius: 6px;
// float: left;
// margin-right: 5px;
// &.swiper-pagination-bullet-active {
// background: linear-gradient(
// 90deg,
// rgba(255, 133, 52, 1) 0%,
// rgba(255, 173, 52, 1) 100%
// );
// }
// }
// }
.title {
font-size: 38px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 53px;
text-align: center;
margin: 70px auto;
}
.swiper-container {
width: 1350px;
margin: 0 auto;
// left: 50px;
width: 1300px;
.swiper-all {
width: 1300px;
}
.swiper-wrapper {
margin-left: 50px;
// .ant-carousel {
// .slick-dots {
// bottom: 0;
// li {
// margin: 0 8px;
// button {
// width: 24px;
// height: 8px !important;
// background: rgba(216, 216, 216, 1) !important;
// border-radius: 6px;
// float: left;
// margin-right: 5px;
// }
// &.slick-active{
// button{
// width: 30px;
// background:linear-gradient(90deg,rgba(255,133,52,1) 0%,rgba(255,173,52,1) 100%) !important;
// }
// }
// }
// }
// }
}
.swiper-slide {
width: 380px;
height: 570px;
transition: all 0.3s;
.item {
width: 320px;
transition: all 3s;
margin: 0 auto;
position: relative;
padding-top: 1px;
height: 423px;
margin-top: 70px;
box-shadow: 0px 1px 19px 0px rgba(228, 233, 239, 0.5);
background-color: #fff;
.item_bottom {
display: flex;
justify-content: flex-end;
padding: 30px;
position: absolute;
bottom: 0;
width: 100%;
}
.portrait {
width: 90px;
left: 110px;
}
.item_bottom_left {
text-align: right;
margin: 20px 20px 0px 0px;
p {
color: #666666;
font-size: 16px;
}
}
.text {
position: relative;
width: 216px;
font-size: 13px;
color: rgba(102, 102, 102, 1);
margin: 0 auto;
margin-top: 45px;
line-height: 21px;
.left {
position: absolute;
width: 24px;
left: -35px;
top: -13px;
}
.right {
position: absolute;
width: 24px;
right: -35px;
bottom: -20px;
}
}
// .p1 {
// font-size: 16px;
// color: rgba(51, 51, 51, 1);
// margin-top: 70px;
// text-align: center;
// }
// .p2 {
// font-size: 13px;
// color: rgba(102, 102, 102, 1);
// line-height: 25px;
// text-align: center;
// }
}
&.on {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
}
}
}
.xm-customerCase-content{
.title{
font-size: 60px;
width: 660px;
height: 168px;
font-weight: 500;
color: #FFFFFF;
line-height: 84px;
margin-bottom: 13px;
}
.content{
height: 42px;
font-size: 30px;
font-weight: 400;
color: #FFFFFF;
line-height: 42px;
margin-bottom: 20px;
}
button{
width: 160px;
height: 50px;
border: 0;
background: #383944;
border-radius: 2px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
}
.inst {
width: 1201px;
margin: 0 auto;
margin-top: -20px;
.title {
font-size: 38px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 53px;
text-align: center;
margin: 70px auto;
}
.list {
// overflow: hidden;
margin: 60px 0;
img {
width: 1200px;
}
.item {
width: 240px;
float: left;
text-align: center;
text-align: center;
}
}
}
.module-products {
display: flex;
justify-content: center;
flex-wrap: wrap;
.product {
width: 364px;
height: 465px;
background: rgba(250, 252, 253, 1);
padding: 30px 19px 28px 27px;
margin-bottom: 40px;
margin-right: 30px;
transition: transform 0.2s ease-in-out;
img {
width: 111px;
height: 111px;
position: relative;
margin: 0 auto;
margin: 0 0 25px 0;
}
.module-contents {
// font-family: PingFang SC,PingFangSC-Medium;
position: relative;
text-align: left;
height: 270px;
.title {
font-weight: bold;
margin-bottom: 14px;
font-size: 18px;
font-weight: bold;
color: rgba(51, 51, 51, 1);
line-height: 25px;
}
.product_title {
font-size: 18px;
font-weight: 500;
margin-bottom: 6px;
}
.keyWord {
color: #666666;
font-size: 16px;
margin-bottom: 31px;
}
.content {
font-size: 14px;
line-height: 22px;
width: 309px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999999;
}
button{
position: absolute;
bottom: 0px;
}
.ant-btn {
width: 125px;
height: 42px;
background: #FF8534;
color: #FFFFFF;
font-family: PingFangSC-Regular, PingFang SC;
font-size: 16px;
border: none;
}
}
}
}
.instHopes {
.swiper-pagination {
width: 140px;
height: 8px;
margin: 0 auto;
position: static;
transition: all 0.3s 0.5s;
.swiper-pagination-bullet {
width: 25px;
height: 8px;
background: rgba(216, 216, 216, 1);
border-radius: 6px;
float: left;
margin-right: 5px;
&.swiper-pagination-bullet-active {
background: linear-gradient(90deg,
rgba(255, 133, 52, 1) 0%,
rgba(255, 173, 52, 1) 100%);
}
}
}
.title {
font-size: 38px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 53px;
text-align: center;
margin: 70px auto;
}
.swiper-container {
width: 1200px;
margin: 0 auto;
// left: 50px;
width: 1200px;
.swiper-wrapper {
.ant-carousel {
.slick-dots {
bottom: 0;
li {
margin: 0 8px;
button {
width: 24px;
height: 8px !important;
background: rgba(216, 216, 216, 1) !important;
border-radius: 6px;
float: left;
margin-right: 5px;
}
&.slick-active {
button {
width: 30px;
background: linear-gradient(90deg, rgba(255, 133, 52, 1) 0%, rgba(255, 173, 52, 1) 100%) !important;
}
}
}
}
}
}
.swiper-slide {
width: 380px;
// height: 570px;
transition: all 0.3s;
}
}
}
.inst {
width: 1201px;
margin: 0 auto;
margin-top: -20px;
.title {
font-size: 38px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 53px;
text-align: center;
margin: 70px auto;
}
.list {
// overflow: hidden;
margin: 60px 0;
img {
width: 1200px;
}
.item {
width: 240px;
float: left;
text-align: center;
text-align: center;
}
}
}
\ No newline at end of file
pages/honorary-certificate.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-03 17:34:09
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-04 14:08:53
* @Description: 荣誉资质界面
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import { honoraryContant } from '../contants/honorary-certificate';
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import './HonoraryCertificate.less';
export default function HonoraryCertificate() {
return (
<div className='honorary-certificate'>
<Header />
<div className="honorary-certificate-title">
<div className="center" style={{ textAlign: "center" }}>
<p>荣誉资质</p>
</div>
</div>
<div className='content'>
<div className='center'>
<div className='honorary-area'>
{
honoraryContant.map((item) => {
return (
<div className='honorary-list'>
<img src={item.imgUrl} alt={item.desc} title={item.desc} />
<p>{item.desc}</p>
</div>
);
})
}
</div>
</div>
</div>
<div className='footer'>
<Footer isTrial={false} />
<SiderBar />
</div>
</div>
)
}
pages/index.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-02 15:08:14
* @LastEditors: liguokang
* @LastEditTime: 2021-07-14 20:39:57
* @Description: 主页
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import { Button } from 'antd';
import Link from 'next/link';
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import CarouselArea from '../components/CarouselArea';
import '../styles/globals.less';
import './index.less';
import {
ProductContant,
coreAdvantageContant,
customerNumContant
} from '../contants/home';
export default function Home() {
return (
<div className='home'>
<Header />
{/* <CarouselArea /> */}
<div className='content'>
<div className='operate-solutions'>
<div className='center'>
<div className='big-title'>为教培机构提供全场景运营管理解决方案</div>
<div className='product-area'>
{
ProductContant.map((item) => {
return (
<div
className="product"
onClick={() => {
this.handleToPage("/cloudClass");
}}
>
<div className="icon ykt">
<img src={item.imgUrl} alt={item.desc} title={item.desc} />
</div>
<div className="module-content">
<div className="title">{item.name}</div>
<div className="content">
{item.desc}
</div>
<div className="line"></div>
<Button>{item.buttonName}</Button>
<div className="go">
<img
src="https://image.xiaomaiketang.com/xm/BmKYSyet2Q.png"
alt="右箭头icon"
/>
</div>
</div>
</div>
)
})
}
</div>
</div>
</div>
<div className='core-advantage'>
<div className='center'>
<div className='big-title'>四大核心优势，为校区发展保驾护航</div>
<div className='department'>
{
coreAdvantageContant.map((item) => {
return (
<div className='department-tem'>
<img src={item.imgUrl} alt={item.desc} title={item.desc} />
<em />
<span className='title'>{item.name}</span>
<span className='desc'>{item.desc}</span>
</div>
)
})
}
</div>
</div>
</div>
<div className='customer-present'>
<div className='center'>
<div className='big-title'>用心做产品，赢得客户信赖</div>
<div className='numBox'>
{
customerNumContant.map((item) => {
return (
<div>
<span className='count'>{item.count}万</span>
<span className='company'>{item.company}</span>
<p className='desc'>{item.desc}</p>
</div>
);
})
}
</div>
<div className='cooperative-enterprise'>
<img src='https://image.xiaomaiketang.com/xm/EWApYHJSKz.png' alt='小麦助教合作企业' />
<Link href="/about">
<a className='more-case'>查看更多案例</a>
</Link>
</div>
</div>
</div>
</div>
<div className='footer'>
<Footer isTrial={true} />
<SiderBar />
</div>
</div>
);
}
pages/index.less 0 → 100644
.home {
width: 100%;
overflow: hidden;
// .carouse{
// width: 100%;
// overflow: hidden;
// }
.content {
.big-title {
font-size: 38px;
color: #333;
margin-bottom: 65px;
text-align: center;
}
.operate-solutions {
padding-top: 78px;
box-sizing: border-box;
.product-area {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.product {
width: 270px;
height: 340px;
background: rgba(250, 252, 253, 1);
padding: 30px 19px 28px 20px;
margin-bottom: 40px;
transition: transform 0.2s ease-in-out;
box-sizing: border-box;
img {
width: 82px;
height: 82px;
}
&:hover {
cursor: pointer;
background: #fff;
box-shadow: 0px 2px 30px 0px rgba(169, 186, 212, 0.2);
transform: scale(1.05, 1.05);
.go {
width: 100% !important;
}
}
.icon {
width: 82px;
height: 82px;
position: relative;
margin: 0 auto;
margin: 0 0 20px 0;
}
.module-content {
font-family: PingFang SC, PingFangSC-Medium;
text-align: left;
.title {
font-weight: bold;
margin-bottom: 14px;
font-size: 18px;
font-weight: bold;
color: rgba(51, 51, 51, 1);
line-height: 25px;
}
.line {
width: 80px;
height: 1px;
background: rgba(231, 231, 231, 1);
margin: 8px 0 10px 0;
}
.content {
font-style: 14px;
line-height: 20px;
height: 40px;
color: #999999;
font-weight: 400;
}
.ant-btn {
background: #f1f5f7;
border: none;
}
.go {
width: 30px;
height: 30px;
background: rgba(255, 133, 52, 1);
margin-top: 20px;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
line-height: 30px;
cursor: pointer;
&:hover {
width: 100%;
}
img {
width: 7px;
height: 12px;
}
transition: 0.2s;
}
}
}
}
}
.core-advantage {
background-color: #f4f6f9;
padding: 78px 0 34px 0;
box-sizing: border-box;
.department {
display: flex;
.department-tem {
width: 260px;
height: 231px;
margin-right: 53px;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: center;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
em {
display: inline-block;
width: 15px;
height: 3px;
background: #f87f5f;
position: absolute;
top: 120px;
}
.title {
position: absolute;
top: 140px;
color: #333;
font-size: 14px;
}
.desc {
position: absolute;
top: 175px;
color: #999;
font-size: 14px;
display: block;
max-width: 168px;
}
}
}
}
.customer-present {
padding-top: 78px;
box-sizing: border-box;
.numBox {
display: flex;
margin-bottom: 50px;
justify-content: space-around;
color: #333;
.count {
font-size: 72px;
}
.company {
font-size: 24px;
}
.desc {
font-size: 20px;
}
}
.cooperative-enterprise {
position: relative;
img {
width: 100%;
}
.more-case {
display: block;
width: 200px;
height: 36px;
line-height: 36px;
text-align: center;
border: 1px solid #eaeaea;
cursor: pointer;
color: #666;
text-decoration: none;
font-size: 14px;
position: absolute;
left: 50%;
margin: 40px 0 0 -100px;
}
}
}
}
.footer {
// overflow: hidden;
margin-top: 150px;
}
}
\ No newline at end of file
pages/join-us.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-04 15:28:23
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-04 16:06:40
* @Description: 加入我们页面
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import { useState, useLayoutEffect } from 'react';
import { getJobs } from "../data-source/join-us/request-apis";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./joinUs.less";
export default function JoinUs() {
const [jobs, setJobs] = useState([]);
const [selectJobs, setSelectJobs] = useState([]);
const [postTypeFlag, setPostTypeFlag] = useState(0); // 职位类别标记
const [jobNatureFlag, setJobNatureFlag] = useState(0); // 工作性质标记
const [detailFlag, setDetailFlag] = useState(-1);
useLayoutEffect(() => {
getData();
}, []);
// 获取数据
async function getData() {
const { data } = await getJobs();
setJobs(data);
setSelectJobs(data);
}
function handSelectNature(type, flag) {
const selectJobs =
type === "全部"
? jobs
: jobs.filter((item) => item.jobNature.indexOf(type) !== -1);
setSelectJobs(selectJobs);
setJobNatureFlag(flag);
}
function handSelectType(type, flag) {
const selectJobs =
type === "全部"
? jobs
: jobs.filter((item) => item.postType == type);
setSelectJobs(selectJobs);
setPostTypeFlag(flag);
}
return (
<div className="" style={{ background: "#fff" }}>
<Header active={"aboutUs"} />
<div className="join-us">
<div className="center" style={{ textAlign: "center" }}>
<p>加入我们，麦向美好未来</p>
</div>
</div>
<div className="content">
<div className="center">
<div className="content-module" style={{ background: '#fff' }}>
<div className="content-module-body">
<p className="join-us-title">
团队成员来自于浙江大学、清华大学、复旦大学、伦敦大学、新加坡国立大学等国内外知名高校，部分成员曾连续成功创业，在K12教育培训、移动互联网产品开发、大数据等领域深耕多年。其中研发和产品团队占据总人数1/2以上，硕士以上学历人数超过15%。
</p>
</div>
</div>
</div>
<div
className="content-module content-module-3"
style={{ background: "#fff" }}
>
<div className="center">
<div className="module-title">热招岗位</div>
<div className="content-module-body">
<div className="job-head">
<div className="work-nature clearfix">
<span className="type-nature fl" id="xmtd-type-nature">
工作性质
</span>
<div className="button fl clearfix" id="nature">
<span
className={
jobNatureFlag === 0 ? "active" : ""
}
data-id="0"
onClick={() => {
handSelectNature("全部", 0);
}}
>
全部
</span>
<span
className={
jobNatureFlag === 1 ? "active" : ""
}
data-id="1"
onClick={() => {
handSelectNature("社招", 1);
}}
>
社招
</span>
<span
className={
jobNatureFlag === 2 ? "active" : ""
}
data-id="2"
onClick={() => {
this.handSelectNature("校招", 2);
}}
>
校招
</span>
<span
className={
jobNatureFlag === 3 ? "active" : ""
}
data-id="3"
onClick={() => {
handSelectNature("校招", 3);
}}
>
实习
</span>
</div>
</div>
<div className="job-category clearfix">
<span className="type fl">职位类别</span>
<div className="button fl clearfix" id="type">
<span
className={
postTypeFlag === 0 ? "active" : ""
}
data-index="0"
onClick={() => {
handSelectType("全部", 0);
}}
>
全部
</span>
<span
className={
postTypeFlag === 1 ? "active" : ""
}
data-index="1"
onClick={() => {
handSelectType("技术", 1);
}}
>
技术
</span>
<span
className={
postTypeFlag === 2 ? "active" : ""
}
data-index="2"
onClick={() => {
handSelectType("产品", 2);
}}
>
产品
</span>
<span
className={
postTypeFlag === 3 ? "active" : ""
}
data-index="3"
onClick={() => {
handSelectType("设计", 3);
}}
>
设计
</span>
<span
className={
postTypeFlag === 4 ? "active" : ""
}
data-index="4"
onClick={() => {
handSelectType("市场", 4);
}}
>
市场
</span>
<span
className={
postTypeFlag === 5 ? "active" : ""
}
data-index="5"
onClick={() => {
handSelectType("商务顾问", 5);
}}
>
销售
</span>
<span
className={
postTypeFlag === 6 ? "active" : ""
}
data-index="6"
onClick={() => {
handSelectType("运营", 6);
}}
>
运营
</span>
</div>
</div>
</div>
<div className="job-detail" id="job-detail">
<ul style={{ padding: 0 }}>
<li className="first" id="first">
<span>职位名称</span>
<span>工作性质</span>
<span>职位类别</span>
<span>工作经验</span>
<span>招聘人数</span>
</li>
{selectJobs.map((item, index) => {
return (
<div
key={index}
onClick={() => {
detailFlag === index ? setDetailFlag(-1) : setDetailFlag(index);
}}
>
<li className="title">
<span>{item.jobName}</span>
<span>{item.jobType}</span>
<span>{item.postType}</span>
<span>{item.jobExperience}</span>
<span className="num xmtd-num">
{item.NeedNum}
{detailFlag === index ? (
<i className="icon iconfont up active iconUp fr">
</i>
) : (
<i className="icon iconfont down active iconDown fr xmtd-num">
</i>
)}
</span>
</li>
<li
className={
detailFlag === index
? "detail active"
: "detail"
}
id="detail"
>
<div className="append">
<div className="duty">
<div className="title">岗位职责：</div>
<div className="list" id="duty-list">
{item.responsibility &&
item.responsibility.map((item1, index1) => {
return <p key={index1}>{item1}</p>;
})}
</div>
</div>
<div className="require">
<div className="title">岗位要求：</div>
<div className="list" id="require-list">
{item.requirement &&
item.requirement.map((item2, index2) => {
return <p key={index2}>{item2}</p>;
})}
</div>
</div>
<div className="mail">简历投递：liyan@xiaomai5.com</div>
</div>
</li>
</div>
);
})}
</ul>
</div>
</div>
</div>
</div>
</div>
<Footer></Footer>
<SiderBar />
</div>
);
}
pages/joinUs.less 0 → 100644
.join-us {
width: 100%;
height: 266px;
background-image: url(https://image.xiaomaiketang.com/xm/Z6Btp4Spcj.png);
background-repeat: no-repeat;
background-position: top;
background-size: cover;
position: relative;
margin-bottom: 80px;
p {
font-size: 38px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 53px;
position: absolute;
left: 50%;
top: 100px;
margin-left: -209px;
}
}
.join-us-title{
height:56px;
font-size:20px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:28px;
text-indent: 40px;
}
.anchor {
height: 60px;
width: 100%;
}
.content-module-3 {
padding-bottom: 80px;
.module-title {
font-size: 38px;
color: rgba(51, 51, 51, 1);
line-height: 53px;
text-align: center;
margin: 78px 0 41px 0;
}
.job-head {
height: 140px;
.work-nature {
height: 30px;
.type-nature {
width: 72px;
height: 25px;
font-size: 18px;
font-weight: 600;
color: rgba(51, 51, 51, 1);
line-height: 25px;
margin-right: 60px;
}
.button {
span {
width: 60px;
height: 30px;
border-radius: 15px;
border: 1px solid rgba(204, 204, 204, 1);
display: inline-block;
text-align: center;
line-height: 30px;
cursor: pointer;
margin-right: 60px;
&.active {
border: 1px solid rgba(255, 133, 52, 1);
color: rgba(255, 133, 52, 1);
}
&:hover {
border: 1px solid rgba(255, 133, 52, 1) !important;
color: rgba(255, 133, 52, 1) !important;
}
}
}
}
.job-category {
margin-top: 37px;
margin-bottom: 60px;
.type {
width: 72px;
height: 25px;
font-size: 18px;
font-weight: 600;
color: rgba(51, 51, 51, 1);
line-height: 25px;
margin-right: 60px;
}
.button {
span {
width: 60px;
height: 30px;
border-radius: 15px;
border: 1px solid rgba(204, 204, 204, 1);
display: inline-block;
text-align: center;
line-height: 30px;
margin-right: 60px;
cursor: pointer;
&.active {
border: 1px solid rgba(255, 133, 52, 1);
color: rgba(255, 133, 52, 1);
}
&:hover {
border: 1px solid rgba(255, 133, 52, 1) !important;
color: rgba(255, 133, 52, 1) !important;
}
}
}
}
}
.job-detail {
ul {
width: 100%;
overflow: auto;
li {
width: 100%;
&#first {
background: rgba(245, 247, 250, 1);
span {
font-weight: 600;
font-size: 16px;
}
}
span {
width: 19.5%;
font-size: 14px;
color: rgba(102, 102, 102, 1);
line-height: 42px;
border: 0;
display: inline-block;
text-align: center;
font-weight: 400;
font-family: PingFangSC-Regular;
&.num {
.icon {
display: none;
font-size: 17px;
color: rgba(255, 133, 52, 1);
&.active {
display: block;
}
}
}
}
&.title {
&:hover {
background: #f5f7fa;
}
}
&.detail {
background: rgba(255, 255, 255, 1);
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.09);
display: none;
padding: 13px 40px 40px 40px;
width: 1189px;
margin-left: 6px;
box-sizing: border-box;
&.active {
display: block;
}
.append {
padding-left: 32px;
.duty,
.require {
.title {
font-size: 16px;
font-weight: 800;
color: rgba(51, 51, 51, 1);
line-height: 42px;
}
.list {
font-size: 14px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 42px;
}
}
.require {
margin-top: 40px;
margin-bottom: 40px;
}
.mail {
color: #0e6ed5;
font-size: 14px;
font-weight: 400;
line-height: 42px;
}
}
}
}
}
}
}
pages/micro-brand-web.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-23 15:39:06
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:09:59
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Button } from "antd";
// import FreeTrial from "@/components/FreeTrial";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./microBrand.less";
class microBrandWeb extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: false,
};
}
componentWillMount(){
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap.html";
// }
}
componentDidMount() {
// window.WEBTRACING('WebG_product_microBrandWeb_showEvent_openPage', 'WebG_产品_微官网_曝光事件_打开页面', {page: 'microBrandWeb'})
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
render() {
return (
<div className="cash-main" style={{ background: "#fff" }}>
<Header active={"product"}></Header>
<div className="micro-brand">
<div className="xm-head-content center">
<div className="title">让每一家机构拥有更适合自己的微官网</div>
<div className="content">快速部署/无需开发/品牌展示</div>
<Button
size="large"
onClick={() => {
window.WEBTRACING('WebG_product_microBrandWeb_banner_clickEvent_clickFreeUse', ' WebG_产品_微官网_Banner_点击事件_点击免费试用', {page: 'microBrandWeb'})
this.renderModal(true);
}}
>
免费试用
</Button>
</div>
</div>
<div className="center">
<div className="micro-brand-item" style={{ height: 345 }}>
<img
src="https://image.xiaomaiketang.com/xm/fFGBwKFApZ.png"
alt=""
/>
<div className="content">
<div className="title">聚焦小程序红利，获取海量曝光</div>
<span>借力微信红利，拥有更强大的流量获取能力</span>
</div>
</div>
<div className="micro-brand-item">
<div className="content">
<div className="title">多维度展示机构平台，彰显机构实力</div>
<span>
师资团体/明星学员/课程展示/校区环境…
<br /> 多维度展示机构实力
</span>
</div>
<img
src="https://image.xiaomaiketang.com/xm/PMPQyW4Zmf.png"
alt=""
/>
</div>
<div className="micro-brand-item">
<img
src="https://image.xiaomaiketang.com/xm/dnb42hDpyr.png"
alt=""
/>
<div className="content">
<div className="title">店铺页面组件化装修，快速部署</div>
<span>装修组件满足个性展现，快速部署一键拥有自己的品牌官网</span>
</div>
</div>
<div className="micro-brand-item">
<div className="content">
<div className="title">数据互联，系统化管理客户</div>
<span>微官网与CRM打通，流量获取-跟进环节无阻碍</span>
</div>
<img
src="https://image.xiaomaiketang.com/xm/R5eT3m5jny.png"
alt=""
/>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="microBrandWeb" isTrial={true}></Footer>
<SiderBar></SiderBar>
</div>
);
}
}
export default microBrandWeb;
pages/microBrand.less 0 → 100644
.micro-brand{
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/BNWbnDmF3Z.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
.ant-btn{
color: #4F99FF !important;
}
}
.micro-brand-item{
height: 468px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 80px 0 !important;
img{
width: 573px;
height: 100%;
}
.content{
text-align: left;
.title{
font-size:38px;
font-weight:500;
color:rgba(51,51,51,1);
line-height:53px;
margin-bottom: 17px;
}
span{
font-size:28px;
font-weight:400;
color:rgba(102,102,102,1);
line-height:40px;
}
}
}
\ No newline at end of file
pages/mm-chain.jsx 0 → 100644
/*
* @Author: hongxutao
* @Date: 2021-01-27 18:18:02
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:03:43
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Button } from "antd";
// import FreeTrial from "@/components/FreeTrial";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./mm-chain.less";
class mmChain extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: false,
};
}
componentWillMount(){
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap.html";
// }
}
componentDidMount() {
// window.WEBTRACING('WebG_product_xmChain_showEvent_openPageWebG_产品_小麦连锁版_曝光事件_打开页面', {page: 'mmChain'})
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
render() {
return (
<div className="cash-main" style={{ background: "#fff" }}>
<Header active={"product"} ></Header>
<div className="mai-Chain">
<div className="xm-head-chain-content center">
<div className="title">连锁品牌全场景数字化解决方案</div>
<div className="content">数据+营销，赋能多校区管理，实现盈利增长</div>
<Button
size="large"
onClick={() => {
window.WEBTRACING('WebG_product_xmChain_banner_clickEvent_clickFreeUseWebG_产品_小麦连锁版_Banner_点击事件_点击免费试用', {page: 'mmChain'})
this.renderModal(true);
}}
>
免费试用
</Button>
</div>
</div>
<div className="center">
<div className="chain-module-item">
<div className="module-title">线下连锁品牌面临的困境</div>
<div className="module-mm-chain clearfix">
<div className="mm-chain-item">
<div className="icon"></div>
<div className="module-content">
<div className="title">分校管理难</div>
<div className="content" style={{color:"#666666"}}>
没有形成明确的各级职责和权限，人员管 <br/> 理分散，分校区各自为战，难以形成合力
</div>
</div>
</div>
<div className="mm-chain-item">
<div className="icon"></div>
<div className="module-content">
<div className="title">经营分析难</div>
<div className="content" style={{color:"#666666"}}>
总校对分校的数据监控弱，日常数据总结 <br/> 分析不到位，校区经营决策无“数”可依
</div>
</div>
</div>
<div className="mm-chain-item">
<div className="icon"></div>
<div className="module-content">
<div className="title">品牌建设难</div>
<div className="content" style={{color:"#666666"}}>
总校与分校品牌宣传口径不统一，未形成 <br/> 体系化的品牌矩阵，品牌感知度弱
</div>
</div>
</div>
</div>
</div>
</div>
<div className="backGray">
<div className="center">
<div className="chain-module-item">
<div className="module-title" style={{paddingTop:80}}>小麦助教连锁版 <br/> 连锁品牌全场景数字化解决</div>
<div className="module-mm-chain clearfix" style={{paddingTop:40}}>
<div className="mm-Empowerment-item">
<div className="module-content">
<img src="https://image.xiaomaiketang.com/xm/TDmBjFjCHJ.png" alt=""/>
<p>管理赋能</p>
<div className="module-content-text">匹配总校原有管理架构，明确各级分校职责权限，灵活设置不同角色，提高校区管理效率</div>
</div>
</div>
<div className="mm-Empowerment-item">
<div className="module-content">
<img src="https://image.xiaomaiketang.com/xm/XZRK2iMiXk.png" alt=""/>
<p>数据赋能</p>
<div className="module-content-text">招生、教务、财务等各类数据尽在掌握，日常经营决策有“数”可依，各级管理更加有序</div>
</div>
</div>
<div className="mm-Empowerment-item">
<div className="module-content">
<img src="https://image.xiaomaiketang.com/xm/Ycnhz2Z6Md.png" alt=""/>
<p>品牌赋能</p>
<div className="module-content-text">配备专属微官网和家长端，自定义品牌信息，构建统一品牌矩阵，让家长成为机构忠粉</div>
</div>
</div>
</div>
</div>
</div>
<div className="center">
<div className="mai-Chain-item-img">
<img src="https://image.xiaomaiketang.com/xm/PwjFPhsPAZ.png" className="module-content-img" alt=""/>
</div>
</div>
<div className="center">
<div className="mai-Chain-item" style={{ height: 445 }}>
<div className="hard-content" >
<div className='title'>系统解决各级组织管理难点</div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="titles">多级组织架构管理</div>
<div className="detail">匹配校区实际管理架构，总校到分校各级权限职责明确，助力机构可持续发展</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="titles">加盟商/代理商管理</div>
<div className="detail">总校随时随地管控加盟商/代理商的基本经营情况，权限设置灵活高效</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="titles">跨校区教务管理</div>
<div className="detail">建立规范的跨校区工作运营流程，推动机构服务多样化，扩大学员和家长的选择面</div>
</div>
</li>
</ul>
</div>
<img
src="https://image.xiaomaiketang.com/xm/P3QwXb6AsE.png"
alt=""
/>
</div>
</div>
<div className="center">
<div className="mai-Chain-item" style={{ height: 445 }}>
<img
className="XmShow"
src="https://image.xiaomaiketang.com/xm/xDrJwb67dA.png"
alt=""
/>
<div className="hard-content" >
<div className='title'>逐个击破校区数据管理难点</div>
<ul>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="titles">招生、教务、财务各环节数据监控</div>
<div className="detail">总校运营中心建立数据监控看板，监控各分校招生、教务、财务等运营核心数据</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="titles">数据标签丰富，精细化运营分析</div>
<div className="detail">通过丰富的数据标签，精准定位用户画像，实现分层运营管理，提高线索转化效率</div>
</div>
</li>
<li>
<div className="left-img img5"></div>
<div className="right-text">
<div className="titles">多终端实时同步，建立机构的“智慧大脑”</div>
<div className="detail">支持电脑端和手机端展示，定期查看数据日报/周报/月报等，经营决策更高效</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className="center">
<div className="mai-Chain-item" style={{ height: 445 }}>
<div className="hard-content" >
<div className='title'>精准把脉多级品牌管理难点</div>
<ul>
<li>
<div className="left-img img7"></div>
<div className="right-text">
<div className="titles">统一的品牌矩阵</div>
<div className="detail">总校运营中心统筹管理各校区品牌宣传，机构logo、宣传语、亮点等对外展示统一</div>
</div>
</li>
<li>
<div className="left-img img8"></div>
<div className="right-text">
<div className="titles">鲜明的品牌特色</div>
<div className="detail">配备独立微官网小程序，家长端装修自定义，登录页、系统域名自定义</div>
</div>
</li>
<li>
<div className="left-img img9"></div>
<div className="right-text">
<div className="titles">优质的口碑传播</div>
<div className="detail">嫁接机构官方微信号，优质内容一键分享，让家长和学员成为机构的品牌忠粉</div>
</div>
</li>
</ul>
</div>
<img
src="https://image.xiaomaiketang.com/xm/RcpJ6AKFZH.png"
alt=""
/>
</div>
</div>
</div>
<div className="center">
<div className="chain-module-item">
<div className="module-title" style={{margin:0}}>完善的服务保障体系，助力客户成功</div>
<div className="module-mm-chain clearfix" style={{marginBottom:40}}>
<div className="mm-Empowerment-item">
<div className="module-content">
<img src="https://image.xiaomaiketang.com/xm/hmynhD7MFe.png"style={{height:100}} alt=""/>
<p style={{marginTop:15}}>全渠道售后服务</p>
<div className="module-content-text">
7*13.5h在线人工服务 <br/>
7*13.5h热线人工服务 <br/>
智能系统工单支持 </div>
</div>
</div>
<div className="mm-Empowerment-item">
<div className="module-content">
<img src="https://image.xiaomaiketang.com/xm/GS2Sn3bmwD.png" style={{height:100}} alt=""/>
<p style={{marginTop:15}}>全智能服务支持</p>
<div className="module-content-text">
7*24h机器人自助服务 <br/>
帮助中心，随时查阅 <br/>
新手任务，逐步引导 <br/>
</div>
</div>
</div>
<div className="mm-Empowerment-item">
<div className="module-content">
<img src="https://image.xiaomaiketang.com/xm/dQZ5MM2e2D.png" style={{height:100}} alt=""/>
<p style={{marginTop:15}}>专属运营实施服务</p>
<div className="module-content-text">
2v1专属企业微信服务群 <br/>
三阶段直播培训 <br/>
三阶段视频课培训 <br/>
</div>
</div>
</div>
<div className="mm-Empowerment-item">
<div className="module-content">
<img src="https://image.xiaomaiketang.com/xm/2psZSHCxCj.png" style={{height:100}} alt=""/>
<p style={{marginTop:15}}>客户成功服务</p>
<div className="module-content-text">
1v1资深运营经理服务 <br/>
系统培训结业报告1次 <br/>
系统使用健康诊断报告1次 <br/>
</div>
</div>
</div>
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="microBrandWeb" isTrial={true}></Footer>
<SiderBar></SiderBar>
</div>
);
}
}
export default mmChain;
pages/mm-chain.less 0 → 100644
.mai-Chain{
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/wj6TJSrPsf.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
.center{
.module-title{
width: 100%;
text-align: center;
font-size: 38px;
color: #333;
height: 53px;
line-height: 53px;
margin-bottom: 50px;
p{
font-size:24px;
line-height:33px;
font-weight:400;
margin-top: 10px;
}
}
}
}
.backGray{
background: #F4F6F9;
}
.xm-head-chain-content {
.title{
height: 62px;
font-size: 44px;
font-weight: 500;
color: #333333;
}
.content{
margin-top: 2px;
font-size: 20px;
}
button{
margin-top: 48px;
width: 138px;
height: 44px;
background: #333;
border: 0;
border-radius: 2px;
font-size: 16px;
color: #F9C152
}
}
.hard-content{
.title{
font-size: 24px;
font-weight: 500;
margin-left: 15px;
}
ul {
margin-top: 23px;
padding: 0;
li {
position: relative;
z-index: 10;
padding: 20px 40px 15px 15px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/etPkfQMwXF.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/4KKpBBBZrZ.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/Ci7HXz74hi.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/jrpycZcRMc.png");
}
&.img5 {
background-image: url("https://image.xiaomaiketang.com/xm/fJC2FHdye3.png");
}
&.img6 {
background-image: url("https://image.xiaomaiketang.com/xm/dfnCicy752.png");
}
&.img7 {
background-image: url("https://image.xiaomaiketang.com/xm/xb27KfFMGy.png");
}
&.img8 {
background-image: url("https://image.xiaomaiketang.com/xm/zDXHFH8Q7w.png");
}
&.img9 {
background-image: url("https://image.xiaomaiketang.com/xm/arwJibAZZs.png");
}
}
.right-text {
.titles {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 22px;
margin-bottom: 7px;
}
.detail {
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 17px;
}
}
}
}
}
.chain-module-item{
.module-title{
width: 100%;
text-align: center;
font-size: 38px;
color: #333;
height: 53px;
line-height: 53px;
margin-bottom: 50px;
margin-top: 46px;
p{
font-size:24px;
line-height:33px;
font-weight:400;
}
}
.module-mm-chain{
display: flex;
align-items: center;
justify-content: space-around;
.mm-Empowerment-item{
width: 306px;
height: 208px;
text-align: center;
margin-top: 80px;
img{
width: 100px;
height: 82px;
background-size: 100%;
}
p{
font-weight: 500;
margin-bottom: 7px;
position: relative;
}
.module-content-text{
color:#999;
width: 282px;
height: 40px;
font-size: 14px;
margin: 0 auto;
text-align: center;
p{
text-align: center;
}
}
}
.mm-chain-item{
width: 306px;
height: 208px;
background: #FAFCFD;
border-radius: 4px;
text-align: center;
position: relative;
.module-content{
margin-top: 70px;
.title{
font-size: 18px;
font-weight: 500;
margin-bottom: 15px;
}
}
.icon {
width: 73px;
height: 73px;
position: absolute;
top:0;
left:0;
background-image: url("https://image.xiaomaiketang.com/xm/CGijXE3TWP.png");
background-size: 100%;
}
}
}
}
.mai-Chain-item-img{
margin-top: 50px;
.module-content-img{
width: 1196px;
height: 469px;
background-size: 100%;
}
}
.mai-Chain-item{
height: 468px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px 0 !important;
.template{
width: 601px;
height: 386px;
}
img:nth-child(2) {
width: 601px;
height: 380px;
}
.XmShow{
width: 601px;
height: 474px;
}
.content{
text-align: left;
width: 580px;
.title{
font-size:38px;
font-weight:500;
color:rgba(51,51,51,1);
line-height:53px;
margin-bottom: 17px;
}
span{
font-size:28px;
font-weight:400;
color:rgba(102,102,102,1);
line-height:40px;
}
}
}
\ No newline at end of file
pages/mm-checkIn.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-23 15:38:50
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 13:58:08
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import {Button} from 'antd';
// import FreeTrial from "@/components/FreeTrial";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import './mmCheckIn.less'
class mmCheckIn extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow:false,
}
}
componentWillMount(){
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap/pages/RenewalAndReferral.html";
// }
}
componentDidMount() {
this.firstMove()
// window.WEBTRACING('WebG_product_mmCheckIn_showEvent_openPage', 'WebG_产品_麦麦打卡_曝光事件_打开页面', {page: 'mmCheckIn'})
}
firstMove() {
var oImgContainer1 = document.getElementById('img-container1');
var oImgContainer2 = document.getElementById('img-container2');
var oImgContainer3 = document.getElementById('img-container3');
var oImgContainer4 = document.getElementById('img-container4');
var oImgUl1 = oImgContainer1.getElementsByTagName('ul')[0];
var oImgUl2 = oImgContainer2.getElementsByTagName('ul')[0];
var oImgUl3 = oImgContainer3.getElementsByTagName('ul')[0];
var oImgUl4 = oImgContainer4.getElementsByTagName('ul')[0];
var aImgLi1 = oImgUl1.children;
var aImgLi2 = oImgUl2.children;
var aImgLi3 = oImgUl3.children;
var aImgLi4 = oImgUl4.children;
var oTextContainer1 = document.getElementById('text-container1');
var oTextContainer2 = document.getElementById('text-container2');
var oTextContainer3 = document.getElementById('text-container3');
var oTextContainer4 = document.getElementById('text-container4');
var oTextUl1 = oTextContainer1.getElementsByTagName('ul')[0];
var oTextUl2 = oTextContainer2.getElementsByTagName('ul')[0];
var oTextUl3 = oTextContainer3.getElementsByTagName('ul')[0];
var oTextUl4 = oTextContainer4.getElementsByTagName('ul')[0];
var aTextLi1 = oTextUl1.children;
var aTextLi2 = oTextUl2.children;
var aTextLi3 = oTextUl3.children;
var aTextLi4 = oTextUl4.children;
var timer1 = null;
var timer2 = null;
var timer3 = null;
var timer4 = null;
var bgshadow1 = oTextContainer1.children[0];
var bgshadow2 = oTextContainer2.children[0];
var bgshadow3 = oTextContainer3.children[0];
var bgshadow4 = oTextContainer4.children[0];
// // 设置ul的宽度
// oImgUl.offsetWidth = (aImgLi.length + 1) * aImgLi[0].offsetWidth;
// 定位imgUrl的初始位置
var iNow1 = 0;
var iNow2 = 0;
var iNow3 = 0;
var iNow4 = 0;
oImgUl1.style.left = -aImgLi1[0].offsetWidth * iNow1 + 'px';
oImgUl2.style.left = -aImgLi2[0].offsetWidth * iNow2 + 'px';
oImgUl3.style.left = -aImgLi3[0].offsetWidth * iNow3 + 'px';
oImgUl4.style.left = -aImgLi4[0].offsetWidth * iNow4 + 'px';
bgshadow1.style.top = 135 + 'px';
timer1 = setInterval(() => {
iNow1++;
if (iNow1 == 4) {
iNow1 = 0;
}
oImgUl1.style.left = -aImgLi1[0].offsetWidth * iNow1 + 'px';
bgshadow1.style.top = aTextLi1[1].offsetHeight * iNow1 + 135 + 'px';
for (var i = 0; i < aImgLi1.length; i++) {
aImgLi1[i].className = 'fl';
}
aImgLi1[iNow1].className = 'fl on';
}, 3000);
for (let i = 0; i < aTextLi1.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi1[i].onmouseover = function () {
clearInterval(timer1);
bgshadow1.style.top = bgshadow1.offsetHeight * i + 135 + 'px';
for (let j = 0; j < aImgLi1.length; j++) {
aImgLi1[j].className = 'fl';
}
aImgLi1[i].className = 'fl on';
oImgUl1.style.left = -aImgLi1[0].offsetWidth * i + 'px';
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer1.onmouseleave = function () {
clearInterval(timer1);
timer1 = setInterval(() => {
iNow1++;
if (iNow1 == 4) {
iNow1 = 0;
}
oImgUl1.style.left = -aImgLi1[0].offsetWidth * iNow1 + 'px';
bgshadow1.style.top = bgshadow1.offsetHeight * iNow1 + 135 + 'px';
for (var i = 0; i < aImgLi1.length; i++) {
aImgLi1[i].className = 'fl';
}
aImgLi1[iNow1].className = 'fl on';
}, 3000)
}
timer2 = setInterval(() => {
iNow2++;
if (iNow2 == 4) {
iNow2 = 0;
}
oImgUl2.style.left = -aImgLi2[0].offsetWidth * iNow2 + 'px';
bgshadow2.style.top = aTextLi2[1].offsetHeight * iNow2 + 135 + 'px';
for (var i = 0; i < aImgLi2.length; i++) {
aImgLi2[i].className = 'fl';
}
aImgLi2[iNow2].className = 'fl on';
}, 3000);
for (let i = 0; i < aTextLi2.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi2[i].onmouseover = function () {
clearInterval(timer2);
bgshadow2.style.top = bgshadow2.offsetHeight * i + 135 + 'px';
for (let j = 0; j < aImgLi2.length; j++) {
aImgLi2[j].className = 'fl';
}
aImgLi2[i].className = 'fl on';
oImgUl2.style.left = -aImgLi2[0].offsetWidth * i + 'px';
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer2.onmouseleave = function () {
clearInterval(timer2);
timer2 = setInterval(() => {
iNow2++;
if (iNow2 == 4) {
iNow2 = 0;
}
oImgUl2.style.left = -aImgLi2[0].offsetWidth * iNow2 + 'px';
bgshadow2.style.top = bgshadow2.offsetHeight * iNow2 + 135 + 'px';
for (var i = 0; i < aImgLi2.length; i++) {
aImgLi2[i].className = 'fl';
}
aImgLi2[iNow2].className = 'fl on';
}, 3000)
}
timer3 = setInterval(() => {
iNow3++;
if (iNow3 == 4) {
iNow3 = 0;
}
oImgUl3.style.left = -aImgLi3[0].offsetWidth * iNow3 + 'px';
bgshadow3.style.top = aTextLi3[1].offsetHeight * iNow3 + 135 + 'px';
for (var i = 0; i < aImgLi3.length; i++) {
aImgLi3[i].className = 'fl';
}
aImgLi3[iNow3].className = 'fl on';
}, 3000);
for (let i = 0; i < aTextLi3.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi3[i].onmouseover = function () {
clearInterval(timer3);
bgshadow3.style.top = bgshadow3.offsetHeight * i + 135 + 'px';
for (let j = 0; j < aImgLi3.length; j++) {
aImgLi3[j].className = 'fl';
}
aImgLi3[i].className = 'fl on';
oImgUl3.style.left = -aImgLi3[0].offsetWidth * i + 'px';
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer3.onmouseleave = function () {
clearInterval(timer3);
timer3 = setInterval(() => {
iNow3++;
if (iNow3 == 4) {
iNow3 = 0;
}
oImgUl3.style.left = -aImgLi3[0].offsetWidth * iNow3 + 'px';
bgshadow3.style.top = bgshadow3.offsetHeight * iNow3 + 135 + 'px';
for (var i = 0; i < aImgLi3.length; i++) {
aImgLi3[i].className = 'fl';
}
aImgLi3[iNow3].className = 'fl on';
}, 3000)
}
timer4 = setInterval(() => {
iNow4++;
if (iNow4 == 4) {
iNow4 = 0;
}
oImgUl4.style.left = -aImgLi4[0].offsetWidth * iNow4 + 'px';
bgshadow4.style.top = aTextLi4[1].offsetHeight * iNow4 + 135 + 'px';
for (var i = 0; i < aImgLi4.length; i++) {
aImgLi4[i].className = 'fl';
}
aImgLi4[iNow4].className = 'fl on';
}, 3000);
for (let i = 0; i < aTextLi4.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi4[i].onmouseover = function () {
clearInterval(timer4);
bgshadow4.style.top = bgshadow4.offsetHeight * i + 135 + 'px';
for (let j = 0; j < aImgLi4.length; j++) {
aImgLi4[j].className = 'fl';
}
aImgLi4[i].className = 'fl on';
oImgUl4.style.left = -aImgLi4[0].offsetWidth * i + 'px';
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer4.onmouseleave = function () {
clearInterval(timer4);
timer4 = setInterval(() => {
iNow4++;
if (iNow4 == 4) {
iNow4 = 0;
}
oImgUl4.style.left = -aImgLi4[0].offsetWidth * iNow4 + 'px';
bgshadow4.style.top = bgshadow4.offsetHeight * iNow4 + 135 + 'px';
for (var i = 0; i < aImgLi4.length; i++) {
aImgLi4[i].className = 'fl';
}
aImgLi4[iNow4].className = 'fl on';
}, 3000)
}
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
render() {
return (
<div className="cash-main" style={{background:'#fff'}}>
<Header active={'product'}></Header>
<div className="mm-check">
<div className="xm-head-content center" style={{ color : '#394655'}}>
<div className="title">麦麦打卡，教培机构督学营销工具</div>
<div className="content">创造教学闭环，提升社群活跃</div>
<Button size="large"
onClick={() => {
window.WEBTRACING('WebG_product_mmCheckIn_banner_clickEvent_clickFreeUse', 'WebG_产品_麦麦打卡_Banner_点击事件_点击免费试用', {page: 'mmCheckIn'})
this.renderModal(true);
}}>免费试用</Button>
</div>
</div>
<div className="content-module"></div>
<div className="content-module content-module-3">
<div className="center">
<div className="module-title">麦麦打卡，高频学习互动带来高频裂变<p>创造高频互动学习场景，丰富的激励机制和分享模式</p> </div>
<div className="module-mm-check clearfix">
<div className="item">
<div className="icon icon1"></div>
<p>互动点赞</p>
</div>
<div className="item">
<div className="icon icon2"></div>
<p>积分奖励</p>
</div>
<div className="item">
<div className="icon icon3"></div>
<p>日签海报</p>
</div>
</div>
<div className="module-mm-check clearfix">
<div className="item">
<div className="icon icon4"></div>
<p>日历打卡</p>
</div>
<div className="item">
<div className="icon icon5"></div>
<p>闯关打卡</p>
</div>
<div className="item">
<div className="icon icon6"></div>
<p>后台数据跟踪</p>
</div>
</div>
</div>
</div>
<div className="content-module content-module-2">
<div className="body-center">
<div className="module-title">
支持多种营销模式，口碑传播更进一步
</div>
<div className="mm-check-content-module-body center" style={{ padding: '0 170px'}}>
<div className="module-img" id="img-container1">
<div className="img-wrap">
<ul className="ul">
<li className="fl on"><img src="https://image.xiaomaiketang.com/xm/7j8tizn8nG.png" alt=""className="img1 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/eWJ5nmrR6w.png" alt="" className="img2 on picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/zTsje6knmz.png" alt="" className="img3 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/G3xWQN3ryG.png" alt="" className="img4 picture" /></li>
</ul>
</div>
</div>
<div className="module-text" id="text-container1">
<div className="bg-shadow"></div>
<div className="module-top-content">
<div className="title">个性化教学模式</div>
<span>匹配不同教学场景，机构实现教育闭环</span>
</div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">日历打卡</div>
<div className="detail">每日打卡，学生学习习惯养成</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">闯关打卡</div>
<div className="detail">解锁打卡，刺激学员自主学习</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">富文本编辑</div>
<div className="detail">图文并茂设置任务，让打卡更有吸引力</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">一键复制任务</div>
<div className="detail">打卡任务可复制，提升机构管理效率</div>
</div>
</li>
</ul>
</div>
</div>
<div className="mm-check-content-module-body center" style={{ padding: '0 170px'}}>
<div className="module-text" id="text-container2">
<div className="bg-shadow"></div>
<div className="module-top-content">
<div className="title">客情维护模式</div>
<span>创造高频学习，维护师生互动</span>
</div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">待完成任务</div>
<div className="detail">首页入口直观，任务可视化</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">查看打卡圈</div>
<div className="detail">任务对应打卡圈，围观详情重学习</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">评论点赞</div>
<div className="detail">双向互动提升用户粘性，让家校互动更有温度更有趣</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">打卡统计</div>
<div className="detail">关联多个学员，同时打卡作业</div>
</div>
</li>
</ul>
</div>
<div className="module-img" id="img-container2">
<div className="img-wrap">
<ul className="ul">
<li className="fl on"><img src="https://image.xiaomaiketang.com/xm/SdsArYThx3.png" alt=""className="img1 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/3kYeTPzQyW.png" alt="" className="img2 on picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/hSZRBaKaBY.png" alt="" className="img3 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/mNmdBFSsta.png" alt="" className="img4 picture" /></li>
</ul>
</div>
</div>
</div>
<div className="mm-check-content-module-body center" style={{ padding: '0 170px'}}>
<div className="module-img" id="img-container3">
<div className="img-wrap">
<ul className="ul">
<li className="fl on"><img src="https://image.xiaomaiketang.com/xm/G56mfezeti.png" alt=""className="img1 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/ena8QG82CQ.png" alt="" className="img2 on picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/iRQxZfBmeQ.png" alt="" className="img3 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/ZmR78ABeP6.png" alt="" className="img4 picture" /></li>
</ul>
</div>
</div>
<div className="module-text" id="text-container3">
<div className="bg-shadow"></div>
<div className="module-top-content">
<div className="title">课消续费模式</div>
<span>提高学员完课率，实现高客单价</span>
</div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">打卡提醒</div>
<div className="detail">为机构布置作业提供抓手，多渠道打卡提醒</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">积分奖励</div>
<div className="detail">小麦粒积分接入，激励学员打卡</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">作业留存</div>
<div className="detail">学生历史打卡留存，记录点滴成长</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">数据追踪</div>
<div className="detail">打卡数据可视化，为机构再添抓手</div>
</div>
</li>
</ul>
</div>
</div>
<div className="mm-check-content-module-body center" style={{ padding: '0 170px'}}>
<div className="module-text" id="text-container4">
<div className="bg-shadow"></div>
<div className="module-top-content">
<div className="title">营销招生模式</div>
<span>朋友圈分享裂变，机构口碑营销沉淀</span>
</div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">分享公开打卡</div>
<div className="detail">海报分享公开打卡，支持潜在学员报名</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">管理学员打卡</div>
<div className="detail">机构打卡作业可控化，净化打卡环境</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">日签海报分享</div>
<div className="detail">打卡完成生成日签，引导用户分享</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">优质作业分享</div>
<div className="detail">精选作业分享，增加机构曝光</div>
</div>
</li>
</ul>
</div>
<div className="module-img" id="img-container4">
<div className="img-wrap">
<ul className="ul">
<li className="fl on"><img src="https://image.xiaomaiketang.com/xm/sEHr2AbsDF.png" alt=""className="img1 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/7xitjPs7Pz.png" alt="" className="img2 on picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/k8TGT5xMsE.png" alt="" className="img3 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/znjAA63kdP.png" alt="" className="img4 picture" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="mmCheckIn" isTrial={true}></Footer>
<SiderBar/>
</div>
)
}
}
export default mmCheckIn;
\ No newline at end of file
pages/mm-poster.jsx 0 → 100644
/*
* @Author: hongxutao
* @Date: 2021-01-27 18:18:02
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:01:33
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Button } from "antd";
// import FreeTrial from "@/components/FreeTrial";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./mm-poster.less";
class mmPoster extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: false,
};
}
componentWillMount(){
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap.html";
// }
}
componentDidMount() {
// window.WEBTRACING('WebG_product_mmPoster_showEvent_openPage', 'WebG_产品_麦萌海报_曝光事件_打开页面', {page: 'mmPoster'})
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
render() {
return (
<div className="cash-main" style={{ background: "#fff" }}>
<Header active={"product"}></Header>
<div className="mai-poster">
<div className="xm-head-content center">
<div className="title">麦萌海报，教培机构专属海报设计管家</div>
<div className="content">精选十大主题模版，轻松打造品牌形象</div>
<Button
size="large"
onClick={() => {
window.WEBTRACING('WebG_product_mmPoster_banner_clickEvent_clickFreeUse', ' WebG_产品_麦萌海报_Banner_点击事件_点击免费试用', {page: 'mmPoster'})
this.renderModal(true);
}}
>
免费试用
</Button>
</div>
</div>
<div className="center">
<div className="mai-poster-item" style={{ height: 345 }}>
<img
className="template"
src="https://image.xiaomaiketang.com/xm/GCkFZDQMTf.png"
alt=""
/>
<div className="content" style={{marginLeft:120}}>
<div className="title">海量精美模板供您挑选，满足各类教学场景</div>
<span>适用于招生宣传/通知海报/邀请函/倒计时/<br/>荣誉海报/课程宣传……</span>
</div>
</div>
</div>
<div className="center">
<div className="mai-poster-item" style={{ height: 345 }}>
<div className="content" >
<div className="title">操作便捷易上手，一键修改文字， <br/> 轻松打造品牌形象</div>
<span>只需简单拖拽，3分钟产出精美海报</span>
</div>
<img
src="https://image.xiaomaiketang.com/xm/QN7kkeNizN.png"
alt=""
/>
</div>
</div>
<div className="center">
<div className="mai-poster-item" style={{ height: 345 }}>
<img
className="XmShow"
src="https://image.xiaomaiketang.com/xm/rryTSRJwSw.png"
alt=""
/>
<div className="content" style={{marginLeft:90}}>
<div className="title">关联小麦秀、微官网、麦田表单，招生裂变更高效</div>
<span>营销活动码智能调用，一键传播激活社交圈</span>
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="microBrandWeb" isTrial={true}></Footer>
<SiderBar></SiderBar>
</div>
);
}
}
export default mmPoster;
pages/mm-poster.less 0 → 100644
.mai-poster{
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/NmEnTeaJZ2.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
.ant-btn{
color: #FF8A1D !important;
}
}
.mai-poster-item{
height: 468px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 80px 0 !important;
.template{
width: 565px;
height: 368px;
}
img:nth-child(2) {
width: 565px;
height: 412px;
}
.XmShow{
width: 585px;
height: 356px;
}
.content{
text-align: left;
width: 580px;
.title{
font-size:38px;
font-weight:500;
color:rgba(51,51,51,1);
line-height:53px;
margin-bottom: 17px;
}
span{
font-size:28px;
font-weight:400;
color:rgba(102,102,102,1);
line-height:40px;
}
}
}
\ No newline at end of file
pages/mmCheckIn.less 0 → 100644
.mm-check {
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/fxXtrhCdnR.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
}
.module-mm-check {
display: flex;
justify-content: space-between;
.item {
width: 120px;
height: 140px;
box-sizing: border-box;
margin: 0px;
text-align: center;
margin-top: 40px;
p{
font-size:20px;
font-weight:400;
color:rgba(51,51,51,1);
line-height:28px;
margin-bottom: 50px;
}
&:nth-child(1) {
margin-top: 60px;
}
&:nth-child(2) {
margin-top: 60px;
}
&:nth-child(3) {
margin-top: 60px;
}
.icon {
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-bottom: 11px;
&.icon1 {
background-image: url("https://image.xiaomaiketang.com/xm/QSfMmtKfXk.png");
background-size: contain;
}
&.icon2 {
background-image: url("https://image.xiaomaiketang.com/xm/iBj2ZRiKRh.png");
background-size: contain;
}
&.icon3 {
background-image: url("https://image.xiaomaiketang.com/xm/pNCZTNkK2M.png");
background-size: contain;
}
&.icon4 {
background-image: url("https://image.xiaomaiketang.com/xm/3sCGJwNZFk.png");
background-size: contain;
}
&.icon5 {
background-image: url("https://image.xiaomaiketang.com/xm/QcaXrsdj5C.png");
background-size: contain;
}
&.icon6 {
background-image: url("https://image.xiaomaiketang.com/xm/nhnrFBQwRp.png");
background-size: contain;
}
}
}
}
.mm-check-content-module-body {
display: flex;
justify-content: space-between;
.module-img {
width: 322px;
height: 640px;
background-image: url(https://image.xiaomaiketang.com/xm/6GSxeFPZwe.png);
background-size: 102% 101%;
background-repeat: no-repeat;
padding: 52px 16px 108px 26px;
box-sizing: border-box;
overflow: hidden;
position: relative;
margin-bottom: 87px;
.img-wrap {
width: 290px;
height: 516px;
overflow: hidden;
ul {
width: 2023px;
height: 516px;
overflow: hidden;
position: relative;
padding-left: 0px;
li {
width: 289px;
opacity: 0;
&.on{
transition: opacity 0.5s;
opacity: 1;
}
.picture {
width: 279px;
height: 506px;
}
}
}
}
}
.web-img {
box-shadow: 0 0 30px #eaeff6;
}
.module-text {
position: relative;
overflow: hidden;
.module-top-content{
color:rgba(51,51,51,1);
margin-top: 59px;
.title{
font-size:24px;
font-weight:500;
line-height:33px;
}
span{
font-size:16px;
font-weight:400;
line-height:22px;
}
}
.bg-shadow{
width: 100%;
height: 111px;
background-color: #fff;
// opacity: 0.1;
position: absolute;
top:135px;
transition: top 0.2s;
}
.bg-shadow2{
width: 100%;
height: 111px;
background-color: #fff;
// opacity: 0.1;
position: absolute;
top:135px;
transition: top 0.2s;
}
ul {
margin-top: 23px;
padding: 0;
li {
position: relative;
z-index: 10;
padding: 31px 53px 32px 25px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
&.on {
background-color: rgba(244, 246, 249, 1);
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/rbi6dPW8xZ.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/YnWhp3fCQY.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/zB7dSye2JQ.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/tRMncCGFW5.png");
}
}
.right-text {
.title {
font-size: 16px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 22px;
margin-bottom: 7px;
}
.detail {
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 17px;
}
}
}
}
&#text-container2 {
ul {
li {
&.on {
background-color: #fff;
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/wKB8iEK3S3.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/676JnCaPPZ.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/mpC2pTDB4a.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/iGJCesY4dw.png");
}
}
}
}
}
&#text-container3 {
ul {
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/abKDQh3TcS.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/cT4JBAk6AH.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/f3NA2Bxskt.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/GMhbs5Xbwf.png");
}
}
}
}
&#text-container4 {
ul {
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/tc72zMAMRi.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/jPWAdNX56C.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/MxcabfCEJ6.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/GYQraztebN.png");
}
}
}
}
}
}
\ No newline at end of file
pages/new-dynamic.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-04 15:09:14
* @LastEditors: liguokang
* @LastEditTime: 2021-07-14 20:40:16
* @Description: 新闻动态页面
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import { useState, useEffect } from 'react';
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import moment from 'moment';
import { Pagination } from 'antd';
// import NewsAPI from "../data-source/news/news-apis";
import axios from 'axios';
import './newsDynamic.less';
export default function NewsDynamic() {
const [list, setList] = useState([]); // 新闻列表
const [total, setTotal] = useState(0);
const [query, setQuery] = useState({
current: 1,
size: 10
});
useEffect(() => {
getList();
}, []);
// 获取新闻列表
function getList() {
const params = {
...query,
};
axios.post('https://heimdall.xiaomai5.com/workbench/anon/website/fetchPublishedNews', params).then((res) => {
const { data: { result } } = res;
const { records, total } = result;
setList(records);
setTotal(total);
});
}
return (
<div className="" style={{ background: "#fff" }}>
<Header active={'aboutUs'}></Header>
<div className="news-dynamic">
<div className="center">
<p>新闻动态</p>
</div>
</div>
<div id="news" className="center">
{list &&
list.map((item, index) => {
return (
<div className="news-list" key={index} onClick={() => {
this.props.history.push({
pathname: '/newsDetail',
state: {
item
}
})
}}>
<div className="img">
<img src={item.coverUrl} alt="" />
</div>
<div className="content">
<h1>{item.title}</h1>
<div className="item-content"> {item.summary}</div>
<span className="item-source">来源： {item.source} </span>
<span className="item-time"> {moment(Number(item.publishTime)).format("YYYY-MM-DD HH:mm")} </span>
</div>
</div>
);
})}
<Pagination
// style={{ textAlign: 'right' }}
current={query.current}
pageSize={query.size}
// onChange={this.getEffectActivity}
total={total} />
</div>
<Footer></Footer>
<SiderBar />
</div>
)
}
pages/newsDynamic.less 0 → 100644
.news-dynamic {
width: 100%;
height: 266px;
background-image: url(https://image.xiaomaiketang.com/xm/mjNCxXt8HJ.png);
background-repeat: no-repeat;
position: relative;
background-position: top;
background-size: cover;
margin-bottom: 80px;
p {
font-size: 38px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 53px;
position: absolute;
left: 50%;
top: 100px;
margin-left: -76px;
}
}
.news-list {
height: 280px;
margin: 40px auto;
position: relative;
border-bottom: 1px solid #e8e8e8;
cursor: pointer;
&:last-child {
border-bottom: none;
}
img {
width: 320px;
height: 240px;
object-fit: cover;
}
.content,
.img {
display: inline-block;
}
.content {
width: 860px;
height: 240px;
position: absolute;
margin-left: 20px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(102, 102, 102, 1);
.item-source{
position: absolute;
bottom: 0;
}
.item-time{
position: absolute;
bottom: 0;
right: 0;
}
h1 {
font-size: 22px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 40px;
margin-bottom: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
p {
line-height: 22px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
span {
line-height: 22px;
margin-top: 87px;
}
.item-content{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
}
pages/wheat-school.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-23 13:38:22
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:35:17
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Carousel, Modal } from "antd";
import Header from '../components/Header';
import "./wheatSchool.less";
class WheatSchool extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: null,
};
}
componentWillMount() {
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap.html";
// }
}
componentDidMount() {
// window.WEBTRACING('WebG_xmSchools_showEvent_openPage', 'WebG_小麦学院_曝光事件_打开页面', {page: 'wheatSchool'})
}
handConsult() {
const modal = (
<Modal
visible
width="400px"
footer={null}
onCancel={() => {
this.setState({
modal: null,
});
}}
>
<div className="hotline">
<p>咨询电话</p>
<h1>小麦学院：400-447-7456</h1>
</div>
</Modal>
);
this.setState({
modal,
});
}
render() {
return (
<div className="" style={{ background: "#fff" }}>
<Header active={"wheatSchool"}></Header>
<div className="wheat-school">
<div className="swiper-img-content center">
<div className="head">
<p>小麦学院 </p>
<img
src="https://image.xiaomaiketang.com/xm/BJamdm6p6e.png"
alt=""
/>
</div>
<span>
多种学习场景：视频、音频、图文、线下沙龙
<br />
海量办学知识：市场招生、教务教学、机构运营、团队管理
<br />
一站式解决校长的经营难题
</span>
<div className="line"></div>
<span className="now-apply">
<a
href="https://zmeel-pc.duanshu.com"
target="_blank"
className="link-a"
>
立即进入
</a>
</span>
</div>
</div>
<div className="content-module"></div>
<div className="content-module content-module-2">
<div className="center">
<div className="module-item">
<div className="module-title">小麦学院，校长学习成长的平台</div>
<div className="module-wheat-school clearfix">
<div className="item fl">
<div className="icon icon1"></div>
<div className="module-content">
<div className="title">一线精英倾囊相授</div>
<div className="content">
特邀一线干将 <br /> 多元视角，为您升级机构运营思路
</div>
</div>
</div>
<div className="item fl">
<div className="icon icon2"></div>
<div className="module-content">
<div className="title">干货课程步步落地</div>
<div className="content">
精选优质课程 <br />
标准动作细分拆解，可落地的实战经验{" "}
</div>
</div>
</div>
<div className="item fl">
<div className="icon icon3"></div>
<div className="module-content">
<div className="title">一次购买永久回看</div>
<div className="content">
{" "}
支持直播回看 <br />
在线学习、互动交流，温故而知新
</div>
</div>
</div>
<div className="item fl">
<div className="icon icon4"></div>
<div className="module-content">
<div className="title">定期福利助力校长</div>
<div className="content">
提供学习资料包
<br />
专属助理定期发送，办学干货时刻掌握
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="content-module content-module-3">
<div className="center">
<div className="module-item">
<div className="module-title">
六大板块，涵盖机构运营管理全流程
</div>
<div className="module-wheat-school clearfix">
<div className="item2">
<a
href="https://zmeel-pc.duanshu.com/category/content/list/203774"
target="_blank"
rel="noopener noreferrer"
>
<div className="icon icon1 fr"></div>
<div className="module-content fl">
<div className="title">市场招生——更有效的招生方案</div>
<div className="content">
市场地推、异业合作、招生活动、咨询技巧
</div>
</div>{" "}
</a>
</div>
<div className="item2">
<a
href="https://zmeel-pc.duanshu.com/category/content/list/203780"
target="_blank"
rel="noopener noreferrer"
>
<div className="icon icon2 fr "></div>
<div className="module-content fl">
<div className="title">团队管理——更轻松的管理技巧</div>
<div className="content">
文化建设、人效管理、薪酬体系、团队打造
</div>
</div>
</a>
</div>{" "}
<div className="item2">
<a
href="https://zmeel-pc.duanshu.com/category/content/list/203803"
target="_blank"
rel="noopener noreferrer"
>
<div className="icon icon3 fr"></div>
<div className="module-content fl">
<div className="title">教学管理——更落地的教学方法</div>
<div className="content">
教师培训、教学标准、家校沟通、升级续班
</div>
</div>
</a>
</div>
</div>
<div className="module-wheat-school clearfix">
{" "}
<div className="item2">
<a
href="https://zmeel-pc.duanshu.com/category/content/list/203777"
target="_blank"
rel="noopener noreferrer"
>
<div className="icon icon4 fr"></div>
<div className="module-content fl">
<div className="title">机构运营——更科学的运营理念</div>
<div className="content">
口碑树立、产品体系、运营流程、战略布局
</div>
</div>
</a>
</div>
<div className="item2">
<a
href="https://zmeel-pc.duanshu.com/category/content/list/203803"
target="_blank"
rel="noopener noreferrer"
>
<div className="icon icon5 fr"></div>
<div className="module-content fl">
<div className="title">教务服务——更系统的服务体系</div>
<div className="content">
教务培养、服务流程、内部协同、家长管理
</div>
</div>
</a>
</div>
<div className="item2">
<a
href="https://zmeel-pc.duanshu.com/category/content/list/245996"
target="_blank"
rel="noopener noreferrer"
>
<div className="icon icon6 fr"></div>
<div className="module-content fl">
<div className="title">家庭教育——更专业的家校教育</div>
<div className="content">
青少年心理、亲子关系、学生管理
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div className="content-module content-module-3">
<div className="center">
<div className="module-item">
<div className="module-title">
课程形式多样化，满足不同学习习惯
</div>
<div className="module-wheat-school clearfix">
<div className="item3">
<div className="online-knowledge">
<div className="module-content fl">
<div className="title">线上知识店铺</div>
<div className="content">
会员畅享海量课程，视频、
<br /> 音频、图文多种形式展现
</div>
</div>
<div className="fr clearfix" style={{ width: 725 }}>
<div className="course">
<img
src="https://image.xiaomaiketang.com/xm/ddisr3CeKw.png"
alt=""
/>
<div className="title">尊享会员</div>
<div className="content">随时随地获取海量办学干货</div>
</div>
<div className="course">
<img
src="https://image.xiaomaiketang.com/xm/38kJhJyyxj.png"
alt=""
/>
<div className="title">视频课程</div>
<div className="content">
长视频案例更全面，短视频碎片化学习更高效
</div>
</div>
<div className="course">
<img
src="https://image.xiaomaiketang.com/xm/bCyRHbFPZj.png"
alt=""
/>
<div className="title">音频课程</div>
<div className="content">
每天5分钟，了解机构运营小技巧
</div>
</div>
<div className="course">
<img
src="https://image.xiaomaiketang.com/xm/eEHdJzycfG.png"
alt=""
/>
<div className="title">图文干货</div>
<div className="content">
深度解析知识点，获取信息更直观
</div>
</div>
</div>
</div>
<div className="live-streaming">
<div className="left-img fl">
<Carousel effect="fade" autoplay dots={false}>
<img
src="https://image.xiaomaiketang.com/xm/8iCWWwE8wP.png"
alt=""
/>
<img
src="https://image.xiaomaiketang.com/xm/48TKykX5jr.png"
alt=""
/>
</Carousel>
</div>
<div className="module-content">
<div className="title">线上直播课程</div>
<div className="content">
每月上新，名师大咖面对面，办学难题精准答疑
</div>
</div>
</div>
<div className="offline-active">
<div className="module-content">
<div className="title">线下沙龙活动</div>
<div className="content">
名师零距离，同行在身边，
<br /> 进阶精英校长
</div>
</div>
<div className="right-img">
<Carousel effect="fade" autoplay dots={false}>
<img
src="https://image.xiaomaiketang.com/xm/sCkpNsjfhS.png"
alt=""
/>
<img
src="https://image.xiaomaiketang.com/xm/F4XixwetwS.png"
alt=""
/>
<img
src="https://image.xiaomaiketang.com/xm/w7m3NAZcH4.png"
alt=""
/>
<img
src="https://image.xiaomaiketang.com/xm/PdcxHdt2b5.png"
alt=""
/>
</Carousel>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="bottom-content">
<div className="bottom-code">
<div className="code-item">
<img
src="https://image.xiaomaiketang.com/xm/zEyW2yas7d.png"
alt=""
/>
<br />
<span>扫码关注小麦学院公众号每周上新干货好文</span>
</div>
<div className="code-item">
<img
src="https://image.xiaomaiketang.com/xm/KXdGEHrnbK.png"
alt=""
/>
<br />
<span>
扫码关注小麦学院店铺
<br /> 海量课程任您挑选
</span>
</div>
</div>
</div>
<div
className="tel"
onClick={() => {
this.handConsult();
}}
>
<img src="https://image.xiaomaiketang.com/xm/SDcE2eDF5x.png" alt="" />
</div>
{/* { this.state.modal} */}
</div>
);
}
}
export default WheatSchool;
pages/wheat-system.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-04 17:29:38
* @LastEditors: liguokang
* @LastEditTime: 2021-07-14 20:40:26
* @Description: 招商加盟-小麦助教系统
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import Header from '../components/Header';
import './WheatSystem.less';
export default function WheatSystem() {
return (
<div className='wheat-system'>
<Header active={"joinIn"}></Header>
<div className="banner">
<div className="text">
<p>小麦助教</p>
<p>诚招全国合伙人</p>
<p className="subTitle">共享万亿级教育培训行业市场红利</p>
<div className='button'
onClick={() => {
// window.WEBTRACING('WebG_merchantsJoin_xmErp_banner_clickEvent_clickApply', 'WebG_招商加盟_小麦助教系统_Banner_点击事件_点击立即申请', {
// page: 'wheatSystem'
// })
// this.renderModal(true);
}}>立即申请</div>
</div>
</div>
<div className="tab">
<div className="tab-1 tab-margin">
<p className="title">四大核心优势，圆您创业梦想</p>
<ul>
<li>
<img src="https://image.xiaomaiketang.com/xm/kKbKdtdPAt.png" alt="" />
<div>
<p>超高返点</p>
<p>利润清晰可见</p>
</div>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/JwNSeTNYyc.png" alt="" />
<div>
<p>超低加盟门槛</p>
<p>助您轻松创业</p>
</div>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/hi3rBhed6c.png" alt="" />
<div>
<p>多方位项目支持</p>
<p>解您后顾之忧</p>
</div>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/GNP4M2R4SM.png" alt="" />
<div>
<p>高速成长行业</p>
<p>无限市场空间</p>
</div>
</li>
</ul>
</div>
<div className="tab-2 tab-margin">
<p className="title">产业体量</p>
<ul>
<li>
<img src="https://image.xiaomaiketang.com/xm/fWPHps8ph2.png" alt="" />
<p>100万+</p>
<p>教培机构数</p>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/QXWapiamPR.png" alt="" />
<p>30000亿</p>
<p>市场体量</p>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/x6CBmazp7t.png" alt="" />
<p>400万</p>
<p>从业人员</p>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/Kcfp4jfERt.png" alt="" />
<p>30%</p>
<p>行业年增速</p>
</li>
</ul>
</div>
<div className="tab-3 tab-margin">
<p className="title">小麦助教，懂教育的移动互联网SaaS管理软件</p>
<ul>
<li>
<div className="tab3-background"></div>
<div className="tab3-fontsie">
<p>95%</p>
覆盖线下教育<br />
培训机构95%以上<br />
真实场景
</div>
</li>
<li>
<div className="tab3-background"></div>
<div className="tab3-fontsie">
<p>67%</p>
提升67%<br />
客户满意度和续签率
</div>
</li>
<li>
<div className="tab3-background"></div>
<div className="tab3-fontsie">
<p>60%</p>
节约机构60%<br />
运营管理时间
</div>
</li>
<li>
<div className="tab3-background"></div>
<div className="tab3-fontsie">
<p>60000+</p>
服务教育机构<br />
60000+家
</div>
</li>
<li>
<div className="tab3-background"></div>
<div className="tab3-fontsie">
<p>30+</p>
服务超过30种<br />
教培行业品类
</div>
</li>
</ul>
</div>
<div className="tab-4 tab-margin">
<p className="title">八大支持助您创业无忧</p>
<ul>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/frdEY8rKEY.png" alt="" />
<span>品牌支持</span>
</div>
<div className="introduce">
<h4>品牌支持</h4>
<div>
为渠道合伙人提供品牌授权资质证书、授权牌匾、名片模板、易拉宝模板、宣传册模板等销售物料的企业形象标识品牌背书。
</div>
</div>
</li>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/nKpTdhQ62m.png" alt="" />
<span>培训支持</span>
</div>
<div className="introduce">
<h4>培训支持</h4>
<p>
1. 为渠道合伙人提供线上线下相结合的行业、产品、销售等专业培训；
</p>
<p>
2. 定期组织渠道合伙人到杭州总部举行封闭式集训。
</p>
</div>
</li>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/GKn6MGf5MG.png" alt="" />
<span>销售支持</span>
</div>
<div className="introduce">
<h4>销售支持</h4>
<p>
1. 提供最新全套销售资料；
</p>
<p>
2. 协助重要客户陪访，远程协助演示；
</p>
<p>
3. 渠道经理定期到当地对重要客户进行走访培训。
</p>
</div>
</li>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/RHK6x5aEzY.png" alt="" />
<span>运营支持</span>
</div>
<div className="introduce">
<h4>运营支持</h4>
<p>
1. 总部全程提供签约机构的线上售后 服务;
</p>
<p>
2. 每季度协助渠道合伙人进行一次线 下服务培训。
</p>
</div>
</li>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/JQMM3mMycX.png" alt="" />
<span>市场支持</span>
</div>
<div className="introduce">
<h4>市场支持</h4>
<div>
配合渠道合伙人所辖市场的线上、线 下营销和品牌宣传/广告支持，并输 出统一营销政策和市场激励政策，当 地政府/行业等资源协助对接。
</div>
</div>
</li>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/dsj6hdnMFA.png" alt="" />
<span>活动支持</span>
</div>
<div className="introduce">
<h4>活动支持</h4>
<div>
为渠道合伙人在当地举办区域性营销活动提供讲师、物料、课件、会议流程辅导等支持。
</div>
</div>
</li>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/wY4TnFMkAa.png" alt="" />
<span>工具支持</span>
</div>
<div className="introduce">
<h4>工具支持</h4>
<div>
提供小麦独立开发的crm客户管理系 统，供渠道合伙人进行客户管理。
</div>
</div>
</li>
<li>
<div className="show-way">
<img src="https://image.xiaomaiketang.com/xm/X8cEsWcmSM.png" alt="" />
<span>物料支持</span>
</div>
<div className="introduce">
<h4>物料支持</h4>
<p>
1. 提供全套销售资料（含产品手册、宣传单页、报价单等）；
</p>
<p>
2. 提供举办活动所需物料。
</p>
</div>
</li>
</ul>
</div>
<div className="tab-5 tab-margin">
<p className="title">渠道合伙人资质</p>
<ul>
<li>
<img src="https://image.xiaomaiketang.com/xm/M3Tt6HjxYj.png" alt="" />
<p>
正规注册公司，独立法人 <br />
有志于从事教育培训行业
</p>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/fCzeMhXtEj.png" alt="" />
<p>
有三人（含）以上 <br />
销售团队
</p>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/rK7yaz6MmJ.png" alt="" />
<p>
教育/互联网/软件/广告 <br />
/传媒相关行业优先
</p>
<p className="supplement">
在当地有教培机构资源者(非强制)
</p>
</li>
<li>
<img src="https://image.xiaomaiketang.com/xm/rjNrHnMstc.png" alt="" />
<p>
认可小麦价值观 <br />
公司无不良经营历史
</p>
</li>
</ul>
</div>
<div className="tab-6">
<div className="step-pic">
<h4>渠道合伙人加盟流程</h4>
<ul>
<li className="step">
<img src="https://image.xiaomaiketang.com/xm/ZAGNfcE4mH.png" alt="" />
<span>加盟咨询</span>
</li>
<li className="direct">
<img src="https://image.xiaomaiketang.com/xm/CeSZc5T6Y4.png" alt="" />
</li>
<li className="step">
<img src="https://image.xiaomaiketang.com/xm/jxnsnXCpzJ.png" alt="" />
<span>双向考察</span>
</li>
<li className="direct">
<img src="https://image.xiaomaiketang.com/xm/CeSZc5T6Y4.png" alt="" />
</li>
<li className="step">
<img src="https://image.xiaomaiketang.com/xm/ePPwzfnRyK.png" alt="" />
<span>资质审核</span>
</li>
<li className="direct">
<img src="https://image.xiaomaiketang.com/xm/CeSZc5T6Y4.png" alt="" />
</li>
<li className="step">
<img src="https://image.xiaomaiketang.com/xm/QSKBZfPasc.png" alt="" />
<span>签约合作</span>
</li>
</ul>
<div className='button'
onClick={() => {
window.WEBTRACING('WebG_merchantsJoin_xmErp_foot_clickEvent_clickApply', 'WebG_招商加盟_小麦助教系统_页面底部_点击事件_点击立即申请', { page: 'wheatSystem' })
this.renderModal(true);
}}>立即申请合伙人</div>
</div>
<div className="footer">
<div className="contact">
<p>加盟热线：400-6677-456 135-8873-2892</p>
<p>咨询邮箱：yaobin@xiaomai5.com</p>
<p>公司地址 : 杭州市西湖区古墩路598号同人广场A座3楼</p>
</div>
<div className="QR-code">
<img src="https://image.xiaomaiketang.com/xm/y5N26sycRQ.png" alt="" />
<p>扫码咨询</p>
</div>
</div>
</div>
</div>
</div>
);
}
pages/wheatSchool.less 0 → 100644
.wheat-school {
width: 100%;
height: 917px;
background-image: url(https://image.xiaomaiketang.com/xm/wt5SjfmSdy.png);
background-repeat: no-repeat;
// background-size: contain;
background-position: 50% 50%;
position: relative;
.swiper-img-content {
z-index: 2;
color: #f5f7fa;
width: 1200px;
padding: 298px 0 0 0px;
font-family: PingFangSC-Medium, PingFang SC;
.head {
height: 100px;
img {
margin-left: 10px;
vertical-align: sub;
}
}
p {
display: inline-block;
font-size: 70px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 90px;
}
span {
font-size: 20px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 30px;
width: 520px;
}
.line {
width: 520px;
height: 1px;
background: rgba(255, 255, 255, 1);
opacity: 0.5;
margin: 20px 0;
}
.now-apply {
display: inline-block;
box-shadow: 0px 8px 16px 0px rgba(202, 99, 5, 0.33);
width: 167px;
height: 55px;
background: white;
font-size: 24px;
border-radius: 40px;
line-height: 55px;
text-align: center;
a {
color: #f57123;
font-family: Ping Fang SC;
font-weight: 400;
}
}
}
}
.module-wheat-school {
display: flex;
justify-content: space-between;
.item {
width: 230px;
height: 300px;
box-sizing: border-box;
margin: 0px;
&:last-child {
margin-right: 0;
}
.icon {
width: 126px;
height: 145px;
position: relative;
margin: 0 auto;
margin-bottom: 33px;
&.icon1 {
background-image: url("https://image.xiaomaiketang.com/xm/T8rjMby8sh.png");
background-size: contain;
}
&.icon2 {
background-image: url("https://image.xiaomaiketang.com/xm/a2z8JiEeJj.png");
background-size: contain;
}
&.icon3 {
background-image: url("https://image.xiaomaiketang.com/xm/Fe8277X8Ec.png");
background-size: contain;
}
&.icon4 {
background-image: url("https://image.xiaomaiketang.com/xm/YD57YEGT7y.png");
background-size: contain;
}
}
.module-content {
.title {
height: 24px;
font-size: 18px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 24px;
text-align: center;
margin-bottom: 10px;
}
.content {
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 17px;
text-align: center;
}
}
}
.item2 {
width: 326px;
height: 214px;
background: rgba(255, 255, 255, 1);
box-shadow: 10px 10px 20px 0px rgba(110, 123, 140, 0.1);
border-radius: 6px;
padding: 20px 22px 18px 22px;
cursor: pointer;
margin-bottom: 30px;
.icon {
width: 282px;
height: 120px;
position: relative;
margin: 0 auto;
margin-bottom: 7px;
&.icon1 {
background-image: url("https://image.xiaomaiketang.com/xm/jG6JDnZx6W.png");
background-size: contain;
}
&.icon3 {
background-image: url("https://image.xiaomaiketang.com/xm/F8fMK6aBph.png");
background-size: contain;
}
&.icon5 {
background-image: url("https://image.xiaomaiketang.com/xm/es4amh4FBn.png");
background-size: contain;
}
&.icon2 {
background-image: url("https://image.xiaomaiketang.com/xm/Fbymk4YjtQ.png");
background-size: contain;
}
&.icon4 {
background-image: url("https://image.xiaomaiketang.com/xm/A5WkRYbjb3.png");
background-size: contain;
}
&.icon6 {
background-image: url("https://image.xiaomaiketang.com/xm/iRPFJYBmhe.png");
background-size: contain;
}
}
.module-content {
margin: 3px 0 0 30px;
text-align: center;
.title {
height: 28px;
font-size: 16px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 22px;
text-align: center;
}
.content {
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 17px;
text-align: center;
}
}
}
.item3 {
width: 1200px;
padding-left: 230px;
.online-knowledge {
height: 520px;
display: flex;
align-items: center;
margin-bottom: 30px;
}
.title {
font-size: 24px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 33px;
margin-bottom: 10px;
}
.content {
font-size: 16px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 22px;
}
.module-content {
font-family: PingFangSC-Medium, PingFang SC;
}
.course {
width: 272px;
height: 220px;
margin: 0 0 20px 20px;
display: inline-block;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 7px 14px 0px rgba(110, 123, 140, 0.1);
img {
width: 271px;
margin-bottom: 9px;
}
.title {
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
margin-bottom: 0px;
margin-left: 14px;
}
.content {
margin-left: 14px;
font-size: 12px;
font-weight: 400;
color: #6e7b8c;
line-height: 22px;
}
}
.live-streaming {
height: 640px;
display: flex;
align-items: center;
margin-bottom: 60px;
.left-img {
background-image: url(https://image.xiaomaiketang.com/xm/6GSxeFPZwe.png);
width: 322px;
height: 640px;
margin: 0 105px 0 -32px;
padding: 45px 16px 75px 28px;
background-size: 103% 101%;
background-repeat: no-repeat;
background-size: cover;
img {
width: 289px;
height: 506px;
}
}
}
.offline-active {
height: 411px;
display: flex;
align-items: center;
.right-img {
width: 577px;
height: 411px;
display: flex;
justify-content: center;
background-image: url(https://image.xiaomaiketang.com/xm/ksfrMRZMGD.png);
background-size: cover;
align-items: center;
border-radius: 8px;
margin-left: 20px;
padding-top: 12px;
.ant-carousel {
width: 509px;
}
img {
width: 509px;
border-radius: 8px;
height: 339px;
}
}
}
}
}
.bottom-content {
width: 100%;
height: 260px;
background: linear-gradient(
270deg,
rgba(255, 136, 51, 1) 0%,
rgba(255, 190, 77, 1) 100%
);
position: relative;
.bottom-code {
width: 405px;
display: flex;
justify-content: space-between;
position: absolute;
left: 50%;
margin-left: -202.5px;
top: 50%;
margin-top: -77px;
.code-item {
width: 135px;
text-align: center;
img {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
span {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 17px;
}
}
}
}
pages/xm-erp.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-23 15:36:28
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:16:50
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Button, Tabs } from 'antd';
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
// import FreeTrial from "@/components/FreeTrial";
import './xmErp.less'
const { TabPane } = Tabs;
class xmErp extends React.Component {
constructor(props) {
super(props);
this.state = {
activeKey: '1',
leftFlag: false,
rightFlag: true,
isShow: false,
}
}
componentWillMount() {
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap/pages/ManagementAndData.html";
// }
}
componentDidMount() {
// window.WEBTRACING('WebG_product_xmErp_showEvent_openPage', 'WebG_产品_小麦助教_曝光事件_打开页面', { page: 'xmErp' })
}
handTabClick(e) {
if (e >= 2 && e <= 6) {
this.setState({
rightFlag: true,
leftFlag: true
})
}
else if (e === '1') {
this.setState({
leftFlag: false,
rightFlag: true
})
} else if (e === '7') {
this.setState({
rightFlag: false,
leftFlag: true
})
}
this.setState({
activeKey: e,
})
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
handLeftClick() {
if (parseInt(this.state.activeKey) === 1) return
if (parseInt(this.state.activeKey) === 2) {
this.setState({
activeKey: (parseInt(this.state.activeKey) - 1).toString(),
leftFlag: false
})
return
}
this.setState({
activeKey: (parseInt(this.state.activeKey) - 1).toString(),
rightFlag: true
})
}
handRightClick() {
if (parseInt(this.state.activeKey) === 7) return
if (parseInt(this.state.activeKey) === 6) {
this.setState({
activeKey: (parseInt(this.state.activeKey) + 1).toString(),
rightFlag: false
})
return
}
this.setState({
activeKey: (parseInt(this.state.activeKey) + 1).toString(),
leftFlag: true
})
}
render() {
const { leftFlag, rightFlag } = this.state
return (
<div className="cash-main" style={{ background: '#fff' }}>
<Header active={'product'}></Header>
<div className="xm-erp">
<div className="xm-head-content center">
<div className="title">小麦助教校务管理系统</div>
<div className="content">精细管理&精准营销，多方位提升办学效率</div>
<Button size="large"
onClick={() => {
window.WEBTRACING('WebG_product_xmErp_banner_clickEvent_clickFreeUse', 'WebG_产品_小麦助教_Banner_点击事件_点击免费试用', { page: 'xmErp' })
this.renderModal(true);
}}
>
免费试用
</Button>
</div>
</div>
<div className="content-module content-module-3" style={{ background: '#fff' }}>
<div className="module-title">教培机构运营管理全场景解决方案 <p>技术驱动，打通线上线下各类真实教学场景</p></div>
<div className="xm-erp-img center">
<div className="center-img"></div>
<img src="https://image.xiaomaiketang.com/xm/HeQiF4aTTB.png" alt="" className="erp-img1" />
<img src="https://image.xiaomaiketang.com/xm/zSBXYkjZhM.png" alt="" className="erp-img2" />
<img src="https://image.xiaomaiketang.com/xm/F8DCFPwrFp.png" alt="" className="erp-img3" />
<img src="https://image.xiaomaiketang.com/xm/sdZp6hXyjB.png" alt="" className="erp-img4" />
<img src="https://image.xiaomaiketang.com/xm/FRkHMZffFd.png" alt="" className="erp-img5" />
<img src="https://image.xiaomaiketang.com/xm/QXxJFC73YT.png" alt="" className="erp-img6" />
<img src="https://image.xiaomaiketang.com/xm/6SNf2CpPe7.png" alt="" className="erp-img7" />
</div>
</div>
<div className="content-module-3">
<div className="tabs center">
<div className={leftFlag ? "left-switch left-active" : "left-switch"} onClick={() => this.handLeftClick()}></div>
<div className={rightFlag ? "right-switch right-active" : 'right-switch'} onClick={() => this.handRightClick()}></div>
<Tabs style={{ color: '#ff8534' }} activeKey={this.state.activeKey} animated onTabClick={(e) => this.handTabClick(e)} size='large' tabBarGutter={62} tabBarStyle={{}} type="card">
<TabPane tab="招生营销" key="1" style={{ color: '#ff8534' }}>
<div className="tab-content" style={{ color: '#000' }} >
<img src="https://image.xiaomaiketang.com/xm/hJEzEZaaYi.png" alt="" />
<div className="tab-detail">
<p>招生营销</p>
<span>线索获取、分配、跟进、转化全链路解决方案</span>
<div className="detail-content">
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/27fWcEe32Z.png" alt="" />
<div className="right-content fr">
<p>小麦秀</p>
<div className="span">数百套火爆活动方案，玩转线上招生</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/xXbJGTFYDA.png" alt="" />
<div className="right-content fr">
<p>转介绍</p>
<div className="span">让转介绍像打招呼一样简单</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/CheX555apc.png" alt="" />
<div className="right-content fr">
<p>优惠券</p>
<div className="span">优惠刺激家长报名，机构增收源源不断</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/DZFnrzTjmy.png" alt="" />
<div className="right-content fr">
<p>在线商城</p>
<div className="span">家长自助下单缴费，打造机构专属商城</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/wFWKyB3xtX.png" alt="" />
<div className="right-content fr">
<p>CRM</p>
<div className="span">销售全流程管理，提升线索流转效率</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/EJRfmcbr37.png" alt="" />
<div className="right-content fr">
<p>试听管理</p>
<div className="span">可视化试听记录，高效锁定意向学员</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/wGnXD2HZzT.png" alt="" />
<div className="right-content fr">
<p>麦田表单</p>
<div className="span">高效收集活动信息，助力地推招生</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/dMNMffr5sA.png" alt="" />
<div className="right-content fr">
<p>麦萌海报</p>
<div className="span">在线设计精美海报，操作便捷易上手</div>
</div>
</div>
</div>
</div>
</div>
</TabPane>
<TabPane tab="教务管理" key="2">
<div className="tab-content" style={{ color: '#000' }}>
<img src="https://image.xiaomaiketang.com/xm/KfWcrxcwTk.png" alt="" />
<div className="tab-detail">
<p>教务管理</p>
<span>校区管理信息化，全面提升办学效率</span>
<div className="detail-content">
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/GDiktmpTcx.png" alt="" />
<div className="right-content fr">
<p>班级管理</p>
<div className="span">多维度班级信息展示，快速了解班级排课、学员情况、上课信息</div>
</div>
</div>
<div className="item fl" style={{ marginBottom: 17 }}>
<img src="https://image.xiaomaiketang.com/xm/pS8wkjDSnw.png" alt="" />
<div className="right-content fr">
<p>智能排课</p>
<div className="span">可视化线上排课，提高教务排课效率</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/pTM4MFA2pe.png" alt="" />
<div className="right-content fr">
<p>选班调班</p>
<div className="span">班级学员灵活安排，调整信息实时同步</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/tAMp4hf7yX.png" alt="" />
<div className="right-content fr">
<p>请假补课</p>
<div className="span">支持线上请假补课，有效管理学员考勤</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/PGCAGkHbN2.png" alt="" />
<div className="right-content fr">
<p>线上约课</p>
<div className="span">学员自主预约上课，时间安排更加灵活</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/EnRe4QpQ2d.png" alt="" />
<div className="right-content fr">
<p>员工管理</p>
<div className="span">维护员工信息档案，管理员工访问权限</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/kS66YG4Ram.png" alt="" />
<div className="right-content fr">
<p>人脸考勤</p>
<div className="span">智能人脸识别考勤，学员消课秒速完成</div>
</div>
</div>
</div>
</div>
</div>
</TabPane>
<TabPane tab="经营分析" key="3">
<div className="tab-content" style={{ color: '#000' }}>
<img src="https://image.xiaomaiketang.com/xm/y2hiYnZ8zi.png" alt="" />
<div className="tab-detail">
<p>经营分析</p>
<span>核心数据深度分析，高效决策避免风险</span>
<div className="detail-content">
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/ZH7C2KZD8a.png" alt="" />
<div className="right-content fr">
<p>小麦收银</p>
<div className="span">超低费率，多码合一，结算安全</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/HiJG7yQPTY.png" alt="" />
<div className="right-content fr">
<p>财务对账</p>
<div className="span">订单明细清晰记录，实现对账高效便捷</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/JWX6mFYZf4.png" alt="" />
<div className="right-content fr">
<p>进销存管理</p>
<div className="span">物品进出库自动记录，库存补给及时预警</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/EWQxjB7tmD.png" alt="" />
<div className="right-content fr">
<p>数据中心</p>
<div className="span">销售、教务、家校、财务全业务环节数据支撑，经营情况尽在掌握</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/Xnr43jw8fa.png" alt="" />
<div className="right-content fr">
<p>工资结算</p>
<div className="span">不同梯度绩效体系，一键结算高效准确</div>
</div>
</div>
</div>
</div>
</div>
</TabPane>
<TabPane tab="家校服务" key="4">
<div className="tab-content" style={{ color: '#000' }}>
<img src="https://image.xiaomaiketang.com/xm/WmyzWWkia7.png" alt="" />
<div className="tab-detail">
<p>家校服务</p>
<span>一对一家校服务，提升家长满意度，铸口碑促续费</span>
<div className="detail-content">
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/zwESQ3z7bK.png" alt="" />
<div className="right-content fr">
<p>电子相册</p>
<div className="span">学员成长点滴一键生成相册，助力机构续费</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/in5b7HMwes.png" alt="" />
<div className="right-content fr">
<p>课后作业</p>
<div className="span">支持文字、图片、视频多种形式，在线收发/批改作业</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/jspJEzNQEt.png" alt="" />
<div className="right-content fr">
<p>师生互评</p>
<div className="span">评价学员赢取口碑，评价老师获得反馈</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/kWHFfibkn4.png" alt="" />
<div className="right-content fr">
<p>成长档案</p>
<div className="span">学员档案随时查看，直观感受孩子成长</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/4KNs8nQ7CR.png" alt="" />
<div className="right-content fr">
<p>成绩单</p>
<div className="span">记录学员成绩变化，效果外化好帮手</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/NQpki3xjXj.png" alt="" />
<div className="right-content fr">
<p>消息通知</p>
<div className="span">重要通知实时推送，传达情况有效监控</div>
</div>
</div>
</div>
</div>
</div>
</TabPane>
<TabPane tab="在线教学" key="5">
<div className="tab-content" style={{ color: '#000' }}>
<img src="https://image.xiaomaiketang.com/xm/nAYrbEcpcj.png" alt="" />
<div className="tab-detail">
<p>在线教学</p>
<span>支持多种班型，覆盖专业线上教学场景</span>
<div className="detail-content">
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/cRxj3zmHdd.png" alt="" />
<div className="right-content fr">
<p>大班直播</p>
<div className="span">1000人以内同时上课，支持二维码报名课程</div>
</div>
</div>
<div className="item fl" style={{ marginBottom: 17 }}>
<img src="https://image.xiaomaiketang.com/xm/SaXfEPtYrK.png" alt="" />
<div className="right-content fr">
<p>互动班课</p>
<div className="span">大/小班互动课，支持1-12名学生连麦上台</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/2TeBpSFsnF.png" alt="" />
<div className="right-content fr">
<p>资料云盘</p>
<div className="span">云端存储教学教研资料，支持作业、直播间随时调用</div>
</div>
</div>
</div>
</div>
</div>
</TabPane>
<TabPane tab="课后督学" key="6">
<div className="tab-content" style={{ color: '#000' }}>
<img src="https://image.xiaomaiketang.com/xm/jrhippHCKb.png" alt="" />
<div className="tab-detail">
<p>课后督学</p>
<span>多场景督学互动工具，让学习更有温度、更有效</span>
<div className="detail-content">
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/Bs82ZNEr24.png" alt="" />
<div className="right-content fr">
<p>闯关打卡</p>
<div className="span">游戏化闯关打卡模式，激发学员打卡动力</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/yKcXr4Y7m6.png" alt="" />
<div className="right-content fr">
<p>日历打卡</p>
<div className="span">每日打卡模式，培养学员学习习惯</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/rwZEPGMbME.png" alt="" />
<div className="right-content fr">
<p>日签</p>
<div className="span">一键打卡生成日签，激活家长朋友圈</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/QdYHcYTQyi.png" alt="" />
<div className="right-content fr">
<p>积分</p>
<div className="span">收获积分兑换礼物，每天努力更有意义</div>
</div>
</div>
</div>
</div>
</div>
</TabPane>
<TabPane tab="品牌传播" key="7">
<div className="tab-content" style={{ color: '#000' }}>
<img src="https://image.xiaomaiketang.com/xm/irY8GnKRaG.png" alt="" />
<div className="tab-detail">
<p>品牌传播</p>
<span>打造品牌质感，引导口碑传播</span>
<div className="detail-content">
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/smew7ZyjJi.png" alt="" />
<div className="right-content fr">
<p>微官网</p>
<div className="span">能宣传能招生的综合性营销平台，帮助机构实现品牌营销</div>
</div>
</div>
<div className="item fl" style={{ marginBottom: 17 }}>
<img src="https://image.xiaomaiketang.com/xm/2KeycN7TJX.png" alt="" />
<div className="right-content fr">
<p>内容分享</p>
<div className="span">家长信任背书，引起潜客兴趣</div>
</div>
</div>
<div className="item fl">
<img src="https://image.xiaomaiketang.com/xm/GbTNrbhsKC.png" alt="" />
<div className="right-content fr">
<p>专属家长端</p>
<div className="span">嫁接机构公众号，家校互动更高效</div>
</div>
</div>
</div>
</div>
</div>
</TabPane>
</Tabs>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page='xmErp' isTrial={true}></Footer>
<SiderBar />
</div>
)
}
}
export default xmErp;
\ No newline at end of file
pages/xm-school-info.jsx 0 → 100644
/*
* @Description:
* @Author: zangsuyun
* @Date: 2020-07-23 15:51:45
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 14:11:48
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Button } from "antd";
// import FreeTrial from "@/components/FreeTrial";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./xmSchoolInfo.less";
class xmSchoolInfo extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: false,
};
}
componentWillMount(){
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap.html";
// }
}
componentDidMount() {
this.firstMove();
this.secondMove();
// window.WEBTRACING('WebG_product_xmSchoolInfo_showEvent_openPage', 'WebG_产品_小麦校讯通_曝光事件_打开页面', {page: 'xmSchoolInfo'})
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
firstMove() {
var oImgContainer = document.getElementById("img-container1");
var oImgUl = oImgContainer.getElementsByTagName("ul")[0];
var aImgLi = oImgUl.children;
var oTextContainer = document.getElementById("text-container1");
var oTextUl = oTextContainer.getElementsByTagName("ul")[0];
var aTextLi = oTextUl.children;
var timer = null;
var bgshadow = oTextContainer.children[0];
// // 设置ul的宽度
// oImgUl.offsetWidth = (aImgLi.length + 1) * aImgLi[0].offsetWidth;
// 定位imgUrl的初始位置
var iNow = 0;
console.log(aTextLi[1].offsetHeight);
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = 110 + "px";
timer = setInterval(() => {
iNow++;
if (iNow == 4) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = aTextLi[1].offsetHeight * iNow + 110 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
for (let i = 0; i < aTextLi.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi[i].onmouseover = function () {
clearInterval(timer);
bgshadow.style.top = bgshadow.offsetHeight * i + 110 + "px";
for (let j = 0; j < aImgLi.length; j++) {
aImgLi[j].className = "fl";
}
aImgLi[i].className = "fl on";
oImgUl.style.left = -aImgLi[0].offsetWidth * i + "px";
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(() => {
iNow++;
if (iNow == 4) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = bgshadow.offsetHeight * iNow + 110 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
};
}
secondMove() {
var oImgContainer = document.getElementById("img-container2");
var oImgUl = oImgContainer.getElementsByTagName("ul")[0];
var aImgLi = oImgUl.children;
var oTextContainer = document.getElementById("text-container2");
var oTextUl = oTextContainer.getElementsByTagName("ul")[0];
var aTextLi = oTextUl.children;
var timer = null;
var bgshadow = oTextContainer.children[0];
// // 设置ul的宽度
// oImgUl.offsetWidth = (aImgLi.length + 1) * aImgLi[0].offsetWidth;
// 定位imgUrl的初始位置
var iNow = 0;
console.log(aTextLi[1].offsetHeight);
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = 110 + "px";
timer = setInterval(() => {
iNow++;
if (iNow == 4) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = aTextLi[1].offsetHeight * iNow + 110 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
for (let i = 0; i < aTextLi.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi[i].onmouseover = function () {
clearInterval(timer);
bgshadow.style.top = bgshadow.offsetHeight * i + 110 + "px";
for (let j = 0; j < aImgLi.length; j++) {
aImgLi[j].className = "fl";
}
aImgLi[i].className = "fl on";
oImgUl.style.left = -aImgLi[0].offsetWidth * i + "px";
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(() => {
iNow++;
if (iNow == 4) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + "px";
bgshadow.style.top = bgshadow.offsetHeight * iNow + 110 + "px";
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = "fl";
}
aImgLi[iNow].className = "fl on";
}, 3000);
};
}
render() {
return (
<div className="" style={{ background: "#fff" }}>
<Header active={"product"}></Header>
<div className="xm-school-info">
<div className="xm-head-content center">
<div className="title">小麦校讯通，一对一家校服务</div>
<div className="content">持续提升家长满意度，铸口碑促续费</div>
<Button
size="large"
onClick={() => {
window.WEBTRACING('WebG_product_xmSchoolInfo_banner_clickEvent_clickFreeUse', ' WebG_产品_小麦校讯通_Banner_点击事件_点击免费试用', {page: 'xmSchoolInfo'})
this.renderModal(true);
}}
>
免费试用
</Button>
</div>
</div>
<div className="content-module content-module-2">
<div className="body-center">
<div className="module-title">家校实时互联，服务有温度</div>
<div
className="xm-schoolinfo-content-module-body center"
style={{ padding: "0 170px" }}
>
<div className="module-img" id="img-container1">
<div className="img-wrap">
<ul className="ul">
<li className="fl on">
<img
src="https://image.xiaomaiketang.com/xm/bc7WDW6hbp.png"
alt=""
className="img1 picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/E4xiJNzSmK.png"
alt=""
className="img2 on picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/EYSjMR2Gpw.png"
alt=""
className="img3 picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/4PeJWRkPex.png"
alt=""
className="img4 picture"
/>
</li>
</ul>
</div>
</div>
<div className="module-text" id="text-container1">
<div className="bg-shadow"></div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">机构专属家长端</div>
<div className="detail">
专属家长端，服务1对1，提示机构品牌力
</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">学员考勤通知</div>
<div className="detail">
上课、签到通知实时达，贴心服务获认可
</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">重要通知确认传达</div>
<div className="detail">
重要通知接受确认，保障家长知晓机构安排
</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">家长请假在线操作</div>
<div className="detail">
家长在线请假，老师实时知悉，传达更方便
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="content-module content-module-2">
<div className="body-center">
<div className="module-title">学员成长全程记录，服务效果外化</div>
<div
className="xm-schoolinfo-content-module-body center"
style={{ padding: "0 170px" }}
>
<div className="module-text" id="text-container2">
<div className="bg-shadow2"></div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">课后点评</div>
<div className="detail">
记录学员课堂成长，支持文字/图片/语音/视频形式
</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">作业布置</div>
<div className="detail">
课后作业线上布置/批改，点评打分同步操作
</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">学员档案</div>
<div className="detail">
学员成长用心记录，学员档案随时查看
</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">师生互评</div>
<div className="detail">
评价学员赢取口碑，评价老师获得反馈
</div>
</div>
</li>
</ul>
</div>
<div className="module-img" id="img-container2">
<div className="img-wrap">
<ul className="ul">
<li className="fl on">
<img
src="https://image.xiaomaiketang.com/xm/sMNMd2e8HM.png"
alt=""
className="img1 picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/Sds8Yjrkcc.png"
alt=""
className="img2 on picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/Hke38nBBNZ.png"
alt=""
className="img3 picture"
/>
</li>
<li className="fl">
<img
src="https://image.xiaomaiketang.com/xm/Tyd7Aj5GBQ.png"
alt=""
className="img4 picture"
/>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="xmSchoolInfo" isTrial={true}></Footer>
<SiderBar />
</div>
);
}
}
export default xmSchoolInfo;
pages/xm-show.jsx 0 → 100644
/*
* @Author: zhujiapeng
* @Date: 2021-06-07 13:45:47
* @LastEditors: zhujiapeng
* @LastEditTime: 2021-06-07 13:53:23
* @Description: 小麦秀
* @Copyright: ©2021 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { Button } from "antd";
// import FreeTrial from "@/components/FreeTrial";
import Header from '../components/Header';
import Footer from '../components/Footer';
import SiderBar from '../components/SiderBar';
import "./xmShow.less";
class xmShow extends React.Component {
constructor(props) {
super(props);
this.state = {
isAdd : false,
isShow:false,
};
}
// componentWillMount(){
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
// //pc端访问 跳转至pc页面
// window.location.href = "../wap/pages/EnrollmentAndMarketing.html";
// }
// }
componentDidMount() {
this.firstMove()
this.secondMove()
window.addEventListener("scroll", this.handleScroll);
// window.WEBTRACING('WebG_product_xmShow_showEvent_openPage', 'WebG_产品_小麦秀_曝光事件_打开页面', {page: 'xmShow'})
}
//定义handleScroll事件函数
handleScroll = (e) => {
if (this.state.isAdd) {
return;
}
if (window.pageYOffset >= 1500) {
this.setState({
isAdd:true
},()=>{
this.runNum(this.refs.student,1700,1000)
this.runNum1(this.refs.exposure,2.5,100)
})
}
};
runNum1(dom,max,time){
const step = 1
const _time = time ;
let num = 0;
dom.innerHTML=num;
var intv = setInterval(function () {
num += step;
if (num > max) {
num = max;
clearInterval(intv)
}
dom.innerHTML=num;
}, _time)
}
runNum(dom,max,time){
const step = parseInt(max / 100);
const _time = time / 100;
let num = 0;
dom.innerHTML=num;
var intv = setInterval(function () {
num += step;
if (num > max) {
num = max;
clearInterval(intv)
}
dom.innerHTML=num;
}, _time)
}
firstMove() {
var oImgContainer = document.getElementById('img-container');
var oImgUl = oImgContainer.getElementsByTagName('ul')[0];
var aImgLi = oImgUl.children;
var oTextContainer = document.getElementById('text-container');
var oTextUl = oTextContainer.getElementsByTagName('ul')[0];
var aTextLi = oTextUl.children;
var timer = null;
var bgshadow = oTextContainer.children[0];
// // 设置ul的宽度
// oImgUl.offsetWidth = (aImgLi.length + 1) * aImgLi[0].offsetWidth;
// 定位imgUrl的初始位置
var iNow = 0;
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + 'px';
bgshadow.style.top = 50 + 'px';
timer = setInterval(() => {
iNow++;
if (iNow == 5) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + 'px';
bgshadow.style.top = aTextLi[1].offsetHeight * iNow + 50 + 'px';
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = 'fl';
}
aImgLi[iNow].className = 'fl on';
}, 3000);
for (let i = 0; i < aTextLi.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi[i].onmouseover = function () {
clearInterval(timer);
bgshadow.style.top = bgshadow.offsetHeight * i + 50 + 'px';
for (let j = 0; j < aImgLi.length; j++) {
aImgLi[j].className = 'fl';
}
aImgLi[i].className = 'fl on';
oImgUl.style.left = -aImgLi[0].offsetWidth * i + 'px';
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(() => {
iNow++;
if (iNow == 5) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + 'px';
bgshadow.style.top = bgshadow.offsetHeight * iNow + 50 + 'px';
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = 'fl';
}
aImgLi[iNow].className = 'fl on';
}, 3000)
}
}
secondMove() {
var oImgContainer = document.getElementById('img-container2');
var oImgUl = oImgContainer.getElementsByTagName('ul')[0];
var aImgLi = oImgUl.children;
var oTextContainer = document.getElementById('text-container2');
var oTextUl = oTextContainer.getElementsByTagName('ul')[0];
var aTextLi = oTextUl.children;
var timer = null;
var bgshadow = oTextContainer.children[0];
// // 设置ul的宽度
// oImgUl.offsetWidth = (aImgLi.length + 1) * aImgLi[0].offsetWidth;
// 定位imgUrl的初始位置
var iNow = 0;
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + 'px';
bgshadow.style.top = 190 + 'px';
timer = setInterval(() => {
iNow++;
if (iNow == 2) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + 'px';
bgshadow.style.top = aTextLi[1].offsetHeight * iNow + 190 + 'px';
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = 'fl';
}
aImgLi[iNow].className = 'fl on';
}, 3000);
for (let i = 0; i < aTextLi.length; i++) {
// 当hover时，背景变色,清除定时器
aTextLi[i].onmouseover = function () {
clearInterval(timer);
bgshadow.style.top = bgshadow.offsetHeight * i + 190 + 'px';
for (let j = 0; j < aImgLi.length; j++) {
aImgLi[j].className = 'fl';
}
aImgLi[i].className = 'fl on';
oImgUl.style.left = -aImgLi[0].offsetWidth * i + 'px';
};
}
//当鼠标移出的时候开启定时器让ul自动向前运动
oTextContainer.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(() => {
iNow++;
if (iNow == 2) {
iNow = 0;
}
oImgUl.style.left = -aImgLi[0].offsetWidth * iNow + 'px';
bgshadow.style.top = bgshadow.offsetHeight * iNow + 190 + 'px';
for (var i = 0; i < aImgLi.length; i++) {
aImgLi[i].className = 'fl';
}
aImgLi[iNow].className = 'fl on';
}, 3000)
}
}
renderModal = (flag) => {
this.setState({
isShow: flag,
});
};
render() {
return (
<div className="" style={{ background: "#fff" }}>
<Header active={"product"}></Header>
<div className="xm-show">
<div className="xm-head-content center">
<div className="title">小麦秀，教培机构招生营销利器</div>
<div className="content">已助力机构招到超350万学员</div>
<Button size="large"
onClick={() => {
window.WEBTRACING('WebG_product_xmShow_banner_clickEvent_clickFreeUse', 'WebG_产品_小麦助教_Banner_点击事件_点击免费试用', {page: 'xmShow'})
this.renderModal(true);
}}>免费试用</Button>
</div>
</div>
<div className="content-module content-module-3" style={{ backgroundColor:'#fff'}}>
<div className="center">
<div className="module-item">
<div className="module-title">各类营销活动<br/>满足多种场景，持续招生获客</div>
</div>
<div className="show-content-module-body center" style={{width:872}}>
<div className="module-img" id="img-container">
<div className="img-wrap">
<ul>
<li className="fl on"><img src="https://image.xiaomaiketang.com/xm/aJaeM4HbTa.png" alt="砍价活动" className="img1 on picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/zF4HMitKwD.png" alt="团购活动" className="img2 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/G7KhH2apHG.png" alt="助力活动" className="img4 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/mXEJRzt4cA.png" alt="互动游戏" className="img5 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/JFDnbn8kye.png" alt="投票活动" className="img3 picture" /></li>
</ul>
</div>
</div>
<div className="module-text" id="text-container">
<div className="bg-shadow"></div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">砍价活动</div>
<div className="detail">优惠刺激转化，精准获取潜在学员线索</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">团购活动</div>
<div className="detail">多人成团，老带新，学员背书捆绑式营销</div>
</div>
</li>
<li>
<div className="left-img img3"></div>
<div className="right-text">
<div className="title">助力活动</div>
<div className="detail">病毒式裂变传播，一键发送，引爆朋友圈</div>
</div>
</li>
<li>
<div className="left-img img4"></div>
<div className="right-text">
<div className="title">趣味游戏</div>
<div className="detail">趣味小游戏，寓教于乐，朋友圈传播无阻碍</div>
</div>
</li>
<li>
<div className="left-img img5"></div>
<div className="right-text">
<div className="title">投票活动</div>
<div className="detail">学员成果分享，课程效果展示，铸口碑促招生</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="content-module content-module-3" style={{ backgroundColor:'#f4f6f9'}}>
<div className="body-center center">
<div className="module-title">
数据助力招生<br />活动数据深度分析，高效转化意向学员
</div>
<div className="show-content-module-body" style={{padding:'40px 20px 0 140px'}}>
<div className="module-text" id="text-container2">
<div className="bg-shadow2"></div>
<ul>
<li>
<div className="left-img img1"></div>
<div className="right-text">
<div className="title">活动数据深度分析</div>
<div className="detail">助力机构复盘活动，数据驱动打造爆款活动</div>
</div>
</li>
<li>
<div className="left-img img2"></div>
<div className="right-text">
<div className="title">学员社交关系图</div>
<div className="detail">潜在学员社交关系图，助力挖掘核心学员价值</div>
</div>
</li>
</ul>
</div>
<div className="module-img-2" id="img-container2">
<div className="img-wrap">
<ul className="ul ul2">
<li className="fl on"><img src="https://image.xiaomaiketang.com/xm/4XfzbDi7wj.png" alt="打卡作业" className="img1 picture" /></li>
<li className="fl"><img src="https://image.xiaomaiketang.com/xm/TwaZhyw54X.png" alt="内容分享" className="img2 on picture" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="content-module content-module-2" style={{background:'#fff'}}>
<div className="module-unit">
<div className="center">
<div className="module-title">小麦秀，助力机构招生营销</div>
<div className="top clearfix numBox">
<div className="item item1 fl">
<div className="wrap">
<span ref="student" className="num">1700</span>
<span className="pre-unit">万</span>
</div>
<p className="type">累计招生数</p>
</div>
{/* <div className="line"></div> */}
<div className="item item2 fl">
<div className="wrap">
<span ref="exposure" className="num">2.5</span>
<span className="pre-unit">亿</span>
</div>
<p className="type">累计曝光量</p>
</div>
</div>
</div>
</div>
</div>
{/* {this.state.isShow ? (
<FreeTrial handModalShow={this.renderModal}></FreeTrial>
) : (
""
)} */}
<Footer page="xmShow"></Footer>
<SiderBar/>
</div>
);
}
}
export default xmShow;
pages/xmErp.less 0 → 100644
.xm-erp {
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/YrnaJJHAPR.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
}
.xm-erp-img{
width: 100%;
height: 691px;
text-align: center;
position: relative;
.center-img{
width: 735px;
height: 317px;
background-image: url('https://image.xiaomaiketang.com/xm/ysmeYpfzTc.png');
background-size: contain;
margin-top: 175px;
display: inline-block;
}
img{
width: 168px;
height: 174px;
position: absolute;
cursor: pointer;
transition: 1s;
&:hover{
transform: translateY(-10px);
}
&.erp-img1{
left: 50%;
top: 2%;
margin-left: -72px;
}
&.erp-img2{
left: 68%;
top: 17%;
}
&.erp-img3{
right: 7%;
top: 47%;
}
&.erp-img4{
right: 26%;
bottom: 6%;
}
&.erp-img5{
left: 26%;
bottom: 6%;
}
&.erp-img6{
left: 7%;
top: 47%;
}
&.erp-img7{
left: 19%;
top: 17%;
}
}
}
.tabs{
background: #fff;
position: relative;
.left-switch{
width:25px;
cursor: pointer;
height:45px;
position: absolute;
top: 260px;
background-image: url('https://image.xiaomaiketang.com/xm/tWtf8Hh3e4.png');
background-size: contain;
&.left-active{
background-image: url('https://image.xiaomaiketang.com/xm/jJhN2zPMmt.png');
}
}
.right-switch{
width:25px;
cursor: pointer;
height:45px;
position: absolute;
top: 260px;
right: 10px;
background-image: url('https://image.xiaomaiketang.com/xm/th5m2MZryW.png');
background-size: contain;
&.right-active{
background-image: url('https://image.xiaomaiketang.com/xm/HYQKKwCJNB.png');
}
}
.ant-tabs{
.ant-tabs-nav{
.ant-tabs-nav-wrap{
.ant-tabs-nav-list{
border-bottom: 1px solid #E8E8E8;
button{
color: blanchedalmond;
}
.ant-tabs-tab{
border: none;
padding: 16px 0;
font-size:22px;
line-height:30px;
color: #333333 !important;
margin: 0 20px;
background: #fff;
.ant-tabs-tab-btn,.ant-tabs-tab-remove{
&:active,&:focus {
color: #ff8534 !important;
}
}
}
.ant-tabs-tab:hover{
color: #ff8534 !important;
}
.ant-tabs-tab.ant-tabs-tab-active {
color: #ff8534 !important;
.ant-tabs-tab-btn{
color: #ff8534 !important;
&:focus,&:active{
color: #ff8534 !important;
}
}
font-weight: 500;
&:after {
content: '';
position: absolute;
bottom: 0px;
top: auto;
left: 28px;
height: 4px;
width: 30px;
background-color: #fe925b;
}
}
}
}
}
@keyframes hideTabIndex{
0%{ opacity: 0; transform: translate(0, 0) }
100%{opacity: 1; transform: translate(0, 0) }
}
.tab-content{
padding: 20px 0 20px 49px;
display: flex;
align-items: center;
height: 500px;
animation: hideTabIndex 0.8s;
img{
width: 650px;
}
.tab-detail{
width: 477px;
display: inline-block;
text-align: left;
margin: 15px 0 0 26px;
p{
font-size:24px;
font-weight:500;
line-height:33px;
margin-bottom: 5px;
}
span{
font-size:16px;
line-height:22px;
font-weight:400;
}
.detail-content{
.item{
width: 189px;
margin-top: 27px;
margin-right: 27px;
img{
width: 36px;
height: 36px;
margin-right: 10px;
}
.right-content{
width: 143px;
p{
font-size:16px;
line-height:22px;
font-weight:400;
margin-bottom: 7px;
}
.span{
font-size:12px;
line-height: 17px;
letter-spacing: 1px;
}
}
}
}
}
}
}
}
pages/xmSchoolInfo.less 0 → 100644
.xm-school-info{
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/2YZXGDYWtx.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
.ant-btn{
color: #4F99FF !important;
}
}
.xm-schoolinfo-content-module-body {
display: flex;
justify-content: space-between;
.module-img {
width: 322px;
height: 640px;
background-image: url(https://image.xiaomaiketang.com/xm/6GSxeFPZwe.png);
background-size: 102% 101%;
background-repeat: no-repeat;
padding: 52px 16px 108px 26px;
box-sizing: border-box;
overflow: hidden;
position: relative;
margin-bottom: 87px;
.img-wrap {
width: 289px;
height: 506px;
overflow: hidden;
margin-left: -6px;
ul {
width: 2023px;
height: 506px;
overflow: hidden;
position: relative;
padding-left: 0px;
li {
width: 289px;
opacity: 0;
&.on{
transition: opacity 0.5s;
opacity: 1;
}
.picture {
width: 289px;
height: 506px;
}
}
}
}
}
.web-img {
box-shadow: 0 0 30px #eaeff6;
}
.module-text {
position: relative;
overflow: hidden;
.module-top-content{
color:rgba(51,51,51,1);
margin-top: 59px;
.title{
font-size:24px;
font-weight:500;
line-height:33px;
}
span{
font-size:16px;
font-weight:400;
line-height:22px;
}
}
.bg-shadow{
width: 100%;
height: 111px;
background-color: #fff;
// opacity: 0.1;
position: absolute;
top: 110px;
transition: top 0.2s;
}
.bg-shadow2{
width: 100%;
height: 111px;
background-color: #F4F6F9;
// opacity: 0.1;
position: absolute;
top: 110px;
transition: top 0.2s;
}
ul {
margin-top: 114px;
padding: 0;
li {
position: relative;
z-index: 10;
padding: 31px 53px 32px 25px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
&.on {
background-color: rgba(244, 246, 249, 1);
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/hp3Sh28hpD.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/bryyYHtTPa.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/NrRwHXkZKD.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/5HwpbQPkCH.png");
}
}
.right-text {
.title {
font-size: 16px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 22px;
margin-bottom: 7px;
}
.detail {
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 17px;
}
}
}
}
&#text-container2 {
ul {
li {
&.on {
background-color: #eee;
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/btFmMSXf5S.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/fhthaMK4wa.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/PsGScSz2kh.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/xRPNNbQH5b.png");
}
}
}
}
}
}
}
\ No newline at end of file
pages/xmShow.less 0 → 100644
.xm-show {
width: 100%;
height: 540px;
background-image: url(https://image.xiaomaiketang.com/xm/Ry84nrZrtC.png);
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
display: flex;
align-items: center;
}
.module-unit {
border-top: 1px solid transparent;
.top {
margin-top: 60px;
padding-bottom: 50px;
display: flex;
justify-content: space-around;
align-items: center;
.line{
width:1px;
height:76px;
background: #000;
}
.item {
width: 400px;
.wrap {
text-align: center;
}
.num {
font-size: 72px;
line-height: 100px;
color: #333333;
text-align: center;
}
.pre-unit {
font-size: 72px;
line-height: 100px;
color: #333333;
text-align: center;
}
.type {
font-size: 20px;
font-weight: 400;
color: #333333;
line-height: 28px;
text-align: center;
}
}
}
}
.show-content-module-body {
display: flex;
justify-content: space-between;
padding-top: 40px;
.module-img {
width: 322px;
height: 640px;
background-image: url(https://image.xiaomaiketang.com/xm/6GSxeFPZwe.png);
background-size: 103% 101%;
background-repeat: no-repeat;
// box-shadow: 0 0 30px #eaeff6;
padding: 52px 16px 108px 0px;
box-sizing: border-box;
overflow: hidden;
position: relative;
&#img-container2 {
// box-shadow: 0 0 30px #ffeaeff6;
}
.img-wrap {
width: 289px;
height: 506px;
// overflow: hidden;
margin-left: -19px;
ul {
width: 2023px;
height: 506px;
overflow: hidden;
position: relative;
// top:52px;
left: 22px;
&.ul2 {
left: 0px;
}
&.ul3 {
left: 0px;
}
li {
width: 289px;
opacity: 0;
overflow: hidden;
&.on{
transition: opacity 0.5s;
opacity: 1;
}
.picture {
width: 289px;
height: 506px;
}
}
}
}
}
.module-img-2 {
// width: 640px;
height: 591px;
padding: 52px 16px 108px 0px;
box-sizing: border-box;
// overflow: hidden;
position: relative;
.img-wrap {
width: 625px;
height: 591px;
// overflow: hidden;
margin-left: -19px;
ul {
width: 2023px;
height: 506px;
overflow: hidden;
position: relative;
// top:52px;
left: 22px;
&.ul2 {
left: 0px;
}
&.ul3 {
left: 0px;
}
li {
width: 625px;
opacity: 0;
&.on{
transition: opacity 0.5s;
opacity: 1;
}
.picture {
width: 625px;
height: 591px;
}
}
}
}
}
.module-text {
position: relative;
overflow: hidden;
padding-top: 50px;
.bg-shadow{
width: 100%;
height: 111px;
background-color: #f4f6f9;
// opacity: 0.1;
position: absolute;
top:100px;
transition: top 0.2s;
}
.bg-shadow2{
width: 100%;
height: 111px;
background-color: #fff;
// opacity: 0.1;
position: absolute;
top:100px;
transition: top 0.2s;
}
ul {
li {
position: relative;
z-index: 10;
padding: 31px 53px 32px 25px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
&.on {
background-color: rgba(244, 246, 249, 1);
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/77TcaAiRWG.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/dHAez2h5P6.png");
}
&.img3 {
background-image: url("https://image.xiaomaiketang.com/xm/h68pepjB3m.png");
}
&.img4 {
background-image: url("https://image.xiaomaiketang.com/xm/GHhZcYTzJX.png");
}
&.img5 {
background-image: url("https://image.xiaomaiketang.com/xm/bzfGZ5DfFk.png");
}
}
.right-text {
width: 246px;
.title {
font-size: 16px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 22px;
margin-bottom: 7px;
.inner {
width:47px;
height:15px;
background:rgba(221,221,221,1);
border-radius:2px;
margin-left: 4px;
font-size:12px;
font-weight:400;
color:rgba(102,102,102,1);
line-height:17px;
display: inline-block;
text-align: center;
}
}
.detail {
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 17px;
}
}
}
}
&#text-container2 {
ul {
margin-top: 140px;
li {
&.on {
background-color: #111111 !important;
}
.left-img {
width: 48px;
height: 48px;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
&.img1 {
background-image: url("https://image.xiaomaiketang.com/xm/EsKycwy6He.png");
}
&.img2 {
background-image: url("https://image.xiaomaiketang.com/xm/srD3zM5YtP.png");
}
}
}
}
}
}
}
public/vercel.svg 0 → 100644
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
\ No newline at end of file
styles/globals.less 0 → 100644
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 14px;
}
html {
font-size: 80px;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
li {
list-style: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.center {
width: 1200px;
margin: 0 auto;
}
tsconfig.json 0 → 100644
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"pages/index.jsx"
, "pages/company-profile.jsx", "pages/honorary-certificate.jsx", "pages/about.jsx", "pages/new-dynamic.jsx", "pages/wheat-system.jsx" ],
"exclude": [
"node_modules"
]
}
\ 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