fe / yohobuywap-node · Commits

Go to a project

Authored by 李靖
Commit 1d787e23aa0a80fefa038b7b211dab5bbd72a1b6 1 parent 3ccadc9c

前端样式

Inline Side-by-side
Showing 6 changed files with 964 additions and 0 deletions
'use strict';
const headerModel = require('../../../doraemon/models/header'); // 头部model
exports.index = (req, res) => {
let responseData = {
pageHeader: headerModel.setNav({
navTitle: '逛'
}),
title: '逛',
module: 'guang',
page: 'guang-new',
width750: true,
localCss: true
};
let params = {};
res.render('guang-new', Object.assign(responseData, params));
};
... ...
... ... @@ -21,6 +21,7 @@ const plustar = require(cRoot + '/plustar');
const rss = require(cRoot + '/rss');
const brand = require(cRoot + '/brand-list');
const sitemap = require('../3party/controllers/sitemap');
const guangNew = require(cRoot + '/guang-new');
const router = express.Router(); // eslint-disable-line
router.get('/star', star.index); // 星潮教室首页
... ... @@ -76,4 +77,6 @@ router.get('/plusstar/cate', brand.index);
router.get('/plusstar/brandList', brand.brandList);
router.get('/sitemap.xml', sitemap.siteMap);
router.get('/guang-new', guangNew.index);
module.exports = router;
... ...
<div class="guang-new-page yoho-page">
<div class="swiper-top">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
</div>
</div>
<div class="swiper-pagination">
<div class="wiper-pagination-bullets"></div>
</div>
</div>
</div>
<div class="tab-top">
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg)">
<div class="cover"></div>
<div class="title">搭配</div>
<a href="https://www.baidu.com/"></a>
</div>
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg)">
<div class="cover"></div>
<div class="title">潮品</div>
<a href="https://www.baidu.com/"></a>
</div>
<div class="tab-item active" style="background-image: url(http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg)">
<div class="cover"></div>
<div class="title">人气</div>
<a href="https://www.baidu.com/"></a>
</div>
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg)">
<div class="cover"></div>
<div class="title">视屏</div>
<a href="https://www.baidu.com/"></a>
</div>
<div class="tab-item" style="background-image: url(http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg)">
<div class="cover"></div>
<div class="title">晒单</div>
<a href="https://www.baidu.com/"></a>
</div>
</div>
<div class="big-title">
人气
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="swiper-page">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="page-c">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
<div class="info">
<p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>
<p class="type">1潮流</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="page-c">
<img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/11/01351c47cc94b9cdbf401ea243f5e16086.jpg" />
<div class="info">
<p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>
<p class="type">2潮流</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="page-c">
<img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
<div class="info">
<p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>
<p class="type">3潮流</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="page-c">
<img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01f86a6951f771405d8034ec75ef990714.jpg" />
<div class="info">
<p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>
<p class="type">4潮流</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="page-c">
<img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />
<div class="info">
<p class="name eps">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>
<p class="type">5潮流</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="big-title">
搭配
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="swiper-collocation">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<p class="eps-2">把自己的星座穿在身上，这样的高街风你喜欢吗？</p>
</div>
</div>
</div>
</div>
<div class="big-title">
限定
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="swiper-limit">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<div class="info">
<div class="name eps-2">Nike’s Air Force 1 Is Headed</div>
<div class="title">发布日期</div>
<div class="name">2017/6/15</div>
<div class="title">发售价格</div>
<div class="name">¥7999.00</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<div class="info">
<div class="name eps-2">Nike’s Air Force 1 Is Headed</div>
<div class="title">发布日期</div>
<div class="name">2017/6/15</div>
<div class="title">发售价格</div>
<div class="name">¥7999.00</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<div class="info">
<div class="name eps-2">Nike’s Air Force 1 Is Headed</div>
<div class="title">发布日期</div>
<div class="name">2017/6/15</div>
<div class="title">发售价格</div>
<div class="name">¥7999.00</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<div class="info">
<div class="name eps-2">Nike’s Air Force 1 Is Headed</div>
<div class="title">发布日期</div>
<div class="name">2017/6/15</div>
<div class="title">发售价格</div>
<div class="name">¥7999.00</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://img10.static.yhbimg.com/article/2017/10/23/16/01b08f8dee3abc9025cd677e46d875a6b9.jpg" />
<div class="info">
<div class="name eps-2">Nike’s Air Force 1 Is Headed</div>
<div class="title">发布日期</div>
<div class="name">2017/6/15</div>
<div class="title">发售价格</div>
<div class="name">¥7999.00</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="big-title">
好货
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="goods-list clearfix">
<div class="goods-item">
<img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />
<div class="info">
<p class="name eps-2 eps-3">DICKES从1922年诞生之日起就旨在出品高品质的穿着体验！</p>
<p class="tips">#潮流行动#</p>
</div>
</div>
<div class="goods-item">
<img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />
<div class="info">
<p class="name eps-2 eps-3">DICKES从1922年诞生之日起就旨在出品高品质的穿着体验！</p>
<p class="tips">#潮流行动#</p>
</div>
</div>
<div class="goods-item">
<img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />
<div class="info">
<p class="name eps-2 eps-3">DICKES从1922年诞生之日起就旨在出品高品质的穿着体验！</p>
<p class="tips">#潮流行动#</p>
</div>
</div>
</div>
<div class="big-title">
人物
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="person-list clearfix">
<div class="person-item">
<img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />
<p class="eps">马思唯：有趣的人会买东西</p>
</div>
<div class="person-item">
<img src="http://img10.static.yhbimg.com/yhb-img01/2017/10/27/12/01fee21a2b9808e42f02ad2217b59a1491.jpg" />
<p class="eps">马思唯：有趣的人会买东西</p>
</div>
</div>
<div class="big-title">
SHOW
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="swiper-show">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
<p class="words eps-2">感觉超赞的，穿着很FEEL准备再入手个其他色</p>
<div class="auther">
<span class="name">来自#吴亦凡#</span>
<span class="iconfont">&#xe601;</span>
</div>
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
<p class="words eps-2">感觉超赞的</p>
<div class="auther">
<span class="name">来自#吴亦凡#</span>
<span class="iconfont">&#xe601;</span>
</div>
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
<p class="words eps-2">感觉超赞的，穿着很FEEL准备再备再备再备再备再备再备再备再备再备再备再入</p>
<div class="auther">
<span class="name">来自#吴亦凡#</span>
<span class="iconfont">&#xe601;</span>
</div>
</div>
<div class="swiper-slide">
<img src="http://img12.static.yhbimg.com/article/2017/10/27/18/02fa575c14cb40d9599875b8e437564f91.jpg" />
<p class="words eps-2">感觉超赞的</p>
<div class="auther">
<span class="name">来自#吴亦凡#</span>
<span class="iconfont">&#xe601;</span>
</div>
</div>
</div>
</div>
</div>
<div class="big-title">
逛
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="guang-list">
<div class="guang-item">
<div class="page-c">
<img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
<div class="info">
<p class="name eps-2">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品就旨在出品就旨在出品高品质</p>
<p class="type">3潮流</p>
</div>
</div>
</div>
<div class="guang-item">
<div class="page-c">
<img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
<div class="info">
<p class="name eps-2">DICKIES从诞生之日起就旨在出品高品质DICKIES从诞生之日起就旨在出品高品质</p>
<p class="type">3潮流</p>
</div>
</div>
</div>
</div>
<div class="trend-list">
<div class="trend-item">
<img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
<p class="intro eps-2">虽然每一年说流行这个那个颜色，但是相信很多潮人穿上身的还是逃不开黑白灰，真是无趣的要...</p>
<div class="auther">
<div class="pic" style="background-image:url(http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg)"></div>
<div class="name">川本小一</div>
</div>
</div>
<div class="trend-item">
<img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
<p class="intro eps-2">虽然每一年说流行这个那个颜色，但是相信很多潮人穿上身的还是逃不开黑白灰，真是无趣的要...</p>
<div class="auther">
<div class="pic" style="background-image:url(http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg)"></div>
<div class="name">川本小一</div>
</div>
</div>
<div class="trend-item">
<img src="http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg" />
<p class="intro eps-2">虽然每一年说流行这个那个颜色，但是相信很多潮人穿上身的还是逃不开黑白灰，真是无趣的要...</p>
<div class="auther">
<div class="pic" style="background-image:url(http://img11.static.yhbimg.com/yhb-img01/2017/10/27/11/01ea9512175a0c5795bfd01048271b654e.jpg)"></div>
<div class="name">川本小一</div>
</div>
</div>
</div>
<div class="guang-fixed">最新资讯</div>
</div>
\ No newline at end of file
... ...
import 'guang/guang-new.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import Swiper from 'yoho-swiper';
class GuangNew extends Page {
constructor() {
super();
this.selector = {
$tabItem: $('.tab-top .tab-item')
};
this.init();
}
init() {
this.bindEvents();
this.swiperTop();
this.swiperPage();
this.swiperCollocation();
this.swiperLimit();
this.swiperShow();
}
// 顶部swiper
swiperTop() {
new Swiper('.swiper-top .swiper-container', {
pagination: '.swiper-pagination .wiper-pagination-bullets',
paginationClickable: true
});
}
// 人气swiper
swiperPage() {
new Swiper('.swiper-page .swiper-container', {
direction: 'vertical',
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
followFinger: false,
coverflow: {
rotate: 0,
stretch: 0,
depth: 0,
modifier: 1,
slideShadows: true
}
});
}
// 搭配swiper
swiperCollocation() {
new Swiper('.swiper-collocation .swiper-container', {
centeredSlides: true,
slidesPerView: 'auto',
loop: true
});
}
// 限定swiper
swiperLimit() {
new Swiper('.swiper-limit .swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
}
// showswiper
swiperShow() {
new Swiper('.swiper-show .swiper-container', {
slidesPerView: 'auto'
});
}
bindEvents() {
this.selector.$tabItem.bind('click', this.tabTop.bind(this));
}
tabTop(e) {
let $this = $(e.currentTarget);
$this.addClass('active').siblings('div').removeClass('active');
}
}
$(() => {
new GuangNew();
});
... ...
@import "layout/swiper";
body,
html {
background-color: #f0f0f0;
}
.guang-new-page {
.clearfix:after {
content: "";
display: table;
clear: both;
}
.page-c {
width: 690px;
img {
width: 690px;
height: 430px;
}
.info {
height: 150px;
padding: 20px;
text-align: center;
}
.name {
font-size: 30px;
font-weight: 500;
text-align: center;
color: #444;
height: 60px;
line-height: 60px;
}
.type {
font-size: 20px;
color: #b0b0b0;
height: 50px;
line-height: 50px;
}
}
.eps {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eps-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.eps-3 {
-webkit-line-clamp: 3;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-top {
width: 750px;
height: 469px;
margin-bottom: 20px;
.swiper-slide {
width: 750px;
height: 100%;
}
.swiper-pagination {
height: 20px;
line-height: 20px;
}
.swiper-pagination-bullets {
line-height: 20px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 10px;
background-image: resolve("guang/swiper-btn.png");
background-repeat: repeat;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin-bottom: 5px;
opacity: 0.5;
}
.swiper-pagination-bullet-active {
background-color: #fff;
opacity: 1;
}
}
.tab-top {
width: 750px;
height: 320px;
background-color: #fff;
.tab-item {
transition: width 0.2s;
width: 100px;
height: 320px;
float: left;
text-align: center;
position: relative;
margin-right: 4px;
background-position: center center;
background-repeat: no-repeat;
&:last-child {
margin-right: 0;
}
.title {
line-height: 320px;
font-size: 28px;
color: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.cover {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.6;
}
}
.tab-item.active {
width: 334px;
.cover {
display: none;
}
a {
display: block;
}
}
}
.big-title {
height: 110px;
line-height: 110px;
background-color: #fff;
position: relative;
text-align: center;
font-size: 32px;
font-weight: 500;
color: #444;
.iconfont {
font-size: 22px;
line-height: 110px;
position: absolute;
top: 0;
right: 30px;
color: #b0b0b0;
}
}
.swiper-page {
width: 750px;
height: 640px;
overflow: hidden;
padding: 0 25px;
background-color: #fff;
.swiper-slide {
border-radius: 10px;
overflow: hidden;
width: 690px;
height: 580px;
background: #fff;
margin: 0 auto;
margin-bottom: 56px;
box-shadow: 0 0 20px #bbb;
transform: translateX(0) !important;
}
.swiper-slide-next {
transform: translateY(-610px) !important;
width: 630px;
}
.swiper-slide-next + div {
transform: translateY(-1220px) !important;
width: 570px;
}
}
.swiper-collocation {
margin-bottom: 20px;
width: 750px;
height: 567px;
background-color: #fff;
.swiper-slide {
width: 590px;
height: 100%;
margin-right: 30px;
img {
width: 590px;
height: 370px;
box-shadow: 0 5px 20px #bbb;
margin-top: 10px;
}
p {
width: 490px;
height: 107px;
margin: 30px 50px 50px;
line-height: 53px;
font-size: 30px;
font-weight: 500;
text-align: center;
color: #444;
}
}
}
.swiper-limit {
width: 750px;
height: 360px;
background-color: #fff;
margin-bottom: 20px;
.swiper-pagination-bullet {
width: 20px;
height: 4px;
background-color: #b0b0b0;
}
.swiper-pagination-bullet-active {
background-color: #444;
}
.swiper-slide {
padding: 0 30px;
img {
float: left;
width: 410px;
height: 256px;
}
.info {
float: left;
width: 250px;
height: 256px;
padding-left: 30px;
}
.name {
font-size: 30px;
color: #444;
}
.title {
font-size: 22px;
color: #b0b0b0;
margin-top: 15px;
}
}
}
.goods-list {
background-color: #fff;
width: 750px;
padding: 0 30px;
margin-bottom: 20px;
.goods-item {
width: 690px;
height: 224px;
margin-bottom: 30px;
img {
width: 360px;
height: 224px;
float: left;
}
.info {
width: 300px;
height: 224px;
padding-left: 30px;
float: left;
}
.name {
font-size: 24px;
color: #444;
line-height: 50px;
height: 150px;
}
.tips {
margin-top: 34px;
height: 40px;
line-height: 40px;
font-size: 24px;
color: #b0b0b0;
}
}
}
.person-list {
background-color: #fff;
padding: 0 30px;
margin-bottom: 20px;
.person-item {
width: 690px;
height: 340px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 30px;
position: relative;
img {
width: 100%;
height: 100%;
}
p {
position: absolute;
width: 690px;
height: 80px;
line-height: 80px;
bottom: 0;
left: 0;
color: #fff;
font-size: 30px;
text-align: center;
padding: 0 30px;
}
}
}
.swiper-show {
background-color: #fff;
padding: 0 30px 30px;
margin-bottom: 20px;
.swiper-slide {
width: 360px;
height: 360px;
border: solid 1px #e0e0e0;
position: relative;
color: #fff;
margin-right: 30px;
img {
width: 100%;
height: 100%;
}
.auther {
width: 298px;
height: 60px;
line-height: 60px;
position: absolute;
bottom: 0;
left: 0;
margin: 0 30px;
.name {
font-size: 18px;
}
.iconfont {
font-size: 30px;
float: right;
}
}
.words {
width: 298px;
max-height: 80px;
position: absolute;
bottom: 60px;
left: 0;
font-size: 24px;
line-height: 40px;
margin: 10px 30px;
}
}
}
.guang-list {
.guang-item {
padding-top: 30px;
background-color: #fff;
margin-bottom: 20px;
.page-c {
margin: 0 auto;
.name {
height: 120px;
}
.info {
height: 210px;
}
}
&:first-child {
padding-top: 0;
}
}
}
.trend-list {
.trend-item {
background-color: #fff;
padding: 30px;
margin-bottom: 20px;
img {
width: 690px;
height: 340px;
}
.intro {
line-height: 45px;
height: 90px;
font-size: 26px;
text-align: center;
color: #444;
margin: 25px 0;
}
.auther {
text-align: center;
.pic {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
vertical-align: middle;
}
.name {
display: inline-block;
font-size: 26px;
color: #444;
height: 30px;
line-height: 30px;
margin-left: 20px;
}
}
}
}
.guang-fixed {
position: fixed;
right: 20px;
bottom: 78px;
font-size: 24px;
color: #fff;
width: 80px;
height: 80px;
opacity: 0.7;
background-color: #000;
z-index: 9;
border-radius: 50%;
padding: 15px;
line-height: 25px;
}
}
... ...