fix：退款样式

src/views/refund/gold/addCoinRefund.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { onMounted, reactive } from 'vue'
-import { ref, computed, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import {onMounted, reactive} from 'vue'
+import {ref, computed, watch} from 'vue'
+import {ElMessage} from 'element-plus'
+import {Plus} from '@element-plus/icons-vue'
 import axios from 'axios'
-import { ElMessageBox } from 'element-plus'
+import {ElMessageBox} from 'element-plus'
 import API from '@/util/http.js'
 import moment from 'moment'
 // import _ from 'lodash'
@@ -18,7 +18,7 @@ const addRe = ref({
 const adminData = ref({})
 const getAdminData = async function () {
   try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
+    const result = await API({url: '/admin/userinfo', data: {}})
     adminData.value = result
     addRefund.value.adminId = adminData.value.id
     console.log('请求成功', result)
@@ -155,16 +155,16 @@ const validateJwCode = (rule, value, callback) => {
   callback();
 };
 const rules = reactive({
-  jwcode: [{ required: true, validator: validateJwCode, trigger: 'blur' }],
-  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
-  goodsName: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
-  taskGold: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
-  freeGold: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
+  jwcode: [{required: true, validator: validateJwCode, trigger: 'blur'}],
+  refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
+  goodsName: [{required: true, message: '请选择退款商品', trigger: 'blur'}],
+  taskGold: [{required: true, message: '请输入任务金币', trigger: 'blur'}],
+  freeGold: [{required: true, message: '请输入免费金币', trigger: 'blur'}],
   permanentGold: [
-    { required: true, message: '请输入永久金币', trigger: 'blur' }
+    {required: true, message: '请输入永久金币', trigger: 'blur'}
   ],
   sumGold: [
-    { required: true, message: '请选择付款方式', trigger: 'blur' },
+    {required: true, message: '请选择付款方式', trigger: 'blur'},
     {
       validator: (rule, value) => {
         if (value === 0) {
@@ -251,7 +251,7 @@ const getUser = async function (jwcode) {
 
 
 // 退款类型，写死为商品退款
-const refundType = ref([{ value: '商品退款', label: '商品退款' }]);
+const refundType = ref([{value: '商品退款', label: '商品退款'}]);
 
 // 获取退款类型
 // const getRefundTypes = async function () {
@@ -442,21 +442,23 @@ onMounted(async function () {
 
 <template>
   <div>
-
-    <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" label-position="right" style="max-width: 750px" class="form-style">
+    <div class="userAndForm">
+      <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" label-position="right"
+               style="max-width: 750px" class="form-style">
         <el-form-item prop="jwcode" label="精网号">
-        <el-input v-model="addRefund.jwcode" style="width: 220px" @change="getGoods(addRefund.jwcode)" />
+          <el-input v-model="addRefund.jwcode" style="width: 220px" @change="getGoods(addRefund.jwcode)"/>
           <el-button type="primary" @click="getUser(addRefund.jwcode)" style="margin-left: 20px">查询
           </el-button>
         </el-form-item>
         <el-form-item prop="refundType" label="退款类型">
           <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px">
-          <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value"/>
           </el-select>
         </el-form-item>
         <el-form-item prop="goodsName" label="商品名">
-        <el-select v-model="addRefund.goodsName" placeholder="请选择" style="width: 220px" @change="handleSelectionChange">
-          <el-option v-for="item in goodsName" :key="item.key" :label="item.label" :value="item" />
+          <el-select v-model="addRefund.goodsName" placeholder="请选择" style="width: 220px"
+                     @change="handleSelectionChange">
+            <el-option v-for="item in goodsName" :key="item.key" :label="item.label" :value="item"/>
           </el-select>
         </el-form-item>
 
@@ -469,21 +471,23 @@ onMounted(async function () {
 
         <el-form-item prop="permanentGold" label="永久金币">
           <el-input v-model="addRefund.permanentGold" style="width: 220px"
-            :disabled="addRe.typeR === '0' ? true : false" @input="handlePermanentGoldInput($event)" type="number">
+                    :disabled="addRe.typeR === '0' ? true : false" @input="handlePermanentGoldInput($event)"
+                    type="number">
           </el-input>&nbsp;&nbsp;个
         </el-form-item>
 
 
         <el-form-item prop="freeGold" label="免费金币">
           <el-input v-model="addRefund.freeGold" style="float: left; width: 220px"
-            :disabled="addRe.typeR === '0' ? true : false" @input="handleFreeGoldInput($event)" type="number" />
+                    :disabled="addRe.typeR === '0' ? true : false" @input="handleFreeGoldInput($event)" type="number"/>
           &nbsp;&nbsp;个
         </el-form-item>
 
         <div>
           <el-form-item prop="taskGold" label="任务金币">
             <el-input v-model="addRefund.taskGold" style="float: left; width: 220px"
-            :disabled="addRe.typeR === '0' ? true : false" @input="handleTaskGoldInput($event)" type="number" />
+                      :disabled="addRe.typeR === '0' ? true : false" @input="handleTaskGoldInput($event)"
+                      type="number"/>
             &nbsp;&nbsp;个
           </el-form-item>
         </div>
@@ -497,7 +501,7 @@ onMounted(async function () {
 
           <el-form-item prop="remark" label="备注">
             <el-input v-model="addRefund.remark" style="width: 220px" :rows="3" maxlength="100" show-word-limit
-          type="textarea" />
+                      type="textarea"/>
           </el-form-item>
         </div>
 
@@ -506,8 +510,8 @@ onMounted(async function () {
       </el-form>
 
       <!-- 客户信息栏 -->
-    <el-card v-if="user.jwcode" style="width: 800px" class="beautiful">
-      <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
+      <el-card v-if="user.jwcode" style="max-width: 800px"  class="beautiful">
+        <el-form :model="user" label-width="auto" style="max-width: 800px" label-position="left">
           <el-text size="large" style="margin-left: 20px">客户信息</el-text>
 
           <!-- 第一行：姓名 + 历史金币 -->
@@ -549,7 +553,7 @@ onMounted(async function () {
           </el-row>
 
           <!-- 第三行：首次充值日期 + 充值次数 -->
-        <el-row >
+          <el-row>
             <el-col :span="9">
               <el-form-item label="首次充值日期">
                 <p v-if="user.firstRecharge">
@@ -575,20 +579,28 @@ onMounted(async function () {
         </el-form>
       </el-card>
     </div>
+  </div>
+
 </template>
 
 <style scoped>
+
 p {
   margin: 0px;
 }
 
-.el-form-item {
-  margin-left: 50px;
-}
-</style>
+.userAndForm {
+  width: 90%;
+  display: flex;
+  align-items: center;
 
-<style>
+}
 
+.beautiful {
+  flex: 1;
+  float: right;
+  margin-left: 150px;
+}
 
 .form-style {
   margin-top: 50px;
@@ -596,30 +608,20 @@ p {
   float: left;
 }
 
-.form-style2 {
-  max-width: 60%;
-}
-
-p {
-  font-size: 13px;
-  transform: scale(1);
-}
-
-.beautiful {
-  width: 700px;
-  float: right;
-  margin-right: 300px;
-  margin-top: 150px;
+.el-form-item {
+  margin-left: 50px;
 }
 </style>
 
 <style>
+
 /* 上传图片的格式 */
 .avatar-uploader .avatar {
   width: 50px;
   height: 50px;
   display: block;
 }
+
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
@@ -640,4 +642,13 @@ p {
   height: 50px;
   text-align: center;
 }
+
+
+.form-style2 {
+  max-width: 60%;
+}
+
+
+
 </style>
+