<template>
|
<view class="account-detail">
|
<PageHeader :title="operationType === 'detail' ? '详情' : '审批流程'"
|
@back="goBack" />
|
<!-- 表单区域 -->
|
<u-form ref="formRef"
|
@submit="submitForm"
|
:rules="rules"
|
:model="form"
|
label-width="140rpx">
|
<template v-if="operationType !== 'detail'">
|
<u-form-item prop="approveReason"
|
label="流程编号">
|
<u-input v-model="form.approveId"
|
disabled
|
placeholder="自动编号" />
|
</u-form-item>
|
<u-form-item prop="approveReason"
|
:label="approveType === 5 ? '采购事由' : '申请事由'"
|
required>
|
<u-input v-model="form.approveReason"
|
type="textarea"
|
rows="2"
|
auto-height
|
maxlength="200"
|
:placeholder="approveType === 5 ? '请输入采购事由' : '请输入申请事由'"
|
show-word-limit />
|
</u-form-item>
|
<u-form-item prop="approveDeptName"
|
label="申请部门"
|
required>
|
<!-- <u-input v-model="form.approveDeptName"
|
placeholder="请选择申请部门" /> -->
|
<u-input v-model="form.approveDeptName"
|
readonly
|
placeholder="请选择申请部门"
|
@click="showPicker = true" />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showPicker = true"></up-icon>
|
</template>
|
</u-form-item>
|
<!-- <u-form-item prop="approveUser"
|
label="申请人"
|
required>
|
<u-input v-model="form.approveUserName"
|
placeholder="请输入申请人"
|
readonly />
|
</u-form-item>
|
<u-form-item prop="approveTime"
|
label="申请日期"
|
required>
|
<u-input v-model="form.approveTime"
|
readonly
|
placeholder="请选择"
|
@click="showDatePicker" />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showDatePicker"></up-icon>
|
</template>
|
</u-form-item> -->
|
<!-- approveType=2 请假相关字段 -->
|
<template v-if="approveType === 2">
|
<u-form-item prop="startDate"
|
label="开始时间"
|
required>
|
<u-input v-model="form.startDate"
|
readonly
|
placeholder="请假开始时间"
|
@click="showStartDatePicker" />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showStartDatePicker"></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item prop="endDate"
|
label="结束时间"
|
required>
|
<u-input v-model="form.endDate"
|
readonly
|
placeholder="请假结束时间"
|
@click="showEndDatePicker" />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showEndDatePicker"></up-icon>
|
</template>
|
</u-form-item>
|
</template>
|
<!-- approveType=3 出差相关字段 -->
|
<u-form-item v-if="approveType === 3"
|
prop="location"
|
label="出差地点"
|
required>
|
<u-input v-model="form.location"
|
placeholder="请输入出差地点"
|
clearable />
|
</u-form-item>
|
<!-- approveType=4 报销相关字段 -->
|
<u-form-item v-if="approveType === 4"
|
prop="price"
|
label="报销金额"
|
required>
|
<u-input v-model="form.price"
|
type="number"
|
placeholder="请输入报销金额"
|
clearable />
|
</u-form-item>
|
</template>
|
<!-- 报价审批详情 -->
|
<view v-if="isQuotationApproval"
|
style="margin: 20rpx 0;">
|
<u-divider text="报价详情"
|
text-size="28rpx"
|
color="#2979ff"></u-divider>
|
<u-skeleton :loading="quotationLoading"
|
rows="3"
|
animated>
|
<view v-if="!currentQuotation || !currentQuotation.quotationNo"
|
style="padding: 40rpx; text-align: center; color: #999;">
|
未查询到对应报价详情
|
</view>
|
<view v-else>
|
<u-cell-group :border="false">
|
<u-cell title="报价单号"
|
:value="currentQuotation.quotationNo"></u-cell>
|
<u-cell title="客户名称"
|
:value="currentQuotation.customer"></u-cell>
|
<u-cell title="业务员"
|
:value="currentQuotation.salesperson"></u-cell>
|
<u-cell title="报价日期"
|
:value="currentQuotation.quotationDate"></u-cell>
|
<u-cell title="有效期至"
|
:value="currentQuotation.validDate"></u-cell>
|
<u-cell title="付款方式"
|
:value="currentQuotation.paymentMethod"></u-cell>
|
<u-cell title="报价总额">
|
<template #value>
|
<text style="font-size: 32rpx; color: #e6a23c; font-weight: bold;">
|
¥{{ Number(currentQuotation.totalAmount ?? 0).toFixed(2) }}
|
</text>
|
</template>
|
</u-cell>
|
</u-cell-group>
|
<view style="margin-top: 20rpx; padding: 0 30rpx;">
|
<view style="font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx;">产品明细</view>
|
<view v-for="(item, index) in (currentQuotation.products || [])"
|
:key="index"
|
style="background: #f8f8f8; border-radius: 8rpx; padding: 20rpx; margin-bottom: 10rpx;">
|
<view style="display: flex; justify-content: space-between;">
|
<text style="font-weight: bold;">{{ item.product }}</text>
|
<text style="color: #e6a23c;">¥{{ Number(item.unitPrice ?? 0).toFixed(2) }}</text>
|
</view>
|
<view style="font-size: 24rpx; color: #666; margin-top: 10rpx;">
|
规格: {{ item.specification }} | 单位: {{ item.unit }}
|
</view>
|
</view>
|
</view>
|
<view v-if="currentQuotation.remark"
|
style="margin-top: 20rpx; padding: 0 30rpx;">
|
<view style="font-size: 28rpx; font-weight: bold;">备注</view>
|
<view style="font-size: 26rpx; color: #666; margin-top: 10rpx;">{{ currentQuotation.remark }}</view>
|
</view>
|
</view>
|
</u-skeleton>
|
</view>
|
<!-- 采购审批详情 -->
|
<view v-if="isPurchaseApproval"
|
style="margin: 20rpx 0;">
|
<u-divider text="采购详情"
|
text-size="28rpx"
|
color="#2979ff"></u-divider>
|
<u-skeleton :loading="purchaseLoading"
|
rows="3"
|
animated>
|
<view v-if="!currentPurchase || !currentPurchase.purchaseContractNumber"
|
style="padding: 40rpx; text-align: center; color: #999;">
|
未查询到对应采购详情
|
</view>
|
<view v-else>
|
<u-cell-group :border="false">
|
<u-cell title="采购合同号"
|
:value="currentPurchase.purchaseContractNumber"></u-cell>
|
<u-cell title="供应商名称"
|
:value="currentPurchase.supplierName"></u-cell>
|
<u-cell title="项目名称"
|
:value="currentPurchase.projectName"></u-cell>
|
<u-cell title="销售合同号"
|
:value="currentPurchase.salesContractNo"></u-cell>
|
<u-cell title="签订日期"
|
:value="currentPurchase.executionDate"></u-cell>
|
<u-cell title="录入日期"
|
:value="currentPurchase.entryDate"></u-cell>
|
<u-cell title="付款方式"
|
:value="currentPurchase.paymentMethod"></u-cell>
|
<u-cell title="合同金额">
|
<template #value>
|
<text style="font-size: 32rpx; color: #e6a23c; font-weight: bold;">
|
¥{{ Number(currentPurchase.contractAmount ?? 0).toFixed(2) }}
|
</text>
|
</template>
|
</u-cell>
|
</u-cell-group>
|
<view style="margin-top: 20rpx; padding: 0 30rpx;">
|
<view style="font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx;">产品明细</view>
|
<view v-for="(item, index) in (currentPurchase.productData || [])"
|
:key="index"
|
style="background: #f8f8f8; border-radius: 8rpx; padding: 20rpx; margin-bottom: 10rpx;">
|
<view style="display: flex; justify-content: space-between;">
|
<text style="font-weight: bold;">{{ item.productCategory }}</text>
|
<text style="color: #e6a23c;">¥{{ Number(item.taxInclusiveTotalPrice ?? 0).toFixed(2) }}</text>
|
</view>
|
<view style="font-size: 24rpx; color: #666; margin-top: 10rpx;">
|
规格: {{ item.specificationModel }} | 数量: {{ item.quantity }} {{ item.unit }}
|
</view>
|
<view style="font-size: 24rpx; color: #999; margin-top: 4rpx;">
|
含税单价: ¥{{ Number(item.taxInclusiveUnitPrice ?? 0).toFixed(2) }}
|
</view>
|
</view>
|
</view>
|
</view>
|
</u-skeleton>
|
</view>
|
<!-- 发货审批详情 -->
|
<view v-if="isDeliveryApproval"
|
style="margin: 20rpx 0;">
|
<u-divider text="发货详情"
|
text-size="28rpx"
|
color="#2979ff"></u-divider>
|
<u-skeleton :loading="deliveryLoading"
|
rows="3"
|
animated>
|
<view v-if="!currentDelivery || !currentDelivery.shippingInfo"
|
style="padding: 40rpx; text-align: center; color: #999;">
|
未查询到对应发货详情
|
</view>
|
<view v-else>
|
<u-cell-group :border="false">
|
<u-cell title="销售订单"
|
:value="currentDelivery.shippingInfo.salesContractNo || '--'"></u-cell>
|
<u-cell title="发货订单号"
|
:value="currentDelivery.shippingInfo.shippingNo || '--'"></u-cell>
|
<u-cell title="客户名称"
|
:value="currentDelivery.shippingInfo.customerName || '--'"></u-cell>
|
<u-cell title="发货类型"
|
:value="currentDelivery.shippingInfo.type || '--'"></u-cell>
|
<u-cell title="发货日期"
|
:value="currentDelivery.shippingInfo.shippingDate || '--'"></u-cell>
|
<u-cell title="审核状态"
|
:value="currentDelivery.shippingInfo.status || '--'"></u-cell>
|
<u-cell title="发货车牌号"
|
:value="currentDelivery.shippingInfo.shippingCarNumber || '--'"></u-cell>
|
<u-cell title="快递公司"
|
:value="currentDelivery.shippingInfo.expressCompany || '--'"></u-cell>
|
<u-cell title="快递单号"
|
:value="currentDelivery.shippingInfo.expressNumber || '--'"></u-cell>
|
</u-cell-group>
|
<view style="margin-top: 20rpx; padding: 0 30rpx;">
|
<view style="font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx;">产品明细</view>
|
<view v-for="(item, index) in deliveryProductList"
|
:key="index"
|
style="background: #f8f8f8; border-radius: 8rpx; padding: 20rpx; margin-bottom: 10rpx;">
|
<view style="display: flex; justify-content: space-between;">
|
<text style="font-weight: bold;">{{ item.productName }}</text>
|
<text style="color: #2979ff;">数量: {{ item.deliveryQuantity }}</text>
|
</view>
|
<view style="font-size: 24rpx; color: #666; margin-top: 10rpx;">
|
规格: {{ item.specificationModel }}
|
</view>
|
<view v-if="item.batchNo"
|
style="font-size: 24rpx; color: #999; margin-top: 4rpx;">
|
批号: {{ item.batchNo }}
|
</view>
|
</view>
|
</view>
|
<view v-if="currentDelivery.shippingInfo.storageBlobVOs && currentDelivery.shippingInfo.storageBlobVOs.length"
|
style="margin-top: 20rpx; padding: 0 30rpx;">
|
<view style="font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx;">发货图片</view>
|
<CommonUpload :model-value="currentDelivery.shippingInfo.storageBlobVOs"
|
disabled />
|
</view>
|
</view>
|
</u-skeleton>
|
</view>
|
<u-form-item v-if="operationType !== 'detail'"
|
label="图片附件"
|
prop="storageBlobDTOS"
|
border-bottom>
|
<CommonUpload v-model="form.storageBlobDTOS" />
|
</u-form-item>
|
</u-form>
|
<!-- 选择器弹窗 -->
|
<template v-if="operationType !== 'detail'">
|
<up-action-sheet :show="showPicker"
|
:actions="productOptions"
|
title="选择部门"
|
@select="onConfirm"
|
@close="showPicker = false" />
|
<!-- 日期选择器 -->
|
<up-popup :show="showDate"
|
mode="bottom"
|
@close="showDate = false">
|
<up-datetime-picker :show="true"
|
v-model="currentDate"
|
@confirm="onDateConfirm"
|
@cancel="showDate = false"
|
mode="date" />
|
</up-popup>
|
<!-- 请假开始时间选择器 -->
|
<up-popup :show="showStartDate"
|
mode="bottom"
|
@close="showStartDate = false">
|
<up-datetime-picker :show="true"
|
v-model="startDateValue"
|
@confirm="onStartDateConfirm"
|
@cancel="showStartDate = false"
|
mode="date" />
|
</up-popup>
|
<!-- 请假结束时间选择器 -->
|
<up-popup :show="showEndDate"
|
mode="bottom"
|
@close="showEndDate = false">
|
<up-datetime-picker :show="true"
|
v-model="endDateValue"
|
@confirm="onEndDateConfirm"
|
@cancel="showEndDate = false"
|
mode="date" />
|
</up-popup>
|
</template>
|
<!-- 底部按钮 -->
|
<view class="footer-btns"
|
v-if="operationType !== 'detail'">
|
<u-button class="cancel-btn"
|
@click="goBack">取消</u-button>
|
<u-button class="save-btn"
|
@click="submitForm">保存</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
ref,
|
onMounted,
|
onUnmounted,
|
reactive,
|
toRefs,
|
computed,
|
watch,
|
} from "vue";
|
import PageHeader from "@/components/PageHeader.vue";
|
import CommonUpload from "@/components/CommonUpload.vue";
|
import useUserStore from "@/store/modules/user";
|
import { formatDateToYMD } from "@/utils/ruoyi";
|
import {
|
getDept,
|
approveProcessGetInfo,
|
approveProcessAdd,
|
approveProcessUpdate,
|
getDeliveryDetailByShippingNo,
|
} from "@/api/collaborativeApproval/approvalProcess";
|
import { getQuotationList } from "@/api/salesManagement/salesQuotation";
|
import { getPurchaseByCode } from "@/api/procurementManagement/procurementLedger";
|
const showToast = message => {
|
uni.showToast({
|
title: message,
|
icon: "none",
|
});
|
};
|
|
const data = reactive({
|
form: {
|
approveTime: "",
|
approveId: "",
|
approveUser: "",
|
approveUserName: "",
|
approveDeptName: "",
|
approveDeptId: "",
|
approveReason: "",
|
checkResult: "",
|
storageBlobDTOS: [],
|
startDate: "",
|
endDate: "",
|
location: "",
|
price: "",
|
},
|
rules: {
|
approveTime: [{ required: false, message: "请输入", trigger: "change" }],
|
approveId: [{ required: false, message: "请输入", trigger: "blur" }],
|
approveDeptId: [{ required: true, message: "请输入", trigger: "blur" }],
|
approveReason: [{ required: true, message: "请输入", trigger: "blur" }],
|
checkResult: [{ required: false, message: "请输入", trigger: "blur" }],
|
startDate: [
|
{ required: false, message: "请选择开始时间", trigger: "change" },
|
],
|
endDate: [
|
{ required: false, message: "请选择结束时间", trigger: "change" },
|
],
|
location: [{ required: false, message: "请输入出差地点", trigger: "blur" }],
|
price: [{ required: false, message: "请输入报销金额", trigger: "blur" }],
|
},
|
});
|
const { form, rules } = toRefs(data);
|
const result = ref("");
|
const showPicker = ref(false);
|
const productOptions = ref([]);
|
const operationType = ref("");
|
const currentApproveStatus = ref("");
|
const formRef = ref(null);
|
const message = ref("");
|
const showDate = ref(false);
|
const currentDate = ref(Date.now());
|
const showStartDate = ref(false);
|
const startDateValue = ref(Date.now());
|
const showEndDate = ref(false);
|
const endDateValue = ref(Date.now());
|
const userStore = useUserStore();
|
const approveType = ref(0);
|
const isInitialLoading = ref(false);
|
|
const quotationLoading = ref(false);
|
const currentQuotation = ref({});
|
const purchaseLoading = ref(false);
|
const currentPurchase = ref({});
|
const deliveryLoading = ref(false);
|
const currentDelivery = ref({});
|
const deliveryProductList = ref([]);
|
|
const isQuotationApproval = computed(() => Number(approveType.value) === 6);
|
const isPurchaseApproval = computed(() => Number(approveType.value) === 5);
|
const isDeliveryApproval = computed(() => Number(approveType.value) === 7);
|
|
const getProductOptions = () => {
|
getDept().then(res => {
|
productOptions.value = res.data.map(item => ({
|
value: item.deptId,
|
name: item.deptName,
|
}));
|
});
|
};
|
const getCurrentinfo = () => {
|
userStore.getInfo().then(res => {
|
form.value.approveDeptId = res.user.tenantId;
|
console.log(res.user.tenantId, "res.user.tenantId");
|
});
|
};
|
|
// 显示日期选择器
|
const showDatePicker = () => {
|
showDate.value = true;
|
};
|
|
// 确认日期选择
|
const onDateConfirm = e => {
|
form.value.approveTime = formatDateToYMD(e.value);
|
currentDate.value = formatDateToYMD(e.value);
|
showDate.value = false;
|
};
|
|
// 显示请假开始时间选择器
|
const showStartDatePicker = () => {
|
showStartDate.value = true;
|
};
|
|
// 确认请假开始时间选择
|
const onStartDateConfirm = e => {
|
form.value.startDate = formatDateToYMD(e.value);
|
showStartDate.value = false;
|
};
|
|
const showEndDatePicker = () => {
|
showEndDate.value = true;
|
};
|
|
// 确认请假结束时间选择
|
const onEndDateConfirm = e => {
|
form.value.endDate = formatDateToYMD(e.value);
|
showEndDate.value = false;
|
};
|
|
const fetchDetailData = async row => {
|
// 报价审批
|
if (isQuotationApproval.value) {
|
const quotationNo = row?.approveReason;
|
if (quotationNo) {
|
quotationLoading.value = true;
|
getQuotationList({ quotationNo })
|
.then(res => {
|
const records = res?.data?.records || [];
|
currentQuotation.value = records[0] || {};
|
})
|
.finally(() => {
|
quotationLoading.value = false;
|
});
|
}
|
}
|
|
// 采购审批
|
if (isPurchaseApproval.value) {
|
const purchaseContractNumber = row?.approveReason;
|
if (purchaseContractNumber) {
|
purchaseLoading.value = true;
|
getPurchaseByCode({ purchaseContractNumber })
|
.then(res => {
|
currentPurchase.value = res;
|
})
|
.catch(err => {
|
console.error("查询采购详情失败:", err);
|
})
|
.finally(() => {
|
purchaseLoading.value = false;
|
});
|
}
|
}
|
|
// 发货审批
|
if (isDeliveryApproval.value) {
|
const deliveryNo = row?.approveReason;
|
if (deliveryNo) {
|
deliveryLoading.value = true;
|
currentDelivery.value = {};
|
deliveryProductList.value = [];
|
getDeliveryDetailByShippingNo({ shippingNo: deliveryNo })
|
.then(res => {
|
const detailData = res?.data || res || {};
|
currentDelivery.value = detailData;
|
deliveryProductList.value =
|
detailData.shippingProductDetailDtoList || [];
|
})
|
.catch(err => {
|
console.error("查询发货详情失败:", err);
|
})
|
.finally(() => {
|
deliveryLoading.value = false;
|
});
|
}
|
}
|
};
|
|
// 监听审批事由变化，如果是特定审批类型则尝试获取详情
|
watch(
|
() => form.value.approveReason,
|
newVal => {
|
if (isInitialLoading.value) return;
|
if (
|
newVal &&
|
(isQuotationApproval.value ||
|
isPurchaseApproval.value ||
|
isDeliveryApproval.value)
|
) {
|
// 延迟一会再请求，避免输入过程中频繁触发
|
debounceFetchDetail();
|
}
|
}
|
);
|
|
let timer = null;
|
const debounceFetchDetail = () => {
|
if (timer) clearTimeout(timer);
|
timer = setTimeout(() => {
|
fetchDetailData(form.value);
|
}, 800);
|
};
|
|
onMounted(async () => {
|
try {
|
getProductOptions();
|
form.value.approveUser = userStore.id;
|
form.value.approveUserName = userStore.nickName;
|
form.value.approveTime = getCurrentDate();
|
getCurrentinfo();
|
// 从本地存储获取参数
|
operationType.value = uni.getStorageSync("operationType") || "add";
|
approveType.value = uni.getStorageSync("approveType") || 0;
|
|
// 如果是编辑模式，从本地存储获取数据
|
if (operationType.value === "edit" || operationType.value === "detail") {
|
const storedData = uni.getStorageSync("invoiceLedgerEditRow");
|
if (storedData) {
|
const row = JSON.parse(storedData);
|
currentApproveStatus.value = row.approveStatus;
|
|
isInitialLoading.value = true;
|
approveProcessGetInfo({ id: row.approveId, approveReason: "1" })
|
.then(res => {
|
form.value = { ...res.data };
|
// 设置图片列表显示
|
const fileData =
|
res.data.storageBlobVOS || res.data.commonFileList || [];
|
if (fileData.length > 0) {
|
form.value.storageBlobDTOS = fileData;
|
}
|
// 获取额外详情
|
fetchDetailData(res.data);
|
})
|
.finally(() => {
|
// 延迟一会重置，确保 watch 不会被触发
|
setTimeout(() => {
|
isInitialLoading.value = false;
|
}, 100);
|
});
|
}
|
}
|
} catch (error) {
|
console.error("获取数据失败:", error);
|
}
|
});
|
|
onUnmounted(() => {});
|
|
const onConfirm = item => {
|
// 设置选中的部门
|
form.value.approveDeptName = item.name;
|
// 确保设置的是字符串类型的部门ID
|
form.value.approveDeptId = String(item.value || "");
|
console.log("部门选择后的值:", {
|
approveDeptId: form.value.approveDeptId,
|
approveDeptName: form.value.approveDeptName,
|
});
|
showPicker.value = false;
|
};
|
|
const goBack = () => {
|
// 清除本地存储的数据
|
uni.removeStorageSync("operationType");
|
uni.removeStorageSync("invoiceLedgerEditRow");
|
uni.removeStorageSync("approveType");
|
uni.navigateBack();
|
};
|
|
const submitForm = () => {
|
// 手动检查必填字段，防止因数据类型问题导致的校验失败
|
if (!form.value.approveReason || !form.value.approveReason.trim()) {
|
showToast("请输入申请事由");
|
return;
|
}
|
|
if (
|
!form.value.approveDeptId ||
|
String(form.value.approveDeptId).trim() === ""
|
) {
|
showToast("请选择申请部门");
|
return;
|
}
|
|
if (!form.value.approveTime) {
|
showToast("请选择申请日期");
|
return;
|
}
|
|
formRef.value
|
.validate()
|
.then(valid => {
|
if (valid) {
|
// 表单校验通过，可以提交数据
|
form.value.approveType = approveType.value;
|
form.value.approveDeptId = Number(form.value.approveDeptId);
|
|
if (operationType.value === "add" || currentApproveStatus.value == 3) {
|
approveProcessAdd(form.value).then(res => {
|
showToast("提交成功");
|
goBack();
|
});
|
} else {
|
approveProcessUpdate(form.value).then(res => {
|
showToast("提交成功");
|
goBack();
|
});
|
}
|
}
|
})
|
.catch(error => {
|
console.error("表单校验失败:", error);
|
// 尝试获取具体的错误字段
|
if (error && error.errors) {
|
const firstError = error.errors[0];
|
if (firstError) {
|
uni.showToast({
|
title: firstError.message || "表单校验失败，请检查必填项",
|
icon: "none",
|
});
|
return;
|
}
|
}
|
// 显示通用错误信息
|
uni.showToast({
|
title: "表单校验失败，请检查必填项",
|
icon: "none",
|
});
|
});
|
};
|
|
// 获取当前日期并格式化为 YYYY-MM-DD
|
function getCurrentDate() {
|
const today = new Date();
|
const year = today.getFullYear();
|
const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始
|
const day = String(today.getDate()).padStart(2, "0");
|
return `${year}-${month}-${day}`;
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
.account-detail {
|
background-color: #fff;
|
}
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 0.75rem 0;
|
box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
|
z-index: 1000;
|
}
|
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #ffffff;
|
width: 6.375rem;
|
background: #c7c9cc;
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
|
.save-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #ffffff;
|
width: 14rem;
|
background: linear-gradient(140deg, #00baff 0%, #006cfb 100%);
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3, 88, 185, 0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
</style>
|
