*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 微软雅黑; list-style: none; text-decoration: none; } body{ background-color: #EEEDED; } header{ width: 1200px; display: flex; line-height: 50px; height: 60px; padding: 5px 0; justify-content: space-between; margin: 0 auto; } .user_avatar{ width: 44px; height: 40px; border-radius: 50%; background-color: #000; margin-left: 5px; line-height: 40px; text-align: center; font-weight: 600; font-size: 13px; display: inline-block; color: #fff; } .logo{ /* width: 40px; */ height: 100%; /* border-radius: 5px; */ /* margin-top: 5px; */ margin-left: 15px; } header a{ color: #000; text-decoration: none; font-weight: 500; font-size: 14px; } .nav{ /* width: 1200px; */ /* max-width: 55%; */ /* text-align: center; */ } .nav a{ line-height: 40px; height: 40px; margin: 0 5px; padding: 0 20px; display: inline-block; border-radius: 30px; } .nav a:hover{ color: #fff; transition: all 0.5s; background-color: #000; border-radius: 20px; } .nav .act{ background-color: #000; color: #fff; font-weight: 600; /* transform: skew(-10deg); */ } .login img{ border-radius: 50%; position: relative; top: 10px; } .login div>a{ background-color: #000; color: #fff; display: inline-block; width: 125px; height: 40px; text-align: center; line-height: 40px; border-radius: 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 10px; position: absolute; width: 130px; right: 5px; visibility: hidden; /* text-align: center; */ } .menu ul li:hover{ background-color: #f5f5f5; cursor: pointer; } .phone{ display: none; } .content{ width: 1200px; max-width: 100%; margin: 0 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: 0 0 16px; 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: 31%; 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: 100%; height: 40px; border: none; background-color: #000; color: #fff; font-weight: 600; border-radius: 10px; 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%; line-height: 40px; } .navtation a{ color: #0760C7; } .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; } footer{ background-color: #000; padding-top: 30px; } footer ul{ display: flex; justify-content: center; flex-wrap: wrap; width: 1200px; margin: 0 auto; } footer li{ width: 25%; color: #fff; line-height: 40px; font-size: 14px; } footer a{ display: block; color: #fff; font-size: 14px; } footer p{ color: #fff; text-align: center; padding: 20px 0; font-size: 12px; } @media screen and (max-width: 768px){ footer li{ width: 32%; /* padding: 0 5px; */ } footer .contact{ width: 100%; font-size: 13px; line-height: 20px; } .content{ padding: 0 15px; } .index .left li{ width: 100%; } .left,.right{ width: 100% !important; margin-bottom: 10px; } .nav{ display: none; } .phone{ display: inline-block; } .pc{ display: none; } .logo{ height: 30px; margin-left: 5px; margin-top: 0; } .left_nav{ padding-top: 10px; } }