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