/*12.15添加页面除文本框所有字体为不可选中：user-select: none;*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; user-select: none; }
/* reset-----http://nec.netease.com/ */
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu { margin: 0; padding: 0; }
header, footer, section, article, aside, nav, hgroup, address, figure, figcaption, menu, details { display: block; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th { text-align: left; font-weight: normal; }
html, body, fieldset, img, iframe, abbr { border: 0; }
i, cite, var, address, dfn { font-style: normal; }
[hidefocus], summary { outline: 0; }
li { list-style: none; }
h1, h2, h3, h4, h5, h6, small { font-size: 100%; }
sup, sub { font-size: 83%; }
pre, code, kbd, samp { font-family: inherit; }
q:before, q:after { content: none; }
textarea { overflow: auto; resize: none; }
label, summary { cursor: default; }
a, button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, strong, b { font-weight: bold; }
del, ins, u, s, a, a:hover { text-decoration: none; }
body, textarea, input, button, select, keygen, legend { font: 14px/1.14 arial,\5b8b\4f53; color: #333; outline: 0; font-family: "微软雅黑"; }
iframe { background: #F7F8FC; }
textarea { overflow: auto; line-height: 1.5; }
a, a:hover { color: #333; }
html { overflow: auto; height: 100%; width: 100%; }
body { background-color: #F7F8FC; height: 100%; width: 100%; }
input, textarea { border: none; padding: 0 8px; }
	input::-ms-clear { display: none; }
/*function-----http://nec.netease.com/*/
.f-ib { display: inline-block; *display: inline; *zoom: 1; }
.f-dn { display: none; }
.f-fl { float: left; }
.f-fr { float: right; }
.f-ff0 { font-family: arial,\5b8b\4f53; }
.f-ff1 { font-family: "Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53; }
.f-toe { overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; }
.f-tal { text-indent: 3px; text-align: left; }
.f-tac { text-align: center; }
.f-tar { text-align: right; }
.clearboth { height: 1px; border: 0; clear: both; }
[v-cloak] { display: none; }
#MainDiv { width: 100%; height: 100%; padding: 40px; }
/*———————————————谷歌兼容 start菜单栏滚动条——————————————— */
*::-webkit-scrollbar { width: 7px; height: 7px; background-color: #f5f2f2; border-radius: 10px; }
*::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); border-radius: 10px; }
*::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.15); -webkit-box-shadow: inset 0 0 6px #e5e0e0; }
	*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
*::-webkit-scrollbar-corner { background-color: #f5f2f2; }
/*———————————————end———————————————————————————*/
/*表格样式*/
.table_title_box, .table_body_box { width: 100%; text-align: center; border-spacing: 10px; border-collapse: inherit; }
	.table_title_box td { background: #1662CC; border-radius: 6px; padding: 12px 0; border-spacing: 12px; color: #FFF; font-weight: bold; font-size: 17px; }
	.table_body_box td { background: #F2F8FF; border-radius: 6px; padding: 8px 0 }
/*-----------------------------------按钮样式-----------------------------------*/
.btn-wrapper { padding: 0 10px; }
	.btn-wrapper.left { float: left; padding: 0; }
	.btn-wrapper.end { text-align: end; }
.btn { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #FFF; border: 1px solid #0077ff; color: #0077ff; -webkit-appearance: none; text-align: center; outline: 0; margin: 0; -webkit-transition: .1s; transition: .1s; font-weight: 500; padding: 8px 17px; border-radius: 5px; }
	.btn.primary { color: #FFF; background-color: #0077ff; }
	.btn.disabled { border-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15); }
	.btn.small { font-size: 12px; }
	.btn.full { width: 100%; }
	.btn + .btn { margin-left: 15px; }
.icons { margin-right: 7px; height: 12px; width: 12px; background: url(../images/HomepageOperateIcons.png) no-repeat; display: inline-block; vertical-align: -1px; }
.plus { background-position-y: -12px; }
.trash { background-position-x: -12px; }
.check { background-position-x: -24px; }
.pencil { height: 12px; width: 10px; background: url(../images/EditIcon.png) no-repeat; margin-right: 2px; }
.unlock { background-position-x: -36px; }
/*-----------------------------------清除浮动-----------------------------------*/
.clearfix { zoom: 1; }
	.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
/*--------------------------------教师端导航栏--------------------------------*/
.breadcrumb { height: 32px; line-height: 1; }
	.breadcrumb::after, .breadcrumb::before { display: table; content: ""; }
.breadcrumb-item { height: 32px; display: flex; align-items: center; float: left; position: relative; margin-left: -5px; cursor: pointer; }
	.breadcrumb-item:first-child { margin-left: 0; }
		.breadcrumb-item:first-child .arrow-back { display: none }
		.breadcrumb-item:first-child .breadcrumb-item-inner { border-left: 1px solid rgba(0,0,0,0.15); }
	.breadcrumb-item:last-child .arrow-front { display: none }
	.breadcrumb-item:last-child .breadcrumb-item-inner { border-right: 1px solid rgba(0,0,0,0.15); }
	.breadcrumb-item.active .breadcrumb-item-inner { background-color: #0077ff; color: #ffffff; border: none; }
	.breadcrumb-item.active .arrow-back { border-top: 16px solid #0077ff; border-bottom: 16px solid #0077ff; border-right: 1px solid #0077ff; }
		.breadcrumb-item.active .arrow-back::before { display: none; }
		.breadcrumb-item.active .arrow-back::after { display: none; }
	.breadcrumb-item.active .arrow-front { border-left: 10px solid #0077ff; }
		.breadcrumb-item.active .arrow-front::before { display: none; }
		.breadcrumb-item.active .arrow-front::after { display: none; }
.arrow-back { content: ""; display: inline-block; border-top: 16px solid rgba(0,0,0,0.15); border-left: 10px solid #f7f8fc; border-right: 1px solid rgba(0,0,0,0.15); border-bottom: 16px solid rgba(0,0,0,0.15); }
	.arrow-back::before { content: ""; display: inline-block; border-top: 16px solid #ffffff; border-left: 10px solid transparent; border-right: 0px solid transparent; border-bottom: 16px solid transparent; position: absolute; left: 2px; top: 1px; }
	.arrow-back::after { content: ""; display: inline-block; border-top: 16px solid transparent; border-left: 10px solid transparent; border-right: 0px solid transparent; border-bottom: 16px solid #ffffff; position: absolute; left: 2px; top: -1px; }
.breadcrumb-item-inner { width: 150px; height: 32px; line-height: 32px; font-size: 14px; text-align: center; color: rgba(0,0,0,0.65); background-color: #ffffff; border-top: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.15); z-index: 2; }
.arrow-front { border-top: 16px solid transparent; border-left: 10px solid rgba(0,0,0,0.15); border-right: 0 solid transparent; border-bottom: 16px solid transparent; margin-left: 0; z-index: 1; }
	.arrow-front::before { content: ""; display: inline-block; border-top: 16px solid #ffffff; border-right: 10px solid transparent; border-left: 0px solid transparent; border-bottom: 16px solid transparent; position: absolute; right: 1px; top: 16px; }
	.arrow-front::after { content: ""; display: inline-block; border-bottom: 16px solid #ffffff; border-right: 10px solid transparent; border-left: 0px solid transparent; border-top: 16px solid transparent; position: absolute; right: 1px; bottom: 16px; }
/*
布局如下
<div class="breadcrumb">
	<span class="breadcrumb-item" v-bind:class="{'active':item.active}" v-for="(item, index) in navList" :key="item.id" @click="navigation(index)">
	    <span class="arrow-back"></span>
	    <span class="breadcrumb-item-inner">{{item.title}}</span>
	    <span class="arrow-front"></span>
	</span>
</div>
数据格式
[{
    id: 1,
    title: '基本信息',
    active: false
}, {
	id: 2,
	title: '背景资料',
	active: true
}, {
	id: 3,
	title: '实验任务',
	active: false
}, {
	id: 4,
	title: '进度与分数设置',
	active: false
}, {
	id: 5,
	title: '工具与业务系统配置',
	active: false
}]
*/

/*--------------------------------教师端子页面布局--------------------------------*/
.flex { display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.flex-v { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.content-wrapper { min-width: 0; height: calc(100% - 52px); }
.aside { width: 240px; height: 100%; padding: 20px 10px 20px 20px; }
	.aside + .content { padding-left: 10px; }
.content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 20px; height: 100%; }
	.content.flow { overflow-y: auto; }
	.content::-webkit-scrollbar { display: none; }
	.content + .content { padding-left: 40px; }
	.content .content { padding: 0; }
		.content .content + .content { padding-left: 0; padding-top: 20px; }
.title-wrapper { height: 32px; margin-bottom: 20px; }
	.title-wrapper > .btn-wrapper { float: right; padding: 0; }
.title { height: 32px; line-height: 32px; font-size: 20px; font-weight: bold; float: left; }
	.title + .btn-wrapper { margin-left: 50px; }
.white-board { height: 100%; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 0px 20px 0px rgba(11, 54, 118, 0.1); overflow-y: hidden; }
	.white-board.has-title { height: calc(100% - 52px); }
	.white-board + .white-board { margin-top: 20px; }
	.white-board textarea { border: solid 1px rgba(0, 0, 0, 0.15); }
.line-wrapper + .line-wrapper { margin-top: 20px; }
.line-wrapper textarea { border: none; }
.line-wrapper.middle > * { vertical-align: middle; }
/*.line-wrapper.middle .label { line-height: 32px; }*/
.line-wrapper .label { padding-left: 7px; margin-right: 14px; display: inline-block; }
.line-wrapper .item { border-radius: 2px; border: solid 1px rgba(0, 0, 0, 0.15); height: 32px; vertical-align: top; font-size: 14px; display: inline-block; }
.line-wrapper .suffix { position: absolute; right: 0; }
.line-wrapper input, .line-wrapper textarea { width: 100%; height: 100%; }
.line-wrapper textarea { padding-top: 7px; }
.line-wrapper .img-wrapper { width: 300px; height: 230px; border: solid 1px #DDD; display: inline-block; vertical-align: top; border-radius: 6px; }
.line-wrapper .btn { padding: 7px 14px; border-radius: 2px; border: solid 1px rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.45); }
.line-wrapper .tips { color: rgba(0, 0, 0, 0.65); }
.label.required { padding-left: 0px; margin-top: 3px; }
	.label.required:before { content: '*'; color: #FF0000; font-size: 23px; width: 8px; height: 8px; line-height: 17px; display: block; float: left; margin-top: 4px; margin-right: 3px; }
/*----------------------------------------节点树----------------------------------------*/
.node-tree { margin-top: 10px; color: rgba(0,0,0,0.65); }
.label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/*.node-wrapper + .node-wrapper { margin-bottom: 5px; }*/
.node { width: 100%; height: 32px; line-height: 1; white-space: nowrap; cursor: pointer; background: #F7F7F7; -webkit-appearance: none; outline: 0; margin-bottom: 5px; -webkit-transition: .1s; transition: .1s; font-weight: 500; padding: 7px 13px; border-radius: 3px; position: relative; }
	.node:hover { background-color: #E5EEFB; color: #0077FF; }
		.node:hover .setting { display: block; }
	.node.child { width: 90%; margin-left: 10%; }
	.node.child1 { width: 80%; margin-left: 20%; }

	.node.active { background-color: #E5EEFB; color: #0077FF; }
	.node .label { width: 80%; height: 17px; }
	.node.child .label { width: 90%; color: }
	.node .suffix { height: 32px; position: absolute; right: 0; top: 0; padding: 11px 5px; }
		.node .suffix .treeicon { float: left; margin: 0px 4px; margin-top: 2px; text-align: center; outline: 0; width: 10px; height: 10px; background-image: url('../images/CatalogOperateIcons.png'); }
		.node .suffix .icon { float: left; margin: 0px 4px; margin-top: -2px; text-align: center; outline: 0; width: 14px; height: 14px; }
		.node .suffix .treeiconSliders { background-position-y: -10px; background-position-x: -50px; margin-top: 0px; }
.treeEdit { background-position-x: 0px; }
.treePlus { background-position-x: -10px; }
.treeTrash { background-position-x: -20px; }
.treeArrowUp { background-position-x: -30px; }
.treeArrowDown { background-position-x: -40px; }
.node .setting { display: none; }
	.node .setting.active { display: block; }
.node .menu-wrapper { position: absolute; top: 30px; right: 0; padding: 5px 0; margin: 0; min-width: 98px; max-width: 98px; box-shadow: none; }
.node .menu { width: 100%; font-size: 12px; }
.node .menu-item { width: 100%; height: 24px; line-height: 1; padding-top: 5px; padding-left: 3px; }
	.node .menu-item:hover { color: #0077FF; }
		.node .menu-item:hover .treeicon { background-position-y: -10px; }
	.node .menu-item .label { width: 66px; border-bottom: 1px solid #ECF2FC; float: left; padding-bottom: 5px; margin-left: 3px; }
	.node .menu-item:first-child { height: 19px; padding-top: 0; }
	.node .menu-item:last-child { height: 19px; }
		.node .menu-item:last-child .label { border-bottom: none; padding-bottom: 0; }

/*----------------------------------------展开收起动画----------------------------------------*/
.collapse-transition { -webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; }
/* DOM结构 用一下标签包裹
<transition name="collapse"
		v-on:before-enter="beforeExpandTransition"
		v-on:enter="expandTransition"
		v-on:after-enter="afterExpandTransition"
		v-on:before-leave="beforeCollapseTransition"
		v-on:leave="collapseTransition"
		v-on:after-leave="afterCollapseTransition" >
		<!--......-->
</transition >*/
/*并在Vue中添加以下方法
	expandTransition(el) {
			el.dataset.oldOverflow = el.style.overflow;
			if (el.scrollHeight !== 0) {
				el.style.height = el.scrollHeight + 'px';
			} else {
				el.style.height = ' ';
			}
			el.style.paddingTop = el.dataset.oldPaddingTop;
			el.style.paddingBottom = el.dataset.oldPaddingBottom;
			el.style.overflow = 'hidden';
		},
		afterExpandTransition(el) {
			el.classList.remove('collapse-transition');
			el.style.height = ' ';
			el.style.overflow = el.dataset.oldOverflow;
		},
		beforeCollapseTransition(el) {
			if (!el.dataset) el.dataset = {};
			el.dataset.oldPaddingTop = el.style.paddingTop;
			el.dataset.oldPaddingBottom = el.style.paddingBottom;
			el.dataset.oldOverflow = el.style.overflow;
			el.style.height = ' ';
			el.style.overflow = 'hidden'
		},
		collapseTransition(el) {
			if (el.scrollHeight !== 0) {
				el.classList.add('collapse-transition');
				el.style.height = 0;
				el.style.paddingTop = 0;
				el.style.paddingBottom = 0;
			} 
		},
		afterCollapseTransition(el) {
			el.classList.remove('collapse-transition');
			el.style.height = ' ';
			el.style.overflow = el.dataset.oldOverflow;
			el.style.paddingTop = el.dataset.oldPaddingTop;
			el.style.paddingBottom = el.dataset.oldPaddingBottom;
		}
*/

/*获取焦点时隐藏placeholder*/
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus::-ms-input-placeholder { color: transparent; }
textarea:focus::-webkit-input-placeholder { color: transparent; }
textarea:focus::-ms-input-placeholder { color: transparent; }


/*分页*/
.page_box { display: block; padding-top: 8px; margin: auto; }
	.page_box .page { height: 26px; line-height: 26px; /* border: solid 1px #D9D9D9; */ margin: 0 3px; border-radius: 3px; cursor: pointer; display: inline-block; }
		.page_box .page:hover a { background-color: #198cff; border-color: #198cff; color: #fff; }
	.page_box a { display: block; height: 26px; width: 64px; text-align: center; color: rgba(0, 0, 0, 0.65); font-size: 14px; border-radius: 3px; }
	.page_box .page[jp-role="page"] a { width: auto; padding: 0 8px; }
	.page_box .page.active { background-color: #198cff; }
		.page_box .page.active a { color: #fff; }
	.page_box .page.disabled a { color: #b7b5b5; cursor: default; background: transparent; }


/*白色背景带阴影样式*/
.moduleDiv { background: #fff; box-shadow: 0px 5px 10px 0px rgba(25, 140, 255, 0.1); border-radius: 5px; }
/*蓝色边框按钮*/
.border_Btn { background-color: #ffffff; border-radius: 5px; border: solid 1px #198cff; cursor: pointer; color: #198cff; text-align: center; }
	.border_Btn:hover { background-color: #198cff; border: solid 1px #198cff; color: #fff; }
/*蓝色背景按钮*/
.blue_Btn { background-color: #198cff; border: solid 1px #198cff; color: #fff; border-radius: 5px; text-align: center; cursor: pointer; }
	.blue_Btn:hover { background-color: #0865DF; border: solid 1px #0865DF; color: #fff; }
/*蓝色文字按钮*/
.blueColorBtn { cursor: pointer; color: #198cff; }
/*-------------学生端头部样式  蓝底标题栏---------*/
.MainDiv_tobbar { width: 100%; height: 64px; background-color: #198cff; line-height: 63px; }
.MainDiv_tobbar_font { height: 26px; font-size: 20px; font-weight: 700; line-height: 26px; letter-spacing: 1px; color: #ffffff; padding-left: 40px; display: inline-block; }
.MainDiv_tobbar_imageContainer { display: inline-block; float: right; }
.MainDiv_tobbar_icon { margin-right: 40px; cursor: pointer; vertical-align: middle; cursor: pointer; }
.MainDiv_tobbar_UserInformation { display: inline-block; vertical-align: top; }
.MainDiv_tobbar_UserInformation_UserName { width: 64px; height: 21px; font-size: 16px; line-height: 24px; color: #ffffff; vertical-align: middle; }
.MainDiv_tobbar_UserInformation_Userimg { vertical-align: middle; margin-right: 10px; }
/*布局*/
/*
    <div class="MainDiv_tobbar">
            <div class="MainDiv_tobbar_font">{{title}}</div>
            <div class="MainDiv_tobbar_imageContainer">
                <img src="images/BriefIntroduction.png" class="MainDiv_tobbar_icon" title="平台简介" />
                <img src="images/LearningCenter.png" class="MainDiv_tobbar_icon" title="学习中心">
                <img src="images/PerformanceAnalysis.png" class="MainDiv_tobbar_icon" title="成绩分析" />
                <img src="images/help.png" class="MainDiv_tobbar_icon" title="帮助" />
                <div class="MainDiv_tobbar_UserInformation MainDiv_tobbar_icon">
                    <img src="images/person.png" class="MainDiv_tobbar_UserInformation_Userimg">
                    <span class="MainDiv_tobbar_UserInformation_UserName">学生李明</span>
                </div>
                <img src="images/out.png" class="MainDiv_tobbar_icon" title="注销">
            </div>
        </div>
*/
/*-------------学生端头部样式  蓝底标题栏-----END----*/

/*--------------学生端头部样式  白底标题栏----------*/
.MainDiv_WhiteTopDiv { height: 80px; background-color: #ffffff; box-shadow: 0px 5px 10px 0px rgba(25, 140, 255, 0.1); text-align: center; line-height: 80px; }
.MainDiv_WhiteTopDiv_leftSpan { float: left; background-color: #ffffff; border-radius: 12px; border: solid 1px #198cff; height: 24px; line-height: 23px; margin-top: 26px; width: 100px; margin-left: 40px; color: #198cff; cursor: pointer; }
	.MainDiv_WhiteTopDiv_leftSpan i { margin-right: 5px; }
.MainDiv_WhiteTopDiv_centerSpan { font-size: 24px; font-weight: 700; color: #198cff; }
.MainDiv_WhiteTopDiv_rightSpan { float: right; height: 32px; background-color: #ffffff; border-radius: 4px; border: solid 1px #198cff; line-height: 32px; font-size: 14px; color: #198cff; width: 100px; margin-top: 22px; margin-right: 40px; cursor: pointer; }

/*布局*/
/*
    <div class="MainDiv_WhiteTopDiv">
            <span class="MainDiv_WhiteTopDiv_leftSpan border_Btn" @click="back"><i class="fa fa-mail-reply"></i>实验列表</span>
            <span class="MainDiv_WhiteTopDiv_centerSpan">兰花淘宝店铺运营</span>
            <span class="MainDiv_WhiteTopDiv_rightSpan border_Btn" @click="experimentalData()">实验资料</span>
        </div>
*/
/*-----------学生端头部样式  白底标题栏------END--------*/