master
shenzhuan 2 years ago
commit a2f16ed2ba

Binary file not shown.

@ -0,0 +1,133 @@
* {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei';
outline: none
}
ul {
list-style: none
}
#header {
width: 100%;
height: 74px;
border-bottom: 1px solid #e3e3e3;
background-color: #fff;
padding: 0px
}
#header .header-layout {
padding: 17px 0;
overflow: hidden
}
#header .header-layout .logo a {
float: left;
display: inline-block;
height: 40px;
width: 140px;
overflow: hidden;
text-indent: -999em
}
#header .header-layout .intl-logo a {
float: left;
display: inline-block;
height: 40px;
width: 170px;
overflow: hidden;
text-indent: -999em
}
#header .header-layout .logo-title {
float: left;
display: inline-block;
width: auto;
height: 30px;
line-height: 30px;
font-size: 20px;
font-weight: normal;
margin-top: 2px;
color: #3c3c3c
}
#header .header-layout .header-nav {
width: auto;
height: 14px;
float: right;
line-height: 14px;
margin-top: 10px
}
#header .header-layout .header-nav li {
float: left;
padding: 0 0 0 10px;
margin-right: 10px;
border-left: 1px solid #4d4d4d
}
#header .header-layout .header-nav li.nav-first {
border-left: 0
}
#header .header-layout .header-nav li a {
color: #666;
font-size: 12px;
text-decoration: none
}
.copyright-100 {
clear: both;
background: #fff;
border-top: 1px solid #e5e5e5
}
.copyright-100 .copyright {
text-align: center;
color: #999;
font-size: 12px;
padding: 35px 0 40px
}
.copyright-100 .copyright .img {
display: inline-block;
width: 22px;
height: 22px;
}
.copyright-100 .copyright .img.img-1 {
background-position: 85px 113px
}
.copyright-100 .copyright .img.img-2 {
background-position: 85px 91px
}
.copyright-100 .copyright p {
padding: 5px 0
}
.copyright-100 .copyright p .link-item {
padding: 0 10px 0 5px
}
.copyright-100 .copyright p a {
padding: 0 5px;
color: #b3b3b3
}
.copyright-100 .copyright p.big {
font-size: 14px
}
.copyright-100 .copyright p.big a {
color: #666
}
.copyright-100 .copyright .link-wrap {
line-height: 24px
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,329 @@
body {
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* ::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(25, 147, 147, 0.1);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(25, 147, 147, 0.2);
} */
.chat-thread {
margin: 10px auto 0 auto;
padding: 0 10px 0 10px;
list-style: none;
overflow-y: scroll;
overflow-x: hidden;
padding-bottom: 45px;
}
.chat-window {
position: fixed;
bottom: 18px;
}
.chat-window-message {
width: 100%;
height: 48px;
font: 32px/48px 'Noto Sans', sans-serif;
background: none;
color: #0AD5C1;
border: 0;
border-bottom: 1px solid rgba(25, 147, 147, 0.2);
outline: none;
}
/* Small screens */
@media all and (max-width: 767px) {
.chat-thread {
width: 100%;
height: 100%;
}
.chat-window {
left: 5%;
width: 90%;
}
}
/* Medium and large screens */
@media all and (min-width: 768px) {
.chat-thread {
width: 100%;
height: 100%;
}
.chat-window {
left: 25%;
width: 50%;
}
}
@keyframes show-chat-even {
0% {
margin-left: -480px;
}
100% {
margin-left: 0;
}
}
@-moz-keyframes show-chat-even {
0% {
margin-left: -480px;
}
100% {
margin-left: 0;
}
}
@-webkit-keyframes show-chat-even {
0% {
margin-left: -480px;
}
100% {
margin-left: 0;
}
}
@keyframes show-chat-odd {
0% {
margin-right: -480px;
}
100% {
margin-right: 0;
}
}
@-moz-keyframes show-chat-odd {
0% {
margin-right: -480px;
}
100% {
margin-right: 0;
}
}
@-webkit-keyframes show-chat-odd {
0% {
margin-right: -480px;
}
100% {
margin-right: 0;
}
}
.credits {
text-align: center;
margin-top: 35px;
color: rgba(255, 255, 255, 0.35);
font-family: 'Noto Sans', sans-serif;
}
.credits a {
text-decoration: none;
color: rgba(255, 255, 255, 0.35);
}
.mui-bar-tab .mui-tab-item.mui-active {
color: #fb3a4e;
}
.mui-bar-tab .mui-tab-item .mui-icon {
font-size: 20px;
}
.mui-table-view-cell:after {
background-color: #c4c4c4;
}
.mui-table-view:after {
background-color: #c4c4c4;
}
/* 个人中心样式 */
.user-info .mui-table-view-cell {
font-size: 14px;
}
.user-info .mui-table-view-cell:after {
left: 0
}
/* 联系人 群聊列表 样式 */
.tabbar-concat .mui-table-view-cell:after,
.tabbar-group .mui-table-view-cell:after {
left: 60px;
}
.mui-content {
background-color: #f8f8f8;
}
.createcom {
padding: 10px;
background-color: #fff;
height: 100vh;
font-size: 14px;
}
.createcom .mui-table-view:before {
display: none;
}
.createcom .profile {
display: flex;
align-items: center;
justify-content: space-between;
}
.createcom .profile .mui-media-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.createcom .mui-input-row::after {
left: 0px;
}
.createcom .area {
min-height: 100px;
}
.createcom .area .detail {
height: 80px;
font-size: 14px;
}
.createcom .mui-media {
padding-right: 35px;
}
.mui-bar-nav a {
color: #fb3a4e;
}
.main-content {
padding-top: 0;
z-index: 2;
}
.main-content .text {
font-size: 14px;
margin-bottom: 0;
}
.main-content .text::placeholder {
color: #ccc;
}
.main-content .iconfont {
font-size: 32px;
color: #333;
}
.main-content>div {
display: flex;
align-items: center;
}
.plugins .iconfont {
font-size: 30px;
color: #333;
}
.plugins {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.plugins .plugin {
width: 25%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.plugins .plugin p {
margin-top: 5px;
font-size: #666;
}
.mui-popup-button {
color: #fb3a4e;
}
.chat-thread .chat .avatar {
border-radius: 50%;
}
#pageapp .avatar {
border-radius: 50%;
width: 50px;
max-width: 60px;
max-height: 60px;
height: 50px;
}
.chat-thread .chat .avatar.right {
margin-left: 5px;
margin-right: 0px;
}
.chat-thread .chat .avatar.left {
margin-right: 5px;
margin-left: 0px;
}
#tabbar-profile .head-img {
border-radius: 50%;
width: 50px;
max-width: 60px;
max-height: 60px;
height: auto;
}
#pageapp .mui-bar-nav {
box-shadow: none;
}
#convo .mui-scroll-wrapper {
padding-top: 50px;
padding-bottom: 50px;
}
#convo .mui-scroll-wrapper .mui-scroll {}
#convo .mui-scroll-wrapper .mui-scroll .mui-control-item {
display: block;
height: 100px;
}
#panels {
z-index: 2;
padding-top: 5px;
}

@ -0,0 +1,202 @@
body {
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(25, 147, 147, 0.1);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(25, 147, 147, 0.2);
}
.chat-thread {
margin: 24px auto 0 auto;
padding: 0 20px 0 0;
list-style: none;
overflow-y: scroll;
overflow-x: hidden;
}
.chat-thread li {
position: relative;
clear: both;
display: inline-block;
padding: 16px 40px 16px 20px;
margin: 0 0 20px 0;
font: 16px/20px 'Noto Sans', sans-serif;
border-radius: 10px;
background-color: rgba(25, 147, 147, 0.2);
}
/* Chat - Avatar */
.chat-thread li:before {
position: absolute;
top: 0;
width: 50px;
height: 50px;
border-radius: 50px;
content: '';
}
/* Chat - Speech Bubble Arrow */
.chat-thread li:after {
position: absolute;
top: 15px;
content: '';
width: 0;
height: 0;
border-top: 15px solid rgba(25, 147, 147, 0.2);
}
.chat-thread li.myself {
animation: show-chat-odd 0.15s 1 ease-in;
-moz-animation: show-chat-odd 0.15s 1 ease-in;
-webkit-animation: show-chat-odd 0.15s 1 ease-in;
float: right;
margin-right: 80px;
color: #0AD5C1;
}
.chat-thread li.myself:before {
right: -80px;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAASAAAATgAAAAAAAABgAAAAAQAAAGAAAAABUGFpbnQuTkVUIHYzLjUuMTAA/9sAQwAHBQUGBQQHBgUGCAcHCAoRCwoJCQoVDxAMERgVGhkYFRgXGx4nIRsdJR0XGCIuIiUoKSssKxogLzMvKjInKisq/9sAQwEHCAgKCQoUCwsUKhwYHCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioq/8AAEQgAMgAyAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8wre0/w55qLLqM62ysMrEWAdh+PSl8M6fFLMbu5K7YziNT3b1/CqniRLq98UA2SlhHGobnA55FdbajHmZwxTnLlRtm78NabDGhs/tEwchmVfMGD0znvn0pqahoN3fCH+z0RcHcWiKY4745/KuUVtTtdSFtJCvmxHmN+317Gp5dTthGZXUSXPJJVsh1PUH1rP2rZt7GKOi1LwxHIv2jRg20jPks4b64b+h/OuZZWRyrqVZTggjBBrZ0PWftFwkA8xImTpu7gVJr1kpX7UhzJ0cZ5I9a0umtDJxcWYVFFFBJ1WlKkOmQASYyoYjZnk81aukuLHTP7YFtDeW6zJEFmyu4555H8PQemaz9NmR9PhO45C7T+HFa1rrk9iwSZ3vLJU+WyaVUCsDncMjJI64H41riYRVHmS7E4KbliOWT7nPePtPvbm8j1trWSyF3GpkgkYEbl4BBHTjHBrn49GkfRLnUpn2tBgtFj76k4GD/e749K63xb4gtdTtp4LeRismGVyOmDnpWBq2pXd74ZsdPjG2GCTdHDEnzSN/ebHLH+VeXBuyR7E4wu35EXhKKObVCRnMKMwY+hwAPz5rrJ7bzYXTfu3Ag5yKwfC+nNZvcPPJHvdQDGnJjOehPTPsOlb0zLFA8m/hVJ/SvXo0oundnhV6slU5UcjRRRXPY3Luk3giYwSHCscqfetfULXOlR3TXIhZ2ZYfLILHHDkjsO3PJPSuXqeC5aPzd5ZjIQdxOcEDFa+0fJyEKmvac5myyQWJlRZnkkTHytjoeuPepLaa9vi4ib7LbOMyFG5KjtnrVMabPd30gcrCjMSZGPQf1NbF0i29pHBAUlbABVT8pPqSOwrljDW53c+lrl/RWxvymyDAWPjsPSpdVnVF8iNsk8tz0HpVFLloowEYvJjBkIwB7AdhUGSxJJyT1JrpU2o8py1IwlJS6hRS0VAiKiiikUKKUUUUxC0ooooAKKKKQH/2Q==);
}
.chat-thread li.myself:after {
border-right: 15px solid transparent;
right: -15px;
}
.chat-thread li.other {
animation: show-chat-even 0.15s 1 ease-in;
-moz-animation: show-chat-even 0.15s 1 ease-in;
-webkit-animation: show-chat-even 0.15s 1 ease-in;
float: left;
margin-left: 80px;
color: #0EC879;
}
.chat-thread li.other:before {
left: -80px;
background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAASAAAATgAAAAAAAABgAAAAAQAAAGAAAAABUGFpbnQuTkVUIHYzLjUuMTAA/9sAQwAHBQUGBQQHBgUGCAcHCAoRCwoJCQoVDxAMERgVGhkYFRgXGx4nIRsdJR0XGCIuIiUoKSssKxogLzMvKjInKisq/9sAQwEHCAgKCQoUCwsUKhwYHCoqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioqKioq/8AAEQgAMgAyAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8tq7pmj3urzbLKEsB95zwq/U1PoGjSa5qiWyErGPmlcfwr/jXZeMryHwp4VjtbECFrg+WgU4IXGWP17Z963lLWy3PNhC6uzhdSTTdIkMMty97MvDi3wqKfTcc5/KoLfUdDnkWOYXtpuOPNZlkVfcgAHFW9E8G6v4hAnXyrSBuVabOSPYdas618PNY0u3MiPb30ajJWMFW/AHrRzQ2ub+yfYS/wDDV3aQieBlu7cjcJIuePXH+FY1dR8O9SeYXGjzElYlMsIbqnOGX6c5/On+K9BWDN9artGf3qAf+PVKk1LlkZyp6XRymKKWitDG56h8N9OWPRJLsj57iU8/7K8D9c1lfE/TpZ/E3h9iC8EiumzHG4HP65FdL8PJFk8J2yr1jd1b67if61q+K9NS5023vjw+mzfaF4zkY2kfrn8K52/ebOyCXKjltJ1i5tpEimsY1ULuc7zlRnHpj8Kt6/qTzKI7aTyo9wV5VTecnpgH+dSXM0baJNcSFVC8t71HpNzaT31+IH8xAiNg467emPy5rDQ7LHHaNZ3Ft8ULPLfNPFI0jKu3zF2nkjtniu21W3WS3kjkGVZSpHtWZ4atP7Q8aahqshwLOEQRrju/P8h+ta+rSAKRWjd0jnkrNnkcsZimeNuqMVP4UVJesJL+4dejSsR+dFdi2PPe52Xw31xLO8m025cIk58yIscAMByPxAH5V1mufEDQLC1ltS51GWRChht+Rzxgt0H6144RVK5gmGWhOR6DqKjkTdzSnUsrHTm6c6kNP1jzMQgmNScoT159eOKLzVbG2xf27NBdoyqqR4G72OBg8U2yuLfxLbJFcOI79F2up4Lf7Qpt5olposf2q9n+XPyqzZYn2FYW1sdyloWvDfxAh0AXFrqljJ/pMnnNcxnLc8AFT2GO1aureKbG70559PuVlLfKoHBBPqOorze48/VbxpymxTgD0VR0FXbe3S3j2p1PU+tbezW5yzqW0RJRS0VocwtFFFMkQqpIJUEjpkUFFZtzKC3qRzRRS6mq+EWkNFFBmLRRRQB//9k=);
}
.chat-thread li.other:after {
border-left: 15px solid transparent;
left: -15px;
}
.chat-window {
position: fixed;
bottom: 18px;
}
.chat-window-message {
width: 100%;
height: 48px;
font: 32px/48px 'Noto Sans', sans-serif;
background: none;
color: #0AD5C1;
border: 0;
border-bottom: 1px solid rgba(25, 147, 147, 0.2);
outline: none;
}
/* Small screens */
@media all and (max-width: 767px) {
.chat-thread {
width: 100%;
height: 100%;
}
.chat-window {
left: 5%;
width: 90%;
}
}
/* Medium and large screens */
@media all and (min-width: 768px) {
.chat-thread {
width: 100%;
height: 100%;
}
.chat-window {
left: 25%;
width: 50%;
}
}
@keyframes show-chat-even {
0% {
margin-left: -480px;
}
100% {
margin-left: 0;
}
}
@-moz-keyframes show-chat-even {
0% {
margin-left: -480px;
}
100% {
margin-left: 0;
}
}
@-webkit-keyframes show-chat-even {
0% {
margin-left: -480px;
}
100% {
margin-left: 0;
}
}
@keyframes show-chat-odd {
0% {
margin-right: -480px;
}
100% {
margin-right: 0;
}
}
@-moz-keyframes show-chat-odd {
0% {
margin-right: -480px;
}
100% {
margin-right: 0;
}
}
@-webkit-keyframes show-chat-odd {
0% {
margin-right: -480px;
}
100% {
margin-right: 0;
}
}
.credits{
text-align:center;
margin-top:35px;
color: rgba(255, 255, 255, 0.35);
font-family: 'Noto Sans', sans-serif;
}
.credits a{
text-decoration:none;
color: rgba(255, 255, 255, 0.35);
}

@ -0,0 +1,17 @@
.mui-bar .mui-icon {
font-size: 18px;
position: relative;
z-index: 20;
padding-top: 14px;
padding-bottom: 10px;
}
.mui-bar{
background-color: #03a9f4;
}
.mui-title{
color:#ffffff;
}
header >a{
color:#ffffff;
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

@ -0,0 +1,132 @@
.login-page,.register-page{
padding: 45px 40px 60px;
background-color: #fff;
height: 100vh;
}
.login-from .mui-input-row,.register-page .mui-input-row{
margin-top: 26px;
position: relative;
display: flex;
height: 41px;
line-height: 41px;
align-items: center;
padding: 0 20px;
color: #333;
background: #f8f8f8;
border-radius: 20px;
display: flex;
font-family: PingFang SC;
justify-content: space-between;
}
.login-from .mui-input-row input,.register-page .mui-input-row input,
.createcom .mui-input-row input{
font-size: 14px;
}
.login-from .mui-input-row input::placeholder,.register-page .mui-input-row input::placeholder,
.createcom .mui-input-row input::placeholder{
color: #ccc;
}
.login-from .mui-input-row::after,.register-page .mui-input-row::after{
display: none;
}
.mui-input-group::before,.mui-input-group::after{
display: none;
}
.area {
margin: 20px auto 0px auto;
}
.mui-input-group {
margin-top: 10px;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 22%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin: 0;
margin-top: 25px;
}
.mui-content-padded .btn-login,.btn-register,.btn-confirm{
height: 41px;
line-height: 21px;
background: #fb3a4e;
border-radius: 20px;
font-size: 16px;
font-weight: 500;
color: #fff;
text-align: center;
border: none;
}
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.link-area a{
font-size: 12px;
color: #4c90ff;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
.oauth-area {
position: absolute;
bottom: 20px;
left: 0px;
text-align: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.oauth-area .oauth-btn {
display: inline-block;
width: 50px;
height: 50px;
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
margin: 0px 20px;
/*-webkit-filter: grayscale(100%); */
border: solid 1px #ddd;
border-radius: 25px;
}
.oauth-area .oauth-btn:active {
border: solid 1px #aaa;
}
.oauth-area .oauth-btn.disabled {
background-color: #ddd;
}

@ -0,0 +1,74 @@
* {
font-family:'Microsoft Yahei'
}
#login-form #login-content .suggest-container {
width:246px;
top:46px
}
#login-form #login-content .suggest-container .suggest-item a {
padding:4px 6px;
color:#4d4d4d
}
#login-form #login-content .fm-text {
border-radius:3px;
line-height:16px;
padding:8px 5px;
margin-top:5px;
font-size:14px;
background:transparent
}
#login-form #login-content .fm-text:focus {
background-color:#e9fbfe;
border-color:#69c5dd
}
#login-form #login-content #fm-login-checkcode-update {
color:#00a2ca
}
#login-form #login-content .fm-field-wrap .fm-checkcode-update {
margin-top:10px
}
#login-form #login-content .fm-checkcode-img {
height:35px;
width:83px;
margin-top:7px;
opacity:0.7
}
#login-form #login-content #fm-login-checkcode {
min-width:80px
}
#login-form a:visited,#login-form a:link {
color:#08c
}
.input-focus {
border:1px solid #69C5DD
}
.fm-button {
display:inline-block;
min-width:140px;
height:36px;
padding:0 30px 1px;
background:#e4162d;
border:none;
line-height:32px;
font-size:14px;
color:#fff;
text-align:center;
outline:none;
cursor:pointer;
border-radius:4px
}
.fm-button:hover {
background:#e4162d;
border-color:#e4162d;
border:none
}
.fm-button:active {
background:#e4162d;
border-color:#e4162d
}
.icon-notice {
background-color:#f1f6fa
}
.icon-error {
background-color:#fff3e7
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,715 @@
body.stop-scrolling {
height: 100%;
overflow: hidden; }
.sweet-overlay {
background-color: black;
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE8 */
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: 10000; }
.sweet-alert {
background-color: white;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 478px;
padding: 17px;
border-radius: 5px;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
margin-left: -256px;
margin-top: -200px;
overflow: hidden;
display: none;
z-index: 99999; }
@media all and (max-width: 540px) {
.sweet-alert {
width: auto;
margin-left: 0;
margin-right: 0;
left: 15px;
right: 15px; } }
.sweet-alert h2 {
color: #575757;
font-size: 30px;
text-align: center;
font-weight: 600;
text-transform: none;
position: relative;
margin: 25px 0;
padding: 0;
line-height: 40px;
display: block; }
.sweet-alert p {
color: #797979;
font-size: 16px;
text-align: center;
font-weight: 300;
position: relative;
text-align: inherit;
float: none;
margin: 0;
padding: 0;
line-height: normal; }
.sweet-alert fieldset {
border: none;
position: relative; }
.sweet-alert .sa-error-container {
background-color: #f1f1f1;
margin-left: -17px;
margin-right: -17px;
overflow: hidden;
padding: 0 10px;
max-height: 0;
webkit-transition: padding 0.15s, max-height 0.15s;
transition: padding 0.15s, max-height 0.15s; }
.sweet-alert .sa-error-container.show {
padding: 10px 0;
max-height: 100px;
webkit-transition: padding 0.2s, max-height 0.2s;
transition: padding 0.25s, max-height 0.25s; }
.sweet-alert .sa-error-container .icon {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ea7d7d;
color: white;
line-height: 24px;
text-align: center;
margin-right: 3px; }
.sweet-alert .sa-error-container p {
display: inline-block; }
.sweet-alert .sa-input-error {
position: absolute;
top: 29px;
right: 26px;
width: 20px;
height: 20px;
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.1s;
transition: all 0.1s; }
.sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
content: "";
width: 20px;
height: 6px;
background-color: #f06e57;
border-radius: 3px;
position: absolute;
top: 50%;
margin-top: -4px;
left: 50%;
margin-left: -9px; }
.sweet-alert .sa-input-error::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .sa-input-error::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .sa-input-error.show {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }
.sweet-alert input {
width: 100%;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #d7d7d7;
height: 43px;
margin-top: 10px;
margin-bottom: 17px;
font-size: 18px;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
padding: 0 12px;
display: none;
-webkit-transition: all 0.3s;
transition: all 0.3s; }
.sweet-alert input:focus {
outline: none;
box-shadow: 0px 0px 3px #c4e6f5;
border: 1px solid #b4dbed; }
.sweet-alert input:focus::-moz-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.5; }
.sweet-alert input:focus:-ms-input-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.5; }
.sweet-alert input:focus::-webkit-input-placeholder {
transition: opacity 0.3s 0.03s ease;
opacity: 0.5; }
.sweet-alert input::-moz-placeholder {
color: #bdbdbd; }
.sweet-alert input:-ms-input-placeholder {
color: #bdbdbd; }
.sweet-alert input::-webkit-input-placeholder {
color: #bdbdbd; }
.sweet-alert.show-input input {
display: block; }
.sweet-alert button {
background-color: #AEDEF4;
color: white;
border: none;
box-shadow: none;
font-size: 17px;
font-weight: 500;
-webkit-border-radius: 4px;
border-radius: 5px;
padding: 10px 32px;
margin: 26px 5px 0 5px;
cursor: pointer; }
.sweet-alert button:focus {
outline: none;
box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.sweet-alert button:hover {
background-color: #a1d9f2; }
.sweet-alert button:active {
background-color: #81ccee; }
.sweet-alert button.cancel {
background-color: #D0D0D0; }
.sweet-alert button.cancel:hover {
background-color: #c8c8c8; }
.sweet-alert button.cancel:active {
background-color: #b6b6b6; }
.sweet-alert button.cancel:focus {
box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
.sweet-alert button::-moz-focus-inner {
border: 0; }
.sweet-alert[data-has-cancel-button=false] button {
box-shadow: none !important; }
.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
padding-bottom: 40px; }
.sweet-alert .sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box; }
.sweet-alert .sa-icon.sa-error {
border-color: #F27474; }
.sweet-alert .sa-icon.sa-error .sa-x-mark {
position: relative;
display: block; }
.sweet-alert .sa-icon.sa-error .sa-line {
position: absolute;
height: 5px;
width: 47px;
background-color: #F27474;
display: block;
top: 37px;
border-radius: 2px; }
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 17px; }
.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 16px; }
.sweet-alert .sa-icon.sa-warning {
border-color: #F8BB86; }
.sweet-alert .sa-icon.sa-warning .sa-body {
position: absolute;
width: 5px;
height: 47px;
left: 50%;
top: 10px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-left: -2px;
background-color: #F8BB86; }
.sweet-alert .sa-icon.sa-warning .sa-dot {
position: absolute;
width: 7px;
height: 7px;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-left: -3px;
left: 50%;
bottom: 10px;
background-color: #F8BB86; }
.sweet-alert .sa-icon.sa-info {
border-color: #C9DAE1; }
.sweet-alert .sa-icon.sa-info::before {
content: "";
position: absolute;
width: 5px;
height: 29px;
left: 50%;
bottom: 17px;
border-radius: 2px;
margin-left: -2px;
background-color: #C9DAE1; }
.sweet-alert .sa-icon.sa-info::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
top: 19px;
background-color: #C9DAE1; }
.sweet-alert .sa-icon.sa-success {
border-color: #A5DC86; }
.sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
content: '';
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .sa-icon.sa-success::before {
-webkit-border-radius: 120px 0 0 120px;
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px; }
.sweet-alert .sa-icon.sa-success::after {
-webkit-border-radius: 0 120px 120px 0;
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px; }
.sweet-alert .sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(165, 220, 134, 0.2);
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2; }
.sweet-alert .sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .sa-icon.sa-success .sa-line {
height: 5px;
background-color: #A5DC86;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2; }
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .sa-icon.sa-custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat; }
/*
* Animations
*/
@-webkit-keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7); }
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05); }
80% {
transform: scale(0.95);
-webkit-transform: scale(0.95); }
100% {
transform: scale(1);
-webkit-transform: scale(1); } }
@keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7); }
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05); }
80% {
transform: scale(0.95);
-webkit-transform: scale(0.95); }
100% {
transform: scale(1);
-webkit-transform: scale(1); } }
@-webkit-keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1); }
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5); } }
@keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1); }
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5); } }
@-webkit-keyframes slideFromTop {
0% {
top: 0%; }
100% {
top: 50%; } }
@keyframes slideFromTop {
0% {
top: 0%; }
100% {
top: 50%; } }
@-webkit-keyframes slideToTop {
0% {
top: 50%; }
100% {
top: 0%; } }
@keyframes slideToTop {
0% {
top: 50%; }
100% {
top: 0%; } }
@-webkit-keyframes slideFromBottom {
0% {
top: 70%; }
100% {
top: 50%; } }
@keyframes slideFromBottom {
0% {
top: 70%; }
100% {
top: 50%; } }
@-webkit-keyframes slideToBottom {
0% {
top: 50%; }
100% {
top: 70%; } }
@keyframes slideToBottom {
0% {
top: 50%; }
100% {
top: 70%; } }
.showSweetAlert[data-animation=pop] {
-webkit-animation: showSweetAlert 0.3s;
animation: showSweetAlert 0.3s; }
.showSweetAlert[data-animation=none] {
-webkit-animation: none;
animation: none; }
.showSweetAlert[data-animation=slide-from-top] {
-webkit-animation: slideFromTop 0.3s;
animation: slideFromTop 0.3s; }
.showSweetAlert[data-animation=slide-from-bottom] {
-webkit-animation: slideFromBottom 0.3s;
animation: slideFromBottom 0.3s; }
.hideSweetAlert[data-animation=pop] {
-webkit-animation: hideSweetAlert 0.2s;
animation: hideSweetAlert 0.2s; }
.hideSweetAlert[data-animation=none] {
-webkit-animation: none;
animation: none; }
.hideSweetAlert[data-animation=slide-from-top] {
-webkit-animation: slideToTop 0.4s;
animation: slideToTop 0.4s; }
.hideSweetAlert[data-animation=slide-from-bottom] {
-webkit-animation: slideToBottom 0.3s;
animation: slideToBottom 0.3s; }
@-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px; }
54% {
width: 0;
left: 1px;
top: 19px; }
70% {
width: 50px;
left: -8px;
top: 37px; }
84% {
width: 17px;
left: 21px;
top: 48px; }
100% {
width: 25px;
left: 14px;
top: 45px; } }
@keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px; }
54% {
width: 0;
left: 1px;
top: 19px; }
70% {
width: 50px;
left: -8px;
top: 37px; }
84% {
width: 17px;
left: 21px;
top: 48px; }
100% {
width: 25px;
left: 14px;
top: 45px; } }
@-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px; }
65% {
width: 0;
right: 46px;
top: 54px; }
84% {
width: 55px;
right: 0px;
top: 35px; }
100% {
width: 47px;
right: 8px;
top: 38px; } }
@keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px; }
65% {
width: 0;
right: 46px;
top: 54px; }
84% {
width: 55px;
right: 0px;
top: 35px; }
100% {
width: 47px;
right: 8px;
top: 38px; } }
@-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); }
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); } }
@keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); }
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); } }
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s; }
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s; }
.sa-icon.sa-success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in; }
@-webkit-keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0; }
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1; } }
@keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0; }
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1; } }
.animateErrorIcon {
-webkit-animation: animateErrorIcon 0.5s;
animation: animateErrorIcon 0.5s; }
@-webkit-keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px; }
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1; } }
@keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px; }
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1; } }
.animateXMark {
-webkit-animation: animateXMark 0.5s;
animation: animateXMark 0.5s; }
@-webkit-keyframes pulseWarning {
0% {
border-color: #F8D486; }
100% {
border-color: #F8BB86; } }
@keyframes pulseWarning {
0% {
border-color: #F8D486; }
100% {
border-color: #F8BB86; } }
.pulseWarning {
-webkit-animation: pulseWarning 0.75s infinite alternate;
animation: pulseWarning 0.75s infinite alternate; }
@-webkit-keyframes pulseWarningIns {
0% {
background-color: #F8D486; }
100% {
background-color: #F8BB86; } }
@keyframes pulseWarningIns {
0% {
background-color: #F8D486; }
100% {
background-color: #F8BB86; } }
.pulseWarningIns {
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
animation: pulseWarningIns 0.75s infinite alternate; }
/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
-ms-transform: rotate(45deg) \9; }
.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
-ms-transform: rotate(-45deg) \9; }
/* Success icon */
.sweet-alert .sa-icon.sa-success {
border-color: transparent\9; }
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9; }
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9; }

@ -0,0 +1,817 @@
.nav-full-title{ list-style:none; padding:0;}
.nav-full-title li{ width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
/*控制图片的大小*/
.huoDong-media img{ width:100px; height:100px;}
.font-hdtime{ font-size:14px; color:#000;}
/*页面默认设置*/
body{
font-family:"ff-tisa-web-pro-1",
"ff-tisa-web-pro-2",
"Lucida Grande",
"Helvetica Neue",
Helvetica,
Arial,
"Hiragino Sans GB",
"Hiragino Sans GB W3",
"WenQuanYi Micro Hei",
sans-serif;
}
/*解决win8 IE10 兼容 s*/
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
/*三大模块 共用样式*/
body,html{
height:100%;
background-color:#f5f5f5;
font-family: "Microsoft YaHei";
}
/*重置导航栏下拉消息选框*/
.dropdown-menu{
min-width: 0;
width:auto;
padding:3px;
margin:10px 0px;
}
ul.dropdown-menu li div{
margin: 10px 0;
font-family: "宋体";
}
ul.dropdown-menu li div{
border-bottom: 1px dotted #ccc;
}
/*导航条 搜索框宽度*/
#search-box .popover { max-width: none !important;}
/*自定义徽标 - 标签*/
.badge-bq{
display: inline-block;
min-width: 10px;
padding: 3px 8px;
font-size: 12px;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 10px;
background-color:#ececec;
color:#000;
font-family: "Microsoft YaHei";
}
.badge-zhiye{
border-radius: 4px !important;
color:#337ab7;
font-weight:blod;
cursor:default !important;
}
.badge-bq-huida-list{
display: inline-block;
min-width: 10px;
padding: 3px 6px;
font-size: 12px;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius: 10px;
background-color:#ececec;
color:#000;
font-family: "Microsoft YaHei";
font-weight:normal;
}
.badge-bq:hover{
text-decoration:none;
}
.badge-shengyu{
font-family: 'Arial Normal', 'Arial';
color:#333;
background:#ffcc99;
padding:0 5px;
text-align:center;
font-size:14px;
}
.badge-msg{
font-family:"宋体";
color:#fefefe;
background-color:#000;
}
.badge-more{
margin-top:10px;
color:#111;
padding:0 !important;
}
a.badge-more:hover {
color: #000;
text-decoration: none;
cursor: pointer;
border-radius:25%;
background-color:#e4e4e4; !important;
}
.hide-hidden{
visibility:hidden;
}
.color-red{color:red;}
.color-15c{ color:#1155cc;}
.color-58{ color:#585858;}
.color-heise{color:#000; }
.color-gray{color:gray; }
.color-black{color:#000; font-family:"黑体";}
.pointer{
cursor:pointer;
}
.pointer:hover{
text-decoration:none;
}
/*自定义徽标样式 start */
.badge-self{
padding-left: 8px;
color:#fff;
background-size:100% 100%;
background-repeat: no-repeat;
background-image: url(../img/badgeBg.png);
}
/*面板鼠标悬停效果*/
.panel-liubai{ margin-top:8px;}/*为panel区块顶部留白*/
/*活动 问答 阅读 文字 的鼠标悬浮样式*/
.btn-bankuai{
color:#000;
font-size:14px;
}
.btn-bankuai:hover{
color:#169bd5;
text-decoration:none;
}
/*textarea禁用重置*/
.no-resize{resize:none;}
.no-btmborder{ border-bottom:none;}
.no-border{ border:none;}
.no-row{ padding:0 15px;}
/*名片 start*/
.box-card{
position:absolute;
padding:0;
padding:0;
margin:0;
width:330px;
height:140px;
line-height:20px;
display:none;
font-size:14px;
z-index:10;
}
.panel-card-name{
top:34px;
left:94px;
}
.popover-usercard-head{
/*名片距离父级的距离*/
margin-top:75px;
}
.popover-usercard-content{
font-family:"微软雅黑";
padding:0;
}
.panel-card{
width:330px;
overflow:hidden;
}
img.userCard-head{
width:60px;
height:60px;
}
.card-title{
font-size:16px;
color:#898989;
}
.card-footer{
background-color:#e6e6e6;
}
.card-info{
font-size:14px;
color:#505050;
}
.card-content{
font-size:14px;
color:#8a8a8b;
}
/*名片 end */
.ico{
width: 16px;
height: 16px;
background-image: url("../img/all.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
}
.ico-huodong-over{
background-image: url("../img/over.gif");
background-position: 98% 2px;
background-repeat:no-repeat;
}
.ico-huodong-nostarted{
background-image: url("../img/nostarted.gif");
background-position: 98% 2px;
background-repeat:no-repeat;
}
.ico-huodong-begun{
background-image: url("../img/begun.gif");
background-position: 98% 2px;
background-repeat:no-repeat;
}
.hd_stat{
position:relative;
height:100%;
width:10%;
right:0;
top:0;
background-color:#666;
}
/*图标志 水平翻转*/
.ico-flx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
/*IE*/
filter:FlipH;
}
/*垂直翻转*/
.ico-fly {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
/*IE*/
filter:FlipV;
}
/*性别图标*/
.ico-na{
background-position: -145px -110px;
}
.ico-nv{
background-position: -128px -110px;
}
.ico-dizhi{
background-position: -58px -110px;
}
.ico-guanzhu-a{
background-position: -40px -18px;
}
.ico-guanzhu-b{
background-position: -40px -34px;
}
.ico-zhuiwen{
background-position: -225px -128px;
}
/*面板上的小件*/
.box-wenti-xijie{ margin:5px 0 0 70px;}
.xijie-time{ color:#ccc;}
/*右侧导航区域 */
.copyRight li{ padding:5px; }
.nav-right p{ font-size:14px; font-weight:bold; line-height: 20px;}
/*底部版权*/
.navbar-yb-bottom .pull-right{
padding:0 8px;
}
.navbar-yb-bottom{
height:25px;
line-height:25px;
}
/*右侧导航区域 下的标签 start*/
.box-biaoqian {
background-color:#fafafa;
border:1px solid #e6e6e6;
}
/*对字体图标大小的控制*/
.font-logo{ font-size:10px; margin-right:2px;}
/*免费标记样式*/
sup span.mianfei{
background:#DFF0D8;
padding:0 5px;
border-radius:8px;
display:inherit;
}
/*返回顶部样式 start*/
.backTop-arrow{
width: 0;
height: 0;
top: -1px;
margin-left:32%;
border: 9px solid transparent;
border-bottom-color: #aaa;
}
.backTop-stick{
width: 8px;
height: 14px;
top: 15px;
margin-left:43%;
border-radius: 1px;
background-color: #aaa;
}
.backTop{
position: fixed;
bottom: 113px;
right: 3%;
z-index: 333;
margin-left: 230px;
width:45px;
height:45px;
background-color:#ccc;
border-radius:30%;
cursor:pointer;
}
/*返回顶部样式 end*/
.full{
width:100%;
height:100%;
}
/*css自定义隐藏*/
.hide-self{ display:none; list-style:none;}
.font-block{ color:#000;}
.point-red{
height: 3px;
width: 3px;
background-color: red;
border-radius: 50%;
float: left;
margin-top: 15px;
margin-right: 5px;
margin-left: 5px;
}
.point-white{
height: 6px;
width: 6px;
background-color: none;
border-radius:50%;
float: left;
margin-top: 5px;
margin-right: 5px;
}
.check-width li{
width:100%;
line-height:30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.float-left{ float:left;}
.float-right{ float:right;}
/*分割线*/
.fenge-line,.splite-line{ width:100%; height:1px; border-bottom:1px solid #dbdcde; margin-bottom:8px;}
/*搜索框容器 start*/
#btn-search:active,#btn-search:hover{
border:none !important;
background:none !important;
background-color:none !important;
}
.popover{
border:none;
background-color:#f5f5f5;
}
.popover-search{
width:600px;
left:600px;
margin-right:45px;
color:red;
}
#biaoqian-box{ display:none;}
/*搜索框容器 end*/
p.font-customer-zhengwen{ font-size:16px; font-family:"宋体"; color:#555;}
/*文章详情的标题*/
.box-yuedu-title{ color:#333; font-family:"微软雅黑"; background-color:#fefefe;}
.box-yuedu-title sub{ font-family:"宋体"; }
/*文章图片大小控制*/
img.wenzhang{
width:100%;
height:300px;
}
.img-huodongaddr-biaozhi{
width:50%;
}
.img-huodongaddr-baidu{
width:60%;
}
.img-full{
width:100%;
height:100%;
}
.box-huodong-jianjie{
padding-left:20px;
color:#223355;
font-family:"微软雅黑";
}
.box-huodong-jianjie h2{
font-family:"黑体";
}
.huodong-zhuban-logo{
width:40px;
}
#box-huodong-xunwenform{
display:none;
}
.no-border{
border:none;
}
.alert-default{ border-bottom:1px solid #c0c0c0; padding-bottom:5px;}
.mouse-help{ cursor:help;}
.no-padding,.no-Padding{ padding:0 !important; }
.no-margin{margin:0; !important}
.no-margin-b{margin-bottom:0; border:none;}
.no-margin-c{margin-bottom:0; margin-top:3px; border:none;}
.no-margin-d{margin-bottom:0; margin-top:10px;}
.badge-yb{
font-family:'Arial Normal','Arial';
text-align:center;
cursor:pointer;
padding:2px 6px;
margin:3px 0;
background-color:#f5f5f5;
border:1px solid #fff;
border-radius:35px;
}
.badge-yb:hover{
border:1px solid #c0c0c0;
}
.badge-yb-more{
font-family:'Arial Normal','Arial';
text-align:center;
cursor:pointer;
padding:4px 12px;
margin:6px 0;
background-color:#fafafa;
border:1px solid #E6E6E6;
border-radius:35px;
}
.badge-yb-more:hover{
text-decoration:none;
}
.badge-yb-nobg{
background-color:#f5f5f5;
}
.btn-win-jibao{padding:6px 40px;}
.checkbox label.check-btn{
margin-right:30px;
}
.huodong-title{
font-size:20px;
font-family:"微软雅黑";
font-weight:bold;
}
.dibu-banquan{
height:30px;
line-height:30px;
background:#ddd;
border-radius:6px;
}
.panel-huifu{
padding-left:40px;
}
.wenzhang-biaoti{
font-size:24px;
font-family:"Microsoft YaHei";
font-weight:700;
}
/*回答缩进*/
.panel-huidalist,.panel-huidalist-a{
padding-left:3%;
}
.panel-huidalist-b{
margin-left:15px;
}
/*文章的标题*/
span.text-info a{
font-size:14px;
font-family:"宋体";
}
/*鼠标悬浮提示框*/
.tooltip-inner{
color:#000;
background-color:#f5f5f5;
}
.tooltip.in{
filter:alpha(opacity=100);
opacity:1.0;
}
/*活动相关横条*/
.huodong-hengtiao{
padding:0px 15px;
}
.huodong-hengtiao .row{
background-color:#c0c0c0;
}
.huodong-hengtiao .row h3{
line-height:32px;
}
#win-update-pwd{
/*margin-top:5%;*/
}
/*活动描述加链接*/
.media-body p a{
color: #000;
text-decoration:none;
}
.media-body p a:hover{
text-decoration:none;
}
.loaddiv span{
color: white;
font-size: 16px;
position: absolute;
width: 100%;
text-align: center;
}
.loaddiv{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: black;
background-image: url(../img/loadicon.gif);
background-repeat: no-repeat;
background-position: 50% 0px;
background-size: 64px 64px;
position: fixed;
left: 0px;
top: 0px;
opacity: 0.4;
z-index: 999999;
display: none;
}
.removeoverflow
{
overflow: hidden;
}
/*地图内部组件*/
.mapbox-shuoming{width:120px; line-height:1.5;font-size:13px;text-indent:2em;}
.mapbox-img{ width:80px; float:right; }
#box-pic-map{ height:250px; width:250px;}
/*协议盒子*/
.no-line{
text-decoration:none;
}
.no-line:hover{
text-decoration:none;
}
.under-line{
text-decoration:underline;
}
.under-line:hover,.no-line:hover{
text-decoration:none;
}
.small-margin{
margin:5px 0;
}
/*百度地图 start */
#box-baidu-map{
background-img:url(../img/load.gif);
background-repeat: no-repeat;
}
/*百度地图 end */
.indent{
text-indent:2em;
}
/*新手帮助 start*/
.pic{
width:100%;
height:520px;
}
/*新手帮助 end*/
/*验证码 */
#refRcode{ width:100%; height:35px; background-repeat:no-repeat; background-position:8px;}
/*文字处理*/
.warp{
word-wrap:break-word;
white-space:normal;
}
/*提问相关*/
.wenti-fenlei-box .popover-content{
height:325px;
overflow-y:auto;
}
#searchTable{ height:600px; overflow-y:auto;}
.dropdown-menu {
min-width: 100%;
}
/* 页面与通用元素样式 start */
/* 页面与通用元素样式 end */
/*禁止切换输入法*/
.no-zh{
ime-mode:Disabled;
}
.yb-disabled{
cursor: not-allowed;
}
/*菜单,按钮*/
.yb-menu,.yb-btn{
font-family: "Microsoft YaHei";
font-size:16px;
}
/*一级加粗*/
.yb-bold{
font-weight:bold;
}
/*二级加粗*/
.yb-bolder{
font-weight:bolder;
}
/*主强调*/
.yb-qiangdiao-a{
color:#3e3d3d;
}
/*次强调*/
.yb-qiangdiao-b{
color:#898989;
}
.yb-biaoti{
color:#505050;
}
/*正文*/
.yb-zhengwen{
font-family: '宋体 Regular', '宋体';
color:#8a8a8b;
}
/*字体*/
.yb-yahei{
font-family: '微软雅黑';
color:#8a8a8b;
}
/*消息提示*/
.yb-tip{
color:#a0a0a0;
background:#f86100;
color:#fff;
}
/*警示性文本*/
.yb-tip-warning{
color:#f86100;
}
/*提示性文本,带有链接*/
.yb-tip a{
color:#29528b;
text-decoration:underline;
}
/*输入框高度*/
.yb-input{
height:30px;
}
/*字体大小*/
.yb-font6{ font-size:16px;}
.yb-font4{ font-size:14px;}
.yb-font2{ font-size:12px;}
.head-self{
width:30px;
height:30px;
}
.yb-gongyue{
font-family:microsoft yahei;
border-top:none;
font-size: 20px;
line-height:48px;
background-color: #1392A1;
color: #000;
padding:0 8px;
}
html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{background: #FFF;color:#000;}
body,button,input,select,textarea,h2,h3,h4,h5,h6{font:14px 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial}
img,fieldset{border:0;vertical-align:middle}
input{padding:0;margin:0;outline:none;}
a{text-decoration:none;color:#4c4c4c;}
a:hover{text-decoration:none;}
ul,li,ol{list-style:none}
img{max-width:100%;}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden}
.clearfix:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;zoom:1;}
.l{float:left;}.r{float:right;}
/*reset样式重置*/
.menwrap{position:fixed;right:0;bottom:0;width:100%;height:50px;z-index:4;}
/*.btn-open-close{margin-top:5px;margin-right:5px;float:right;width:40px;height:40px;line-height:50px;border-radius:20px;-webkit-border-radius:20px;background:#000 url(ex11.png) no-repeat center center;background-size:20px 20px;opacity:0.5;box-sizing:border-box;-webkit-box-sizing:border-box;}*/
.expan3{width:50px;height:50px;margin-top:0;margin-right:0;border-radius:0;-webkit-border-radius:0;opacity:1;border-top:1px solid #b3b3b3;border-left:1px solid #b3b3b3;background:#e6e6e6;box-sizing:border-box;-webkit-box-sizing:border-box;}
/*.expan4{width:40px;height:40px;margin-left:4px;margin-top:4px;background:#000 url(ex11.png) no-repeat center center;background-size:20px 20px;border-radius:20px;-webkit-border-radius:20px;opacity:0.5;display:none;}*/
.btn4{position:relative;z-index:3;bottom:0;border-top:1px solid #b3b3b3;background:#e6e6e6;text-align:center;box-sizing:border-box;-webkit-box-sizing:border-box;display:block;}
.menu{position:relative;float:left;width:25%;height:50px;line-height:40px;background:#e6e6e6;border-right:1px solid #b3b3b3;box-sizing:border-box;-webkit-box-sizing:border-box;}
.menu:last-child{border-right:none;}
.new-sub{position:absolute;bottom:50px;z-index:-1;width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;display:none;}
.new-sub li{background:#e6e6e6;float:none;box-sizing:border-box;-webkit-box-sizing:border-box;border-bottom:1px solid #b3b3b3;border-top:1px solid #f2f2f2;}
.new-sub li a{display:block;height:50px;line-height:50px;text-align:left;background:#e6e6e6;color:#333;border:none;text-align:center;font-size:16px;}
.btn-fullbg{width:100%;height:100%;background:rgba(0,0,0,.2);position:fixed;top:0;left:0;z-index:2;display:none;}
.sanjiao{position:absolute;bottom:5px;right:5px;width:0;height:0;border:5px solid transparent;border-right:5px solid #000;border-bottom:5px solid #000;opacity:.5;}
.bt-name{font-size:16px;color:#000;}
.bt-name a{display:block;font-size:16px;color:#000;}

Binary file not shown.

Binary file not shown.

@ -0,0 +1,539 @@
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path stroke viewBox IE
normalize.css */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

@ -0,0 +1,483 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xf00bb;</span>
<div class="name">账户</div>
<div class="code-name">&amp;#xf00bb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xf0137;</span>
<div class="name">图片</div>
<div class="code-name">&amp;#xf0137;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xf0162;</span>
<div class="name">视频</div>
<div class="code-name">&amp;#xf0162;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe678;</span>
<div class="name">电话_填充</div>
<div class="code-name">&amp;#xe678;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe726;</span>
<div class="name">加号</div>
<div class="code-name">&amp;#xe726;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe784;</span>
<div class="name">红包</div>
<div class="code-name">&amp;#xe784;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e1;</span>
<div class="name">语音</div>
<div class="code-name">&amp;#xe6e1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">键盘</div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe667;</span>
<div class="name">Expression-1</div>
<div class="code-name">&amp;#xe667;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8d1;</span>
<div class="name">237拍照</div>
<div class="code-name">&amp;#xe8d1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65e;</span>
<div class="name">导航地址</div>
<div class="code-name">&amp;#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bd;</span>
<div class="name">发送</div>
<div class="code-name">&amp;#xe6bd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe663;</span>
<div class="name">转账</div>
<div class="code-name">&amp;#xe663;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持两种方式引用多色图标SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf?t=1656507676256') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-zhanghu"></span>
<div class="name">
账户
</div>
<div class="code-name">.icon-zhanghu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tupian"></span>
<div class="name">
图片
</div>
<div class="code-name">.icon-tupian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shipin"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-shipin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianhuatianchong"></span>
<div class="name">
电话_填充
</div>
<div class="code-name">.icon-dianhuatianchong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiahao"></span>
<div class="name">
加号
</div>
<div class="code-name">.icon-jiahao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hongbao"></span>
<div class="name">
红包
</div>
<div class="code-name">.icon-hongbao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuyin"></span>
<div class="name">
语音
</div>
<div class="code-name">.icon-yuyin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jianpan"></span>
<div class="name">
键盘
</div>
<div class="code-name">.icon-jianpan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-7biaoqing-1"></span>
<div class="name">
Expression-1
</div>
<div class="code-name">.icon-7biaoqing-1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-paizhao"></span>
<div class="name">
237拍照
</div>
<div class="code-name">.icon-paizhao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daohangdizhi"></span>
<div class="name">
导航地址
</div>
<div class="code-name">.icon-daohangdizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fasong"></span>
<div class="name">
发送
</div>
<div class="code-name">.icon-fasong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhuanzhang"></span>
<div class="name">
转账
</div>
<div class="code-name">.icon-zhuanzhang
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhanghu"></use>
</svg>
<div class="name">账户</div>
<div class="code-name">#icon-zhanghu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tupian"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icon-tupian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipin"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-shipin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianhuatianchong"></use>
</svg>
<div class="name">电话_填充</div>
<div class="code-name">#icon-dianhuatianchong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiahao"></use>
</svg>
<div class="name">加号</div>
<div class="code-name">#icon-jiahao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-hongbao"></use>
</svg>
<div class="name">红包</div>
<div class="code-name">#icon-hongbao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuyin"></use>
</svg>
<div class="name">语音</div>
<div class="code-name">#icon-yuyin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jianpan"></use>
</svg>
<div class="name">键盘</div>
<div class="code-name">#icon-jianpan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-7biaoqing-1"></use>
</svg>
<div class="name">Expression-1</div>
<div class="code-name">#icon-7biaoqing-1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-paizhao"></use>
</svg>
<div class="name">237拍照</div>
<div class="code-name">#icon-paizhao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daohangdizhi"></use>
</svg>
<div class="name">导航地址</div>
<div class="code-name">#icon-daohangdizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fasong"></use>
</svg>
<div class="name">发送</div>
<div class="code-name">#icon-fasong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhuanzhang"></use>
</svg>
<div class="name">转账</div>
<div class="code-name">#icon-zhuanzhang</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>

@ -0,0 +1,65 @@
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1656507676256') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-zhanghu:before {
content: "\f00bb";
}
.icon-tupian:before {
content: "\f0137";
}
.icon-shipin:before {
content: "\f0162";
}
.icon-dianhuatianchong:before {
content: "\e678";
}
.icon-jiahao:before {
content: "\e726";
}
.icon-hongbao:before {
content: "\e784";
}
.icon-yuyin:before {
content: "\e6e1";
}
.icon-jianpan:before {
content: "\e608";
}
.icon-7biaoqing-1:before {
content: "\e667";
}
.icon-paizhao:before {
content: "\e8d1";
}
.icon-daohangdizhi:before {
content: "\e65e";
}
.icon-fasong:before {
content: "\e6bd";
}
.icon-zhuanzhang:before {
content: "\e663";
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,100 @@
{
"id": "",
"name": "",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "1116",
"name": "账户",
"font_class": "zhanghu",
"unicode": "f00bb",
"unicode_decimal": 983227
},
{
"icon_id": "1240",
"name": "图片",
"font_class": "tupian",
"unicode": "f0137",
"unicode_decimal": 983351
},
{
"icon_id": "1283",
"name": "视频",
"font_class": "shipin",
"unicode": "f0162",
"unicode_decimal": 983394
},
{
"icon_id": "145699",
"name": "电话_填充",
"font_class": "dianhuatianchong",
"unicode": "e678",
"unicode_decimal": 59000
},
{
"icon_id": "577312",
"name": "加号",
"font_class": "jiahao",
"unicode": "e726",
"unicode_decimal": 59174
},
{
"icon_id": "579598",
"name": "红包",
"font_class": "hongbao",
"unicode": "e784",
"unicode_decimal": 59268
},
{
"icon_id": "993873",
"name": "语音",
"font_class": "yuyin",
"unicode": "e6e1",
"unicode_decimal": 59105
},
{
"icon_id": "1025053",
"name": "键盘",
"font_class": "jianpan",
"unicode": "e608",
"unicode_decimal": 58888
},
{
"icon_id": "1299910",
"name": "Expression-1",
"font_class": "7biaoqing-1",
"unicode": "e667",
"unicode_decimal": 58983
},
{
"icon_id": "1727477",
"name": "237拍照",
"font_class": "paizhao",
"unicode": "e8d1",
"unicode_decimal": 59601
},
{
"icon_id": "5353505",
"name": "导航地址",
"font_class": "daohangdizhi",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "8361763",
"name": "发送",
"font_class": "fasong",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "15727005",
"name": "转账",
"font_class": "zhuanzhang",
"unicode": "e663",
"unicode_decimal": 58979
}
]
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 491 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 852 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 652 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 240 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 502 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 394 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 950 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 381 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 809 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 439 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 962 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save