提交 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"> <div class="goods-category-s">
<a href="{{:MyUrl('index/category/index')}}"> <a href="{{:MyUrl('index/category/index')}}">
<div class="goods-category-title"> <div class="goods-category-title">
......
<header class="am-topbar shop-navigation"> <header class="am-topbar shop-navigation">
<div class="am-container"> <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"> <h1 class="am-topbar-brand wap-logo am-show-sm-only">
<a href="{{$Think.__MY_URL__}}"> <a href="{{$Think.__MY_URL__}}">
<img src="{{$attachment_host}}{{:MyC('home_site_logo_wap')}}" alt="{{:MyC('home_seo_site_title')}}" /> <img src="{{$attachment_host}}{{:MyC('home_site_logo_wap')}}" alt="{{:MyC('home_seo_site_title')}}" />
</a> </a>
</h1> </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"> <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
<ul class="am-nav am-nav-pills am-topbar-nav"> <ul class="am-nav am-nav-pills am-topbar-nav">
...@@ -45,7 +51,7 @@ ...@@ -45,7 +51,7 @@
</div> </div>
</form> </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}}"> <div class="navigation-user {{if empty($user)}}login-event{{/if}}">
<a href="{{if empty($user)}}javascript:;{{else /}}{{:MyUrl('index/user/index')}}{{/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" /> <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 --> <!-- 搜索框 start -->
<div class="nav-search white am-hide-sm-only"> <div class="nav-search white am-hide-sm-only">
<div class="logo"> <div class="logo am-show-sm-only">
<a href="{{$Think.__MY_URL__}}"> <a href="{{$Think.__MY_URL__}}">
<img src="{{$attachment_host}}{{:MyC('home_site_logo_wap')}}" alt="{{:MyC('home_seo_site_title')}}" /> <img src="{{$attachment_host}}{{:MyC('home_site_logo_wap')}}" alt="{{:MyC('home_seo_site_title')}}" />
</a> </a>
</div> </div>
<div class="logo-big"> <div class="logo-big am-hide-sm-only">
<a href="{{$Think.__MY_URL__}}"> <a href="{{$Think.__MY_URL__}}">
<img src="{{$attachment_host}}{{:MyC('home_site_logo')}}" alt="{{:MyC('home_seo_site_title')}}" /> <img src="{{$attachment_host}}{{:MyC('home_site_logo')}}" alt="{{:MyC('home_seo_site_title')}}" />
</a> </a>
......
...@@ -75,12 +75,10 @@ color: #555555;background:none;border-color:transparent;cursor: default;} ...@@ -75,12 +75,10 @@ color: #555555;background:none;border-color:transparent;cursor: default;}
/* 商品分类 */ /* 商品分类 */
#goods-category { position: relative; top: -45px; } #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{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;} .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;} .logo img{width: 100%; vertical-align: middle;}
/*搜索框*/ /*搜索框*/
...@@ -94,8 +92,6 @@ color: #F5F5F2;font-size: 12px;cursor:pointer;border-radius:0px 0px; position: a ...@@ -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 { float: left; }
.search-hot-keywords li:not(:last-child) { margin-right: 10px; } .search-hot-keywords li:not(:last-child) { margin-right: 10px; }
/* 分类*/
.goods-category-title,.navigation-user{display: none;}
/*侧边导航*/ /*侧边导航*/
.mui-mbar-tabs{ display:none;} .mui-mbar-tabs{ display:none;}
...@@ -120,53 +116,35 @@ color: #F5F5F2;font-size: 12px;cursor:pointer;border-radius:0px 0px; position: a ...@@ -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 {position: absolute; top: 0; right: 0; }
.top-nav-right .top-nav-items {float: left;} .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%;} .nav-search .logo-big img{width:100%;}
.search-bar {height: 34px; width: calc(100% - 146px);} .search-bar {height: 34px; margin:auto; width: 50%; padding-left: 10%;}
.search-bar input {width: 84%;height:30px;} .search-bar input {width: 79%;height:30px;}
.classified{display:none;} .classified{display:none;}
.mobile-navigation{display:none;} .mobile-navigation{display:none;}
.nav-search{ position:relative;top:0px;z-index:0;margin-bottom: 5px;margin-top: 5px;} .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: 15%; } #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-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 {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 .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 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 .am-icon-angle-right { margin-left: 5px; }
.navigation-user * { color:#fcff00; text-decoration: none; } .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-s {display:block;position: absolute;z-index: 100;}
#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-s .all-goods{font-size: 16px;}
#goods-category .category-content .all-goods em{ font: 12px/36px "Microsoft YaHei"; } .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 .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 .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} .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 ...@@ -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-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 .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 .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-in{ position: relative; z-index: 1; }
.category-content .menu-item .area-bg{ padding: 10px 0 10px 40px;} .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 .category-list li.hover .b-category-name a{ color:#4c4c4c; }
.category-content .menu-srot{width: 100%; overflow:hidden;} .category-content .menu-srot{width: 100%; overflow:hidden;}
.menu-srot .sort-side{ overflow:hidden } .category-content .menu-srot .sort-side{ overflow:hidden }
.sort-side .dl-sort{ float:left; width:100%; } .category-content .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;} .category-content .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;} .category-content .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; } .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; }
.sort-side dd a span.red{ color:#DB3E54; } .category-content .sort-side dd a span.red{ color:#DB3E54; }
.menu-srot .brand-side{ float: left; position: relative;margin-left: -10px; padding-top: 10px; } .category-content .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-item.top{top:0px;} .category-content .menu-item.top{top:0px;}
.category-content .menu-item.bottom{bottom: -2px;*bottom: -6px;_*bottom: -7px;} .category-content .menu-item.bottom{bottom: -2px;*bottom: -6px;_*bottom: -7px;}
.category-content .sort-side .dl-sort{ float:left; width:50%; }
/*导航图标*/
#meauBack{display: none;}
.sort-side .dl-sort{ float:left; width:50%; }
.category-list li.hover .menu-in { border: 1px solid #333; } .category-list li.hover .menu-in { border: 1px solid #333; }
}
/*小三角*/ @media only screen and (min-width: 1025px) {
.category li b.arrow{} .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, ...@@ -675,7 +643,6 @@ ul.am-dropdown-content > .am-active > a:focus,
.shop-navigation .am-container { .shop-navigation .am-container {
position: relative; position: relative;
} }
.shop-navigation .am-nav > li { .shop-navigation .am-nav > li {
white-space: nowrap; white-space: nowrap;
} }
...@@ -700,6 +667,7 @@ ul.am-dropdown-content > .am-active > a:focus, ...@@ -700,6 +667,7 @@ ul.am-dropdown-content > .am-active > a:focus,
@media only screen and (min-width: 641px) { @media only screen and (min-width: 641px) {
.shop-navigation { .shop-navigation {
background: transparent; background: transparent;
padding: 0 5px;
} }
.shop-navigation .am-topbar-nav > li > a { .shop-navigation .am-topbar-nav > li > a {
line-height: 40px; line-height: 40px;
...@@ -707,11 +675,20 @@ ul.am-dropdown-content > .am-active > a:focus, ...@@ -707,11 +675,20 @@ ul.am-dropdown-content > .am-active > a:focus,
.shop-navigation .am-topbar-nav > li > a:hover:after { .shop-navigation .am-topbar-nav > li > a:hover:after {
border-bottom-color: #d2354c; border-bottom-color: #d2354c;
} }
.shop-navigation .am-topbar-collapse {
margin-left: 150px;
}
} }
@media only screen and (min-width: 1025px) { @media only screen and (min-width: 1025px) {
.shop-navigation {
padding: 0;
}
.shop-navigation .am-container { .shop-navigation .am-container {
padding-left: 150px; padding-left: 150px;
} }
.shop-navigation .am-topbar-collapse {
margin-left: 0;
}
} }
@media only screen and (min-width: 1260px) { @media only screen and (min-width: 1260px) {
.shop-navigation .am-container { .shop-navigation .am-container {
...@@ -720,7 +697,7 @@ ul.am-dropdown-content > .am-active > a:focus, ...@@ -720,7 +697,7 @@ ul.am-dropdown-content > .am-active > a:focus,
} }
@media only screen and (max-width:1025px) { @media only screen and (max-width:1025px) {
.shop-navigation { .shop-navigation {
margin-top: 15px; margin-top: 20px;
} }
.shop-navigation .am-topbar-nav { .shop-navigation .am-topbar-nav {
width: 100%; width: 100%;
...@@ -729,15 +706,19 @@ ul.am-dropdown-content > .am-active > a:focus, ...@@ -729,15 +706,19 @@ ul.am-dropdown-content > .am-active > a:focus,
@media only screen and (max-width:641px) { @media only screen and (max-width:641px) {
.shop-navigation { .shop-navigation {
margin-top: 0; margin-top: 0;
background: #f3f3f3;
} }
.shop-navigation .am-topbar-collapse { .shop-navigation .am-topbar-collapse {
background: #f3f3f3; background: #eee;
} }
.shop-navigation .am-nav > li { .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) { .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%} ...@@ -449,7 +449,6 @@ li.am-comment{ width:100%}
/* 手机模式下 */ /* 手机模式下 */
@media only screen and (max-width:640px) { @media only screen and (max-width:640px) {
.nav-search { display: none; }
.goods-detail { padding: 0px; } .goods-detail { padding: 0px; }
.detail-title, .tb-detail-price, .detail-attr { padding: 0px 5px; } .detail-title, .tb-detail-price, .detail-attr { padding: 0px 5px; }
.buy-nav .buy-nav-opt { width: 40%; } .buy-nav .buy-nav-opt { width: 40%; }
...@@ -467,5 +466,5 @@ li.am-comment{ width:100%} ...@@ -467,5 +466,5 @@ li.am-comment{ width:100%}
.scoll .goods-video-submit-close { bottom: 50px; } .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 { ...@@ -280,9 +280,6 @@ form.form-validation #map {
.am-footer { .am-footer {
padding-bottom: 35px; padding-bottom: 35px;
} }
.nav-search {
display: none;
}
.pets-qrcode-related li img { .pets-qrcode-related li img {
max-width: 100%; max-width: 100%;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册