fe / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit 22d0267051febf3ecb8cec3b676ebae296c2d593 1 parent 7a001fca

侧边栏 样式调整

Inline Side-by-side
Showing 3 changed files with 91 additions and 29 deletions
... ... @@ -7,20 +7,40 @@
left: 0;
right: 100rem / $pxConvertRem;
width: 540rem / $pxConvertRem;
background: #f0f0f0;
overflow: hidden;
overflow-y: auto;
@include transition(all .3s);
ul {
background: #f0f0f0;
> ul {
margin-bottom: 20rem / $pxConvertRem;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
li {
position: relative;
height: 128rem / $pxConvertRem;
line-height: 128rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
height: 80rem / $pxConvertRem;
line-height: 80rem / $pxConvertRem;
background: #fff;
&:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 430rem / $pxConvertRem;
height: 0;
border-top: 1px solid #e0e0e0;
}
&:last-child {
&:after {
content: none;
}
}
a {
display: block;
height: 100%;
... ... @@ -29,6 +49,15 @@
font-size: 24rem / $pxConvertRem;
}
.title {
display: inline-block;
padding-left: 10rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
vertical-align: baseline;
// 此处字体小于 12px， 先扩大，再scale缩小
@include transform(scale(0.75));
}
.nav-icon, .nav-img {
position: absolute;
width: 60rem / $pxConvertRem;
... ... @@ -51,9 +80,38 @@
}
em {
margin-right: 10rem / $pxConvertRem;
font-weight: bold;
font-size: 34rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
}
}
.first {
li {
height: 100rem / $pxConvertRem;
line-height: 100rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
&:last-child {
border-bottom: none;
}
&:after {
content: none;
}
a {
font-size: 40rem / $pxConvertRem;
}
em {
font-size: 40rem / $pxConvertRem;
}
.title {
font-size: 24rem / $pxConvertRem;
@include transform(scale(1));
}
}
}
... ... @@ -85,17 +143,17 @@
}
}
li.new {
margin: (19rem / $pxConvertRem) 0 0;
border-top: 1px solid #e0e0e0;
a {}
i {
background: image-url("side-nav/new.png") no-repeat left center;
background-size: 100% 100%;
}
}
// li.new {
// margin: (19rem / $pxConvertRem) 0 0;
// border-top: 1px solid #e0e0e0;
//
// a {}
//
// i {
// background: image-url("side-nav/new.png") no-repeat left center;
// background-size: 100% 100%;
// }
// }
li.guang, li.trendfinder {
.nav-icon {
... ... @@ -126,13 +184,17 @@
height: 109rem / $pxConvertRem;
line-height: 109rem / $pxConvertRem;
border: none;
border-bottom: 1px solid #e0e0e0;
&:after {
content: none;
}
a {
position: relative;
display: block;
margin: 0 0 0 (30rem / $pxConvertRem);
padding-left: 50rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
font-size: 36rem / $pxConvertRem;
z-index: 2;
}
... ...
<div class="side-nav">
{{# sideNav}}
<ul>
<ul {{#if @first}}class="first"{{/if}}>
{{# this}}
<li class="{{styleClass}}">
<li class="{{styleClass}}" style="{{#if color}}color:{{color}};{{/if}}">
{{# url}}
<a href="{{.}}">
{{/ url}}
... ... @@ -15,7 +15,8 @@
{{^ img}}
<i class="nav-icon"></i>
{{/ img}}
<em>{{textCn}}</em>{{textEn}}
<em>{{textCn}}</em>
<span class="title">{{textEn}}</span>
{{# subNav}}
<span class="enter-subnav iconfont">&#xe614;</span>
{{/ subNav}}
... ... @@ -23,7 +24,7 @@
{{# subNav}}
<ul class="sub-nav">
{{# list}}
<li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}}">
<li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}};{{#if color}}color:{{color}};{{/if}}">
{{# url}}
<a href="{{.}}">
{{/ url}}
... ... @@ -37,7 +38,7 @@
<i class="nav-back iconfont">&#xe610;</i>
{{/ back}}
<em>{{textCn}}</em>
{{textEn}}
<span class="title">{{textEn}}</span>
</a>
</li>
{{/ list}}
... ... @@ -47,4 +48,4 @@
{{/ this}}
</ul>
{{/sideNav}}
</div>
\ No newline at end of file
</div>
... ...
... ... @@ -8,7 +8,7 @@ use Plugin\Helpers;
use Plugin\Cache;
/**
*
*
* @name SideModel
* @package models/Index
* @copyright yoho.inc
... ... @@ -20,7 +20,7 @@ class SideModel
/**
* 获取左侧边栏数据
*
*
* @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
*/
public static function getLeftNav($guangChoosed = 'all')
... ... @@ -88,13 +88,12 @@ class SideModel
// 追加逛的子分类数据
$result[] = self::genLeftNavGuang($guangChoosed);
return $result;
}
/**
* 获取并生成左侧边栏中逛的数据
*
*
* @param string $guangChoosed 逛默认选中项 "all"表示全部,"boys":只看男生,"girls":只看女生
* @return array
*/
... ...