[优化] 申请退款页面样式

pages/order/apply_refund.vue

@@ -40,7 +40,11 @@
 		<view class="bg-white lf-m-b-6">
 			<view class="lf-p-t-30 lf-p-l-32 lf-p-r-32 lf-p-b-36">
 				<view class="lf-font-28 lf-color-black">退款说明</view>
-				<input type="text" value="" placeholder="请输入退款说明" class="lf-m-t-30 lf-border-bottom" />
+				<!-- <input type="text" value="" placeholder="请输入退款说明" class="lf-m-t-30 lf-border-bottom" /> -->
+				<view class="cu-self menu" style="margin-top: 30rpx; position: relative;">
+					<textarea :cursor-spacing="120" maxlength="300" :adjust-position="true" type="text" v-model="applyInfo" class="text-left lf-font-32 area-self" placeholder="请输入退款说明" />
+					<view class="font-change">{{ applyInfo.length }}/300</view>
+				</view>
 			</view>
 		</view>
 		
@@ -58,10 +62,7 @@
 				</view>
 			</view>
 		</view>
-		
-		
-		
-		<view class="btn-bottom solid-top1" style="bottom: 60rpx;">
+		<view class="lf-m-t-40 lf-m-b-40">
 			<view class="padding-lr-lg">
 				<button class="cu-btn block lf-bg-blue lg round" @tap="subimitApply()">
 					<text class="text-df text-white">确认申请</text>
@@ -77,6 +78,7 @@
 			return {
 				hostImg: '',
 				img_list: [], // 反馈问题图片
+				applyInfo: '', // 退款说明
 			}
 		},
 		methods: {
@@ -241,4 +243,19 @@
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
 	}
+	.area-self {
+		width: 100%;
+		padding: 30rpx;
+		padding-bottom: 36rpx;
+		color: #999999;
+		border: 1px solid #D0D0D0;
+		border-radius: 10rpx;
+	}
+	.font-change{
+		position: absolute;
+		right: 10rpx;
+		bottom: 10rpx;
+		width: max-content;
+		color: #777777;
+	}
 </style>