fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 77e31289a54f474c6b5f28c175bf202f7e3d2322 2 parents 1a0c878f 4ebbcef9

merge-feature/guangV3

Inline Side-by-side
Showing 24 changed files with 1178 additions and 62 deletions
'use strict';
const mRoot = '../models';
const newGuangModel = require(`${mRoot}/guang-new`);
const headerModel = require('../../../doraemon/models/header'); // 头部model
const channels = {
boys: '1,3',
girls: '2,3',
kids: '1,2,3',
lifestyle: '1,2,3'
};
exports.index = (req, res, next) => {
let responseData = {
pageHeader: headerModel.setNav({
navTitle: '逛'
}),
title: '逛',
module: 'guang',
page: 'guang-new',
width750: true,
localCss: true
};
let params = {
gender: channels[req.cookies._Channel] || '1,3'
};
req.ctx(newGuangModel).index(params).then(result => {
res.render('guang-new', Object.assign(responseData, result));
}).catch(next);
};
exports.more = (req, res, next) => {
let params = {
page: req.query.page
};
req.ctx(newGuangModel).list(params).then(result => {
res.json(result);
}).catch(next);
};
... ...
... ... @@ -79,6 +79,7 @@ const editor = (req, res, next) => {
articleListData = datas[1];
let build = [];
let name = authorData.data ? authorData.data.name : '';
let total = articleListData.data ? articleListData.data.total : 0;
if (articleListData.data && articleListData.data.list && articleListData.data.list.artList) {
articleListData.data.list.artList.forEach(articleData => {
... ... @@ -104,7 +105,8 @@ const editor = (req, res, next) => {
guang: {
infos: build,
isApp: isApp,
authorInfo: authorData.data
authorInfo: authorData.data,
total: total
},
localCss: true
}, parameter));
... ...
'use strict';
const _ = require('lodash');
class newGuang extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
}
_indexRes(params) {
let options = {
url: '/operations/api/v5/resource/get',
data: {
content_code: '44153d54effebaf803a2deee06b3ea5a',
gender: params.gender
},
api: global.yoho.ServiceAPI
};
return this.get(options).then(result => {
return result;
});
}
list(params) {
let options = {
url: '/guang/api/v1/article/getHomePageList',
data: {
page: params.page || 1,
limit: params.limit || 10
},
api: global.yoho.ServiceAPI
};
return this.get(options).then(result => {
let resu = {
list: []
};
if (_.get(result, 'data.guangList')) {
resu.list = result.data.guangList;
_.forEach(resu.list, (val) => {
val.play = val.hasVideoFlag === 1;
});
}
return resu;
});
}
index(params) {
return Promise.all([
this._indexRes(params)
]).then((result) => {
let resu = {
floorRes: {},
gender: encodeURIComponent(params.gender)
};
if (_.get(result, '[0].data')) {
_.forEach(result[0].data, (val) => {
if (val.template_name === 'focus') {
resu.floorRes.focus = _.get(val, 'data');
}
if (val.template_name === '3:4ImageListFloor') {
resu.floorRes.type = _.get(val, 'data.list');
}
if (val.template_name === 'GuangRqFloor') {
resu.floorRes.renQi = _.get(val, 'data.list');
}
if (val.template_name === 'GuangDpFloor') {
resu.floorRes.daPei = _.get(val, 'data.list');
}
if (val.template_name === 'GuangHhFloor') {
resu.floorRes.haoHuo = _.get(val, 'data.list');
}
});
}
return resu;
});
}
}
module.exports = newGuang;
... ...
... ... @@ -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,7 @@ router.get('/plusstar/cate', brand.index);
router.get('/plusstar/brandList', brand.brandList);
router.get('/sitemap.xml', sitemap.siteMap);
router.get('/guang-new', guangNew.index);
router.get('/guang-new/more', guangNew.more);
module.exports = router;
... ...
<div class="guang-new-page yoho-page">
{{#if floorRes.focus}}
<div class="swiper-top">
<div class="swiper-container">
<div class="swiper-wrapper">
{{# floorRes.focus}}
<div class="swiper-slide">
<a href="{{url}}">
<img src="{{image2 src w=750 h=322 q=30}}" alt="{{title}}" />
</a>
</div>
{{/ floorRes.focus}}
</div>
<div class="swiper-pagination">
<div class="wiper-pagination-bullets"></div>
</div>
</div>
</div>
{{/if}}
{{#if floorRes.type}}
<div class="swiper-tab">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#floorRes.type}}
<div class="swiper-slide">
<a href="{{url}}">
<div class="tab-item" style="background-image: url({{image2 src w=100 h=320 q=30}})">
<div class="cover"></div>
<div class="title">{{alt}}</div>
</div>
</a>
</div>
{{/floorRes.type}}
</div>
</div>
</div>
{{/if}}
{{#if floorRes.renQi}}
<div class="big-title">
人气
<a class="iconfont" href="//guang.m.yohobuy.com/?gender={{gender}}&type=1001">MORE&nbsp;&#xe604;</a>
</div>
<div class="swiper-page">
<div class="swiper-container">
<div class="swiper-wrapper">
{{# floorRes.renQi}}
<div class="swiper-slide">
<a href="//guang.m.yohobuy.com/info/index?id={{id}}">
<div class="page-c">
<img src="{{image2 src w=690 h=430 q=30}}" />
<div class="info">
<p class="name eps">{{title}}</p>
<p class="type eps">{{intro}}</p>
</div>
</div>
</a>
</div>
{{/ floorRes.renQi}}
</div>
</div>
</div>
{{/if}}
{{#if floorRes.daPei}}
<div class="big-title">
搭配
<a class="iconfont" href="//guang.m.yohobuy.com/?gender={{gender}}&type=2">MORE&nbsp;&#xe604;</a>
</div>
<div class="swiper-collocation">
<div class="swiper-container">
<div class="swiper-wrapper">
{{# floorRes.daPei}}
<div class="swiper-slide">
<a href="//guang.m.yohobuy.com/info/index?id={{id}}">
<img src="{{image2 src w=590 h=370 q=30}}" />
<p class="eps-2">{{title}}</p>
</a>
</div>
{{/ floorRes.daPei}}
</div>
</div>
</div>
{{/if}}
<div class="big-title hide">
限定
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="swiper-limit hide">
<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>
<div class="swiper-pagination"></div>
</div>
</div>
{{#if floorRes.haoHuo}}
<div class="big-title">
好货
<a class="iconfont" href="//guang.m.yohobuy.com/?gender={{gender}}&type=4">MORE&nbsp;&#xe604;</a>
</div>
<div class="goods-list clearfix">
{{# floorRes.haoHuo}}
<div class="goods-item">
<a href="//guang.m.yohobuy.com/info/index?id={{id}}">
<img src="{{image2 src w=360 h=224 q=30}}" />
<div class="info">
<p class="name eps-2 eps-3">{{title}}</p>
<p class="tips">#{{min_sort_name}}#</p>
</div>
</a>
</div>
{{/ floorRes.haoHuo}}
</div>
{{/if}}
<div class="big-title hide">
人物
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="person-list clearfix hide">
<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 hide">
SHOW
<span class="iconfont">MORE&nbsp;&#xe604;</span>
</div>
<div class="swiper-show hide">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="" />
<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">
逛
<a class="iconfont" href="//guang.m.yohobuy.com/?gender={{gender}}">MORE&nbsp;&#xe604;</a>
</div>
<div class="guang-list"></div>
<div class="trend-list hide">
<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>
<a href="//guang.m.yohobuy.com/?gender={{gender}}" class="guang-fixed fixed"></a>
<div class="float-top fixed"></div>
</div>
\ No newline at end of file
... ...
<div class="guang-list-page guang-page yoho-page" id="guangList">
{{# guang}}
<ul id="guang-nav" class="guang-nav">
{{# navs}}
<li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}>
{{type}}
<div class="nav-scroll">
<ul id="guang-nav" class="guang-nav">
{{# navs}}
<li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}>
<span>{{type}}</span>
</li>
{{/ navs}}
<li class="guang-nav-item news-jump" data-type=-1>
<a href='//m.yohobuy.com/guang/news' title='资讯'>资讯</a>
</li>
{{/ navs}}
<li class="guang-nav-item news-jump" data-type=-1>
<a href='//m.yohobuy.com/guang/news' title='资讯'>资讯</a>
</li>
</ul>
</ul>
</div>
<div id="info-list" class="info-list-container">
{{# infos}}
<div class="info-list{{^show}} hide{{/show}}">
... ...
... ... @@ -7,9 +7,12 @@
</div>
<div class="text">
<p class="name">{{name}}</p>
<p class="info">{{author_desc}}</p>
{{#if ../total}}
<p class="info">{{../total}}篇内容</p>
{{/if}}
</div>
</div>
<p class="intro">{{author_desc}}</p>
{{/ authorInfo}}
<div id="info-list" class="info-list">
... ...
<div class="guang-info" data-id="{{id}}">
{{# author}}
<a class="info-author clearfix"{{#if url}} href="{{url}}"{{/if}}>
<a class="info-author clearfix"{{#if url}} href="{{url}}"{{/if}} style="display: none;">
<img class="lazy avatar" data-original="{{image2 avatar mode=2 q=60}}">
<span class="name">{{name}}</span>
{{#if minCategory}}
... ... @@ -60,7 +60,7 @@
<div class="info-deps">
<a class="info-title-container"{{#unless isShow}} href="{{url}}"{{/unless}}>
<div class="info-title">{{#if top}}<span class="top-tag">置顶</span>{{/if}}{{title}}</div>
<div class="info-title text-overflow">{{#if top}}<span class="top-tag">置顶</span>{{/if}}{{title}}</div>
</a>
<p class="info-text">{{text}}</p>
{{> index/tvls}}
... ...
<li class="goods-box">
<li class="goods-box{{#if only}} only{{/if}}">
<div class="goods-img">
<a href="{{href}}">
<img class="lazy" data-original="{{image2 pic_url w=106 h=138}}" />
... ...
<div class="time-view-like-share clearfix">
<i class="iconfont">&#xe603;</i>
{{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;
<i class="iconfont">&#xe602;</i>
<span class="page-view">{{pageView}}</span>
{{#if author.minCategory}}
<span>{{author.minCategory}}</span>&nbsp;&nbsp;|&nbsp;
{{/if}}
<span class="page-view">{{pageView}}</span>人阅读
<div class="like-share-container">
{{#like}}
<i class="iconfont like-btn{{#isLiked}} like{{/isLiked}}">&#xe601;</i>
{{# like}}
<span class="like-count">{{count}}</span>
<i class="iconfont like-btn{{#isLiked}} like{{/isLiked}}">&#xe601;</i>
{{/ like}}
{{# collect}}
<i class="iconfont collect-btn{{#isCollected}} collected{{/isCollected}}">&#xe605;</i>
... ...
... ... @@ -17,8 +17,9 @@ const domains = {
singleApi: 'http://api-test3.yohops.com:9999/',
imSocket: 'ws://socket.yohobuy.com:10240',
imCs: 'http://im.yohobuy.com/api',
global: 'http://api-global.yohobuy.com',
store: 'http://192.168.102.47:8080/portal-gateway/',
platformApi: 'http://192.168.102.48:8088/',
store: 'http://192.168.102.47:8080/portal-gateway/wechat/',
extstore: 'http://extstore-test1.yohops.com',
family: 'http://192.168.102.31:8096/uic/',
yohoNowApi: 'http://yohonow-test.yohops.com:9999/'
... ...
{{# list}}
<div class="guang-item">
<a href="//guang.m.yohobuy.com/info/index?id={{id}}">
<div class="page-c">
<img class="lazy" data-original="{{image2 src w=690 h=430 q=30}}" />
<div class="info">
<p class="name eps-2">{{title}}</p>
<p class="type">{{category_name}}</p>
</div>
{{#if play}}
<div class="play"></div>
{{/if}}
</div>
</a>
</div>
{{/ list}}
\ 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';
import lazyLoad from 'yoho-jquery-lazyload';
import moreRender from 'guang/list.hbs';
class GuangNew extends Page {
constructor() {
super();
this.selector = {
$parentObj: $('.swiper-tab'),
$fixed: $('.fixed'),
$guangList: $('.guang-list')
};
this.view = {
moreRender
};
this.fixedTop = 0;
this.page = 0;
this.end = false;
this.loading = false;
this.init();
}
init() {
this.swiperTop();
this.swiperTab();
this.swiperPage();
this.swiperCollocation();
this.swiperLimit();
this.swiperShow();
this.fixed();
this.fixedRetop();
this.list();
}
list() {
$(window).scroll(() => {
window.requestAnimationFrame(this.scrollHandler.bind(this));
});
}
scrollHandler() {
if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
this.doMore();
}
}
doMore() {
if (!this.end && !this.loading) {
this.page++;
this.moreList(this.page);
}
}
moreList() {
this.loading = true;
this.ajax({
url: '/guang/guang-new/more',
data: {
page: this.page
},
}).then(result => {
if (result && result.list.length > 0) {
let $lazy = $(this.view.moreRender(result));
this.selector.$guangList.append($lazy);
this.loading = false;
lazyLoad($lazy.find('.lazy'));
} else {
this.end = true;
}
}).catch(error => {
console.error(error);
});
}
// 返回顶部，最新资讯
fixed() {
$(window).scroll(() => {
this.fixedRetop();
});
}
fixedRetop() {
this.fixedTop = this.selector.$parentObj.offset().top - $(document).scrollTop();
if (this.fixedTop <= 0) {
this.selector.$fixed.show();
} else {
this.selector.$fixed.hide();
}
}
// 顶部swiper
swiperTop() {
if ($('.swiper-top').length > 0) {
new Swiper('.swiper-top .swiper-container', {
pagination: '.swiper-pagination .wiper-pagination-bullets',
paginationClickable: true
});
}
}
// 频道swiper
swiperTab() {
if ($('.swiper-tab').length > 0) {
let preWidth = $(window).width() / 750 * -115; // 向左位移一个swiper-slide宽度，相对于750宽度下
new Swiper('.swiper-tab .swiper-container', {
effect: 'coverflow',
loop: true,
grabCursor: true,
slidesPerView: 'auto',
followFinger: false,
slidesOffsetBefore: preWidth,
centeredSlides: true,
speed: 800,
coverflow: {
rotate: 0,
stretch: 0,
depth: 0,
modifier: 1,
slideShadows: false
},
touchRatio: 0.01,
});
}
}
// 人气swiper
swiperPage() {
if ($('.swiper-page').length > 0) {
new Swiper('.swiper-page .swiper-container', {
direction: 'vertical',
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
followFinger: false,
loop: true,
coverflow: {
rotate: 0,
stretch: 0,
depth: 0,
modifier: 1,
slideShadows: false
}
});
}
}
// 搭配swiper
swiperCollocation() {
if ($('.swiper-collocation').length > 0) {
new Swiper('.swiper-collocation .swiper-container', {
centeredSlides: true,
slidesPerView: 'auto',
loop: true
});
}
}
// 限定swiper
swiperLimit() {
if ($('.swiper-limit').length > 0) {
new Swiper('.swiper-limit .swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
}
}
// showswiper
swiperShow() {
if ($('.swiper-show').length > 0) {
new Swiper('.swiper-show .swiper-container', {
slidesPerView: 'auto'
});
}
}
}
$(() => {
new GuangNew();
});
... ...
... ... @@ -23,7 +23,8 @@ let $infoList = $('#info-list'),
curType = $curNav.data('type');
let getDynamicData = require('./list-dynamic');
let productlistWith = require('./index/product-list');
// let productlistWith = require('./index/product-list');
let state = {};
... ... @@ -61,7 +62,7 @@ info.initInfosEvt($infoList);
$nav.bind('contextmenu', function() {
return false;
});
$nav.on('touchend touchcancel', function(e) {
$nav.on('click', function(e) {
if ($(e.target).closest('.news-jump').length > 0) {
return true;
... ... @@ -71,7 +72,7 @@ $nav.on('touchend touchcancel', function(e) {
$content,
index;
if ($this.hasClass('focus')) {
if ($this.hasClass('focus') || !$this.hasClass('guang-nav-item')) {
return;
}
... ... @@ -128,12 +129,12 @@ $(document).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
$nav.on('touchstart', function(e) {
let target = e.target || e.srcElement;
// $nav.on('touchstart', function(e) {
// let target = e.target || e.srcElement;
target.className = 'bytouch ' + target.className;
}).on('touchend touchcancel', function() {
$nav.find('li').removeClass('bytouch');
});
// target.className = 'bytouch ' + target.className;
// }).on('touchend touchcancel', function() {
// $nav.find('li').removeClass('bytouch');
// });
productlistWith();
// productlistWith();
... ...
... ... @@ -21,7 +21,8 @@ let searching = false;
let mySwiper = {};
let getDynamicData = require('./list-dynamic');
let productlistWith = require('./index/product-list');
// let productlistWith = require('./index/product-list');
require('common');
... ... @@ -227,7 +228,7 @@ function loadMore($container, opt, url) {
$noMore.removeClass('hide');
}
productlistWith($data);
// productlistWith($data);
$container.append($data);
$swiper = $container.find('.swiper-container');
... ...
html,
body {
background-color: #f0f0f0;
}
.guang-list-page {
.editor-header {
margin-bottom: 15PX;
padding-top: 18PX;
padding-bottom: 20PX;
padding: 30px 0;
background: #fff;
}
.intro {
width: 100%;
padding: 0 30px;
font-size: 24px;
color: #444;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.avatar {
... ... @@ -12,8 +22,8 @@
margin-left: 30px;
img {
width: 50PX;
height: 50PX;
width: 100px;
height: 100px;
border-radius: 50%;
}
}
... ... @@ -22,17 +32,17 @@
float: left;
margin-left: 32px;
width: 475px;
padding: 10px 0;
.name {
font-size: 16PX;
line-height: 20PX;
font-size: 26px;
line-height: 40px;
}
.info {
margin-top: 6px;
color: #bdbdbf;
font-size: 12PX;
line-height: 16PX;
font-size: 20px;
line-height: 40px;
}
}
... ... @@ -56,24 +66,43 @@
}
}
.guang-nav {
background-color: #fff;
.nav-scroll {
overflow: hidden;
width: 640px;
height: 80px;
display: flex;
justify-content: space-around;
}
.guang-nav {
background-color: #fff;
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
font-size: 0;
line-height: 0;
white-space: nowrap;
padding: 0 23px;
}
.guang-nav-item {
width: 20%;
display: inline-block;
color: #ccc;
font-size: 14PX;
text-align: center;
line-height: 80px;
padding: 0 23px;
span {
line-height: 76px;
display: block;
border-bottom: solid 4px #fff;
padding: 0 14px;
}
&.focus {
color: #000;
color: #444;
span {
border-bottom: solid 4px #444;
}
}
&.news-jump a {
... ...
.guang-info {
margin-bottom: 30px;
padding: 0 0 24px;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.info-author {
... ... @@ -49,10 +47,14 @@
position: relative;
width: 100%;
.img-box {
padding: 30px 30px 0;
display: block;
}
img {
display: block;
width: 100%;
min-height: 400px;
}
.play {
... ... @@ -128,6 +130,7 @@
}
.info-title {
max-height: 44px;
line-height: 44px;
color: #000;
font-size: 20PX;
... ... @@ -135,10 +138,9 @@
.top-tag {
font-size: 18px;
color: #d0021b;
color: #fff;
padding: 4px 16px;
border: 1px solid #d0021b;
border-radius: 4px;
background-color: #444;
margin-right: 20px;
}
}
... ...
... ... @@ -12,17 +12,19 @@
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
.product-list {
height: 138px;
overflow-y: hidden;
white-space: nowrap;
.goods-box {
width: 320px;
height: 138px;
border-radius: 8px;
float: left;
display: inline-block;
margin-right: 20px;
background-color: #f0f0f0;
}
... ... @@ -47,6 +49,7 @@
float: left;
.title {
white-space: normal;
font-size: 22px;
color: #444;
overflow: hidden;
... ... @@ -62,5 +65,14 @@
margin-top: 20px;
}
}
.goods-box.only {
width: 600px;
margin-right: 0;
.goods-info {
width: 494px;
}
}
}
}
... ...
... ... @@ -2,7 +2,7 @@
color: #b0b0b0;
line-height: 38px;
height: 38px;
font-size: 12PX;
font-size: 20px;
.iconfont {
vertical-align: 9%;
... ...
@import "layout/swiper";
body,
html {
background-color: #f0f0f0;
}
.guang-new-page {
.clearfix:after {
content: "";
display: table;
clear: both;
}
.page-c {
width: 690px;
position: relative;
.play {
background-image: resolve("guang/play-btn.png");
width: 140px;
height: 140px;
background-size: 100% 100%;
position: absolute;
top: 145px;
left: 50%;
margin-left: -70px;
}
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: 322px;
margin-bottom: 20px;
img {
width: 100%;
height: 100%;
}
.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;
}
}
.swiper-tab {
width: 750px;
height: 320px;
background-color: #fff;
margin-bottom: 20px;
.swiper-slide {
width: 104px;
height: 320px;
padding: 0 2px;
.tab-item {
width: 100%;
height: 320px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
.title {
text-align: center;
line-height: 320px;
font-size: 28px;
color: #fff;
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;
}
}
}
.swiper-slide-active {
width: 334px !important;
.tab-item {
width: 100%;
}
.cover {
display: none;
}
}
}
.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;
.page-c {
height: 580px;
opacity: 0;
}
}
.swiper-slide-active {
.page-c {
height: auto !important;
opacity: 1 !important;
}
}
.swiper-slide-prev {
.page-c {
height: auto !important;
opacity: 0 !important;
transition: all 1s;
}
}
.swiper-slide-next {
transform: translateY(-610px) !important;
width: 630px;
.page-c {
height: auto !important;
opacity: 0 !important;
transition: all 1s;
}
}
.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: 0 15px;
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 {
display: none;
position: fixed;
right: 20px;
bottom: 180px;
width: 80px;
height: 80px;
z-index: 9;
border-radius: 50%;
background: resolve("guang/new.png") no-repeat;
background-size: cover;
}
}
.float-top {
position: fixed;
bottom: 78px;
right: 20px;
border-radius: 50%;
width: 80px;
height: 80px;
background: resolve("guang/up.png") no-repeat;
background-size: cover;
display: none;
z-index: 9999;
}
... ...
... ... @@ -202,7 +202,8 @@ const formatArticle = (articleData, showTag, isApp, showAuthor, uid, top) => {
_.forEach(articleData.product_list, value => {
result.productList.push(_.assign(value, {
price: parseFloat(value.sales_price).toFixed(2),
href: `//m.yohobuy.com/product/${value.product_skn}.html`
href: `//m.yohobuy.com/product/${value.product_skn}.html`,
only: articleData.product_list.length === 1
}));
});
}
... ...