|
|
@@ -2,20 +2,246 @@
|
|
|
<div>
|
|
|
<!--轮播图-->
|
|
|
<Banner/>
|
|
|
+ <!--价格信息-->
|
|
|
+ <div class="main">
|
|
|
+ <div class="header">
|
|
|
+ <div class="price-wrap">
|
|
|
+ <p class="price">
|
|
|
+ <span>￥</span>
|
|
|
+ <span>129</span>
|
|
|
+ </p>
|
|
|
+ <p class="origin">券后价</p>
|
|
|
+ </div>
|
|
|
+ <div class="income">
|
|
|
+ <span>预估收益 ¥</span>
|
|
|
+ <span>44.77</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="origin-price">原价¥ 599</p>
|
|
|
+ <div
|
|
|
+ class="name-wrap">
|
|
|
+ <img src="" alt="">
|
|
|
+ <p>这是名字这是名字这是名字这是名字这是名字这是名这是名字这是名字这是名字这是名字这是名字这是名</p>
|
|
|
+ </div>
|
|
|
+ <div class="coupon-wrap">
|
|
|
+ <div>
|
|
|
+ <p class="amount">333元优惠券</p>
|
|
|
+ <p class="expires">10月20日-11月11日</p>
|
|
|
+ </div>
|
|
|
+ <van-button type="default">立即领券</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--底部按钮-->
|
|
|
+ <div class="footer">
|
|
|
+ <a href="javascript:;">
|
|
|
+ <span>分享赚</span>
|
|
|
+ <span>￥99999.79</span>
|
|
|
+ </a>
|
|
|
+ <a href="javascript:;">
|
|
|
+ <span>自购省</span>
|
|
|
+ <span>券￥99999.79 + ￥99999999.79</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Banner from './child/banner'
|
|
|
+import { Button } from 'vant'
|
|
|
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
components: {
|
|
|
- Banner
|
|
|
+ Banner,
|
|
|
+ 'van-button': Button
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.main {
|
|
|
+ width: 365px;
|
|
|
+ padding-bottom: 120px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.price-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.price {
|
|
|
+ margin-right: 15px;
|
|
|
+ font-size: 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-right: 3px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ font-size: 21px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.origin {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.income {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ padding-top: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #EA483F;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.origin-price {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.name-wrap {
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.coupon-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 359px;
|
|
|
+ height: 84px;
|
|
|
+ margin-top: 14px;
|
|
|
+ background: url("./image/ic_coupon_big.png") center center/100% 100% no-repeat;
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ width: 227px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 31px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expires {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #BCA763;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
|
|
|
+ ::v-deep .van-button--default {
|
|
|
+ width: 86px;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ .van-button__text {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 10;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 13px 0 30px;
|
|
|
+ border-top: 1px solid #F1F1F1;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ a {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 168px;
|
|
|
+ height: 50px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ color: #fff;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-left: 14px;
|
|
|
+ color: #333333;
|
|
|
+ background: #f8d548;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
panyong
