* {
    padding: 0;
    margin: 0;
    list-style: none;
    /*font-family: system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;*/
	font-family: "Verdana", sans-serif;
	/*font-family: "Lucida Sans Unicode", sans-serif;*/
}

body {
    background: #eee;
}

#app {
    margin-bottom: 50px;
}


/* 大屏幕设备（如台式电脑） */
@media screen and (min-width: 1024px) {
    .header {
        position: fixed;
        top: 0;
        height: 65px;
        width: 100%;
        background: #fff;
        box-shadow: 0 0 10px #ddd;
    }
    
    .header-content {
        width: 45%;
        display: flex;
        margin: 0 auto;
    }
    
    .header-logo {
        width: 65px;
        height: 65px;
    }
    .header-logo img {
        width: 45px;
        height: 45px;
        margin: 10px 0 0 0;
        border-radius: 100%;
    }
    .header-title {
        flex: 1;
        height: 65px;
        font-size: 20px;
        line-height: 65px;
    }
    .header-right {
        flex: 1;
    }
    .header-right a {
        text-decoration: none;
        line-height: 65px;
        float: right;
        margin-left: 20px;
        color: #666;
    }
    .header-right a:hover {
        text-decoration: none;
        line-height: 65px;
        float: right;
        margin-left: 20px;
        color: #576b95;
    }
    
    .artcle-list {
        width: 45%;
        background: #fff;
        margin: 100px auto 0;
    }
    
    .artcle-list ul li {
        width: 95%;
        padding: 20px;
        border-bottom: 1px dashed #ccc;
    }
    .artcle-list ul li .artcle-title {
        font-size: 19px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .artcle-list ul li .artcle-title a {
        text-decoration: none;
        color: #333;
        transition: 0.2s;
    }
    .artcle-list ul li .artcle-title a:hover {
        transition: 0.2s;
        color: #1758ee;
    }
    .artcle-list ul li .artcle-desc {
        font-size: 14px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #999;
        margin: 10px 0;
    }
    .artcle-list ul li .artcle-data {
        border-top: 1px solid #eee;
        margin-top: 10px;
        padding-top: 10px;
        font-size: 14px;
        color: #666;
    }
    
    .pagination {
        width: 120px;
        border-radius: 10px;
        margin: 20px auto;
        background: #ddd;
        font-size: 22px;
        text-align: center;
    }
    .pagination a {
        display: block;
        text-decoration: none;
        padding: 10px 20px;
        color: #666;
    }
    
    .artcle-info {
        width: calc(45% - 40px);
        background: #fff;
        margin: 100px auto 0;
        padding: 20px;
    }
    .artcle-info .artcle-title {
        font-size: 22px;
    }
    .artcle-info .artcle-data {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 14px;
        color: #666;
    }
    
    .artcle-content {
        width: 100%;
        margin: 20px auto 0;
        line-height: 26px;
        word-wrap: break-word;
    }
    .artcle-content img {
        max-width: 100%;
        display: block;
    }
    .artcle-content a {
        text-decoration: none;
        color: #576b95;
    }
    .noData {
        padding: 20px;
        text-align: center;
    }
    .footer {
        text-align: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 50px;
    }
    .footer .beian{
        text-decoration: none;
        color: #666;
    }
}

/* 平板设备 */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    .header {
        position: fixed;
        top: 0;
        height: 65px;
        width: 100%;
        background: #fff;
        box-shadow: 0 0 10px #ddd;
    }
    
    .header-content {
        width: 90%;
        display: flex;
        margin: 0 auto;
    }
    
    .header-logo {
        width: 45px;
        height: 65px;
    }
    .header-logo img {
        width: 35px;
        height: 35px;
        margin: 15px 0 0 0;
        border-radius: 100%;
    }
    .header-title {
        flex: 1;
        height: 65px;
        font-size: 18px;
        line-height: 65px;
    }
    .header-right a {
        text-decoration: none;
        line-height: 65px;
        float: right;
        margin-left: 20px;
        color: #666;
    }
    .header-right a:hover {
        text-decoration: none;
        line-height: 65px;
        float: right;
        margin-left: 20px;
        color: #576b95;
    }
    
    .artcle-list {
        width: 90%;
        background: #fff;
        margin: 100px auto 0;
    }
    
    .artcle-list ul li {
        width: 90%;
        padding: 20px;
        border-bottom: 1px dashed #ccc;
    }
    .artcle-list ul li .artcle-title {
        font-size: 19px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .artcle-list ul li .artcle-title a {
        text-decoration: none;
        color: #333;
        transition: 0.2s;
    }
    .artcle-list ul li .artcle-title a:hover {
        transition: 0.2s;
        color: #1758ee;
    }
    .artcle-list ul li .artcle-desc {
        font-size: 14px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #999;
        margin: 10px 0;
    }
    .artcle-list ul li .artcle-data {
        border-top: 1px solid #eee;
        margin-top: 10px;
        padding-top: 10px;
        font-size: 14px;
        color: #666;
    }
    
    .pagination {
        width: 120px;
        border-radius: 10px;
        margin: 20px auto;
        background: #ddd;
        font-size: 22px;
        text-align: center;
    }
    .pagination a {
        display: block;
        text-decoration: none;
        padding: 10px 20px;
        color: #666;
    }
    
    .artcle-info {
        width: calc(90% - 40px);
        background: #fff;
        margin: 100px auto 0;
        padding: 20px;
    }
    .artcle-info .artcle-title {
        font-size: 20px;
    }
    .artcle-info .artcle-data {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 14px;
        color: #666;
    }
    
    .artcle-content {
        width: 100%;
        margin: 20px auto 0;
        line-height: 26px;
        word-wrap: break-word;
    }
    .artcle-content img {
        max-width: 100%;
        display: block;
    }
    .artcle-content a {
        text-decoration: none;
        color: #576b95;
    }
    .noData {
        padding: 20px;
        text-align: center;
    }
    .footer {
        text-align: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 50px;
    }
    .footer .beian{
        text-decoration: none;
        color: #666;
    }
}

/* 手机设备 */
@media screen and (max-width: 767px) {
    .header {
        position: fixed;
        top: 0;
        height: 65px;
        width: 100%;
        background: #fff;
        box-shadow: 0 0 10px #ddd;
    }
    
    .header-content {
        width: 90%;
        display: flex;
        margin: 0 auto;
    }
    
    .header-logo {
        width: 45px;
        height: 65px;
    }
    .header-logo img {
        width: 35px;
        height: 35px;
        margin: 15px 0 0 0;
        border-radius: 100%;
    }
    .header-title {
        flex: 1;
        height: 65px;
        font-size: 18px;
        line-height: 65px;
    }
    .header-right a {
        text-decoration: none;
        line-height: 65px;
        float: right;
        margin-left: 20px;
        color: #666;
    }
    .header-right a:hover {
        text-decoration: none;
        line-height: 65px;
        float: right;
        margin-left: 20px;
        color: #576b95;
    }
    
    .artcle-list {
        width: 90%;
        background: #fff;
        margin: 100px auto 0;
    }
    
    .artcle-list ul li {
        width: 90%;
        padding: 20px;
        border-bottom: 1px dashed #ccc;
    }
    .artcle-list ul li .artcle-title {
        font-size: 19px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .artcle-list ul li .artcle-title a {
        text-decoration: none;
        color: #333;
        transition: 0.2s;
    }
    .artcle-list ul li .artcle-title a:hover {
        transition: 0.2s;
        color: #1758ee;
    }
    .artcle-list ul li .artcle-desc {
        font-size: 14px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #999;
        margin: 10px 0;
    }
    .artcle-list ul li .artcle-data {
        border-top: 1px solid #eee;
        margin-top: 10px;
        padding-top: 10px;
        font-size: 14px;
        color: #666;
    }
    
    .pagination {
        width: 120px;
        border-radius: 10px;
        margin: 20px auto;
        background: #ddd;
        font-size: 22px;
        text-align: center;
    }
    .pagination a {
        display: block;
        text-decoration: none;
        padding: 10px 20px;
        color: #666;
    }
    
    .artcle-info {
        width: calc(90% - 40px);
        background: #fff;
        margin: 100px auto 0;
        padding: 20px;
    }
    .artcle-info .artcle-title {
        font-size: 20px;
    }
    .artcle-info .artcle-data {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 14px;
        color: #666;
    }
    
    .artcle-content {
        width: 100%;
        margin: 20px auto 0;
        line-height: 26px;
        word-wrap: break-word;
    }
    .artcle-content img {
        max-width: 100%;
        display: block;
    }
    .artcle-content a {
        text-decoration: none;
        color: #576b95;
    }
    .noData {
        padding: 20px;
        text-align: center;
    }
    .footer {
        text-align: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 50px;
    }
    .footer .beian{
        text-decoration: none;
        color: #666;
    }
}

.action-btn {
   background: #eee;
   color: #666;
   font-size: 15px;
   padding: 5px 10px;
   text-decoration: none;
   float: right;
   margin-left: 8px;
}