/* 页面初始化 */ *{ box-sizing: border-box; font-family:Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif; } a{ cursor: pointer; } .nav-main .search{ box-sizing:content-box; } /* ///////////////////////////// */ /* 抬头图片 */ .title-image{ width:100%; position: relative; height:250px; background-image:url('../image/title-bar.png'); background-size:cover; background-repeat: no-repeat; background-position: center; } .title-image .top-navigator{ display:none; } @media screen and (max-width:600px){ .title-image{ height:180px; } .title-image .top-navigator{ display: block; position: absolute; bottom:0; background:rgba(0,0,0,0.5); color:white; border:none; } .title-image .top-navigator span::before{ /* display:none; */ /* margin-top:3px; */ background-image:url('../image/location.png'); } .title-image .top-navigator .location{ font-size: 14px !important; float:left; } .type-wrap .top-navigator{ display:none; } .type-wrap .type-logo{ display:none; } } /* navigator共用区 */ .top-navigator{ width:100%; padding:5px 15px; color:#B5B5B4; height:38px; } .top-navigator img{ float:left; } .top-navigator span{ float: left; position: relative; padding-left:25px; line-height:27px; } .top-navigator span::before{ content: ''; display: block; position: absolute; left:0; margin-top:3px; width:20px; height:20px; background-image:url('../image/location.png'); background-repeat: no-repeat; background-size:auto 20px; } .type-wrap .top-navigator{ width:90%; } /* 中间内容部分 */ .main-wrap{ max-width:1200px; margin: 0 auto; margin-top:20px; } .main-wrap::after{ content:''; clear:both; display: block; } /* 左侧菜单栏 */ .main-wrap .type-wrap{ float:left; width:280px; margin-bottom:20px; /* height:100%; */ } .main-wrap .type-wrap .type-logo{ background: rgb(127,47,106); height:70px; border-radius:10px; width:90%; color: white; font-size:30px; text-align: center; line-height:70px; margin-bottom:30px; } .main-wrap .type-wrap .type-content{ width:90%; position: relative; } .main-wrap .type-wrap .type-content .type-item{ cursor:pointer; border-left:2px solid transparent; height:41px; box-sizing: border-box; line-height:41px; white-space: nowrap; text-overflow: ellipsis; position: relative; background:#eee; border-radius: 10px; margin-top:5px; border:1px solid #ccc; font-size:16px; } .main-wrap .type-wrap .type-content .type-item a{ width:100%; height:100%; padding-left: 40px; display: block; transition:left 300ms linear; position: absolute; left:0; } .main-wrap .type-wrap .type-content .type-active a{ background:rgb(145,68,124); color:white; border-radius: 5px; } .main-wrap .type-wrap .type-content .type-item a::after{ content:''; display:block; width:4px; height:4px; background:rgb(145,68,124); border-radius:50%; position: absolute; left:30px; top:50%; transform: translate(0,-50%); } .main-wrap .type-wrap .type-content .type-active a::after{ background:white; } .main-wrap .type-wrap .type-content .type-item:hover a{ background:rgb(145,68,124); color:white; border-radius: 5px; } .main-wrap .type-wrap .type-content .type-item:hover a::after{ background:white; } @media screen and (max-width:1200px){ .main-wrap{ margin:20px; } } @media screen and (max-width:600px){ .main-wrap{ padding:0 15px; margin:0; } .main-wrap .type-wrap{ float:none; width:100%; margin-bottom:0; } .main-wrap .type-wrap .type-logo{ font-size:20px; height:40px; line-height:40px; text-align:left; background:none; color:#CC173A; border-bottom:2px solid #F5F5F5; position:relative; } .main-wrap .type-wrap .type-logo::after{ content:''; display: block; position: absolute; bottom:0; left: 0; height:2px; width:80px; border-bottom:2px solid #CC173A; } .main-wrap .type-wrap .type-content{ margin:0; padding:15px 0 ; background : none; width:100%; } .main-wrap .type-wrap .type-content ul{ width:100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .main-wrap .type-wrap .type-content ul .type-item{ width:32%; border:none; text-align: center; background:#EFEFEF; border-radius:5px; margin:6px 0; height:35px; line-height:35px; } .main-wrap .type-wrap .type-content ul .type-item:hover{ border:none; color:black; } /* .main-wrap .type-wrap .type-content ul .type-active{ border:none; background:#CC173A; color:white !important; } */ .main-wrap .type-wrap .type-content .type-item a{ left: 0; padding: 0; } .main-wrap .type-wrap .type-content .type-active a{ border-radius:5px; left: 0 !important; padding: 0; } .main-wrap .type-wrap .type-content .type-item a::after{ content: '' !important; display: none; } .main-wrap .type-wrap .type-content .type-item:hover a{ left:0; border-radius:5px; } } /* 右侧列表区 */ .main-wrap .lists-wrap{ float:left; width:calc(100% - 280px - 10px); padding: 0 15px; margin-left:10px; border:1px dotted rgb(145,68,124); margin-bottom:30px; } .main-wrap .lists-wrap .top-navigator .title-name{ display:inline-block; padding:3.5px; padding-left: 0; font-size:18px; border-bottom: 2px solid #A52C27; color:#CC173A;; } .main-wrap .lists-wrap .top-navigator{ padding-left: 0 !important; min-width:320px; } /* 右侧内容区 */ .main-wrap .lists-wrap .list-content{ padding:20px 10px; /* position: relative; */ display: flex; flex-direction: column; align-content : center; padding:20px 0 0 0; margin-bottom:20px; } .main-wrap .lists-wrap .list-content .title{ font-size:28px; text-align: center; line-height:1.5em; color:#383838; font-weight: 600; } .main-wrap .lists-wrap .list-content .info{ text-align:center; /* width : 100%; */ margin: 0 auto; font-size: 12px; color: #666666; padding: 15px 0; /* position: absolute; */ /* left: 50%; */ /* top: 50%; */ /* transform: translate(-50%, -50%); */ } .main-wrap .lists-wrap .list-content .info span{ padding: 0 10px; } .main-wrap .lists-wrap .list-content .content{ border-top:1px dotted rgb(127,47,106); color:#585858; width: 100%; padding:10px 0; } .main-wrap .lists-wrap .list-content .content p{ font-size: 16px; line-height: 34px; text-indent: 28px; } .main-wrap .lists-wrap .list-content .content .img-wrap{ text-align:center; } .main-wrap .lists-wrap .list-content .content .bottom-mark{ width: 100%; } .main-wrap .lists-wrap .list-content .content .bottom-mark .box{ display: flex; justify-content: center; flex-direction: column; float: right; align-items: center; margin-top: 20px; margin-right: 20px; } .main-wrap .lists-wrap .page-select{ width: 100%; padding:10px 0; margin-bottom: 30px; border-top:1px dotted rgb(127,47,106); border-bottom:1px dotted rgb(127,47,106); } .main-wrap .lists-wrap .page-select a{ display: block; font-size: 14px; line-height: 30px; color:#333333; } .main-wrap .lists-wrap .page-select a:hover{ color:#A52C27; } /* 移动端内容区修改 */ @media screen and (max-width:600px){ .main-wrap .lists-wrap{ width:100%; float:none; padding: 0; border:none; border-top:1px solid #CACACA; margin:0 0 15px 0 ; } .main-wrap .lists-wrap .top-navigator{ display:none; } .main-wrap .lists-wrap .list-content .info{ border-top: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8; } .main-wrap .lists-wrap .list-content .title{ font-size: 16px; color:#A52C27; } .main-wrap .lists-wrap .page-select{ display: none; } .main-wrap .lists-wrap .list-content .content{ border:none; } .main-wrap .lists-wrap .list-content .content .img-wrap img{ width:100%; } .main-wrap .lists-wrap .list-content .content div{ font-size: 14px; line-height:26px; } .main-wrap .lists-wrap .list-content .content .my-table{ width: 100%; font-size: 14px; margin: 10px 0; } .main-wrap .lists-wrap .page-select div{ font-size: 14px; line-height: 26px; } } /* 底部翻页区 */ .main-wrap .lists-wrap .list-page{ width:100%; position: relative; height:70px; border-top:1px dotted rgb(145,68,124); } .main-wrap .lists-wrap .list-page ul{ margin:0 auto; position: absolute; left:50%; min-width:465px; top:50%; transform: translate(-50%,-50%); display: flex; align-items: center; /* overflow: hidden; */ } .main-wrap .lists-wrap .list-page ul::after{ content:''; display: block; clear:both; } .main-wrap .lists-wrap .list-page ul li{ cursor:pointer; font-size:14px; box-sizing:border-box; /* height:24px; */ /* line-height:22px; */ min-width:25px; text-align: center; /* min-width:50px; */ margin: 5px; float:left; padding: 5px 8px; border:1px solid #E5E5E5; color:black; border-radius:5px; } .main-wrap .lists-wrap .list-page ul li a{ color:black; } .main-wrap .lists-wrap .list-page ul li.disabled a{ color:#aaa; } .main-wrap .lists-wrap .list-page ul .pages-show{ border:none; } .main-wrap .lists-wrap .list-page ul .pages-show input{ width:25px; border:1px solid #E5E5E5; height:30px; display:inline-block; padding:0 4px; } .main-wrap .lists-wrap .list-page ul .active{ background:#CC173A; color: white; border:none; line-height:24px; } .main-wrap .lists-wrap .list-page ul .more{ border:none; line-height:15px; } .main-wrap .lists-wrap .list-page ul .mini-btn{ display:none; } @media screen and (max-width:600px){ .main-wrap .lists-wrap .list-page{ height:100px; } .main-wrap .lists-wrap .list-page ul{ width:100%; min-width:auto; display:flex; justify-content: space-between; } .main-wrap .lists-wrap ul li{ /* display: none; */ } .main-wrap .lists-wrap .list-page ul .mini-btn{ display:block; width:47%; height:0px; padding-bottom:9%; /* padding:10px; */ /* text-align:center; */ background:rgb(145,68,124); border:none; border-radius:0px; position: relative; margin:0; } .main-wrap .lists-wrap .list-page ul .mini-btn a { color:white; } .main-wrap .lists-wrap .list-page ul .mini-btn span{ font-size:18px; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .main-wrap .lists-wrap .list-page ul .mini-last{ background:#C9C9C9; } }