fe / yohobuywap-node · Commits

Go to a project

Authored by zzzzzzz
Commit 2f8d2f376b84ff047d051d059858c7417c3a4f02 2 parents 83eb8a76 dc258c0a

Merge branch 'feature/newfloor' into release/5.0.0

Inline Side-by-side
Showing 72 changed files with 3252 additions and 6 deletions
/**
* 市场推广
* <jing.li@yoho.cn>
* 2016/09/07
*/
'use strict';
const indexModel = require('../models/market');
exports.index = (req, res, next) => {
indexModel.index({
}).then((result) => {
res.render('market/market', result);
}).catch(next);
};
... ...
... ... @@ -6,7 +6,8 @@
var express = require('express'),
path = require('path'),
hbs = require('express-handlebars');
hbs = require('express-handlebars'),
helpers = require(path.join(global.utils, 'helpers'));
var app = express();
... ... @@ -23,7 +24,7 @@ app.engine('.hbs', hbs({
defaultLayout: 'layout',
layoutsDir: doraemon,
partialsDir: ['./views/partial', `${doraemon}/partial`],
helpers: global.yoho.helpers
helpers: Object.assign({}, global.yoho.helpers, helpers)
}));
// router
... ...
/**
* 市场推广
* <jing.li@yoho.cn>
* 2016/09/07
*/
'use strict';
const service = global.yoho.ServiceAPI;
const helpers = global.yoho.helpers;
const _ = require('lodash');
const index = () => {
return service.get('/operations/api/v5/resource/home', {
content_code: '797c299afc4170452cf7b2048806b6b8',
gender: 1,
limit: 1000,
page: 1
}).then(result => {
let resu = {
swiper: [],
floorAdList: [],
newsList: [],
download: []
};
if (result.data.list[0]) {
let headerTip = result.data.list[0].data.text;
resu = Object.assign(resu, { headerTip });
}
if (result.data.list[1]) {
let adList = result.data.list[1].data.list;
let build = [];
adList.forEach(ad => {
build.push({
img: helpers.image(ad.src, 640, 310),
url: ad.url
});
});
resu.swiper = build;
let floorList = result.data.list[1].data.list;
let floorAdListTitle = result.data.list[1].data.title.title;
resu = _.assign(resu, { floorAdListTitle });
let floor = [];
let i = 0;
floorList.forEach(ad => {
if (i < 12) { // 控制显示条数，默认1-12
floor.push({
img: helpers.image(ad.src, 640, 170),
url: ad.url,
title: ad.title
});
i++;
}
});
resu.floorAdList = floor;
}
if (result.data.list[2]) {
let newsList = result.data.list[2].data.list[0];
let news = [{
img: helpers.image(newsList.src, 640, 370),
url: newsList.url,
title: newsList.title,
alt: newsList.alt
}];
resu.newsList = news;
}
if (result.data.list[3]) {
let downlist = result.data.list[3].data[0];
let down = [{
img: helpers.image(downlist.src, 640, 275),
url: downlist.url,
alt: downlist.alt
}];
resu.download = down;
}
return resu;
});
};
module.exports = {
index
};
... ...
... ... @@ -14,6 +14,7 @@ const wechat = require(`${cRoot}/wechat`);
const student = require(`${cRoot}/student`);
const live = require(`${cRoot}/live`);
const invite = require(`${cRoot}/invite`);
const market = require(`${cRoot}/market`);
// routers
... ... @@ -50,6 +51,8 @@ router.get('/live/:id', live.main);
router.get('/invite', invite.index);
router.get('/invite/index', invite.index);
router.get('/market', market.index);// 市场推广活动
router.get(/\/invite\/share_([\d]+)_([\d]+)_([\d]+).html/, invite.share);
router.get('/invite/sendRegCodeToMobile', invite.sendRegCodeToMobile);
router.get('/invite/checkOldUserCoupon', invite.checkOldUserCoupon);
... ...
<div class="container">
<div class="header">
<div>{{headerTip}}</div>
</div>
<div class="tab">
<div class="swiper-container">
<div class="swiper-wrapper">
{{# swiper}}
<div class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}">
</a>
</div>
{{/ swiper}}
</div>
<div class="swiper-pagination"></div>
</div>
</div>
{{# floorAdListTitle}}
<div class="floor-top">
<img src="{{imgSrc '//cdn.yoho.cn/m-yohobuy-node/assets/img/activity/market/floor-top-1.jpg'}}" />
</div>
{{/ floorAdListTitle}}
<ul class="floor-ul">
{{# floorAdList}}
<a href="{{url}}">
<li>
<img src="{{img}}" />
<p>{{title}}</p>
</li>
</a>
{{/ floorAdList}}
</ul>
{{# newsList}}
<div class="floor-top">
<img src="{{imgSrc '//cdn.yoho.cn/m-yohobuy-node/assets/img/activity/market/floor-top-2.jpg'}}" />
</div>
<div class="floor-c">
<a href="{{url}}">
<img src="{{img}}" alt="{{alt}}" />
</a>
<p>{{title}}</p>
</div>
{{/ newsList}}
{{# download}}
<a href="{{url}}" class="down">
<img src="{{img}}" alt="{{alt}}" />
</a>
{{/ download}}
</div>
\ No newline at end of file
... ...
... ... @@ -63,4 +63,8 @@
{{#if livePicture}}
{{> resources/live-picture}}
{{/if}}
{{! 六层图}}
{{#if sixLinesFloor}}
{{> resources/six-lines-floor}}
{{/if}}
{{/content}}
... ...
/**
* 逛列表页 controller
* @author: jing.li@yoho.cn<jing.li@yoho.cn>
* @date: 2016/09/05
*/
'use strict';
const headerModel = require('../../../doraemon/models/header'); // 头部model
const indexModel = require('../models/index');
/**
* 逛列表页
* @param req
* @param res
* @param next
*/
exports.index = (req, res, next) => {
let headerData = headerModel.setNav({
navTitle: '逛'
});
let responseData = {
pageHeader: headerData,
module: 'guang',
page: 'index',
title: '逛',
pageFooter: true
};
let param = {
uid: req.user.uid || 6228593,
udid: req.user.udid,
type: req.query.type || 0,
gender: req.query.gender || '1,3'
};
indexModel.getArticle(param).then(result => {
res.render('index', Object.assign(responseData, result));
}).catch(next);
};
... ...
... ... @@ -23,7 +23,7 @@ app.engine('.hbs', hbs({
extname: '.hbs',
defaultLayout: 'layout',
layoutsDir: doraemon,
partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
partialsDir: [path.join(__dirname, './views/partial'), `${doraemon}/partial`],
helpers: global.yoho.helpers
}));
... ...
/**
* Created by jing.li@yoho.cn.
* User: jing.li
* Date: 2016/9/5
* Time: 17:48
*/
'use strict';
const api = global.yoho.API;
const serviceAPI = global.yoho.ServiceAPI;
const singleAPI = global.yoho.SingleAPI;
const helpers = global.yoho.helpers;
const camelCase = global.yoho.camelCase;
const _ = require('lodash');
/**
* 逛分类
*/
const _category = () => {
return serviceAPI.get('/guang/api/v1/category/get', {
}, {
code: 200
});
};
/**
* 逛内容列表
*/
const _article = (param) => {
return serviceAPI.get('/guang/api/v2/article/getList', {
gender: param.gender,
page: param.page || 1,
uid: param.uid,
udid: param.udid,
sort_id: param.type ? param.type : 1,
tag: param.tag ? param.tag : null,
author_id: param.authorId ? param.authorId : null,
limit: param.limit ? param.limit : null,
}, {
code: 200
}).then(result => {
return result;
});
};
/**
* 逛
* @param params
*/
const getArticle = (param) => {
let page = param.page ? param.page : 1;
Object.assign(param, { page: page });
return api.all([
_category(),
_article(param)
]).then(result => {
let resu = {
guang: {
infos: [{
show: true,
info: [{
'article_type': '1',
author: {
author_id: '8168296',
avatar: 'http://img10.static.yhbimg.com/author/2016/05/07/15/01bb3ae789c573502830726c3297d0c80a.png',
name: '雾萌萌',
url: 'http://guang.m.yohobuy.com/author/index?id=8168296'
},
'author_id': '8168296',
'category_id': '1',
'category_name': '话题',
'conver_image_type': '1',
'id': 34380,
text: '验证逛文章图片压缩测试验证逛文章图片压缩测试验证逛文章图片压缩测试',
'isFavor': 'N',
'isPraise': 'N',
'is_recommended': '1',
'praiseStatus': 'true',
'praise_num': '0',
publishTime: '09月02日 19:21',
'share': {
'url': 'http://guang.m.yohobuy.com/info/index?id=34380'
},
img: 'https://img13.static.yhbimg.com/article/2016/09/05/14/02d732942cdd9647465736cb79796b0ddd.jpg?imageView/2/w/640/h/640',
'title': '验证逛文章图片压缩测试',
'url': 'http://guang.m.yohobuy.com/info/index?id=34380',
pageView: '50'
}]
}],
navs: [{
typeId: '0',
type: '推荐',
focus: true
}, {
typeId: '1',
type: '话题'
}, {
typeId: '2',
type: '搭配'
}, {
typeId: '3',
type: '潮人'
}, {
typeId: '4',
type: '潮品'
}, {
typeId: '19',
type: '专题'
}],
swiper: [{
img: 'https://img11.static.yhbimg.com/yhb-img01/2016/09/01/10/017b5ce31285f9062469303ba9ca197660.jpg?imageView2/2/w/830/h/327',
url: 'http://feature.yoho.cn/0418RUNNINGMAN/index.html?title=兄弟在奔跑，潮流在有货&share_id=944'
}, {
img: 'https://img11.static.yhbimg.com/yhb-img01/2016/09/01/10/017b5ce31285f9062469303ba9ca197660.jpg?imageView2/2/w/830/h/327',
url: 'http://feature.yoho.cn/0418RUNNINGMAN/index.html?title=兄弟在奔跑，潮流在有货&share_id=944'
}]
}
};
return resu;
});
};
module.exports = {
getArticle
};
... ...
... ... @@ -10,7 +10,7 @@ const express = require('express');
const cRoot = './controllers';
const star = require(cRoot + '/star');
const plusstar = require(cRoot + '/plusstar');
const homeController = require(`${cRoot}/index`);
const router = express.Router(); // eslint-disable-line
router.get('/star', star.index); // 星潮教室首页
... ... @@ -25,5 +25,6 @@ router.post('/star/setFavorite', star.setFavorite); // 收藏文章
router.get('/plusstar', plusstar.index); // 潮流优选
router.get('/plusstar/resources-template', plusstar.resourcesTemplate); // 潮流优选首页-资源位
router.get('/', homeController.index); // 逛首页
module.exports = router;
... ...
<div class="guang-list-page guang-page yoho-page">
{{# guang}}
<ul id="guang-nav" class="guang-nav clearfix">
{{# navs}}
<li class="guang-nav-item {{#focus}}focus{{/focus}}" data-type={{typeId}}>
{{type}}
</li>
{{/ navs}}
</ul>
<div id="info-list" class="info-list-container">
{{# infos}}
<div class="info-list{{^show}} hide{{/show}}">
{{#if show}}
{{#if ../swiper}}
<div class="swiper-container swiper-cont-{{typeId}}">
<div class="swiper-wrapper swiper-wrap-{{typeId}}">
{{# swiper}}
<div class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}">
</a>
<div class="swiper-lazy-preloader"></div>
</div>
{{/ swiper}}
</div>
<div class="swiper-pagination swiper-pagi-{{typeId}}"></div>
</div>
{{/if}}
{{/if}}
{{# info}}
{{> info}}
{{/ info}}
</div>
{{/ infos}}
</div>
<div id="load-more-info" class="load-more-info">
<div class="loading status hide">
正在加载...
</div>
<span class="no-more status">没有更多啦</span>
</div>
<input id="gender" type="hidden" value={{gender}}>
{{/ guang}}
</div>
\ No newline at end of file
... ...
<div class="guang-info" data-id="{{id}}">
{{# author}}
<a class="info-author clearfix" href={{url}}>
<img class="lazy avatar" data-original={{avatar}}>
<span class="name">{{name}}</span>
</a>
{{/ author}}
<div class="info-img">
{{#if showTags}}
<a href="javascript:;" class="info-match">
{{# isTip}}
小贴士
<div class="info-tag tip"></div>
{{/ isTip}}
{{# isCollocation}}
搭配
<div class="info-tag collocation"></div>
{{/ isCollocation}}
{{# isFashionMan}}
潮人
<div class="info-tag fashion-man"></div>
{{/ isFashionMan}}
{{# isFashionGood}}
潮品
<div class="info-tag fashion-good"></div>
{{/ isFashionGood}}
{{# isTopic}}
话题
<div class="info-tag topic"></div>
{{/ isTopic}}
{{# isSpecialTopic}}
专题
<div class="info-tag special-topic"></div>
{{/ isSpecialTopic}}
</a>
{{/if}}
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="{{alt}}">
</a>
</div>
<div class="info-deps">
<a class="info-title-container" href="{{url}}">
<h2 class="info-title">{{title}}</h2>
</a>
<p class="info-text">{{text}}</p>
{{> guang/tvls}}
</div>
</div>
\ No newline at end of file
... ...
<div class="guang-list-page guang-page yoho-page">
{{# guang}}
{{# authorInfo}}
<div id="author-infos" class="editor-header clearfix" data-id={{id}}>
<div class="avatar">
<img src="{{avatar}}">
</div>
<div class="text">
<p class="name">{{name}}</p>
<p class="info">{{info}}</p>
</div>
</div>
{{/ authorInfo}}
<div id="info-list" class="info-list">
{{# infos}}
{{> guang/info}}
{{/ infos}}
</div>
<div id="load-more-info" class="load-more-info">
<div class="loading status hide">
正在加载...
</div>
<span class="no-more status">没有更多啦</span>
</div>
{{#if tag}}
<input id="tag" type="hidden" value={{tag}}>
{{/if}}
{{#if gender}}
<input id="gender" type="hidden" value={{gender}}>
{{/if}}
{{#if isApp}}
<input id="isApp" type="hidden" value={{isApp}}>
{{/if}}
{{/ guang}}
</div>
\ No newline at end of file
... ...
info
<div class="guang-info" data-id="{{id}}">
{{# author}}
<a class="info-author clearfix" href={{url}}>
<img class="lazy avatar" data-original={{avatar}}>
<span class="name">{{name}}</span>
</a>
{{/ author}}
<div class="info-img">
{{#if showTags}}
<a href="javascript:;" class="info-match">
{{# isTip}}
小贴士
<div class="info-tag tip"></div>
{{/ isTip}}
{{# isCollocation}}
搭配
<div class="info-tag collocation"></div>
{{/ isCollocation}}
{{# isFashionMan}}
潮人
<div class="info-tag fashion-man"></div>
{{/ isFashionMan}}
{{# isFashionGood}}
潮品
<div class="info-tag fashion-good"></div>
{{/ isFashionGood}}
{{# isTopic}}
话题
<div class="info-tag topic"></div>
{{/ isTopic}}
{{# isSpecialTopic}}
专题
<div class="info-tag special-topic"></div>
{{/ isSpecialTopic}}
</a>
{{/if}}
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="{{alt}}">
</a>
</div>
<div class="info-deps">
<a class="info-title-container" href="{{url}}">
<h2 class="info-title">{{title}}</h2>
</a>
<p class="info-text">{{text}}</p>
{{> tvls}}
</div>
</div>
\ No newline at end of file
... ...
<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>
<div class="like-share-container">
{{# like}}
<i class="iconfont like-btn{{#isLiked}} like{{/isLiked}}">&#xe601;</i>
<span class="like-count">{{count}}</span>
{{/ like}}
{{# collect}}
<a href={{url}}>
<i class="iconfont collect-btn{{#isCollected}} collected{{/isCollected}}">&#xe605;</i>
</a>
{{/ collect}}
{{# share}}
<a href="{{.}}" class="iconfont share-btn">&#xe600;</a>
{{/ share}}
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -14,6 +14,7 @@ module.exports = {
appVersion: '4.9.2', // 调用api的版本
port: 6001,
siteUrl: '//m.yohobuy.com',
assetUrl: '//localhost:5001',
domains: {
api: 'http://api-test3.yohops.com:9999/',
service: 'http://service-test3.yohops.com:9999/',
... ... @@ -80,6 +81,7 @@ module.exports = {
if (isProduction) {
Object.assign(module.exports, {
appName: 'm.yohobuy.com',
assetUrl: '//cdn.yoho.cn/m-yohobuy-node/assets',
domains: {
api: 'http://api.yoho.yohoops.org/',
service: 'http://service.yoho.yohoops.org/',
... ... @@ -101,6 +103,7 @@ if (isProduction) {
} else if (isTest) {
Object.assign(module.exports, {
appName: 'm.yohobuy.com for test',
assetUrl: '//cdn.yoho.cn/m-yohobuy-node/assets',
domains: {
api: process.env.TEST_API || 'http://api-test1.yohops.com:9999/',
service: process.env.TEST_SERVICE || 'http://service-test1.yohops.com:9999/',
... ...
{{#data}}
<div class="best-week">
{{> common/floor-header-more}}
<ul class="six-lines-floor clearfix">
{{# list}}
<li>
<a href="{{url}}">
<div class="img-box">
<img class="lazy" data-original="{{image src 180 320}}" alt="">
</div>
</a>
</li>
{{/ list}}
</ul>
</div>
{{/data}}
\ No newline at end of file
... ...

225 Bytes | W: | H:

22 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
var $ = require('yoho-jquery'),
Swiper = require('yoho-swiper'),
lazyLoad = require('yoho-jquery-lazyload');
var swiper = new Swiper('.tab .swiper-container', {
pagination: '.swiper-pagination',
lazyLoading: true,
lazyLoadingInPrevNext: true,
paginationClickable: true,
loop: true,
autoplay: 3000,
});
require('lodash/commit');
lazyLoad($('img.lazy'));
// 统计用户点击事件
$(
function() {
$('a').click(
function() {
if (window._yas) {
window._yas.sendCustomInfo({
}, true);
}
}
);
}
);
... ...
... ... @@ -391,9 +391,19 @@ $(document).on('click', '.s-footer .checkbox', function() {
/*
* 数据提交
*/
$('.s-submit').data('isClick', true);
$(document).on('click', '.s-submit', function() {
var obj = changeSuccess(),
FAILURE_CAUSE;
var $that = $(this);
// 存cookie 记录状态
localStorage.setItem(STUDENTCOOKIES, JSON.stringify(obj.data));
if ($that.data('isClick') === false) {
return;
}
$that.data('isClick', false);
if (!obj.msg) {
$.ajax({
... ... @@ -412,15 +422,15 @@ $(document).on('click', '.s-submit', function() {
}
}, true);
}
location.href = data.data;
} else {
$that.data('isClick', true);
tip.show(data.message);
}
});
} else {
tip.show(obj.msg);
$that.data('isClick', true);
if (obj.msg.indexOf('字段为空') > -1) {
FAILURE_CAUSE = 1;
} else if (obj.msg.indexOf('认证协议') > -1) {
... ...
/**
* 逛首页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/10
*/
var $ = require('yoho-jquery');
var info = require('./info'),
loadMore = info.loadMore;
var $loadMoreInfo = $('#load-more-info');
var $loading = $(''),
$noMore = $('');
var winH = $(window).height();
var $infoList = $('#info-list'),
$infos = $infoList.children('.info-list'),
$nav = $('#guang-nav'),
$curNav = $nav.children('.focus'),
curType = $curNav.data('type');
require('../common');
var state = {};
if ($loadMoreInfo.length > 0) {
$loading = $loadMoreInfo.children('.loading');
$noMore = $loadMoreInfo.children('.no-more');
}
info.initSwiper(curType);
info.initInfosEvt($infoList);
// 初始化各Nav下资讯加载的状态
(function() {
var gender = $('#gender').val();
$nav.children('.guang-nav-item').each(function() {
var type = $(this).data('type'),
focus = $(this).hasClass('focus');
state[type] = {
page: focus ? 2 : 1,
gender: gender,
type: type,
end: false
};
});
}());
$nav.bind('contextmenu', function(e) {
return false;
});
$nav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('.guang-nav-item'),
$content,
index;
if ($this.hasClass('focus')) {
return;
}
index = $this.index();
$this.addClass('focus');
$curNav.removeClass('focus');
$content = $infos.eq(index);
$curNav = $this;
curType = $this.data('type');
// 当未加载数据时去请求数据
if (state[curType].page === 1) {
// 无数据时隐藏正在加载和没有更多字样
$loading.addClass('hide');
$noMore.addClass('hide');
state[curType].isTab = true;
loadMore($content, state[curType]);
} else {
// 重置当前Tab的load-more
if (state[curType].end) {
$loading.addClass('hide');
$noMore.removeClass('hide');
} else {
$loading.removeClass('hide');
$noMore.addClass('hide');
}
}
$infos.not('.hide').addClass('hide');
$content.removeClass('hide');
if (state[curType].page === 1) {
window.rePosFooter();// 进入空内容时重新定位footer位置
}
});
function scrollHandler() {
var $c = $infos.not('.hide');
if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $c.height()) {
loadMore($c, state[curType]);
}
}
// srcoll to load more
$(document).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
$nav.on('touchstart', function(e) {
var target = e.target || e.srcElement;
target.className = 'bytouch ' + target.className;
}).on('touchend touchcancel', function() {
$nav.find('li').removeClass('bytouch');
});
... ...
/**
* 资讯相关API
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/10
*/
var $ = require('yoho-jquery'),
Hammer = require('yoho-hammer'),
ellipsis = require('yoho-mlellipsis'),
lazyLoad = require('yoho-jquery-lazyload'),
Swiper = require('yoho-swiper');
var tip = require('../plugin/tip');
var loading = require('../plugin/loading');
var $loadMoreInfo = $('#load-more-info');
var $loading = $(''),
$noMore = $(''),
$swiper = $('');
require('../common');
var searching = false;
var mySwiper = {};
var isLoading = false;
ellipsis.init();
if ($loadMoreInfo.length > 0) {
$loading = $loadMoreInfo.children('.loading');
$noMore = $loadMoreInfo.children('.no-more');
}
// 获取url中的参数
function getUrlParam(name) {
// 构造一个含有目标参数的正则表达式对象
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
// 匹配目标参数
var r = window.location.search.substr(1).match(reg);
// 返回参数值
if (r != null) {
return r[2];
}
return null;
}
// 初始化swiper
function initSwiper(typeId) {
if (typeof typeId === undefined) {
return;
}
mySwiper[typeId] = new Swiper('.swiper-cont-' + typeId, {
lazyLoading: true,
wrapperClass: 'swiper-wrap-' + typeId,
pagination: '.swiper-pagi-' + typeId,
autoplay: 3000
});
}
/**
* 设置指定资讯项的Lazyload和文字截取
* @params $infos 资讯项
*/
function setLazyLoadAndMellipsis($infos) {
lazyLoad($infos.find('img.lazy'));
$infos.each(function() {
var $this = $(this),
$title = $this.find('.info-title'),
$text = $this.find('.info-text');
$title[0].mlellipsis(2);
$text[0].mlellipsis(2);
});
}
/**
* 初始化资讯列表事件绑定
* @params $container 逛资讯列表容器
*/
function initInfosEvt($container) {
var cHammer;
if (typeof $container === 'undefined') {
return;
}
if (typeof $container[0] === 'undefined') {
return;
}
cHammer = new Hammer($container[0]);
// 点赞或者收藏事件
cHammer.on('tap', function(e) {
var $this = $(e.target),
opt = 'ok',
$btn,
$info,
yhChannel;
// e.preventDefault();
// 点赞
$btn = $this.closest('.like-btn');
if ($btn.length > 0 && !isLoading) {
e.preventDefault();
if ($btn.hasClass('like')) {
opt = 'cancel';
}
$info = $this.closest('.guang-info');
isLoading = true;
$.ajax({
type: 'POST',
url: '/guang/opt/praiseArticle',
data: {
id: $info.data('id'),
opt: opt
},
success: function(data) {
var code = data.code;
if (code === 200) {
$btn.next('.like-count').text(data.data);
// 切换点赞状态
$btn.toggleClass('like');
}
},
error: function() {
tip.show('网络断开连接了~');
},
complete: function() {
isLoading = false;
}
});
return;
}
// APP收藏
$btn = $this.closest('.collect-btn');
if ($btn.length > 0) {
e.preventDefault();
if ($btn.hasClass('collected')) {
opt = 'cancel';
}
$info = $this.closest('.guang-info');
if (getUrlParam('yh_channel')) {
yhChannel = getUrlParam('yh_channel');
}
$.ajax({
type: 'POST',
url: '/guang/opt/collectArticle',
data: {
id: $info.data('id'),
opt: opt,
yh_channel: yhChannel,
uid: getUrlParam('uid')
},
success: function(data) {
if (data.code && data.code === 200) {
// 切换收藏状态
$btn.toggleClass('collected');
}
},
error: function() {
tip.show('网络断开连接了~');
}
});
}
});
setLazyLoadAndMellipsis($container.find('.guang-info'));
}
/**
* 资讯LoadMore
* @param $container 资讯容器 jqyeryObject
* @param opt 请求参数
* @param url[可选], 扩展请求的url而不使用默认值
*/
function loadMore($container, opt, url) {
var num;
if (searching) {
return;
}
if (opt.end) {
return;
}
if (opt.page === 1) {
// 显示loading
loading.showLoadingMask();
}
num = $container.find('.guang-info').length;
searching = true;
$.ajax({
type: 'GET',
url: url ? url : '/guang/index/page', // 对于指定url的使用指定url(存在不同的控制器)
data: opt,
success: function(data) {
var $newItems;
if (data === ' ') {
opt.end = true;
searching = false;
//
$loading.addClass('hide');
$noMore.removeClass('hide');
return;
}
$container.append(data);
$swiper = $container.find('.swiper-container');
if ($swiper.length) {
$swiper.addClass('swiper-cont-' + opt.type);
$swiper.children('.swiper-wrapper').addClass('swiper-wrap-' + opt.type);
$swiper.children('.swiper-pagination').addClass('swiper-pagi-' + opt.type);
initSwiper(opt.type);
}
if (num > 0) {
$newItems = $container.find('.guang-info:gt(' + (num - 1) + ')');
} else {
$newItems = $container.find('.guang-info');
}
setLazyLoadAndMellipsis($newItems);
if (opt.page === 1) {
loading.hideLoadingMask();
$loading.removeClass('hide');// 显示空屏加载时hide的隐藏
window.rePosFooter();// 插入内容后重新计算底部位置
}
opt.page++;
searching = false;
delete opt.isTab;
},
error: function() {
tip.show('网络断开连接了~');
searching = false;
delete opt.isTab;
}
});
}
exports.mySwiper = mySwiper;
exports.initSwiper = initSwiper;
exports.initInfosEvt = initInfosEvt;
exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;
exports.loadMore = loadMore;
... ...
@import "live/index";
@import "student";
@import "market/index";
.receive-coupon-page {
* {
... ...
.container {
width: 100%;
max-width: 640px;
margin: 0 auto;
position: relative;
background: #222;
padding-bottom: 10px;
}
.header {
width: 100%;
height: 82px;
background: resolve("activity/market/header.jpg") no-repeat center center;
background-size: contain;
}
.header {
div {
width: 375px;
line-height: 82px;
font-size: 24px;
color: #fff;
float: right;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
}
.tab {
width: 100%;
height: 310px;
}
.tab {
img {
width: 100%;
height: 100%;
}
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-pagination-bullet {
background: #959799 !important;
width: 14px !important;
height: 14px !important;
margin: 0 9px !important;
}
.swiper-pagination-bullet-active {
background: #fff !important;
}
.floor-top {
width: 100%;
height: 68px;
}
.floor-top {
img {
width: 100%;
height: 100%;
}
}
.floor-ul {
li {
width: 100%;
height: 170px;
position: relative;
margin-bottom: 17px;
}
}
.floor-ul {
li {
img {
width: 100%;
height: 100%;
}
}
}
.floor-ul {
li {
p {
height: 45px;
line-height: 45px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
font-size: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
padding: 0 25px;
}
}
}
.floor-c {
background: #fff;
padding: 25px;
position: relative;
}
.floor-c {
img {
width: 100%;
height: 100%;
}
}
.floor-c {
p {
height: 45px;
line-height: 45px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
font-size: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
margin: 0 40px 25px;
}
}
.down {
width: 100%;
height: 265px;
position: relative;
display: block;
}
.down {
img {
width: 100%;
position: absolute;
top: -10px;
left: 0;
right: 0;
}
}
... ...
... ... @@ -24,6 +24,7 @@
@import "discount-list";
@import "left-right";
@import "three-picture";
@import "six-lines-floor";
.mobile-container {
margin-left: auto;
... ...
.six-lines-floor li {
height: 180px;
width: 50%;
float: left;
img {
height: 180px;
width: 100%;
}
}
... ...
@define-mixin relatedTitle {
margin: 0 29px;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72px;
font-size: 30px;
color: #b0b0b0;
text-align: center;
}
.guang-detail-page {
#wrapper {
background: #f0f0f0;
}
#wrapper.ios {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
&.has-head {
top: 90px;
+ .fixed-top {
top: 90px;
}
}
}
.author {
border-bottom: 1px solid #e0e0e0;
background: #fff;
> a {
display: block;
height: 100%;
}
.avatar {
float: left;
margin-top: 20px;
margin-left: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.name {
float: left;
font-size: 28px;
color: #000;
padding: 30px 0;
margin-left: 30px;
}
.intro {
float: left;
font-size: 28px;
color: #b0b0b0;
padding: 30px 0;
margin-left: 30px;
}
}
.post-title {
padding: 16px 0 26px 30px;
background: #fff;
.title {
line-height: 60px;
font-size: 40px;
color: #000;
font-weight: bold;
}
}
.text-block {
padding: 20px 30px;
line-height: 46px;
font-size: 28px;
background: #fff;
color: #444;
word-break: break-word;
word-wrap: break-word;
}
.big-img-block {
padding-bottom: 5px;
background: #fff;
img {
width: 100%;
}
}
.small-img-block {
padding-bottom: 8px;
background: #fff;
img {
float: right;
width: 315px;
height: 420px;
&:first-child {
float: left;
}
}
}
.collocation-block {
background: #fff;
.good-list {
padding-left:15px;
}
}
.thumb-container {
padding-top: 30px;
padding-left: 20px;
background: transparent resolve('guang/thumb-container-bg.png') no-repeat;
background-size: 200% 100%;
&.fixed-top {
position: fixed;
left: 0;
right: 0;
top: 0;
}
&.fixed-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
}
&.absolute {
position: absolute;
left: 0;
right: 0;
}
&.static {
position: static;
}
&.hide {
display: none;
}
}
.clothe-type {
position: absolute;
right: 6px;
bottom: 34px;
width: 20px;
height: 20px;
border-radius: 50%;
&.bag {
background: url("/guang/clothes/bag.png");
background-color: #fff;
background-size: 100%;
}
&.cloth {
background: url("/guang/clothes/cloth.png");
background-color: #fff;
background-size: 100%;
}
&.dress {
background: url("/guang/clothes/dress.png");
background-color: #fff;
background-size: 100%;
}
&.headset {
background: url("/guang/clothes/headset.png");
background-color: #fff;
background-size: 100%;
}
&.lamp {
background: url("/guang/clothes/lamp.png");
background-color: #fff;
background-size: 100%;
}
&.pants {
background: url("/guang/clothes/pants.png");
background-color: #fff;
background-size: 100%;
}
&.shoe {
background: url("/guang/clothes/shoe.png");
background-color: #fff;
background-size: 100%;
}
&.swim-suit {
background: url("/guang/clothes/swim-suit.png");
background-color: #fff;
background-size: 100%;
}
&.under {
background: url("/guang/clothes/under.png");
background-color: #fff;
background-size: 100%;
}
&.watch {
background: url("/guang/clothes/watch.png");
background-color: #fff;
background-size: 100%;
}
}
.thumb {
display: inline-block;
position: relative;
margin-right: 22px;
padding-bottom: 30px;
&:last-child {
margin-right: 0;
}
&.focus .thumb-img {
border-color: #000;
}
}
.thumb-img {
height: 134px;
width: 96px;
border: 1px solid transparent;
}
.related-reco-block {
background: #fff;
padding-left: 15px;
border-top: 1px solid #e0e0e0;
h2 {
margin-left: -15px;
line-height: 104px;
font-size: 30px;
color: #b0b0b0;
text-align: center;
}
.one-good {
padding-left: 15px;
padding-right: 30px;
margin-bottom: 20px;
.thumb {
float: left;
height: 134px;
width: 96px;
}
.content-container {
padding-left: 120px;
height: 134px;
line-height: 1;
font-size: 24px;
> p {
height: 50%;
line-height: 94px;
}
span {
display: inline-block;
line-height: 24px;
}
.price {
line-height: 47px;
}
}
.sale-price {
color: #d62927;
line-height: 1.5;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin-left: 5px;
color: #b0b0b0;
text-decoration: line-through;
line-height: 1.5;
}
.check-detail {
display: inline-block;
color: #000;
border: 1px solid;
border-radius: 2PX;
float: right;
padding: 0 5px;
line-height: 1.5;
}
}
}
.link-block {
display: block;
height: 80px;
line-height: 80px;
padding: 0 30px;
font-size: 28px;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.iconfont {
float: right;
color: #ccc;
}
}
.related-brand {
margin-top: 30px;
h2 {
@mixin relatedTitle;
}
.brand-list {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 30px 0 30px;
background: #fff;
}
.brand {
float: left;
width: 158px;
height: 128px;
border-right: 1px solid #e0e0e0;
margin-bottom: 10px;
a {
display: block;
}
&:nth-child(4n) {
border-right: none;
}
}
.brand-logo {
display: table-cell;
width: 158px;
height: 94px;
vertical-align: middle;
img {
display: block;
max-width: 158px;
max-height: 94px;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
margin: 10px 0 0 0;
line-height: 24px;
font-size: 18px;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.related-tag {
position: relative;
padding-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.tag-bg {
position: absolute;
height: 40px;
width: 40px;
background: resolve('guang/tag.png') no-repeat;
background-size: 100% 100%;
top: 35px;
left: 20px;
}
.tag-list {
margin-left: 50px;
}
li {
float: left;
margin-top: 31px;
margin-left: 31px;
}
a {
height: 50px;
line-height: 50px;
font-size: 30px;
color: #000;
text-decoration: underline;
white-space: nowrap;
}
}
.related-info {
margin-top: 30px;
h2 {
@mixin relatedTitle;
}
.info-list {
background: #fff;
padding-bottom: 30px;
border-top: 1px solid #e0e0e0;
}
li {
padding-top: 30px;
margin-bottom: 10px;
a {
display: block;
}
img {
float: left;
margin-left: 30px;
width: 182px;
height: 114px;
&.square {
height: 182px;
}
}
}
.title, .publish-time {
float: left;
width: 360px;
margin-left: 30px;
line-height: 40px;
color: #444;
font-size: 28px;
}
.publish-time {
font-size: 18px;
margin-top: 0;
color: #b0b0b0;
.iconfont {
font-size: 18px;
}
}
}
}
... ...
@import "star/index";
@import "plusstar/index";
@import "tvls";
@import "info";
@import "plus-star";
@import "info-list";
@import "detail";
@import "star-classroom";
... ...
.guang-list-page {
.editor-header {
margin-bottom: 30px;
padding-top: 36px;
padding-bottom: 40px;
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.avatar {
float: left;
margin-left: 30px;
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
}
.text {
float: left;
margin-left: 32px;
width: 475px;
.name {
font-size: 32px;
line-height: 40px;
}
.info {
margin-top: 6px;
color: #bdbdbf;
font-size: 24px;
line-height: 32px;
}
}
.swiper-container {
width: 100%;
height: 310px;
img {
height: 100%;
width: 100%;
}
.swiper-pagination {
bottom: 0;
left: 0;
width: 100%;
}
.swiper-pagination-bullet-active {
background: #fff;
}
}
.guang-nav {
background-color: #fff;
overflow: hidden;
height: 80px;
}
.guang-nav-item {
float: left;
color: #ccc;
font-size: 28px;
padding: 0 22px;
line-height: 80px;
&.focus {
color: #000;
}
}
.bytouch{
background:#eee;
}
.info-list-container {
overflow-x: hidden;
background: #f0f0f0;
}
.info-list.hide {
display: none;
}
}
... ...
.guang-info {
margin-bottom: 30px;
padding: 0 0 24px 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.info-author {
display: block;
width: 100%;
.avatar {
float: left;
margin-top: 20px;
width: 50px;
height: 50px;
margin-left: 30px;
border-radius: 50%;
}
.name {
float: left;
margin-left: 30px;
padding: 30px 0;
font-size: 28px;
color: #000;
}
}
&:last-child {
margin-bottom: 0;
}
.info-img {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
}
}
.info-match {
position: absolute;
top: 0;
left: 0;
width: 130px;
height: 50px;
line-height: 50px;
font-size: 28px;
color: #fff;
background: #000;
text-align: center;
text-decoration: none;
z-index: 1;
}
.info-tag {
position: absolute;
top: 0;
left: 105px;
height: 50px;
width: 50px;
&.collocation {
background-image: url('/guang/info/collocation.png');
}
&.fashion-good {
background-image: url('/guang/info/fashion-good.png');
}
&.fashion-man {
background-image: url('/guang/info/fashion-man.png');
}
&.tip, &.special-topic {
background-image: url('/guang/info/tip.png');
}
&.topic {
background-image: url('/guang/info/topic.png');
}
}
.info-deps {
margin: 32px 0 0 0;
padding: 0 40px 0 30px;
.info-title-container {
text-decoration: none;
color: #000;
}
.info-title{
line-height: 44px;
color: #000;
font-size: 40px;
font-weight:bold;
}
.info-text {
margin: 16px 0 0 0;
line-height: 46px;
font-size: 28px;
color: #444;
}
.time-view-like-share {
margin-top: 16px;
}
}
}
... ...
.ps-list-page {
background-color: #f0f0f0;
.nav-tab, .ps-content {
width: 100%;
}
.nav-tab {
height: 60px;
padding: 10px 0;
background-color: #fff;
}
.star-nav, .plus-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: 60px;
line-height: 60px;
font-size: 16PX;
text-align: center;
color: #ccc;
&.focus {
color: #000;
}
}
.bytouch{
background:#eee;
}
.star-nav {
border-right: 1px solid #ccc;
}
.plus-star-row {
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
> a {
display: block;
height: 310px;
> img {
width: 100%;
height: 100%;
}
}
}
.content.hide {
display: none;
}
.swiper-container {
height: 310px;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.brand-deps {
height: 40PX;
line-height: 40PX;
padding-left: 10PX;
font-size: 14PX;
background: #fff;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.ps-detail-page {
background-color: #f0f0f0;
.ps-block {
margin-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
background-color: #fff;
&.header, &.related-infos {
border-top: none;
}
&.related-infos {
margin-bottom: 0;
background-color: #f0f0f0;
}
}
.header {
position: relative;
.banner {
width: 100%;
height: 310px;
}
.logo {
position: absolute;
border: 1px solid #b5b5b5;
height: 168px;
width: 168px;
top: 226px;
left: 50px;
}
.header-content {
padding: 0 30px;
}
.name-islike-container {
padding-left: 248px;
margin-top: 24px;
font-size: 34px;
}
.name {
color: #000;
height: 41px;
width: 295px;
}
.brand-islike {
position: relative;
float: right;
color: #b0b0b0;
height: 1.5rem;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
top: -0.25rem;
left: -0.25rem;
&.like {
color: #f00;
}
}
}
.intro {
margin-top: 49px;
font-size: 24px;
color: #444;
line-height: 150%;
}
.more-intro {
padding: 30px 0;
font-size: 28px;
line-height: 104%;
color: #bbb;
float: right;
.icon {
display: inline-block;
height: 100%;
width: 40px;
transition: transform .1s ease-in;
}
&.spread .icon {
transform: rotate(-180deg);
}
}
.new-arrival {
padding-left: 0 30px;
.new-arrival-content {
padding: 0 0 20px 0;
width: 614px;
margin: 0 auto;
}
.more-goods-container {
height: 90px;
padding: 0 30px;
border-top: 1px solid #e0e0e0;
color: #000;
}
.floor-header-more {
border-top: none;
line-height: 40px;
height: auto;
a {
width: 100%;
text-align: right;
}
}
.mg-text {
height: 100%;
line-height: 90px;
color: #000;
text-decoration: none;
display: block;
font-size: 28px;
}
.more-prods {
float: right;
color: #b0b0b0;
}
.new-arrival-header .more-prods {
margin-right: 30px;
margin-top: 10px;
}
}
.new-arrival-header {
padding-left: 222px;
padding-top: 33px;
.header-text {
font-size: 28px;
color: #000;
line-height: 122%;
font-weight: bold;
}
}
.related-info-title {
margin: 0 29px;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72px;
font-size: 30px;
color: #b0b0b0;
text-align: center;
background-color: #fff;
}
.related-infos-container .guang-info:first-child {
margin-top: 0;
}
}
... ...
.yoho-header .nav-title {
font-weight: normal;
}
.star-class-body {
background: #333;
width: 100%;
font: 12px/1.5 Arial,'黑体';
float: left;
}
.star-classroom {
background: #333;
img {
max-width: 100%;
display: block;
border: 0;
margin: 0 auto;
}
a {
text-decoration: none;
outline: none;
color: #000;
&:link,
&:visited,
&:hover,
&:actived {
color: #000;
}
}
*:focus {
outline: none;
}
.font-bold {
font-weight: bold;
}
.classroom-mask {
background-color: rgba(0,0,0,.5);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
display: none;
}
.head-tab {
width: 100%;
height: 88px;
background: #000;
li {
width: 33.3%;
text-align: center;
float: left;
line-height: 88px;
font-size: 30px;
a {
color: #b0b0b0;
display: inline-block;
}
&.cur a{
color: #fff;
}
}
}
.banner-top {
width: 100%;
height: 310px;
margin-top: 30px;
position: relative;
.banner-swiper {
width: 100%;
height: 310px;
overflow: hidden;
position: relative;
ul {
position: relative;
height: 310px;
li {
float: left;
width: 100%;
height: 310px;
}
img {
width: 100%;
height: 100%;
}
}
}
.swiper-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
z-index: 1;
.pagination-inner {
display: inline-block;
}
span {
display: inline-block;
width: 14px;
height: 14px;
background: #fff;
opacity: 0.5;
margin: 0 10px;
border-radius: 50%;
}
.swiper-pagination-bullet-active {
background: #fff;
opacity: 1;
}
}
}
.home-floor-sign {
width: 100%;
height: 220px;
margin-top: 30px;
background: #000;
.nav-left {
width: 102px;
margin: 30px 0 0 30px;
text-align: center;
float: left;
.user-name {
font-size: 24px;
color: #fff;
margin-top: 30px;
white-space: nowrap;
}
}
.nav-main {
width: 252px;
height: 90px;
float: left;
background-image: resolve("guang/star-classroom/user_info_bg.png");
background-repeat: no-repeat;
background-size: contain;
margin:36px 0 0 10px;
p {
color: #fff;
line-height: 46px;
font-size: 24px;
margin-left: 30px;
white-space: nowrap;
}
}
.nav-right {
width: 195px;
text-align: center;
float: right;
.wyf-img {
width: 119px;
height: 108px;
margin-top: 30px;
background-image: resolve("guang/star-classroom/home-wyf.png");
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.add-intimacy {
width: 131px;
height: 52px;
background-image: resolve("guang/star-classroom/add_intimacy_bg.png");
background-repeat: no-repeat;
background-size: contain;
color: #fff;
font-size: 22px;
display: inline-block;
white-space: nowrap;
line-height: 66px;
margin-left: 12px;
}
}
.user-head {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #e0e0e0;
background-image: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
}
}
.floor-header-more {
width: 100%;
height: 88px;
background: #000;
position: relative;
margin-top: 30px;
border-top: 1px solid #000;
h2 {
color: #fff;
font-size: 34px;
line-height: 88px;
text-align: center;
}
.more-btn {
width: 64px;
height: 96px;
line-height: 86px;
position: absolute;
right: 20px;
top: 0;
color: #b0b0b0;
font-size: 50px;
}
}
.home-floor-subject {
.subject-banner {
width: 100%;
height: 310px;
}
}
.subject-video-area {
width: 100%;
height: 310px;
margin-top: 30px;
background: #000;
#subject-video {
width: 100%;
height: 310px;
}
}
.home-floor-collocation {
background: #000;
padding-bottom: 60px;
.collocation-big-img {
width: 100%;
height: 277px;
padding: 0 14px;
box-sizing: border-box;
li {
width: 276px;
height: 277px;
margin: 0 15px;
float: left;
}
img {
height: 100%;
}
}
.collocation-img {
width: 100%;
height: 139px;
margin-top: 30px;
position: relative;
.collocation-swiper {
width: 100%;
height: 139px;
overflow: hidden;
position: relative;
}
ul {
position: relative;
height: 139px;
}
li {
float: left;
width: 229px;
height: 139px;
margin-left: 30px;
}
img {
width: 100%;
height: 100%;
}
}
}
.pop-intimacy {
width: 580px;
height: 920px;
background: #fff;
border-radius: 10px;
position: fixed;
top:20px;
left: 30px;
z-index: -1;
display: none;
.intimacy-head {
text-align: center;
color: #444;
height: 140px;
padding-top: 20px;
box-sizing: border-box;
position: relative;
.pop-close {
width: 25px;
height: 25px;
background-image: resolve("guang/star-classroom/pop-close.png");
background-repeat: no-repeat;
background-size: contain;
position: absolute;
right: 20px;
top: 24px;
}
h1 {
font-size: 56px;
font-weight: bold;
line-height: 40px;
}
h4 {
font-size: 24px;
}
}
.my-intimacy {
font-size: 24px;
span {
min-width: 10px;
height: 30px;
line-height: 30px;
border-radius: 30px;
font-size: 20px;
color: #fff;
padding: 0 10px;
margin-left: 14px;
background-color: #444;
}
}
.increased {
font-size: 24px;
display: none;
span {
color: red;
}
}
.calendar {
width: 100%;
float: left;
}
.week {
width: 100%;
height: 38px;
background: #aeaeae;
padding: 0 23px;
box-sizing: border-box;
h3 {
width: 76px;
text-align: center;
font-size: 24px;
color: #fff;
float: left;
line-height: 38px;
}
}
.day-item {
float: left;
width: 100%;
padding: 5px 23px;
box-sizing: border-box;
.item {
width: 76px;
color: #444;
float: left;
text-align: center;
cursor: pointer;
margin: 5px 0 0 0;
height: 56px;
line-height: 56px;
font-size: 28px;
}
.last-item {
color: #D2D2D2;
}
.sign-item {
background-image: resolve("guang/star-classroom/sign-circle.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
.fan-charts {
width: 100%;
height: 88px;
border-top: 1px solid #d5d5d5;
text-align: center;
position: relative;
float: left;
h2 {
font-size: 28px;
color: #444;
line-height: 88px;
}
.arrow {
width: 88px;
height: 88px;
position: absolute;
top: 0;
right: 0;
color: #b0b0b0;
line-height: 88px;
}
}
}
.fan-charts-cont {
width: 100%;
line-height: 88px;
float: left;
li {
width: 100%;
height: 88px;
border-top: 1px solid #d5d5d5;
position: relative;
padding: 0 25px;
box-sizing: border-box;
}
.rank-ico {
width: 52px;
height: 39px;
border-radius: 0;
background-image: resolve("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 50px;
font-weight: bold;
position: relative;
top: 25px;
}
.rank-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
top: 15px;
margin-left: 20px;
background-image: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
display: block;
}
.fans-name {
margin-left: 24px;
font-size: 24px;
color: #444;
width: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 88px;
}
.fans-intimacy {
width: 150px;
float: right;
font-size: 20px;
color: #444;
span {
font-size: 24px;
color: #d0021b;
margin-left: 5px;
}
}
li > * {
float: left;
}
}
.things-article {
width: 100%;
float: left;
}
.things-article > li {
width: 100%;
float: left;
padding: 0 0 30px 30px;
box-sizing: border-box;
background: #000;
.author-info {
width: 100%;
padding-top: 30px;
float: left;
border-top:1px solid #b0b0b0;
img {
width: 70px;
height: 70px;
border-radius: 50%;
float: left;
}
}
.author-nav {
float: left;
margin-left: 20px;
overflow: hidden;
h2 {
font-size: 28px;
color: #fff;
}
}
.article-count {
font-size: 24px;
color: #b0b0b0;
span {
margin-right:22px;
}
.see-ico {
width: 31px;
height: 24px;
padding-left: 40px;
}
}
.artice-cont {
width: 100%;
margin-top: 30px;
float: left;
p {
width: 100%;
height: 180px;
font-size: 28px;
line-height: 46px;
padding-right: 30px;
color: #fff;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
.artice-imgs {
width: 100%;
margin-top: 30px;
float: left;
}
.artice-imgs > li {
float: left;
width: 190px;
height: 190px;
margin-right: 5px;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
}
.artice-zan {
width: 100%;
border-top: 1px solid #b0b0b0;
margin-top: 27px;
float: left;
padding-top: 20px;
.iconfont {
float: left;
width: 34px;
height: 34px;
line-height: 34px;
display: inline-block;
color: #b0b0b0;
font-size: 34px;
text-align: center;
margin: 9px 53px 0 14px;
outline: none;
}
.like {
color: #D62927;
}
ul {
float: left;
width: 420px;
height: 50px;
overflow: hidden;
}
li {
float: left;
margin: 0 10px;
width: 50px;
height: 50px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.zan-more {
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 10px;
background: #f0f0f0;
color: #acb1b7;
font-size: 24px;
text-align: center;
line-height: 50px;
/*display: none;*/
}
}
.subject-list {
width: 100%;
height: auto;
overflow: hidden;
li {
width: 100%;
float: left;
background: #000;
margin-top: 30px;
img {
width: 100%;
}
p {
width: 100%;
height: 88px;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 34px;
font-size: 34px;
line-height: 88px;
}
a {
color: #fff;
}
}
}
.collocation-list {
width: 100%;
float: left;
li {
float: left;
width: 100%;
margin-top: 30px;
background: #000;
.cont-area {
width: 100%;
box-sizing: border-box;
padding: 30px;
}
.cont-txt {
font-size: 28px;
line-height: 46px;
color: #b0b0b0;
margin-top: 10px;
}
img {
width: 100%;
}
.title {
font-size: 40px;
line-height: 48px;
color: #fff;
width: 100%;
}
}
}
.count-area {
position: relative;
width: 100%;
height: 32px;
span {
font-size: 24px;
color: #b0b0b0;
height: 32px;
line-height: 32px;
i {
display: inline-block;
margin-right: 5px;
font-size: 24px;
}
}
.time {
float: left;
}
.see {
float: left;
margin-left: 20px;
}
.time-ico {
width: 24px;
height: 24px;
}
.see-ico {
width: 31px;
height: 24px;
}
.collection {
position: absolute;
right: 122px;
}
.collected-ico {
width: 34px;
height: 32px;
vertical-align: text-bottom;
}
.collected {
color: #D62927;
}
.forward {
width: 40px;
height: 28px;
position: absolute;
right: 23px;
margin-left: 45px;
font-size: 24px;
color: #b0b0b0;
height: 32px;
line-height: 32px;
}
}
.things-list {
.things-article > li {
margin-top: 30px;
.author-info {
border-top: none;
}
}
}
.check-in {
background: #f0f0f0;
.check-in-header {
width: 100%;
height: 283px;
background-image: resolve("guang/star-classroom/checkIn-bg.jpg");
background-repeat: no-repeat;
background-size: contain;
}
.head-cont {
text-align: center;
padding-top: 30px;
height: 195px;
box-sizing: border-box;
.user-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
border:4px solid;
border-color: rgba(255,255,255,.6);
background-image: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-origin: border-box;
background-size: contain;
display: inline-block;
}
.user-name {
color: #fff;
font-size: 24px;
font-weight: bold;
margin-top: 7px;
}
}
.count-area {
width: 100%;
float: left;
}
.count-nav {
width: 319px;
float: left;
margin-top: 12px;
p {
width: 100%;
text-align: center;
color: #fff;
line-height: 32px;
font-size: 22px;
}
}
.line {
width: 2px;
height: 46px;
float: left;
margin-top: 26px;
box-sizing: border-box;
border-left: 1px solid #fff;
}
.ranking-area {
width: 100%;
background: #fff;
border-top: 1px solid #e0e0e0;
margin-top: 30px;
padding-left: 30px;
box-sizing: border-box;
li {
width: 100%;
height: 120px;
padding-top: 20px;
box-sizing: border-box;
border-bottom: 1px solid #e0e0e0;
}
.rank-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-image: resolve("me/index/user-avatar.png");
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.ranking-mid {
float: left;
margin-left: 20px;
}
.rank-ico {
min-width: 18px;
height: 38px;
border-radius: 38px;
background: #444;
display: inline-block;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 24px;
font-weight: bold;
padding: 0 10px;
}
.rank-name {
font-size: 24px;
color: #444;
margin-top: 5px;
width: 260px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 38px;
line-height: 38px;
}
.ranking-rg {
font-size: 20px;
color: #444;
float: right;
margin:20px 30px 0 0;
}
.intimacy {
margin-left: 10px;
font-size: 36px;
color: #b0b0b0;
}
}
.high-light {
.rank-ico {
width: 52px;
height: 39px;
line-height: 50px;
border-radius: 0;
background-image: resolve("guang/star-classroom/king-ico.png");
background-color: #fff;
background-repeat: no-repeat;
background-size: contain;
padding: 0;
}
.intimacy {
color: #d0021b;
}
}
}
}
@media screen and (max-height: 480px){
.star-classroom {
.pop-intimacy {
height: 796px;
.day-item .item {
height: 50px;
line-height: 50px;
margin-top: 0;
}
.fan-charts {
height: 76px;
h2 {
line-height: 76px;
}
.arrow {
height: 76px;
line-height: 76px;
}
}
.intimacy-head h1{
font-size: 50px;
}
}
.fan-charts-cont {
line-height: 76px;
.rank-ico {
top: 17px;
}
.rank-avatar {
top: 7px;
}
.fans-name {
height: 76px;
}
li {
height: 76px;
}
}
}
}
\ No newline at end of file
... ...
.time-view-like-share {
color: #b0b0b0;
line-height: 38px;
height: 38px;
font-size: 24px;
.iconfont {
vertical-align: 9%;
margin-right: 4px;
font-size: 24px;
}
.like-share-container {
display: inline-block;
float: right;
> * {
float: left;
}
.iconfont {
position: relative;
height: 60px;
line-height: 60px;
display: inline-block;
color: #b0b0b0;
width: 60px;
top: -14px;
font-size: 34px;
text-align: center;
margin-right: 0;
outline: none;
}
.share-btn {
margin-left: 20px;
}
.like-btn.like {
color: #444;
}
.collect-btn {
margin-left: 20px;
&.collected {
color: #D62927;
}
}
}
}
... ...
const url = require('url');
const config = require('../config/common');
const assetUrl = config.assetUrl;
module.exports = {
imgSrc: function(imgSrc) {
return url.resolve(assetUrl, imgSrc);
}
};
... ...