首页模板
parent
e28d3b73b2
commit
944a21a75a
|
|
@ -31,6 +31,42 @@ body {
|
|||
width: 430px;
|
||||
}
|
||||
|
||||
.h5-search{
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
height: .6rem;
|
||||
border: 1px solid #506a84;
|
||||
border-radius: .1rem;
|
||||
margin-top: .3rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.w-full{
|
||||
width: 100%;
|
||||
}
|
||||
.h5-search input{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0 .2rem;
|
||||
font-size: .18rem;
|
||||
position: relative;
|
||||
}
|
||||
.h5-search .icon{
|
||||
position: relative;
|
||||
height: .6rem;
|
||||
width: .6rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.h5-search .icon::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: .1rem;
|
||||
top: .1rem;
|
||||
width: 1px;
|
||||
left: 0;
|
||||
font-size: 30px;
|
||||
background: red;
|
||||
}
|
||||
.nav {
|
||||
background-color: #154d9b;
|
||||
}
|
||||
|
|
@ -339,21 +375,23 @@ footer .info {
|
|||
|
||||
.head{
|
||||
height: unset;
|
||||
background-position: bottom center;
|
||||
padding: 50px 20px 20px;
|
||||
}
|
||||
.head .top {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 50px;
|
||||
/* padding-top: 50px; */
|
||||
}
|
||||
.head .top-l img{
|
||||
width: 95%;
|
||||
width: 100%;
|
||||
}
|
||||
.head .top-r{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.head .top-r img{
|
||||
width: 80%;
|
||||
width: 70%;
|
||||
}
|
||||
.nav-box{
|
||||
height: unset;
|
||||
|
|
@ -365,11 +403,30 @@ footer .info {
|
|||
/* flex: 1 0 33.3%; */
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
line-height: .5rem;
|
||||
}
|
||||
.navbar li a{
|
||||
font-size: .25rem;
|
||||
}
|
||||
.navbar li + li{
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.navbar li .zhsk {
|
||||
width: .93rem;
|
||||
height: .3rem;
|
||||
}
|
||||
|
||||
.navbar li .ggw {
|
||||
width: 50px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.navbar li .cxgc {
|
||||
width: 73px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
|
||||
.info-box{
|
||||
flex-direction: column;
|
||||
|
|
|
|||
282
static/xx.html
282
static/xx.html
|
|
@ -1,102 +1,204 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>旋转木马式 3D 轮播图</title>
|
||||
<!-- 引入 Swiper CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper@5.2.1/css/swiper.min.css">
|
||||
<style>
|
||||
/* 基础样式 */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>自适应导航栏</title>
|
||||
<style>
|
||||
/* 基础样式 */
|
||||
.nav {
|
||||
background-color: #154d9b;
|
||||
}
|
||||
.nav-box {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
height: 62px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
position: relative; /* 确保下拉菜单定位正确 */
|
||||
}
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.navbar li + li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.navbar li a {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar li .zhsk {
|
||||
content: url(nav_zhsk.png);
|
||||
width: 73px;
|
||||
height: 21px;
|
||||
}
|
||||
.navbar li .ggw {
|
||||
content: url(nav_gaige.png);
|
||||
width: 50px;
|
||||
height: 21px;
|
||||
}
|
||||
.navbar li .cxgc {
|
||||
content: url(nav_cxgc.png);
|
||||
width: 73px;
|
||||
height: 21px;
|
||||
}
|
||||
.search {
|
||||
position: relative;
|
||||
}
|
||||
.search .icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
background: url(navrarr.jpg) no-repeat center;
|
||||
}
|
||||
.search-container {
|
||||
z-index: 99;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background: #ccc;
|
||||
padding: 12px 13px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
|
||||
right: -30px;
|
||||
top: 40px;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
.search:hover .search-container {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.search-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 35px;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid #ccc;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.search-input {
|
||||
width: 240px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
padding: 0 10px;
|
||||
outline: none;
|
||||
}
|
||||
.search-input::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
.search-button {
|
||||
flex: none;
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: white;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
margin-left: 5px;
|
||||
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.search-button:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 80%; /* 容器宽度 */
|
||||
height: 300px;
|
||||
}
|
||||
/* 移动端样式 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
display: none; /* 默认隐藏导航栏 */
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 62px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #154d9b;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.navbar.active {
|
||||
display: flex; /* 展开时显示导航栏 */
|
||||
}
|
||||
.navbar li {
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.navbar li + li {
|
||||
margin-left: 0;
|
||||
}
|
||||
.menu-toggle {
|
||||
display: block; /* 显示菜单切换按钮 */
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
.search {
|
||||
display: none; /* 隐藏搜索框 */
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
border: 2px solid #2980b9;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px; /* 圆角效果 */
|
||||
}
|
||||
|
||||
/* 分页器样式 */
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
/* 导航按钮样式 */
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
/* 隐藏菜单切换按钮（默认隐藏） */
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Swiper 容器 -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">1</div>
|
||||
<div class="swiper-slide">2</div>
|
||||
<div class="swiper-slide">3</div>
|
||||
<div class="swiper-slide">4</div>
|
||||
<div class="swiper-slide">5</div>
|
||||
<div class="nav">
|
||||
<div class="nav-box centerWidth">
|
||||
<ul class="navbar">
|
||||
<li><a href="#">首页</a></li>
|
||||
<li><a href="#">院情概览</a></li>
|
||||
<li><a href="#">机构设置</a></li>
|
||||
<li><a href="#">本院新闻</a></li>
|
||||
<li><a href="#">研究阐释</a></li>
|
||||
<li><a href="#">决策服务</a></li>
|
||||
<li><a href="#">述学立论</a></li>
|
||||
<li><a href="#">党的建设</a></li>
|
||||
<li><a href="#">市中特中心</a></li>
|
||||
<li><a href="#">编辑出版</a></li>
|
||||
<li><a href="#">专家学者</a></li>
|
||||
<li><a href="#">专题聚焦</a></li>
|
||||
<li><a href="#">文献资源</a></li>
|
||||
<li><a href="#" class="zhsk">智慧社科</a></li>
|
||||
<li><a href="#" class="ggw">改革网</a></li>
|
||||
<li><a href="#" class="cxgc">创新工程</a></li>
|
||||
</ul>
|
||||
<div class="search pcshow">
|
||||
<div class="icon"></div>
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="请输入关键词">
|
||||
<button class="search-button">搜 索</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端菜单切换按钮 -->
|
||||
<div class="menu-toggle" id="menuToggle">☰</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引入 Swiper JS -->
|
||||
<script src="https://unpkg.com/swiper@5.2.1/js/swiper.min.js"></script>
|
||||
<script>
|
||||
const swiper = new Swiper('.swiper-container', {
|
||||
effect: 'coverflow',
|
||||
grabCursor: false,
|
||||
centeredSlides: true,
|
||||
slidesPerView: 3,
|
||||
|
||||
loop: true,
|
||||
coverflowEffect: {
|
||||
rotate: 0,
|
||||
stretch: 0,
|
||||
depth: 200,
|
||||
modifier: 2,
|
||||
scale: 1.8,
|
||||
slideShadows: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: null,
|
||||
prevEl: null,
|
||||
},
|
||||
autoplay: {
|
||||
delay: 6000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
<script>
|
||||
// JavaScript 实现菜单切换
|
||||
const menuToggle = document.getElementById('menuToggle');
|
||||
const navbar = document.querySelector('.navbar');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
navbar.classList.toggle('active');
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -17,6 +17,8 @@
|
|||
<script type="text/javaScript" src="./resources/common/common.js"></script>
|
||||
<script type="text/javascript" src="./resources/common/setFont.js"></script>
|
||||
<script type="text/javascript" src="./resources/common/base.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -30,7 +32,18 @@
|
|||
<a class="top-r">
|
||||
<img src="./resources/common/toplogo2.png">
|
||||
</a>
|
||||
<!--h5 搜索 开始 -->
|
||||
<div class="h5show w-full">
|
||||
<div class="h5-search">
|
||||
<input type="text" placeholder="请输入关键词">
|
||||
<a class="icon" href="#">
|
||||
<!-- <img src="./resources/common/ico_search.png"> -->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--h5 搜索 结束 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div class="nav-box centerWidth">
|
||||
|
|
@ -60,8 +73,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fade-box">
|
||||
|
|
@ -80,9 +91,9 @@
|
|||
|
||||
<!-- 主体 开始 -->
|
||||
<main>
|
||||
<div class="index-box1">
|
||||
<div class="index-box1">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- 主体 结束 -->
|
||||
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 633 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
|
|
@ -0,0 +1,883 @@
|
|||
.index-box1-head {
|
||||
position: relative;
|
||||
}
|
||||
.index-box1-l,
|
||||
.index-box1-r {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.index-box1-l {
|
||||
left: 0;
|
||||
width: 110px;
|
||||
height: 150px;
|
||||
background: url(topnewBG.jpg) no-repeat;
|
||||
}
|
||||
.index-box1-r {
|
||||
right: 0;
|
||||
}
|
||||
.index-box1-r a {
|
||||
color: rgb(189, 26, 45);
|
||||
font-size: 16px;
|
||||
}
|
||||
.index-box1-c {
|
||||
height: 150px;
|
||||
width: 1080px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.index-box1-c .title {
|
||||
font-size: 30px;
|
||||
color: #df0012;
|
||||
font-weight: bold;
|
||||
line-height: 44px;
|
||||
}
|
||||
.index-box1-c .desc {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
.index-box1-c .desc:hover {
|
||||
color: #df0012;
|
||||
}
|
||||
.index-box1-body {
|
||||
display: flex;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.index-box1-body-l,
|
||||
.index-box1-body-r {
|
||||
flex: 1;
|
||||
}
|
||||
.index-box1-body-r {
|
||||
margin-left: 44px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
height: 43px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
box-sizing: content-box;
|
||||
border-bottom: 2px solid #e5e5e5;
|
||||
}
|
||||
.news-title a {
|
||||
line-height: 41px;
|
||||
color: #0e3890;
|
||||
border-bottom: 2px solid #bd1a2d;
|
||||
}
|
||||
|
||||
.news-title span {
|
||||
color: #bd1a2d;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.news-list li {
|
||||
zoom: 1;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url(dot.png) no-repeat 0 50%;
|
||||
}
|
||||
.news-list li a {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
text-indent: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.news-list li a:hover {
|
||||
color: #248;
|
||||
}
|
||||
|
||||
.news-list li span {
|
||||
color: #ccc;
|
||||
font-size: 12px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
.index-box2 {
|
||||
height: 490px;
|
||||
overflow: hidden;
|
||||
background-color: #104697;
|
||||
}
|
||||
|
||||
.index-box2-body {
|
||||
display: flex;
|
||||
margin-top: 41px;
|
||||
}
|
||||
|
||||
.index-box2-body-l {
|
||||
width: 640px;
|
||||
flex: none;
|
||||
}
|
||||
.index-box3-body-l {
|
||||
width: 500px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.slides-box,
|
||||
.slides-img {
|
||||
height: 360px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#slides2 .slides-img,
|
||||
#slides2 {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.slides-img a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slides-img img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.slides-txt {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background: url(../images/banner-opbg40.png);
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.slides-mask {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.slides-txt a {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.slides-num {
|
||||
text-align: right;
|
||||
font-size: 0px;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.slides-num span {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.slides-num span.cur {
|
||||
background: #f5d389;
|
||||
}
|
||||
.news2-title p {
|
||||
height: 52px;
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
border-bottom: 5px solid #fff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.index-box2-body-r {
|
||||
margin-left: 44px;
|
||||
}
|
||||
.news2-title a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.news2-toptitle {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.news2-toptitle a {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
line-height: 32px;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
/* 2行隐藏 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.news2-list {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.news2-list-ul li {
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.news2-list-ul li a {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.news2-list-ul li span {
|
||||
margin-left: 44px;
|
||||
}
|
||||
|
||||
.tzgg-box {
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tzgg-box .tzgg-title {
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.tzgg-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-left: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.tzgg-content a {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tzgg-content span {
|
||||
font-size: 16px;
|
||||
color: #a6ccea;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.tzgg-more {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 44px 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #bdbdbd;
|
||||
}
|
||||
.divider a {
|
||||
font-size: 50px;
|
||||
color: #104697;
|
||||
font-family: ysbth;
|
||||
font-size: 50px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background-color: #fff;
|
||||
padding: 0 28px;
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
text-align: center; /* 文字居中 */
|
||||
z-index: 1; /* 确保文字在分隔线上方 */
|
||||
}
|
||||
.divider a span {
|
||||
font-size: 59px;
|
||||
color: #bd1a2d;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.divider-bg {
|
||||
background: url(2401-cxgc.png) no-repeat center;
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
font-family: ysbth;
|
||||
position: relative;
|
||||
}
|
||||
.divider-bg a span {
|
||||
font-size: 59px;
|
||||
color: #bd1a2d;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.divider-bg .more {
|
||||
font-size: 14px;
|
||||
color: #bd1a2d;
|
||||
font-family: '微软雅黑';
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.index-box3 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.index-card {
|
||||
border: 1px solid #e1e1e1;
|
||||
padding: 0 31px 31px;
|
||||
}
|
||||
|
||||
.index-card-nav {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.index-card-nav li {
|
||||
flex: 1;
|
||||
background-color: #e9e9e9;
|
||||
border-radius: 6px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.index-card-nav li.cur {
|
||||
background-color: #104697;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.index-card-nav li.cur::after {
|
||||
content: '1';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid #104697;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.index-card-nav li.cur a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.index-card-nav li a {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.index-card-nav li + li {
|
||||
margin-left: 26px;
|
||||
}
|
||||
|
||||
.index-card-body {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.index-card-body .index-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-item-l {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.index-item-r {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.news3-title {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
.news3-title a {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 27px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.news3-title a:hover {
|
||||
color: #c92e1a;
|
||||
}
|
||||
|
||||
.news3-desc {
|
||||
font-size: 14px;
|
||||
color: #404040;
|
||||
line-height: 30px;
|
||||
text-indent: 30px;
|
||||
}
|
||||
.news3-1 {
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid #c1182f;
|
||||
}
|
||||
|
||||
.news3-list {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.news3-list li {
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
background: url(dot.png) no-repeat 0 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news3-list li a {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
text-indent: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
.news3-list li a:hover {
|
||||
color: #c92e1a;
|
||||
}
|
||||
|
||||
.news3-list li span {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
margin-left: 44px;
|
||||
}
|
||||
|
||||
.index-card-ad {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.news3-img-swiper {
|
||||
width: 580px;
|
||||
margin-right: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news3-img-swiper1 {
|
||||
width: 500px;
|
||||
margin-left: 39px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px; /* 圆角效果 */
|
||||
}
|
||||
|
||||
.box-bg {
|
||||
background: url(2401-cxgc-bg.png) no-repeat center;
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.index-book {
|
||||
background: url(2401-cxgcbg-2-2402.png) no-repeat center top;
|
||||
margin-top: 30px;
|
||||
margin: 30px -30px 0;
|
||||
height: 448px;
|
||||
}
|
||||
.index-book-head {
|
||||
display: flex;
|
||||
}
|
||||
.index-book-head .icon {
|
||||
display: inline-block;
|
||||
margin-top: 26px;
|
||||
margin-left: 94px;
|
||||
flex: none;
|
||||
}
|
||||
.index-book-head .text {
|
||||
font-size: 15px;
|
||||
margin-top: 36px;
|
||||
width: 1080px;
|
||||
margin-right: 55px;
|
||||
text-indent: 2em;
|
||||
margin-left: 36px;
|
||||
color: #333333;
|
||||
}
|
||||
.index-book-head .text a {
|
||||
color: #bd1a2d;
|
||||
}
|
||||
.index-book-body {
|
||||
margin: 72px 70px 0 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.book-item {
|
||||
width: 290px;
|
||||
}
|
||||
.book-item-head {
|
||||
display: inline-block;
|
||||
}
|
||||
.book-item-head img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
.book-item-body {
|
||||
height: 108px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.book-item-body .tits {
|
||||
padding-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
.book-item-body .tits-item .tits-item-t {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 1.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.book-item-body .tits-item .tits-item-t:hover {
|
||||
color: #bd1a2d;
|
||||
}
|
||||
.book-item-body .bottom {
|
||||
display: flex;
|
||||
}
|
||||
.book-item-body .dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
z-index: 99;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.book-item-body .dots li + li {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.book-item-body .dots li {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #aaaaaa;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.book-item-body .dots li.cur {
|
||||
background: #bd1a2d;
|
||||
}
|
||||
.book-item-body .tits .more {
|
||||
color: #bd1a2d;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.index-bj {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-bj .book-covers {
|
||||
position: relative;
|
||||
width: 366px;
|
||||
height: 500px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.index-bj .book-covers .item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 0.5s;
|
||||
-webkit-transition: opacity 0.5s;
|
||||
-moz-transition: opacity 0.5s;
|
||||
-o-transition: opacity 0.5s;
|
||||
-ms-transition: opacity 0.5s;
|
||||
}
|
||||
.index-bj .book-covers .item a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.book-covers .item a img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.book-info {
|
||||
margin-left: 46px;
|
||||
padding-bottom: 0px;
|
||||
flex: 1;
|
||||
}
|
||||
.info-head {
|
||||
height: 296px;
|
||||
display: flex;
|
||||
padding-top: 27px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.book-news {
|
||||
width: 298px;
|
||||
height: 100%;
|
||||
border: 1px solid #e5e5e5;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.book-news h3 {
|
||||
height: 52px;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
line-height: 52px;
|
||||
text-align: center;
|
||||
background: url(new_bjcblin1.png) bottom no-repeat;
|
||||
}
|
||||
.book-news-list {
|
||||
height: 203px;
|
||||
overflow: hidden;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.book-news-list li {
|
||||
background: url(dot.png) 0 11px no-repeat;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
line-height: 26px;
|
||||
}
|
||||
.book-news-list li a {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
padding-left: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.book-news-more {
|
||||
text-align: right;
|
||||
padding: 5px 10px 0 0;
|
||||
}
|
||||
.book-news-more a {
|
||||
color: #bd1a2d;
|
||||
font-size: 14px;
|
||||
}
|
||||
.book-content {
|
||||
flex: 1;
|
||||
margin-left: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.book-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.book-name span {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.book-name a {
|
||||
font-weight: 900;
|
||||
color: #104697;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.book-name .line-dot {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
border-bottom: 1px dashed #e5e5e5;
|
||||
}
|
||||
.book-tab {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.book-tab li + li {
|
||||
margin-left: 25px;
|
||||
}
|
||||
.book-tab a {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: #104697;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.book-tab a.cur {
|
||||
background: #bd1a2d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.book-content .book-text {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
color: #000;
|
||||
text-indent: 23px;
|
||||
text-align: justify;
|
||||
margin-top: 15px;
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
}
|
||||
|
||||
.top-book {
|
||||
height: 80px;
|
||||
background-color: #f7f7f7;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.top-book .new-book-img {
|
||||
height: 100%;
|
||||
width: 90px;
|
||||
}
|
||||
.top-book-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.top-book-more {
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
background-color: #b8b8b8;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.top-book-list ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.top-book-list ul li {
|
||||
padding-left: 10px;
|
||||
line-height: 26px;
|
||||
flex: none;
|
||||
}
|
||||
.top-book-list li a {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
.top-book-list li a:hover {
|
||||
color: #bd1a2d;
|
||||
}
|
||||
.top-book-list .row1 li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-book-list .row2 li {
|
||||
width: 50%;
|
||||
margin: 2.5px 0;
|
||||
}
|
||||
|
||||
.top-book-list .row2 li a {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.info-bottom{
|
||||
margin-top: 28px;
|
||||
}
|
||||
.sj {
|
||||
display: flex;
|
||||
}
|
||||
.sj li {
|
||||
width: 80px;
|
||||
cursor: pointer;
|
||||
padding: 1px;
|
||||
border: solid 3px transparent;
|
||||
box-sizing: content-box;
|
||||
margin: 0 1.92%;
|
||||
}
|
||||
.sj li.cur{
|
||||
border: solid 3px #104697;
|
||||
}
|
||||
.sj li img {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.sj li p {
|
||||
height: 23px;
|
||||
display: block;
|
||||
line-height: 23px;
|
||||
font-size: 14px;
|
||||
background-color: #bd1a2d;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
$(function () {
|
||||
jQuery("#slides1 .slides-img a").SwitchFade({
|
||||
text: '#slides1 .slides-txt a',
|
||||
prev: '#slides1 .slides-left',
|
||||
next: '#slides1 .slides-right',
|
||||
num: '#slides1_btn.slides-num span',
|
||||
className: 'cur',
|
||||
playTime: 4000,
|
||||
lendy: '.x',
|
||||
indy: '.x',
|
||||
// autoPlay:false //是否自动轮播
|
||||
});
|
||||
|
||||
jQuery("#slides2 .slides-img a").SwitchFade({
|
||||
text: '#slides2 .slides-txt a',
|
||||
prev: '#slides2 .slides-left',
|
||||
next: '#slides2 .slides-right',
|
||||
num: '#slides2 .slides-num span',
|
||||
className: 'cur',
|
||||
playTime: 4000,
|
||||
lendy: '.x',
|
||||
indy: '.x',
|
||||
// autoPlay:false //是否自动轮播
|
||||
});
|
||||
|
||||
$(".index-sw1").autoPlayTabs({
|
||||
tabHead: ".index-card-nav li",
|
||||
tabCont: ".index-card-body .index-item",
|
||||
cur: "cur",
|
||||
autoPlay: true, // Enable auto-play
|
||||
interval: 5000
|
||||
});
|
||||
|
||||
$(".index-sw2").autoPlayTabs({
|
||||
tabHead: ".index-card-nav li",
|
||||
tabCont: ".index-card-body .index-item",
|
||||
cur: "cur",
|
||||
autoPlay: false, // Enable auto-play
|
||||
interval: 5000
|
||||
});
|
||||
|
||||
$(".index-sw3").autoPlayTabs({
|
||||
tabHead: ".index-card-nav li",
|
||||
tabCont: ".index-card-body .index-item",
|
||||
cur: "cur",
|
||||
autoPlay: false, // Enable auto-play
|
||||
interval: 5000
|
||||
});
|
||||
|
||||
$(".index-sw4").autoPlayTabs({
|
||||
tabHead: ".index-card-nav li",
|
||||
tabCont: ".index-card-body .index-item",
|
||||
cur: "cur",
|
||||
autoPlay: false, // Enable auto-play
|
||||
interval: 5000
|
||||
});
|
||||
|
||||
const swiper = new Swiper('.swiper-container', {
|
||||
// 启用 3D 旋转轮播效果
|
||||
effect: 'coverflow',
|
||||
grabCursor: false, // 鼠标悬停时显示抓手光标
|
||||
centeredSlides: true, // 居中显示
|
||||
slidesPerView: 2, // 自适应显示幻灯片数量
|
||||
loop: true, // 启用无限循环
|
||||
coverflowEffect: {
|
||||
rotate: 0, // 旋转角度（负值表示从后面往前旋转）
|
||||
stretch: 0, // 拉伸距离
|
||||
depth: 100, // 深度
|
||||
modifier: 4, // 效果强度
|
||||
slideShadows: false, // 启用幻灯片阴影
|
||||
},
|
||||
// 自动播放
|
||||
autoplay: {
|
||||
delay: 6000, // 3 秒切换一次
|
||||
disableOnInteraction: false, // 用户操作后不停止自动播放
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
jQuery("#book1 .tits .tits-item").SwitchFade({
|
||||
text: '#book1 1',
|
||||
prev: '#book1 none',
|
||||
next: '#book1 none',
|
||||
num: '#book1 .dots li',
|
||||
className: 'cur',
|
||||
playTime: 4000,
|
||||
lendy: '.x',
|
||||
indy: '.x',
|
||||
});
|
||||
|
||||
jQuery("#book2 .tits .tits-item").SwitchFade({
|
||||
text: '#book2 1',
|
||||
prev: '#book2 none',
|
||||
next: '#book2 none',
|
||||
num: '#book2 .dots li',
|
||||
className: 'cur',
|
||||
playTime: 4000,
|
||||
lendy: '.x',
|
||||
indy: '.x',
|
||||
});
|
||||
jQuery("#book3 .tits .tits-item").SwitchFade({
|
||||
text: '#book3 1',
|
||||
prev: '#book3 none',
|
||||
next: '#book3 none',
|
||||
num: '#book3 .dots li',
|
||||
className: 'cur',
|
||||
playTime: 4000,
|
||||
lendy: '.x',
|
||||
indy: '.x',
|
||||
});
|
||||
jQuery("#book4 .tits .tits-item").SwitchFade({
|
||||
text: '#book4 1',
|
||||
prev: '#book4 none',
|
||||
next: '#book4 none',
|
||||
num: '#book4 .dots li',
|
||||
className: 'cur',
|
||||
playTime: 4000,
|
||||
lendy: '.x',
|
||||
indy: '.x',
|
||||
});
|
||||
|
||||
})
|
||||
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: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 642 B |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Loading…
Reference in New Issue