@ -1,113 +0,0 @@
|
||||
//全局样式
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Poppins, Poppins;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#__nuxt, #__layout{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
-webkit-user-drag: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #fff; //鼠标悬浮
|
||||
}
|
||||
|
||||
&:link {
|
||||
color: #fff; //未访问
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #fff; //鼠标按下
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: #fff; //已访问
|
||||
}
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
#sub-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.gradient-color {
|
||||
background: linear-gradient(0deg, #2563EB 22%, #7B61FF 73%);
|
||||
@include font-color-transprent;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 浅灰色背景 */
|
||||
|
||||
width: 600px;
|
||||
/* 添加轻微阴影效果 */
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
font-size: $normal-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-container input[type="text"] {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
padding: 15px 30px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background-color: #ffffff;
|
||||
/* 白色背景 */
|
||||
color: #666666;
|
||||
/* 文字颜色 */
|
||||
outline: none;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
/* 添加轻微阴影效果 */
|
||||
}
|
||||
|
||||
|
||||
/* 例如，可以通过:focus伪类来处理聚焦状态 */
|
||||
.input-container input[type="text"]:focus {
|
||||
border-color: #ffffff;
|
||||
/* 设置聚焦时的边框颜色 */
|
||||
}
|
||||
|
||||
.input-container input[type="text"]::placeholder {
|
||||
color: #DCE1E8;
|
||||
/* 设置占位符的颜色 */
|
||||
}
|
||||
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #E2E8F0;
|
||||
margin:30px 0 ;
|
||||
}
|
||||
#normal-container {
|
||||
@include container-bg;
|
||||
flex: 1;
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
//混入
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin display-flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin position-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@mixin flex-column {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@mixin flex-row {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
@mixin font-color-transprent {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// 添加渐变边框mixin
|
||||
@mixin gradient-border($start, $end) {
|
||||
background:
|
||||
linear-gradient(white, white) padding-box,
|
||||
linear-gradient(90deg, $start, $end) border-box;
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@mixin scrollBar {
|
||||
|
||||
//滚动条轨道
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
//设置滚动条的宽度和高度
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px; //竖直滚动条宽度
|
||||
height: 6px; //水平滚动条高度
|
||||
}
|
||||
|
||||
//滚动条滑块（可以拖动的部分）
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
@mixin container-bg {
|
||||
background:
|
||||
linear-gradient(180deg, #e1ddfd 0%, $background-color 850px),
|
||||
$background-color 850px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 850px, 100% calc(100% - 850px);
|
||||
background-position: top, bottom;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
.text-container {
|
||||
flex: 1;
|
||||
padding: 50px 0;
|
||||
.top{
|
||||
margin-top: 100px;
|
||||
margin-bottom: 50px;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: $huge-font-size1;
|
||||
}
|
||||
.date{
|
||||
text-align: center;
|
||||
font-size: $mid-font-size;
|
||||
color: $main-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
//常用的变量
|
||||
|
||||
//颜色
|
||||
$main-color:#7B61FF;
|
||||
$grey-color:#64748B;
|
||||
$main-font-color:#1E293B;
|
||||
|
||||
$grey:rgba(255,255,255,0.7);
|
||||
$white:#fff;
|
||||
$background-color:#F9FAFC;
|
||||
$header-backgroungd:linear-gradient( 90deg, #2563EB 22%, #7B61FF 73%);
|
||||
$linear-gradient-start:#2563EB;
|
||||
$linear-gradient-end:#7B61FF;
|
||||
//导航栏
|
||||
$navigationBarHeight:72px;
|
||||
|
||||
//底部栏
|
||||
$footerBarHeight:314px;
|
||||
$mid-font-size:16px;
|
||||
$big-font-size:18px;
|
||||
$normal-font-size:20px;
|
||||
$larg-font-size:24px;
|
||||
$huge-font-size3:60px;
|
||||
$huge-font-size2:50px;
|
||||
$huge-font-size1:40px;
|
||||
Reference in New Issue
Block a user