|
|
@@ -9,9 +9,9 @@
|
|
|
@font-face {
|
|
|
font-family: "iconfont";
|
|
|
/* Project id 4628991 */
|
|
|
- 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');
|
|
|
+ src: url('http://at.alicdn.com/t/c/font_4628991_8ug3ppxqype.woff2?t=1721801208426') format('woff2'),
|
|
|
+ url('http://at.alicdn.com/t/c/font_4628991_8ug3ppxqype.woff?t=1721801208426') format('woff'),
|
|
|
+ url('http://at.alicdn.com/t/c/font_4628991_8ug3ppxqype.ttf?t=1721801208426') format('truetype');
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
@@ -22,6 +22,22 @@
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
|
|
|
|
+ .icon-phone:before {
|
|
|
+ content: "\e63b";
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-editor2:before {
|
|
|
+ content: "\e62e";
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-user:before {
|
|
|
+ content: "\e7ae";
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-kefu:before {
|
|
|
+ content: "\ec2e";
|
|
|
+ }
|
|
|
+
|
|
|
.icon-arrow:before {
|
|
|
content: "\e601";
|
|
|
}
|
|
|
@@ -37,10 +53,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
/* css reset */
|
|
|
body,
|
|
|
ul,
|
|
|
- p,h2 {
|
|
|
+ p,
|
|
|
+ h2 {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
@@ -241,136 +259,163 @@
|
|
|
.top-nav .tn-right i {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
+
|
|
|
/* 轮播图区域 */
|
|
|
- .slider-content .content{
|
|
|
+ .slider-content .content {
|
|
|
height: 460px;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .slider-content .slider-nav{
|
|
|
+
|
|
|
+ .slider-content .slider-nav {
|
|
|
position: absolute;
|
|
|
- top:0;
|
|
|
+ top: 0;
|
|
|
left: 0;
|
|
|
width: 234px;
|
|
|
height: 460px;
|
|
|
- background-color: rgba(105, 101, 101, .6);;
|
|
|
+ background-color: rgba(105, 101, 101, .6);
|
|
|
+ ;
|
|
|
}
|
|
|
- .slider-content .slider-bgi{
|
|
|
+
|
|
|
+ .slider-content .slider-bgi {
|
|
|
position: absolute;
|
|
|
- top:0;
|
|
|
+ top: 0;
|
|
|
left: 0;
|
|
|
width: 1226px;
|
|
|
height: 460px;
|
|
|
background-image: url("./img/sliderbg.jpg");
|
|
|
background-size: contain;
|
|
|
}
|
|
|
- .slider-content .slider-nav ul{
|
|
|
+
|
|
|
+ .slider-content .slider-nav ul {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
- .slider-content .slider-nav li{
|
|
|
+
|
|
|
+ .slider-content .slider-nav li {
|
|
|
padding: 11px 20px;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .slider-content .slider-nav li:hover{
|
|
|
+
|
|
|
+ .slider-content .slider-nav li:hover {
|
|
|
background-color: #ff6700;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .slider-content .slider-nav li::after{
|
|
|
+
|
|
|
+ .slider-content .slider-nav li::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
clear: both;
|
|
|
}
|
|
|
- .slider-content .slider-nav span{
|
|
|
+
|
|
|
+ .slider-content .slider-nav span {
|
|
|
float: left;
|
|
|
}
|
|
|
- .slider-content .slider-nav i{
|
|
|
+
|
|
|
+ .slider-content .slider-nav i {
|
|
|
float: right;
|
|
|
}
|
|
|
- .slider-content .arr-btn .arr-left{
|
|
|
+
|
|
|
+ .slider-content .arr-btn .arr-left {
|
|
|
width: 41px;
|
|
|
height: 69px;
|
|
|
background-image: url("./img/icon-slides.png");
|
|
|
position: absolute;
|
|
|
- top:50%;
|
|
|
+ top: 50%;
|
|
|
left: 234px;
|
|
|
margin-top: -35px;
|
|
|
background-position: -84px 0;
|
|
|
}
|
|
|
- .slider-content .arr-btn .arr-left:hover{
|
|
|
+
|
|
|
+ .slider-content .arr-btn .arr-left:hover {
|
|
|
background-position: 0 0;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .slider-content .arr-btn .arr-right{
|
|
|
+
|
|
|
+ .slider-content .arr-btn .arr-right {
|
|
|
width: 41px;
|
|
|
height: 69px;
|
|
|
background-image: url("./img/icon-slides.png");
|
|
|
position: absolute;
|
|
|
- top:50%;
|
|
|
+ top: 50%;
|
|
|
right: 0;
|
|
|
margin-top: -35px;
|
|
|
background-position: -125px 0;
|
|
|
}
|
|
|
- .slider-content .arr-btn .arr-right:hover{
|
|
|
+
|
|
|
+ .slider-content .arr-btn .arr-right:hover {
|
|
|
background-position: -42px 0;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .slider-content .circle-content{
|
|
|
+
|
|
|
+ .slider-content .circle-content {
|
|
|
position: absolute;
|
|
|
right: 50px;
|
|
|
bottom: 50px;
|
|
|
}
|
|
|
- .slider-content .circle-content li{
|
|
|
+
|
|
|
+ .slider-content .circle-content li {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
- background-color: rgba(0,0,0,.4);
|
|
|
+ background-color: rgba(0, 0, 0, .4);
|
|
|
border-radius: 50%;
|
|
|
display: inline-block;
|
|
|
- border:2px solid rgba(0,0,0,.5)
|
|
|
+ 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);
|
|
|
+
|
|
|
+ .slider-content .circle-content li:hover {
|
|
|
+ border: 2px solid rgba(0, 0, 0, .6);
|
|
|
+ background-color: rgba(255, 255, 255, .7);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
/* 商品展示区域 */
|
|
|
- .goods-content{
|
|
|
+ .goods-content {
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
- .goods-content .goods-nav{
|
|
|
+
|
|
|
+ .goods-content .goods-nav {
|
|
|
float: left;
|
|
|
width: 234px;
|
|
|
height: 170px;
|
|
|
background-color: #5f5750;
|
|
|
}
|
|
|
- .goods-content .goods-one img,.goods-content .goods-two img,.goods-content .goods-three img{
|
|
|
+
|
|
|
+ .goods-content .goods-one img,
|
|
|
+ .goods-content .goods-two img,
|
|
|
+ .goods-content .goods-three img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .goods-content .goods-one{
|
|
|
+
|
|
|
+ .goods-content .goods-one {
|
|
|
float: left;
|
|
|
width: 316px;
|
|
|
height: 170px;
|
|
|
background-color: red;
|
|
|
margin-left: 14px;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- .goods-content .goods-two{
|
|
|
+
|
|
|
+ .goods-content .goods-two {
|
|
|
float: left;
|
|
|
width: 316px;
|
|
|
height: 170px;
|
|
|
background-color: blue;
|
|
|
margin-left: 14px;
|
|
|
}
|
|
|
- .goods-content .goods-three{
|
|
|
+
|
|
|
+ .goods-content .goods-three {
|
|
|
float: left;
|
|
|
width: 316px;
|
|
|
height: 170px;
|
|
|
background-color: yellow;
|
|
|
margin-left: 14px;
|
|
|
}
|
|
|
- .goods-content .goods-nav ul{
|
|
|
+
|
|
|
+ .goods-content .goods-nav ul {
|
|
|
padding: 3px;
|
|
|
}
|
|
|
- .goods-content .goods-nav li{
|
|
|
+
|
|
|
+ .goods-content .goods-nav li {
|
|
|
width: 70px;
|
|
|
height: 82px;
|
|
|
padding: 0 3px;
|
|
|
@@ -381,59 +426,68 @@
|
|
|
opacity: .7;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .goods-content .goods-nav li::before{
|
|
|
+
|
|
|
+ .goods-content .goods-nav li::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
display: block;
|
|
|
width: 64px;
|
|
|
height: 1px;
|
|
|
background-color: #4a443f;
|
|
|
- top:-1;
|
|
|
+ top: -1;
|
|
|
left: 6px;
|
|
|
}
|
|
|
- .goods-content .goods-nav li::after{
|
|
|
+
|
|
|
+ .goods-content .goods-nav li::after {
|
|
|
content: "";
|
|
|
width: 1px;
|
|
|
height: 70px;
|
|
|
background-color: #4a443f;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
- top:6px;
|
|
|
+ top: 6px;
|
|
|
}
|
|
|
+
|
|
|
/* .goods-content .goods-nav li:nth-child(odd){
|
|
|
background-color: red;
|
|
|
} */
|
|
|
- .goods-content .goods-nav li img{
|
|
|
+ .goods-content .goods-nav li img {
|
|
|
display: block;
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
- margin:18px auto 4px;
|
|
|
+ margin: 18px auto 4px;
|
|
|
}
|
|
|
+
|
|
|
/* 广告图 css */
|
|
|
- .banner-box{
|
|
|
+ .banner-box {
|
|
|
background-color: #aaa;
|
|
|
margin-top: 15px;
|
|
|
- padding-top:15px;
|
|
|
+ padding-top: 15px;
|
|
|
}
|
|
|
- .banner-box img{
|
|
|
+
|
|
|
+ .banner-box img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
/* 文字按钮css */
|
|
|
- .text-btn-content{
|
|
|
+ .text-btn-content {
|
|
|
background-color: #aaa;
|
|
|
line-height: 58px;
|
|
|
}
|
|
|
- .text-btn-content .content{
|
|
|
+
|
|
|
+ .text-btn-content .content {
|
|
|
position: relative;
|
|
|
height: 58px;
|
|
|
}
|
|
|
- .text-btn-content .content div{
|
|
|
+
|
|
|
+ .text-btn-content .content div {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
- top:0;
|
|
|
+ top: 0;
|
|
|
height: 58px;
|
|
|
}
|
|
|
- .text-btn-content .content i{
|
|
|
+
|
|
|
+ .text-btn-content .content i {
|
|
|
display: inline-block;
|
|
|
height: 12px;
|
|
|
width: 12px;
|
|
|
@@ -444,23 +498,27 @@
|
|
|
padding: 4px;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
+
|
|
|
/* 商品列表部分 */
|
|
|
- .goods-list-content{
|
|
|
+ .goods-list-content {
|
|
|
background-color: #aaa;
|
|
|
}
|
|
|
- .goods-list-content .goods-list-left{
|
|
|
+
|
|
|
+ .goods-list-content .goods-list-left {
|
|
|
width: 234px;
|
|
|
height: 614px;
|
|
|
/* background-color: blue; */
|
|
|
float: left;
|
|
|
}
|
|
|
- .goods-list-content .goods-list-right{
|
|
|
+
|
|
|
+ .goods-list-content .goods-list-right {
|
|
|
float: left;
|
|
|
height: 614px;
|
|
|
width: 992px;
|
|
|
/* background-color: red; */
|
|
|
}
|
|
|
- .goods-list-content .goods-list-right li{
|
|
|
+
|
|
|
+ .goods-list-content .goods-list-right li {
|
|
|
width: 234px;
|
|
|
height: 300px;
|
|
|
/* background-color: yellow; */
|
|
|
@@ -469,17 +527,20 @@
|
|
|
text-align: center;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
- .goods-list-content li img{
|
|
|
+
|
|
|
+ .goods-list-content li img {
|
|
|
width: 160px;
|
|
|
height: 160px;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
- .goods-list-content li .title{
|
|
|
+
|
|
|
+ .goods-list-content li .title {
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #333;
|
|
|
}
|
|
|
- .goods-list-content li .desc{
|
|
|
+
|
|
|
+ .goods-list-content li .desc {
|
|
|
font-size: 12px;
|
|
|
color: #b0b0b0;
|
|
|
text-wrap: nowrap;
|
|
|
@@ -487,14 +548,32 @@
|
|
|
text-overflow: ellipsis;
|
|
|
margin: 10px;
|
|
|
}
|
|
|
- .goods-list-content .price span{
|
|
|
+
|
|
|
+ .goods-list-content .price span {
|
|
|
color: #ff6700;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
- .goods-list-content .price del{
|
|
|
+
|
|
|
+ .goods-list-content .price del {
|
|
|
color: #b0b0b0;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+
|
|
|
+ /* 工具栏css */
|
|
|
+ .tool-bar {
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: 613px;
|
|
|
+ bottom: 100px;
|
|
|
+ border:1px solid #666;
|
|
|
+ }
|
|
|
+ .tool-bar li{
|
|
|
+ padding:3px 2px;
|
|
|
+ border-bottom: 1px solid #666;
|
|
|
+ }
|
|
|
+ .tool-bar li i{
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -731,6 +810,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 右侧工具条 -->
|
|
|
+ <div class="tool-bar">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-phone"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-user"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-kefu"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-editor2"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-cart"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
