You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
706 lines
20 KiB
706 lines
20 KiB
<script setup>
|
|
import { reactive, onMounted } 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 moment from "moment";
|
|
import _ from "lodash";
|
|
import request from "@/util/http";
|
|
// 精网号去空格
|
|
const trimJwCode = () => {
|
|
if (addConsume.value.jwcode) {
|
|
addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, '');
|
|
}
|
|
}
|
|
//这是获取用户信息的接口
|
|
const adminData = ref({});
|
|
const getAdminData = async function () {
|
|
try {//await 暂停函数执行，直到请求完成
|
|
const result = await request({
|
|
url: "/admin/userinfo",
|
|
data: {},
|
|
});
|
|
adminData.value = result;
|
|
addConsume.value.adminId = adminData.value.adminId;
|
|
addConsume.value.name = adminData.value.name;
|
|
console.log("请求成功", result);
|
|
console.log("用户信息", adminData.value);
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
}
|
|
};
|
|
|
|
// 这是添加消费信息的表单
|
|
const addConsume = ref({
|
|
freeCoin: 0,
|
|
rechargeCoin: 0,
|
|
taskCoin: 0,
|
|
updateType: "1",
|
|
indexName:"", //这个是指标字段，后面绑定
|
|
});
|
|
// 这是添加消费信息的接口
|
|
const add = async function () {
|
|
try {
|
|
// 处理数据，使用楼上接口后需要隐藏
|
|
addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
|
|
addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
|
|
addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
|
|
addConsume.value.productName = indexs.value.productName;
|
|
// 发送POST请求
|
|
const result = await request({
|
|
url: "/consume/add",
|
|
data: addConsume.value,
|
|
});
|
|
if (result.code === 0) {
|
|
ElMessage.error(result.msg);
|
|
return;
|
|
} else {
|
|
ElMessage.success("添加成功");
|
|
}
|
|
//重置表单
|
|
addConsume.value = {};
|
|
addConsume.value.adminId = adminData.value.adminId;
|
|
addConsume.value.adminName = adminData.value.adminName;
|
|
addConsume.value.updateType = "1";
|
|
addConsume.value.freeCoin = 0;
|
|
addConsume.value.rechargeCoin = 0;
|
|
addConsume.value.taskCoin = 0;
|
|
indexs.value = {};
|
|
console.log("请求成功", result);
|
|
user.value = {};
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
ElMessage.error("添加失败，请检查输入内容是否正确");
|
|
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
const addBefore = () => {
|
|
Ref.value.validate(async (valid) => {
|
|
if (valid) {
|
|
ElMessageBox.confirm("确认添加？")
|
|
.then(() => {
|
|
addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
|
|
addConsume.value.rechargeCoin = Number(
|
|
-addConsume.value.rechargeCoin
|
|
);
|
|
addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
|
|
add();
|
|
console.log("添加成功");
|
|
imageUrl.value = "";
|
|
addConsume.value = {};
|
|
})
|
|
.catch(() => {
|
|
console.log("取消添加");
|
|
});
|
|
} else {
|
|
//提示
|
|
ElMessage({
|
|
type: "error",
|
|
message: "请检查输入内容",
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// 表单验证
|
|
// 开始时间改变时，重新验证结束时间
|
|
const Ref = ref(null);
|
|
|
|
const checkFreeGoldRadio = function (rule, value, callback) {
|
|
if (value == "0" || value == null || value == "") {
|
|
callback(new Error("请输入消费金币总数"));
|
|
} else if (value < 0 || isNaN(value)) {
|
|
callback(new Error("请输入正确的格式"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
const rules = reactive({
|
|
jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
|
|
productName: [{ required: true, message: "请选择消费商品", trigger: "change" }], // 修改为 change
|
|
taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
|
|
freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
|
|
rechargeCoin: [
|
|
{ required: true, message: "请输入免费金币", trigger: "blur" },
|
|
],
|
|
allGold: [
|
|
{ required: true, message: "消费金币总数不能为空", trigger: "blur" },
|
|
{ validator: checkFreeGoldRadio, trigger: "blur" },
|
|
],
|
|
indexName: [
|
|
{
|
|
required: true,
|
|
validator: (rule, value, callback) => {
|
|
if (isHC.value === 1 && !value) {
|
|
callback(new Error("请选择指标"));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: ["change", "blur"],
|
|
},
|
|
]
|
|
});
|
|
//这是重置方法
|
|
const delteConsume = function () {
|
|
addConsume.value = {};
|
|
addConsume.value.adminId = adminData.value.adminId;
|
|
addConsume.value.adminName = adminData.value.adminName;
|
|
addConsume.value.updateType = "1";
|
|
addConsume.value.freeCoin = 0;
|
|
addConsume.value.rechargeCoin = 0;
|
|
addConsume.value.taskCoin = 0;
|
|
indexs.value = {};
|
|
isHC.value = 0;
|
|
};
|
|
// 查找客户信息的方法
|
|
const user = ref({
|
|
firstRechargeTime: "",
|
|
});
|
|
const getUser = async function (jwcode) {
|
|
trimJwCode();
|
|
try {
|
|
// 发送POST请求
|
|
const result = await request({
|
|
url: "/recharge/user",
|
|
data: {
|
|
jwcode: addConsume.value.jwcode,
|
|
area: adminData.value.area,
|
|
},
|
|
});
|
|
console.log("请求成功", result);
|
|
|
|
if (result.code === 0) {
|
|
ElMessage.error(result.msg);
|
|
} else {
|
|
user.value = result.data;
|
|
user.value.A =
|
|
Number(user.value.pendingRechargeTimes) +
|
|
Number(user.value.pendingSpendTimes);
|
|
console.log("用户信息", user.value);
|
|
ElMessage.success(result.msg);
|
|
}
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
ElMessage.error("查询失败，请检查精网号是否正确");
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
|
|
|
|
//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
|
|
//这是查询用户金币信息的接口
|
|
const userGold = ref({});
|
|
const getUserGold = async function (jwcode) {
|
|
trimJwCode();
|
|
try {
|
|
// 发送POST请求
|
|
const result = await request({
|
|
url: "/recharge/user",
|
|
data: {
|
|
jwcode: addConsume.value.jwcode,
|
|
area: adminData.value.area,
|
|
},
|
|
});
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
if (result.code === 0) {
|
|
//ElMessage.error(result.msg);
|
|
} else {
|
|
// 存储表格数据
|
|
userGold.value = result.data;
|
|
addConsume.value.username = result.data.name;
|
|
addConsume.value.area = result.data.area;
|
|
// ElMessage.success(result.msg);
|
|
}
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
//ElMessage.error("无此精网号");
|
|
addConsume.value.jwcode = "";
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
|
|
function calculateCoins() {
|
|
if (
|
|
(userGold.value.coreJb +
|
|
userGold.value.free6 +
|
|
userGold.value.free12 +
|
|
userGold.value.buyJb) /
|
|
100 <
|
|
addConsume.value.allGold
|
|
) {
|
|
addConsume.value.allGold = 0;
|
|
addConsume.value.taskCoin = 0;
|
|
addConsume.value.freeCoin = 0;
|
|
addConsume.value.rechargeCoin = 0;
|
|
ElMessage.error("金币不足，请充值");
|
|
return;
|
|
}
|
|
// 这是计算用户的三种金币的接口
|
|
else {
|
|
// 保存原始的allGold值
|
|
const originalAllGold = addConsume.value.allGold;
|
|
|
|
// 确保todayTask和todayFree是有效的数字
|
|
const todayTask =
|
|
typeof userGold.value.coreJb === "number"
|
|
? userGold.value.coreJb / 100
|
|
: 0;
|
|
const todayFree =
|
|
typeof (userGold.value.free6 + userGold.value.free12) === "number"
|
|
? (userGold.value.free6 + userGold.value.free12) / 100
|
|
: 0;
|
|
|
|
// 根据用户输入的消费金币总数和已有的金币数量进行计算
|
|
addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
|
|
let remainingGold = originalAllGold - addConsume.value.taskCoin;
|
|
|
|
addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
|
|
remainingGold -= addConsume.value.freeCoin;
|
|
|
|
addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币
|
|
|
|
// 恢复allGold的原始值
|
|
addConsume.value.allGold = originalAllGold;
|
|
|
|
// 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
|
|
if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
|
|
if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
|
|
if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;
|
|
|
|
console.log("计算结果", addConsume.value);
|
|
}
|
|
}
|
|
|
|
// 查询商品的接口
|
|
const goods = ref([]);
|
|
const getGoods = async function () {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await request({
|
|
url: "/product",
|
|
data: {},
|
|
});
|
|
// 将响应结果存储到响应式数据中
|
|
|
|
console.log("请求成功", result);
|
|
// 存储全部数据
|
|
goods.value = result.data;
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
// 获取指标的方法
|
|
const index = ref([]);
|
|
const getIndexs = async function (type) {
|
|
try {
|
|
// 发送POST请求
|
|
const result = await request({
|
|
url: "/product/index",
|
|
data: {
|
|
type: type,
|
|
},
|
|
});
|
|
// 将响应结果存储到响应式数据中
|
|
console.log("请求成功", result);
|
|
// 存储全部数据
|
|
index.value = result.data;
|
|
} catch (error) {
|
|
console.log("请求失败", error);
|
|
// 在这里可以处理错误逻辑，比如显示错误提示等
|
|
}
|
|
};
|
|
|
|
// 选择商品名称是时触发的方法
|
|
const isHC = ref(0);
|
|
// const handleProductSelect = (productName) => {
|
|
// // 根据商品名称获取对应的商品信息
|
|
// // indexs.value.productName = productName;为什么直接绑定？？？
|
|
// if (productName === "homilychart") {
|
|
// isHC.value = 1;
|
|
// addConsume.value.productName = "homilychart"; // 商品名
|
|
// addConsume.value.indexName = ""; // 指标名
|
|
// } else {
|
|
// isHC.value = 0;
|
|
// addConsume.value.productName = productName;
|
|
// addConsume.value.indexName = "";
|
|
// }
|
|
// };
|
|
const indexs = ref([]);
|
|
// const handleIndexSelect = () => {
|
|
// if (isHC.value === 1 && addConsume.value.indexName) {
|
|
// addConsume.value.productName = "homilychart" + addConsume.value.indexName;
|
|
// }
|
|
// };
|
|
|
|
// 商品搜索逻辑
|
|
const queryProductSearch = (queryString, cb) => {
|
|
const results = queryString
|
|
? goods.value.filter(item =>
|
|
item.name.toLowerCase().includes(queryString.toLowerCase())
|
|
)
|
|
: goods.value;
|
|
cb(results);
|
|
};
|
|
|
|
// 指标搜索逻辑
|
|
const queryIndexSearch = (queryString, cb) => {
|
|
const results = queryString
|
|
? index.value.filter(item => // 将 indexData 替换为 index
|
|
item.name.toLowerCase().includes(queryString.toLowerCase())
|
|
)
|
|
: index.value;
|
|
cb(results);
|
|
};
|
|
|
|
// 商品选择处理（重点修改）
|
|
const handleProductSelect = async (selectedItem) => {
|
|
const productName = typeof selectedItem === 'string'
|
|
? selectedItem
|
|
: selectedItem?.name || '';
|
|
|
|
if (productName === "homilychart") {
|
|
isHC.value = 1;
|
|
addConsume.value.productName = "homilychart";
|
|
addConsume.value.indexName = "";
|
|
// 动态获取指标数据
|
|
await getIndexs("homilychart");
|
|
} else {
|
|
isHC.value = 0;
|
|
addConsume.value.productName = productName;
|
|
addConsume.value.indexName = "";
|
|
}
|
|
};
|
|
|
|
// 指标选择处理（重点修改）
|
|
const handleIndexSelect = (selectedItem) => {
|
|
if (isHC.value === 1) {
|
|
const indexName = typeof selectedItem === 'string'
|
|
? selectedItem
|
|
: selectedItem?.name || '';
|
|
// 仅更新指标名称字段
|
|
addConsume.value.indexName = indexName;
|
|
}
|
|
};
|
|
|
|
// 处理自由输入指标
|
|
const handleIndexBlur = (e) => {
|
|
if (isHC.value === 1 && e.target.value) {
|
|
// 仅更新指标名称字段
|
|
addConsume.value.indexName = e.target.value;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
// 挂载
|
|
onMounted(async function () {
|
|
await getAdminData();
|
|
await getGoods();
|
|
await getIndexs(1);
|
|
});
|
|
|
|
const handleSelectBlur = (value) => {
|
|
// 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
|
|
// 目前直接将输入值同步到 v-model 绑定的值上
|
|
if (value) {
|
|
// 若选择的是商品名称
|
|
if (addConsume.value.productName === value) {
|
|
addConsume.value.productName = value;
|
|
}
|
|
// 若选择的是指标名称
|
|
else if (indexs.value.name === value) {
|
|
indexs.value.name = value;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
|
|
<!-- 根据activeTab切换显示内容 -->
|
|
<!-- 新增消耗的布局---------------------------------------------------------- -->
|
|
<!-- <div v-if="activeTab === 'addConsume'"> -->
|
|
<!-- <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> -->
|
|
|
|
<el-form
|
|
:model="addConsume"
|
|
ref="Ref"
|
|
:rules="rules"
|
|
label-width="auto"
|
|
style="max-width: 750px;"
|
|
class="form-style"
|
|
>
|
|
<el-form-item prop="jwcode" label="精网号">
|
|
<el-input
|
|
v-model="addConsume.jwcode"
|
|
style="width: 220px"
|
|
@change="getUserGold(addConsume.jwcode)"
|
|
/>
|
|
<el-button
|
|
type="primary"
|
|
@click="getUser(addConsume.jwcode)"
|
|
style="margin-left: 20px"
|
|
>查询</el-button
|
|
>
|
|
</el-form-item>
|
|
<div style="display: flex; align-items: center; gap: 20px;">
|
|
<el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
|
|
<el-autocomplete
|
|
v-model="addConsume.productName"
|
|
:fetch-suggestions="queryProductSearch"
|
|
placeholder="请输入或选择商品"
|
|
style="width: 300px"
|
|
@select="handleProductSelect"
|
|
value-key="name"
|
|
clearable
|
|
:trigger-on-focus="true"
|
|
>
|
|
<template #default="{ item }">
|
|
<div>{{ item.name }}</div>
|
|
</template>
|
|
</el-autocomplete>
|
|
</el-form-item>
|
|
|
|
<!-- 指标选择 -->
|
|
<!-- 使用flex布局会使页面更灵活好用，修改之前选中商品名称后才会正常布局的bug -->
|
|
<!-- <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
|
|
<el-autocomplete
|
|
v-model="addConsume.indexName"
|
|
:fetch-suggestions="queryIndexSearch"
|
|
placeholder="请输入或选择指标"
|
|
style="width: 140px"
|
|
@select="handleIndexSelect"
|
|
@blur="handleIndexBlur"
|
|
value-key="name"
|
|
:disabled="isHC !== 1"
|
|
clearable
|
|
free-solo
|
|
allow-create
|
|
>
|
|
<template #default="{ item }">
|
|
<div>{{ item.name }}</div>
|
|
</template>
|
|
</el-autocomplete>
|
|
</el-form-item>
|
|
<el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
|
|
<el-input disabled placeholder="无" style="width: 100px" />
|
|
</el-form-item> -->
|
|
</div>
|
|
<el-form-item prop="allGold" label="消费金币总数" >
|
|
<el-input
|
|
v-model="addConsume.allGold"
|
|
style="width: 100px"
|
|
@change="calculateCoins()"
|
|
/>
|
|
</el-form-item>
|
|
<div style="display: flex; align-items: center">
|
|
<el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
|
|
<el-input
|
|
disabled
|
|
v-model="addConsume.rechargeCoin"
|
|
style="width: 100px; margin-left: -5px"
|
|
/>
|
|
<p style="margin-right: 0px">个</p>
|
|
</el-form-item>
|
|
<el-form-item
|
|
prop="freeCoin"
|
|
label="免费金币"
|
|
style="float: left; margin-left: -20px"
|
|
>
|
|
<el-input
|
|
disabled
|
|
v-model="addConsume.freeCoin"
|
|
style="width: 100px; margin-left: -5px"
|
|
/>
|
|
<p style="margin-right: 0px">个</p>
|
|
</el-form-item>
|
|
<el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
|
|
<el-input
|
|
disabled
|
|
v-model="addConsume.taskCoin"
|
|
style="width: 100px; margin-left: -5px"
|
|
/>
|
|
<p style="margin-right: 20px">个</p>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item prop="remark" label="备注">
|
|
<el-input
|
|
v-model="addConsume.remark"
|
|
style="width: 300px"
|
|
:rows="2"
|
|
maxlength="100"
|
|
show-word-limit
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="commitName" label="提交人">
|
|
<el-input
|
|
style="width: 300px"
|
|
:value="adminData.name"
|
|
disabled
|
|
placeholder="提交人姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
|
|
<el-button type="primary" @click="addBefore"> 提交 </el-button>
|
|
</el-form>
|
|
|
|
<!-- 客户信息栏 -->
|
|
<el-card style="width: 850px; float: right" class="customer-info">
|
|
<el-form
|
|
:model="user"
|
|
label-width="auto"
|
|
style="max-width: 1200px"
|
|
label-position="left"
|
|
>
|
|
<el-text size="large" style="margin-left: 20px">客户信息</el-text>
|
|
<el-row style="margin-top: 20px">
|
|
<el-col :span="10">
|
|
<el-form-item label="姓名:">
|
|
<p>{{ user.name }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-form-item label="历史金币总数">
|
|
<!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
|
|
<p v-if="!isNaN(Number(user.totalRechargeGold))">
|
|
{{ Number(user.totalRechargeGold / 100) }}
|
|
</p>
|
|
<!-- 如果不是有效的数字，显示默认值 -->
|
|
<p v-else></p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item label="精网号">
|
|
<p>{{ user.jwcode }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-form-item label="当前金币总数" style="width: 500px">
|
|
<span
|
|
style="color: #2fa1ff; margin-right: 5px"
|
|
v-if="user.buyJb !== undefined"
|
|
>{{
|
|
(user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
|
|
}}</span
|
|
>
|
|
<span
|
|
style="display: inline; white-space: nowrap; color: #b1b1b1"
|
|
v-if="user.buyJb !== undefined"
|
|
>(永久金币:{{ user.buyJb / 100 }};免费金币:{{
|
|
(user.free6 + user.free12) / 100
|
|
}};任务金币:{{ user.coreJb / 100 }})</span
|
|
>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item label="首次充值日期">
|
|
<p v-if="user.firstRechargeDate">
|
|
{{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }}
|
|
</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-form-item label="充值次数">
|
|
<p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="10">
|
|
<el-form-item label="负责客服">
|
|
<p>{{ adminData.name }}</p>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="10">
|
|
<el-form-item label="消费次数">
|
|
<p style="color: #2fa1ff">{{ user.spendTimes }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="10">
|
|
<el-form-item label="所属门店">
|
|
<p>{{ adminData.area }}</p>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<!-- <el-form-item label="待审核">
|
|
<p style="color: #2fa1ff">
|
|
{{ user.A }}
|
|
</p>
|
|
</el-form-item> -->
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
|
|
<!-- 金币消耗明细的布局------------------------------------------------------- -->
|
|
<!-- <div v-else-if="activeTab === 'detail'"> -->
|
|
|
|
<!-- </div>
|
|
</div> -->
|
|
</template>
|
|
|
|
<style scoped>
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
/* 上传图片的格式 */
|
|
.avatar-uploader .avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
.el-icon.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 50px;
|
|
height: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-style {
|
|
margin-top: 50px;
|
|
max-width: 50%;
|
|
float: left;
|
|
}
|
|
|
|
.form-style2 {
|
|
max-width: 60%;
|
|
}
|
|
|
|
p {
|
|
font-size: 13px;
|
|
transform: scale(1);
|
|
}
|
|
</style>
|