|
|
@@ -332,6 +332,83 @@
|
|
|
background-color: rgba(255,255,255,.7);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ /* 商品展示区域 */
|
|
|
+ .goods-content{
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ .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{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .goods-content .goods-one{
|
|
|
+ float: left;
|
|
|
+ width: 316px;
|
|
|
+ height: 170px;
|
|
|
+ background-color: red;
|
|
|
+ margin-left: 14px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .goods-content .goods-two{
|
|
|
+ float: left;
|
|
|
+ width: 316px;
|
|
|
+ height: 170px;
|
|
|
+ background-color: blue;
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
+ .goods-content .goods-three{
|
|
|
+ float: left;
|
|
|
+ width: 316px;
|
|
|
+ height: 170px;
|
|
|
+ background-color: yellow;
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
+ .goods-content .goods-nav ul{
|
|
|
+ padding: 3px;
|
|
|
+ }
|
|
|
+ .goods-content .goods-nav li{
|
|
|
+ width: 70px;
|
|
|
+ height: 82px;
|
|
|
+ padding: 0 3px;
|
|
|
+ float: left;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ opacity: .7;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .goods-content .goods-nav li::before{
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 64px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #4a443f;
|
|
|
+ top:-1;
|
|
|
+ left: 6px;
|
|
|
+ }
|
|
|
+ .goods-content .goods-nav li::after{
|
|
|
+ content: "";
|
|
|
+ width: 1px;
|
|
|
+ height: 70px;
|
|
|
+ background-color: #4a443f;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top:6px;
|
|
|
+ }
|
|
|
+ /* .goods-content .goods-nav li:nth-child(odd){
|
|
|
+ background-color: red;
|
|
|
+ } */
|
|
|
+ .goods-content .goods-nav li img{
|
|
|
+ display: block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin:18px auto 4px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -481,7 +558,47 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 商品展示区域 -->
|
|
|
- <div class="goods-content"></div>
|
|
|
+ <div class="goods-content">
|
|
|
+ <div class="content">
|
|
|
+ <div class="goods-nav">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="./img/icon6.png" alt="icon">
|
|
|
+ 保障服务
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/icon1.png" alt="icon">
|
|
|
+ 企业团购
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/icon2.png" alt="icon">
|
|
|
+ F码通道
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/icon3.png" alt="icon">
|
|
|
+ 米粉卡
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/icon4.png" alt="icon">
|
|
|
+ 以旧换新
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/icon5.png" alt="icon">
|
|
|
+ 话费充值
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="goods-one">
|
|
|
+ <img src="./img/goods.png" alt="img">
|
|
|
+ </div>
|
|
|
+ <div class="goods-two">
|
|
|
+ <img src="./img/goods2.jpg" alt="img">
|
|
|
+ </div>
|
|
|
+ <div class="goods-three">
|
|
|
+ <img src="./img/goods3.png" alt="img">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
