fe / yohobuy-node · Commits

Go to a project

Authored by wenjiekong
Commit cfc758b36cccdce243d73fc72c3e9a39477ca0fa 1 parent 66774c7e

students page

Inline Side-by-side
Showing 19 changed files with 478 additions and 81 deletions
... ... @@ -26,9 +26,19 @@ exports.index = (req, res) => {
},
footerTop: true,
mainBanner: {
list: [{src: 'http://img11.static.yhbimg.com/yhb-img01/2016/06/01/20/01a88a4e626a954eb5ec0302a0470e0b3f.jpg?imageView2/2/w/1920/h/450/q/70', url: 'http://www.yohobuy.com'}]
list: [{src: 'http://img11.static.yhbimg.com/yhb-img01/2016/06/01/20/' +
'01a88a4e626a954eb5ec0302a0470e0b3f.jpg?imageView2/2/w/1920/h/450/q/70', url: 'http://www.yohobuy.com'}]
},
sortItem: [{title: '学生权益介绍'}, {title: '我要验证身份'}, {title: '学生热门单品'}, {title: '更多活动推荐'}],
sortItem: [{title: '学生权益介绍', href: 'stu-rights'}, {title: '我要验证身份', href: 'stu-identity'},
{title: '学生热门单品', href: 'stu-good'}, {title: '更多活动推荐', href: 'stu-activity'}],
stuRights: [{imgUrl: '//img12.static.yhbimg.com/goodsimg/2015/12/02/10/' +
'0256adbb54c5a9b657485b972cc94ceb99.jpg?imageView/1/w/235/h/314', info: '1、原价商品享9折优惠'},
{imgUrl: '//img12.static.yhbimg.com/goodsimg/2015/12/02/10/' +
'0256adbb54c5a9b657485b972cc94ceb99.jpg?imageView/1/w/235/h/314', info: '1、原价商品享9折优惠'},
{imgUrl: '//img12.static.yhbimg.com/goodsimg/2015/12/02/10/' +
'0256adbb54c5a9b657485b972cc94ceb99.jpg?imageView/1/w/235/h/314', info: '1、原价商品享9折优惠'},
{imgUrl: '//img12.static.yhbimg.com/goodsimg/2015/12/02/10/' +
'0256adbb54c5a9b657485b972cc94ceb99.jpg?imageView/1/w/235/h/314', info: '1、原价商品享9折优惠'}],
proItem: [
{url: '',
productName: 'Dickies 炫色小脚裤',
... ... @@ -64,7 +74,29 @@ exports.index = (req, res) => {
productName: 'Dickies 炫色小脚裤',
marketPrice: {round: 12.3},
salesPrice: {round: 12.3},
forStu: true}]
forStu: true}],
couponItem: [
{
url: 'http://www.yohobuy.com/coupon/index?contentCode=bb7268bd46dd46d304c2917309814681',
imgUrl: '//img10.static.yhbimg.com/yhb-img01/2016/07/29/17/01cfa4035101b5c8f46efd9c0fbf8ef0c8.jpg',
dataId: '优惠券'
},
{
url: 'http://www.yohobuy.com/coupon/index?contentCode=bb7268bd46dd46d304c2917309814681',
imgUrl: '//img10.static.yhbimg.com/yhb-img01/2016/07/29/17/01cfa4035101b5c8f46efd9c0fbf8ef0c8.jpg',
dataId: '优惠券'
},
{
url: 'http://www.yohobuy.com/coupon/index?contentCode=bb7268bd46dd46d304c2917309814681',
imgUrl: '//img10.static.yhbimg.com/yhb-img01/2016/07/29/17/01cfa4035101b5c8f46efd9c0fbf8ef0c8.jpg',
dataId: '优惠券'
},
{
url: 'http://www.yohobuy.com/coupon/index?contentCode=bb7268bd46dd46d304c2917309814681',
imgUrl: '//img10.static.yhbimg.com/yhb-img01/2016/07/29/17/01cfa4035101b5c8f46efd9c0fbf8ef0c8.jpg',
dataId: '优惠券'
}
]
};
res.render('students/index', responseData);
... ...
... ... @@ -8,18 +8,18 @@
{{! 分类导航}}
<div class="sort-nav clearfix" urlLocation="">
{{#sortItem}}
<a class="" urlLocation=''>{{title}}</a>
<a class="sort-item {{#if @first}}first active{{/if}} {{#if @last}}last{{/if}}" href='#{{href}}'>{{title}}</a>
{{/sortItem}}
</div>
{{! 学生权益}}
<div class="stu-box">
<div class="floor-header clearfix">
<h2 class="floor-title">学生权益</h2>
<a name="stu-rights">
<h2 class="floor-title">学生权益</h2>
</a>
{{#if true}}
<span class="floor-more">
<a target="_blank" href="http://list.yohobuy.com/new?gender=1,3&amp;order=s_t_desc">更多细则</a>
</span>
<span id="rights-dia" class="floor-more">更多细则</span>
{{/if}}
</div>
<div class="commodity-list clearfix">
... ... @@ -30,11 +30,11 @@
{{! 身份验证}}
<div class="stu-box ">
<div class="floor-header clearfix">
<h2 class="floor-title">身份验证</h2>
<a name="stu-identity">
<h2 class="floor-title">身份验证</h2>
</a>
{{#if false}}
<span class="floor-more">
<a target="_blank" href="http://list.yohobuy.com/new?gender=1,3&amp;order=s_t_desc">更多细则</a>
</span>
<span class="floor-more">更多细则</span>
{{/if}}
</div>
<div class="commodity-list clearfix">
... ... @@ -45,22 +45,28 @@
{{! 优惠券}}
<div class="stu-box">
<div class="floor-header clearfix">
<h2 class="floor-title">优惠券</h2>
{{#if false}}
<span class="floor-more">
<a target="_blank" href="http://list.yohobuy.com/new?gender=1,3&amp;order=s_t_desc">MORE</a>
<a name="stu-coupon">
<h2 class="floor-title">优惠券</h2>
</a>
{{#if true}}
<span id="coupon-dia" class="floor-more">
<a href="http://www.yohobuy.com/coupon/index?contentCode=bb7268bd46dd46d304c2917309814681">MORE</a>
</span>
{{/if}}
</div>
<div class="commodity-list clearfix">
<div class="activity-item"></div>
{{#each couponItem}}
{{> product/coupon}}
{{/each}}
</div>
</div>
{{! 热门单品}}
<div class="stu-box">
<div class="floor-header clearfix">
<h2 class="floor-title">热门单品</h2>
<a name="stu-good">
<h2 class="floor-title">热门单品</h2>
</a>
{{#if true}}
<span class="floor-more">
<a target="_blank" href="http://list.yohobuy.com/new?gender=1,3&amp;order=s_t_desc">MORE</a>
... ... @@ -71,14 +77,15 @@
{{#each proItem}}
{{> product/good}}
{{/each}}
</div>
</div>
{{! 活动推荐}}
<div class="stu-box">
<div class="floor-header clearfix">
<h2 class="floor-title">活动推荐</h2>
<a name="stu-activity">
<h2 class="floor-title">活动推荐</h2>
</a>
{{#if false}}
<span class="floor-more">
<a target="_blank" href="http://list.yohobuy.com/new?gender=1,3&amp;order=s_t_desc">更多细则</a>
... ... @@ -86,10 +93,9 @@
{{/if}}
</div>
<div class="commodity-list clearfix">
<div class="activity-item"></div>
<div class="activity-item"></div>
<div class="activity-item"></div>
<div class="activity-item"></div>
<img class="activity-item" src="//img11.static.yhbimg.com/yhb-img01/2016/06/01/20/01a88a4e626a954eb5ec0302a0470e0b3f.jpg?imageView2/2/w/1920/h/450/q/70/q/70" />
<img class="activity-item" src="//img11.static.yhbimg.com/yhb-img01/2016/06/01/20/01a88a4e626a954eb5ec0302a0470e0b3f.jpg?imageView2/2/w/1920/h/450/q/70/q/70" />
<img class="activity-item" src="//img11.static.yhbimg.com/yhb-img01/2016/06/01/20/01a88a4e626a954eb5ec0302a0470e0b3f.jpg?imageView2/2/w/1920/h/450/q/70/q/70" />
</div>
</div>
</div>
... ...
... ... @@ -33,6 +33,5 @@
</div>
</div>
</div>
{{/if}}
{{/topBanner}}
\ No newline at end of file
... ...
... ... @@ -14,28 +14,50 @@
</div>
<p class="stu-ident">学生已认证</p>
</div>
<div class="identity-form">
<form>
<div class="identity-form-wrap">
<form class="identity-form">
<div class="form-group">
<label><span class="star">*</span>真实姓名：</label><input class="ident-inp" type="text" name="">
<label><span class="star">*</span>真实姓名：</label>
<input class="ident-inp" type="text" name="" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label><span class="star">*</span>身份证号：</label><input class="ident-inp" type="text" name="">
<label><span class="star">*</span>身份证号：</label>
<input class="ident-inp" type="text" name="" placeholder="请输入您的身份证号">
</div>
<div class="form-group">
<label><span class="star">*</span>学校地区：</label><input class="ident-inp" type="text" name="">
<div class="form-group select-group">
<label><span class="star">*</span>学校地区：</label>
<input class="ident-inp" type="text" name="">
<div class="ident-select-wrap">
<div id="stu-province" class="select-value" >请选择省份</div>
<ul class="select-ul select-more-line clearfix"></ul>
</div>
</div>
<div class="form-group">
<label><span class="star">*</span>学校名称：</label><input class="ident-inp" type="text" name="">
<div class="form-group select-group">
<label><span class="star">*</span>学校名称：</label>
<input class="ident-inp long-inp" type="text" name="">
<div class="ident-select-wrap long-sel" >
<div id="stu-school" class="select-value">请选择您所在学校</div>
<ul class="select-ul select-one-line"></ul>
</div>
</div>
<div class="form-group">
<label><span class="star">*</span>学历程度：</label><input class="ident-inp" type="text" name="">
<div class="form-group select-group">
<label><span class="star">*</span>学历程度：</label>
<input class="ident-inp long-inp" type="text" name="">
<div class="ident-select-wrap long-sel">
<div id="stu-edu" class="select-value">请选择您的学历</div>
<ul class="select-ul select-one-line"></ul>
</div>
</div>
<div class="form-group">
<label><span class="star">*</span>入学年份：</label><input class="ident-inp" type="text" name="">
<div class="form-group select-group">
<label><span class="star">*</span>入学年份：</label>
<input class="ident-inp " type="text" name="">
<div class="ident-select-wrap long-sel">
<div id="stu-entrance-year" class="select-value">请选择您的入学年份</div>
<ul class="select-ul select-one-line"></ul>
</div>
</div>
<div class="form-group agreen-group">
<input type="radio" name=""><span>同意<a href="">Yoho!有货学生认证协议</a></span>
<input type="checkbox" name=""><span>同意<a href="">Yoho!有货学生认证协议</a></span>
</div>
<div class="form-group">
<div class="validate-btn">立即验证</div>
... ...
<div class="stu-rights clearfix">
{{#stuRights}}
<div class="stu-rights-item">
<img class="" src="">
<img class="" src="{{imgUrl}}">
</img>
<p>1、指定新品享9折优惠</p>
</div>
<div class="stu-rights-item">
<img class="" src="">
</img>
<p>1、指定新品享9折优惠</p>
</div>
<div class="stu-rights-item">
<img class="" src="">
</img>
<p>1、指定新品享9折优惠</p>
</div>
<div class="stu-rights-item">
<img class="" src="">
</img>
<p>1、指定新品享9折优惠</p>
<p>{{info}}</p>
</div>
{{/stuRights}}
</div>
\ No newline at end of file
... ...
<div class="coupon">
<a class="enable" href="{{url}}" target="_blank" data-id="{{dataId}}">
<img src="{{imgUrl}}">
<div class="info">
<div class="normal">
<p>点击</p>
<p>领取</p>
</div>
</div>
</a>
</div>
\ No newline at end of file
... ...

49.7 KB | W: | H:

443 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
var $ = require('yoho-jquery');
var Dialog = require('../common/dialog').Dialog;
var $sortItem = $('.sort-item'),
$stuProv = $('#stu-province'),
$rightDia = $('#rights-dia'),
$couponDia = $('#coupon-dia');
function createStuDialog(cont) {
var opt = {
className: 'stu-dialog',
content: cont
};
var myDialog = new Dialog(opt);
myDialog.show();
}
$sortItem.on('click', function() {
$(this).siblings('.active').removeClass('active');
$(this).addClass('active');
});
$stuProv.on('click', function() {
var $ul = $(this).next();
$ul.addClass('active');
$ul.empty();
$ul.append('<li><a>北京</a></li><li><a>北京</a></li><li><a>北京</a></li><li><a>北京</a></li>');
});
$rightDia.on('click', function() {
var cont = '<h3 class="dia-title">认证协议</h3>' +
'<p>(1) 全日制大学生及硕士博士研究生；</p>' +
'<p>(2) 学校在可选的范围内，有部分学校可能暂未收录，后期尽快增加；</p>' +
'<p>(3) 每个学号只能认证一个账户；</p>';
createStuDialog(cont);
});
$couponDia.on('click', function() {
var cont = '<h3 class="dia-title">特权详细说明</h3>' +
'<p>(1) 学生购买原价商品，可享受9折优惠，与vip折扣不可同时享受，但取低；</p>' +
'<p>(2) 学生购物每1元可赠送1个有货币；</p>' +
'<p>(3) 学生所在学校购物金额当月累计最高，可获得3个免单名额，每月抽奖；</p>' +
'<p>(4) 不定期学生专享活动；</p>';
createStuDialog(cont);
});
... ...
.yoho-dialog {
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
min-height: 130px;
min-width: 350px;
background: #f8f8f8;
z-index: 1001;
border: 5px solid rgba(0,0,0,.38);
.close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.content {
text-align: center;
}
.btns {
text-align: center;
}
.alert-sure{
background: #000;
color: #fff;
}
.confirm-sure{
background: #000;
color: #fff;
}
.btn {
display: inline-block;
width: 56px;
height: 26px;
line-height: 26px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
margin-left: 10px;
&:first-child {
margin-left: 0;
}
}
&.alert-dialog .content,
&.confirm-dialog .content {
width: 350px;
height: auto;
min-height: 90px;
overflow: hidden;
line-height: 20px;
position: relative;
padding-top: 40px;
padding-bottom: 20px;
p{
position: absolute;
left: 0;
bottom: 25px;
width: 100%;
color: #444;
line-height: 25px;
}
div{
position: absolute;
top: 0;
left: 100px;
padding-top: 30px;
font-size: 22px;
font-weight: bold;
width: 150px;
height: 30px;
line-height: 30px;
margin: 0 auto;
span{
background: url(/cart/del.png);
float: left;
width: 27px;
height: 30px;
}
}
}
&.subcontent-dialog {
padding: 30px 0px 30px 0px;
.content {
font-weight: bold;
margin: 0px auto 30px auto;
}
.sub-content {
text-align: center;
font-size: 12px;
color: #555;
margin-left: 5px;
margin-bottom: 5px;
}
.btn {
margin-top: 25px;
width: 100px;
font-size: 13px;
margin-left: 0;
margin-right: 0;
&.black {
background-color: #000;
color: #fff;
}
}
}
}
... ...
... ... @@ -3,6 +3,7 @@
/* 公共 */
@import "common/index";
@import "plugin/index";
@import "common/dialog";
/* 模块 */
@import "channel/index";
... ...
... ... @@ -2,6 +2,7 @@
position: relative;
height: 362px;
}
.stu-page {
.stu-box {
... ... @@ -23,10 +24,11 @@
}
li {
width: 100%;
height: 100%;
display: block;
position: absolute;
width: 1920px;
height: 361px;
background-size: 100% 100%;
top: 0;
left: 0;
}
... ... @@ -49,6 +51,7 @@
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
... ... @@ -57,13 +60,37 @@
.sort-nav {
margin: 10px 0;
a {
cursor: pointer;
text-align: center;
.sort-item {
float: left;
width: 25%;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
background-image: resolve("students/nav.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sort-item.active {
background-image: resolve("students/nav-active.png");
color: #fff;
}
.sort-item.first {
background-image: resolve("students/nav-first.png");
}
.sort-item.first.active {
background-image: resolve("students/nav-first-active.png");
}
.sort-item.last {
background-image: resolve("students/nav-last.png");
}
.sort-item.last.active {
background-image: resolve("students/nav-last-active.png");
}
}
... ... @@ -72,25 +99,26 @@
padding: 20px 0 20px 20px;
.stu-rights-item {
background-color: #fff;
float: left;
width: 262px;
height: 200px;
margin-right: 20px;
text-align: center;
background-color: #fff;
}
img{
width: 124px;
height: 124px;
margin: 20px 0;
}
.stu-rights-item img {
width: 124px;
height: 124px;
margin: 20px 0;
}
}
.stu-identity {
background-color: #f0f0f0;
.identity-count, .identity-form {
.identity-count,
.identity-form-wrap {
margin: 20px 0 20px 20px;
padding: 10px;
height: 300px;
... ... @@ -149,24 +177,94 @@
}
.identity-form {
.identity-form-wrap {
width: 373px;
background-color: #fff;
.identity-form {
width: 330px;
margin: 0 auto;
}
.form-group {
margin: 10px 0;
font-size: 14px;
line-height: 25px;
}
label .star {
color: red;
vertical-align: middle;
margin-right: 4px;
}
.form-group label .star {
color: red;
vertical-align: middle;
margin-right: 4px;
}
.ident-inp {
border: 1px solid #dbdbdb;
height: 25px;
margin-left: 10px;
}
.form-group .ident-inp {
border: 1px solid #dbdbdb;
height: 23px;
margin-left: 10px;
padding: 0 5px;
}
.form-group.select-group {
position: relative;
}
.select-group .ident-inp {
display: none;
}
.select-group .ident-select-wrap {
position: absolute;
left: 93px;
top: 0;
width: 161px;
vertical-align: top;
}
.select-group .long-sel {
width: 220px;
}
.select-group .select-value {
border: 1px solid #dbdbdb;
padding: 0 5px;
background-color: #fff;
}
.select-group .select-more-line {
width: 280px;
}
.select-group .select-more-line li {
float: left;
width: 50px;
}
.select-group .select-ul {
position: relative;
z-index: -1;
line-height: 30px;
padding: 10px;
margin-top: -1px;
border: 1px solid #dbdbdb;
background-color: #fff;
}
.select-group .select-ul.active {
z-index: 999;
}
.select-group .select-more-line li {
padding: 0 10px;
}
.select-group .select-ul a {
padding: 5px 10px;
}
.select-group .select-ul a:hover,.select-ul a:active {
background-color: #000;
color: #fff;
}
.agreen-group {
... ... @@ -245,9 +343,81 @@
}
.activity-item {
background-image: resolve("students/activity-item.png");
background-size: 100% 100%;
width: 1150px;
height: 283px;
}
}
\ No newline at end of file
.coupon {
display: inline-block;
position: relative;
width: 282px;
height: 258px;
margin-right: 2px;
.info {
width: 78px;
height: 78px;
position: absolute;
right: 2px;
bottom: -1px;
}
.info > div {
width: 100%;
height: 38px;
font-size: 16px;
color: #fff;
text-align: center;
position: absolute;
top: 50%;
margin-top: -19px;
}
.info p {
margin-bottom: 5px;
}
.info .guang {
width: 50px;
height: 18px;
line-height: 18px;
font-size: 12px;
background-color: #fff;
color: #d0021b;
margin: 0 auto;
}
}
.coupon img {
width: 100%;
height: 100%;
}
}
.stu-dialog {
border: 3px solid #000;
width: 500px;
.content {
text-align: left;
margin: 10px;
}
.dia-title {
display: inline-block;
padding-bottom: 7px;
margin: 10px 0 25px 0;
font-size: 18px;
font-weight: bold;
border-bottom: 3px solid;
}
p {
line-height: 35px;
font-size: 14px;
font-weight: bold;
}
}
... ...