vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面
Posted Rudon滨海渔村
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面相关的知识，希望对你有一定的参考价值。
效果图
完整代码
里面有注释，看不懂的翻官方手册 https://cn.vuejs.org/v2/guide/
./index.php
<?php
$file = __DIR__ . '/data.json';
$list_jsoned = (file_exists($file))? file_get_contents($file):'[]';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue搜题 - Rudon</title>
<link rel="shortcut icon" type="image/x-icon" href="/core/tpl/logo.png" />
<link href="//lib.sinaapp.com/js/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自动换行 */
pre
white-space: pre-wrap;
word-wrap: break-word;
::-webkit-input-placeholder /* WebKit browsers */
color: #DDD;
:-moz-placeholder /* Mozilla Firefox 4 to 18 */
color: #DDD;
::-moz-placeholder /* Mozilla Firefox 19+ */
color: #DDD;
:-ms-input-placeholder /* Internet Explorer 10+ */
color: #DDD;
/* 手指指 */
.cursorPointer
cursor: pointer;
.weightBold
font-weight: bold;
.underline
text-decoration: underline;
.paddingCol10
padding: 10px 0;
.paddingBottom30
padding-bottom: 30px;
.bgColorWhite
background-color: white;
.padding10
padding: 10px;
.fontSize12
font-size: 12px;
</style>
</head>
<body style="background: linear-gradient(to bottom, #E4EFE0 0%, #FFFFFF 90%); min-height: 90vh;">
<div id="vuebox">
<div class="container">
<!--fixed-top-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Vue搜题
</a>
<a class="navbar-brand" href="./questions/">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
</svg>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown fontSize12">
<a class="nav-link dropdown-toggle" href="#" id="nd1" role="button" data-toggle="dropdown">
title_showtype
</a>
<div class="dropdown-menu" aria-labelledby="nd1">
<a class="dropdown-item cursorPointer" @click="show_type = 1">
显示题目+答案
</a>
<a class="dropdown-item cursorPointer" @click="show_type = 0">
只显示题目
</a>
</div>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<!--搜索模式-->
<ul class="navbar-nav">
<li class="nav-item dropdown mr-4 fontSize12">
<a class="nav-link dropdown-toggle" href="#" id="nd2" role="button" data-toggle="dropdown">
title_searchmode
</a>
<div class="dropdown-menu" aria-labelledby="nd2">
<a class="dropdown-item cursorPointer" @click="search_mode = 0">
模糊查询
</a>
<a class="dropdown-item cursorPointer" @click="search_mode = 1">
精准查询
</a>
</div>
</li>
</ul>
<!--搜索范围-->
<ul class="navbar-nav">
<li class="nav-item dropdown mr-4 fontSize12">
<a class="nav-link dropdown-toggle" href="#" id="nd2" role="button" data-toggle="dropdown">
title_searchtype
</a>
<div class="dropdown-menu" aria-labelledby="nd2">
<a class="dropdown-item cursorPointer" @click="search_type = 0">
只搜索题目
</a>
<a class="dropdown-item cursorPointer" @click="search_type = 1">
搜索题目+内容
</a>
</div>
</li>
</ul>
<input class="form-control mr-sm-2" type="search" placeholder="关键词" v-model="keyword_input" @keyup.enter="seachEnter" @clear="keyword = keyword_input"/>
<a class="navbar-nav" @click="keyword = keyword_input">
<button>搜索</button>
</a>
</div>
</div>
</nav>
<div class="bgColorWhite padding10">
<!-- 遍历 -->
<div v-for="(item, key) in list" class="paddingBottom30" v-show="showOrNot(key)">
<!-- 使用v-html来显示带HTML标签的文本 -->
<!-- 题目 -->
<div v-html="highlight(key,'title')" class="weightBold underline paddingCol10"></div>
<!-- 答案 -->
<pre v-html="highlight(key,'answer')" v-show="show_type"></pre>
</div>
</div>
</div>
<!-- 隐藏 -->
<div class="d-none">
<!-- 初始化值，不可直接写进v-model的DOM，会被清空掉 -->
<textarea id="init_str"><?php echo $list_jsoned; ?></textarea>
<!-- 所有资料的压缩版 -->
<textarea v-model="list_encoded"></textarea>
</div>
</div>
<!-- 不用Bootstrap可以不加载jQuery -->
<script src="//lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script src="//lib.sinaapp.com/js/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- vue核心库 -->
<script src="//cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// 字符串全部替换 replaceAll
// https://xercis.blog.csdn.net/article/details/106839160
String.prototype.replaceAll = function (s1, s2)
return this.replace(new RegExp(s1, "gm"), s2);
;
</script>
<script>
// 初始化
var app = new Vue(
// 制定某个DOM为vue快乐专区
el: '#vuebox',
// 默认数据
data:
// 搜索关键词
keyword: '',
// 搜索关键词 - 输入中
keyword_input: '',
// 列表 （json加密）
list_encoded: '[]',
list: [],
// 搜索类型 0=title 1=title+answer
search_type: 1,
// 显示类型 0=title 1=title+answer
show_type: 1,
// 搜索模式 0模糊查询 1精准查询
search_mode: 0,
,
// 自动计算出来的值（响应式数据）
computed:
title_showtype : function ()
return (this.show_type)? '显示题目+答案':'只显示题目'
,
title_searchtype : function ()
return (this.search_type)? '搜索题目+内容':'只搜索题目'
,
title_searchmode: function ()
return (this.search_mode)? '精准查询':'模糊查询'
,
search_keywords: function ()
let res = []
if (this.keyword != '')
res = this.keyword.split('')
return res
,
,
// onload以后
mounted: function ()
// 转换字符串为数组对象 -- 也可以使用jQuery
this.list_encoded = document.getElementById('init_str').value
// 转换字符串为数组对象
this.list = JSON.parse(this.list_encoded)
,
// 方法
methods:
// 高亮
highlight (k, col)
let c = this.list[k][col]
let kw = this.keyword
if (kw != '')
// 插入高亮标签
if (this.search_mode)
// 精准查询
c = c.replaceAll(kw, '<font color="red">'+kw+'</font>')
else
// 模糊查询
for (let curKW of this.search_keywords)
c = c.replaceAll(curKW, '<font color="red">'+curKW+'</font>')
return c
,
// 显示与否
showOrNot (k)
if (this.keyword == '')
return true
let res = false
if (this.search_type)
// 全部搜
if (this.search_mode)
// 精准查询
if (!res)
if (this.list[k].title.indexOf(this.keyword) !== -1)
res = true
if (!res)
if (this.list[k].answer.indexOf(this.keyword) !== -1)
res = true
else
// 模糊查询
for (let curKW of this.search_keywords)
if (!res)
if (this.list[k].title.indexOf(curKW) !== -1)
res = true
if (!res)
if (this.list[k].answer.indexOf(curKW) !== -1)
res = true
return res
else
// title only
if (this.search_mode)
// 精准查询
if (!res)
if (this.list[k].title.indexOf(this.keyword) !== -1)
res = true
else
// 模糊查询
for (let curKW of this.search_keywords)
if (!res)
if (this.list[k].title.indexOf(curKW) !== -1)
res = true
return res
,
// 输入框Enter
seachEnter(e)
var keyCode = window.event ? e.keyCode : e.which;
if (keyCode == 13)
this.keyword = this.keyword_input
,
// Methods结束
,
)
</script>
</body>
</html>./questions/index.php
<?php
$max = 1000;
$file = dirname(__DIR__) .'/data.json';
function a ($var)
header('content-type: text/css; charset=utf-8');
print_r($var);
die();
if (isset($_POST['a1']))
//print_r($_POST);die();
$tobe = array();
for ($i = 0; $i < $max; $i++)
$t = $_POST['q'.$i];
$a = $_POST['a'.$i];
if($t != '' && $a != '')
$tobe[] = array(
'title' => $_POST['q'.$i],
'answer' => $_POST['a'.$i]
);
file_put_contents($file, json_encode($tobe));
// echo json_encode($tobe);die();
$backup = dirname(__FILE__) . '/backup/';
if (!is_dir($backup))
mkdir($backup, 0777, true);
$backup_file = $backup . date('YmdHis').'.json';
file_put_contents($backup_file, json_encode($tobe));
$list = array();
if (!file_exists($file))
file_put_contents($file, json_encode($list));
$list = json_decode(file_get_contents($file), true);
if (count($list) < $max)
$left = $max - count($list);
for ($i = 0; $i < $left; $i++)
$list[] = array(
'title' => '',
'answer' => ''
);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>题目管理</title>
<link href="./c.css" rel="stylesheet"/>
</head>
<body>
<form action="" method="post">
<div class="margin0Auto paddingCol50 fontSize30 text-center maxWidth1000">
<button type="submit" class="padding30 width100pct">更新</button>
</div>
<div class="margin0Auto maxWidth1000">
<?php foreach ($list as $k=>$one): ?>
<!-- html... -->
<div class="rowSpaceBetween paddingCol20">
<div>
#<?php echo $k + 1; ?>
</div>
<div class="width40pct">
<textarea name="q<?php echo $k; ?>" id="q<?php echo $k; ?>" rows="3" class="width100pct padding10 radius10" placeholder="题目"><?=$one['title'];?></textarea>
</div>
<div class="width40pct">
<textarea name="a<?php echo $k; ?>" id="a<?php echo $k; ?>" rows="3" class="width100pct padding10 radius10" placeholder="答案"><?=$one['answer'];?></textarea>
</div>
</div>
<?php endforeach; ?>
</div>
</form>
</body>
</html>
./questions/c.css
/* ---------------------------- 自定义CLASS ----------------------------- */
/* 全屏、居中 */
.sysCoverBoxFullAndCenter
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 4;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
/* 全屏、居中 */
.sysCoverBoxFullAndTop
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 4;
/**
* Display
*/
.hidden,
.d-none
display: none;
.displayInlineBlock
display: inline-block;
/**
* A
*/
.noUnderLine
text-decoration: none!important;
.textUnderLine
text-decoration: underline!important;
.textCrossLine
text-decoration: line-through;
/**
* Flex
*
* @link https://blog.csdn.net/qq285744011/article/details/123043631
*/
.rowStart
display: flex;
flex-direction: row;
justify-content: flex-start;
.rowEnd
display: flex;
flex-direction: row;
justify-content: flex-end;
.rowCenter
display: flex;
flex-direction: row;
justify-content: center;
.rowSpaceBetween
display: flex;
flex-direction: row;
justify-content: space-between;
.rowSpaceAround
display: flex;
flex-direction: row;
justify-content: space-around;
.rowSpaceEvenly
display: flex;
flex-direction: row;
justify-content: space-evenly;
.rowStretch
display: flex;
flex-direction: row;
justify-content: stretch;
.rowAlignItemsEnd
display: flex;
flex-direction: row;
align-items: flex-end;
/* Special for column direction */
.aliasRowDCAS,
.rowDirectionColumnAndStart
display: flex;
flex-direction: column;
justify-content: flex-start;
.aliasRowDCRAS,
.rowDirectionColumnReverseAndStart
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
/* 里面的多个.col容器水平放置，而且垂直方向对齐 */
.colAlignItemsCenter > .colInner
display: flex;
align-items: center;
/* 里面的顶级容器纵向放置，而且集体在垂直方向居中 */
.rowAlignItemsCenter
display: flex;
flex-direction: column;
justify-content: center;
/* 子元素平分父类宽度 */
.flex1,
.flex-1-1-0pct
flex: 1 1 0%;
/* 子元素各自按照自己的内容宽度 等比平分父类宽度 */
.flexAuto,
.flex-1-1-auto
flex: 1 1 auto!important;
.flex00auto,
.flex00Auto,
.flex-0-0-auto
flex: 0 0 auto!important;
/* flex布局 */
.d-flex
display: flex;
.justify-content-center
justify-content: center;
.align-items-center
align-items: center;
/* 自动换行 */
.flexFlowWrap
flex-flow: wrap;
/**
* 文字不可选中
*/
.noselect
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.selectableText
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
.selectableAll
-webkit-touch-callout: all;
-webkit-user-select: all;
-khtml-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
/**
* 背景图位置
*/
.bgPosCenter
background-position: center;
/* 子元素 */
.innerAgray a,
.innerAgray a:hover
color: gray;
.innerAblack a,
.innerAblack a:hover
color: black;
.innerDomCursorPointer > *
cursor: pointer;
.innerMediaResponsive img,
.innerMediaResponsive video
max-width: 100%!important;
/* 弹性盒子模型 flex-shrink 伸缩 */
.innerDomFlexShrink0 > *
flex-shrink: 0;
.innerDomInlineBlock > *
display: inline-block;
.innerDomPaddingRow5 > *
padding-left: 5px;
padding-right: 5px;
.innerDomPaddingRow10 > *
padding-left: 10px;
padding-right: 10px;
.innerDomPaddingRow20 > *
padding-left: 20px;
padding-right: 20px;
.innerDomPaddingRow30 > *
padding-left: 30px;
padding-right: 30px;
.innerDomPaddingRow40 > *
padding-left: 40px;
padding-right: 40px;
.innerDomPaddingRow50 > *
padding-left: 50px;
padding-right: 50px;
.innerDomPaddingRow100 > *
padding-left: 100px;
padding-right: 100px;
.innerDomPaddingCol5 > *
padding-top: 5px;
padding-bottom: 5px;
.innerDomPaddingCol10 > *
padding-top: 10px;
padding-bottom: 10px;
.innerDomPaddingCol20 > *
padding-top: 20px;
padding-bottom: 20px;
.innerDomPaddingCol30 > *
padding-top: 30px;
padding-bottom: 30px;
.innerDomPaddingCol40 > *
padding-top: 40px;
padding-bottom: 40px;
.innerDomPaddingCol50 > *
padding-top: 50px;
padding-bottom: 50px;
.innerDomPaddingCol100 > *
padding-top: 100px;
padding-bottom: 100px;
/* 单边 */
.innerDomPaddingBottom5 > *
padding-bottom: 5px;
.innerDomPaddingBottom10 > *
padding-bottom: 10px;
.innerDomPaddingBottom20 > *
padding-bottom: 20px;
.innerDomPaddingBottom30 > *
padding-bottom: 30px;
.innerDomPaddingBottom40 > *
padding-bottom: 40px;
.innerDomPaddingBottom50 > *
padding-bottom: 50px;
.innerDomPaddingBottom100 > *
padding-bottom: 100px;
.innerDomMarginRow5 > *
margin-left: 5px;
margin-right: 5px;
.innerDomMarginRow10 > *
margin-left: 10px;
margin-right: 10px;
.innerDomMarginRow20 > *
margin-left: 20px;
margin-right: 20px;
.innerDomMarginRow30 > *
margin-left: 30px;
margin-right: 30px;
.innerDomMarginRow40 > *
margin-left: 40px;
margin-right: 40px;
.innerDomMarginRow50 > *
margin-left: 50px;
margin-right: 50px;
.innerDomMarginRow100 > *
margin-left: 100px;
margin-right: 100px;
.innerDomMarginCol5 > *
margin-top: 5px;
margin-bottom: 5px;
.innerDomMarginCol10 > *
margin-top: 10px;
margin-bottom: 10px;
.innerDomMarginCol20 > *
margin-top: 20px;
margin-bottom: 20px;
.innerDomMarginCol30 > *
margin-top: 30px;
margin-bottom: 30px;
.innerDomMarginCol40 > *
margin-top: 40px;
margin-bottom: 40px;
.innerDomMarginCol50 > *
margin-top: 50px;
margin-bottom: 50px;
.innerDomMarginCol100 > *
margin-top: 100px;
margin-bottom: 100px;
/* 单边 */
.innerDomMarginBottom5 > *
margin-bottom: 5px;
.innerDomMarginBottom10 > *
margin-bottom: 10px;
.innerDomMarginBottom20 > *
margin-bottom: 20px;
.innerDomMarginBottom30 > *
margin-bottom: 30px;
.innerDomMarginBottom40 > *
margin-bottom: 40px;
.innerDomMarginBottom50 > *
margin-bottom: 50px;
.innerDomMarginBottom100 > *
margin-bottom: 100px;
/* PlaceHolder样式 */
/* WebKit browsers */
.innerPlaceholderFontSize14 textarea::-webkit-input-placeholder,
.innerPlaceholderFontSize14 input::-webkit-input-placeholder
font-size: 14px;
/* Mozilla Firefox 4 to 18 */
.innerPlaceholderFontSize14 textarea:-moz-placeholder,
.innerPlaceholderFontSize14 input:-moz-placeholder
font-size: 14px;
/* Mozilla Firefox 19+ */
.innerPlaceholderFontSize14 textarea::-moz-placeholder,
.innerPlaceholderFontSize14 input::-moz-placeholder
font-size: 14px;
/* Internet Explorer 10+ */
.innerPlaceholderFontSize14 textarea :-ms-input-placeholder,
.innerPlaceholderFontSize14 input :-ms-input-placeholder
font-size: 14px;
.innerPlaceholderFontSize12 textarea::-webkit-input-placeholder,
.innerPlaceholderFontSize12 input::-webkit-input-placeholder
font-size: 12px;
.innerPlaceholderFontSize12 textarea:-moz-placeholder,
.innerPlaceholderFontSize12 input:-moz-placeholder
font-size: 12px;
.innerPlaceholderFontSize12 textarea::-moz-placeholder,
.innerPlaceholderFontSize12 input::-moz-placeholder
font-size: 12px;
.innerPlaceholderFontSize12 textarea :-ms-input-placeholder,
.innerPlaceholderFontSize12 input :-ms-input-placeholder
font-size: 12px;
.innerPlaceholderFontSize16 textarea::-webkit-input-placeholder,
.innerPlaceholderFontSize16 input::-webkit-input-placeholder
font-size: 16px;
.innerPlaceholderFontSize16 textarea:-moz-placeholder,
.innerPlaceholderFontSize16 input:-moz-placeholder
font-size: 16px;
.innerPlaceholderFontSize16 textarea::-moz-placeholder,
.innerPlaceholderFontSize16 input::-moz-placeholder
font-size: 16px;
.innerPlaceholderFontSize16 textarea :-ms-input-placeholder,
.innerPlaceholderFontSize16 input :-ms-input-placeholder
font-size: 16px;
/* 颜色 */
.innerPlaceholderColorDEDEDE textarea::-webkit-input-placeholder,
.innerPlaceholderColorDEDEDE input::-webkit-input-placeholder
color: #DEDEDE;
.innerPlaceholderColorDEDEDE textarea:-moz-placeholder,
.innerPlaceholderColorDEDEDE input:-moz-placeholder
color: #DEDEDE;
.innerPlaceholderColorDEDEDE textarea::-moz-placeholder,
.innerPlaceholderColorDEDEDE input::-moz-placeholder
color: #DEDEDE;
.innerPlaceholderColorDEDEDE textarea :-ms-input-placeholder,
.innerPlaceholderColorDEDEDE input :-ms-input-placeholder
color: #DEDEDE;
/* 输入框放大缩小 禁止拉伸 */
.resizeNone textarea
resize: none;
.paddingCol0
padding-top: 0!important;
padding-bottom: 0!important;
.paddingCol1
padding-top: 1px!important;
padding-bottom: 1px!important;
.paddingCol2
padding-top: 2px!important;
padding-bottom: 2px!important;
.paddingCol3
padding-top: 3px!important;
padding-bottom: 3px!important;
.paddingCol4
padding-top: 4px!important;
padding-bottom: 4px!important;
.paddingCol5
padding-top: 5px!important;
padding-bottom: 5px!important;
.paddingCol6
padding-top: 6px!important;
padding-bottom: 6px!important;
.paddingCol7
padding-top: 7px!important;
padding-bottom: 7px!important;
.paddingCol8
padding-top: 8px!important;
padding-bottom: 8px!important;
.paddingCol9
padding-top: 9px!important;
padding-bottom: 9px!important;
.paddingCol10
padding-top: 10px!important;
padding-bottom: 10px!important;
.paddingCol15
padding-top: 15px!important;
padding-bottom: 15px!important;
.paddingCol20
padding-top: 20px!important;
padding-bottom: 20px!important;
.paddingCol30
padding-top: 30px!important;
padding-bottom: 30px!important;
.paddingCol40
padding-top: 40px!important;
padding-bottom: 40px!important;
.paddingCol50
padding-top: 50px!important;
padding-bottom: 50px!important;
.paddingCol100
padding-top: 100px!important;
padding-bottom: 100px!important;
.paddingCol200
padding-top: 200px!important;
padding-bottom: 200px!important;
.padding0
padding: 0!important;
.padding1
padding: 1px!important;
.padding2
padding: 2px!important;
.padding3
padding: 3px!important;
.padding4
padding: 4px!important;
.padding5
padding: 5px!important;
.padding6
padding: 6px!important;
.padding7
padding: 7px!important;
.padding8
padding: 8px!important;
.padding9
padding: 9px!important;
.padding10
padding: 10px!important;
.padding12
padding: 12px!important;
.padding14
padding: 14px!important;
.padding16
padding: 16px!important;
.padding18
padding: 18px!important;
.padding20
padding: 20px!important;
.padding30
padding: 30px!important;
.padding40
padding: 40px!important;
.padding50
padding: 50px!important;
.padding100
padding: 100px!important;
.padding200
padding: 200px!important;
/**
* Color
*
*/
.colorForTheme
color: #FF9304;
.colorWhite
color: white;
.colorWhiteImportant
color: white!important;
.colorBlack
color: black;
.colorBlackLighter
color: #282828;
.colorRed
color: red;
.colorGreen
color: green;
.colorBlue
color: blue;
.colorGray
color: gray;
.colorGrayDarker
color: #6a6a6a;
.colorOrange
color: orange;
.colorYellow
color: orange;
.color3199EE
color: #3199EE;
.colorB0B0B0
color: #b0b0b0;
.colorCBCBCB
color: #cbcbcb;
.colorDEDEDE
color: #dedede;
.color6BADF7
color: #6BADF7;
.colorCCF1EF
color: #CCF1EF;
.color4A84FF
color: #4A84FF;
/**
* Bgcolor
*
*/
.bg-F0F1F5
background-color: #F0F1F5;
.bgColor49A3F2
background-color: #49A3F2!important;
.bgColor5DABF9
background-color: #5DABF9!important;
.bgColorFAD038
background-color: #FAD038!important;
.bgColorForTheme
background-color: #FF9304!important;
.bgColorEEE7F7
background-color: #EEE7F7!important;
.bgColorF2EEF7
background-color: #F2EEF7!important;
.bgColorF8F8F8
background-color: #F8F8F8!important;
.bgColorF5F5F5
background-color: #F5F5F5!important;
.bgColorE8E8E8
background-color: #E8E8E8!important;
.bgColorB6B6B6
background-color: #B6B6B6!important;
.bgColor23D2B1
background-color: #23D2B1!important;
.bgColor45C2E5
background-color: #45C2E5!important;
.bgColorCBF2F8
background-color: #cbf2f8!important;
.bgColor2A82E4
background-color: #2A82E4!important;
.bgColorE8F4FF
background-color: #E8F4FF!important;
.bgColorF6F5FA
background-color: #F6F5FA!important;
.bgColorFCDAC8
background-color: #FCDAC8!important;
.bgColorE8D8C9
background-color: #E8D8C9!important;
.bgColorFFE0A6
background-color: #FFE0A6!important;
.bgColorFFF3DE
background-color: #FFF3DE!important;
.bgColorFDFDFD
background-color: #FDFDFD!important;
.bgColorFACF9F
background-color: #FACF9F!important;
.bgColorF4E2E1
background-color: #f4e2e1!important;
.bgColor91CB74
background-color: #91CB74!important;
.bgColorD43030
background-color: #D43030!important;
.bgColorD4BEBE
background-color: #d4bebe!important;
.bgColorFDD1D2
background-color: #FDD1D2!important;
.bgColorFDE9E8
background-color: #FDE9E8!important;
.bgColorF8DFDF
background-color: #f8dfdf!important;
.bgColorD9D9D9
background-color: #D9D9D9!important;
.bgColor6D96EF
background-color: #6D96EF!important;
.bgColor5C89EE
background-color: #5C89EE!important;
.bgColor7ABFFF
background-color: #7ABFFF!important;
.bgColor5FACF9
background-color: #5FACF9!important;
.bgColor24375F
background-color: #24375F!important;
.bgColor949CB3
background-color: #949CB3!important;
.bgColorFFF9E7
background-color: #fff9ef!important;
.bgColorFFFCF7
background-color: #fffcf7!important;
.bgColorCCCCCC
background-color: #CCCCCC!important;
.bgColorDDDDDD
background-color: #DDDDDD!important;
.bgColorEEEEEE
background-color: #EEEEEE!important;
.bgColorGreen
background-color: green!important;
.bgColorGray
background-color: gray!important;
.bgColorBlue
background-color: blue!important;
.bgColorWhite
background-color: white!important;
.bgColorBlack
background-color: black!important;
.bgColorRed
background-color: red!important;
.bgColorInherit
background-color: inherit!important;
.bgColorTransparent
background-color: transparent!important;
/* 大小缩放 HOVER */
.hoverTransformScale0d5:hover
transform: scale(0.5);
.hoverTransformScale0d6:hover
transform: scale(0.6);
.hoverTransformScale0d7:hover
transform: scale(0.7);
.hoverTransformScale0d8:hover
transform: scale(0.8);
.hoverTransformScale0d9:hover
transform: scale(0.9);
.hoverTransformScale1:hover
transform: scale(1);
.hoverTransformScale1d5:hover
transform: scale(1.5);
/* 大小缩放 */
.transformScale0d5
transform: scale(0.5);
.transformScale0d6
transform: scale(0.6);
.transformScale0d7
transform: scale(0.7);
.transformScale0d8
transform: scale(0.8);
.transformScale0d9
transform: scale(0.9);
.transformScale1
transform: scale(1);
.transformScale1d5
transform: scale(1.5);
/**
* Font size
*/
.fontSize10
font-size: 10px!important;
.fontSize12
font-size: 12px!important;
.fontSize14
font-size: 14px!important;
.fontSize16
font-size: 16px!important;
.fontSize16important
font-size: 16px!important;
.fontSize18
font-size: 18px!important;
.fontSize20
font-size: 20px!important;
.fontSize22
font-size: 22px!important;
.fontSize24
font-size: 24px!important;
.fontSize26
font-size: 26px!important;
.fontSize28
font-size: 28px!important;
.fontSize30
font-size: 30px!important;
.fontSize32
font-size: 38px!important;
.fontSize34
font-size: 34px!important;
.fontSize35
font-size: 35px!important;
.fontSize36
font-size: 36px!important;
.fontSize38
font-size: 38px!important;
.fontSize40
font-size: 40px!important;
.fontSize42
font-size: 42px!important;
.fontSize44
font-size: 44px!important;
.fontSize46
font-size: 46px!important;
.fontSize48
font-size: 48px!important;
.fontSize50
font-size: 50px!important;
.fontSize60
font-size: 60px!important;
.fontSize70
font-size: 70px!important;
.fontSize80
font-size: 80px!important;
.fontSize90
font-size: 90px!important;
.fontSize100
font-size: 100px!important;
/**
* 透明度
* opacity
*/
.toumingOpacity10,
.opacity0
opacity: 0;
.opacity10
opacity: 0.1;
.opacity20
opacity: 0.2;
.opacity30
opacity: 0.3;
.opacity40
opacity: 0.4;
.opacity50
opacity: 0.5;
.opacity60
opacity: 0.6;
.opacity70
opacity: 0.7;
.opacity80
opacity: 0.8;
.opacity90
opacity: 0.9;
.opacity100
opacity: 1;
/**
* Padding-Row
* 左右两边
*/
.paddingRow0
padding-left: 0;
padding-right: 0;
.paddingRow2
padding-left: 2px;
padding-right: 2px;
.paddingRow4
padding-left: 4px;
padding-right: 4px;
.paddingRow6
padding-left: 6px;
padding-right: 6px;
.paddingRow8
padding-left: 8px;
padding-right: 8px;
.paddingRow10
padding-left: 10px;
padding-right: 10px;
.paddingRow15
padding-left: 15px;
padding-right: 15px;
.paddingRow20
padding-left: 20px;
padding-right: 20px;
.paddingRow30
padding-left: 30px;
padding-right: 30px;
.paddingRow40
padding-left: 40px;
padding-right: 40px;
.paddingRow50
padding-left: 50px;
padding-right: 50px;
.paddingRow60
padding-left: 60px;
padding-right: 60px;
.paddingRow70
padding-left: 70px;
padding-right: 70px;
.paddingRow80
padding-left: 80px;
padding-right: 80px;
.paddingRow90
padding-left: 90px;
padding-right: 90px;
.paddingRow100
padding-left: 100px;
padding-right: 100px;
.paddingRow200
padding-left: 200px;
padding-right: 200px;
.paddingRow300
padding-left: 300px;
padding-right: 300px;
/**
* Padding 单边
*/
.paddingTop10
padding-top: 10px;
.paddingTop12
padding-top: 12px;
.paddingTop14
padding-top: 14px;
.paddingTop16
padding-top: 16px;
.paddingTop18
padding-top: 18px;
.paddingTop20
padding-top: 20px;
.paddingTop24
padding-top: 24px;
.paddingTop30
padding-top: 30px;
.paddingTop40
padding-top: 40px;
.paddingTop50
padding-top: 50px;
.paddingTop60
padding-top: 60px;
.paddingTop70
padding-top: 70px;
.paddingTop80
padding-top: 80px;
.paddingTop90
padding-top: 90px;
.paddingTop100
padding-top: 100px;
.paddingTop150
padding-top: 150px;
.paddingTop200
padding-top: 200px;
.paddingTop300
padding-top: 300px;
.paddingTop400
padding-top: 400px;
.paddingTop500
padding-top: 500px;
.paddingBottom0
padding-bottom: 0px;
.paddingBottom5
padding-bottom: 5px;
.paddingBottom6
padding-bottom: 6px;
.paddingBottom8
padding-bottom: 8px;
.paddingBottom10
padding-bottom: 10px;
.paddingBottom20
padding-bottom: 20px;
.paddingBottom30
padding-bottom: 30px;
.paddingBottom40
padding-bottom: 40px;
.paddingBottom50
padding-bottom: 50px;
.paddingBottom60
padding-bottom: 60px;
.paddingBottom70
padding-bottom: 70px;
.paddingBottom80
padding-bottom: 80px;
.paddingBottom90
padding-bottom: 90px;
.paddingBottom100
padding-bottom: 100px;
.paddingBottom200
padding-bottom: 200px;
.paddingBottom300
padding-bottom: 300px;
.paddingBottom400
padding-bottom: 400px;
.paddingRight5
padding-right: 5px;
.paddingRight10
padding-right: 10px;
.paddingRight12
padding-right: 12px;
.paddingRight14
padding-right: 14px;
.paddingRight16
padding-right: 16px;
.paddingRight18
padding-right: 18px;
.paddingRight20
padding-right: 20px;
.paddingRight30
padding-right: 30px;
.paddingRight40
padding-right: 40px;
.paddingRight50
padding-right: 50px;
.paddingRight60
padding-right: 60px;
.paddingRight70
padding-right: 70px;
.paddingRight80
padding-right: 80px;
.paddingRight90
padding-right: 90px;
.paddingRight100
padding-right: 100px;
.paddingRight150
padding-right: 150px;
.paddingRight200
padding-right: 200px;
.paddingRight300
padding-right: 300px;
.paddingRight400
padding-right: 400px;
.paddingLeft0
padding-left: 0px;
.paddingLeft2
padding-left: 2px;
.paddingLeft4
padding-left: 4px;
.paddingLeft5
padding-left: 5px;
.paddingLeft6
padding-left: 6px;
.paddingLeft8
padding-left: 8px;
.paddingLeft10
padding-left: 10px;
.paddingLeft12
padding-left: 12px;
.paddingLeft14
padding-left: 14px;
.paddingLeft16
padding-left: 16px;
.paddingLeft18
padding-left: 18px;
.paddingLeft20
padding-left: 20px;
.paddingLeft30
padding-left: 30px;
.paddingLeft40
padding-left: 40px;
.paddingLeft50
padding-left: 50px;
.paddingLeft60
padding-left: 60px;
.paddingLeft70
padding-left: 70px;
.paddingLeft80
padding-left: 80px;
.paddingLeft90
padding-left: 90px;
.paddingLeft100
padding-left: 100px;
.paddingLeft150
padding-left: 150px;
.paddingLeft200
padding-left: 200px;
.paddingLeft300
padding-left: 300px;
.paddingLeft400
padding-left: 400px;
/**
* margin-Row
* 左右两边
*/
.marginRow0
margin-left: 0;
margin-right: 0;
.marginRow5
margin-left: 5px;
margin-right: 5px;
.marginRow10
margin-left: 10px;
margin-right: 10px;
.marginRow12
margin-left: 12px;
margin-right: 12px;
.marginRow14
margin-left: 14px;
margin-right: 14px;
.marginRow16
margin-left: 16px;
margin-right: 16px;
.marginRow18
margin-left: 18px;
margin-right: 18px;
.marginRow20
margin-left: 20px;
margin-right: 20px;
.marginRow30
margin-left: 30px;
margin-right: 30px;
.marginRow40
margin-left: 40px;
margin-right: 40px;
.margin0Auto
margin: 0 auto;
/**
* Margin-Col
* 上下两边
*/
.marginCol1
margin-top: 1px;
margin-bottom: 1px;
.marginCol2
margin-top: 2px;
margin-bottom: 2px;
.marginCol4
margin-top: 4px;
margin-bottom: 4px;
.marginCol5
margin-top: 5px;
margin-bottom: 5px;
.marginCol6
margin-top: 6px;
margin-bottom: 6px;
.marginCol8
margin-top: 8px;
margin-bottom: 8px;
.marginCol10
margin-top: 10px;
margin-bottom: 10px;
.marginCol20
margin-top: 20px;
margin-bottom: 20px;
.marginCol30
margin-top: 30px;
margin-bottom: 30px;
.marginCol40
margin-top: 40px;
margin-bottom: 40px;
.marginCol50
margin-top: 50px;
margin-bottom: 50px;
.marginCol60
margin-top: 60px;
margin-bottom: 60px;
.marginCol70
margin-top: 70px;
margin-bottom: 70px;
.marginCol80
margin-top: 80px;
margin-bottom: 80px;
.marginCol90
margin-top: 90px;
margin-bottom: 90px;
.marginCol100
margin-top: 100px;
margin-bottom: 100px;
/**
* margin
*/
.margin0
margin: 0!important;
.marginTop1
margin-top: 1px;
.marginTop2
margin-top: 2px;
.marginTop3
margin-top: 3px;
.marginTop4
margin-top: 4px;
.marginTop5
margin-top: 5px;
.marginTop10
margin-top: 10px;
.marginTop20
margin-top: 20px;
.marginTop30
margin-top: 30px;
.marginTop40
margin-top: 40px;
.marginTop50
margin-top: 50px;
.marginTop100
margin-top: 100px;
.marginTop200
margin-top: 200px;
.marginTop300
margin-top: 300px;
/**
* margin 负数
*/
.marginTop-5
margin-top: -5px;
.marginTop-10
margin-top: -10px;
.marginTop-15
margin-top: -15px;
.marginTop-20
margin-top: -20px;
.marginTop-25
margin-top: -25px;
.marginTop-30
margin-top: -30px;
.marginTop-32
margin-top: -32px;
.marginTop-34
margin-top: -34px;
.marginTop-35
margin-top: -35px;
.marginTop-40
margin-top: -40px;
.marginTop-45
margin-top: -45px;
.marginTop-50
margin-top: -50px;
.marginTop-60
margin-top: -60px;
.marginTop-80
margin-top: -80px;
.marginTop-100
margin-top: -100px;
/**
* Margin 单边 - 负数
*/
.marginBottom-2
margin-bottom: -2px;
.marginBottom-4
margin-bottom: -4px;
.marginBottom-6
margin-bottom: -6px;
.marginBottom-8
margin-bottom: -8px;
/**
* Margin 单边
*/
.marginBottom0
margin-bottom: 0!important;
.marginBottom2
margin-bottom: 2px;
.marginBottom4
margin-bottom: 4px;
.marginBottom6
margin-bottom: 6px;
.marginBottom8
margin-bottom: 8px;
.marginBottom10
margin-bottom: 10px;
.marginBottom20
margin-bottom: 20px;
.marginBottom30
margin-bottom: 30px;
.marginBottom40
margin-bottom: 40px;
.marginBottom50
margin-bottom: 50px;
.marginBottom60
margin-bottom: 60px;
.marginBottom70
margin-bottom: 70px;
.marginBottom80
margin-bottom: 80px;
.marginBottom90
margin-bottom: 90px;
.marginBottom100
margin-bottom: 100px;
.marginRight0
margin-right: 0!important;
.marginRight2
margin-right: 2px;
.marginRight4
margin-right: 4px;
.marginRight6
margin-right: 6px;
.marginRight8
margin-right: 8px;
.marginRight10
margin-right: 10px;
.marginRight20
margin-right: 20px;
.marginRight30
margin-right: 30px;
.marginRight40
margin-right: 40px;
.marginRight50
margin-right: 50px;
.marginRight60
margin-right: 60px;
.marginRight70
margin-right: 70px;
.marginRight80
margin-right: 80px;
.marginRight90
margin-right: 90px;
.marginRight100
margin-right: 100px;
.marginTop2
margin-top: 2px;
.marginTop4
margin-top: 4px;
.marginTop6
margin-top: 6px;
.marginTop8
margin-top: 8px;
.marginTop10
margin-top: 10px;
.marginTop20
margin-top: 20px;
.marginTop30
margin-top: 30px;
.marginTop40
margin-top: 40px;
.marginTop50
margin-top: 50px;
.marginTop60
margin-top: 60px;
.marginTop70
margin-top: 70px;
.marginTop80
margin-top: 80px;
.marginTop90
margin-top: 90px;
.marginTop100
margin-top: 100px;
/**
* Font weight
*/
.weightBold
font-weight: bold;
.weightNormal
font-weight: normal;
/**
* Line height
*/
.lineHeight1
line-height: 1;
.lineHeight1d2
line-height: 1.2;
.lineHeight1d4
line-height: 1.4;
.lineHeight1d6
line-height: 1.6;
.lineHeight1d8
line-height: 1.8;
.lineHeight2
line-height: 2;
.lineHeight2d2
line-height: 2.2;
.lineHeight2d4
line-height: 2.4;
.lineHeight2d6
line-height: 2.6;
.lineHeight2d8
line-height: 2.8;
.lineHeight3
line-height: 3;
.lineHeight5
line-height: 5;
/* 宽、高 */
.img-fluid
width: 100%;
height: auto;
.img5,
.square5
width: 5px;
height: 5px;
.img4,
.square4
width: 4px;
height: 4px;
.img6,
.square6
width: 6px;
height: 6px;
.img8,
.square8
width: 8px;
height: 8px;
.img10,
.square10
width: 10px;
height: 10px;
.img12,
.square12
width: 12px;
height: 12px;
.img14,
.square14
width: 14px;
height: 14px;
.img16,
.square16
width: 16px;
height: 16px;
.img18,
.square18
width: 18px;
height: 18px;
.img20,
.square20
width: 20px;
height: 20px;
.img30,
.square30
width: 30px;
height: 30px;
.img40,
.square40
width: 40px;
height: 40px;
.img50,
.square50
width: 50px;
height: 50px;
.img60,
.square60
width: 60px;
height: 60px;
.img70,
.square70
width: 70px;
height: 70px;
.img80,
.square80
width: 80px;
height: 80px;
.img90,
.square90
width: 90px;
height: 90px;
.img100,
.square100
width: 100px;
height: 100px;
.img200,
.square200
width: 200px;
height: 200px;
.img300,
.square300
width: 300px;
height: 300px;
.img400,
.square400
width: 400px;
height: 400px;
.img500,
.square500
width: 500px;
height: 500px;
/**
* Height
* more in dynamicStyle.css
*/
.heightAuto
height: auto;
/**
* 绝对 像素px
*/
.height10
height: 10px;
.height12
height: 12px;
.height14
height: 14px;
.height16
height: 16px;
.height18
height: 18px;
.height20
height: 20px;
.height22
height: 22px;
.height24
height: 24px;
.height26
height: 26px;
.height28
height: 28px;
.height30
height: 30px;
.height40
height: 40px;
.height50
height: 50px;
.height60
height: 60px;
.height70
height: 70px;
.height80
height: 80px;
.height90
height: 90px;
.height100
height: 100px;
.height120
height: 120px;
.height140
height: 140px;
.height150
height: 150px;
.height200
height: 200px;
.height300
height: 300px;
.height400
height: 400px;
.height500
height: 500px;
.height550
height: 550px;
.height1000
height: 1000px;
/**
* Height
*/
.height10pct
height: 10%;
.height20pct
height: 20%;
.height30pct
height: 30%;
.height40pct
height: 40%;
.height50pct
height: 50%;
.height60pct
height: 60%;
.height70pct
height: 70%;
.height80pct
height: 80%;
.height85pct
height: 85%;
.height90pct
height: 90%;
.height100pct
height: 100%;
.height110pct
height: 110%;
/**
* min-height
*/
.minHeight10px
min-height: 10px;
.minHeight20px
min-height: 20px;
.minHeight30px
min-height: 30px;
.minHeight40px
min-height: 40px;
.minHeight50px
min-height: 50px;
.minHeight60px
min-height: 60px;
.minHeight70px
min-height: 70px;
.minHeight80px
min-height: 80px;
.minHeight90px
min-height: 90px;
.minHeight100px
min-height: 100px;
.minHeight140px
min-height: 140px;
.minHeight150px
min-height: 150px;
.minHeight200px
min-height: 200px;
.minHeight300px
min-height: 300px;
.minHeight400px
min-height: 400px;
.minHeight500px
min-height: 500px;
.minHeight600px
min-height: 600px;
.minHeight700px
min-height: 700px;
.minHeight800px
min-height: 800px;
.minHeight900px
min-height: 900px;
.minHeight1000px
min-height: 1000px;
.minHeight100pct
min-height: 100%;
/**
* max-height
*/
.maxHeight50
max-height: 50px;
.maxHeight60
max-height: 60px;
.maxHeight100
max-height: 100px;
.maxHeight200
max-height: 200px;
.maxHeight300
max-height: 300px;
.maxHeight400
max-height: 400px;
.maxHeight500
max-height: 500px;
.maxHeight100pct
max-height: 100%;
/**
* Shadow
* https://blog.csdn.net/qq_34400736/article/details/119350056
* https://blog.csdn.net/qq_44747461/article/details/108489779
* https://box-shadow.org/
*/
.littleShadow
box-shadow: 3px 3px 6px #B0B0B0;
.littleShadowAround
box-shadow: 8px 8px 8px -8px #9c9c9c,
-8px 8px 8px -8px #9c9c9c;
.littleShadowAroundAndTop
box-shadow: 0 0 5px 0 #c8c8c8;
.littleShadowAroundAndTopDarker
box-shadow: 0 0 10px 0 #9c9c9c;
.bigShadow
box-shadow: 8px 8px 12px #B0B0B0;
.noShadow .bigShadow
box-shadow: none;
/**
* 鼠标样式
*/
.cursorPointer
cursor: pointer;
/**
* border-radius
*/
.radius0
border-radius: 0px!important;
.radius2
border-radius: 2px!important;
.radius4
border-radius: 4px!important;
.radius6
border-radius: 6px!important;
.radius8
border-radius: 8px!important;
.radius10
border-radius: 10px!important;
.radius20
border-radius: 20px!important;
.radius30
border-radius: 30px!important;
.radius40
border-radius: 40px!important;
.radius50
border-radius: 50px!important;
.radius50pct
border-radius: 50%!important;
.radius8TopSides
border-top-left-radius: 8px!important;
border-top-right-radius: 8px!important;
.radius8BottomSides
border-bottom-left-radius: 16px!important;
border-bottom-right-radius: 16px!important;
/* border-collapse:separate; */
/* over-flow */
.overflowHidden
overflow: hidden;
/**
* position
*/
.positionRelative
position: relative;
.positionAbsolute
position: absolute;
.positionFixed
position: fixed;
.topRightBottomLeft0
top: 0;
right: 0;
bottom: 0;
left: 0;
/**
* 相对
*/
.width1pct
width: 1%!important;
.width2pct
width: 2%!important;
.width3pct
width: 3%!important;
.width4pct
width: 4%!important;
.width5pct
width: 5%!important;
.width6pct
width: 6%!important;
.width7pct
width: 7%!important;
.width8pct
width: 8%!important;
.width9pct
width: 9%!important;
.width10pct
width: 10%!important;
.width11pct
width: 11%!important;
.width12pct
width: 12%!important;
.width13pct
width: 13%!important;
.width14pct
width: 14%!important;
.width15pct
width: 15%!important;
.width16pct
width: 16%!important;
.width17pct
width: 17%!important;
.width18pct
width: 18%!important;
.width19pct
width: 19%!important;
.width20pct
width: 20%!important;
.width21pct
width: 21%!important;
.width22pct
width: 22%!important;
.width23pct
width: 23%!important;
.width24pct
width: 24%!important;
.width25pct
width: 25%!important;
.width26pct
width: 26%!important;
.width27pct
width: 27%!important;
.width28pct
width: 28%!important;
.width29pct
width: 29%!important;
.width30pct
width: 30%!important;
.width31pct
width: 31%!important;
.width32pct
width: 32%!important;
.width33pct
width: 33%!important;
.width34pct
width: 34%!important;
.width35pct
width: 35%!important;
.width36pct
width: 36%!important;
.width37pct
width: 37%!important;
.width38pct
width: 38%!important;
.width39pct
width: 39%!important;
.width40pct
width: 40%!important;
.width41pct
width: 41%!important;
.width42pct
width: 42%!important;
.width43pct
width: 43%!important;
.width44pct
width: 44%!important;
.width45pct
width: 45%!important;
.width46pct
width: 46%!important;
.width47pct
width: 47%!important;
.width48pct
width: 48%!important;
.width49pct
width: 49%!important;
.width50pct
width: 50%!important;
.width51pct
width: 51%!important;
.width52pct
width: 52%!important;
.width53pct
width: 53%!important;
.width54pct
width: 54%!important;
.width55pct
width: 55%!important;
.width56pct
width: 56%!important;
.width57pct
width: 57%!important;
.width58pct
width: 58%!important;
.width59pct
width: 59%!important;
.width60pct
width: 60%!important;
.width61pct
width: 61%!important;
.width62pct
width: 62%!important;
.width63pct
width: 63%!important;
.width64pct
width: 64%!important;
.width65pct
width: 65%!important;
.width66pct
width: 66%!important;
.width67pct
width: 67%!important;
.width68pct
width: 68%!important;
.width69pct
width: 69%!important;
.width70pct
width: 70%!important;
.width71pct
width: 71%!important;
.width72pct
width: 72%!important;
.width73pct
width: 73%!important;
.width74pct
width: 74%!important;
.width75pct
width: 75%!important;
.width76pct
width: 76%!important;
.width77pct
width: 77%!important;
.width78pct
width: 78%!important;
.width79pct
width: 79%!important;
.width80pct
width: 80%!important;
.width81pct
width: 81%!important;
.width82pct
width: 82%!important;
.width83pct
width: 83%!important;
.width84pct
width: 84%!important;
.width85pct
width: 85%!important;
.width86pct
width: 86%!important;
.width87pct
width: 87%!important;
.width88pct
width: 88%!important;
.width89pct
width: 89%!important;
.width90pct
width: 90%!important;
.width91pct
width: 91%!important;
.width92pct
width: 92%!important;
.width93pct
width: 93%!important;
.width94pct
width: 94%!important;
.width95pct
width: 95%!important;
.width96pct
width: 96%!important;
.width97pct
width: 97%!important;
.width98pct
width: 98%!important;
.width99pct
width: 99%!important;
.width100pct
width: 100%!important;
.width110pct
width: 110%!important;
/**
* 绝对 像素px
*/
.width10px
width: 10px;
.width12px
width: 12px;
.width14px
width: 14px;
.width16px
width: 16px;
.width18px
width: 18px;
.width20px
width: 20px;
.width22px
width: 22px;
.width24px
width: 24px;
.width26px
width: 26px;
.width28px
width: 28px;
.width30px
width: 30px;
.width40px
width: 40px;
.width42px
width: 42px;
.width44px
width: 44px;
.width45px
width: 45px;
.width46px
width: 46px;
.width48px
width: 48px;
.width50px
width: 50px;
.width60px
width: 60px;
.width70px
width: 70px;
.width80px
width: 80px;
.width90px
width: 90px;
.width100px
width: 100px;
.width120px
width: 120px;
.width110px
width: 110px;
.width130px
width: 130px;
.width140px
width: 140px;
.width150px
width: 150px;
.width160px
width: 160px;
.width180px
width: 180px;
.width200px
width: 200px;
.width300px
width: 300px;
.width400px
width: 400px;
.maxWidth20
max-width: 20px;
.maxWidth40
max-width: 40px;
.maxWidth50
max-width: 50px;
.maxWidth60
max-width: 60px;
.maxWidth80
max-width: 80px;
.maxWidth100
max-width: 100px;
.maxWidth200
max-width: 200px;
.maxWidth300
max-width: 300px;
.maxWidth400
max-width: 400px;
.maxWidth500
max-width: 500px;
.maxWidth600
max-width: 600px;
.maxWidth1000
max-width: 1000px;
.maxWidth90pct
max-width: 90%;
.maxWidth100pct
max-width: 100%;
/* 最小宽度 */
.minWidth20
min-width: 20px;
.minWidth30
min-width: 30px;
.minWidth40
min-width: 40px;
.minWidth50
min-width: 50px;
.minWidth60
min-width: 60px;
.minWidth80
min-width: 80px;
.minWidth100
min-width: 100px;
.minWidth200
min-width: 200px;
.minWidth300
min-width: 300px;
.minWidth400
min-width: 400px;
.minWidth500
min-width: 500px;
.minWidth600
min-width: 600px;
.minWidth1000
min-width: 1000px;
/**
* Border
*/
.borderNone
border: none;
.border1PxForTheme
border: 1px #FF9304 solid;
.border2PxForTheme
border: 2px #FF9304 solid;
.border3PxForTheme
border: 3px #FF9304 solid;
.border1Px000000
border: 1px #000 solid;
.border1PxGreen
border: 1px #00aa00 solid;
.border1Px4A84FF
border: 1px #4A84FF solid;
.border1PxB6B6B6
border: 1px #B6B6B6 solid;
.border1PxB0B0B0
border: 1px #B0B0B0 solid;
.border1PxBlue
border: 1px blue solid;
.border1PxWhite
border: 1px white solid;
.border1PxRed
border: 1px red solid;
.border1PxEEEEEE
border: 1px #EEEEEE solid;
.border1PxDADADA
border: 1px #DADADA solid;
.border1PxD8D8D8
border: 1px #D8D8D8 solid;
.border1PxE8E8E8
border: 1px #e8e8e8 solid;
.border1PxF8F8F8
border: 1px #F8F8F8 solid;
.border1PxCCCCCC
border: 1px #cccccc solid;
.border1PxDashedCCCCCC
border: 1px #cccccc dashed;
.border2PxDashedCCCCCC
border: 2px #cccccc dashed;
/**
* Border单边
*/
.borderTop2pxForTheme
border-top: 2px #FF9304 solid;
.borderTop1pxFFFFFF
border-top: 1px #FFFFFF solid;
.borderTop1pxEEEEEE
border-top: 1px #EEEEEE solid;
.borderTop2pxFFFFFF
border-top: 2px #FFFFFF solid;
.borderTop1pxCCCCCC
border-top: 1px #CCCCCC solid;
.borderTop2pxCCCCCC
border-top: 2px #CCCCCC solid;
.borderBottom1pxF4F4F4
border-bottom: 1px #f4f4f4 solid;
.borderBottom1pxCCCCCC
border-bottom: 1px #CCCCCC solid;
.borderBottom1pxDDDDDD
border-bottom: 1px #DDDDDD solid;
.borderBottom1pxEEEEEE
border-bottom: 1px #EEEEEE solid;
.borderBottom1pxBlack
border-bottom: 1px black solid;
.borderLeft1pxFFFFFF
border-left: 1px #FFFFFF solid;
.borderLeft1pxCCCCCC
border-left: 1px #CCCCCC solid;
.borderLeft1pxF4F4F4
border-left: 1px #f4f4f4 solid;
.borderRight1pxFFFFFF
border-right: 1px #FFFFFF solid;
.borderRight1pxCCCCCC
border-right: 1px #CCCCCC solid;
.borderRight1pxF4F4F4
border-right: 1px #f4f4f4 solid;
/**
* z-index
*/
.zIndex1
z-index: 1!important;
.zIndex2
z-index: 2!important;
.zIndex3
z-index: 3!important;
.zIndex4
z-index: 4!important;
.zIndex5
z-index: 4!important;
.zIndex99
z-index: 99!important;
.zIndex100
z-index: 100!important;
/* 换行 */
.lineBreaking,
.autoLineBreaking
white-space: pre-line;
word-wrap: break-word;
.lineBreakingEnglish
word-break: break-all;
.noLineBreaking
white-space: nowrap;
.flexNoLineBreaking
flex-wrap: nowrap;
/* 不换行 */
.innerNoLineBreaking > *
white-space: nowrap;
/* 字体间距 */
.letterSpace2
letter-spacing: 2px;
.letterSpace4
letter-spacing: 4px;
.letterSpace6
letter-spacing: 6px;
.letterSpace8
letter-spacing: 8px;
.letterSpace10
letter-spacing: 10px;
/* 图片灰度 */
.imgGrayScale0pct
-webkit-filter: grayscale(100%);
filter: grayscale(0%);
.imgGrayScale10pct
-webkit-filter: grayscale(100%);
filter: grayscale(10%);
.imgGrayScale20pct
-webkit-filter: grayscale(100%);
filter: grayscale(20%);
.imgGrayScale30pct
-webkit-filter: grayscale(100%);
filter: grayscale(30%);
.imgGrayScale40pct
-webkit-filter: grayscale(100%);
filter: grayscale(40%);
.imgGrayScale50pct
-webkit-filter: grayscale(100%);
filter: grayscale(50%);
.imgGrayScale60pct
-webkit-filter: grayscale(100%);
filter: grayscale(60%);
.imgGrayScale70pct
-webkit-filter: grayscale(100%);
filter: grayscale(70%);
.imgGrayScale80pct
-webkit-filter: grayscale(100%);
filter: grayscale(80%);
.imgGrayScale90pct
-webkit-filter: grayscale(100%);
filter: grayscale(90%);
.imgGrayScale100pct
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
/* 图片hover灰度 */
.imgGrayScale0pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(0%);
.imgGrayScale10pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(10%);
.imgGrayScale20pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(20%);
.imgGrayScale30pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(30%);
.imgGrayScale40pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(40%);
.imgGrayScale50pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(50%);
.imgGrayScale60pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(60%);
.imgGrayScale70pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(70%);
.imgGrayScale80pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(80%);
.imgGrayScale90pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(90%);
.imgGrayScale100pctHover:hover
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
/**
* 隐藏伪类
*/
.domNoBeforeAndAfter:before,
.domNoBeforeAndAfter:after
display: none!important;
/**
* 对齐
*/
.text-center
text-align: center;
.text-left
text-align: left;
.text-right
text-align: right;
.clearBoth
clear: both;
/**
* 缩放
*/
.scale10
transform: scale(0.1);
.scale20
transform: scale(0.2);
.scale30
transform: scale(0.3);
.scale40
transform: scale(0.4);
.scale50
transform: scale(0.5);
.scale60
transform: scale(0.6);
.scale70
transform: scale(0.7);
.scale80
transform: scale(0.8);
.scale90
transfo以上是关于vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面的主要内容，如果未能解决你的问题，请参考以下文章