Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 pyg8ivf7o
|
075d7e1c43 | 5 days ago |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,682 +0,0 @@
|
||||
/* 基本重置 */
|
||||
body, h1, h2, p, a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* 基础字体和背景 */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fe5b56;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 输入框和按钮样式 */
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
width: calc(100% - 22px); /* 减去padding和border的宽度 */
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
animation: fadeInDown 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
/* 针对小屏幕的样式调整 */
|
||||
}
|
||||
|
||||
/* 动态阴影效果 */
|
||||
@keyframes shadowPulse {
|
||||
0%, 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); }
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation: shadowPulse 1.5s infinite;
|
||||
}
|
||||
|
||||
/* 文字跳动动画*/
|
||||
h1 {
|
||||
animation: jump 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
/* 输入框和按钮的悬停效果*/
|
||||
input[type="text"]:hover, button:hover {
|
||||
border: 1px solid #d9534f;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
/*按钮点击动画*/
|
||||
button:active {
|
||||
transform: scale(0.95);
|
||||
background-color: #b52b27;
|
||||
}
|
||||
/*光晕效果*/
|
||||
.glow {
|
||||
animation: glowEffect 1.5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glowEffect {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #d9534f, 0 0 20px #d9534f, 0 0 25px #d9534f, 0 0 30px #d9534f;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #d9534f, 0 0 30px #d9534f, 0 0 40px #d9534f, 0 0 50px #d9534f, 0 0 60px #d9534f;
|
||||
}
|
||||
}
|
||||
/* 3D翻转效果*/
|
||||
.feature {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.feature:hover .feature-inner {
|
||||
transform: rotateY(360deg);
|
||||
transition: transform 15s;
|
||||
}
|
||||
/*视差滚动效果*/
|
||||
|
||||
.parallax-section {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
/* 粒子背景*/
|
||||
.particle-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
fill: rgba(255, 255, 255, 0.8);
|
||||
animation: moveParticles 10s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes moveParticles {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(100px, 100px); }
|
||||
}
|
||||
/*线条动画*/
|
||||
.dynamic-line {
|
||||
stroke-dasharray: 300;
|
||||
stroke-dashoffset: 300;
|
||||
animation: dash 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
from {
|
||||
stroke-dashoffset: 300;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
/*光晕效果*/
|
||||
button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 300%;
|
||||
height: 200%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
button:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*闪烁效果*/
|
||||
@keyframes blinker {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.blink-text {
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
/* 打字机效果*/
|
||||
.typewriter {
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
animation: typewriter 4s steps(40) 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
/* 3D文字效果*/
|
||||
.three-d-text {
|
||||
transform: rotateX(45deg) rotateY(45deg);
|
||||
transform-style: preserve-3d;
|
||||
perspective: 600px;
|
||||
}
|
||||
/*渐变文字效果*/
|
||||
.gradient-text {
|
||||
background: -webkit-linear-gradient(45deg, #d9534f, #fe5b56);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
/*动态阴影效果*/
|
||||
.dynamic-shadow {
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dynamic-shadow:hover {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/*光点闪烁效果*/
|
||||
.sparkle-point {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
pointer-events: none;
|
||||
animation: sparkle 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0% { opacity: 0; transform: scale(0); }
|
||||
50% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0); }
|
||||
}
|
||||
|
||||
/*动态渲染效果*/
|
||||
.render-effect {
|
||||
animation: renderEffect 5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes renderEffect {
|
||||
0%, 100% { filter: grayscale(0); }
|
||||
50% { filter: grayscale(1); }
|
||||
}
|
||||
/* 全屏背景动画*/
|
||||
body {
|
||||
background: linear-gradient(-45deg, #000, #7c7c7c, #000);
|
||||
background-size: 400% 1000%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/*线条动画*/
|
||||
.waves {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
@keyframes backgroundGradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
body {
|
||||
animation: backgroundGradient 15s ease infinite;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fdfdfd;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
}
|
||||
.svg-background {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1; /* 确保SVG在内容的后面 */
|
||||
}
|
||||
@keyframes colorShift {
|
||||
0% { background-color: #d9534f; }
|
||||
50% { background-color: #fe5b56; }
|
||||
100% { background-color: #d9534f; }
|
||||
}
|
||||
button {
|
||||
animation: colorShift 3s infinite;
|
||||
}
|
||||
.blink {
|
||||
animation: blink 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
input[type="text"]:hover {
|
||||
background-color: rgba(217, 83, 79, 0.1);
|
||||
}
|
||||
.parallax-section {
|
||||
background-image: url('your-image.jpg');
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
}
|
||||
/*字体动态改变*/
|
||||
h2 {
|
||||
transition: font-size 0.3s;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
font-size: 2em;
|
||||
}
|
||||
/*动态内容加载*/
|
||||
.main-content {
|
||||
animation: fadeIn 1s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
/* 旋转效果*/
|
||||
footer {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
footer:hover {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
.dynamic-line {
|
||||
stroke: #d9534f;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
animation: dash 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% { stroke-dasharray: 0, 100; }
|
||||
100% { stroke-dasharray: 100, 0; }
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: rotateX(10deg) rotateY(10deg);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
/*文字打字效果*/
|
||||
.typewriter {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-right: .15em solid orange;
|
||||
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
from, to { border-color: transparent; }
|
||||
50% { border-color: orange; }
|
||||
}
|
||||
/*旋转加载*/
|
||||
.loading {
|
||||
border: 8px solid #f3f3f3;
|
||||
border-top: 8px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
/*字体阴影动态*/
|
||||
h2 {
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
transition: text-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
text-shadow: 0 0 20px rgba(255, 0, 0, 1);
|
||||
}
|
||||
/*彩色阴影*/
|
||||
button {
|
||||
box-shadow: 0 4px 20px rgba(217, 83, 79, 0.5);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 8px 30px rgba(217, 83, 79, 0.8);
|
||||
}
|
||||
|
||||
.particle-background {
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
|
||||
animation: particleAnimation 5s infinite;
|
||||
}
|
||||
/*随机粒子背景*/
|
||||
@keyframes particleAnimation {
|
||||
0% { background-size: 0%; }
|
||||
100% { background-size: 100%; }
|
||||
}
|
||||
|
||||
/*光环效果*/
|
||||
header {
|
||||
box-shadow: 0 0 20px rgba(217, 83, 79, 0.6);
|
||||
}
|
||||
/*悬浮按钮效果*/
|
||||
button {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*玻璃效果*/
|
||||
main {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
/**/
|
||||
.result-box {
|
||||
background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */
|
||||
border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */
|
||||
animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */
|
||||
}
|
||||
|
||||
/* 结果文本框样式 */
|
||||
.result-textarea {
|
||||
background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */
|
||||
border: 1px solid #ddd; /* 边框颜色与输入框一致 */
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
padding: 10px;
|
||||
width: 100%; /* 宽度与输入框一致 */
|
||||
box-sizing: border-box; /* 盒模型宽度包含padding和border */
|
||||
resize: none; /* 禁止调整大小 */
|
||||
font-family: 'Arial', sans-serif; /* 与页面字体一致 */
|
||||
color: #333; /* 文本颜色与页面一致 */
|
||||
line-height: 1.5; /* 行高 */
|
||||
overflow-y: auto; /* 超出内容显示滚动条 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.result-box {
|
||||
width: auto; /* 小屏幕上宽度自动调整 */
|
||||
margin-left: 10px; /* 较小的外边距 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: calc(100% - 22px); /* 调整输入框宽度 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */
|
||||
.result-box:hover {
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 点击效果，使结果框在被点击时有压缩效果 */
|
||||
.result-box:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
/* 显示动画 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏动画 */
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 展开动画 */
|
||||
@keyframes expand {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: 200px; /* 根据需要调整高度 */
|
||||
}
|
||||
}
|
||||
.result-box {
|
||||
display: none; /* 初始时隐藏 */
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #d9534f;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
animation-fill-mode: forwards; /* 保持动画结束状态 */
|
||||
overflow: hidden; /* 隐藏内容超出部分 */
|
||||
}
|
||||
|
||||
|
||||
.result-box:active {
|
||||
animation: ripple 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
.result-box {
|
||||
background-size: 200% 200%;
|
||||
animation: gradientBG 5s ease infinite;
|
||||
}
|
||||
|
||||
|
||||
@keyframes textBounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
}
|
||||
.result-textarea:hover {
|
||||
animation: textBounce 0.5s infinite;
|
||||
}
|
||||
@keyframes borderBounce {
|
||||
0%, 100% { border: 1px solid #d9534f; }
|
||||
50% { border: 2px solid #ff6e7a; }
|
||||
}
|
||||
.result-box:hover {
|
||||
animation: borderBounce 1s infinite;
|
||||
}
|
||||
@keyframes backgroundBlink {
|
||||
0%, 100% { background-color: #ff6e7a; }
|
||||
50% { background-color: #d9534f; }
|
||||
}
|
||||
.result-box:hover {
|
||||
animation: backgroundBlink 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
.result-textarea {
|
||||
animation: typewriter 3s steps(30, end) forwards;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
background-image: linear-gradient(135deg, #ff6e7a, #d9534f);
|
||||
}
|
||||
.result-textarea {
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.result-box, .result-textarea {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.result-box:hover {
|
||||
background-image: linear-gradient(135deg, #ff7e8a, #e95a5f);
|
||||
}
|
||||
|
||||
.result-box:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
@keyframes textGlow {
|
||||
0%, 100% { color: #333; }
|
||||
50% { color: #555; }
|
||||
}
|
||||
.result-textarea {
|
||||
animation: textGlow 2s infinite;
|
||||
}
|
||||
.result-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.result-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.result-box:hover::before {
|
||||
animation: ripple 1.5s infinite;
|
||||
}
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
.result-box {
|
||||
animation: bounce 2s infinite ease-in-out;
|
||||
}
|
||||
@keyframes shadowSpread {
|
||||
0%, 100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
|
||||
50% { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); }
|
||||
}
|
||||
.result-box:hover {
|
||||
animation: shadowSpread 2s infinite;
|
||||
}
|
||||
@ -1,568 +0,0 @@
|
||||
/* 基本重置 */
|
||||
body, h1, h2, p, a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* 基础字体和背景 */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fe5b56;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 输入框和按钮样式 */
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
width: calc(100% - 22px); /* 减去padding和border的宽度 */
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
animation: fadeInDown 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
/* 针对小屏幕的样式调整 */
|
||||
}
|
||||
|
||||
/* 动态阴影效果 */
|
||||
@keyframes shadowPulse {
|
||||
0%, 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); }
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation: shadowPulse 1.5s infinite;
|
||||
}
|
||||
|
||||
/* 文字跳动动画*/
|
||||
h1 {
|
||||
animation: jump 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
/* 输入框和按钮的悬停效果*/
|
||||
input[type="text"]:hover, button:hover {
|
||||
border: 1px solid #d9534f;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
/*按钮点击动画*/
|
||||
button:active {
|
||||
transform: scale(0.95);
|
||||
background-color: #b52b27;
|
||||
}
|
||||
/*光晕效果*/
|
||||
.glow {
|
||||
animation: glowEffect 1.5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glowEffect {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #d9534f, 0 0 20px #d9534f, 0 0 25px #d9534f, 0 0 30px #d9534f;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #d9534f, 0 0 30px #d9534f, 0 0 40px #d9534f, 0 0 50px #d9534f, 0 0 60px #d9534f;
|
||||
}
|
||||
}
|
||||
/* 3D翻转效果*/
|
||||
.feature {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.feature:hover .feature-inner {
|
||||
transform: rotateY(360deg);
|
||||
transition: transform 15s;
|
||||
}
|
||||
/*视差滚动效果*/
|
||||
|
||||
.parallax-section {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
/* 粒子背景*/
|
||||
.particle-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
fill: rgba(255, 255, 255, 0.8);
|
||||
animation: moveParticles 10s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes moveParticles {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(100px, 100px); }
|
||||
}
|
||||
/*线条动画*/
|
||||
.dynamic-line {
|
||||
stroke-dasharray: 300;
|
||||
stroke-dashoffset: 300;
|
||||
animation: dash 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
from {
|
||||
stroke-dashoffset: 300;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
/*光晕效果*/
|
||||
button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 300%;
|
||||
height: 200%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
button:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*闪烁效果*/
|
||||
@keyframes blinker {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.blink-text {
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
/* 打字机效果*/
|
||||
.typewriter {
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
animation: typewriter 4s steps(40) 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
/* 3D文字效果*/
|
||||
.three-d-text {
|
||||
transform: rotateX(45deg) rotateY(45deg);
|
||||
transform-style: preserve-3d;
|
||||
perspective: 600px;
|
||||
}
|
||||
/*渐变文字效果*/
|
||||
.gradient-text {
|
||||
background: -webkit-linear-gradient(45deg, #d9534f, #fe5b56);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
/*动态阴影效果*/
|
||||
.dynamic-shadow {
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dynamic-shadow:hover {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/*光点闪烁效果*/
|
||||
.sparkle-point {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
pointer-events: none;
|
||||
animation: sparkle 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0% { opacity: 0; transform: scale(0); }
|
||||
50% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0); }
|
||||
}
|
||||
|
||||
/*动态渲染效果*/
|
||||
.render-effect {
|
||||
animation: renderEffect 5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes renderEffect {
|
||||
0%, 100% { filter: grayscale(0); }
|
||||
50% { filter: grayscale(1); }
|
||||
}
|
||||
/* 全屏背景动画*/
|
||||
body {
|
||||
background: linear-gradient(-45deg, #000, #7c7c7c, #000);
|
||||
background-size: 400% 1000%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/*线条动画*/
|
||||
.waves {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
@keyframes backgroundGradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
body {
|
||||
animation: backgroundGradient 15s ease infinite;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fdfdfd;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
}
|
||||
.svg-background {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1; /* 确保SVG在内容的后面 */
|
||||
}
|
||||
@keyframes colorShift {
|
||||
0% { background-color: #d9534f; }
|
||||
50% { background-color: #fe5b56; }
|
||||
100% { background-color: #d9534f; }
|
||||
}
|
||||
button {
|
||||
animation: colorShift 3s infinite;
|
||||
}
|
||||
.blink {
|
||||
animation: blink 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
input[type="text"]:hover {
|
||||
background-color: rgba(217, 83, 79, 0.1);
|
||||
}
|
||||
.parallax-section {
|
||||
background-image: url('your-image.jpg');
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
}
|
||||
/*字体动态改变*/
|
||||
h2 {
|
||||
transition: font-size 0.3s;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
font-size: 2em;
|
||||
}
|
||||
/*动态内容加载*/
|
||||
.main-content {
|
||||
animation: fadeIn 1s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
/* 旋转效果*/
|
||||
footer {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
footer:hover {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
.dynamic-line {
|
||||
stroke: #d9534f;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
animation: dash 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% { stroke-dasharray: 0, 100; }
|
||||
100% { stroke-dasharray: 100, 0; }
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: rotateX(10deg) rotateY(10deg);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
/*文字打字效果*/
|
||||
.typewriter {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-right: .15em solid orange;
|
||||
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
from, to { border-color: transparent; }
|
||||
50% { border-color: orange; }
|
||||
}
|
||||
/*旋转加载*/
|
||||
.loading {
|
||||
border: 8px solid #f3f3f3;
|
||||
border-top: 8px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
/*字体阴影动态*/
|
||||
h2 {
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
transition: text-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
text-shadow: 0 0 20px rgba(255, 0, 0, 1);
|
||||
}
|
||||
/*彩色阴影*/
|
||||
button {
|
||||
box-shadow: 0 4px 20px rgba(217, 83, 79, 0.5);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 8px 30px rgba(217, 83, 79, 0.8);
|
||||
}
|
||||
|
||||
.particle-background {
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
|
||||
animation: particleAnimation 5s infinite;
|
||||
}
|
||||
/*随机粒子背景*/
|
||||
@keyframes particleAnimation {
|
||||
0% { background-size: 0%; }
|
||||
100% { background-size: 100%; }
|
||||
}
|
||||
|
||||
/*光环效果*/
|
||||
header {
|
||||
box-shadow: 0 0 20px rgba(217, 83, 79, 0.6);
|
||||
}
|
||||
/*悬浮按钮效果*/
|
||||
button {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*玻璃效果*/
|
||||
main {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* 术语 */
|
||||
/* 术语结果框样式 */
|
||||
.result-box {
|
||||
background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */
|
||||
border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */
|
||||
animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */
|
||||
}
|
||||
|
||||
/* 结果文本框样式 */
|
||||
.result-textarea {
|
||||
background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */
|
||||
border: 1px solid #ddd; /* 边框颜色与输入框一致 */
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
padding: 10px;
|
||||
width: 100%; /* 宽度与输入框一致 */
|
||||
box-sizing: border-box; /* 盒模型宽度包含padding和border */
|
||||
resize: none; /* 禁止调整大小 */
|
||||
font-family: 'Arial', sans-serif; /* 与页面字体一致 */
|
||||
color: #333; /* 文本颜色与页面一致 */
|
||||
line-height: 1.5; /* 行高 */
|
||||
overflow-y: auto; /* 超出内容显示滚动条 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.result-box {
|
||||
width: auto; /* 小屏幕上宽度自动调整 */
|
||||
margin-left: 10px; /* 较小的外边距 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: calc(100% - 22px); /* 调整输入框宽度 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */
|
||||
.result-box:hover {
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 点击效果，使结果框在被点击时有压缩效果 */
|
||||
.result-box:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
/* 显示动画 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏动画 */
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 展开动画 */
|
||||
@keyframes expand {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: 200px; /* 根据需要调整高度 */
|
||||
}
|
||||
}
|
||||
.result-box {
|
||||
display: none; /* 初始时隐藏 */
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #d9534f;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
animation-fill-mode: forwards; /* 保持动画结束状态 */
|
||||
overflow: hidden; /* 隐藏内容超出部分 */
|
||||
}
|
||||
@ -1,568 +0,0 @@
|
||||
/* 基本重置 */
|
||||
body, h1, h2, p, a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* 基础字体和背景 */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fe5b56;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 输入框和按钮样式 */
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
width: calc(100% - 22px); /* 减去padding和border的宽度 */
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
animation: fadeInDown 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
/* 针对小屏幕的样式调整 */
|
||||
}
|
||||
|
||||
/* 动态阴影效果 */
|
||||
@keyframes shadowPulse {
|
||||
0%, 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); }
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation: shadowPulse 1.5s infinite;
|
||||
}
|
||||
|
||||
/* 文字跳动动画*/
|
||||
h1 {
|
||||
animation: jump 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
/* 输入框和按钮的悬停效果*/
|
||||
input[type="text"]:hover, button:hover {
|
||||
border: 1px solid #d9534f;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
/*按钮点击动画*/
|
||||
button:active {
|
||||
transform: scale(0.95);
|
||||
background-color: #b52b27;
|
||||
}
|
||||
/*光晕效果*/
|
||||
.glow {
|
||||
animation: glowEffect 1.5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glowEffect {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #d9534f, 0 0 20px #d9534f, 0 0 25px #d9534f, 0 0 30px #d9534f;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #d9534f, 0 0 30px #d9534f, 0 0 40px #d9534f, 0 0 50px #d9534f, 0 0 60px #d9534f;
|
||||
}
|
||||
}
|
||||
/* 3D翻转效果*/
|
||||
.feature {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.feature:hover .feature-inner {
|
||||
transform: rotateY(360deg);
|
||||
transition: transform 15s;
|
||||
}
|
||||
/*视差滚动效果*/
|
||||
|
||||
.parallax-section {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
/* 粒子背景*/
|
||||
.particle-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
fill: rgba(255, 255, 255, 0.8);
|
||||
animation: moveParticles 10s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes moveParticles {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(100px, 100px); }
|
||||
}
|
||||
/*线条动画*/
|
||||
.dynamic-line {
|
||||
stroke-dasharray: 300;
|
||||
stroke-dashoffset: 300;
|
||||
animation: dash 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
from {
|
||||
stroke-dashoffset: 300;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
/*光晕效果*/
|
||||
button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 300%;
|
||||
height: 200%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
button:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*闪烁效果*/
|
||||
@keyframes blinker {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.blink-text {
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
/* 打字机效果*/
|
||||
.typewriter {
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
animation: typewriter 4s steps(40) 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
/* 3D文字效果*/
|
||||
.three-d-text {
|
||||
transform: rotateX(45deg) rotateY(45deg);
|
||||
transform-style: preserve-3d;
|
||||
perspective: 600px;
|
||||
}
|
||||
/*渐变文字效果*/
|
||||
.gradient-text {
|
||||
background: -webkit-linear-gradient(45deg, #d9534f, #fe5b56);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
/*动态阴影效果*/
|
||||
.dynamic-shadow {
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dynamic-shadow:hover {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/*光点闪烁效果*/
|
||||
.sparkle-point {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
pointer-events: none;
|
||||
animation: sparkle 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0% { opacity: 0; transform: scale(0); }
|
||||
50% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0); }
|
||||
}
|
||||
|
||||
/*动态渲染效果*/
|
||||
.render-effect {
|
||||
animation: renderEffect 5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes renderEffect {
|
||||
0%, 100% { filter: grayscale(0); }
|
||||
50% { filter: grayscale(1); }
|
||||
}
|
||||
/* 全屏背景动画*/
|
||||
body {
|
||||
background: linear-gradient(-45deg, #000, #7c7c7c, #000);
|
||||
background-size: 400% 1000%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/*线条动画*/
|
||||
.waves {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
@keyframes backgroundGradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
body {
|
||||
animation: backgroundGradient 15s ease infinite;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fdfdfd;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
}
|
||||
.svg-background {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1; /* 确保SVG在内容的后面 */
|
||||
}
|
||||
@keyframes colorShift {
|
||||
0% { background-color: #d9534f; }
|
||||
50% { background-color: #fe5b56; }
|
||||
100% { background-color: #d9534f; }
|
||||
}
|
||||
button {
|
||||
animation: colorShift 3s infinite;
|
||||
}
|
||||
.blink {
|
||||
animation: blink 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
input[type="text"]:hover {
|
||||
background-color: rgba(217, 83, 79, 0.1);
|
||||
}
|
||||
.parallax-section {
|
||||
background-image: url('your-image.jpg');
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
}
|
||||
/*字体动态改变*/
|
||||
h2 {
|
||||
transition: font-size 0.3s;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
font-size: 2em;
|
||||
}
|
||||
/*动态内容加载*/
|
||||
.main-content {
|
||||
animation: fadeIn 1s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
/* 旋转效果*/
|
||||
footer {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
footer:hover {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
.dynamic-line {
|
||||
stroke: #d9534f;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
animation: dash 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% { stroke-dasharray: 0, 100; }
|
||||
100% { stroke-dasharray: 100, 0; }
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: rotateX(10deg) rotateY(10deg);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
/*文字打字效果*/
|
||||
.typewriter {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-right: .15em solid orange;
|
||||
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
from, to { border-color: transparent; }
|
||||
50% { border-color: orange; }
|
||||
}
|
||||
/*旋转加载*/
|
||||
.loading {
|
||||
border: 8px solid #f3f3f3;
|
||||
border-top: 8px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
/*字体阴影动态*/
|
||||
h2 {
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
transition: text-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
text-shadow: 0 0 20px rgba(255, 0, 0, 1);
|
||||
}
|
||||
/*彩色阴影*/
|
||||
button {
|
||||
box-shadow: 0 4px 20px rgba(217, 83, 79, 0.5);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 8px 30px rgba(217, 83, 79, 0.8);
|
||||
}
|
||||
|
||||
.particle-background {
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
|
||||
animation: particleAnimation 5s infinite;
|
||||
}
|
||||
/*随机粒子背景*/
|
||||
@keyframes particleAnimation {
|
||||
0% { background-size: 0%; }
|
||||
100% { background-size: 100%; }
|
||||
}
|
||||
|
||||
/*光环效果*/
|
||||
header {
|
||||
box-shadow: 0 0 20px rgba(217, 83, 79, 0.6);
|
||||
}
|
||||
/*悬浮按钮效果*/
|
||||
button {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*玻璃效果*/
|
||||
main {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* 术语 */
|
||||
/* 术语结果框样式 */
|
||||
.result-box {
|
||||
background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */
|
||||
border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */
|
||||
animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */
|
||||
}
|
||||
|
||||
/* 结果文本框样式 */
|
||||
.result-textarea {
|
||||
background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */
|
||||
border: 1px solid #ddd; /* 边框颜色与输入框一致 */
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
padding: 10px;
|
||||
width: 100%; /* 宽度与输入框一致 */
|
||||
box-sizing: border-box; /* 盒模型宽度包含padding和border */
|
||||
resize: none; /* 禁止调整大小 */
|
||||
font-family: 'Arial', sans-serif; /* 与页面字体一致 */
|
||||
color: #333; /* 文本颜色与页面一致 */
|
||||
line-height: 1.5; /* 行高 */
|
||||
overflow-y: auto; /* 超出内容显示滚动条 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.result-box {
|
||||
width: auto; /* 小屏幕上宽度自动调整 */
|
||||
margin-left: 10px; /* 较小的外边距 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: calc(100% - 22px); /* 调整输入框宽度 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */
|
||||
.result-box:hover {
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 点击效果，使结果框在被点击时有压缩效果 */
|
||||
.result-box:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
/* 显示动画 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏动画 */
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 展开动画 */
|
||||
@keyframes expand {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: 200px; /* 根据需要调整高度 */
|
||||
}
|
||||
}
|
||||
.result-box {
|
||||
display: none; /* 初始时隐藏 */
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #d9534f;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
animation-fill-mode: forwards; /* 保持动画结束状态 */
|
||||
overflow: hidden; /* 隐藏内容超出部分 */
|
||||
}
|
||||
@ -1,568 +0,0 @@
|
||||
/* 基本重置 */
|
||||
body, h1, h2, p, a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* 基础字体和背景 */
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fe5b56;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 输入框和按钮样式 */
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
width: calc(100% - 22px); /* 减去padding和border的宽度 */
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #d9534f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #c9302c;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
header, main, footer {
|
||||
animation: fadeInDown 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
/* 针对小屏幕的样式调整 */
|
||||
}
|
||||
|
||||
/* 动态阴影效果 */
|
||||
@keyframes shadowPulse {
|
||||
0%, 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
|
||||
50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); }
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation: shadowPulse 1.5s infinite;
|
||||
}
|
||||
|
||||
/* 文字跳动动画*/
|
||||
h1 {
|
||||
animation: jump 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
/* 输入框和按钮的悬停效果*/
|
||||
input[type="text"]:hover, button:hover {
|
||||
border: 1px solid #d9534f;
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
/*按钮点击动画*/
|
||||
button:active {
|
||||
transform: scale(0.95);
|
||||
background-color: #b52b27;
|
||||
}
|
||||
/*光晕效果*/
|
||||
.glow {
|
||||
animation: glowEffect 1.5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glowEffect {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #d9534f, 0 0 20px #d9534f, 0 0 25px #d9534f, 0 0 30px #d9534f;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #d9534f, 0 0 30px #d9534f, 0 0 40px #d9534f, 0 0 50px #d9534f, 0 0 60px #d9534f;
|
||||
}
|
||||
}
|
||||
/* 3D翻转效果*/
|
||||
.feature {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.feature:hover .feature-inner {
|
||||
transform: rotateY(360deg);
|
||||
transition: transform 15s;
|
||||
}
|
||||
/*视差滚动效果*/
|
||||
|
||||
.parallax-section {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
/* 粒子背景*/
|
||||
.particle-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
fill: rgba(255, 255, 255, 0.8);
|
||||
animation: moveParticles 10s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes moveParticles {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(100px, 100px); }
|
||||
}
|
||||
/*线条动画*/
|
||||
.dynamic-line {
|
||||
stroke-dasharray: 300;
|
||||
stroke-dashoffset: 300;
|
||||
animation: dash 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
from {
|
||||
stroke-dashoffset: 300;
|
||||
}
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
/*光晕效果*/
|
||||
button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 300%;
|
||||
height: 200%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
button:hover::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*闪烁效果*/
|
||||
@keyframes blinker {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
.blink-text {
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
/* 打字机效果*/
|
||||
.typewriter {
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
animation: typewriter 4s steps(40) 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes typewriter {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
/* 3D文字效果*/
|
||||
.three-d-text {
|
||||
transform: rotateX(45deg) rotateY(45deg);
|
||||
transform-style: preserve-3d;
|
||||
perspective: 600px;
|
||||
}
|
||||
/*渐变文字效果*/
|
||||
.gradient-text {
|
||||
background: -webkit-linear-gradient(45deg, #d9534f, #fe5b56);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
/*动态阴影效果*/
|
||||
.dynamic-shadow {
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dynamic-shadow:hover {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/*光点闪烁效果*/
|
||||
.sparkle-point {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
pointer-events: none;
|
||||
animation: sparkle 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0% { opacity: 0; transform: scale(0); }
|
||||
50% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(0); }
|
||||
}
|
||||
|
||||
/*动态渲染效果*/
|
||||
.render-effect {
|
||||
animation: renderEffect 5s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes renderEffect {
|
||||
0%, 100% { filter: grayscale(0); }
|
||||
50% { filter: grayscale(1); }
|
||||
}
|
||||
/* 全屏背景动画*/
|
||||
body {
|
||||
background: linear-gradient(-45deg, #000, #7c7c7c, #000);
|
||||
background-size: 400% 1000%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/*线条动画*/
|
||||
.waves {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
@keyframes backgroundGradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
body {
|
||||
animation: backgroundGradient 15s ease infinite;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fdfdfd;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
}
|
||||
.svg-background {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1; /* 确保SVG在内容的后面 */
|
||||
}
|
||||
@keyframes colorShift {
|
||||
0% { background-color: #d9534f; }
|
||||
50% { background-color: #fe5b56; }
|
||||
100% { background-color: #d9534f; }
|
||||
}
|
||||
button {
|
||||
animation: colorShift 3s infinite;
|
||||
}
|
||||
.blink {
|
||||
animation: blink 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
input[type="text"]:hover {
|
||||
background-color: rgba(217, 83, 79, 0.1);
|
||||
}
|
||||
.parallax-section {
|
||||
background-image: url('your-image.jpg');
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
}
|
||||
/*字体动态改变*/
|
||||
h2 {
|
||||
transition: font-size 0.3s;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
font-size: 2em;
|
||||
}
|
||||
/*动态内容加载*/
|
||||
.main-content {
|
||||
animation: fadeIn 1s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
/* 旋转效果*/
|
||||
footer {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
footer:hover {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
.dynamic-line {
|
||||
stroke: #d9534f;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
animation: dash 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% { stroke-dasharray: 0, 100; }
|
||||
100% { stroke-dasharray: 100, 0; }
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: rotateX(10deg) rotateY(10deg);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
/*文字打字效果*/
|
||||
.typewriter {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border-right: .15em solid orange;
|
||||
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
from, to { border-color: transparent; }
|
||||
50% { border-color: orange; }
|
||||
}
|
||||
/*旋转加载*/
|
||||
.loading {
|
||||
border: 8px solid #f3f3f3;
|
||||
border-top: 8px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
/*字体阴影动态*/
|
||||
h2 {
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
transition: text-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
h2:hover {
|
||||
text-shadow: 0 0 20px rgba(255, 0, 0, 1);
|
||||
}
|
||||
/*彩色阴影*/
|
||||
button {
|
||||
box-shadow: 0 4px 20px rgba(217, 83, 79, 0.5);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 8px 30px rgba(217, 83, 79, 0.8);
|
||||
}
|
||||
|
||||
.particle-background {
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
|
||||
animation: particleAnimation 5s infinite;
|
||||
}
|
||||
/*随机粒子背景*/
|
||||
@keyframes particleAnimation {
|
||||
0% { background-size: 0%; }
|
||||
100% { background-size: 100%; }
|
||||
}
|
||||
|
||||
/*光环效果*/
|
||||
header {
|
||||
box-shadow: 0 0 20px rgba(217, 83, 79, 0.6);
|
||||
}
|
||||
/*悬浮按钮效果*/
|
||||
button {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*玻璃效果*/
|
||||
main {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* 术语 */
|
||||
/* 术语结果框样式 */
|
||||
.result-box {
|
||||
background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */
|
||||
border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */
|
||||
animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */
|
||||
}
|
||||
|
||||
/* 结果文本框样式 */
|
||||
.result-textarea {
|
||||
background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */
|
||||
border: 1px solid #ddd; /* 边框颜色与输入框一致 */
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
padding: 10px;
|
||||
width: 100%; /* 宽度与输入框一致 */
|
||||
box-sizing: border-box; /* 盒模型宽度包含padding和border */
|
||||
resize: none; /* 禁止调整大小 */
|
||||
font-family: 'Arial', sans-serif; /* 与页面字体一致 */
|
||||
color: #333; /* 文本颜色与页面一致 */
|
||||
line-height: 1.5; /* 行高 */
|
||||
overflow-y: auto; /* 超出内容显示滚动条 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.result-box {
|
||||
width: auto; /* 小屏幕上宽度自动调整 */
|
||||
margin-left: 10px; /* 较小的外边距 */
|
||||
margin-right: 10px;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: calc(100% - 22px); /* 调整输入框宽度 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */
|
||||
.result-box:hover {
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 点击效果，使结果框在被点击时有压缩效果 */
|
||||
.result-box:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
/* 显示动画 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏动画 */
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 展开动画 */
|
||||
@keyframes expand {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: 200px; /* 根据需要调整高度 */
|
||||
}
|
||||
}
|
||||
.result-box {
|
||||
display: none; /* 初始时隐藏 */
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #d9534f;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
animation-fill-mode: forwards; /* 保持动画结束状态 */
|
||||
overflow: hidden; /* 隐藏内容超出部分 */
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<transition>
|
||||
<router-view />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,837 +0,0 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="light-spots"></div>
|
||||
<div class="ripples"></div>
|
||||
<div class="flowing-lines"></div>
|
||||
<div class="login-container">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
class="login-tabs"
|
||||
stretch
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="用户登录" name="login">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
:model="user"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
class="login-form"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input type="text" v-model="user.username" class="form-input">
|
||||
<i slot="prefix" class="el-icon-user"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input type="password" v-model="user.password" class="form-input">
|
||||
<i slot="prefix" class="el-icon-lock"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('loginForm')" class="submit-btn">
|
||||
<span>登 录</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="用户注册" name="register">
|
||||
<el-form
|
||||
ref="registerForm"
|
||||
:model="user"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
class="login-form"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input type="text" v-model="user.username" class="form-input">
|
||||
<i slot="prefix" class="el-icon-user"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input type="password" v-model="user.password" class="form-input">
|
||||
<i slot="prefix" class="el-icon-lock"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="surePassword">
|
||||
<el-input type="password" v-model="user.surePassword" class="form-input">
|
||||
<i slot="prefix" class="el-icon-key"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input type="email" v-model="user.email" class="form-input">
|
||||
<i slot="prefix" class="el-icon-message"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('registerForm')" class="submit-btn">
|
||||
<span>注 册</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane>
|
||||
<span slot="label"><i class="el-icon-service"></i> 帮助中心</span>
|
||||
<div class="help-content">
|
||||
<i class="el-icon-question"></i>
|
||||
<p>如需帮助请联系客服</p>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from "vuex"
|
||||
import { MessageBox } from 'element-ui'
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
var validateUsername = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入用户名"));
|
||||
}
|
||||
callback();
|
||||
};
|
||||
|
||||
var validatePassword = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入密码"));
|
||||
}
|
||||
callback();
|
||||
};
|
||||
|
||||
var validateSurePassword = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入确认密码"));
|
||||
} else if (value !== this.user.password) {
|
||||
callback(new Error("两次输入的密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
var validateEmail = (rule, value, callback) => {
|
||||
const emailPattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
|
||||
if (value === "") {
|
||||
callback(new Error("请输入邮箱"));
|
||||
} else if (!emailPattern.test(value)) {
|
||||
callback(new Error("请输入有效的邮箱地址"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
user: {
|
||||
username: "",
|
||||
password: "",
|
||||
surePassword: "",
|
||||
email:""
|
||||
},
|
||||
rules: {
|
||||
username: [{ validator: validateUsername, trigger: "blur" }],
|
||||
password: [{ validator: validatePassword, trigger: "blur" }],
|
||||
email: [{ validator: validateEmail, trigger: "blur" }],
|
||||
surePassword: [
|
||||
{ validator: validateSurePassword, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
activeName: "login",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapActions("loginModule",["setUserActions"]),
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.activeName === "login") {
|
||||
this.setUserActions(this.user)
|
||||
}
|
||||
if (this.activeName === "register") {
|
||||
this.$api.register({
|
||||
username:this.user.username,
|
||||
password:this.user.password,
|
||||
email:this.user.email
|
||||
}).then(res => {
|
||||
if (res.data.success) {
|
||||
MessageBox.alert(res.data.msg || '注册成功', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
MessageBox.alert(res.data.msg || '注册失败', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
MessageBox.alert('请勿重复注册', '错误', {
|
||||
confirmButtonText: '确定',
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick(tab, event) {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.login {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// 更丰富的渐变背景
|
||||
background: linear-gradient(135deg,
|
||||
#002FA7 0%, // 克莱因蓝
|
||||
#0047AB 50%, // 钴蓝
|
||||
#1E90FF 100% // 道奇蓝
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 动态光斑效果
|
||||
.light-spots {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: spotFloat 10s infinite alternate;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 20%;
|
||||
right: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
// 波纹动画效果
|
||||
.ripples {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: rippleEffect 8s infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-delay: -4s;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
}
|
||||
|
||||
// 流动的线条效果
|
||||
.flowing-lines {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 45%,
|
||||
rgba(255,255,255,0.1) 50%,
|
||||
transparent 55%
|
||||
);
|
||||
animation: flowingLines 5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 480px;
|
||||
backdrop-filter: blur(20px);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
transition: all 0.4s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg,
|
||||
#002FA7, // 克莱因蓝
|
||||
);
|
||||
border-radius: 22px;
|
||||
z-index: -1;
|
||||
animation: containerGlow 4s linear infinite;
|
||||
filter: blur(15px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.login-tabs {
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
padding: 0 20px;
|
||||
|
||||
&.is-active {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.6));
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 30px;
|
||||
|
||||
.el-form-item__label {
|
||||
color: #ffffff !important;
|
||||
font-weight: 500;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
:deep(.el-input__inner) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
height: 45px;
|
||||
padding-left: 45px;
|
||||
transition: all 0.3s;
|
||||
font-size: 15px;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #002FA7;
|
||||
box-shadow: 0 0 15px rgba(0, 47, 167, 0.5);
|
||||
animation: borderFlow 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix) {
|
||||
left: 15px;
|
||||
color: #ffffff;
|
||||
opacity: 0.8;
|
||||
animation: iconGlow 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: linear-gradient(45deg, #002FA7, #0047AB);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
color: #fff;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: btnRadialGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(45deg, #0047AB, #1E90FF);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: -30px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
transform: skewX(-45deg);
|
||||
animation: btnShine 3s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.help-content {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
padding: 30px;
|
||||
|
||||
i {
|
||||
font-size: 40px;
|
||||
margin-bottom: 15px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加高级光束效果
|
||||
.light-beam {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: scanLine 4s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// 增强登录容器的交互效果
|
||||
.login-container {
|
||||
// 添加磁性悬浮效果
|
||||
&:hover {
|
||||
.el-input__inner {
|
||||
transform: translateY(-2px);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 增强输入框焦点效果
|
||||
.form-input {
|
||||
&:focus-within {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: inherit;
|
||||
padding: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
mask: linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
animation: focusGlow 2s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 增强按钮点击效果
|
||||
.submit-btn {
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent 70%
|
||||
);
|
||||
animation: buttonPress 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动画关键帧
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes borderGlow {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
transform: translateX(-100%) skewX(-15deg);
|
||||
opacity: 0;
|
||||
}
|
||||
20% { opacity: 0.5; }
|
||||
100% {
|
||||
transform: translateX(100%) skewX(-15deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.1); opacity: 0.8; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes buttonShine {
|
||||
0% { left: -100%; }
|
||||
50% { left: 100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
@keyframes particleMove {
|
||||
0% { transform: translateY(0) rotate(0deg); }
|
||||
100% { transform: translateY(-100%) rotate(360deg); }
|
||||
}
|
||||
|
||||
// 添加新的光波动画
|
||||
@keyframes ripple {
|
||||
0% { transform: scale(1); opacity: 0.4; }
|
||||
100% { transform: scale(2); opacity: 0; }
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 576px) {
|
||||
.login {
|
||||
.login-container {
|
||||
width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 新增动画关键帧
|
||||
@keyframes spotFloat {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(30px, 20px) scale(1.2); }
|
||||
100% { transform: translate(-20px, -15px) scale(0.8); }
|
||||
}
|
||||
|
||||
@keyframes rippleEffect {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(2);
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flowingLines {
|
||||
0% { transform: translateX(-50%) rotate(0deg); }
|
||||
100% { transform: translateX(50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes borderRotate {
|
||||
0% { filter: hue-rotate(0deg); }
|
||||
100% { filter: hue-rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes inputGlow {
|
||||
0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); }
|
||||
100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); }
|
||||
}
|
||||
|
||||
@keyframes btnShine {
|
||||
0% { left: -30px; }
|
||||
100% { left: 130%; }
|
||||
}
|
||||
|
||||
// 添加新的呼吸灯效果
|
||||
@keyframes breathe {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
// 添加3D悬浮效果
|
||||
@keyframes float3D {
|
||||
0% {
|
||||
transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(1000px) rotateX(3deg) rotateY(5deg);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes borderFlow {
|
||||
0% {
|
||||
border-image: linear-gradient(
|
||||
90deg,
|
||||
#002FA7 0%,
|
||||
#0047AB 25%,
|
||||
#1E90FF 50%,
|
||||
#0047AB 75%,
|
||||
#002FA7 100%
|
||||
) 1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(
|
||||
90deg,
|
||||
#002FA7 100%,
|
||||
#0047AB 0%,
|
||||
#1E90FF 25%,
|
||||
#0047AB 50%,
|
||||
#002FA7 75%
|
||||
) 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes iconGlow {
|
||||
0%, 100% {
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes containerGlow {
|
||||
0% {
|
||||
filter: blur(15px) hue-rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
filter: blur(15px) hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 修改所有文字为白色
|
||||
.el-form-item__label,
|
||||
.el-tabs__item,
|
||||
.help-content,
|
||||
.el-input__inner,
|
||||
.submit-btn {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
// 增强提交按钮效果
|
||||
.submit-btn {
|
||||
background: linear-gradient(45deg, #002FA7, #0047AB);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: btnRadialGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(45deg, #0047AB, #1E90FF);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes btnRadialGlow {
|
||||
0% {
|
||||
transform: scale(0.5) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
:deep(.el-input__inner) {
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
caret-color: #ffffff !important; // 光标颜色
|
||||
|
||||
// 处理自动填充
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus,
|
||||
&:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
-webkit-box-shadow: 0 0 0 30px transparent inset !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
// 占位符样式
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
-webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全局覆盖输入框样式
|
||||
:deep(.el-input__inner),
|
||||
:deep(.el-input input),
|
||||
:deep(.el-input textarea) {
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
// 标签文字颜色
|
||||
:deep(.el-form-item__label) {
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
// 新增动画关键帧
|
||||
@keyframes scanLine {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes focusGlow {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes buttonPress {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.el-input__inner {
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<bar title="法律助手" left="bars" right="search" color="font-white" />
|
||||
<carousel />
|
||||
<navigation />
|
||||
<ask-home />
|
||||
<infer-home />
|
||||
<legal-home />
|
||||
<background />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Background from "@/components/background/Background";
|
||||
import Carousel from "@/components/carousel/Carousel";
|
||||
import Bar from "@/components/bar/Bar";
|
||||
import Navigation from "@/components/main/Navigation";
|
||||
import AskHome from "@/components/main/ask/AskHome";
|
||||
import InferHome from "@/components/main/infer/InferHome";
|
||||
import LegalHome from "@/components/main/legal/LegalHome";
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {
|
||||
LegalHome,
|
||||
InferHome,
|
||||
Navigation,
|
||||
Background,
|
||||
Carousel,
|
||||
Bar,
|
||||
AskHome
|
||||
},
|
||||
computed: {
|
||||
...mapState(['currentTab'])
|
||||
},
|
||||
watch: {
|
||||
currentTab() {
|
||||
let metaThemeColor = document.querySelector("meta[name=theme-color]");
|
||||
if(this.currentTab === 'Home') {
|
||||
metaThemeColor.setAttribute("content", "#ffa947");
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
if(this.currentTab === 'Ask') {
|
||||
metaThemeColor.setAttribute("content", "#12D8FA");
|
||||
} else if(this.currentTab === 'Infer') {
|
||||
metaThemeColor.setAttribute("content", "#3ba675");
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box!important;
|
||||
}
|
||||
</style>
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div class="background">
|
||||
<background-color :colors="setting.color"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import BackgroundColor from "@/components/background/BackgroundColor";
|
||||
export default {
|
||||
name: "Background",
|
||||
components: {
|
||||
BackgroundColor
|
||||
},
|
||||
computed: {
|
||||
...mapState(['setting'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="background-color"
|
||||
:style="{ backgroundImage: gradientColor }"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BackgroundColor",
|
||||
props: {
|
||||
colors: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
gradientColor () {
|
||||
const colorBottom = `color-stop(30%, ${this.colors[0]})`;
|
||||
const colorTop = `to(${this.colors[1]})`;
|
||||
return `-webkit-gradient(linear, left bottom, left top, ${colorBottom}, ${colorTop})`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.background-color {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<div class="bar text-shadow" :class="[`${color}`]">
|
||||
<span @click="$emit('left')">
|
||||
<i :class="['fas', `fa-${left}`]"></i>
|
||||
</span>
|
||||
<span>{{ title }}</span>
|
||||
<span @click="$emit('right')">
|
||||
<i :class="['fas', `fa-${right}`]"></i>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
left: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
right: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'font-white'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
height: 54px;
|
||||
font-size: 18px;
|
||||
z-index: 1;
|
||||
padding: 0 15px;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
.font-white {
|
||||
color: #fefefe;
|
||||
text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.font-dark {
|
||||
color: #37474f;
|
||||
text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="carousel">
|
||||
<p class="heading-1">智能</p>
|
||||
<p class="heading-2">法律助手</p>
|
||||
<p class="heading-3">Smart Legal Assistant</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.carousel {
|
||||
display: flex;
|
||||
padding: 0 40px;
|
||||
height: 220px;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transition: all 0.5s ease;
|
||||
color: #fefefe;
|
||||
text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.heading-1 {
|
||||
font-size: 48px;
|
||||
opacity: 95%;
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
.heading-2 {
|
||||
font-size: 40px;
|
||||
opacity: 95%;
|
||||
font-weight: 300;
|
||||
margin:0;
|
||||
}
|
||||
.heading-3 {
|
||||
opacity: 90%;
|
||||
font-size: 25px;
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="ask-card">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AskCard"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ask-card {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: rgba(255, 255, 255, 0.80);
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 30px;
|
||||
padding-top: 12px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
transition-duration: 2s;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AskList"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<div class="navigation">
|
||||
<!--通过tab控制跳往哪个子组件-->
|
||||
<navigator-button tab="Ask" title="问答咨询" icon="far fa-comment"/>
|
||||
<navigator-button tab="Infer" title="案情推断" icon="far fa-compass"/>
|
||||
<navigator-button tab="Legal" title="文书查询" icon="fas fa-search"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavigatorButton from "@/components/main/NavigatorButton";
|
||||
export default {
|
||||
name: "Navigation",
|
||||
components: {
|
||||
NavigatorButton,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navigation {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
padding: 0 40px;
|
||||
margin-top: 25px;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
transition: all 0.5s ease;
|
||||
color: #fefefe;
|
||||
}
|
||||
</style>
|
||||
@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div class="button" @click="handleClick">
|
||||
<i :class="[`${icon}`]" class="button-icon"></i>
|
||||
<span class="button-title">{{ title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
export default {
|
||||
props: {
|
||||
tab: {
|
||||
type: String,
|
||||
default: 'Ask'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'comment'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '问答咨询'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['selected', 'unselect', 'onAsk'])
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
const appRect = document.querySelector('#app').getBoundingClientRect();
|
||||
const elRect = this.$el.getBoundingClientRect();
|
||||
const rect = {};
|
||||
const tab = this.tab;
|
||||
rect.top = elRect.top - appRect.top;
|
||||
rect.left = elRect.left - appRect.left;
|
||||
rect.width = elRect.width;
|
||||
rect.height = elRect.height;
|
||||
rect.appWidth = appRect.width;
|
||||
rect.appHeight = appRect.height;
|
||||
this.$store.commit('selectTab', { rect });
|
||||
this.$store.commit('setTab', tab)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #f8f8f8;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 30px;
|
||||
padding-top: 12px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
transition-duration: 2s;
|
||||
will-change: transform;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.87);
|
||||
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.button-icon {
|
||||
font-size: 30px;
|
||||
color: #455a64;
|
||||
margin-right: 15px;
|
||||
margin-top: 2px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
.button-title {
|
||||
font-size: 18px;
|
||||
margin-top: 5px;
|
||||
color: #37474f;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AskDetail"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InferDetail"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,224 +0,0 @@
|
||||
<template>
|
||||
<transition name="show" @enter="handleEnter" @leave="handleLeave">
|
||||
<div class="infer-home" v-if="selected&&(currentTab=='Infer')">
|
||||
<bar id="app-bar" class="app-bar" :color="barColor" @left="unselectTab" left="arrow-left"/>
|
||||
<div class="infer-content">
|
||||
<div class="infer-heading">
|
||||
<i v-if="loading" class="fas fa-5x fa-spin fa-spinner infer-icon"></i>
|
||||
<i v-else class="fas fa-microphone-alt infer-icon"></i>
|
||||
<search-bar class="search-bar" type="area" v-on:result="handleInferResult" mode="infer" v-on:loading="handleLoading" />
|
||||
<h1 class="infer-title">案情推断</h1><br>
|
||||
</div>
|
||||
<div id="infer-list" class="infer-list">
|
||||
<home-card class="home-card" v-for="(infer, index) in data" :theId="index" :key="index" :title="title(index)" :content="infer" />
|
||||
</div>
|
||||
<div class="infer-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapMutations} from 'vuex';
|
||||
import Bar from "@/components/bar/Bar";
|
||||
import SearchBar from "@/components/utils/SearchBar";
|
||||
import HomeCard from "@/components/utils/HomeCard";
|
||||
|
||||
export default {
|
||||
name: "InferHome",
|
||||
components: {
|
||||
HomeCard,
|
||||
Bar,
|
||||
SearchBar
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
barColor: 'font-white',
|
||||
data: null,
|
||||
crime: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['selected', 'unselect', 'currentTab']),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['unselectTab']),
|
||||
handleEnter(el) {
|
||||
Object.assign(el.style, {
|
||||
top: `${this.selected.rect.top}px`,
|
||||
left: `${this.selected.rect.left}px`,
|
||||
width: `${this.selected.rect.width}px`,
|
||||
height: `${this.selected.rect.height}px`
|
||||
});
|
||||
setTimeout(() => {
|
||||
Object.assign(el.style, {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: `${this.selected.rect.appWidth}px`,
|
||||
height: `${this.selected.rect.appHeight}px`
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
handleLeave(el) {
|
||||
Object.assign(el.style, {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: `${this.unselect.rect.appWidth}px`,
|
||||
height: `${this.unselect.rect.appHeight}px`
|
||||
});
|
||||
setTimeout(() => {
|
||||
Object.assign(el.style, {
|
||||
top: `${this.unselect.rect.top}px`,
|
||||
left: `${this.unselect.rect.left}px`,
|
||||
width: `${this.unselect.rect.width}px`,
|
||||
height: `${this.unselect.rect.height}px`
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
handleLoading(data) {
|
||||
this.loading = data;
|
||||
},
|
||||
handleInferResult(data) {
|
||||
delete data.id;
|
||||
this.crime = data.crimeName;
|
||||
delete data.crimeName;
|
||||
this.data = data;
|
||||
this.loading = false;
|
||||
},
|
||||
title(index) {
|
||||
if(index==='concept') {
|
||||
return '罪名解释'
|
||||
} else if(index==='feature') {
|
||||
return '罪名特征'
|
||||
} else if(index==='rending') {
|
||||
return '定罪条件'
|
||||
} else if(index==='punish') {
|
||||
return '量刑区间'
|
||||
} else if(index==='laws') {
|
||||
return '有关法条'
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.infer-home {
|
||||
position: fixed;
|
||||
border-radius: 0;
|
||||
color: #444;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0 12px;
|
||||
will-change: top, left, width, height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.infer-home::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.infer-heading {
|
||||
width: calc(100% + 60px);
|
||||
height: 450px;
|
||||
color: #fff;
|
||||
background: #2c7d59;
|
||||
text-align: center;
|
||||
text-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
|
||||
background: -webkit-linear-gradient(to top, #2c7d59, #3ba675);
|
||||
background: linear-gradient(to top, #2c7d59, #3ba675);
|
||||
margin-top: -54px;
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.infer-heading h1 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.infer-icon {
|
||||
font-size: 35px;
|
||||
color: #fafafa;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.home-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.home-card:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.infer-footer {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
font-size: 15px;
|
||||
color: #37474f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-enter-to,
|
||||
.show-leave {
|
||||
border-radius: 0;
|
||||
|
||||
.infer-home {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.infer-home,
|
||||
.app-bar,
|
||||
.infer-heading,
|
||||
.infer-content {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-leave-to,
|
||||
.show-enter {
|
||||
border-radius: 30px;
|
||||
|
||||
.infer-home {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.infer-home,
|
||||
.app-bar,
|
||||
.infer-heading,
|
||||
.infer-content{
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -40px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-enter-active,
|
||||
.show-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.infer-home,
|
||||
.app-bar,
|
||||
.infer-heading,
|
||||
.infer-content{
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LegalDetail"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,211 +0,0 @@
|
||||
<template>
|
||||
<transition name="show" @enter="handleEnter" @leave="handleLeave">
|
||||
<div class="legal-home" v-if="selected&&(currentTab=='Legal')">
|
||||
<bar id="app-bar" class="app-bar" :color="barColor" @left="unselectTab" left="arrow-left"/>
|
||||
<div class="legal-content">
|
||||
<div class="legal-heading">
|
||||
<search-bar class="search-bar" type="area" v-on:result="handleInferResult" mode="legal" v-on:loading="handleLoading"/>
|
||||
<h1 class="legal-title">查询相似文书</h1>
|
||||
</div>
|
||||
<div id="legal-list" class="legal-list">
|
||||
<home-card class="home-card" v-for="(theCase,index) in data" :theId="index" :key="index" :title="theCase.title" :content="theCase"/>
|
||||
</div>
|
||||
<div class="legal-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapMutations} from 'vuex'
|
||||
import Bar from "@/components/bar/Bar";
|
||||
import HomeCard from "@/components/utils/HomeCard";
|
||||
import SearchBar from "@/components/utils/SearchBar";
|
||||
|
||||
export default {
|
||||
name: "LegalHome",
|
||||
components: {
|
||||
HomeCard,
|
||||
Bar,
|
||||
SearchBar
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
barColor: 'font-white',
|
||||
data: {},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['selected', 'unselect', 'currentTab'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['unselectTab']),
|
||||
handleInferResult(data) {
|
||||
this.data=data;
|
||||
},
|
||||
handleLoading(loading) {
|
||||
this.loading=loading;
|
||||
},
|
||||
handleEnter(el) {
|
||||
Object.assign(el.style, {
|
||||
top: `${this.selected.rect.top}px`,
|
||||
left: `${this.selected.rect.left}px`,
|
||||
width: `${this.selected.rect.width}px`,
|
||||
height: `${this.selected.rect.height}px`
|
||||
});
|
||||
setTimeout(() => {
|
||||
Object.assign(el.style, {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: `${this.selected.rect.appWidth}px`,
|
||||
height: `${this.selected.rect.appHeight}px`
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
handleLeave(el) {
|
||||
Object.assign(el.style, {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: `${this.unselect.rect.appWidth}px`,
|
||||
height: `${this.unselect.rect.appHeight}px`
|
||||
});
|
||||
setTimeout(() => {
|
||||
Object.assign(el.style, {
|
||||
top: `${this.unselect.rect.top}px`,
|
||||
left: `${this.unselect.rect.left}px`,
|
||||
width: `${this.unselect.rect.width}px`,
|
||||
height: `${this.unselect.rect.height}px`
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.legal-home {
|
||||
position: fixed;
|
||||
border-radius: 0;
|
||||
color: #444;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0 12px;
|
||||
will-change: top, left, width, height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.legal-home::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.upload {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.legal-heading {
|
||||
width: calc(100% + 60px);
|
||||
height: 350px;
|
||||
color: #fff;
|
||||
background: #6e18e1;
|
||||
text-align: center;
|
||||
text-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
|
||||
background: -webkit-linear-gradient(to top, #4A00E0, #8E2DE2);
|
||||
background: linear-gradient(to top, #4A00E0, #8E2DE2);
|
||||
margin-top: -54px;
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.upload-form {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.legal-heading h1 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.legal-icon {
|
||||
font-size: 30px;
|
||||
color: #fafafa;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.home-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.home-card:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.legal-footer {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
font-size: 15px;
|
||||
color: #37474f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-enter-to,
|
||||
.show-leave {
|
||||
border-radius: 0;
|
||||
|
||||
.legal-home {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.legal-home,
|
||||
.app-bar,
|
||||
.legal-heading,
|
||||
.legal-content {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-leave-to,
|
||||
.show-enter {
|
||||
border-radius: 30px;
|
||||
|
||||
.legal-home {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.legal-home,
|
||||
.app-bar,
|
||||
.legal-heading,
|
||||
.legal-content {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -40px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-enter-active,
|
||||
.show-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.legal-home,
|
||||
.app-bar,
|
||||
.legal-heading,
|
||||
.legal-content {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<transition name="show" @enter="handleEnter" @leave="handleLeave">
|
||||
<div class="legal-home" v-if="selected&&(currentTab=='Legal')">
|
||||
<bar id="app-bar" class="app-bar" :color="barColor" @left="unselectTab" left="arrow-left"/>
|
||||
<div class="legal-content">
|
||||
<div class="legal-heading">
|
||||
<form class="upload-form">
|
||||
<a href="#"><i class="fas fa-upload legal-icon"></i></a>
|
||||
<Upload class="upload" />
|
||||
</form>
|
||||
<h1 class="legal-title">查询相似文书</h1>
|
||||
</div>
|
||||
<div id="legal-list" class="legal-list">
|
||||
<home-card class="home-card" />
|
||||
</div>
|
||||
<div class="legal-footer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapMutations} from 'vuex'
|
||||
import Bar from "@/components/bar/Bar";
|
||||
import HomeCard from "@/components/utils/HomeCard";
|
||||
import Upload from "@/components/utils/Upload";
|
||||
|
||||
export default {
|
||||
name: "LegalHome",
|
||||
components: {
|
||||
HomeCard,
|
||||
Bar,
|
||||
Upload
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
barColor: 'font-white',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['selected', 'unselect', 'currentTab'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['unselectTab']),
|
||||
handleEnter(el) {
|
||||
Object.assign(el.style, {
|
||||
top: `${this.selected.rect.top}px`,
|
||||
left: `${this.selected.rect.left}px`,
|
||||
width: `${this.selected.rect.width}px`,
|
||||
height: `${this.selected.rect.height}px`
|
||||
});
|
||||
setTimeout(() => {
|
||||
Object.assign(el.style, {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: `${this.selected.rect.appWidth}px`,
|
||||
height: `${this.selected.rect.appHeight}px`
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
handleLeave(el) {
|
||||
Object.assign(el.style, {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: `${this.unselect.rect.appWidth}px`,
|
||||
height: `${this.unselect.rect.appHeight}px`
|
||||
});
|
||||
setTimeout(() => {
|
||||
Object.assign(el.style, {
|
||||
top: `${this.unselect.rect.top}px`,
|
||||
left: `${this.unselect.rect.left}px`,
|
||||
width: `${this.unselect.rect.width}px`,
|
||||
height: `${this.unselect.rect.height}px`
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.legal-home {
|
||||
position: fixed;
|
||||
border-radius: 0;
|
||||
color: #444;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0 12px;
|
||||
will-change: top, left, width, height;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.legal-home::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.upload {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.legal-heading {
|
||||
width: calc(100% + 60px);
|
||||
height: 350px;
|
||||
color: #fff;
|
||||
background: #6e18e1;
|
||||
text-align: center;
|
||||
text-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
|
||||
background: -webkit-linear-gradient(to top, #4A00E0, #8E2DE2);
|
||||
background: linear-gradient(to top, #4A00E0, #8E2DE2);
|
||||
margin-top: -54px;
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.upload-form {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.legal-heading h1 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.legal-icon {
|
||||
font-size: 30px;
|
||||
color: #fafafa;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.home-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.home-card:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.legal-footer {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
font-size: 15px;
|
||||
color: #37474f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.show-enter-to,
|
||||
.show-leave {
|
||||
border-radius: 0;
|
||||
|
||||
.legal-home {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.legal-home,
|
||||
.app-bar,
|
||||
.legal-heading,
|
||||
.legal-content {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-leave-to,
|
||||
.show-enter {
|
||||
border-radius: 30px;
|
||||
|
||||
.legal-home {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.legal-home,
|
||||
.app-bar,
|
||||
.legal-heading,
|
||||
.legal-content{
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -40px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.show-enter-active,
|
||||
.show-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.legal-home,
|
||||
.app-bar,
|
||||
.legal-heading,
|
||||
.legal-content{
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div class="upload">
|
||||
<label class="file" id="fileLabel">
|
||||
<input type="file" id="file">
|
||||
<span class="file-custom">123</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name : "upload",
|
||||
methods: {
|
||||
uploadFunc : function (document) {
|
||||
let input = document.getElementById("file");
|
||||
let label = document.getElementById("fileLabel");
|
||||
|
||||
input.addEventListener( 'change', function( e )
|
||||
{
|
||||
let fileName = '';
|
||||
fileName = e.target.value.split( '\\' ).pop();
|
||||
label.querySelector( 'span' ).innerHTML = fileName;
|
||||
});
|
||||
|
||||
// Firefox bug fix
|
||||
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
|
||||
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.uploadFunc(document);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.file input {
|
||||
min-width: 14rem;
|
||||
margin: 0;
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
}
|
||||
.file-custom {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: 40px;
|
||||
padding: .5rem 1rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
border: .075rem solid #ddd;
|
||||
border-radius: .25rem;
|
||||
box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
}
|
||||
.file-custom:before {
|
||||
position: absolute;
|
||||
top: -.075rem;
|
||||
right: -.075rem;
|
||||
bottom: -.075rem;
|
||||
z-index: 6;
|
||||
display: block;
|
||||
content: "选择文书";
|
||||
height: 20px;
|
||||
padding: .5rem 1rem;
|
||||
line-height: 1.5;
|
||||
color: #555;
|
||||
background-color: #eee;
|
||||
border: .075rem solid #ddd;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.file input:focus ~ .file-custom {
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from "@/router";
|
||||
import store from "@/store";
|
||||
import './registerServiceWorker'
|
||||
import Axios from "axios";
|
||||
import VueAxios from "vue-axios";
|
||||
|
||||
Vue.use(VueAxios, Axios);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App),
|
||||
}).$mount('#app');
|
||||
@ -1,32 +0,0 @@
|
||||
/* eslint-disable no-console */
|
||||
|
||||
import { register } from 'register-service-worker'
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
register(`${process.env.BASE_URL}service-worker.js`, {
|
||||
ready () {
|
||||
console.log(
|
||||
'App is being served from cache by a service worker.\n' +
|
||||
'For more details, visit https://goo.gl/AFskqB'
|
||||
)
|
||||
},
|
||||
registered () {
|
||||
console.log('Service worker has been registered.')
|
||||
},
|
||||
cached () {
|
||||
console.log('Content has been cached for offline use.')
|
||||
},
|
||||
updatefound () {
|
||||
console.log('New content is downloading.')
|
||||
},
|
||||
updated () {
|
||||
console.log('New content is available; please refresh.')
|
||||
},
|
||||
offline () {
|
||||
console.log('No internet connection found. App is running in offline mode.')
|
||||
},
|
||||
error (error) {
|
||||
console.error('Error during service worker registration:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Home from "@/components/Home";
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
base: process.env.BABEL_URL,
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
components: {
|
||||
default: Home,
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
@ -1,58 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
setting: {
|
||||
color: ['#ff6262', '#ffa947'],
|
||||
},
|
||||
settingOption: {
|
||||
colors: [{
|
||||
name: '炽焰',
|
||||
color: ['#ff6262', '#ffa947'],
|
||||
},{
|
||||
name: '冰蓝',
|
||||
color: ['#5b9df9', '#47bfff'],
|
||||
},{
|
||||
name: '青草',
|
||||
color: ['#2c7d59', '#3ba776'],
|
||||
},{
|
||||
name: '江户',
|
||||
color: ['#8E2DE2', '#4A00E0'],
|
||||
}]
|
||||
},
|
||||
askList: [],
|
||||
onAsk: false,
|
||||
onInfer: false,
|
||||
onLegal: false,
|
||||
currentTab: 'Home',
|
||||
selected: null,
|
||||
unselect: null,
|
||||
cardSelected: null,
|
||||
cardUnselect: null,
|
||||
},
|
||||
mutations: {
|
||||
selectTab (state, selected) {
|
||||
state.unselect = null;
|
||||
state.selected = selected;
|
||||
},
|
||||
setTab (state, tab) {
|
||||
state.currentTab = tab;
|
||||
},
|
||||
unselectTab (state) {
|
||||
state.unselect = state.selected;
|
||||
state.selected = null;
|
||||
state.currentTab = 'Home';
|
||||
},
|
||||
selectCard (state, selected) {
|
||||
state.cardUnselect = null;
|
||||
state.cardSelected = selected;
|
||||
},
|
||||
unselectCard (state) {
|
||||
state.cardUnselect = state.cardSelected;
|
||||
state.cardSelected = null;
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in new issue