*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 微软雅黑; list-style: none; text-decoration: none; } body{ background-color: #EEEDED; } header{ background-color: #FDC606; display: flex; line-height: 50px; height: 60px; padding: 5px 15px; justify-content: space-between; box-shadow: 0px 0px 4px 0 rgba(0,0,0,.5); } .logo{ width: 40px; height: 40px; border-radius: 5px; margin-top: 5px; } header a{ color: #000; text-decoration: none; font-weight: 500; } .nav{ width: 1200px; max-width: 80%; /* text-align: center; */ } .nav a{ line-height: 40px; height: 40px; margin: 0 20px; padding: 0 20px; display: inline-block; border-radius: 30px 15px 30px 15px; } /* .nav a:hover{ color: #fff; transition: all 0.5s; } */ .nav .act{ background-color: #000; color: #fff; transform: skew(-10deg); } .login img{ border-radius: 50%; position: relative; top: 10px; } .login a{ padding: 0 10px; } .menu{ display: inline-block; position: relative; padding: 0 10px; width: 100px; cursor: pointer; } .menu:hover ul{ visibility: visible; transition: .3s; } .menu ul{ background-color: #fff; border-radius: 4px; color: #333; font-size: 13px; line-height: 28px; padding: 5px; position: absolute; width: 130px; right: 5px; visibility: hidden; } .menu ul li:hover{ background-color: #f5f5f5; cursor: pointer; } .phone{ display: none; } .content{ width: 1200px; max-width: 100%; margin: 16px auto; display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 14px; } .left{ width: 75%; } .right{ width: calc(25% - 20px); } .banner{ height: 158px; background-color: #fff; text-align: center; color: #fff; line-height: 150px; margin-bottom: 16px; border-radius: 10px; overflow: hidden; } .part{ background-color: #fff; padding: 35px; box-shadow: 0px 0px 4px 0 rgba(0,0,0,.1); margin: 16px 0; border-radius: 10px; } .title{ font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 20px; position: relative; } .title span{ position: relative; z-index: 9; border-bottom: 13px solid #F6C845; display: inline-block; line-height: 2px; } .list{ display: flex; flex-wrap: wrap; /* justify-content: space-between; */ } .list li{ width: 48%; /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ /* line-height: 50px; */ } .list li a{ color: #333; text-decoration: none; font-weight: 500; } .list li a:hover{ color: #0760C7; } .index .left li{ background-image: linear-gradient(to top,#FFFFFF,#E9EDFD); border-radius: 10px; height: 92px; width: 23%; padding: 15px; position: relative; padding-left: 50px; margin-bottom: 20px; box-shadow: 0 6px 5px 1px rgba(0,0,0,.1); line-height: 25px; display: table; border: 1px solid #fff; margin: 10px 1%; } .index .left li div{ display: table-cell; vertical-align: middle; } .index .left li a{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 限制显示的行数为2 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 显示省略号 */ max-height: 50px; } .index .left li::before{ content: ''; width: 20px; height: 20px; background-image: url(../img/1.png); background-size: 100%; position: absolute; top: 35px; left: 10px; } .index .left li:hover{ border: 1px solid #C9D8F0; } .more{ display: block; /* background-color: #000; */ color: #2268D0; padding: 10px 0; text-align: center; margin: 15px auto; border-radius: 3px; width: 200px; font-size: 16px; font-weight: 600; } .sec_title{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } .sec_title span{ font-size: 16px; border-bottom: 7px solid #FDC606; display: inline-block; line-height: 7px; } .sec_title a{ font-size: 13px; color: #0760C7; font-weight: 600; position: relative; top: -4px; } .list_100 li{ width: 100%; display: flex; line-height: 40px !important; justify-content: space-between; } .list_100 li span{ color: #a9abad; font-size: 13px; position: relative; padding-left: 20px; display: inline-block; width: 40px; text-align: center; } .list_100 li span::before{ content: ''; width: 15px; height: 15px; background-image: url(../img/2.jpg); background-size: 100%; position: absolute; left: 0; top: 10px; } .comment textarea{ width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 3px; padding: 10px; margin-bottom: 15px; outline: none; } .form{ text-align: center; } .form input,.form textarea{ width: 100%; height: 45px; border: 1px solid #ccc; border-radius: 10px; padding: 0 10px; margin-bottom: 15px; outline: none; } input::-webkit-input-placeholder{ color: #BBBBBB; } .form textarea{ height: 220px; padding: 10px; border: 2px solid #3473F6; } .form button{ width: 150px; height: 40px; border: none; background-color: #000; color: #fff; font-weight: 600; border-radius: 3px; outline: none; } .form button:hover{ background-color: #333; cursor: pointer; transition: .3s; } input:focus{ border:2px solid #0760C7; } .page{ text-align: center; padding: 10px 0; } .page button{ background: none; border: 1px solid #ccc; border-radius: 3px; padding: 5px 7px; margin: 0 20px; font-size: 13px; } .page button:hover{ color: #fff; background-color: #0760C7; transition: .5s; border-color: #0760C7; cursor: pointer; } .page b{ color: #0760C7; } .navtation{ margin: 20px 0 0; width: 100%; } .navtation a{ color: #0760C7; } footer{ height: 200px; background-color: #000; } .slide{ background-color: #fff; width: 150px; position: absolute; top: 60px; left: 0; } .slide a{ display: block; color: #333; line-height: 30px; border-bottom: 1px solid #f5f5f5; padding: 10px 20px; } .slide-enter-from,.slide-leave-to{ transform: translateX(-100%); } .slide-enter-active,.slide-leave-active{ transition: .5s; } @media screen and (max-width: 768px){ .content{ padding: 0 15px; } .left,.right{ width: 100% !important; margin-bottom: 10px; } .nav{ display: none; } .phone{ display: inline-block; } .pc{ display: none; } .logo{ width: 30px; height: 30px; margin-left: 5px; margin-top: 0; } .left_nav{ padding-top: 10px; } }