/*
******* ***** **** * * ***
* * * * * * * *
* * * **** * * *
* ***** * ***** ***
+ 欢迎使用由彪哥.TOP开发的TOPUI组件v1.0版本
+ 我们的目标是简化开发,提高开发效率,减少学习成本
+ 本项目将会进行开源,需要大家持续关注和支持.
+————————————————————————————————————————————————————————————————+
TOPUI支持的功能:
+颜色背景、文字颜色、标题、字体大小、对齐、外边距、内边距、宽度、高等、行距、提示、弹性盒子、圆角、输入框、三段式框架……
+ CDN外部引用：https://www.xn--kwrr8v.top/style/topui/topui1.0.css
这样引用到您的项目中(请写在中)：
+————————————————————————————————————————————————————————————————+
使用提示：
+ 以下代码中*代表可变参数：数字、字母、单词（默认单位px）
+ b和c后面的16进制数是指颜色#***
+ -后面一般是指该组件的分区域，或者方向
+ 短杠-后面s上、x下、z左、y右
+ *参数后面的b是指参数*带百分号%
+ 方向的缩写t上、l左、r右、b下
+ br50就是圆角50%
+————————————————————————————————————————————————————————————————+
详细使用：
+ 例子：这是个例子
（在__中输入样式缩写）
b*** 背景颜色 background-color
c*** 文字颜色 color
h* 标题 H1~H5
f* 字体大小 font-size
ce、left、right 对齐：居中、左、右 content
m*、mh*、mw*、mw*b 外边距 padding
p*、ph*、pw* 内边距 margin
w*、w*b 宽度 width
h* 高等 height
lh* 行距 line-height
tw ； tw-bt ； tw-nr 提示：标题、内容
df、db、dn 弹性盒子 display
br* 圆角 border-radius
top、main、bottom 三段式框架：顶部、主要、底部
input、button 输入框、按钮
pop 弹窗
call 顶部提示
code 代码
+————————————————————————————————————————————————————————————————+
+ 官方网站：https://www.xn--kwrr8v.top/style/topui/
+ Github开源：https://github.com/biaoge-top
+ Gitee开源：https://gitee.com/biaoge-top
+ CSDN作者：https://blog.csdn.net/jbywapp/
+————————————————————————————————————————————————————————————————+
*/
*{
justify-content: ;border-radius: ;
}
button
/* 初始化 */
* {
margin: 0px;
padding: 0px;
list-style: none;
}
html,body,#app {
width: 100%;
height: 100%;
}
body { background-image: url('https://xn--kwrr8v.top/style/image/bag.png'); }
a { text-decoration: none; }
/* 滑动块 */
::-webkit-scrollbar { width: 1px; height: 1px; }
/* 背景颜色 */
.b00f { background-color: rgba(30, 144, 255, 0.8);}
.bf00 { background-color: rgba(220, 20, 60, 0.8);}
.b00a { background-color: rgba(50, 200, 200, 0.8);}
.b0f0 { background-color: rgba(40, 205, 50, 0.8);}
.b800 { background-color: rgba(255, 150, 0, 0.8);}
.ba00 { background-color: rgba(255, 69, 0, 0.8);}
.b888 { background-color: rgba(85, 85, 85, 0.8);}
/* 文字颜色 */
.cfff { color: rgba(255, 255, 255, 1); }
.c00f { color: rgba(30, 144, 255, 1.0); }
.cf00 { color: rgba(220, 20, 60, 1.0); }
.c00a { color: rgba(50, 200, 200, 1.0); }
.c0f0 { color: rgba(40, 205, 50, 1.0); }
.c800 { color: rgba(255, 150, 0, 1.0); }
.ca00 { color: rgba(255, 69, 0, 1.0); }
.c888 { color: rgba(85, 85, 85, 1.0); }
.c000 { color: rgba(0, 0, 0, 1); }
/* 标题 */
h1,h2,h3,h4,h5 {
letter-spacing: 1.2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
h1 { font-size: 38px;}
h2 { font-size: 32px;}
h3 { font-size: 28px;}
h4 { font-size: 26px;}
h5 { font-size: 18px;}
/* 其他字排版 */
span {
font-family: serif;
text-indent: 1em;
border-left: 3px solid rgba(30, 144, 255, 1.0);
padding-left: 5px;
}
tt{ font-family: serif; text-indent: 1em; }
p{ text-indent: 2em; }
/* 字体大小 */
.f10 { font-size: 10px;}
.f11 { font-size: 11px;}
.f12 { font-size: 12px;}
.f13 { font-size: 13px;}
.f14 { font-size: 14px;}
.f15 { font-size: 15px;}
.f16 { font-size: 16px;}
.f17 { font-size: 17px;}
.f18 { font-size: 18px;}
.f19 { font-size: 19px;}
.f20 { font-size: 20px;}
.f21 { font-size: 21px;}
.f22 { font-size: 22px;}
.f23 { font-size: 23px;}
.f24 { font-size: 24px;}
.f25 { font-size: 25px;}
.f26 { font-size: 26px;}
.f27 { font-size: 27px;}
.f28 { font-size: 28px;}
.f29 { font-size: 29px;}
.f30 { font-size: 30px;}
.f31 { font-size: 31px;}
.f32 { font-size: 32px;}
.f36 { font-size: 36px;}
.f48 { font-size: 48px;}
.f64 { font-size: 64px;}
.f75 { font-size: 75px;}
.f88 { font-size: 88px;}
.f99 { font-size: 99px;}
.f100 { font-size: 100px;}
.f128 { font-size: 128px;}
.f256 { font-size: 256px;}
/* 对齐 */
.ce {
justify-content: center;
text-align: center;
}
.left {
justify-content: left;
text-align: left;
}
.right {
justify-content: right;
text-align: right;
}
/* 外边距 */
.mh{ margin: auto 0;}
.mw{ margin: 0 auto;}
.m10 { margin: 10px; }
.m20 { margin: 20px; }
.m30 { margin: 30px; }
.m1b { margin: 1%; }
.m2b { margin: 2%; }
.m3b { margin: 3%; }
.m4b { margin: 4%; }
.m5b { margin: 5%; }
.m10b { margin: 10%; }
.mw10 { margin: 0 10px; }
.mw20 { margin: 0 20px; }
.mw30 { margin: 0 30px; }
.mw40 { margin: 0 40px; }
.mh10 { margin: 10px 0; }
.mh20 { margin: 20px 0; }
.mh30 { margin: 30px 0; }
.mh40 { margin: 40px 0; }
.mh50 { margin: 50px 0; }
/* 内边距 */
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p1b { padding: 1%; }
.p2b { padding: 2%; }
.p3b { padding: 3%; }
.p4b { padding: 4%; }
.pw10 { padding: 0 10px; }
.pw20 { padding: 0 20px; }
.pw30 { padding: 0 30px; }
.pw40 { padding: 0 40px; }
.ph10 { padding: 10px 0; }
.ph20 { padding: 20px 0; }
.ph30 { padding: 30px 0; }
.ph40 { padding: 40px 0; }
/* 宽度 */
.w100b { width: 100%;}
.w90b { width: 90%;}
.w80b { width: 80%;}
.w60b { width: 60%;}
.w50b { width: 50%;}
.w40b { width: 40%;}
.w20b { width: 20%;}
/* 高度 */
.h100 { height: 100px; }
.h90 { height: 90px; }
.h80 { height: 80px; }
.h70 { height: 70px; }
.h60 { height: 60px; }
.h50 { height: 50px; }
.h40 { height: 40px; }
/* 行距 */
.lh25 { line-height: 25px;}
.lh30 { line-height: 30px;}
.lh35 { line-height: 35px;}
.lh45 { line-height: 45px;}
.lh50 { line-height: 50px;}
.lh55 { line-height: 55px;}
.lh60 { line-height: 60px;}
.lh75 { line-height: 75px;}
/* 弹性盒子 */
.df { display: flex; }
.db { display: block; }
.dn { display: none; }
.dli { display: list-item; }
/* 提示 */
.tw-bt{
text-indent: 1em;
border-bottom: none;
border: 1px solid rgba(30, 144, 255, 0.5);
background-color: rgba(30, 144, 255, 0.1);
}
.tw-nr{ border: 1px solid rgba(30, 144, 255, 0.5); }
/* 圆角 */
.br5 { border-radius: 5px; }
.br8 { border-radius: 8px; }
.br10 { border-radius: 10px; }
.br15 { border-radius: 15px; }
.br20 { border-radius: 20px; }
.br25 { border-radius: 25px; }
.br50 { border-radius: 50%; }
.br-s10 { border-radius: 10px 10px 0 0; } /* 上10px */
.br-x10 { border-radius: 0 0 10px 10px; } /* 下10px */
/* 顶部区域 */
.top {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
min-width: 300px;
border-bottom: 1px solid #fff;
display: flex;
z-index: 99;
}
/* LOGO */
.logo {
height: 50px;
margin: auto 10px;
}
/* 标题 */
.title {
height: 60px;
line-height: 60px;
font-size: 25px;
margin: auto 10px;
letter-spacing: 5px;
font-weight: 500;
}
button,.submit {
width: auto;
min-width: 80px;
height: 40px;
padding: 0 2%;
margin: 5px 10px;
font-size: 16px;
border: none;
border-radius: 5px;
}
/* 主区域 */
.main {
width: 100%;
/*height: 100vh;*/
min-width: 300px;
margin-top: 65px;
z-index: 99;
}
.main-left {
width: 20%;
height: 100%;
}
.main-right {
width: 80%;
height: 100%;
}
/* 输入框 */
form>li {
width: 75%;
min-width: 100px;
max-width: 400px;
height: 40px;
line-height: 40px;
margin: 5px 0;
display: flex;
font-size: 18px;
border-radius: 5px;
border: 1px solid rgba(50, 50, 50, .3);
}
form li>input {
width: 100%;
border: none;
border-radius: 0 5px 5px 0;
font-size: 17px;
padding: 0 5px;
}
form li>label {
width: auto;
min-width: 90px;
font-size: 16px;
text-align: center;
background-color: rgba(30, 144, 255, 0.1);
}
/* 底部 */
.bottom {
text-align: center;
width: 100%;
height: auto;
min-height: 25px;
padding: 20px 0;
color: #fff;
margin-top: 10px;
font-size: 14px;
background-color: rgba(85, 85, 85, 0.8);
}
.bottom-nav {
display: flex;
text-align: center;
justify-content: center;
}
.bottom-nav li { padding: 6px;}
.bottom a { color: #fff;}
.bottom-miit {
text-align: center;
color: #fff;
margin-top: 10px;
}
/* 弹窗提醒 */
.pop {
/* display: none; */
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5);
}
.pop-none {
display: none;
}
.pop-hint {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 75%;
max-width: 400px;
min-width: 300px;
height: auto;
max-height: 150px;
min-height: 100px;
border-radius: 8px;
padding: 15px 25px;
background-color: #fff;
box-shadow: 5px 15px 10px 5px rgba(100, 100, 100, 0.4);
box-shadow: 0 6px 32px -7px rgb(0 0 0 / 1);
}
.pop-hint-title {
width: 100%;
height: 30px;
font-size: 23px;
display: flex;
}
.pop-hint-x {
position: absolute;
right: 20px;
top: 10px;
}
.pop-hint-p {
margin: 10px 0;
font-size: 17px;
}
.pop-hint-but {
height: 35px;
border-radius: 5px;
position: absolute;
bottom: 0px;
right: 15px;
font-size: 17px;
}
/* 顶部提醒 */
.call {
width: 75%;
max-width: 300px;
min-width: 250px;
height: 45px;
height: 45px;
line-height: 45px;
color: #f00;
z-index: 999;
font-size: 18px;
text-align: left;
padding: 0 5%;
letter-spacing: 2px;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
position: fixed;
border-radius: 4px;
border: 1px solid #dfe2e2;
background-color: rgba(255, 240, 245, .9);
box-shadow: 5px 15px 10px -5px rgba(100, 100, 100, 0.4);
}
/* 代码 */
.code {
width: auto;
min-width: 250px;
max-width: 100%;
height: auto;
min-height: 100px;
position: absolute;
background-color: rgba(85, 85, 85, 0.8);
border-radius: 10px;
}
.code-title {
display: flex;
margin: 5px 5px;
padding-left: 10px;
position: absolute;
left: 15px;
}
.code-copy {
position: absolute;
right: 10px;
}
.code-copy button {
width: 40px;
height: 20px;
margin: 0;
position: absolute;
right: 5px;
top: 5px;
}
.code-title li {
width: 15px;
height: 15px;
border-radius: 50px;
margin: 2px 5px;
border: 0.5px solid #fff;
}
.code-main {
width: 100%;
height: 100%;
margin-top: 30px;
border-radius: 10px;
display: flex;
}
.code-left-num {
color: #fff;
font-size: 18px;
line-height: 25px;
width: 20px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.code-main pre {
width: 95%;
margin: 0;
padding: 5px 8px;
font-size: 18px;
line-height: 25px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 9);
color: #0f0;
}
@media (max-width:450px) {}
@media (max-width:1000px) {}