bug 修复
This commit is contained in:
parent
14b02487ee
commit
ad4df65ff8
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="not-dev-container">
|
<div class="not-dev-container app-container">
|
||||||
<div class="not-dev-content">
|
<div class="not-dev-content">
|
||||||
<div class="not-dev-image">
|
<div class="not-dev-image">
|
||||||
<svg
|
<svg
|
||||||
|
|
@ -145,7 +145,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-height: 100vh;
|
// min-height: 100vh;
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||||
|
|
||||||
.not-dev-content {
|
.not-dev-content {
|
||||||
|
|
|
||||||
|
|
@ -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