diff --git a/src/components/BottomSheet/BottomSheet.vue b/src/components/BottomSheet/BottomSheet.vue index c3e818c..9c5b849 100644 --- a/src/components/BottomSheet/BottomSheet.vue +++ b/src/components/BottomSheet/BottomSheet.vue @@ -1,907 +1,940 @@ + .wrap { + height: 100vh; + background-color: #f2f2f2; + font-family: PingFangSC-Regular; + letter-spacing: -0.23px; + padding-top: 19rpx; + } + + .content { + background-color: #ffffff; + border:1px #000 solid; + border-radius: 8px; + border-radius: 8px; + padding: 40rpx 56rpx; + margin-left: 40rpx; + width: 670rpx; + box-sizing: border-box; + + .item { + display: flex; + border:1px #000 solid; + justify-content: flex-start; + font-size: 14px; + align-items: center; + height: 112rpx; + border-bottom: 1rpx solid #e9e9e9; + + .itemText { + width: 162rpx; + font-family: PingFangSC-Regular; + letter-spacing: -0.26px; + } + + .btn { + color: #333333 !important; + } + } + + .check { + justify-content: space-between; + } + } + + .button { + position: fixed; + bottom: 0; + left: 0; + height: 112rpx; + width: 100%; + background: #ff6b4a; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + color: #ffffff; + letter-spacing: -0.3px; + } + diff --git a/src/pages/address/addressList.vue b/src/pages/address/addressList.vue index f949109..05e26ec 100644 --- a/src/pages/address/addressList.vue +++ b/src/pages/address/addressList.vue @@ -21,7 +21,8 @@ - {{item.address.replace(/[-]/g,' ')}}\n{{item.add_detail}} + + {{item.province}}{{item.city}}{{item.address}}\n{{item.add_detail}} - - - - - - - - - - - - 非常戴镜 - - - - - - - - - - - - {{item.p_name}} - - - - 使用人:{{item.peopleName}} - - - {{item.sku_name}} - - - - - - - - ¥{{item.nowPrice*item.num}} - (限购{{maxCount}}副) - - - - {{item.num}} - + - - - - - - - - - 实付金额:¥{{totalPrice}} - - 立即结算 - - - - - - - - - diff --git a/src/pages/confirmOrder/confirmOrder.vue b/src/pages/confirmOrder/confirmOrder.vue index 14eab55..34b816e 100644 --- a/src/pages/confirmOrder/confirmOrder.vue +++ b/src/pages/confirmOrder/confirmOrder.vue @@ -1,190 +1,123 @@ + .wrap { + height: 100vh; + background-color: #f2f2f2; + font-family: PingFangSC-Regular; + letter-spacing: -0.23px; + position: absolute; + } + + .addAddress { + background-color: #ffffff; + box-sizing: border-box; + height: 124rpx; + width: 100%; + display: flex; + align-items: center; + padding: 0 40rpx; + + .addIcon { + background-color: #f2f2f2; + height: 56rpx; + width: 60rpx; + border-radius: 4rpx; + display: flex; + justify-content: center; + align-items: center; + margin-right: 40rpx; + } + + image { + height: 28rpx; + width: 30rpx; + } + + .addressText { + font-size: 28rpx; + color: #333333; + margin-right: 364rpx; + } + } + + .content { + background-color: #f2f2f2; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 40rpx; + box-sizing: border-box; + + .orderInfo { + width: 670rpx; + min-height: 488rpx; + background-color: #ffffff; + border-radius: 20rpx; + box-sizing: border-box; + padding: 0 40rpx 40rpx 40rpx; + + .title { + display: flex; + align-items: center; + font-size: 28rpx; + color: #333333; + height: 60rpx; + line-height: 40rpx; + padding: 10rpx 10rpx 10rpx 0rpx; + + image { + margin-right: 20rpx; + } + } + + .infoBox { + margin-top: 42rpx; + + .infoTop { + display: flex; + flex-direction: row; + + image { + height: 188rpx; + width: 188rpx; + margin-right: 24rpx; + } + + .infoRight { + width: 374rpx; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + + .goodName { + font-size: 28rpx; + color: #333333; + } + + .remarks { + font-size: 20rpx; + color: #999999; + } + + .priceBox { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + .price { + color: #ff6b4a; + font-size: 28rpx; + + text { + margin-left: 10rpx; + } + } + + .originCost { + text-decoration: line-through; + color: #999999; + font-size: 20rpx; + } + + .counter { + display: flex; + flex-direction: row; + justify-content: space-between; + font-size: 28rpx; + color: #333333; + width: 122rpx; + + .btn { + display: flex; + justify-content: center; + line-height: 32rpx; + height: 32rpx; + width: 32rpx; + background-color: #f2f2f2; + color: #cfcfcf; + } + } + } + } + } + + .infoBottom { + display: flex; + flex-direction: column; + justify-content: flex-start; + font-size: 24rpx; + color: #333333; + + text { + color: #999999; + margin-left: 20rpx; + } + + .norm { + margin-top: 28rpx; + } + + .shippingMethod { + margin-top: 12rpx; + } + + .message { + display: flex; + flex-direction: row; + align-items: center; + margin-top: 18rpx; + + input { + margin-left: 20rpx; + width: 75%; + } + } + } + } + } + + .payWay { + height: 464rpx; + width: 670rpx; + background-color: #ffffff; + color: #333333; + font-size: 24rpx; + border-radius: 20rpx; + box-sizing: border-box; + padding: 0 52rpx 0rpx 40rpx; + margin-top: 20rpx; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + .item { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 115rpx; + + .itemRight { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + image { + height: 24rpx; + width: 12rpx; + } + + .rightText { + margin-right: 20rpx; + text-align: right; + + .choosePayWay { + display: flex; + align-items: center; + + text { + color: #333333; + } + + image { + height: 36rpx; + width: 40rpx; + margin-right: 8px; + } + } + + .randomSubstraction { + color: #ff6b4a; + } + + .preferentialWay { + color: #999999; + } + } + + .freight, + .total { + margin-right: 32rpx; + } + + text { + color: #ff6b4a; + } + } + } + } + + // .checkBox { + // height: 58rpx; + // line-height: 58rpx; + // width: 100%; + // margin-top: 36rpx; + // margin-left: 40rpx; + // font-size: 12px; + // color: #999999; + // } + } + + .footer { + height: 112rpx; + width: 100%; + background-color: #fff; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + bottom: 0; + z-index: 9999; + + .footerLeft { + display: flex; + justify-content: center; + align-items: center; + width: 50%; + color: #333333; + + text { + color: #ff6b4a; + } + } + + .footerRight { + display: flex; + justify-content: flex-end; + align-items: center; + width: 50%; + margin-right: 26rpx; + + .paybtn { + display: flex; + justify-content: center; + align-items: center; + background: #ff6b4a; + border-radius: 20px; + border-radius: 20px; + color: #ffffff; + width: 204rpx; + height: 80rpx; + } + } + } + + // 地址信息样式 + .order-user { + width: 670rpx; + height: 228rpx; + background: #ffffff; + border-radius: 14rpx; + margin: 0 auto; + margin-top: 20rpx; + position: relative; + + .order-user-head { + display: flex; + height: 108rpx; + width: 100%; + align-items: center; + padding-left: 126rpx; + box-sizing: border-box; + + .name { + display: flex; + justify-content: space-between; + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + margin-right: 20rpx; + + .default { + height: 40rpx; + width: 80rpx; + background-color: #4a90e2; + border-radius: 13px; + border-radius: 13px; + text-align: center; + margin-right: 20rpx; + + text { + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; + color: #ffffff; + letter-spacing: -0.23px; + } + } + } + + .mobile { + font-size: 14px; + color: #999999; + letter-spacing: -0.26px; + } + } + + .order-user-body { + display: flex; + width: 100%; + + image { + width: 24px; + height: 28px; + margin: 12rpx 32rpx 0 40rpx; + } + + .address { + font-weight: bold; + font-size: 14px; + color: #333333; + letter-spacing: -0.26px; + } + } + + .arrow { + width: 12px; + height: 12px; + position: absolute; + right: 40rpx; + bottom: 104rpx; + } + } + + .last_zhanwei { + background: #f2f2f2; + height: 60px; + } + diff --git a/src/pages/details/components/Introduce.vue b/src/pages/details/components/Introduce.vue index d99ef9c..af6f59b 100644 --- a/src/pages/details/components/Introduce.vue +++ b/src/pages/details/components/Introduce.vue @@ -1,113 +1,115 @@