/******************** 公共组件样式 ********************/ /***** 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; } /***** 富文本处理 *****/ @mixin ezy-rich-text() { white-space: pre-wrap;text-align: justify; div,p,span{margin: 0;padding: 0;} img{max-width: 100%;} .ql-align-center{text-align: center} .ql-align-right{text-align: right} // 9号字 .ql-size-9px{font-size: 18rpx;} // 12号字 .ql-size-12px{font-size: 24rpx;} // 14号字 .ql-size-14px{font-size: 28rpx;} // 16号字 .ql-size-16px{font-size: 32rpx;} // 18号字 .ql-size-18px{font-size: 36rpx;} // 24号字 .ql-size-24px{font-size: 48rpx;} // 32号字 .ql-size-32px{font-size: 64rpx;} // 单倍行距 .line-height-lineHeight1{line-height: 1;} // 1.5倍行距 .line-height-lineHeight1-5{line-height: 1.5;} // 2倍行距 .line-height-lineHeight2{line-height: 2;} // 2.5倍行距 .line-height-lineHeight2-5{line-height: 2.5;} // 3倍行距 .line-height-lineHeight3{line-height: 3;} } /***** 标题栏 *****/ // 三个元素 .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: 140rpx;@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: 60rpx;height: 44rpx;@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: absolute;top: 0;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: #45bcf4;margin:0 16rpx 16rpx;font-size: 32rpx; border-radius: 8rpx;color: #fff;padding: 32rpx 16rpx;box-sizing: border-box;} } // 底部footer .dljt-footer-box{ width: 100%;height: 140rpx;background-color: #01356e; } // 底部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;margin-top: 140rpx; } .dljt-page-box::before{ content: ''; width: 100%;height: 370rpx;display: block;@include dljt-no-repeat-cover(bottom); background-image: url("@/static/images/index/dljt-page-bj.png"); position: absolute;top: 0;z-index: 1; } //页面标题 .dljt-page-title{ color: #fff;font-size: 32rpx;text-align: center;font-weight: bold;margin: 46rpx auto;padding-top: 46rpx; } /* 导航 */ .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); @include dljt-no-repeat-cover;background-image: url("@/static/images/common/nav-bar-jt-bottom.svg");} } /* container */ .dljt-container-box{width: 100%;position: relative;z-index: 2;} .dljt-page-content-box{width: 92%;margin: 0 auto 60rpx;background-color: #fff; box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;} /*左侧图片右侧内容列表区域*/ .list-item-box{ display: flex;margin:0 6rpx 32rpx;cursor: pointer;position: relative; .list-img{width: 320rpx;height: 220rpx;} .list-time-box{ width: 90rpx;height: 90rpx;background-color: rgba(0,64,194,0.7); color: #fff;position: absolute;top: 0;left: 0;text-align: center; .time-data{font-size: 36rpx;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;} .list-line{width: 50rpx;height: 6rpx;background-color: #1460b6;margin: 20rpx 0;} .list-content{font-size: 24rpx;@include multi-line-ellipsis(2);color: #666;line-height: 1.5;} } }