Skip to content

M
mr-julyedu
Commit c5c40c32 by xuzhenghua
Options

超出显示省略号

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