Skip to content

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

发布

parent 7a0f625c
Hide 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 {
width: 100%;
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 {
color: #2277da;
border-color: #2277da;
......@@ -290,13 +310,13 @@ input[type="number"]::-webkit-outer-spin-button {
border-right: 0;
}
#industry li {
max-width: 153.6px;
max-width: 192px;
}
.section-text {
max-width: 768px;
margin: 20px auto 0 auto;
padding-top: 20px;
font-size: 36px;
font-size: 32px;
padding-bottom: 20px;
}
#resultPage .section-text {
......@@ -307,16 +327,20 @@ input[type="number"]::-webkit-outer-spin-button {
width: 165px;
text-align: right;
padding-bottom: 5px;
border-bottom: 2px solid #666;
border-bottom: 1px solid #666;
background-color: transparent;
}
#expect {
border-radius: 0;
}
#resultPage {
background: #f2f2f2 url(../images/timing_bg.png) center no-repeat;
}
#resultPage .section-text font {
color: #2277da;
padding: 0 10px;
border-bottom: 2px solid #666;
border-bottom: 1px solid #666;
line-height: 36px;
}
#section5 .section-text {
padding: 0;
......@@ -461,7 +485,14 @@ input[type="number"]::-webkit-outer-spin-button {
.section-h3 {
font-size: 14px;
}
.section-text {
.section-text, .section-text input {
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 () {
var expect = 0;
var articles = 0;
var days = 0;
var money = 0;
var cpm = 0;
var articlesPv = 5000;
var publishArticlesCount = 400;
......@@ -71,6 +73,10 @@ window.onload = function () {
function compute () {
articles = Math.ceil(expect / articlesPv);
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);
$('#days').html(days);
$('#tips').hide();
......@@ -81,8 +87,8 @@ window.onload = function () {
flag['expect'] = (!isNaN(expect) && expect > 0);
checkFlag();
}
clickBtn('industry', 'checkbox');
clickBtn('platform', 'checkbox');
clickBtn('industry');
clickBtn('platform');
clickBtn('format');
$('#expect').blur(function () {
changeExpect(+$(this).val());
......
views/index.ejs
View file @ 9be118d2
......@@ -16,7 +16,7 @@
<img src="/images/hjy@2x.png" class="hjy-logo"/>
<span>X</span>
<font class="xyfc-logo">小云蜂巢</font>
<span>新媒体广告平台</span>
<span class="title-info">新媒体广告平台</span>
</div>
</div>
</div>
......@@ -32,19 +32,29 @@
</div>
<div class="section" id="industry">
<div class="section-content">
<div class="section-h2">行业分类</div>
<div class="section-h3">请选择行业分类</div>
<div class="section-h2">第一步，请选择行业分类</div>
<ul class="xy-btn-group clearfix">
<% ["社会", "娱乐", "健康", "美食", "汽车", "科技", "军事", "宠物", "文学", "时尚"].forEach(function (item) { %>
<li><a href="javascript:;" class="xy-btn"><span><%= item %></span></a></li>
<% [{name: '社会军事', cpm: 200 },
{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>
</div>
</div>
<div class="section" id="platform">
<div class="section-content">
<div class="section-h2">内容平台</div>
<div class="section-h3">请选择内容平台</div>
<div class="section-h2">第二步，请选择内容平台</div>
<ul class="xy-btn-group clearfix">
<li>
<a href="javascript:;" class="xy-btn">
......@@ -87,25 +97,27 @@
</div>
<div class="section" id="format">
<div class="section-content">
<div class="section-h2">广告展现形式</div>
<div class="section-h3">请选择展现形式</div>
<div class="section-h2">第三步，请选择广告展现形式</div>
<ul class="xy-btn-group clearfix">
<li>
<a href="javascript:;" class="xy-btn">
<img class="image-format" src="/images/format/2.png">
<span>小编推荐</span>
<span class="image-title">小编推荐</span>
<span class="image-info">适合品牌信息植入</span>
</a>
</li>
<li>
<a href="javascript:;" class="xy-btn">
<img class="image-format" src="/images/format/1.png">
<span>品牌EPR</span>
<span class="image-title">文章发布</span>
<span class="image-info">适合品牌EPR宣推</span>
</a>
</li>
<li>
<a href="javascript:;" class="xy-btn">
<img class="image-format" src="/images/format/3.png">
<span>相关商品推荐</span>
<span class="image-title">贴片广告</span>
<span class="image-info">适合商品推荐</span>
</a>
</li>
</ul>
......@@ -113,8 +125,7 @@
</div>
<div class="section" id="readCount">
<div class="section-content">
<div class="section-h2">预期阅读量</div>
<div class="section-h3">请输入阅读量</div>
<div class="section-h2">第四步，请输入预期阅读量</div>
<div class="section-text">
<span class="span-t">阅读量: </span>
<input type="number" id="expect"/>
......@@ -131,6 +142,7 @@
</div>
<div id="result" class="hide">
<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>
......
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