php/laisouke.git

2020-09-11 80527f8035fb8e0a6b954f6f022a549d38ee422a

commit \| author \| age
1c88ba	1	@charset "UTF-8";
Z	2
	3	/* 公共样式 */
	4	.flex-al1 {
	5	-webkit-box-flex: 1;
	6	-webkit-flex: 1;
	7	-ms-flex: 1;
	8	flex: 1;
	9	width: 20%;
	10	}
	11	.flex0 {
	12	display: -webkit-box;
	13	display: -moz-box;
	14	display: -ms-flexbox;
	15	display: -webkit-flex;
	16	display: flex;
	17	-webkit-box-align: center;
	18	-webkit-align-items: center;
	19	-ms-flex-align: center;
	20	align-items: center;
	21	}
	22	.flex0_1 {
	23	display: -webkit-box;
	24	display: -moz-box;
	25	display: -ms-flexbox;
	26	display: -webkit-flex;
	27	display: flex;
	28	-webkit-box-align: stretch;
	29	-webkit-align-items: stretch;
	30	-ms-flex-align: stretch;
	31	align-items: stretch;
	32	}
	33	.flex_g0 {
	34	-webkit-flex-grow: 0;
	35	-webkit-flex-shrink: 0;
	36	flex-grow: 0;
	37	flex-shrink: 0;
	38	}
	39	.flex1 {
	40	display: -webkit-box;
	41	display: -moz-box;
	42	display: -ms-flexbox;
	43	display: -webkit-flex;
	44	display: flex;
	45	-webkit-box-pack: justify;
	46	-webkit-justify-content: space-between;
	47	-ms-flex-pack: justify;
	48	justify-content: space-between;
	49	-webkit-box-align: center;
	50	-webkit-align-items: center;
	51	-ms-flex-align: center;
	52	align-items: center;
	53	-webkit-box-flex: 1;
	54	-webkit-flex: 1;
	55	-ms-flex: 1;
	56	flex: 1;
	57	}
	58	.flex9 {
	59	display: -webkit-box;
	60	display: -moz-box;
	61	display: -ms-flexbox;
	62	display: -webkit-flex;
	63	display: flex;
	64	-webkit-box-pack: center;
	65	-webkit-justify-content: center;
	66	-ms-flex-pack: center;
	67	justify-content: center;
	68	-webkit-box-align: center;
	69	-webkit-align-items: center;
	70	-ms-flex-align: center;
	71	align-items: center;
	72	}
	73	.flex10 {
	74	display: -webkit-box;
	75	display: -moz-box;
	76	display: -ms-flexbox;
	77	display: -webkit-flex;
	78	display: flex;
	79	-webkit-flex-direction: column;
	80	-moz-flex-direction: column;
	81	-ms-flex-direction: column;
	82	-o-flex-direction: column;
	83	flex-direction: column;
	84	-webkit-box-pack: justify;
	85	-webkit-justify-content: space-between;
	86	-ms-flex-pack: justify;
	87	justify-content: space-between;
	88	}
	89
	90	/* 顶部搜索框和分类排序 */
	91	.fix_grid_96 {
	92	height: 96px;
	93	}
	94	.fix_grid {
	95	position: fixed;
	96	top: 0;
	97	width: 100%;
	98	max-width: 640px;
	99	z-index: 1000;
	100	}
	101	.search_grid {
	102	background-color: #f1f1f3;
	103	padding: 5px;
	104	}
	105	.search_grid .search {
	106	border: 1px solid #dedede;
	107	-webkit-border-radius: 4px;
	108	-moz-border-radius: 4px;
	109	border-radius: 4px;
	110	padding: 5px 15px;
	111	background-color: white;
	112	font-size: 14px;
	113	color: #1d1d1d;
	114	}
	115	.search_grid .search .search-btn {
	116	position: absolute;
	117	right: 10px;
	118	background-color: #eee;
	119	padding: 5px 15px;
	120	border-radius: 25px;
	121	}
	122	.search_grid .search .icon_search {
	123	width: 16px;
	124	height: 28px;
	125	margin-right: 10px;
	126	background-position: center center;
	127	background-image: url(../../images/icon_search.png);
	128	background-repeat: no-repeat;
	129	background-size: auto 16px;
	130	}
	131	.search_grid .search form{
	132	width: 100%;
	133	}
	134	.search_grid .search input {
	135	height: 28px;
	136	width: 70%;
	137	}
	138	input, button, textarea, select {
	139	font-family: inherit;
	140	font-size: inherit;
	141	font-weight: inherit;
	142	border: 0;
	143	background: none;
	144	-webkit-appearance: none;
	145	outline: 0;
	146	}
	147	.list_menu_grid .icon_down {
	148	margin-left: 5px;
	149	}
	150	.list_menu_grid {
	151	height: 45px;
	152	background-color: white;
	153	color: #1d1d1d;
	154	font-size: 13px;
	155	text-align: center;
	156	border-bottom: 1px solid #e4e5ea;
	157	}
	158	.icon_down {
	159	display: inline-block;
	160	width: 10px;
	161	height: 5px;
	162	background-image: url(../../images/icon_down.png);
	163	background-repeat: no-repeat;
	164	background-size: 100%;
	165	}
	166	.sort_list_grid {
	167	position: fixed;
	168	top: 96px;
	169	bottom: 54px;
	170	width: 100%;
	171	max-width: 640px;
	172	z-index: 1000;
	173	overflow: auto;
	174	}
	175	.sort_list_grid a.curr {
	176	color: #d7b262;
	177	background-color: #f8f8f8;
	178	position: relative;
	179	}
	180	.sort_list_grid a {
	181	display: block;
	182	background-color: white;
	183	font-size: 13px;
	184	color: #1d1d1d;
	185	padding: 15px;
	186	position: relative;
	187	z-index: 1;
	188	}
	189	.sort_list_grid a.curr::before {
	190	content: "";
	191	display: block;
	192	width: 3px;
	193	height: 100%;
	194	background-color: #d7b262;
	195	position: absolute;
	196	left: 0;
	197	top: 0;
	198	}
	199	.mark {
	200	position: absolute;
	201	top: 0;
	202	left: 0;
	203	right: 0;
	204	bottom: 0;
	205	z-index: 102;
	206	background-color: rgba(0, 0, 0, 0.5);
	207	}
80527f	208
Z	209	.mark1 {
	210	position: absolute;
	211	top: 0;
	212	left: 0;
	213	right: 0;
	214	bottom: 0;
	215	z-index: 102;
	216	background-color: rgba(0, 0, 0, 0.5);
	217	}
1c88ba	218	.sort_list_grid a + a {
Z	219	border-top: 1px solid #e4e5ea;
	220	}
	221
	222	/* 全部分类 */
	223	.nav {
	224	z-index: 1100;
	225	position: fixed;
	226	top: 96px;
	227	width: 100%;
	228	max-width: 640px;
	229	}
	230
	231	.nav[data-active=filter] .nav_panel-filter,.nav[data-active=sort] .nav_panel-sort {
	232	display: block;
	233	-webkit-transform: translateZ(0);
	234	transform: translateZ(0)
	235	}
	236	.nav[data-active=cate] .nav_panel-cate {
	237	display: -webkit-box;
	238	display: -webkit-flex;
	239	display: flex;
	240	-webkit-transform: translateZ(0);
	241	transform: translateZ(0)
	242	}
	243
	244	.nav_panel {
	245	width: 100%;
	246	top: 0;
	247	background: #fff;
	248	background: var(--white);
	249	-webkit-transition: -webkit-transform .2s ease;
	250	transition: -webkit-transform .2s ease;
	251	transition: transform .2s ease;
	252	transition: transform .2s ease,-webkit-transform .2s ease;
	253	-webkit-transform: translate3d(0,-250%,0);
	254	transform: translate3d(0,-250%,0);
	255	overflow-y: auto
	256	}
	257	.nav .nav_panel-sort,.nav_panel {
	258	position: absolute
	259	}
	260	.nav_panel-cate {
	261	display: -webkit-box;
	262	display: -webkit-flex;
	263	display: flex;
	264	height: 25rem;
	265	}
	266	@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
	267	.nav_panel-cate {
	268	height:400px;
	269	}
	270	}
	271	@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
	272	.nav_panel-cate {
	273	height:455px;
	274	}
	275	}
	276	@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
	277	.nav_panel-cate {
	278	height: 550px;
	279	}
	280	}
	281	.nav_panel-cate .nav_menu_item {
	282	overflow: hidden;
	283	position: relative;
	284	font-size: 14px;
	285	white-space: nowrap;
	286	text-overflow: ellipsis;
	287	word-break: break-all;
	288	padding-left: 25px;
	289	height: 50px;
	290	max-height: 50px;
	291	line-height: 50px;
	292	}
	293
	294	.nav_panel-cate .nav_menu_item_selected {
	295	color: #DC3528;
	296	}
	297
	298	.nav_panel-cate .nav_menu_item-icon {
	299	display: block;
	300	position: absolute;
	301	top: 50%;
	302	left: 10px;
	303	margin-top: -10px;
	304	width: 18px;
	305	height: 18px;
	306	}
	307
	308	.nav_menu {
	309	width: 100%;
	310	overflow-y: auto;
	311	}
	312	.nav_menu a {
	313	color: inherit;
	314	}
	315	.nav_menu_item_selected {
	316	color: #DC3528;
	317	background-color: #f8f8f8;
	318	}
	319
	320	.nav_panel_cate_mt {
	321	width: 45%;
	322	min-height: 105px;
	323	background: #f2f2f4;
	324	}
	325
	326	.nav_panel_cate_mt .nav_menu_item {
	327	padding-left: 35px;
	328	background: #f2f2f2;
	329	}
	330
	331	.nav_panel_cate_mt .nav_menu_item_selected {
	332	background: #e8e8e9;
	333	}
	334
	335	.nav_panel-cate_st {
	336	display: none;
	337	background: #f8f8f9;
	338	}
	339
	340	.nav_panel-cate_st .nav_menu_item {
	341	padding-left: 35px;
	342	background: #f8f8f9;
	343	}
	344
	345	.nav_panel-cate_st .nav_menu_item_selected {
	346	background: #fff;
	347	}
	348
	349	.nav_mask {
	350	display: none;
	351	position: absolute;
	352	top: 0;
	353	left: 0;
	354	right: 0;
	355	bottom: 0;
	356	z-index: 1;
	357	background-color: rgba(0, 0, 0, 0.3);
	358	}
	359
ec46c1	360	/* 知识点分类 */
80527f	361	.nav1 {
Z	362	z-index: 1100;
	363	position: fixed;
	364	top: 96px;
	365	width: 100%;
	366	max-width: 640px;
	367	}
	368
	369	.nav1[data-active=filter] .nav_panel-filter,.nav1[data-active=sort] .nav_panel-sort {
	370	display: block;
	371	-webkit-transform: translateZ(0);
	372	transform: translateZ(0)
	373	}
	374	.nav1[data-active=knowledge] .nav_panel-know {
	375	display: -webkit-box;
	376	display: -webkit-flex;
	377	display: flex;
	378	-webkit-transform: translateZ(0);
	379	transform: translateZ(0)
	380	}
	381
	382	.nav1_panel {
	383	width: 100%;
	384	top: 0;
	385	background: #fff;
	386	background: var(--white);
	387	-webkit-transition: -webkit-transform .2s ease;
	388	transition: -webkit-transform .2s ease;
	389	transition: transform .2s ease;
	390	transition: transform .2s ease,-webkit-transform .2s ease;
	391	-webkit-transform: translate3d(0,-250%,0);
	392	transform: translate3d(0,-250%,0);
	393	overflow-y: auto
	394	}
	395	.nav1 .nav_panel-sort,.nav1_panel {
	396	position: absolute
	397	}
	398
	399	.nav_panel-know {
	400	display: -webkit-box;
	401	display: -webkit-flex;
	402	display: flex;
	403	height: 25rem;
	404	}
	405	@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
	406	.nav_panel-know {
	407	height:400px;
	408	}
	409	}
	410	@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
	411	.nav_panel-know {
	412	height:455px;
	413	}
	414	}
	415	@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
	416	.nav_panel-know {
	417	height: 550px;
	418	}
	419	}
	420	.nav_panel-know .nav_menu_item {
	421	overflow: hidden;
	422	position: relative;
	423	font-size: 14px;
	424	white-space: nowrap;
	425	text-overflow: ellipsis;
	426	word-break: break-all;
	427	padding-left: 25px;
	428	height: 50px;
	429	max-height: 50px;
	430	line-height: 50px;
	431	}
	432
	433	.nav_panel-know .nav_menu_item_selected {
	434	color: #DC3528;
	435	}
	436
	437	.nav_panel-know .nav_menu_item-icon {
	438	display: block;
	439	position: absolute;
	440	top: 50%;
	441	left: 10px;
	442	margin-top: -10px;
	443	width: 18px;
	444	height: 18px;
	445	}
	446
ec46c1	447	.nav_panel_know_mt {
Z	448	width: 45%;
	449	min-height: 105px;
	450	background: #f2f2f4;
	451	}
	452
	453	.nav_panel_know_mt .nav_menu_item {
80527f	454	padding-left: 10px;
ec46c1	455	background: #f2f2f2;
Z	456	}
	457
	458	.nav_panel_know_mt .nav_menu_item_selected {
	459	background: #e8e8e9;
	460	}
	461
	462	.nav_panel-know_st {
	463	display: none;
	464	background: #f8f8f9;
	465	}
	466
	467	.nav_panel-know_st .nav_menu_item {
80527f	468	padding-left: 10px;
ec46c1	469	background: #f8f8f9;
Z	470	}
	471
	472	.nav_panel-know_st .nav_menu_item_selected {
	473	background: #fff;
	474	}
1c88ba	475
Z	476	/* 课程列表 */
	477	.section{
	478	position: absolute;
	479	top: 96px;
	480	bottom: 55px;
	481	overflow-y: scroll;
	482	width: 100%;
	483	max-width: 640px;
	484	-webkit-overflow-scrolling: touch;
	485	}
	486	.list_grid {
	487	padding: 0 15px;
	488	background-color: white;
	489	}
	490	.list_grid .normal_grid {
	491	margin: 0;
	492	padding: 20px 0;
	493	border-bottom: 1px #ececec solid;
	494	}
	495	.normal_grid .normal_grid_a {
	496	width: 47%;
	497	min-width: 163px;
	498	margin-right: 15px;
	499	}
	500	.normal_grid_a .img-box {
	501	padding-bottom: 61.6%;
	502	}
	503	.img-box {
	504	padding-bottom: 51.8%;
	505	position: relative;
	506	-webkit-border-radius: 4px;
	507	-moz-border-radius: 4px;
	508	border-radius: 4px;
	509	overflow: hidden;
	510	}
	511	.img-box .img {
	512	position: absolute;
	513	top: 0;
	514	bottom: 0;
	515	left: 0;
	516	right: 0;
	517	width: 100%;
	518	margin: auto;
	519	font-size: 0;
	520	}
	521	.img-box .img img {
	522	width: 100%;
	523	border-style: none;
	524	}
	525	.learned {
	526	display: inline-block;
	527	background-color: rgba(0, 0, 0, 0.5);
	528	padding: 3px 6px;
	529	font-size: 10px;
	530	position: absolute;
	531	color: white;
	532	font-weight: normal;
	533	bottom: 3px;
	534	right: 3px;
	535	-webkit-border-radius: 5px;
	536	-moz-border-radius: 5px;
	537	border-radius: 5px;
	538	}
	539	.learned::before {
	540	content: "";
	541	display: inline-block;
	542	width: 0;
	543	height: 0;
	544	margin-right: 4px;
	545	border-top: 5px solid transparent;
	546	border-bottom: 5px solid transparent;
	547	border-left: 7px solid white;
	548	}
	549	.ico_common {
	550	display: block;
	551	position: absolute;
	552	right: 0;
	553	top: 0;
	554	width: 40px;
	555	height: 40px;
	556	background-repeat: no-repeat;
	557	background-position: center center;
	558	background-size: 100%;
	559	}
	560	.ico-hot{
	561	background-image: url(../../images/ico-hot.png);
	562	}
	563	.ico-new{
	564	background-image: url(../../images/ico-new.png);
	565	}
	566	.ico-vip{
	567	background-image: url(../../images/ico-vip.png?v=1);
	568	}
	569	.grid_title2 {
	570	font-size: 14px;
	571	color: #1d1d1d;
	572	line-height: 1.4;
	573	max-height: 40px;
	574	display: -webkit-box;
	575	-webkit-box-orient: vertical;
	576	-webkit-line-clamp: 2;
	577	overflow: hidden;
	578	text-overflow: ellipsis;
	579	word-break: break-all;
	580	word-wrap: break-word;
	581	}
	582	.grid_info {
	583	font-size: 13px;
	584	color: #737373;
	585	margin-top: 6px;
	586	min-height: 23px;
	587	}
	588	.grid_info .free {
	589	font-size: 10px;
	590	padding: 3px 8px;
	591	color: white;
	592	-webkit-border-radius: 100px;
	593	-moz-border-radius: 100px;
	594	border-radius: 100px;
	595	background-color: #d7b262;
	596	background-image: -webkit-linear-gradient(bottom, rgba(55,55,55,.33), rgba(188,188,188,.33));
	597	background-image: -moz-linear-gradient(bottom, rgba(55,55,55,.33), rgba(188,188,188,.33));
	598	background-image: -o-linear-gradient(bottom, rgba(55,55,55,.33), rgba(188,188,188,.33));
	599	background-image: -ms-linear-gradient(bottom, rgba(55,55,55,.33), rgba(188,188,188,.33));
	600	background-image: linear-gradient(to top, rgba(55,55,55,.33), rgba(188,188,188,.33));
	601	}
	602	.grid_info .price {
	603	font-size: 13px;
	604	color: #ceab6b;
	605	}
	606	.mar5 {
	607	margin-left: 5px;
	608	margin-right: 5px;
	609	}
	610	.grid_bottom2 {
	611	min-height: 25px;
	612	margin-top: 5px;
	613	}
	614	.grid_bottom2 .text {
	615	font-size: 12px;
	616	color: #1d1d1d;
	617	font-weight: bold;
	618	}
	619	.grid_bottom2 .eva {
	620	font-size: 11px;
	621	color: #969696;
	622	}