/******************** 公共组件样式 ********************/ /***** view *****/ view{box-sizing: border-box;} /***** 对齐方式 *****/ .ezy-tl{text-align: left;} .ezy-tc{text-align: center;} .ezy-tr{text-align: right;} /***** 超出省略 *****/ // 文本超出省略号显示 (一行) @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;} // 文本超出省略号显示 (多行) @mixin multi-line-ellipsis($rows: 3){-webkit-line-clamp:$rows;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;display: -webkit-box;white-space: normal !important;-webkit-box-orient: vertical;} /***** 页面背景图 *****/ // no-repeat cover @mixin dljt-no-repeat-cover($position: center) { background-position: $position;background-size: cover;background-repeat: no-repeat; } // no-repeat contain @mixin dljt-no-repeat-contain($position: center) { background-position: $position;background-size: contain;background-repeat: no-repeat; } /***** 标题栏 *****/ // 三个元素 .phone-navBar-box{ display: flex;align-items: center;justify-content: space-between;background-color: #fff; padding: calc(20rpx + var(--status-bar-height)) 20rpx 20rpx;box-sizing: border-box;position: relative; .nav-bar-icon{ width: 24rpx;height: 38rpx; background-image: url("@/static/images/common/nav-bar-jt.svg");@include dljt-no-repeat-cover(); } .nav-bar-title{font-size: 36rpx;color: #333;} // 考试数字 .nav-bar-other{ font-size: 30rpx;color: #fff;margin-right: 2%; .key-note{color: #ffff01;} } // 文字按钮 .text-btn{font-size: 26rpx;color: #666;padding-top: 4rpx;box-sizing: border-box;} // 图标 .nav-bar-icon-box{ .nav-bar-right-icon{font-size: 42rpx;color: #666;} .nav-bar-right-icon + .nav-bar-right-icon{margin-left: 24rpx;} } } // 两个元素 .icon-title-navBar-box,.icon-title-bjcolor-navBar-box{ display: flex;align-items: center;justify-content: center;background-color: #fff; padding: calc(20rpx + var(--status-bar-height)) 20rpx 20rpx;box-sizing: border-box;position: relative; .nav-bar-title{ font-size: 32rpx;height: 63rpx;line-height: 63rpx;color: #333;max-width: 70%; } .nav-bar-icon{ width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: calc(32rpx + var(--status-bar-height)); background-image: url("@/static/images/common/nav-bar-jt.svg");@include dljt-no-repeat-cover(); } .bar-ml10{margin-left: 10rpx;} .nav-bar-btn{font-size: 24rpx;position: absolute;right: 20rpx; line-height: 50rpx;border-radius: 8rpx;padding: 0 10rpx;} } // 仅一个返回按钮 .phone-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height); background-image: url("@/static/images/common/nav-bar-jt.svg");@include dljt-no-repeat-cover(); } /******************** 网站组件样式 ********************/ // 顶部菜单 .dljt-navBar-box{ width: 100%;height: 120rpx;@include dljt-no-repeat-cover(); display: flex;align-items: center;justify-content: space-between; background-image: url("@/static/images/common/dljt-navBar-bj.png"); position: fixed;top: 0;z-index: 3; .uni-navbar--shadow{box-shadow: none;border-bottom: 0;} .uni-navbar__header-btns{display: none;} .uni-navbar__header-container{justify-content: space-between;align-items: center;width: 100%;} .dljt-logo-box{ width: 495rpx;height: 110rpx;@include dljt-no-repeat-cover(); background-image: url("@/static/images/common/website-logo.gif"); } .dljt-menu-box{ width: 50rpx;height: 34rpx;@include dljt-no-repeat-cover(); background-image: url("@/static/images/common/menu-icon.png"); } } .head-collapse-box{ width: 100%;height: calc(100vh - 100rpx)!important;background-color: #0041b7!important;overflow-y: auto; position: fixed;top: 120rpx;left: 0;right: 0;bottom: 100rpx;z-index: 99; .uni-collapse-item__title-box{background-color: #0041b7!important;font-size: 32rpx;color: #fff;} .uni-collapse-item--animation{ transform: rotate(270deg); .uni-icons{font-size: 32rpx!important;color: #fff!important;} } .uni-collapse-item__title-arrow-active{transform: rotate(360deg);} .head-collapse-item{ margin: 0 16rpx; .uni-collapse-item__title-text{font-size: 32rpx;} .uni-collapse-item__title{padding: 16rpx 0;} .open{padding-bottom: 16rpx;} .uni-collapse-item__wrap{background-color: #0041b7!important;} } .head-item-text{background-color: #fff;margin:0 16rpx 16rpx;font-size: 32rpx; border-radius: 8rpx;color: #333;padding: 32rpx 16rpx;box-sizing: border-box;} .active{color: #fff;background-color: #45bcf4;} } // 底部footer .dljt-footer-box{ width: 100%;height: 120rpx;background-color: #01356e;box-sizing: border-box;padding: 0 24rpx; display: flex;align-items: center;justify-content: space-between; .footer-logo-box{ width: 350rpx;height: 78rpx;@include dljt-no-repeat-cover(); background-image: url("@/static/images/common/website-logo.png"); } .footer-text-box{ font-size: 16rpx;color: #fff;text-align:right; view + view{margin-top: 2rpx;} } } // 底部tab-bar .dljt-tab-bar-box{ width: 100%;height: 100rpx;background: #fff;z-index: 99999; position: fixed;bottom: 0;left: 0;right: 0;font-size: 0; display: flex;align-items: center;border-top: 1rpx solid #89b0db;background-color: #fff; .bar-item{ width: 25%;font-size: 28rpx;color: #333;text-align: center; display: flex;flex-direction: column;align-items: center;} icon{width: 48rpx;height: 48rpx;@include dljt-no-repeat-cover();margin-bottom: 2rpx;} .active{color: #003399;} .sy-cion{background-image: url("@/static/images/tabbar/unselect/website-icon1.png");} .xydt-cion{background-image: url("@/static/images/tabbar/unselect/website-icon2.png");} .zsjy-cion{background-image: url("@/static/images/tabbar/unselect/website-icon3.png");} .lxfs-cion{background-image: url("@/static/images/tabbar/unselect/website-icon4.png");} .active .sy-cion{background-image: url("@/static/images/tabbar/select/website-icon1.png");} .active .xydt-cion{background-image: url("@/static/images/tabbar/select/website-icon2.png");} .active .zsjy-cion{background-image: url("@/static/images/tabbar/select/website-icon3.png");} .active .lxfs-cion{background-image: url("@/static/images/tabbar/select/website-icon4.png");} } // 页面box .dljt-page-box{ width: 100%;height: auto;position: relative;padding:120rpx 0 0; } .dljt-page-box::before{ content: ''; width: 100%;height: 260rpx;display: block;@include dljt-no-repeat-cover(bottom); background-image: url("@/static/images/index/dljt-page-bj.png"); position: absolute;top: 120rpx;z-index: 1; } //页面标题 .dljt-page-title{ color: #fff;font-size: 0;text-align: center;font-weight: bold;margin: 20rpx auto; } // 详情页前面带竖杠的标题 .dljt-detail-title{ display: inline-block;color: #333;margin-bottom: 16rpx; .title-text{font-size:28rpx;display: flex;align-items: center;margin: 0;color:#00369a;} .title-text:before{content: ' ';width: 8rpx;height: 26rpx;background-color:#00369a;border-radius: 4rpx; margin-right: 6rpx;} } // 视频标题 .dljt-video-title{ display: inline-block;font-weight: 700;color: #333;margin-bottom: 24rpx; .video-text{font-size:28rpx;display: flex;align-items: center;margin: 0;color:#1460b6;font-weight: bold} .video-text:before{ content:'';width: 56rpx;height: 44rpx;margin:0 12rpx 0 0; @include dljt-no-repeat-cover;background-image: url("@/static/images/common/video-icon.png");} } /* 导航 */ .dljt-breadcrumb-box{ display: flex;align-items: center;padding: 12rpx 6rpx;box-sizing: border-box;border-bottom: 1rpx solid #ccc;margin-bottom: 16rpx; .breadcrumb-text,.breadcrumb-active{font-size: 26rpx;color: #333;} .breadcrumb-active{color: #1752a0;} .breadcrumb-jt{ width: 25rpx;height: 25rpx;transform: rotate(270deg);margin: 0 6rpx; @include dljt-no-repeat-cover;background-image: url("@/static/images/common/nav-bar-jt-bottom.svg");} } /* 详情页蓝色标题*/ .dljt-blue-title{color: #1752a0;font-size: 30rpx;text-align: center;margin-bottom: 54rpx;} /* container */ .dljt-container-box{width: 100%;position: relative;z-index: 2;} .dljt-page-content-box{width: 92%;margin: 0 auto 50rpx;background-color: #fff; box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;} /* 无限滚动区域 */ .dljt-scroll-view{ height: calc(100vh - 410rpx); .uni-scroll-view-content{height: calc(100vh - 410rpx);} } /*左侧图片右侧内容列表区域*/ .list-item-box{ display: flex;margin:32rpx 12rpx;cursor: pointer;position: relative; .list-img{width: 300rpx;height: 200rpx;} .list-time-box{ width: 80rpx;height: 80rpx;background-color: rgba(0,64,194,0.7); color: #fff;position: absolute;top: 0;left: 0;text-align: center; .time-data{font-size: 32rpx;border-bottom: 1rpx solid #e9ffff;margin: 4rpx 10rpx;padding-bottom: 2rpx;} .time-year{font-size: 18rpx;} } .time-red-box{ background-color: rgba(153,0,0,0.7); .time-data{border-bottom: 1rpx solid #fff;} } .list-right-box{ margin-left: 20rpx;flex: 1;border-bottom: 1rpx dashed #999; .list-name{color: #000;font-size: 28rpx;@include multi-line-ellipsis(2);line-height: 1.5; word-wrap: break-word;word-break: break-all; } .list-line{width: 50rpx;height: 6rpx;background-color: #1460b6;margin: 16rpx 0;} .list-content{font-size: 24rpx;@include multi-line-ellipsis(2);color: #666;line-height: 1.5; word-wrap: break-word;word-break: break-all;} } &:first-child{margin:10rpx 12rpx 32rpx;} } /* 左侧日期右侧内容列表区域 */ .data-content-item{ display: flex;align-items:center;margin:32rpx 12rpx;border-bottom: 1rpx dashed #999;padding-bottom: 20rpx;cursor: pointer; .list-time-box{ width: 100rpx;height: 100rpx;background-color:#4d7bd3;border-bottom: 2rpx solid #0145c0; color: #fff;text-align: center;flex-shrink: 0; .time-data{font-size: 36rpx;border-bottom: 1rpx solid #e9ffff;margin:4rpx 6rpx;padding-bottom: 4rpx;} .time-year{font-size: 22rpx;} } .list-title-box{font-size: 28rpx;margin-left: 16rpx;color: #333;@include multi-line-ellipsis(2);line-height: 1.5;} &:first-child{margin:10rpx 12rpx 32rpx;} } /* 视频列表区域 */ .video-item-box{ width: 48%;height: 220rpx;display: inline-block;position: relative;margin:0 1% 16rpx;cursor: pointer; img,.el-image,uni-image{width: 100%;height: 220rpx;} .video-play-btn{ display: none; width: 60rpx;height: 60rpx;position: absolute;left: 50%;top: 50%;transform: translate(-30rpx, -30rpx);transition: all .3s; @include dljt-no-repeat-cover;background-image: url("@/static/images/common/video-play-btn.png");cursor: pointer; } .video-play-btn:hover{width: 66rpx;height: 66rpx;transform: translate(-33rpx, -33rpx);} .video-mask-box{ width: 100%;box-sizing: border-box;padding:12rpx;font-size: 24rpx; position: absolute;left: 0;bottom: 0;right:0;color: #fff;line-height: 1; background: linear-gradient(to bottom, rgba(132,164,226,0), #84A4E2); .video-data,.video-title{font-weight: bold;} .video-title{margin-top: 8rpx;} } } /* 优秀毕业生照片列表 */ .photo-item-box{ width: 31%;border: 1px solid #ccc;padding: 10rpx;box-sizing: border-box; background-color: #fff;margin-bottom: 16rpx;cursor: pointer;display: inline-block; img,uni-image{width: 100%;height: 148rpx;} .photo-mask-box{ .mask-title{font-size: 28rpx;color: #333;margin-top: 6rpx;@include single-line-ellipsis;} .mask-data{font-size: 24rpx;color: #666;margin-top: 6rpx;@include single-line-ellipsis;} } } .photo-item-box +.photo-item-box:not(:nth-child(3n+1)){margin-left: 2%;} /**/ .xyry-item-row{ border-bottom: 1rpx dashed #ccc;margin: 32rpx;display: flex;padding-bottom: 16rpx;cursor: pointer; .xyry-icon{width: 42rpx;height: 42rpx;display: block;@include dljt-no-repeat-cover;margin-right: 16rpx; background-image: url("@/static/images/xygk/xyry-icon.png");flex-shrink: 0} .xyry-title{font-size: 28rpx;line-height: 1.5;color: #333;min-height: 45rpx;display: flex;align-items: center;} } /* 底部返回按钮*/ .return-footer-box{ display: flex;justify-content: space-between;align-items: center; .footer-right{flex-shrink: 0} // .dljt-return-btn{width: 133rpx;height: 40rpx;display: inline-block;margin: 24rpx 0;cursor: pointer;flex-shrink: 0;margin-left: auto; // @include dljt-no-repeat-cover;background-image: url("@/static/images/common/return-btn.png");} .dljt-down-btn{width: 238rpx;height: 60rpx;display: inline-block;margin: 24rpx 0;margin-left: auto; @include dljt-no-repeat-cover;background-image: url("@/static/images/common/down-btn.png");} .dljt-down-btn + .dljt-return-btn{margin-left: 16rpx;} } /* 富文本详情页 */ .dljt-detail-box{ height: calc(100vh - 410rpx);box-sizing: border-box;padding: 24rpx;overflow-y: auto; .detail-title{color: #000;text-align: center;font-size: 32rpx;font-weight: bold;line-height: 1.5;} .detail-data{color: #666;text-align: center;font-size: 26rpx;margin-top: 24rpx;} .dljt-editor-box{ font-size: 26rpx;font-weight: normal;white-space: pre-wrap; color: #333;word-break: break-all;line-height: 1.5; img{max-width: 100%;} .img-center-top{margin: 32rpx auto 0;display: block;} div[data-w-e-type="video"]{text-align: center} span{margin: 0;padding: 0;} p{margin: 16rpx 0;padding: 0;} } uni-video{margin: 0 auto;display: block;margin-bottom: 24rpx;} .pdf-container{ border: 0; .pdf-btn-box{ icon{ width: 46rpx;height: 46rpx;@include dljt-no-repeat-cover;vertical-align: top; background-image: url("@/static/images/common/link-icon.png");} text{ color: #00369a;display: inline-block;vertical-align: middle;margin-right: 10rpx;margin-left: 16rpx; line-height: 30rpx;text-decoration: none;padding: 12rpx 0;vertical-align: top;} } } } /* 分类 */ .dljt-classify-box{ .classify-item{display:inline-block;font-size: 28rpx;border: 1rpx solid #ccc;color: #333;padding:12rpx 16rpx;margin-right: 16rpx;cursor: pointer} .active{background-color: #00369a;color: #fff;border: 1rpx solid #00369a;} } /* 链接模块*/ .dljt-link-box{ margin: 42rpx 0; .link-item-box{ margin-bottom: 16rpx; a{ color: #00369a;display: inline-block;vertical-align: middle;margin-right: 10rpx;margin-left: 16rpx; line-height: 30rpx;text-decoration: none;padding: 12rpx 0;vertical-align: top;} icon{ width: 46rpx;height: 46rpx;@include dljt-no-repeat-cover;vertical-align: top; background-image: url("@/static/images/common/link-icon.png");} .link-text{line-height: 40rpx;text-decoration: underline;padding: 6rpx 0;} } } /* 表格 */ .dljt-table-box{ margin: 16rpx 0;border: 1rpx solid #ccc;font-size: 28rpx; .table-th-row,.table-td-row{ display: flex; >view{display: flex;align-items: center;padding: 16rpx;} view{box-sizing: border-box;border-right: 1rpx solid #ccc;} view:last-child{border-right: 0;} view.item-center{text-align: center} .table-btn{color: #1a6ac3;border-bottom: 1rpx solid #1a6ac3;cursor: pointer} } .table-th-row{background-color: #1a6ac3;color: #fff;text-align:center;} .table-td-row{background-color: #fff;color: #333;border-top: 1rpx solid #ccc;} } /* pdf浮层*/ .dljt-pdf-popup{ .pdf-popup-box{height:100vh;padding: 0;margin: 0;z-index: 9;position: relative;} .dljt-pdf-view{margin-top: 86rpx;} .pdf-return-btn{z-index: 4;position: relative;} }