|
|
@@ -22,16 +22,94 @@
|
|
|
<van-grid-item icon="gift-card" text="文具小物" />
|
|
|
</van-grid>
|
|
|
</div>
|
|
|
- <div class="new-product"></div>
|
|
|
+ <div class="new-product">
|
|
|
+ <div class="new-product-title">新品首发</div>
|
|
|
+ <div class="product-item">
|
|
|
+ <div class="product-img-content">
|
|
|
+ <van-image
|
|
|
+ width="100%"
|
|
|
+ height="4rem"
|
|
|
+ src="https://img01.yzcdn.cn/vant/cat.jpeg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="product-info-content">
|
|
|
+ <van-row gutter="20">
|
|
|
+ <van-col span="18">
|
|
|
+ <div class="product-name">
|
|
|
+ 豆瓣好东西系列 有阅读量斜纹布包 《好东西》官方授权周边
|
|
|
+ </div>
|
|
|
+ <div class="product-info">
|
|
|
+ 《好东西》官方授权周边商品
|
|
|
+ </div>
|
|
|
+ <div class="product-tag">
|
|
|
+ <van-tag type="danger">最高减138元</van-tag>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="6">
|
|
|
+ <div class="product-price">
|
|
|
+ <span class="new-price">¥69</span>
|
|
|
+ <span class="old-price">¥79</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn-content">
|
|
|
+ <van-button size="small" round type="danger">立即购买</van-button>
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="type-product"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
+/* 新品区域 */
|
|
|
+.new-product{
|
|
|
+ padding: .2rem;
|
|
|
+}
|
|
|
+.new-product .new-product-title{
|
|
|
+ font-size: .3rem;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: .3rem;
|
|
|
+}
|
|
|
+.new-product .product-name{
|
|
|
+ font-size: .3rem;
|
|
|
+ font-weight: 700;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-bottom: .1rem;
|
|
|
+}
|
|
|
+.new-product .product-info{
|
|
|
+ font-size: .25rem;
|
|
|
+ color:#999;
|
|
|
+ margin-bottom: .06rem;
|
|
|
+}
|
|
|
+.new-product .product-tag{
|
|
|
+ line-height: 0;
|
|
|
+}
|
|
|
+.new-product .product-price{
|
|
|
+ margin-bottom: .3rem;
|
|
|
+}
|
|
|
+.new-product .product-price .new-price{
|
|
|
+ font-size: .3rem;
|
|
|
+ color: #dd1944;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.new-product .product-price .old-price{
|
|
|
+ font-size: .2rem;
|
|
|
+ color: #999;
|
|
|
+ text-decoration: line-through;
|
|
|
+}
|
|
|
+.new-product .product-price,.new-product .btn-content{
|
|
|
+ line-height: 0;
|
|
|
+}
|
|
|
+/* 轮播图 */
|
|
|
.my-swipe .van-swipe-item img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
.nav-content {
|
|
|
- border-bottom: .2rem solid #f9f9f9;
|
|
|
+ border-bottom: 0.2rem solid #f9f9f9;
|
|
|
}
|
|
|
</style>
|
|
|
<script>
|
