|
|
@@ -9,9 +9,9 @@
|
|
|
@font-face {
|
|
|
font-family: "iconfont";
|
|
|
/* Project id 4628991 */
|
|
|
- src: url('http://at.alicdn.com/t/c/font_4628991_227qwyy7mkwh.woff2?t=1721634317431') format('woff2'),
|
|
|
- url('http://at.alicdn.com/t/c/font_4628991_227qwyy7mkwh.woff?t=1721634317431') format('woff'),
|
|
|
- url('http://at.alicdn.com/t/c/font_4628991_227qwyy7mkwh.ttf?t=1721634317431') format('truetype');
|
|
|
+ src: url('http://at.alicdn.com/t/c/font_4628991_7q9ic67zb9e.woff2?t=1721718581369') format('woff2'),
|
|
|
+ url('http://at.alicdn.com/t/c/font_4628991_7q9ic67zb9e.woff?t=1721718581369') format('woff'),
|
|
|
+ url('http://at.alicdn.com/t/c/font_4628991_7q9ic67zb9e.ttf?t=1721718581369') format('truetype');
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
@@ -22,6 +22,10 @@
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
|
|
|
|
+ .icon-arrow:before {
|
|
|
+ content: "\e601";
|
|
|
+ }
|
|
|
+
|
|
|
.icon-search:before {
|
|
|
content: "\e739";
|
|
|
}
|
|
|
@@ -32,6 +36,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
/* css reset */
|
|
|
body,
|
|
|
ul,
|
|
|
@@ -180,9 +185,10 @@
|
|
|
}
|
|
|
|
|
|
/* 顶部导航 css start */
|
|
|
- .top-nav{
|
|
|
+ .top-nav {
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
+
|
|
|
.top-nav .tn-left {
|
|
|
float: left;
|
|
|
width: 56px;
|
|
|
@@ -203,23 +209,27 @@
|
|
|
line-height: 56px;
|
|
|
padding: 0 10px;
|
|
|
}
|
|
|
- .top-nav .tn-center li:hover{
|
|
|
+
|
|
|
+ .top-nav .tn-center li:hover {
|
|
|
cursor: pointer;
|
|
|
color: #ff6700;
|
|
|
}
|
|
|
+
|
|
|
.top-nav .tn-right {
|
|
|
float: right;
|
|
|
width: 300px;
|
|
|
height: 50px;
|
|
|
border: 1px solid #e0e0e0;
|
|
|
}
|
|
|
- .top-nav .tn-right .tnr-text{
|
|
|
+
|
|
|
+ .top-nav .tn-right .tnr-text {
|
|
|
float: left;
|
|
|
height: 50px;
|
|
|
line-height: 50px;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
- .top-nav .tn-right .tnr-inp{
|
|
|
+
|
|
|
+ .top-nav .tn-right .tnr-inp {
|
|
|
float: right;
|
|
|
height: 50px;
|
|
|
width: 50px;
|
|
|
@@ -227,9 +237,101 @@
|
|
|
line-height: 50px;
|
|
|
border-left: 1px solid #e0e0e0;
|
|
|
}
|
|
|
- .top-nav .tn-right i{
|
|
|
+
|
|
|
+ .top-nav .tn-right i {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
+ /* 轮播图区域 */
|
|
|
+ .slider-content .content{
|
|
|
+ height: 460px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .slider-content .slider-nav{
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ left: 0;
|
|
|
+ width: 234px;
|
|
|
+ height: 460px;
|
|
|
+ background-color: rgba(105, 101, 101, .6);;
|
|
|
+ }
|
|
|
+ .slider-content .slider-bgi{
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ left: 0;
|
|
|
+ width: 1226px;
|
|
|
+ height: 460px;
|
|
|
+ background-image: url("./img/sliderbg.jpg");
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ .slider-content .slider-nav ul{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .slider-content .slider-nav li{
|
|
|
+ padding: 11px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .slider-content .slider-nav li:hover{
|
|
|
+ background-color: #ff6700;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .slider-content .slider-nav li::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ .slider-content .slider-nav span{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .slider-content .slider-nav i{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .slider-content .arr-btn .arr-left{
|
|
|
+ width: 41px;
|
|
|
+ height: 69px;
|
|
|
+ background-image: url("./img/icon-slides.png");
|
|
|
+ position: absolute;
|
|
|
+ top:50%;
|
|
|
+ left: 234px;
|
|
|
+ margin-top: -35px;
|
|
|
+ background-position: -84px 0;
|
|
|
+ }
|
|
|
+ .slider-content .arr-btn .arr-left:hover{
|
|
|
+ background-position: 0 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .slider-content .arr-btn .arr-right{
|
|
|
+ width: 41px;
|
|
|
+ height: 69px;
|
|
|
+ background-image: url("./img/icon-slides.png");
|
|
|
+ position: absolute;
|
|
|
+ top:50%;
|
|
|
+ right: 0;
|
|
|
+ margin-top: -35px;
|
|
|
+ background-position: -125px 0;
|
|
|
+ }
|
|
|
+ .slider-content .arr-btn .arr-right:hover{
|
|
|
+ background-position: -42px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .slider-content .circle-content{
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ bottom: 50px;
|
|
|
+ }
|
|
|
+ .slider-content .circle-content li{
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: rgba(0,0,0,.4);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ border:2px solid rgba(0,0,0,.5)
|
|
|
+ }
|
|
|
+ .slider-content .circle-content li:hover{
|
|
|
+ border:2px solid rgba(0, 0, 0, .6);
|
|
|
+ background-color: rgba(255,255,255,.7);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -313,7 +415,71 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 轮播图区域 -->
|
|
|
- <div class="slider-content"></div>
|
|
|
+ <div class="slider-content">
|
|
|
+ <div class="content">
|
|
|
+ <div class="slider-bgi"></div>
|
|
|
+ <div class="slider-nav">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span>手机</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>电视</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>家电</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>笔记本</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>出行</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>耳机</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>健康</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>生活</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>智能</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>电源</span>
|
|
|
+ <i class="iconfont icon-arrow"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="arr-btn">
|
|
|
+ <ul>
|
|
|
+ <li class="arr-left"></li>
|
|
|
+ <li class="arr-right"></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="circle-content">
|
|
|
+ <ul>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 商品展示区域 -->
|
|
|
<div class="goods-content"></div>
|
|
|
</div>
|
