Authored by unknown

简单头部模板,样式

{{> layout/simple-header}}
<div class="login-page back-page yoho-page clearfix">
{{# back}}
{{> passport/cover}}
<div class="content">
</div>
{{/ back}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="http://www.yohobuy.com/favicon.ico" type="image/x-icon" />
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
<title>{{title}}</title>
<!-- [if (gte IE 6)&(lte IE 8)>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://webstatic.dev.yohobuy.com/css/index.css">
</head>
<body>
{{# simpleHeader}}
<div class="simple-header">
<div class="header-inner clearfix">
{{# logo}}
<h1 class="logo">
<a href="{{url}}">
<img src="{{img}}" alt="">
</a>
</h1>
{{/ logo}}
<ul class="header-tool clearfix">
{{# tool}}
<li {{#if options}}class="tool-options"{{/if}}{{#if loginUrl}}class="login-box"{{/if}}>
{{# tell}}
<i class="tell-icon iconfont">&#xe61c;</i>
{{/ tell}}
{{#if url}}
<a href="{{url}}">{{title}}</a>
{{/if}}
{{#unless url}}
<span>{{title}}</span>
{{/unless}}
{{#if options}}
<i class="options-icon down iconfont">&#xe604;</i>
<i class="options-icon up iconfont">&#xe603;</i>
<div class="tool-select">
{{# options}}
<a href="{{url}}">{{textCn}}</a>
{{/ options}}
</div>
{{/if}}
{{#if loginUrl}}
<a href="{{loginUrl}}">[请登录]</a>
<a href="{{regUrl}}">[免费注册]</a>
{{/if}}
</li>
{{/ tool}}
</ul>
</div>
</div>
{{/ simpleHeader}}
\ No newline at end of file
... ...
... ... @@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015
Created by FontForge 20120731 at Fri Dec 11 11:28:33 2015
By Ads
</metadata>
<defs>
... ... @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015
bbox="0 -214 1172.1 864"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E61B"
unicode-range="U+0078-E61C"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
... ... @@ -97,5 +97,10 @@ d="M903 493l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" />
<glyph glyph-name="uniE61B" unicode="&#xe61b;"
d="M505 253l2 -2q2 -1 4 -1l3 1l430 364q2 2 1 6l-2 2q-1 1 -3 1h-435h-424q-2 0 -3 -1l-2 -2l1 -6zM72 585q-3 2 -6 0l-3 -4v-584q0 -4 3.5 -5t5.5 1l288 346zM953 585h-5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4zM641 322l-131 -111l-5 5l-125 103l-275 -328
q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" />
<glyph glyph-name="uniE61C" unicode="&#xe61c;"
d="M982 137l-4 6l-10 12q-12 13 -42 38q-12 10 -25.5 20.5t-27.5 21t-26 17.5l-48 31l-21 11q-5 2 -11.5 3t-13 0.5t-11.5 -2.5q-7 -2 -13.5 -7.5t-9.5 -10.5l-17 -25q-4 -6 -8 -13l-12 -24q-9 -18 -15 -28q-7 -14 -21 -24t-32 -13.5t-36 7.5q-102 57 -171 123
q-101 95 -135 172q-8 13 -1.5 37t26.5 34q12 6 25 11.5t23 9.5t18 9q7 4 14.5 8.5t18.5 11.5l2 1l4 4l2 1l3 3q19 18 9 43l-3 8q-1 4 -4 10t-12.5 24.5t-19.5 34.5q-8 14 -19.5 31t-21.5 31q-10 13 -20.5 24t-18.5 17.5t-14.5 11.5t-9.5 6l-4 2l-13 7q-9 4 -17.5 4.5t-16 -1
t-16.5 -4.5q-5 -2 -9.5 -4.5t-8.5 -4t-9 -4.5l-7 -4q-3 -2 -8 -6t-7 -5t-7.5 -5.5t-7 -5.5t-8 -6.5t-7.5 -5.5q-44 -37 -69.5 -82.5t-19.5 -86.5q10 -72 88 -198.5t182.5 -225.5t237.5 -173t209 -84q79 -10 169 73q16 15 31.5 34.5t24.5 38.5q6 14 7.5 30t-5.5 31v0z
M982 137z" />
</font>
</defs></svg>
... ...
... ... @@ -1048,6 +1048,98 @@
line-height: 16px;
}
}
.simple-header {
height: 66px;
margin: 0 0 20px 0;
border-bottom: 2px solid #222;
.header-inner {
width: 990px;
height: 100%;
margin: 0 auto;
}
.logo {
float: left;
line-height: 66px;
font-size: 0;
img {
vertical-align: middle;
}
}
}
.simple-header .header-tool {
float: right;
line-height: 66px;
font-size: 0;
li {
@include inline-block;
padding: 0 10px;
*margin: 19px 0 0;
line-height: 28px;
font-size: 12px;
span, a {
font-size: 12px;
}
.tell-icon {
font-size: 12px;
}
.tell-icon ~ span {
font-weight: bold;
}
}
.login-box {
a {
color: #666;
}
}
.tool-options {
position: relative;
font-size: 0;
cursor: pointer;
&:hover {
background-color: #eaeceb;
.iconfont {
&.up {
display: inline-block;
*display: inline;
*zoom: 1;
}
&.down {
display: none;
}
}
}
.iconfont, span{
@include inline-block;
font-size: 12px;
height: 28px;
line-height: 28px;
&.up {
display: none;
}
}
.tool-select {
display: none;
position: absolute;
width: 74px;
left: 0;
background: #eaeceb;
z-index: 9;
a {
display: block;
padding: 0 0 0 10px;
border-top: 1px solid #ddd;
}
}
}
}
@media (max-width:1180px) {
.yoho-header {
.header-topwrapper {
... ...
<?php
use Action\AbstractAction;
class BackController extends AbstractAction
{
/**
* 找回密码
*/
public function indexAction()
{
$simpleHeader = array(
'logo' => array(
'img' => 'http://static.yohobuy.com/newheader/img/logo_e.png',
'url' => 'http://www.yohobuy.com'
),
'tool' => array(
array(
'title' => 'Hi~',
'loginUrl' => 'www.yoho.com',
'regUrl' => ''
),
array(
'title' => 'MY有货',
'options' => array(
array(
'textCn' => '我的收藏',
'url' => ''
),
array(
'textCn' => '优惠券',
'url' => ''
),
)
),
array(
'title' => '订单中心',
'url' => 'http://www.yohobuy.com/home/orders?t=1449801433.5294'
),
array(
'title' => '帮助中心',
'url' => 'http://www.yohobuy.com/help'
),
array(
'title' => '400-9889-9646',
'tell' => true
)
)
);
$data = array(
'simpleHeader' => $simpleHeader,
'loginPage' => true,
'back' => array(
'coverHref' => '/passport',
'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
'countrys' => array()
)
);
$this->_view->display('index', $data);
}
}
\ No newline at end of file
... ...
... ... @@ -8,7 +8,7 @@ class LoginController extends AbstractAction
* 登录页
*/
public function indexAction()
{
{
$data = array(
'loginPage' => true,
'passport' => array(
... ...