Skip to content

X
xy-ads
Commit 9be118d2 authored by coolfish's avatar coolfish
Browse files
Options

发布

parent 7a0f625c
Show whitespace changes
Inline Side-by-side
Showing with 70 additions and 21 deletions
public/css/style.css
View file @ 9be118d2
...@@ -247,6 +247,26 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -247,6 +247,26 @@ input[type="number"]::-webkit-outer-spin-button {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
.xy-btn .image-title,
.xy-btn .image-info {
height: initial;
line-height: initial;
}
.xy-btn .image-title {
margin-top: 20px;
margin-bottom: 5px;
}
.xy-btn .image-info {
font-size: 16px;
color: #b3b3b3;
margin-bottom: 20px;
}
.xy-btn:not(.on):hover .image-info {
color: #8a9099;
}
.xy-btn.on .image-info {
color: #4991e4;
}
.xy-btn.on { .xy-btn.on {
color: #2277da; color: #2277da;
border-color: #2277da; border-color: #2277da;
...@@ -290,13 +310,13 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -290,13 +310,13 @@ input[type="number"]::-webkit-outer-spin-button {
border-right: 0; border-right: 0;
} }
#industry li { #industry li {
max-width: 153.6px; max-width: 192px;
} }
.section-text { .section-text {
max-width: 768px; max-width: 768px;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
padding-top: 20px; padding-top: 20px;
font-size: 36px; font-size: 32px;
padding-bottom: 20px; padding-bottom: 20px;
} }
#resultPage .section-text { #resultPage .section-text {
...@@ -307,16 +327,20 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -307,16 +327,20 @@ input[type="number"]::-webkit-outer-spin-button {
width: 165px; width: 165px;
text-align: right; text-align: right;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: 2px solid #666; border-bottom: 1px solid #666;
background-color: transparent; background-color: transparent;
} }
#expect {
border-radius: 0;
}
#resultPage { #resultPage {
background: #f2f2f2 url(../images/timing_bg.png) center no-repeat; background: #f2f2f2 url(../images/timing_bg.png) center no-repeat;
} }
#resultPage .section-text font { #resultPage .section-text font {
color: #2277da; color: #2277da;
padding: 0 10px; padding: 0 10px;
border-bottom: 2px solid #666; border-bottom: 1px solid #666;
line-height: 36px;
} }
#section5 .section-text { #section5 .section-text {
padding: 0; padding: 0;
...@@ -461,7 +485,14 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -461,7 +485,14 @@ input[type="number"]::-webkit-outer-spin-button {
.section-h3 { .section-h3 {
font-size: 14px; font-size: 14px;
} }
.section-text { .section-text, .section-text input {
font-size: 24px; font-size: 24px;
} }
.top-nav-left .font-title span.title-info {
display: block;
padding-left: 10px;
}
#resultPage .section-text {
font-size: 20px;
}
} }
public/js/main.js
View file @ 9be118d2
...@@ -33,6 +33,8 @@ window.onload = function () { ...@@ -33,6 +33,8 @@ window.onload = function () {
var expect = 0; var expect = 0;
var articles = 0; var articles = 0;
var days = 0; var days = 0;
var money = 0;
var cpm = 0;
var articlesPv = 5000; var articlesPv = 5000;
var publishArticlesCount = 400; var publishArticlesCount = 400;
...@@ -71,6 +73,10 @@ window.onload = function () { ...@@ -71,6 +73,10 @@ window.onload = function () {
function compute () { function compute () {
articles = Math.ceil(expect / articlesPv); articles = Math.ceil(expect / articlesPv);
days = Math.ceil(articles / publishArticlesCount); days = Math.ceil(articles / publishArticlesCount);
cpm = $('#industry .xy-btn.on').data('cpm');
money = expect / 1000 * Math.ceil(cpm);
$('#money').html(money);
$('#cpm').html(cpm);
$('#articles').html(articles); $('#articles').html(articles);
$('#days').html(days); $('#days').html(days);
$('#tips').hide(); $('#tips').hide();
...@@ -81,8 +87,8 @@ window.onload = function () { ...@@ -81,8 +87,8 @@ window.onload = function () {
flag['expect'] = (!isNaN(expect) && expect > 0); flag['expect'] = (!isNaN(expect) && expect > 0);
checkFlag(); checkFlag();
} }
clickBtn('industry', 'checkbox'); clickBtn('industry');
clickBtn('platform', 'checkbox'); clickBtn('platform');
clickBtn('format'); clickBtn('format');
$('#expect').blur(function () { $('#expect').blur(function () {
changeExpect(+$(this).val()); changeExpect(+$(this).val());
......
views/index.ejs
View file @ 9be118d2
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<img src="/images/hjy@2x.png" class="hjy-logo"/> <img src="/images/hjy@2x.png" class="hjy-logo"/>
<span>X</span> <span>X</span>
<font class="xyfc-logo">小云蜂巢</font> <font class="xyfc-logo">小云蜂巢</font>
<span>新媒体广告平台</span> <span class="title-info">新媒体广告平台</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -32,19 +32,29 @@ ...@@ -32,19 +32,29 @@
</div> </div>
<div class="section" id="industry"> <div class="section" id="industry">
<div class="section-content"> <div class="section-content">
<div class="section-h2">行业分类</div> <div class="section-h2">第一步，请选择行业分类</div>
<div class="section-h3">请选择行业分类</div>
<ul class="xy-btn-group clearfix"> <ul class="xy-btn-group clearfix">
<% ["社会", "娱乐", "健康", "美食", "汽车", "科技", "军事", "宠物", "文学", "时尚"].forEach(function (item) { %> <% [{name: '社会军事', cpm: 200 },
<li><a href="javascript:;" class="xy-btn"><span><%= item %></span></a></li> {name: '影视娱乐', cpm: 60 },
{name: '健康养生', cpm: 60 },
{name: '汽车', cpm: 150 },
{name: '科技数码', cpm: 100 },
{name: '美食美酒', cpm: 60 },
{name: '宠物', cpm: 80 },
{name: '文化文学', cpm: 80 },
{name: '美妆时尚', cpm: 100 },
{name: '出行旅游', cpm: 80 },
{name: '母婴亲子', cpm: 100 },
{name: '品质生活', cpm: 100 }
].forEach(function (item) { %>
<li><a href="javascript:;" class="xy-btn" data-cpm="<%= item.cpm %>"><span><%= item.name %></span></a></li>
<% }) %> <% }) %>
</ul> </ul>
</div> </div>
</div> </div>
<div class="section" id="platform"> <div class="section" id="platform">
<div class="section-content"> <div class="section-content">
<div class="section-h2">内容平台</div> <div class="section-h2">第二步，请选择内容平台</div>
<div class="section-h3">请选择内容平台</div>
<ul class="xy-btn-group clearfix"> <ul class="xy-btn-group clearfix">
<li> <li>
<a href="javascript:;" class="xy-btn"> <a href="javascript:;" class="xy-btn">
...@@ -87,25 +97,27 @@ ...@@ -87,25 +97,27 @@
</div> </div>
<div class="section" id="format"> <div class="section" id="format">
<div class="section-content"> <div class="section-content">
<div class="section-h2">广告展现形式</div> <div class="section-h2">第三步，请选择广告展现形式</div>
<div class="section-h3">请选择展现形式</div>
<ul class="xy-btn-group clearfix"> <ul class="xy-btn-group clearfix">
<li> <li>
<a href="javascript:;" class="xy-btn"> <a href="javascript:;" class="xy-btn">
<img class="image-format" src="/images/format/2.png"> <img class="image-format" src="/images/format/2.png">
<span>小编推荐</span> <span class="image-title">小编推荐</span>
<span class="image-info">适合品牌信息植入</span>
</a> </a>
</li> </li>
<li> <li>
<a href="javascript:;" class="xy-btn"> <a href="javascript:;" class="xy-btn">
<img class="image-format" src="/images/format/1.png"> <img class="image-format" src="/images/format/1.png">
<span>品牌EPR</span> <span class="image-title">文章发布</span>
<span class="image-info">适合品牌EPR宣推</span>
</a> </a>
</li> </li>
<li> <li>
<a href="javascript:;" class="xy-btn"> <a href="javascript:;" class="xy-btn">
<img class="image-format" src="/images/format/3.png"> <img class="image-format" src="/images/format/3.png">
<span>相关商品推荐</span> <span class="image-title">贴片广告</span>
<span class="image-info">适合商品推荐</span>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -113,8 +125,7 @@ ...@@ -113,8 +125,7 @@
</div> </div>
<div class="section" id="readCount"> <div class="section" id="readCount">
<div class="section-content"> <div class="section-content">
<div class="section-h2">预期阅读量</div> <div class="section-h2">第四步，请输入预期阅读量</div>
<div class="section-h3">请输入阅读量</div>
<div class="section-text"> <div class="section-text">
<span class="span-t">阅读量: </span> <span class="span-t">阅读量: </span>
<input type="number" id="expect"/> <input type="number" id="expect"/>
...@@ -131,6 +142,7 @@ ...@@ -131,6 +142,7 @@
</div> </div>
<div id="result" class="hide"> <div id="result" class="hide">
<p>预计发布<font id="articles"></font>篇文章，<font id="days"></font>天完成发布任务。</p> <p>预计发布<font id="articles"></font>篇文章，<font id="days"></font>天完成发布任务。</p>
<p style="padding-top: 10px;">预计预算<font id="money"></font>元，预计千次展现(CPM)<font id="cpm"></font>元</p>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment