禅道bug修复
This commit is contained in:
BianLzhaoMin
parent
ad4df65ff8
commit
8f89ab3826
|
|
@ -225,6 +225,9 @@ export default {
|
|||
data() {
|
||||
// 自定义校验规则 判断竣工结束时间是否大于开工开始时间
|
||||
const validatePlanEndTime = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback()
|
||||
}
|
||||
if (value <= this.addOrEditForm.startTime) {
|
||||
callback(new Error('竣工时间不能小于开工时间'))
|
||||
}
|
||||
|
|
@ -232,6 +235,9 @@ export default {
|
|||
}
|
||||
|
||||
const validatePlanStartTime = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback()
|
||||
}
|
||||
if (value >= this.addOrEditForm.endTime) {
|
||||
callback(new Error('开工时间不能大于竣工时间'))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</template>
|
||||
</TitleTip>
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: right">
|
||||
<el-col :span="4" style="text-align: right" v-if="formType != 3">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="medium"
|
||||
|
|
@ -40,7 +40,12 @@
|
|||
<el-table-column align="center" label="补卡工程" prop="proName" />
|
||||
<el-table-column align="center" label="联系方式" prop="phone" />
|
||||
<el-table-column align="center" label="所属班组" prop="teamName" />
|
||||
<el-table-column align="center" label="操作" width="160">
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="操作"
|
||||
width="160"
|
||||
v-if="formType != 3"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
|
|
@ -81,6 +86,7 @@
|
|||
maxlength="30"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
:disabled="formType === 3"
|
||||
placeholder="请输入补卡说明"
|
||||
v-model="addParams.repairRemark"
|
||||
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||
|
|
@ -94,6 +100,7 @@
|
|||
:file-size="20"
|
||||
:multiple="true"
|
||||
uploadTip="补卡说明附件上传"
|
||||
v-if="formType != 3"
|
||||
:file-list.sync="addParams.fileList"
|
||||
:file-type="[
|
||||
'jpg',
|
||||
|
|
@ -104,6 +111,27 @@
|
|||
'docx',
|
||||
]"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-else
|
||||
:key="item.id"
|
||||
class="files-content"
|
||||
v-for="item in addParams.fileList"
|
||||
>
|
||||
<el-tag
|
||||
@click="onHandlePreviewFile(item)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-tag>
|
||||
|
||||
<span
|
||||
class="cursor-blue"
|
||||
@click="onHandleDownloadFile(item)"
|
||||
>
|
||||
下载
|
||||
</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -163,6 +191,10 @@ export default {
|
|||
type: [Number, String],
|
||||
default: () => '',
|
||||
},
|
||||
formType: {
|
||||
type: Number,
|
||||
default: () => 1,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DialogModel,
|
||||
|
|
@ -237,9 +269,21 @@ export default {
|
|||
this.tableData.splice(index, 1)
|
||||
},
|
||||
|
||||
onHandlePreviewFile(item) {
|
||||
window.open(item.url, '_blank')
|
||||
},
|
||||
onHandleDownloadFile(item) {
|
||||
window.open(item.url, '_blank')
|
||||
},
|
||||
|
||||
// 补卡信息接口新增和修改
|
||||
async onHandleConfirmFinishFun() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
if (this.formType === 3) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
// 组装参数
|
||||
const { repairMonth, repairRemark, fileList } = this.addParams
|
||||
const repairNum = this.tableData.length
|
||||
|
|
|
|||
|
|
@ -44,10 +44,22 @@
|
|||
>
|
||||
修改
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-view"
|
||||
v-if="data.checkStatus != 2"
|
||||
v-hasPermi="['attendance:machine:delete']"
|
||||
@click="onHandleAuditAndDetail(data)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="data.checkStatus === 2"
|
||||
v-hasPermi="['attendance:machine:delete']"
|
||||
@click="onHandleDeleteCardReplacementApply(data)"
|
||||
>
|
||||
|
|
@ -113,11 +125,13 @@
|
|||
<template
|
||||
v-if="
|
||||
dialogConfig.outerTitle === '新增补卡申请' ||
|
||||
dialogConfig.outerTitle === '修改补卡申请'
|
||||
dialogConfig.outerTitle === '修改补卡申请' ||
|
||||
dialogConfig.outerTitle === '补卡详情'
|
||||
"
|
||||
>
|
||||
<AddApplyForm
|
||||
ref="addApplyFormRef"
|
||||
:formType="formType"
|
||||
:queryDetailsId="queryDetailsId"
|
||||
:selectProjectId="selectProjectId"
|
||||
:selectProjectName="selectProjectName"
|
||||
|
|
@ -194,6 +208,7 @@ export default {
|
|||
onHandleEditCardReplacementApply(data) {
|
||||
this.queryDetailsId = data.id
|
||||
this.selectProjectId = data.proId
|
||||
this.formType = 2
|
||||
this.selectProjectName = data.proName
|
||||
this.dialogConfig.outerTitle = '修改补卡申请'
|
||||
this.dialogConfig.outerWidth = '80%'
|
||||
|
|
@ -212,6 +227,17 @@ export default {
|
|||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 详情
|
||||
onHandleAuditAndDetail(data) {
|
||||
this.formType = 3
|
||||
this.queryDetailsId = data.id
|
||||
this.dialogConfig.outerTitle = '补卡详情'
|
||||
this.dialogConfig.outerWidth = '80%'
|
||||
this.dialogConfig.minHeight = '80vh'
|
||||
this.dialogConfig.maxHeight = '80h'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
||||
// 删除
|
||||
onHandleDeleteCardReplacementApply(data) {
|
||||
this.$confirm('确定删除该补卡申请吗？', '温馨提示', {
|
||||
|
|
@ -252,6 +278,7 @@ export default {
|
|||
}
|
||||
|
||||
this.dialogConfig.outerTitle = '新增补卡申请'
|
||||
this.formType = 1
|
||||
this.dialogConfig.outerWidth = '80%'
|
||||
this.dialogConfig.minHeight = '80vh'
|
||||
this.dialogConfig.maxHeight = '80h'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<div class="not-dev-container app-container">
|
||||
<div class="not-dev-content">
|
||||
<div class="not-dev-image">
|
||||
<svg
|
||||
width="400"
|
||||
height="400"
|
||||
viewBox="0 0 400 400"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- 背景圆形 -->
|
||||
<circle
|
||||
cx="200"
|
||||
cy="200"
|
||||
r="180"
|
||||
fill="#F8FAFC"
|
||||
stroke="#E2E8F0"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- 主要图标：建筑工地或开发中的图标 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="140"
|
||||
width="160"
|
||||
height="120"
|
||||
rx="8"
|
||||
fill="#3B82F6"
|
||||
opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="130"
|
||||
y="150"
|
||||
width="140"
|
||||
height="100"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.2"
|
||||
/>
|
||||
|
||||
<!-- 脚手架结构 -->
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="282"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="200"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="280"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
|
||||
<!-- 工具图标 -->
|
||||
<circle cx="160" cy="180" r="15" fill="#F59E0B" />
|
||||
<circle cx="240" cy="180" r="15" fill="#10B981" />
|
||||
<circle cx="200" cy="220" r="15" fill="#EF4444" />
|
||||
|
||||
<!-- 进度条 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="160"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#E2E8F0"
|
||||
/>
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="80"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
/>
|
||||
|
||||
<!-- 装饰性元素 -->
|
||||
<circle
|
||||
cx="150"
|
||||
cy="80"
|
||||
r="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="250"
|
||||
cy="90"
|
||||
r="3"
|
||||
fill="#10B981"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="180"
|
||||
cy="70"
|
||||
r="2"
|
||||
fill="#F59E0B"
|
||||
opacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="not-dev-text">
|
||||
<h2 class="title">即将上线</h2>
|
||||
<p class="subtitle">敬请期待...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotDev',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.not-dev-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
|
||||
.not-dev-content {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.not-dev-image {
|
||||
margin-bottom: 32px;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.15));
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
margin: 0 0 16px 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.not-dev-container {
|
||||
padding: 20px;
|
||||
|
||||
.not-dev-content {
|
||||
padding: 30px 20px;
|
||||
|
||||
.not-dev-image svg {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.not-dev-container {
|
||||
.not-dev-content {
|
||||
.not-dev-image svg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<div class="not-dev-container app-container">
|
||||
<div class="not-dev-content">
|
||||
<div class="not-dev-image">
|
||||
<svg
|
||||
width="400"
|
||||
height="400"
|
||||
viewBox="0 0 400 400"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- 背景圆形 -->
|
||||
<circle
|
||||
cx="200"
|
||||
cy="200"
|
||||
r="180"
|
||||
fill="#F8FAFC"
|
||||
stroke="#E2E8F0"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- 主要图标：建筑工地或开发中的图标 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="140"
|
||||
width="160"
|
||||
height="120"
|
||||
rx="8"
|
||||
fill="#3B82F6"
|
||||
opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="130"
|
||||
y="150"
|
||||
width="140"
|
||||
height="100"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.2"
|
||||
/>
|
||||
|
||||
<!-- 脚手架结构 -->
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="282"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="200"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="280"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
|
||||
<!-- 工具图标 -->
|
||||
<circle cx="160" cy="180" r="15" fill="#F59E0B" />
|
||||
<circle cx="240" cy="180" r="15" fill="#10B981" />
|
||||
<circle cx="200" cy="220" r="15" fill="#EF4444" />
|
||||
|
||||
<!-- 进度条 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="160"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#E2E8F0"
|
||||
/>
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="80"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
/>
|
||||
|
||||
<!-- 装饰性元素 -->
|
||||
<circle
|
||||
cx="150"
|
||||
cy="80"
|
||||
r="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="250"
|
||||
cy="90"
|
||||
r="3"
|
||||
fill="#10B981"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="180"
|
||||
cy="70"
|
||||
r="2"
|
||||
fill="#F59E0B"
|
||||
opacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="not-dev-text">
|
||||
<h2 class="title">即将上线</h2>
|
||||
<p class="subtitle">敬请期待...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotDev',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.not-dev-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
|
||||
.not-dev-content {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.not-dev-image {
|
||||
margin-bottom: 32px;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.15));
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
margin: 0 0 16px 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.not-dev-container {
|
||||
padding: 20px;
|
||||
|
||||
.not-dev-content {
|
||||
padding: 30px 20px;
|
||||
|
||||
.not-dev-image svg {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.not-dev-container {
|
||||
.not-dev-content {
|
||||
.not-dev-image svg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<div class="not-dev-container app-container">
|
||||
<div class="not-dev-content">
|
||||
<div class="not-dev-image">
|
||||
<svg
|
||||
width="400"
|
||||
height="400"
|
||||
viewBox="0 0 400 400"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- 背景圆形 -->
|
||||
<circle
|
||||
cx="200"
|
||||
cy="200"
|
||||
r="180"
|
||||
fill="#F8FAFC"
|
||||
stroke="#E2E8F0"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- 主要图标：建筑工地或开发中的图标 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="140"
|
||||
width="160"
|
||||
height="120"
|
||||
rx="8"
|
||||
fill="#3B82F6"
|
||||
opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="130"
|
||||
y="150"
|
||||
width="140"
|
||||
height="100"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.2"
|
||||
/>
|
||||
|
||||
<!-- 脚手架结构 -->
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="282"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="200"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="280"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
|
||||
<!-- 工具图标 -->
|
||||
<circle cx="160" cy="180" r="15" fill="#F59E0B" />
|
||||
<circle cx="240" cy="180" r="15" fill="#10B981" />
|
||||
<circle cx="200" cy="220" r="15" fill="#EF4444" />
|
||||
|
||||
<!-- 进度条 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="160"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#E2E8F0"
|
||||
/>
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="80"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
/>
|
||||
|
||||
<!-- 装饰性元素 -->
|
||||
<circle
|
||||
cx="150"
|
||||
cy="80"
|
||||
r="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="250"
|
||||
cy="90"
|
||||
r="3"
|
||||
fill="#10B981"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="180"
|
||||
cy="70"
|
||||
r="2"
|
||||
fill="#F59E0B"
|
||||
opacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="not-dev-text">
|
||||
<h2 class="title">即将上线</h2>
|
||||
<p class="subtitle">敬请期待...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotDev',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.not-dev-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
|
||||
.not-dev-content {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.not-dev-image {
|
||||
margin-bottom: 32px;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.15));
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
margin: 0 0 16px 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.not-dev-container {
|
||||
padding: 20px;
|
||||
|
||||
.not-dev-content {
|
||||
padding: 30px 20px;
|
||||
|
||||
.not-dev-image svg {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.not-dev-container {
|
||||
.not-dev-content {
|
||||
.not-dev-image svg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<div class="not-dev-container app-container">
|
||||
<div class="not-dev-content">
|
||||
<div class="not-dev-image">
|
||||
<svg
|
||||
width="400"
|
||||
height="400"
|
||||
viewBox="0 0 400 400"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- 背景圆形 -->
|
||||
<circle
|
||||
cx="200"
|
||||
cy="200"
|
||||
r="180"
|
||||
fill="#F8FAFC"
|
||||
stroke="#E2E8F0"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- 主要图标：建筑工地或开发中的图标 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="140"
|
||||
width="160"
|
||||
height="120"
|
||||
rx="8"
|
||||
fill="#3B82F6"
|
||||
opacity="0.1"
|
||||
/>
|
||||
<rect
|
||||
x="130"
|
||||
y="150"
|
||||
width="140"
|
||||
height="100"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.2"
|
||||
/>
|
||||
|
||||
<!-- 脚手架结构 -->
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="282"
|
||||
y="120"
|
||||
width="8"
|
||||
height="160"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="120"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="200"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
<rect
|
||||
x="110"
|
||||
y="280"
|
||||
width="180"
|
||||
height="8"
|
||||
fill="#94A3B8"
|
||||
/>
|
||||
|
||||
<!-- 工具图标 -->
|
||||
<circle cx="160" cy="180" r="15" fill="#F59E0B" />
|
||||
<circle cx="240" cy="180" r="15" fill="#10B981" />
|
||||
<circle cx="200" cy="220" r="15" fill="#EF4444" />
|
||||
|
||||
<!-- 进度条 -->
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="160"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#E2E8F0"
|
||||
/>
|
||||
<rect
|
||||
x="120"
|
||||
y="320"
|
||||
width="80"
|
||||
height="8"
|
||||
rx="4"
|
||||
fill="#3B82F6"
|
||||
/>
|
||||
|
||||
<!-- 装饰性元素 -->
|
||||
<circle
|
||||
cx="150"
|
||||
cy="80"
|
||||
r="4"
|
||||
fill="#3B82F6"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="250"
|
||||
cy="90"
|
||||
r="3"
|
||||
fill="#10B981"
|
||||
opacity="0.6"
|
||||
/>
|
||||
<circle
|
||||
cx="180"
|
||||
cy="70"
|
||||
r="2"
|
||||
fill="#F59E0B"
|
||||
opacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="not-dev-text">
|
||||
<h2 class="title">即将上线</h2>
|
||||
<p class="subtitle">敬请期待...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotDev',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.not-dev-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
|
||||
.not-dev-content {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.not-dev-image {
|
||||
margin-bottom: 32px;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.15));
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
margin: 0 0 16px 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #64748b;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.not-dev-container {
|
||||
padding: 20px;
|
||||
|
||||
.not-dev-content {
|
||||
padding: 30px 20px;
|
||||
|
||||
.not-dev-image svg {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.not-dev-container {
|
||||
.not-dev-content {
|
||||
.not-dev-image svg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.not-dev-text {
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue