|
@@ -0,0 +1,421 @@
|
|
|
+<template>
|
|
|
+ <view class="page flex-col">
|
|
|
+ <view class="mod1 flex-col">
|
|
|
+ <view class="outer1 flex-col">
|
|
|
+ <view class="layer1 flex-row">
|
|
|
+ <view class="layer2 flex-col"></view>
|
|
|
+ <view class="layer3 flex-col"></view>
|
|
|
+ <text class="txt1">1:20 PM</text>
|
|
|
+ <view class="layer4 flex-col"></view>
|
|
|
+ <text class="info1">77%</text>
|
|
|
+ <view class="layer5 flex-col"></view>
|
|
|
+ </view>
|
|
|
+ <view class="layer6 flex-row">
|
|
|
+ <view class="section1 flex-col"></view>
|
|
|
+ <text class="info2">申请退款</text>
|
|
|
+ <view class="section2 flex-col"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="outer2 flex-col">
|
|
|
+ <view class="section3 flex-col">
|
|
|
+ <view class="outer3 flex-row">
|
|
|
+ <view class="wrap1">
|
|
|
+ <text class="word1">*</text>
|
|
|
+ <text class="word2">退款原因</text>
|
|
|
+ </view>
|
|
|
+ <text class="word3">请选择</text>
|
|
|
+ <view class="wrap2 flex-col"></view>
|
|
|
+ </view>
|
|
|
+ <view class="outer4 flex-col"></view>
|
|
|
+ <view class="outer5 flex-row">
|
|
|
+ <view class="group1">
|
|
|
+ <text class="info3">*</text>
|
|
|
+ <text class="txt2">退款金额</text>
|
|
|
+ </view>
|
|
|
+ <text class="txt3">最多可退 ¥978.80</text>
|
|
|
+ </view>
|
|
|
+ <text class="info4">如全额退款,优惠券会退回到您的账户</text>
|
|
|
+ <view class="outer6 flex-col"></view>
|
|
|
+ <view class="outer7 flex-row">
|
|
|
+ <text class="word4">补充描述</text>
|
|
|
+ <text class="txt4">选填,请输入补充描述~</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="outer8 flex-col">
|
|
|
+ <button class="box1 flex-col" @click="onClick_1">
|
|
|
+ <text class="word5">提交</text>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constants: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onClick_1() {
|
|
|
+ alert(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+
|
|
|
+
|
|
|
+ .page {
|
|
|
+ z-index: 1;
|
|
|
+ position: relative;
|
|
|
+ width: 750px;
|
|
|
+ height: 1334px;
|
|
|
+ background-color: rgba(244, 245, 247, 1);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mod1 {
|
|
|
+ z-index: auto;
|
|
|
+ width: 750px;
|
|
|
+ height: 1334px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer1 {
|
|
|
+ z-index: 9;
|
|
|
+ height: 128px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ width: 750px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer1 {
|
|
|
+ z-index: auto;
|
|
|
+ width: 729px;
|
|
|
+ height: 29px;
|
|
|
+ margin: 8px 0 0 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer2 {
|
|
|
+ z-index: 25;
|
|
|
+ width: 68px;
|
|
|
+ height: 12px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng452ce3ab103ee8dfb2f30acdb3456b4ef84746428cf073291168a9e4d8d6a793) 0px -1px no-repeat;
|
|
|
+ margin-top: 9px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer3 {
|
|
|
+ z-index: 35;
|
|
|
+ width: 24px;
|
|
|
+ height: 19px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf764088946be219f0e1e20ecb17f9d76a5752d81662e8f0bbd6f42156a4b2e8e) 100% no-repeat;
|
|
|
+ margin: 5px 0 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt1 {
|
|
|
+ z-index: 39;
|
|
|
+ width: 90px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(7, 7, 7, 1);
|
|
|
+ font-size: 24px;
|
|
|
+ letter-spacing: -0.00042765619582496583px;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: right;
|
|
|
+ margin-left: 217px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer4 {
|
|
|
+ z-index: 47;
|
|
|
+ width: 17px;
|
|
|
+ height: 28px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4abf04e6cd04acf8ccbb73524bb6a84abab5a57dc750e108da46635b9c571d86) 100% no-repeat;
|
|
|
+ margin: 1px 0 0 189px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info1 {
|
|
|
+ z-index: 51;
|
|
|
+ width: 50px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(7, 7, 7, 1);
|
|
|
+ font-size: 24px;
|
|
|
+ letter-spacing: -0.00042765619582496583px;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: right;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer5 {
|
|
|
+ z-index: 40;
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd98302c6d0c38d4aaec7f692e3cb2f5eb025d9cb76975ad7055bc28f99c6973e) 0px -1px no-repeat;
|
|
|
+ margin: 5px 0 0 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layer6 {
|
|
|
+ z-index: auto;
|
|
|
+ width: 713px;
|
|
|
+ height: 58px;
|
|
|
+ margin: 20px 0 0 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section1 {
|
|
|
+ z-index: 10;
|
|
|
+ width: 22px;
|
|
|
+ height: 40px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng01778e16fd11b94344cd231c28721a04e2d9ce4b2957421c6e59f879a48c2b20) -1px 0px no-repeat;
|
|
|
+ margin-top: 9px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info2 {
|
|
|
+ z-index: 12;
|
|
|
+ width: 147px;
|
|
|
+ height: 50px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36px;
|
|
|
+ letter-spacing: 0.5799999833106995px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 4px 0 0 256px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section2 {
|
|
|
+ z-index: 13;
|
|
|
+ width: 157px;
|
|
|
+ height: 58px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf8e59685a588a58b7c62a13e209a524a3aa770a898077d5fad993f74b2ac0178) -1px -1px no-repeat;
|
|
|
+ margin-left: 131px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer2 {
|
|
|
+ z-index: 52;
|
|
|
+ height: 315px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ align-self: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 702px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section3 {
|
|
|
+ z-index: auto;
|
|
|
+ width: 663px;
|
|
|
+ height: 255px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer3 {
|
|
|
+ z-index: auto;
|
|
|
+ width: 662px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap1 {
|
|
|
+ z-index: 60;
|
|
|
+ width: 129px;
|
|
|
+ height: 40px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .word1 {
|
|
|
+ font-size: 28px;
|
|
|
+ color: rgba(255, 36, 0, 1);
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .word2 {
|
|
|
+ font-size: 28px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .word3 {
|
|
|
+ z-index: 61;
|
|
|
+ width: 86px;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 28px;
|
|
|
+ letter-spacing: 0.4511111080646515px;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 48px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap2 {
|
|
|
+ z-index: 57;
|
|
|
+ width: 14px;
|
|
|
+ height: 24px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng49474bcaa6e359b706e1b1c97bab4cbfa7286bcbf1f19cefba6df3f1e5267f1e) -1px 0px no-repeat;
|
|
|
+ margin: 8px 0 0 385px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer4 {
|
|
|
+ z-index: 62;
|
|
|
+ width: 663px;
|
|
|
+ height: 1px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc5f00242238dd5d5fd7ec0841a64364334c0942567ae8990dae6583e879df9da) 100% no-repeat;
|
|
|
+ margin-top: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer5 {
|
|
|
+ z-index: auto;
|
|
|
+ width: 411px;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 24px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group1 {
|
|
|
+ z-index: 63;
|
|
|
+ width: 129px;
|
|
|
+ height: 40px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info3 {
|
|
|
+ font-size: 28px;
|
|
|
+ color: rgba(255, 36, 0, 1);
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt2 {
|
|
|
+ font-size: 28px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt3 {
|
|
|
+ z-index: 64;
|
|
|
+ width: 234px;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 28px;
|
|
|
+ letter-spacing: 0.4511111080646515px;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info4 {
|
|
|
+ z-index: 65;
|
|
|
+ width: 381px;
|
|
|
+ height: 30px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 22px;
|
|
|
+ letter-spacing: 0.3544444441795349px;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: left;
|
|
|
+ align-self: flex-start;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer6 {
|
|
|
+ z-index: 66;
|
|
|
+ width: 663px;
|
|
|
+ height: 1px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc5f00242238dd5d5fd7ec0841a64364334c0942567ae8990dae6583e879df9da) 100% no-repeat;
|
|
|
+ margin-top: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer7 {
|
|
|
+ z-index: auto;
|
|
|
+ width: 476px;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 23px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .word4 {
|
|
|
+ z-index: 54;
|
|
|
+ width: 114px;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 28px;
|
|
|
+ letter-spacing: 0.4511111080646515px;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt4 {
|
|
|
+ z-index: 55;
|
|
|
+ width: 299px;
|
|
|
+ height: 40px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 28px;
|
|
|
+ letter-spacing: 0.4511111080646515px;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outer8 {
|
|
|
+ z-index: 3;
|
|
|
+ height: 120px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
|
|
|
+ margin-top: 751px;
|
|
|
+ width: 750px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box1 {
|
|
|
+ z-index: 5;
|
|
|
+ height: 74px;
|
|
|
+ border-radius: 37px;
|
|
|
+ background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng297690d0623a896815dc437b47e69e43b43fa10e8fadc8b02a4bf5245c86c9f8) 100% no-repeat;
|
|
|
+ width: 690px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .word5 {
|
|
|
+ z-index: 6;
|
|
|
+ width: 60px;
|
|
|
+ height: 42px;
|
|
|
+ display: block;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+</style>
|