Merge branch 'main' of https://git.opencomputing.cn/yumoqing/kboss
This commit is contained in:
ping
commit
5ecf944bc6
@ -364,7 +364,7 @@ export const asyncRoutes = [
|
||||
children: [
|
||||
{
|
||||
path: "orderManagement",
|
||||
component: () => import("@/views/customer/orderManagement"),
|
||||
component: () => import("@/views/customer/orderManagement/index.vue"),
|
||||
name: "OrderManagement",
|
||||
meta: { title: "百度订单", fullPath: "/customer/orderManagement", noCache: true, },
|
||||
},
|
||||
@ -388,7 +388,7 @@ export const asyncRoutes = [
|
||||
{
|
||||
path: "userResource", component: () => import(
|
||||
// "@/views/customer/userResource/iframeJiNan.vue"//iframe报错
|
||||
"@/views/customer/userResource"
|
||||
"@/views/customer/userResource/index.vue"
|
||||
), name: "userResource", meta: { title: "百度资源", fullPath: "/customer/userResource", noCache: true },
|
||||
},
|
||||
]
|
||||
@ -799,25 +799,7 @@ export const asyncRoutes = [
|
||||
{
|
||||
|
||||
},
|
||||
// 工单管理 - 变为一级菜单
|
||||
{
|
||||
path: "/workOrderManagement",
|
||||
component: Layout,
|
||||
meta: {
|
||||
title: "工单管理",
|
||||
icon: "el-icon-tickets",
|
||||
noCache: true,
|
||||
fullPath: "/workOrderManagement"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "index",
|
||||
component: () => import("@/views/customer/workOrderManagement"),
|
||||
name: "WorkOrderManagement",
|
||||
meta: { title: "工单管理", fullPath: "/workOrderManagement/index" },
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// 退订管理 - 变为一级菜单（包含子菜单）
|
||||
{
|
||||
path: "/unsubscribeManagement",
|
||||
@ -899,6 +881,25 @@ export const asyncRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// 工单管理 - 变为一级菜单
|
||||
{
|
||||
path: "/workOrderManagement",
|
||||
component: Layout,
|
||||
meta: {
|
||||
title: "工单管理",
|
||||
icon: "el-icon-tickets",
|
||||
noCache: true,
|
||||
fullPath: "/workOrderManagement"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "index",
|
||||
component: () => import("@/views/customer/workOrderManagement"),
|
||||
name: "WorkOrderManagement",
|
||||
meta: { title: "工单管理", fullPath: "/workOrderManagement/index" },
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// // 客户
|
||||
{
|
||||
@ -1838,37 +1839,38 @@ export const asyncRoutes = [
|
||||
},
|
||||
},],
|
||||
},
|
||||
// {
|
||||
// path: "/administrator", component: Layout, redirect: "/administrator/index", meta: {
|
||||
// title: "企业管理",
|
||||
// icon: "el-icon-office-building",
|
||||
// noCache: true,
|
||||
// fullPath: "/administrator"
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: "departmentManagement",
|
||||
// component: () => import("@/views/administrator/departmentManagement"),
|
||||
// name: "epartmentManagement",
|
||||
// meta: {
|
||||
// title: "部门管理", fullPath: "/administrator/departmentManagement",
|
||||
// },
|
||||
// }, {
|
||||
// path: "configureOrganizationUserRole",
|
||||
// component: () => import("@/views/administrator/configureOrganizationUserRole"),
|
||||
// name: "ConfigureOrganizationUserRole",
|
||||
// meta: {
|
||||
// title: "角色管理", fullPath: "/administrator/configureOrganizationUserRole",
|
||||
// },
|
||||
// }, {
|
||||
// path: "stationMessageSettings",
|
||||
// component: () => import("@/views/administrator/stationMessageSettings"),
|
||||
// name: "StationMessageSettings",
|
||||
// meta: {
|
||||
// title: "站内信设置", fullPath: "/administrator/stationMessageSettings",
|
||||
// },
|
||||
// },],
|
||||
// },
|
||||
{
|
||||
path: "/administrator", component: Layout, redirect: "/administrator/index", meta: {
|
||||
title: "企业管理",
|
||||
icon: "el-icon-office-building",
|
||||
noCache: true,
|
||||
fullPath: "/administrator"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "departmentManagement",
|
||||
component: () => import("@/views/administrator/departmentManagement"),
|
||||
name: "epartmentManagement",
|
||||
meta: {
|
||||
title: "部门管理", fullPath: "/administrator/departmentManagement",
|
||||
},
|
||||
}, {
|
||||
path: "configureOrganizationUserRole",
|
||||
component: () => import("@/views/administrator/configureOrganizationUserRole"),
|
||||
name: "ConfigureOrganizationUserRole",
|
||||
meta: {
|
||||
title: "角色管理", fullPath: "/administrator/configureOrganizationUserRole",
|
||||
},
|
||||
}, {
|
||||
path: "stationMessageSettings",
|
||||
component: () => import("@/views/administrator/stationMessageSettings"),
|
||||
name: "StationMessageSettings",
|
||||
meta: {
|
||||
title: "站内信设置", fullPath: "/administrator/stationMessageSettings",
|
||||
},
|
||||
},],
|
||||
}, {
|
||||
path: "/management",
|
||||
hidden: true,
|
||||
component: Layout,
|
||||
|
||||
@ -24,6 +24,9 @@ function filterAsyncRoutes(routes, permissions, userRoles = []) {
|
||||
// 检查当前路由是否在权限列表中
|
||||
const hasPermission = permissions.some(p => p.path === route.meta?.fullPath);
|
||||
|
||||
// 特殊处理：确保"全部产品"和"资源概览"这两个一级路由在客户角色下显示
|
||||
const isCriticalRoute = route.path === "/product" || route.path === "/overview";
|
||||
|
||||
// 检查是否为仅客户可访问的路由
|
||||
const isCustomerOnlyRoute = customerOnlyRoutes.includes(route.path);
|
||||
|
||||
@ -36,6 +39,10 @@ function filterAsyncRoutes(routes, permissions, userRoles = []) {
|
||||
if (hasPermission) {
|
||||
res.push(tmpRoute);
|
||||
}
|
||||
// 如果是关键路由且用户是客户，也要加入结果
|
||||
else if (isCriticalRoute && userRoles.includes('客户')) {
|
||||
res.push(tmpRoute);
|
||||
}
|
||||
// 如果没有直接权限，但有子路由，递归处理子路由
|
||||
else if (tmpRoute.children) {
|
||||
const filteredChildren = filterAsyncRoutes(tmpRoute.children, permissions, userRoles);
|
||||
@ -73,11 +80,12 @@ function addUserRoutes(routes, userType, orgType, userRoles = []) {
|
||||
|
||||
// 新增：为所有用户添加五个新的客户菜单，但只有客户角色才能看到
|
||||
const newCustomerRoutes = [
|
||||
routes.find(route => route.path === "/workOrderManagement"),
|
||||
routes.find(route => route.path === "/unsubscribeManagement"),
|
||||
routes.find(route => route.path === "/informationPerfect"),
|
||||
routes.find(route => route.path === "/rechargeManagement"),
|
||||
routes.find(route => route.path === "/invoiceManagement")
|
||||
routes.find(route => route.path === "/invoiceManagement"),
|
||||
routes.find(route => route.path === "/workOrderManagement")
|
||||
|
||||
].filter(route => {
|
||||
// 过滤掉undefined，并且只有客户角色才能看到这些路由
|
||||
return route && userRoles.includes('客户');
|
||||
|
||||
@ -184,7 +184,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" prop="id" label="订单号" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<div class="cell-content">{{ scope.row.id }}</div>
|
||||
<div class="cell-content">{{ scope.row.orderid }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="订单原价" width="140">
|
||||
@ -220,7 +220,7 @@
|
||||
<div class="cell-content">{{ formatOrderDate(scope.row.order_date) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="操作" width="140">
|
||||
<!-- <el-table-column align="center" header-align="center" label="操作" width="140">
|
||||
<template slot-scope="scope">
|
||||
<div class="cell-content">
|
||||
<el-button size="small" v-if="scope.row.order_status === '0'" type="primary"
|
||||
@ -231,7 +231,7 @@
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
|
||||
@ -52,13 +52,28 @@
|
||||
border
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
|
||||
<el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
|
||||
<el-table-column min-width="150px" align="center" prop="productname" label="产品名称"></el-table-column>
|
||||
<!-- <el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.productdesc ? row.productdesc : '-' }}
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column min-width="150px" align="center" prop="resourceid" label="资源ID">
|
||||
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="150px" align="center" prop="orderid" label="订单号" :show-overflow-tooltip="true"></el-table-column>
|
||||
|
||||
<!-- 修改后的产品配置列，渲染 spec_data -->
|
||||
<el-table-column min-width="150px" align="center" label="产品配置">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.spec_data && scope.row.spec_data.length">
|
||||
{{ scope.row.spec_data.join(', ') }}
|
||||
</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
|
||||
<el-table-column prop="expire_date" label="到期日期">
|
||||
<template slot-scope="scope">
|
||||
|
||||
@ -29,9 +29,9 @@
|
||||
<el-button type="primary" style="width:60px;height:32px;" size="small" @click="resetSearch">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: calc(100vh - 180px)">
|
||||
<el-row style="height: calc(100vh - 240px)">
|
||||
<el-col >
|
||||
<el-table :data="dataList" height=" calc(100vh - 180px)" style="margin-top: -1px" class="table" border>
|
||||
<el-table :data="dataList" height=" calc(100vh - 260px)" style="margin-top: -1px" class="table" border>
|
||||
<el-table-column min-width="150" label="产品名称" prop="name"></el-table-column>
|
||||
<el-table-column min-width="150" label="产品规格" prop="spec_note">
|
||||
<template slot-scope="scope">
|
||||
@ -227,9 +227,19 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.search {
|
||||
.input-with-select {
|
||||
width: 60%;
|
||||
width: 70%;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.searchSelect {
|
||||
width: 110px;
|
||||
@ -243,28 +253,183 @@ export default {
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
::v-deep .el-table__header-wrapper {
|
||||
background-color: #f0f7ff;
|
||||
|
||||
th {
|
||||
background-color: #f0f7ff;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
tr:hover > td {
|
||||
background-color: #f5f9ff !important;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 0;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
padding-left: 15px;
|
||||
height: 35px;
|
||||
padding: 8px 16px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
//border:1px solid red;
|
||||
background-color: #d5e7ff;
|
||||
background-color: #ecf5ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #002da0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #409eff;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #409eff;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.label-style{
|
||||
|
||||
.label-style {
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #484545;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 搜索区域样式优化
|
||||
.search-area {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 16px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.el-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
::v-deep .el-dialog {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__header {
|
||||
background-color: #f0f7ff;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
.el-dialog__title {
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
|
||||
.el-form-item__label {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重置按钮样式
|
||||
.reset-btn {
|
||||
background-color: #909399;
|
||||
border-color: #909399;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #a6a9ad;
|
||||
border-color: #a6a9ad;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(144, 147, 153, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 选择器样式优化
|
||||
::v-deep .el-select {
|
||||
.el-input__inner {
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式调整
|
||||
@media (max-width: 1200px) {
|
||||
.search-area {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
|
||||
.el-col {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格操作列按钮样式
|
||||
.operation-cell {
|
||||
.el-button {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -427,45 +427,318 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mainBox {
|
||||
padding: 24px;
|
||||
height: calc(100vh - 100px);
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
|
||||
overflow-y: auto;
|
||||
|
||||
// 步骤容器样式
|
||||
.step-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤标题样式
|
||||
.titleOut {
|
||||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
margin-right: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
.demo-dynamic {
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.mainBox {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
height: calc(100vh - 100px);
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.titleOut {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #4c4948;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
background: none;
|
||||
border-top: 1px dashed #e4e7ed;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
// 输入框样式
|
||||
::v-deep .el-input,
|
||||
::v-deep .el-select,
|
||||
::v-deep .el-date-editor {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
::v-deep .el-button {
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
|
||||
&.el-button--primary {
|
||||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--danger {
|
||||
background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #c0c4cc;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--default {
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
border-color: #409eff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分类样式优化
|
||||
.typeStyle {
|
||||
padding-left: 0;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
// background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
// border-left: 4px solid #409eff;
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
|
||||
&::before {
|
||||
content: '•';
|
||||
color: #409eff;
|
||||
margin-right: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 200px;
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
|
||||
&.is-disabled .el-input__inner {
|
||||
background-color: #f5f7fa;
|
||||
border-color: #e4e7ed;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.mainBox {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.demo-dynamic {
|
||||
padding: 12px;
|
||||
|
||||
::v-deep .el-row {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
::v-deep .el-col {
|
||||
padding: 0 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
.typeStyle {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
li {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 小屏幕下按钮堆叠
|
||||
::v-deep .el-form-item:last-of-type {
|
||||
.el-button {
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
|
||||
& + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 步骤进度指示器（可选添加）
|
||||
.step-progress {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
padding: 0 20px;
|
||||
|
||||
.step {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #e4e7ed;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #e4e7ed;
|
||||
color: #909399;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.step-number {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载和状态提示优化
|
||||
::v-deep .el-message {
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&.el-message--success {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
|
||||
&.el-message--error {
|
||||
background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证状态
|
||||
::v-deep .el-form-item.is-error {
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
border-color: #f56c6c;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item.is-success {
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
border-color: #67c23a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,9 +40,9 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: calc(100vh - 195px);">
|
||||
<el-row style="height: calc(100vh - 240px);">
|
||||
<el-col>
|
||||
<el-table v-loading="loading" @selection-change="selectionChange" :data="dataList" min-width="400px" style="margin-top: -1px" height="calc(100vh - 243px)" class="table" border>
|
||||
<el-table v-loading="loading" @selection-change="selectionChange" :data="dataList" min-width="400px" style="margin-top: -1px" height="calc(100vh - 280px)" class="table" border>
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column min-width="160" label="产品名称" prop="name"> </el-table-column>
|
||||
@ -386,13 +386,24 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
background-color: white;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.search {
|
||||
.input-with-select {
|
||||
width: 60%;
|
||||
width: 70%;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.searchSelect {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.searchSelectIcon {
|
||||
width: 30px;
|
||||
}
|
||||
@ -401,27 +412,272 @@ export default {
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
|
||||
::v-deep .el-table__header-wrapper {
|
||||
background-color: #f0f7ff;
|
||||
|
||||
th {
|
||||
background-color: #f0f7ff;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
tr:hover > td {
|
||||
background-color: #f5f9ff !important;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 0;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-button--primary {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-title {
|
||||
padding-left: 15px;
|
||||
height: 35px;
|
||||
padding: 8px 16px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
//border:1px solid red;
|
||||
background-color: #d5e7ff;
|
||||
background: linear-gradient(135deg, #ecf5ff 0%, #e1f0ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #002da0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: #409eff;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #409eff;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.label-style{
|
||||
|
||||
.label-style {
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #2c2a2a;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 搜索区域样式优化
|
||||
.search-area {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 16px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.el-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 折扣区间样式优化
|
||||
.discount-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.priceInput {
|
||||
::v-deep .el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.range-separator {
|
||||
margin: 0 8px;
|
||||
color: #c0c4cc;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置按钮样式
|
||||
.reset-btn {
|
||||
background-color: #909399;
|
||||
border-color: #909399;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #a6a9ad;
|
||||
border-color: #a6a9ad;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(144, 147, 153, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 统一折扣设置按钮
|
||||
.batch-discount-btn {
|
||||
margin-top: 10px;
|
||||
|
||||
.el-button {
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 对话框样式优化
|
||||
::v-deep .el-dialog {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__header {
|
||||
background-color: #f0f7ff;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
|
||||
.el-dialog__title {
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
|
||||
.el-form-item__label {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-slider {
|
||||
margin-top: 10px;
|
||||
|
||||
.el-slider__button {
|
||||
border-color: #409eff;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择器样式优化
|
||||
::v-deep .el-select {
|
||||
.el-input__inner {
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式优化
|
||||
::v-deep .el-input-number {
|
||||
.el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式调整
|
||||
@media (max-width: 1200px) {
|
||||
.search-area {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
|
||||
.el-col {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-range {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.range-separator {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态样式优化
|
||||
::v-deep .el-loading-mask {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
.el-loading-spinner {
|
||||
.circular {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.el-loading-text {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格操作列按钮样式
|
||||
.operation-cell {
|
||||
.el-button {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 状态标签样式
|
||||
.status-tag {
|
||||
&.configured {
|
||||
color: #67c23a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.unconfigured {
|
||||
color: #f56c6c;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 供应商选择器容器
|
||||
.provider-selector {
|
||||
margin-right: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,54 +1,194 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" label-width="180px" :model="voucherData" class="demo-form-inline">
|
||||
<el-form-item size="mini" label="发行方名称">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="发行方名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="发行方 orgid">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="发行方 orgid"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="接收方名称">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="接收方名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="接收方 orgid">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="接收方 orgid"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="承接方拿到算力券的时间">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="承接方拿到算力券的时间"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="面额">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="面额"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="余额">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="余额"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="地域">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="地域"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="可用区">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="可用区"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="使用范围">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="使用范围"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="状态 ">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="状态 "></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="发放给客户的时间">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="发放给客户的时间"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="生效时间">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="生效时间"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item size="mini" label="失效时间">
|
||||
<el-input v-model="voucherData.issuer_name" placeholder="失效时间"></el-input>
|
||||
</el-form-item>
|
||||
<div class="voucher-container">
|
||||
<div class="form-card">
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">算力券信息</h2>
|
||||
<div class="form-subtitle">请填写算力券的详细信息</div>
|
||||
</div>
|
||||
|
||||
<el-form :model="voucherData" class="voucher-form">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">发行方名称</label>
|
||||
<el-input
|
||||
v-model="voucherData.issuer_name"
|
||||
placeholder="请输入发行方名称"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">发行方 orgid</label>
|
||||
<el-input
|
||||
v-model="voucherData.issuer_orgid"
|
||||
placeholder="请输入发行方 orgid"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">接收方名称</label>
|
||||
<el-input
|
||||
v-model="voucherData.receiver_name"
|
||||
placeholder="请输入接收方名称"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">接收方 orgid</label>
|
||||
<el-input
|
||||
v-model="voucherData.receiver_orgid"
|
||||
placeholder="请输入接收方 orgid"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">承接方拿到算力券的时间</label>
|
||||
<el-date-picker
|
||||
v-model="voucherData.obtain_time"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">面额</label>
|
||||
<el-input
|
||||
v-model="voucherData.denomination"
|
||||
placeholder="请输入面额"
|
||||
size="small"
|
||||
class="form-input"
|
||||
>
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">余额</label>
|
||||
<el-input
|
||||
v-model="voucherData.balance"
|
||||
placeholder="请输入余额"
|
||||
size="small"
|
||||
class="form-input"
|
||||
>
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">地域</label>
|
||||
<el-input
|
||||
v-model="voucherData.region"
|
||||
placeholder="请输入地域"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">可用区</label>
|
||||
<el-input
|
||||
v-model="voucherData.zone"
|
||||
placeholder="请输入可用区"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">使用范围</label>
|
||||
<el-select
|
||||
v-model="voucherData.use_scope"
|
||||
placeholder="请选择使用范围"
|
||||
size="small"
|
||||
class="form-input"
|
||||
>
|
||||
<el-option label="全部服务" value="all"></el-option>
|
||||
<el-option label="计算服务" value="compute"></el-option>
|
||||
<el-option label="存储服务" value="storage"></el-option>
|
||||
<el-option label="网络服务" value="network"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">状态</label>
|
||||
<el-select
|
||||
v-model="voucherData.status"
|
||||
placeholder="请选择状态"
|
||||
size="small"
|
||||
class="form-input"
|
||||
>
|
||||
<el-option label="未使用" value="unused"></el-option>
|
||||
<el-option label="已使用" value="used"></el-option>
|
||||
<el-option label="已过期" value="expired"></el-option>
|
||||
<el-option label="已冻结" value="frozen"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">发放给客户的时间</label>
|
||||
<el-date-picker
|
||||
v-model="voucherData.distribute"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">生效时间</label>
|
||||
<el-date-picker
|
||||
v-model="voucherData.start_time"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">失效时间</label>
|
||||
<el-date-picker
|
||||
v-model="voucherData.end_time"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
size="small"
|
||||
class="form-input"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit"
|
||||
class="submit-btn"
|
||||
>
|
||||
<i class="el-icon-check"></i>
|
||||
添加算力券
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="onReset"
|
||||
class="reset-btn"
|
||||
>
|
||||
<i class="el-icon-refresh"></i>
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="onSubmit">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "voucher",
|
||||
@ -75,19 +215,212 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
console.log('submit!', this.voucherData);
|
||||
// 这里可以添加表单验证和提交逻辑
|
||||
},
|
||||
onReset() {
|
||||
this.voucherData = {
|
||||
issuer_name: "",
|
||||
issuer_orgid: "",
|
||||
receiver_name: "",
|
||||
receiver_orgid: "",
|
||||
obtain_time: "",
|
||||
denomination: "",
|
||||
balance: "",
|
||||
region: "",
|
||||
zone: "",
|
||||
use_scope: "",
|
||||
status: "",
|
||||
distribute: "",
|
||||
record: "",
|
||||
start_time: "",
|
||||
end_time: ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btnBox {
|
||||
.voucher-container {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||
color: white;
|
||||
padding: 20px 24px;
|
||||
|
||||
.form-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
margin-top: 4px;
|
||||
opacity: 0.9;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.voucher-form {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin-top: 50px;
|
||||
gap: 16px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
|
||||
.submit-btn {
|
||||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
border-radius: 4px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
border-color: #409eff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.voucher-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.voucher-form {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
padding: 16px 20px;
|
||||
|
||||
.form-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态和动画
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// 成功提示样式
|
||||
.success-message {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
||||
border: 1px solid #91d5ff;
|
||||
color: #409eff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user