/*百素(1099116749@qq.com)*/ @charset "utf-8"; * { padding: 0; margin: 0; font-family: Arial, 'PingFang SC', SimHei, SimSun; box-sizing: border-box; font-size: 14px; } input:focus { outline: none; } textarea:focus { outline: none; } input {} body { background-color: #f5f6fa; } img { border: none; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { color: inherit; text-decoration: none; } .cl { clear: both; } .kongs, .kongs:hover { height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background-color: transparent !important; box-shadow: none !important; } /**/ .index-nav { width: 240px; height: 100vh; background-color: #FFFFFF; padding: 20px 5px 100px 0px; box-shadow: 1px 0px 5px 0 #eeeeee; position: fixed; top: 0; bottom: 0; left: 0; z-index: 9; } .index-nav .logo { width: 100%; margin-bottom: 30px; } .index-nav .logo a { display: block; font-weight: bold; font-size: 24px; height: 30px; } .index-nav .logo img { display: block; height: 100%; margin: auto; } .index-nav .type-list { height: calc(100% - 60px); padding: 0 25px 100px; overflow: auto; } /* 整个滚动条 */ .index-nav .type-list::-webkit-scrollbar { width: 6px; background-color: transparent; } /* 滚动条上的按钮 (上下箭头). */ .index-nav .type-list::-webkit-scrollbar-button { height: 0px; width: 0px; } /* 滚动条上的滚动滑块. */ .index-nav .type-list::-webkit-scrollbar-thumb { background-color: #64a15e; border-radius: 50px; } /* 滚动条轨道. */ .index-nav .type-list::-webkit-scrollbar-track { background-color: transparent; } /* 滚动条没有滑块的轨道部分 */ .index-nav .type-list::-webkit-scrollbar-track-piece { background-color: transparent; } .index-nav .type-list .list { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; line-height: 42px; transition: 0.3s all; overflow: hidden; } .index-nav .type-list .list a { width: 80%; display: flex; justify-content: flex-start; align-items: center; font-size: 16px; font-weight: bold; padding: 0 10px; border-radius: 5px 0px 0px 5px; color: #555555; transition: 0.3s all; } .index-nav .type-list .list a i { display: block; margin-right: 6px; font-size: 22px; } .index-nav .type-list .list span { display: block; width: 0; overflow: hidden; text-align: center; background-color: #477975; cursor: pointer; border-radius: 0px 5px 5px 0px; color: #FFFFFF; transition: 0.3s all; } .index-nav .type-list .list span i { display: block; font-size: 18px; transition: 0.3s all; } .index-nav .type-list .list.add{ margin-top: 12px; } .index-nav .type-list .list.add a{ width: 100%; border: 1px solid #64a15e; border-radius: 5px; cursor: pointer; } .index-nav .type-list .list:hover a { background-color: #64a15e; color: #FFFFFF; transition: 0.3s all; } .index-nav .type-list .list:hover span { width: 20%; transition: 0.3s all; } .index-nav .user-info { width: 100%; background-color: #ffffff; padding: 25px; display: flex; justify-content: flex-start; align-items: center; position: absolute; bottom: 0; left: 0; } .index-nav .user-info .pic { display: block; width: 45px; height: 45px; border-radius: 100%; overflow: hidden; } .index-nav .user-info .pic img { display: block; width: 100%; height: 100%; } .index-nav .user-info .text { padding-left: 10px; } .index-nav .user-info .text p.t1 { font-weight: bold; color: #555555; margin-bottom: 5px; } .index-nav .user-info .text p.t2 { color: #c2c2c2; } /**/ .index-main { width: 100%; padding-left: 260px; padding-top: 20px; padding-right: 20px; } .search { width: 100%; display: none; /*display: flex;*/ justify-content: space-between; align-items: center; } .search .list { width: 370px; position: relative; } .search .list input.kw { display: block; width: 100%; height: 40px; padding: 0 55px 0 25px; border-radius: 40px; border: none; } .search .list button { display: block; height: 40px; width: 50px; background-color: transparent; border: none; position: absolute; top: 0; bottom: 0; right: 0; } .search .list button i { display: block; font-weight: bold; font-size: 16px; color: #64a15e; } .search .addsite { width: 40px; height: 40px; text-align: center; line-height: 40px; background-color: #64a15e; border-radius: 6px; cursor: pointer; } .search .addsite i { display: block; font-size: 26px; color: #FFFFFF; } /**/ .search-main-w { width: 100%; height: 180px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .search-main { width: calc(100% - 500px); height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 6px; background-color: #64a15e; background-image: url(../images/search-bj.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .search-main .search-input { width: 600px; position: relative; } .search-main .search-input input.kw { display: block; width: 100%; height: 50px; padding: 0 65px 0 25px; border-radius: 10px; border: 1px solid #F2F2F2; } .search-main .search-input button.search-bendi { display: block; height: 50px; width: 60px; background-color: transparent; border: none; position: absolute; top: 0; bottom: 0; right: 0; } .search-main .search-input button.search-bendi i { display: block; font-weight: bold; font-size: 20px; color: #64a15e; } .search-main .search-btnlist { display: flex; justify-content: center; align-items: center; position: relative; } .search-main button.search-btn { width: 140px; height: 50px; border: none; border-radius: 10px 0px 0px 10px; background-color: #fff; color: #555; margin-left: 12px; font-size: 16px; display: flex; justify-content: center; align-items: center; cursor: pointer; border-right: 1px solid #64a15e; } .search-main button.search-btn img { display: block; width: 25px; height: 25px; border-radius: 6px; margin-right: 6px; } .search-main button.search-btn i { display: block; margin-right: 4px; font-size: 20px; line-height: 50px; } .search-main button.search-change { width: 30px; height: 50px; text-align: center; border: none; border-radius: 0px 10px 10px 0px; background-color: #64a15e; color: #ffffff; font-size: 16px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .search-main button.search-change i { display: block; font-size: 16px; line-height: 50px; } .search-main .search-btnlist .search-lists { width: 390px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: absolute; top: 60px; right: 0; background-color: #FFFFFF; padding: 12px; border-radius: 6px; z-index: 100; box-shadow: 0px 0px 6px #000000; } .search-main .search-btnlist .search-lists.hide { display: none; } .search-main .search-btnlist .search-lists .list { width: 33%; line-height: 40px; padding: 0 10px; display: flex; justify-content: flex-start; align-items: center; font-size: 15px; border-radius: 6px; cursor: pointer; transition: 0.3s all; } .search-main .search-btnlist .search-lists .list img { display: block; width: 20px; height: 20px; margin-right: 8px; border-radius: 6px; } .search-main .search-btnlist .search-lists .list:hover { background-color: #64a15e; color: #FFFFFF; transition: 0.3s all; } .search-main-w .date-main { width: 240px; height: 100%; background-color: #477975; border-radius: 6px; display: flex; justify-content: center; flex-direction: column; transition: 0.3s all; position: relative; } .search-main-w .date-main .times { width: 100%; display: block; text-align: center; color: #FFFFFF; font-size: 40px; font-weight: bolder; letter-spacing: 2px; margin-bottom: 15px; line-height: 1; } .search-main-w .date-main .list { width: 100%; align-items: center; text-align: center; } .search-main-w .date-main span { width: 49%; color: #FFFFFF; font-size: 16px; } .search-main-w .date-main span.dates { width: 100%; display: block; text-align: center; margin-bottom: 12px; font-weight: bold; } .search-main-w .date-main span.weeks { margin-left: 15px; } .search-main-w .weather-main { width: 240px; height: 100%; background-color: #01AAED; border-radius: 6px; transition: 0.3s all; } .site-main { width: 100%; margin-top: 30px; } .site-main .site-name { display: flex; justify-content: flex-start; align-items: center; align-self: center; font-size: 18px; line-height: 30px; font-weight: bold; margin-bottom: 15px; } .site-main .site-name i { display: block; font-size: 20px; margin-right: 8px; } .site-main .site-name span { display: block; height: 25px; width: 25px; line-height: 25px; text-align: center; background-color: #64a15e; border-radius: 5px; margin-left: 8px; } .site-main .site-name span i { color: #ffffff; text-align: center; font-size: 14px; margin-right: 0; } .site-main .site-name.hidden { display: none; } .site-main .site-list { display: flex; justify-content: space-between; flex-wrap: wrap; } .site-main .site-list .list { width: 16%; background-color: #ffffff; border-radius: 4px; transition: 0.3s all; margin-bottom: 15px; position: relative; display: flex; justify-content: flex-start; align-items: flex-start; } .site-main .site-list .list span { display: block; width: 25px; height: 25px; margin: auto; text-align: center; line-height: 25px; position: absolute; top: 0; bottom: 0; right: 0; } .site-main .site-list .list span i { display: block; color: #64a15e; font-size: 18px; } .site-main .site-list .list a { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; padding: 0 5%; } .site-main .site-list .list p.name { color: #666666; font-weight: bold; font-size: 15px; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; padding-left: 25px; } .site-main .site-list .list p.name em { width: 18px; height: 18px; display: block; margin-right: 10px; border-radius: 100%; line-height: 44px; } .site-main .site-list .list p.name img { width: 18px; height: 18px; margin: auto; position: absolute; left: 0; top: 0; bottom: 0; } .site-main .site-list .list .desc { display: block; width: 100%; font-size: 13px; padding-bottom: 10px; color: #666; line-height: 1.5; } .site-main .site-list .list:hover { box-shadow: 0px 0px 6px #333; background-color: #64a15e; transition: 0.3s all; } .site-main .site-list .list:hover p.name, .site-main .site-list .list:hover p.desc { color: #ffffff; } .site-main .site-list .list.hidden { display: none; } .site-main .site-list .list.visible { display: flex; } /**/ footer { width: 100%; padding-left: 240px; font-size: 14px; color: #C2C2C2; position: fixed; bottom: 10px; left: 0; margin: auto; text-align: center; height: 56px; line-height: 23px; margin-top: 30px; } footer a { color: #C2C2C2; } footer.show { position: static; } footer a:hover { color: #64a15e !important; } .tool-list { position: fixed; bottom: 30px; right: 15px; z-index: 99; width: 45px; } .tool-list .list { width: 45px; height: 45px; display: block; background-color: #64a15e; color: white; text-align: center; line-height: 45px; border-radius: 6px; cursor: pointer; margin-top: 12px; } .tool-list .list i { font-size: 20px; } .tool-list .addsite i { font-size: 24px; } /**/ .addsiteBox { border-radius: 6px !important; overflow: hidden; } .addsite-main { display: none; padding-bottom: 15px; width: 460px; margin: auto; background-color: #FFFFFF; box-shadow: 0px 0px 6px #ccc; overflow: hidden; } .addsite-main .title { background-color: #64a15e; text-align: center; line-height: 80px; color: #FFFFFF; font-weight: bold; font-size: 22px; margin-bottom: 20px; letter-spacing: 2px; } .addsite-main .list-w { width: 100%; padding: 0 20px; display: flex; justify-content: space-between; flex-wrap: wrap; } .addsite-main .list { width: 100%; margin-bottom: 15px; position: relative; } .addsite-main .list span.icon { display: flex; justify-content: center; flex-direction: column; width: 35px; text-align: center; height: 100%; margin: auto; position: absolute; left: 0; top: 0; bottom: 0; } .addsite-main .list span.icon i { color: #64a15e; display: block; font-size: 18px; } .addsite-main .list input.text { display: block; width: 100%; height: 44px; padding: 0 8px 0 35px; border-radius: 6px; background-color: #f5f6fa; border: none; color: #555; } .addsite-main .list.type { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 7px; } .addsite-main .list.type span { display: flex; justify-content: center; align-items: center; width: 19%; text-align: center; padding: 7px 0px; font-size: 13px; border: 1px solid #64a15e; cursor: pointer; border-radius: 6px; margin-bottom: 8px; transition: 0.3s all; } .addsite-main .list.type span:hover, .addsite-main .list.type span.hover { background-color: #64a15e; color: #FFFFFF; transition: 0.3s all; } .addsite-main .list-2 { width: 100%; display: flex; justify-content: space-between; align-items: center; } .addsite-main .list-2 .li { width: 48%; display: flex; justify-content: space-between; align-items: center; line-height: 40px; background-color: #f5f6fa; padding: 0 10px; border-radius: 6px; overflow: hidden; } .addsite-main .list-2 .li span { display: block; width: 40%; } .addsite-main .list-2 .li input.num { display: block; width: 60%; height: 40px; padding: 0 5px; background-color: #f5f6fa; border: none; } .addsite-main .list textarea { display: block; width: 100%; height: 80px; padding: 10px; border-radius: 6px; background-color: #f5f6fa; border: none; color: #555; line-height: 1.4; } .addsite-main .list button { width: 100%; display: block; height: 44px; background-color: #64a15e; border: 1px solid #64a15e; border-radius: 6px; color: #FFFFFF; font-size: 16px; cursor: pointer; transition: 0.3s all; } .addsite-main .list button:hover { transition: 0.3s all; box-shadow: 0px 0px 6px #333333; } /*边距调整*/ .addsite-main .layui-unselect, .addsite-main .layui-unselect * { box-sizing: content-box; } .addsite-main .layui-form-switch { margin-top: 0; } .m-header { display: none; } /* * 手机端 */ @media only screen and (max-width: 1200px) { .index-nav { left: -100%; transition: 0.3s all; } .index-nav.show { left: 0; transition: 0.3s all; } .index-main { padding: 15px !important; } .search-main-w { width: 100%; height: 120px; margin-top: 60px; } .search-main-w .date-main { display: none; } #he-plugin-standard { display: none; } .search-main { width: 100%; padding: 25px 0; flex-wrap: wrap; background-position: center; } .search-main .search-input { width: 80%; } .search-main .search-btnlist { width: 100%; display: none; } .search-main .search-btnlist .search-lists { width: 100%; left: 0; right: 0; margin: auto; font-size: 13px; } .site-main .site-name { margin-bottom: 10px; } .site-main .site-list .list { width: 48%; margin-bottom: 10px; } .site-main .site-list { margin-bottom: 25px; } .site-main .site-list .list span { position: absolute; right: 0px; top: 0; bottom: 0; margin: auto; } .site-main .site-list .list a { padding: 0 10% 0 5%; } footer { padding-left: 0; } .m-header { width: 100%; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; background-color: #FFFFFF; z-index: 9999; box-shadow: 0px 0px 1px #C0C4CC; } .m-header .logo { height: 30px; } .m-header .logo img { display: block; height: 100%; } .m-header .navbar { display: flex; justify-content: center; flex-direction: column; width: 40px; height: 40px; font-size: 28px; text-align: center; border: 1px solid #64a15e; color: #64a15e; border-radius: 6px; } .m-navlist-w { width: 100%; position: absolute; top: 100%; left: 0; right: 0; background-color: #FFFFFF; padding: 15px; display: none; border-top: 1px solid #C0C4CC; } .m-navlist { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .m-navlist a.list { width: 33%; padding: 0 10px; line-height: 40px; display: flex; justify-content: flex-start; align-items: center; } .m-navlist a.list i { display: block; margin-right: 4px; } .addsite-main { width: 100%; } .addsite-main .list.type span { width: 32%; } }