提交 9d0a6fa8 编写于 作者: D devil_gong

细节优化

上级 1c50bf6d
<!-- 商品分类 -->
<div id="goods-category" class="am-container" data-controller-name="{{$controller_name}}">
<div id="goods-category" class="am-container am-hide-sm-only am-hide-md-only" data-controller-name="{{$controller_name}}">
<div class="goods-category-s">
<a href="{{:MyUrl('index/category/index')}}">
<div class="goods-category-title">
......
<header class="am-topbar shop-navigation">
<div class="am-container">
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-default am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
<h1 class="am-topbar-brand wap-logo am-show-sm-only">
<a href="{{$Think.__MY_URL__}}">
<img src="{{$attachment_host}}{{:MyC('home_site_logo_wap')}}" alt="{{:MyC('home_seo_site_title')}}" />
</a>
</h1>
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-default am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
<a href="{{:MyUrl('index/category/index')}}" class="am-show-md-only">
<div class="goods-category-title am-hide-sm-only">
<span class="all-goods">全部分类</span>
</div>
</a>
<div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
<ul class="am-nav am-nav-pills am-topbar-nav">
......@@ -45,7 +51,7 @@
</div>
</form>
<div class="am-topbar-right">
<div class="am-topbar-right am-hide-sm-only">
<div class="navigation-user {{if empty($user)}}login-event{{/if}}">
<a href="{{if empty($user)}}javascript:;{{else /}}{{:MyUrl('index/user/index')}}{{/if}}">
<img src="{{if !empty($user['avatar'])}}{{$user.avatar}}{{else /}}{{$attachment_host}}/static/{{$module_name}}/{{$default_theme}}/images/default-user-avatar.jpg{{/if}}" class="nav-user" />
......
<!-- 搜索框 start -->
<div class="nav-search white am-hide-sm-only">
<div class="logo">
<div class="logo am-show-sm-only">
<a href="{{$Think.__MY_URL__}}">
<img src="{{$attachment_host}}{{:MyC('home_site_logo_wap')}}" alt="{{:MyC('home_seo_site_title')}}" />
</a>
</div>
<div class="logo-big">
<div class="logo-big am-hide-sm-only">
<a href="{{$Think.__MY_URL__}}">
<img src="{{$attachment_host}}{{:MyC('home_site_logo')}}" alt="{{:MyC('home_seo_site_title')}}" />
</a>
......
......@@ -75,12 +75,10 @@ color: #555555;background:none;border-color:transparent;cursor: default;}
/* 商品分类 */
#goods-category { position: relative; top: -45px; }
.goods-category-s{display: none;}
/*浮动框*/
/* 搜索 */
.nav-search{top:0;left:0;width:100%;z-index:1000; margin:0px auto;background:#fff; padding-top: 5px; position: relative;}
.nav-search .logo{height:30px;width:95px; margin: 0 auto; display: -webkit-inline-box;}
.logo-big{display:none;}
.logo img{width: 100%; vertical-align: middle;}
/*搜索框*/
......@@ -94,8 +92,6 @@ color: #F5F5F2;font-size: 12px;cursor:pointer;border-radius:0px 0px; position: a
.search-hot-keywords li { float: left; }
.search-hot-keywords li:not(:last-child) { margin-right: 10px; }
/* 分类*/
.goods-category-title,.navigation-user{display: none;}
/*侧边导航*/
.mui-mbar-tabs{ display:none;}
......@@ -120,53 +116,35 @@ color: #F5F5F2;font-size: 12px;cursor:pointer;border-radius:0px 0px; position: a
.top-nav-right {position: absolute; top: 0; right: 0; }
.top-nav-right .top-nav-items {float: left;}
.nav-search .logo{display:none;}
.nav-search .logo-big{ display:block;float:left;height:40px;width:135px; margin:0px auto; margin-left:5px; margin-right: 5px;}
.nav-search .logo-big{ float:left;height:40px;width:135px; margin:0px auto; margin-left:5px; margin-right: 5px;}
.nav-search .logo-big img{width:100%;}
.search-bar {height: 34px; width: calc(100% - 146px);}
.search-bar input {width: 84%;height:30px;}
.search-bar {height: 34px; margin:auto; width: 50%; padding-left: 10%;}
.search-bar input {width: 79%;height:30px;}
.classified{display:none;}
.mobile-navigation{display:none;}
.nav-search{ position:relative;top:0px;z-index:0;margin-bottom: 5px;margin-top: 5px;}
#ai-topsearch{ font-size:14px;height: 30px;line-height: 18px; font-weight: 500; width: 15%; }
.nav-search{ position:relative;top:0px;z-index:0;margin-bottom: 5px;margin-top: 20px;}
#ai-topsearch{ font-size:14px;height: 30px;line-height: 18px; font-weight: 500; width: 20%; }
/*底部*/
.am-footer {text-align:center; display:block;position: relative;margin: 0px auto; padding: 10px 0px; }
/*选项卡样式*/
.am-nav-tabs > li span{font-size:16px;}
}
@media only screen and (min-width: 1025px) {
.am-container { padding-left:0rem;padding-right:0rem;max-width: 1000px;}
.mui-mbar-tabs{ display:block;}
.nav-search{padding-left:0px; max-width:1000px; margin:0px auto;padding-top: 20px; height: 100px;}
.nav-search .logo{display:none;}
.nav-search .logo-big { display: -webkit-inline-box; float:left;height:60px; width:230px; margin:0px;}
.search-bar{margin:auto;display: -webkit-inline-box;width: 50%;padding-left: 10%;}
.shopMain{margin:0px 0px 0px 5px;}
.shopCon li{width:20%;padding:10px;}
.tip{display:block;}
.search-hot-keywords { display: block; }
/*分类*/
.goods-category-s {display:block;position: absolute;}
.goods-category-s, .goods-category-title { z-index: 100; }
.nav-table{max-width:1000px;margin: 0px auto;height: 45px;position: relative;overflow: hidden;}
.all-goods{font-size: 16px;}
.goods-category-title{background:#d2364c;color:#fff ;height: 40px;line-height: 44px;display:block;position: absolute;width:150px ;text-align: center;font-size:16px ;top:3px;z-index: 6;cursor: pointer;}
/* 导航上用户 */
.navigation-user {display: block; position: absolute;right:0px ;top:0px;font-size: 14px;line-height:33px;height:33px ;width:110px;text-align:center;background: #e1363f;cursor: pointer;}
.navigation-user .nav-user{background:#e0313b; width: 33px;height: 33px;border-radius: 33px;position: absolute;left:-28px;z-index: 2;padding: 1px;overflow: hidden;}
.navigation-user b{display:block;position: absolute;width: 40px;height: 40px;border-radius:45px;z-index: 1;left: -31px;top: -4px;background: #fff;}
.navigation-user .am-icon-angle-right { margin-left: 5px; }
.navigation-user b{display:block;position: absolute;width: 40px;height: 40px;border-radius:45px;z-index: 1;left: -31px;top: -4px;background: #fff;}
.navigation-user .am-icon-angle-right { margin-left: 5px; }
.navigation-user * { color:#fcff00; text-decoration: none; }
b.line{display: block;width:100%;height:2px ;border-bottom:2px solid #d2364c;position: absolute;top:180px;z-index:5;}
.navigation-user b.line{display: block;width:100%;height:2px ;border-bottom:2px solid #d2364c;position: absolute;top:180px;z-index:5;}
/*分类*/
#goods-category .category-content{ position:relative; width: 150px; float: left; z-index: 113;background:#fff; top: 45px;}
#goods-category .category-content .all-goods { display: block; padding: 0; border-radius: 5px 5px 0 0; font-weight: 600; line-height: 36px;width:150px;height: 36px; padding: 0; border-radius: 5px 5px 0 0; color: #fff; text-align: center; font: 16px/36px "Microsoft YaHei";}
#goods-category .category-content .all-goods em{ font: 12px/36px "Microsoft YaHei"; }
.goods-category-s {display:block;position: absolute;z-index: 100;}
.goods-category-s .all-goods{font-size: 16px;}
.goods-category-title{background:#d2364c;color:#fff ;height: 40px;line-height: 44px;display:block;position: absolute;width:150px ;text-align: center;font-size:16px ;top:2px;z-index: 6;cursor: pointer;}
.goods-category-s .category-content{ position:relative; width: 150px; float: left; z-index: 113;background:#fff; top: 45px;}
.goods-category-s .category-content .all-goods { display: block; padding: 0; border-radius: 5px 5px 0 0; font-weight: 600; line-height: 36px;width:150px;height: 36px; padding: 0; border-radius: 5px 5px 0 0; color: #fff; text-align: center; font: 16px/36px "Microsoft YaHei";}
.goods-category-s .category-content .all-goods em{ font: 12px/36px "Microsoft YaHei"; }
.category-content .category{width:150px; border-top: none; background: #2b2b2b;box-shadow: 8px 0 7px -3px rgba(0,0,0,.3) }
.category-content .down-ico{ position: absolute; top: 48px; left: 95px; width: 10px; height: 6px; background-position: 0 -131px; z-index: 11111; }
.category-content .category-list li { height:36px; margin-top: -2px;z-index:113;border-top: 1px solid #333;border-bottom: 1px solid #252525}
......@@ -188,45 +166,35 @@ color: #F5F5F2;font-size: 12px;cursor:pointer;border-radius:0px 0px; position: a
.category-content .category-info em{ position:absolute; top:8px; right:20px; width: 13px; height: 13px; font: 12px/18px "宋体"; color: #9b9b9b;}
.category-content .category .hover, .category-content .category-list li.hover .category-info { z-index:999;}
.category-content .hover .category-info{ border:none; text-decoration:none; background: #fff; }
.category-content .menu-item { position: absolute;left: 149px;height:100%; z-index: 11;padding:0 0 0 2px;width:770px;background: #fff; border:none; border-top: 1px solid #bbb9;overflow-y: scroll;overflow-x: hidden;}
.category-content .menu-item { display: none;position: absolute;left: 149px;height:100%; z-index: 11;padding:0 0 0 2px;width:770px;background: #fff; border:none; border-top: 1px solid #bbb9;overflow-y: scroll;overflow-x: hidden;}
.category-content .menu-item .area-in{ position: relative; z-index: 1; }
.category-content .menu-item .area-bg{ padding: 10px 0 10px 40px;}
.shadow-bg{ display: none; position: relative; width: 100%; height: 0; }
.shadow-b,.shadow-bg i{background: url(themes/mall/default/styles/default/images/index_ico.png) no-repeat; }
.shadow-r,.shadow-l{ background: url(themes/mall/default/styles/default/images/shadow.png) no-repeat; }
.shadow-bg i,.shadow-b{ position: absolute; width: 100%; height: 0; height: 2px\9; background-position: 0 -188px; background-repeat: repeat-x; }
.shadow-bg i,.shadow-b{ _height:0; }
.shadow-l{ position: absolute; left: 0; _left:-42px; top: 0; width: 0; width: 2px\9; height: 100%; background-position: right 0; background-repeat: repeat-y; }
.shadow-r{ position: absolute; right: 0; top: 0; width: 0; width: 2px\9; height: 100%; background-repeat: repeat-y; }
.category-content .menu-in{ display: none; }
.category-content .category-list li.hover .b-category-name a{ color:#4c4c4c; }
.category-content .menu-srot{width: 100%; overflow:hidden;}
.menu-srot .sort-side{ overflow:hidden }
.sort-side .dl-sort{ float:left; width:100%; }
.sort-side dt { margin-top: 5px; font-size: 14px; font-weight: bold; color: #db3e54; text-align: left;}
.sort-side dd { float:left; margin: 2px 6px 4px 0;}
.sort-side dd a{ float:left; width: auto; letter-spacing:0.5px; line-height: 14px; color:#888; white-space:nowrap; overflow: hidden; text-overflow:ellipsis; padding: 3px 10px; border:1px solid #e6e6e6; }
.sort-side dd a span.red{ color:#DB3E54; }
.menu-srot .brand-side{ float: left; position: relative;margin-left: -10px; padding-top: 10px; }
.brand-side {margin-top: 50px; border-top: 1px solid #eae9e9;}
.brand-side .dl-sort{overflow: hidden; height: 70px;}
.brand-side dt { position: absolute; top: -22px; padding:0 10px; font-size: 14px; font-weight: bold;}
.brand-side dd { float: left; padding: 5px 0; }
.brand-side dd a{ display: block; padding: 0 10px; line-height: 1; border-right: 1px solid #bcbcbc; color: #888; }
.brand-side dd a.more{color: #b6b6b6;}
.category-content .menu-srot .sort-side{ overflow:hidden }
.category-content .sort-side .dl-sort{ float:left; width:100%; }
.category-content .sort-side dt { margin-top: 5px; font-size: 14px; font-weight: bold; color: #db3e54; text-align: left;}
.category-content .sort-side dd { float:left; margin: 2px 6px 4px 0;}
.category-content .sort-side dd a{ float:left; width: auto; letter-spacing:0.5px; line-height: 14px; color:#888; white-space:nowrap; overflow: hidden; text-overflow:ellipsis; padding: 3px 10px; border:1px solid #e6e6e6; }
.category-content .sort-side dd a span.red{ color:#DB3E54; }
.category-content .menu-srot .brand-side{ float: left; position: relative;margin-left: -10px; padding-top: 10px; }
.category-content .menu-item.top{top:0px;}
.category-content .menu-item.bottom{bottom: -2px;*bottom: -6px;_*bottom: -7px;}
/*导航图标*/
#meauBack{display: none;}
.sort-side .dl-sort{ float:left; width:50%; }
.category-content .sort-side .dl-sort{ float:left; width:50%; }
.category-list li.hover .menu-in { border: 1px solid #333; }
}
/*小三角*/
.category li b.arrow{}
@media only screen and (min-width: 1025px) {
.am-container { padding-left:0rem;padding-right:0rem;max-width: 1000px;}
.mui-mbar-tabs{ display:block;}
.nav-search{padding-left:0px; max-width:1000px; margin:0px auto;padding-top: 20px; height: 100px;}
.nav-search .logo-big { display: -webkit-inline-box; float:left;height:60px; width:230px; margin:0px;}
.search-bar{margin:auto; width: 50%;padding-left: 10%;}
.shopMain{margin:0px 0px 0px 5px;}
.shopCon li{width:20%;padding:10px;}
.tip{display:block;}
.search-hot-keywords { display: block; }
.goods-category-title { top: 3px; }
}
......@@ -675,7 +643,6 @@ ul.am-dropdown-content > .am-active > a:focus,
.shop-navigation .am-container {
position: relative;
}
.shop-navigation .am-nav > li {
white-space: nowrap;
}
......@@ -700,6 +667,7 @@ ul.am-dropdown-content > .am-active > a:focus,
@media only screen and (min-width: 641px) {
.shop-navigation {
background: transparent;
padding: 0 5px;
}
.shop-navigation .am-topbar-nav > li > a {
line-height: 40px;
......@@ -707,11 +675,20 @@ ul.am-dropdown-content > .am-active > a:focus,
.shop-navigation .am-topbar-nav > li > a:hover:after {
border-bottom-color: #d2354c;
}
.shop-navigation .am-topbar-collapse {
margin-left: 150px;
}
}
@media only screen and (min-width: 1025px) {
.shop-navigation {
padding: 0;
}
.shop-navigation .am-container {
padding-left: 150px;
}
.shop-navigation .am-topbar-collapse {
margin-left: 0;
}
}
@media only screen and (min-width: 1260px) {
.shop-navigation .am-container {
......@@ -720,7 +697,7 @@ ul.am-dropdown-content > .am-active > a:focus,
}
@media only screen and (max-width:1025px) {
.shop-navigation {
margin-top: 15px;
margin-top: 20px;
}
.shop-navigation .am-topbar-nav {
width: 100%;
......@@ -729,15 +706,19 @@ ul.am-dropdown-content > .am-active > a:focus,
@media only screen and (max-width:641px) {
.shop-navigation {
margin-top: 0;
background: #f3f3f3;
}
.shop-navigation .am-topbar-collapse {
background: #f3f3f3;
background: #eee;
}
.shop-navigation .am-nav > li {
border-bottom: 1px solid #eaeaea;
border-bottom: 1px solid #e8e8e8;
}
.shop-navigation .am-topbar-collapse .am-dropdown.am-active .am-dropdown-content li:not(:first-child) {
border-top: 1px solid #f8f8f8;
border-top: 1px solid #f5f5f5;
}
.shop-navigation .am-nav > li > a {
padding: 5px 0px;
}
}
......
......@@ -449,7 +449,6 @@ li.am-comment{ width:100%}
/* 手机模式下 */
@media only screen and (max-width:640px) {
.nav-search { display: none; }
.goods-detail { padding: 0px; }
.detail-title, .tb-detail-price, .detail-attr { padding: 0px 5px; }
.buy-nav .buy-nav-opt { width: 40%; }
......@@ -467,5 +466,5 @@ li.am-comment{ width:100%}
.scoll .goods-video-submit-close { bottom: 50px; }
/* 底部 */
.am-footer { padding-bottom: 55px; }
.am-footer { padding-bottom: 35px; }
}
\ No newline at end of file
......@@ -280,9 +280,6 @@ form.form-validation #map {
.am-footer {
padding-bottom: 35px;
}
.nav-search {
display: none;
}
.pets-qrcode-related li img {
max-width: 100%;
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册