<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"> <span>退款原因</span> <!-- 跳转退款原因详细页 --> <view @click="Jump()">请选择<image src="/static/img/detail/xiala.png"></image> </view> </view> <view class="refund_explain"> <span>退款说明</span> <input placeholder="选填" value="" > </view> <view class="refund_img"> <span class="refund_img1">上传图片</span> <span class="refund_img2">(最多3张)</span> <view> <image v-bind:src="items.refund_img"></image> </view> </view> </view> <view class="button"> <span>提交</span> </view> </view> </template> <script> export default { //获取浏览器高度 beforeMount(height) { var h = document.documentElement.clientHeight || document.body.clientHeight; this.curheight = h - 44; }, methods: { Jump() { this.$router.push({ path: "refundWays" }); } }, 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: 353px; 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_explain, .refund_img, .refund_price, .refund_reason { margin-top: 16px; margin-bottom: 16px; } .refund_price { font-family: PingFangSC-Semibold; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; .refund_price1 { font-weight: bold; margin-right: 16px; } .refund_price2 { color: #ff6b4a; } } .refund_reason, .refund_explain span, .refund_img1 { font-family: PingFangSC-Regular; font-size: 12px; color: #333333; letter-spacing: -0.23px; line-height: 18px; } .refund_explain { display: flex; justify-content: space-between; align-items: center; } .refund_explain input, .refund_img2 { width: 78%; font-family: PingFangSC-Regular; font-size: 12px; color: #b8b8b8; letter-spacing: -0.23px; } .refund_reason { span { margin-right: 20px; } view { display: inline-block; font-family: PingFangSC-Regular; font-size: 12px; color: #b8b8b8; letter-spacing: -0.23px; width: 76%; image { width: 30rpx; height: 26rpx; float: right; } } } .refund_img { .refund_img1 { margin-right: 10px; } view { margin-top: 20px; width: 66rpx; height: 60rpx; image { width: 100%; height: 100%; } } } a { text-decoration: none; font-family: PingFangSC-Regular; font-size: 12px; color: #b8b8b8; letter-spacing: -0.23px; } .button { width: 100%; height: 112rpx; background: #ff6b4a; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 0; span { color: #ffffff; font-family: PingFangSC-Regular; font-size: 16px; letter-spacing: -0.3px; } } </style>