CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/common/mainMenu_Party.aspx

710 lines
23 KiB
Plaintext
Raw Normal View History

2021-08-13 11:15:59 +08:00
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_Party.aspx.cs" Inherits="FineUIPro.Web.common.mainMenu_Party" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="../res/index/css/reset.css" rel="stylesheet" />
<link href="../res/index/css/home.css" rel="stylesheet" />
<link href="../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
<style type="text/css">
* {
box-sizing: border-box;
}
.flexV {
flex-direction: column;
}
.wrap {
height: 100%;
padding: 15px;
}
.bottom-wrap {
padding: 0;
margin-bottom: 5px;
}
.bottom-wrap:last-child {
margin-bottom: 0;
}
.bw-item-content {
padding: 5px;
}
.top {
display: flex;
display: -webkit-flex;
overflow: hidden;
width: 100%;
}
.bw-b-bottom {
/* width: 100%;*/
height: 100%;
}
.itemlr {
margin: 0 5px;
}
.bw-b-bottom-up {
border-radius: 0;
height: 100%;
margin: 0;
box-shadow: none;
}
.yj-info {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: red;
font-size: 20px;
}
.yj-info .tit {
font-weight: 700;
margin-bottom: 20px;
}
.yj-info .tel {
font-weight: 700;
}
.tab-wrap {
left: auto;
right: 15px;
top: 5px;
}
.tab .t-item {
width: auto;
padding: 5px 10px;
}
.bottom-list {
height: 100px;
padding: 15px;
overflow: hidden;
color: #fff;
margin: 0 10px;
}
.bottom-list .bl-left {
float: left;
margin-right: 30px;
margin-left: 50px;
}
.bottom-list .bl-right {
float: right;
margin-right: 50px;
}
.tab .t-item {
font-size: 12px;
}
.content-body {
display: flex;
flex-direction: column;
flex: 3;
}
.content-body .content-item {
}
.part-item {
display: flex;
align-items: center;
}
.part-tag {
display: flex;
flex-direction: column;
background-color: #107ca2;
opacity: 0.8;
flex: 1;
border-radius: 10px;
}
.part-tag + .part-tag {
margin-left: 20px;
}
.item-top {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #fff;
border-bottom: 1px solid #f2f2f2;
padding: 10px 0px;
}
.unit {
display: flex;
justify-content: flex-end;
text-align: right;
font-size: 16px;
padding-right: 30px;
}
.num {
display: flex;
justify-content: center;
flex: 1;
}
.unit-btn {
display: flex;
justify-content: center;
padding: 10px 0px;
font-size: 16px;
color: #fff;
}
.do-btn {
display: flex;
justify-content: center;
background-color: #107ca2;
opacity: 0.8;
flex: 1;
border-radius: 10px;
padding: 20px 0px;
color: #fff;
}
.base-wrap{
padding:15px 10px;
height:100%;
}
.base-wrap .base-tit{
font-size:12px;
color:#fff;
}
.base-wrap .base-txt-wrap{
margin-top:5px;
background-color:#0B508B;
border-radius:5px;
color:#FFAE72;
height:100%;
align-items:center;
justify-content:space-around;
}
.base-wrap .base-txt-wrap .num-1{
background-color:#2A759C;
padding:5px;
font-size:40px;
}
.yj-info-1{
height:100%;
}
.yj-info-1-list{
color:#fff;
}
.yj-info-1 .telbg{
height:100%;
width:85px;
background: url(../res/index/images/tel.png) center center no-repeat;
background-size: contain;
}
.yj-info-1-list-item{
padding:0 5px;
background-color:#2A759C;
margin-bottom:5px;
font-size:12px;
align-items:center;
justify-content:center;
}
.yj-info-1-list-item:last-child{
margin-bottom:0;
}
.yj-info-1-list-item .telnum{
text-align:center;
align-items:center;
justify-content:center;
display:flex;
}
.yj-info-1-info{
color:#fff;
background-color:#2A759C;
text-align:center;
font-size:16px;
height:40px;
line-height:40px;
margin-top:5px;
}
.info-wrap{
width:100%;
height:100%;
padding:5px 10px;
}
.info-wrap .info-item{
align-items:center;
justify-content: center;
margin:0 20px;
}
.info-wrap .info-item .title {
margin-bottom:5px;
font-size:14px;
}
.info-wrap .info-item .item {
width:100%;
height: 40%;
background-color:#267AA4;
border-radius:15px;
align-items:center;
justify-content:space-around;
}
.info-wrap .info-item .item .i-num{
color:#F48A5C;
font-size:28px;
}
.info-wrap .info-item .item .i-num-c{
color:#C1DF8E;
}
.tab .t-item {
width: auto;
padding: 5px 10px;
}
.tit-item {
padding: 0 10px;
color: #fff;
justify-content: space-between;
font-size: 12px;
}
.tip-item {
margin-left: 10px;
align-items: center;
font-size: 10px;
}
.tip {
width: 25px;
height: 13px;
background-color: #258F76;
border-radius: 2px;
margin-right: 5px;
}
.tip-next {
background-color: #92BF55;
}
.mglone{
margin-left: 2px;
}
.mgrone{
margin-right: 2px;
}
.mgbone{
margin-bottom: 2px;
}
.pdtb0{
padding-top:0 !important;
padding-bottom:0 !important;
}
.tit-center{
text-align:center;
font-size:12px;
}
.tit-one{
padding: 10px 0;
}
.content-ul .c-item .tit {
display:block;
position:relative;
padding-left: 2em;
}
.content-ul .c-item .tit::before {
content: '';
position: absolute;
border-color: #57B8BD;
border-style: solid;
border-width: 0.25em;
height: 0;
top: 0;
left: 0.6em;
margin-top: 0.5em;
width: 0;
border-radius:50%;
}
.content-ul .c-item .tit-read::before {
content: '';
position: absolute;
border-color: #ffffff;
border-style: solid;
border-width: 0.25em;
height: 0;
top: 0;
left: 0.6em;
margin-top: 0.25em;
width: 0;
border-radius:50%
}
.content-ul .c-item .tit .tit-t{
flex:1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
}
.content-ul .c-item.disabled .tit::before{
display:none !important;
}
.content-ul .c-item .tit .tit-v{
margin-left: 12px;
width: 80px;
}
.top-wrap{
width: 100%;
height: 100%;
justify-content: center;
align-items:center;
/*上移,数字能居中*/
margin-top:-18px;
}
.top-desc{
margin-bottom: 15px;
width:100%;
padding: 0 10px;
}
.content-1 {
width: 100%;
margin-bottom: 5px;
align-items: center;
padding:0 15px;
}
.content-1 .cc-num-wrap {
justify-content: space-around;
align-items:center;
}
.content-1 .cc-num-wrap .cc-num {
color: #F4B286;
background-color: #4967AD;
font-size: 38px;
/* padding: 0 2px; */
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 40px;
border-radius:6px;
}
.content-1 .unit1 {
margin-left: 6px;
font-size: 16px;
color: #fff;
}
.tab-tit{
padding:10px;
height:40px;
}
.swiper-container-img {
width: 100%;
height: 100%;
}
.swiper-container-img .swiper-slide {
text-align: center;
font-size: 18px;
/*background: #000;*/
}
.swiper-container-img .swiper-slide img {
/*图片的宽高自动可以设置100%撑满*/
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
}
.swiper-container-img .swiper-slide .title {
font-size: 16px;
font-weight: 300;
position: relative;
z-index: 99;
color: #0B508B;
text-align: left;
text-indent: 45px;
}
</style>
</head>
<body>
<div class="wrap flex flexV">
<div class="bottom-wrap flex1">
<div class="top flex">
<div class="bw-b-bottom flex1 mgrone">
<div class="bw-b-bottom-up flex flexV">
<div class="tab-tit">组织生活会</div>
<div class="bw-item-content flex1">
<!-- Swiper -->
<div class="swiper-container swiper-container-img" id="swiperImg">
<div class="swiper-wrapper">
<%= swiperHtml1 %>
<%--<div class="swiper-slide">
<div class="title">Slide 1</div>
<!-- Required swiper-lazy class and image source specified in data-src attribute -->
<img data-src="http://lorempixel.com/1600/1200/nature/1" class="swiper-lazy">
<!-- Preloader image -->
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 2</div>
<img data-src="http://lorempixel.com/1600/1200/nature/2" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 3</div>
<img data-src="http://lorempixel.com/1600/1200/nature/3" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 4</div>
<img data-src="http://lorempixel.com/1600/1200/nature/4" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 5</div>
<img data-src="http://lorempixel.com/1600/1200/nature/5" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 6</div>
<img data-src="http://lorempixel.com/1600/1200/nature/6" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>--%>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Navigation -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
</div>
</div>
</div>
<div class="bw-b-bottom flex1">
<div class="bw-b-bottom-up flex flexV">
<div class="tab-tit">主题党日活动</div>
<div class="bw-item-content flex1">
<!-- Swiper -->
<div class="swiper-container swiper-container-img" id="swiperImg1">
<div class="swiper-wrapper">
<%= swiperHtml2 %>
<%--<div class="swiper-slide">
<div class="title">Slide 1</div>
<!-- Required swiper-lazy class and image source specified in data-src attribute -->
<img data-src="http://lorempixel.com/1600/1200/nature/1" class="swiper-lazy">
<!-- Preloader image -->
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 2</div>
<img data-src="http://lorempixel.com/1600/1200/nature/2" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 3</div>
<img data-src="http://lorempixel.com/1600/1200/nature/3" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 4</div>
<img data-src="http://lorempixel.com/1600/1200/nature/4" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 5</div>
<img data-src="http://lorempixel.com/1600/1200/nature/5" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>
<div class="swiper-slide">
<div class="title">Slide 6</div>
<img data-src="http://lorempixel.com/1600/1200/nature/6" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</div>--%>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Navigation -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-wrap flex1">
<div class="top flex">
<div class="bg-item flex1 mgrone" id="divJD_wrap" style="margin-bottom:0;">
<div class="bw-item-content flex flexV" style="padding:0;">
<div class="tit-new">党员先锋岗、示范岗</div>
<div class="" style="padding: 0 10px 0; overflow: hidden;">
<div class="swiper-container " id='swiper1' runat="server">
</div>
</div>
</div>
</div>
<div class="bg-item flex1" style="margin-bottom:0;">
<div class="bw-item-content flex flexV" style="padding:0;">
<div class="tit-new">党史学习教育</div>
<div class="" style="padding: 0 10px 0; overflow: hidden;">
<div class="swiper-container " id='swiper2' runat="server">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript">
var basePath = '<%= ResolveUrl("~/") %>';
</script>
<!-- Swiper JS -->
<script src="../package/swiper-bundle.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var widthImg = $(".swiper-container-img").width();
$(".swiper-container-img").css("width", widthImg + 'px')
var swiperImg = new Swiper('#swiperImg', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationClickable: true,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyLoading: true,
autoplay: 3000,
loop: true,
preventClicks: true
});
var swiperImg1 = new Swiper('#swiperImg1', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationClickable: true,
// Disable preloading of all images
preloadImages: false,
// Enable lazy loading
lazyLoading: true,
autoplay: 3000,
loop: true,
preventClicks: false
});
$("#swiperImg,#swiperImg1").on('click', '.swiper-slide', function () {
var data = $(this).attr("data-id");
window.open(data);
});
})
</script>
<script type="text/javascript">
var slidesNum = 5
var mySwiper = null
var mySwiper_JD = null
var slidesNum_JD = 15
var swiper3 = '<%=swiper3 %>'
var accident = { "title": "质量事故", "xFontNum": 0, "legend": null, "categories": ["潮州华瀛", "黄州危废", "山东滨州首站", "嘉盛工程", "湘渝盐化", "东华能源", "广汇启东", "重庆涪陵", "开阳PPA项目", "广西华谊", "金新锅炉", "兴力项目", "济民可信", "哈密广汇", "俄罗斯", "印尼罐区", "印度TALCHER", "天津渤化", "宜都兴发", "图克二期", "云华安"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data3": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data4": [34.56, 37.80, 21.00, 0.00, 6.00, 29.45, 43.12, 29.00, 0.00, 2.84, 95.00, 95.00, 90.00, 23.00, 39.00, 15.00, 17.23, 50.00, 99.00, 86.00, 64.00], "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null }
$(document).ready(function () {
var height = $("#divJD_wrap").height() - 30
var width = $("#divJD_wrap").width()
$("#swiper1").css("height", (height) + 'px').css("width", (width - 30) + 'px')
slidesNum = Math.floor((height) / 24)
$("#swiper1").html(swiper3)
mySwiper = new Swiper('#swiper1', {
autoplay: 3000,//可选选项,自动滑动
direction: 'vertical',
loop: true,
slidesPerView: 7
})
$("#swiper2").css("height", (height) + 'px').css("width", (width - 30) + 'px')
var swiper4 = '<%=swiper4 %>'
$("#swiper2").html(swiper4)
if (accident.categories.length > slidesNum) {
mySwiper_JD = new Swiper('#swiper2', {
autoplay: 3000,//可选选项,自动滑动
direction: 'vertical',
loop: true,
slidesPerView: 7
})
}
})
</script>
<script>
// 点击列表
$("#swiper1").on('click', 'li', function () {
var $this = $(this)
var data = $this.attr("data-id")
var noticeId = $this.attr("notice-id")
//$(".project-list-wrap").show();
//return
if (data != "") {
//Window1.GetShowReference(data) + "return false;";
//document.getElementById("hdNoticeId").value = noticeId;
//document.getElementById("imgBtn").click();
window.open(data);
//top.window.location.reload();
}
})
// 点击列表
$("#swiper2").on('click', 'li', function () {
var $this = $(this)
var data = $this.attr("data-id")
var noticeId = $this.attr("notice-id")
//$(".project-list-wrap").show();
//return
if (data != "") {
//Window1.GetShowReference(data) + "return false;";
//document.getElementById("hdNoticeId").value = noticeId;
//document.getElementById("imgBtn").click();
window.open(data);
//top.window.location.reload();
}
})
</script>
</html>