<template> <view class="container" v-bind:style="{height: curheight+'px'}" > <view class="refund" v-for="(items) in refund" :key="items.key" > <view class="detail"> <view class="detail_img"> <image v-bind:src="items.img"></image> </view> <view class="detail2"> <view class="detail_name">{{items.name}}</view> <view class="detail_standard">规格:{{items.standard}}</view> <view class="detail_price"> <span>¥{{items.price}}</span> <span>X{{items.number}}</span> </view> </view> </view> <view class="refund_price"> <span class="refund_price1">退款金额</span> <span class="refund_price2">¥{{items.refundprice}}</span> </view> <view class="refund_reason"> <view>仅退款<image src="/static/img/detail/xiala.png"></image> </view> </view> <view class="refund_reason"> <view>退款退货<image src="/static/img/detail/xiala.png"></image> </view> </view> <view class="refund_reason"> <view>换货<image src="/static/img/detail/xiala.png"></image> </view> </view> </view> </view> </template> <script> export default { //获取浏览器高度 beforeMount(height) { var h = document.documentElement.clientHeight || document.body.clientHeight; this.curheight = h - 44; }, data() { return { curheight: 0, //浏览器高度 refund: [ { key: 0, img: "/static/img/detail/d1.png", name: "商品名称", standard: "玫瑰金/钛合金/防日光防紫外线/超薄超轻", price: 180, number: 1, refundprice: 110, refund_img: "/static/img/detail/refund_img.png" } ] }; } }; </script> <style lang="scss"> .container { background: #f2f2f2; padding-top: 10px; box-sizing: border-box; } .refund { width: 90%; height: 300px; margin: 0 auto; background: #ffffff; box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06); border-radius: 8px; padding: 14px; box-sizing: border-box; } .detail { display: flex; justify-content: space-between; font-family: PingFangSC-Regular; margin-bottom: 20px; .detail2 { width: 64%; view { margin-bottom: 8px; } .detail_name { font-size: 14px; color: #333333; } .detail_standard { font-size: 12px; color: #999999; } .detail_price { font-size: 14px; color: #999999; display: flex; justify-content: space-between; } } .detail_img { width: 188rpx; height: 188rpx; border-radius: 40px; image { width: 100%; height: 100%; } } } .refund_price { font-family: PingFangSC-Semibold; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; margin-bottom: 26px; .refund_price1 { font-weight: bold; margin-right: 16px; } .refund_price2 { color: #ff6b4a; } } .refund_reason { margin-top: 16px; margin-bottom: 16px; font-family: PingFangSC-Regular; font-size: 12px; color: #333333; letter-spacing: -0.23px; line-height: 18px; view { display: inline-block; font-size: 12px; color: #333333; letter-spacing: -0.23px; line-height: 18px; width: 90%; image { width: 30rpx; height: 24rpx; float: right; } } } </style>