Skip to content

M
mr-julyedu
Commit c5c40c32 by xuzhenghua
Options

超出显示省略号

parent bc87a39e
Showing with 145 additions and 69 deletions
src/common/course/course.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
margin-top: 15px; margin-top: 15px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height: 119px; height: 119px;
...@@ -13,8 +14,5 @@ ...@@ -13,8 +14,5 @@
color: $color_333; color: $color_333;
line-height: 19px; line-height: 19px;
margin-top: 9px; margin-top: 9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
src/common/course/index.js
...@@ -5,9 +5,9 @@ const Course = (props) => { ...@@ -5,9 +5,9 @@ const Course = (props) => {
return ( return (
<li className='course-item'> <li className='course-item'>
{props.top} {props.top}
<a href=""> <a href="/#">
<img src={props.data.src} alt=""/> <img src={props.data.src} alt=""/>
<p className="course-title">{props.data.title}</p> <p className="course-title text-overflow-2">{props.data.title}</p>
</a> </a>
{props.bottom} {props.bottom}
</li> </li>
......
src/components/Index/index.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Course, Carousel,Scroll,Topscroll} from '../../common' import {Course, Carousel, Scroll, Topscroll} from '../../common'
import './index.scss'; import './index.scss';
class Index extends Component { class Index extends Component {
...@@ -8,7 +8,7 @@ class Index extends Component { ...@@ -8,7 +8,7 @@ class Index extends Component {
{ {
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png', 'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊', 'title': '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'teacher': 'wwwwww', 'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
'time': '2343234', 'time': '2343234',
'isbuy': 0, 'isbuy': 0,
'price0': 100, 'price0': 100,
...@@ -67,10 +67,10 @@ class Index extends Component { ...@@ -67,10 +67,10 @@ class Index extends Component {
} }
render() { render() {
const top = <div>333</div>
return ( return (
<div className='indexbox'> <div className='indexbox'>
<Topscroll data={this.state.dataList} height='168px'></Topscroll> <Topscroll data={this.state.dataList} height='168px'></Topscroll>
<div className="tabbox"> <div className="tabbox">
<ul> <ul>
{ {
...@@ -92,7 +92,7 @@ class Index extends Component { ...@@ -92,7 +92,7 @@ class Index extends Component {
this.state.dataList.map((item, index) => { this.state.dataList.map((item, index) => {
return ( return (
<li key={index} className='scroll-item'> <li key={index} className='scroll-item'>
<a href=""> <a href="/#">
<img className="item-img" src={item.src} alt=""/> <img className="item-img" src={item.src} alt=""/>
<div className="item-content"> <div className="item-content">
<h2 className="item-title">{item.title}</h2> <h2 className="item-title">{item.title}</h2>
...@@ -106,7 +106,7 @@ class Index extends Component { ...@@ -106,7 +106,7 @@ class Index extends Component {
} }
</Carousel> </Carousel>
<div className="vip"> <div className="vip">
<a href=""> <a href="/#">
<img <img
src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png" src="http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png"
alt=""/> alt=""/>
...@@ -117,22 +117,26 @@ class Index extends Component { ...@@ -117,22 +117,26 @@ class Index extends Component {
<h2 className="title">新上好课</h2> <h2 className="title">新上好课</h2>
<ul className='course-detail'> <ul className='course-detail'>
{this.state.dataList.map((item, index) => { {this.state.dataList.map((item, index) => {
// const top = ( const top = (
// { <div>
// item.isbuy === '1' && <span className='audition'> {item.isbuy === 1 &&
// <i className={'iconfont iconerji'}></i> <span className='audition'>
// 试听 <i className={'iconfont iconerji'}></i>试听</span>
// </span> }
// } </div>
// ) )
const bottom = ( const bottom = (
<p className="course-price"> <div>
{item.isbuy === 0 && <p className="course-price">
<span className="new">¥{item.price0}</span> <span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span> <span className="old">¥{item.price1}</span>
</p> </p>
// {item.isbuy === 1 && }
// <a href="" className="isbuy">已购买</a> {item.isbuy === 1 &&
// } <a href="/#" className="isbuy">已购买</a>
}
</div>
) )
return ( return (
<Course key={index} top={top} data={item} bottom={bottom}></Course> <Course key={index} top={top} data={item} bottom={bottom}></Course>
...@@ -142,24 +146,30 @@ class Index extends Component { ...@@ -142,24 +146,30 @@ class Index extends Component {
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">热门推荐</h2> <h2 className="title">热门推荐</h2>
<a className="more" href="#">更多 ></a> <a className="more" href="/#">更多 ></a>
<Scroll data={this.state.dataList} height='106px'></Scroll> <Scroll data={this.state.dataList} height='106px'></Scroll>
<ul className='course-detail'> <ul className='course-detail'>
{this.state.dataList.map((item, index) => { {this.state.dataList.map((item, index) => {
const top = ( const top = (
<span className='audition'> <div>
<i className={'iconfont iconerji'}></i> {item.isbuy === 1 &&
试听 <span className='audition'>
</span> <i className={'iconfont iconerji'}></i>试听</span>
}
</div>
) )
const bottom = ( const bottom = (
<p className="course-price"> <div>
<span className="new">¥{item.price0}</span> {item.isbuy === 0 && <p className="course-price">
<span className="old">¥{item.price1}</span> <span className="new">¥{item.price0}</span>
</p> <span className="old">¥{item.price1}</span>
// {item.isbuy === 1 && </p>
// <a href="" className="isbuy">已购买</a> }
// } {item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
) )
return ( return (
<Course key={index} top={top} data={item} bottom={bottom}></Course> <Course key={index} top={top} data={item} bottom={bottom}></Course>
...@@ -169,23 +179,29 @@ class Index extends Component { ...@@ -169,23 +179,29 @@ class Index extends Component {
</div> </div>
<div className='category'> <div className='category'>
<h2 className="title">基础入门</h2> <h2 className="title">基础入门</h2>
<a className="more" href="#">更多 ></a> <a className="more" href="/#">更多 ></a>
<ul className='course-detail'> <ul className='course-detail'>
{this.state.dataList.map((item, index) => { {this.state.dataList.map((item, index) => {
const top = ( const top = (
<span className='audition'> <div>
<i className={'iconfont iconerji'}></i> {item.isbuy === 1 &&
试听 <span className='audition'>
</span> <i className={'iconfont iconerji'}></i>试听</span>
}
</div>
) )
const bottom = ( const bottom = (
<p className="course-price"> <div>
<span className="new">¥{item.price0}</span> {item.isbuy === 0 && <p className="course-price">
<span className="old">¥{item.price1}</span> <span className="new">¥{item.price0}</span>
</p> <span className="old">¥{item.price1}</span>
// {item.isbuy === 1 && </p>
// <a href="" className="isbuy">已购买</a> }
// } {item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
) )
return ( return (
<Course key={index} top={top} data={item} bottom={bottom}></Course> <Course key={index} top={top} data={item} bottom={bottom}></Course>
...@@ -198,19 +214,25 @@ class Index extends Component { ...@@ -198,19 +214,25 @@ class Index extends Component {
<ul className='course-detail'> <ul className='course-detail'>
{this.state.dataList.map((item, index) => { {this.state.dataList.map((item, index) => {
const top = ( const top = (
<span className='audition'> <div>
<i className={'iconfont iconerji'}></i> {item.isbuy === 1 &&
试听 <span className='audition'>
</span> <i className={'iconfont iconerji'}></i>试听</span>
}
</div>
) )
const bottom = ( const bottom = (
<p className="course-price"> <div>
<span className="new">¥{item.price0}</span> {item.isbuy === 0 && <p className="course-price">
<span className="old">¥{item.price1}</span> <span className="new">¥{item.price0}</span>
</p> <span className="old">¥{item.price1}</span>
// {item.isbuy === 1 && </p>
// <a href="" className="isbuy">已购买</a> }
// } {item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
) )
return ( return (
<Course key={index} top={top} data={item} bottom={bottom}></Course> <Course key={index} top={top} data={item} bottom={bottom}></Course>
......
src/styles/index.scss
...@@ -10,7 +10,7 @@ $link-visited: #333; // 设置链接访问后的颜色 ...@@ -10,7 +10,7 @@ $link-visited: #333; // 设置链接访问后的颜色
$main-color: #09f; // 主体颜色 $main-color: #09f; // 主体颜色
// 字体 // 字体
$font-family-zh: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; $font-family-zh: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
$font-family-en: Arial, sans-serif !default; $font-family-en: Arial, sans-serif !default;
// 盒子模型 // 盒子模型
...@@ -80,14 +80,17 @@ body { ...@@ -80,14 +80,17 @@ body {
a { a {
text-decoration: none; text-decoration: none;
outline: none; outline: none;
&:hover, &:hover,
&:link, &:link,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
&:visited { &:visited {
} }
} }
// 暂时放置样式，后期需处理 // 暂时放置样式，后期需处理
.homeImg { .homeImg {
display: block; display: block;
...@@ -112,21 +115,27 @@ a { ...@@ -112,21 +115,27 @@ a {
} }
// 背景颜色 // 背景颜色
.bg-white { background-color: #fff } .bg-white {
background-color: #fff
}
// 间隔 // 间隔
.pt20 { .pt20 {
padding-top: 20px; padding-top: 20px;
} }
.pt30 { .pt30 {
padding-top: 30px; padding-top: 30px;
} }
.pt40 { .pt40 {
padding-top: 40px; padding-top: 40px;
} }
.pt50 { .pt50 {
padding-top: 50px; padding-top: 50px;
} }
.pt60 { .pt60 {
padding-top: 60px; padding-top: 60px;
} }
...@@ -137,16 +146,45 @@ a { ...@@ -137,16 +146,45 @@ a {
} }
// 请保证你的设计稿为750px宽，如果有其余字体大小，请在私有样式中设置 // 请保证你的设计稿为750px宽，如果有其余字体大小，请在私有样式中设置
.font-20 {font-size: 0.2rem;} .font-20 {
.font-24 {font-size: 0.24rem;} font-size: 0.2rem;
.font-26 {font-size: 0.26rem;} }
.font-28 {font-size: 0.28rem;}
.font-30 {font-size: 0.3rem;} .font-24 {
.font-32 {font-size: 0.32rem;} font-size: 0.24rem;
.font-34 {font-size: 0.34rem;} }
.font-36 {font-size: 0.36rem;}
.font-38 {font-size: 0.38rem;} .font-26 {
.font-40 {font-size: 0.4rem;} font-size: 0.26rem;
}
.font-28 {
font-size: 0.28rem;
}
.font-30 {
font-size: 0.3rem;
}
.font-32 {
font-size: 0.32rem;
}
.font-34 {
font-size: 0.34rem;
}
.font-36 {
font-size: 0.36rem;
}
.font-38 {
font-size: 0.38rem;
}
.font-40 {
font-size: 0.4rem;
}
// 设置block // 设置block
.block { .block {
...@@ -203,6 +241,7 @@ a { ...@@ -203,6 +241,7 @@ a {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
// 水平居中 // 水平居中
.hor-center { .hor-center {
display: flex; display: flex;
...@@ -210,6 +249,7 @@ a { ...@@ -210,6 +249,7 @@ a {
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
} }
// 垂直居中 // 垂直居中
.ver-center { .ver-center {
display: flex; display: flex;
...@@ -295,7 +335,9 @@ img { ...@@ -295,7 +335,9 @@ img {
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
/* autoprefixer: off; */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
/* autoprefixer: on; */
} }
// 字符超出两行溢出隐藏 // 字符超出两行溢出隐藏
...@@ -304,7 +346,9 @@ img { ...@@ -304,7 +346,9 @@ img {
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
/* autoprefixer: off; */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
/* autoprefixer: on; */
} }
// 字符超出三行溢出隐藏 // 字符超出三行溢出隐藏
...@@ -313,7 +357,9 @@ img { ...@@ -313,7 +357,9 @@ img {
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
/* autoprefixer: off; */
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
/* autoprefixer: on; */
} }
// 浮动控制 // 浮动控制
...@@ -323,6 +369,7 @@ img { ...@@ -323,6 +369,7 @@ img {
content: ''; content: '';
display: table; display: table;
} }
&:after { &:after {
clear: both; clear: both;
} }
...@@ -351,21 +398,27 @@ img { ...@@ -351,21 +398,27 @@ img {
.z-50 { .z-50 {
z-index: 50; z-index: 50;
} }
.z-100 { .z-100 {
z-index: 100; z-index: 100;
} }
.z-150 { .z-150 {
z-index: 150; z-index: 150;
} }
.z-200 { .z-200 {
z-index: 200; z-index: 200;
} }
.z-250 { .z-250 {
z-index: 250; z-index: 250;
} }
.z-max { .z-max {
z-index: 999999; z-index: 999999;
} }
.overflow-h { .overflow-h {
overflow: hidden; overflow: hidden;
} }
...@@ -390,6 +443,7 @@ input[type="radio"] { ...@@ -390,6 +443,7 @@ input[type="radio"] {
background: none; background: none;
outline: none; outline: none;
} }
input[type="radio"]:before { input[type="radio"]:before {
position: absolute; position: absolute;
content: ''; content: '';
...@@ -404,6 +458,7 @@ input[type="radio"]:before { ...@@ -404,6 +458,7 @@ input[type="radio"]:before {
border-radius: 50%; border-radius: 50%;
outline: 0; outline: 0;
} }
input[type="radio"]:checked:after { input[type="radio"]:checked:after {
position: absolute; position: absolute;
z-index: 50; z-index: 50;
...@@ -418,6 +473,7 @@ input[type="radio"]:checked:after { ...@@ -418,6 +473,7 @@ input[type="radio"]:checked:after {
border-radius: 50%; border-radius: 50%;
outline: 0; outline: 0;
} }
input[type="radio"]:checked:before { input[type="radio"]:checked:before {
position: absolute; position: absolute;
z-index: 100; z-index: 100;
......
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