/* #region 基础 */ *, *::after, *::before { box-sizing: border-box; } .code-notes { font-family: 'Courier New'; font-size: 12px; font-weight: normal; color: #6a9955; } .code-notes::before { margin-right: 5px; content: ''; } .zmdi { vertical-align: middle; } /* #endregion */ /* #region 内外边距 */ .m-lg { margin: 20px !important; } .m-md { margin: 16px !important; } .m-sm { margin: 12px !important; } .m-xs { margin: 8px !important; } .p-lg { padding: 20px !important; } .p-md { padding: 16px !important; } .p-sm { padding: 12px !important; } .p-xs { padding: 8px !important; } .m-none { margin: 0 !important; } .p-none { padding: 0 !important; } .mt-lg { margin-top: 20px !important; } .mt-md { margin-top: 16px !important; } .mt-sm { margin-top: 12px !important; } .mt-xs { margin-top: 8px !important; } .pt-lg { padding-top: 20px !important; } .pt-md { padding-top: 16px !important; } .pt-sm { padding-top: 12px !important; } .pt-xs { padding-top: 8px !important; } .mt-none { margin-top: 0 !important; } .pt-none { padding-top: 0 !important; } .ml-lg { margin-left: 20px !important; } .ml-md { margin-left: 16px !important; } .ml-sm { margin-left: 12px !important; } .ml-xs { margin-left: 8px !important; } .pl-lg { padding-left: 20px !important; } .pl-md { padding-left: 16px !important; } .pl-sm { padding-left: 12px !important; } .pl-xs { padding-left: 8px !important; } .ml-none { margin-left: 0 !important; } .pl-none { padding-left: 0 !important; } .mr-lg { margin-right: 20px !important; } .mr-md { margin-right: 16px !important; } .mr-sm { margin-right: 12px !important; } .mr-xs { margin-right: 8px !important; } .pr-lg { padding-right: 20px !important; } .pr-md { padding-right: 16px !important; } .pr-sm { padding-right: 12px !important; } .pr-xs { padding-right: 8px !important; } .mr-none { margin-right: 0 !important; } .pr-none { padding-right: 0 !important; } .mb-lg { margin-bottom: 20px !important; } .mb-md { margin-bottom: 16px !important; } .mb-sm { margin-bottom: 12px !important; } .mb-xs { margin-bottom: 8px !important; } .pb-lg { padding-bottom: 20px !important; } .pb-md { padding-bottom: 16px !important; } .pb-sm { padding-bottom: 12px !important; } .pb-xs { padding-bottom: 8px !important; } .mb-none { margin-bottom: 0 !important; } .pb-none { padding-bottom: 0 !important; } /* #endregion */ /* #region 工具类 */ .sb-none { position: sticky; bottom: 0; } .inline-block { display: inline-block; } .price-text { font-size: 120%; font-weight: bold; color: #d93636; } .nowrap { white-space: nowrap; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-primary { color: #07c160 !important; } .text-info { color: #4a8df7 !important; } .text-danger { color: #ee0a24 !important; } .text-warning { color: #ff976a !important; } .text-gray { color: gray !important; } .text-xl { font-size: 16px !important; } .text-lg { font-size: 14px !important; } .text-md { font-size: 13px !important; } .text-sm { font-size: 12px !important; } .text-xs { font-size: 10px !important; } /* #endregion */ /* #region 轻提示 */ .van-toast { border-radius: 2px; } /* #endregion */ /* #region 弹出信息框 */ .van-dialog { border-radius: 2px; } /* #endregion */ /* #region 按钮 */ .van-button--primary { background: linear-gradient(to bottom, #62de9e, #07c160); box-shadow: 0 6px 12px rgba(17, 176, 51, .16); } .van-button--info { border-color: #4a8df7; background: linear-gradient(to bottom, #5a9ff2, #569af3, #5296f5, #4e91f6, #4a8df7, #4689f9, #4184fa, #3d7ffb, #397bfc, #3576fe, #3172ff); box-shadow: 0 6px 12px rgba(17, 92, 176, .16); } .van-button--plain.van-button--info { color: #4a8df7; } .van-button--danger { background: linear-gradient(to bottom, #ef5769, #ee0a24); box-shadow: 0 6px 12px rgba(176, 17, 38, .16); } .van-button--warning { background: linear-gradient(to bottom, #ffb899, #ff976a); box-shadow: 0 6px 12px rgba(255, 97, 35, .16); } .van-button--plain { background: #fff; } .van-button--normal.van-button--round { padding: 0 13px; } .van-button--small.van-button--round { padding: 0 16px; } .van-button--mini.van-button--round { padding: 0 8px; } .van-button--circle { padding: 0; border-radius: 50%; } .van-button--small.van-button--circle { width: 32px; } /* #endregion */ /* #region 控件边框覆盖 */ [class*=van-hairline]::after { border-color: #ddd; } .van-cell::after { border-color: #ddd; } .van-nohairline--top::after { border-top: 0; } .van-nohairline--bottom::after { border-bottom: 0; } /* #endregion */ /* #region 单元格&输入框 */ .van-cell { font-size: 13px; } .van-field__label { width: 10em; color: inherit; } /* #endregion */ /* #region 单选框/多选框 */ .van-radio__icon .van-icon, .van-checkbox__icon .van-icon { position: relative; border-radius: 2px; } .van-radio__icon .van-icon::before, .van-checkbox__icon .van-icon::before { position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; content: ''; transition: .25s transform; transform: scale(0); background: linear-gradient(to bottom, #5a9ff2, #569af3, #5296f5, #4e91f6, #4a8df7, #4689f9, #4184fa, #3d7ffb, #397bfc, #3576fe, #3172ff); } .van-radio__icon--round .van-icon, .van-radio__icon--round .van-icon::before, .van-checkbox__icon--round .van-icon, .van-checkbox__icon--round .van-icon::before { border-radius: 100%; } .van-radio__icon--checked .van-icon, .van-checkbox__icon--checked .van-icon { border-width: 2px; background-color: #fff; } .van-radio__icon--checked .van-icon::before, .van-checkbox__icon--checked .van-icon::before { transform: scale(1); } /* #endregion */ /* #region Swipe按钮 */ .van-swipe-cell__left, .van-swipe-cell__right { display: flex; overflow: hidden; } .van-swipe-cell__left .van-button, .van-swipe-cell__right .van-button { height: 100%; } .van-field__control--right .van-radio-group--horizontal, .van-field__control--right .van-checkbox-group--horizontal { justify-content: flex-end; } /* #endregion */ /* #region layout */ .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .page-wrapper { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; } .van-tabbar.van-tabbar--fixed~.page-wrapper { bottom: 50px; } .page-nav { padding-top: 30px; background: url(../img/nav-bg.png) no-repeat center top; } .page-nav__fixed { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; } .page-nav:not(.page-nav-clear) .van-nav-bar { background: none; /* background-size: 100% auto; */ } .page-nav:not(.page-nav-clear) .van-nav-bar__title { white-space: nowrap; color: #fff; } .page-nav:not(.page-nav-clear) .van-nav-bar__text, .page-nav:not(.page-nav-clear) .van-nav-bar .van-icon { color: rgba(255, 255, 255, .9); } .page-nav:not(.page-nav-clear) .van-nav-bar::after { display: none; } .page-bottom-bar { position: absolute; left: 0; bottom: 0; width: 100%; } .page-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; } .van-nav-bar~.page-content { top: 46px; } .page-nav~.page-content { top: 76px; } .page-bottom-bar~.page-content { bottom: 50px; } .page-content-bg::before { position: fixed; top: 76px; left: 0; z-index: -1; width: 100%; height: 100px; content: ''; pointer-events: none; background: url(../img/nav-bg.png) no-repeat center -76px; } .page-content-bg::after { position: fixed; top: 100px; left: 0; z-index: -1; width: 100%; height: 50px; content: ''; pointer-events: none; background: url(../img/wave-top.png) no-repeat center top; background-size: 100%; } @media (max-width: 768px) { .page-content-bg::after { top: 110px; } } .container { width: 66.6666667%; margin: 0 auto; } @media (max-width: 768px) { .container { width: 80%; } } @media (max-width: 414px) { .container { width: auto; margin-right: 16px; margin-left: 16px; } } .page-content>.container:first-child { margin-top: 16px; } .page-block { padding: 0 16px; } .page-bottom-bar__inner { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-around; height: 50px; padding: 0 16px; background-color: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .15); } .page-bottom-bar--inner .van-button { margin: 0 5px; } .page-bottom-bar__info { position: relative; z-index: 10; display: flex; align-items: center; justify-content: flex-start; height: 50px; background-color: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .15); } .page-bottom-bar__title { font-size: 13px; display: flex; align-items: center; height: 50px; padding: 0 16px; color: #fff; background: linear-gradient(to bottom, #5a9ff2, #569af3, #5296f5, #4e91f6, #4a8df7, #4689f9, #4184fa, #3d7ffb, #397bfc, #3576fe, #3172ff); } .page-bottom-bar__content { display: flex; align-items: center; flex: 1; justify-content: space-between; padding: 0 16px 0 8px; } .page-bottom-bar__content .price small { font-size: 12px; } .page-bottom-bar__content .desc { font-size: 12px; color: #999; } .page-form { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; } .page-form::after { position: absolute; top: 0; left: 50%; bottom: 0; z-index: 10; margin-left: -.5px; content: ''; border-right: .5px solid #ddd; } .page-form__col { position: relative; overflow-x: hidden; overflow-y: auto; flex: 0 0 50%; } .page-form__col>.van-overlay { top: 0; z-index: 5 !important; width: 50%; height: 100%; } .van-nav-bar~.page-content .page-form__col>.van-overlay, .page-nav~.page-content .page-form__col>.van-overlay { top: 76px; height: calc(100% - 76px); } .page-bottom-bar~.page-content .page-form__col>.van-overlay { height: calc(100% - 50px); } .van-nav-bar~.page-bottom-bar~.page-content .page-form__col>.van-overlay, .page-nav~.page-bottom-bar~.page-content .page-form__col>.van-overlay { height: calc(100% - 76px - 50px); } .page-form__col:last-child>.van-overlay { left: 50%; } .page-form__col>.van-popup { z-index: 5 !important; width: 50%; height: 100%; } .van-nav-bar~.page-content .page-form__col>.van-popup, .page-nav~.page-content .page-form__col>.van-popup { height: calc(100% - 76px); margin-top: 38px; } .page-bottom-bar~.page-content .page-form__col>.van-popup { height: calc(100% - 50px); margin-top: -25px; } .van-nav-bar~.page-bottom-bar~.page-content .page-form__col>.van-popup, .page-nav~.page-bottom-bar~.page-content .page-form__col>.van-popup { height: calc(100% - 76px - 50px); margin-top: 13px; } @media (max-width: 768px) { .page-form { position: relative; display: block; width: auto; height: auto; margin: 0 auto; } .page-form::after { display: none; } .page-form__col { overflow: visible; } .page-form__col>.van-overlay { left: 0; width: 100%; } .page-form__col>.van-popup { width: 70%; } .page-form__col:last-child>.van-overlay { left: 0; } } /* #endregion */ /* #region 弹出框 */ .van-popup__close-icon--top-left, .van-popup__close-icon--top-right { top: 12px; } /* #endregion */ /* #region 栅格 */ .van-col--100p { flex: 1; } /* #endregion */ /* #region wave */ @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1); } 50% { transform: translateX(-25%) translateZ(0) scaleY(.55); } 100% { transform: translateX(-50%) translateZ(0) scaleY(1); } } .wave-wrapper { position: relative; overflow: hidden; } .wave-wrapper>img { display: block; width: 100%; opacity: 0; } .wave-inner { position: absolute; bottom: 0; overflow: hidden; width: 100%; height: 100%; background-image: linear-gradient(to right, #77e4f0 20%, #62aaff 80%); } .wave-inner>img { display: block; width: 100%; object-fit: cover; } @media (max-width: 768px) { .wave-wrapper>img, .wave-inner>img { width: 140%; margin-left: -20%; } } .wave-top { z-index: 15; opacity: .5; } .bgMiddle { z-index: 10; opacity: .75; } .wave-bottom { z-index: 5; } .wave { position: absolute; top: 0; left: 0; width: 200%; height: 100%; transform-origin: center bottom; background-repeat: repeat no-repeat; background-position: 0 bottom; } .wave-in-top { width: 3840px; background-image: url(../img/wave-top.png); } .wave-animation .wave-in-top { -webkit-animation: move-wave 3s; animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .wave-in-bottom { width: 3840px; background-image: url(../img/wave-bot.png); } .wave-animation .wave-in-bottom { animation: move_wave 15s linear infinite; } /* #endregion */ /* #region 登录 */ .login { display: flex; flex-direction: column; justify-content: flex-start; height: 100vh; } .login-form { position: relative; z-index: 5; display: flex; align-items: center; flex: auto; justify-content: center; } .login-form .van-row { width: 100%; margin-top: -200px; } .login-form .van-password-input { margin-top: 20px; } .login-form .van-field__control { font-size: 20px; } .login-form .van-field__control::-webkit-input-placeholder { font-size: 13px; } /* #endregion */ /* #region 首页 */ .page-home .page-content { padding-top: 30px; } .page-home .page-content::before { position: absolute; top: 0; z-index: -1; width: 100%; height: 400px; content: ''; pointer-events: none; background: url(../img/home-bg.png) no-repeat center top; background-size: 1024px; } .home-logo { font-size: 30px; font-weight: bold; display: flex; align-items: center; justify-content: center; height: 120px; padding: 16px; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, .8); } @media (max-width: 768px) { .home-logo { font-size: 26px; } } @media (max-width: 414px) { .home-logo { font-size: 24px; } } .home-banner { overflow: hidden; border-radius: 10px; background-color: rgba(255, 255, 255, .9); box-shadow: 0 2px 12px rgba(17, 92, 176, .16); backdrop-filter: blur(5px); } .home-banner .swiper-slide .van-image { display: block; } .home-banner .swiper-slide:first-child img { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .home-banner .swiper-slide:last-child img { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .home-banner .swiper-pagination { left: 50%; width: auto; padding-right: 8px; padding-left: 8px; transform: translateX(-50%); border-radius: 999px; background-color: rgba(0, 0, 0, .35); } .home-banner .swiper-pagination-bullet { opacity: 1; background-color: rgba(255, 255, 255, .35); } .home-banner .swiper-pagination-bullet-active { background-color: #fff; } /* #endregion */ /* #region 顶部搜索栏 */ .search-bar { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; margin-bottom: 16px; background-color: #fff; box-shadow: 0 2px 12px rgba(17, 92, 176, .16); } .search-bar-100 { width: 100%; } .search-bar-auto { width: auto; } .search-bar .van-dropdown-menu__bar { box-shadow: none; } .search-bar .van-dropdown-menu__title { font-size: 13px; } .search-bar-auto>.van-button { margin: 0 16px; white-space: nowrap; } .search-bar .van-search, .search-bar .van-dropdown-menu__bar { background: none; } /* #endregion */ /* #region 顶部步骤条 */ .step-bar { position: sticky; top: 0; z-index: 1000; overflow: hidden; margin-bottom: 16px; padding: 8px 32px; background-color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .15); } .step-bar>.step-prev, .step-bar>.step-next { position: absolute; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 60px; height: 100%; } .step-bar>.step-prev { left: 0; } .step-bar>.step-next { right: 0; } .step-bar-container .step-bar__title { font-size: 13px; line-height: 20px; padding-top: 32px; transition: .25 opacity; text-align: center; color: #4a8df7; } .step-bar-container .swiper-slide.step-active~.swiper-slide { opacity: .5; } .step-bar-container .step-bar__title::before { position: absolute; top: 15px; right: 50%; width: calc(100% - 50px); margin-right: 25px; content: ''; border-top: .5px dashed #4a8df7; } .step-bar-container .step-bar__title::after { position: absolute; top: 10px; left: 50%; width: 10px; height: 10px; margin-left: -5px; content: ''; transition: .25s box-shadow; border-radius: 50%; background-color: #4a8df7; box-shadow: 0 0 0 4px rgba(74, 140, 247, .3); } .step-bar-container .step-bar__title.step-active::after { box-shadow: 0 0 0 4px rgba(74, 140, 247, .3), 0 0 0 8px rgba(74, 140, 247, .15); } .step-bar-container .swiper-slide:first-child .step-bar__title::before { display: none; } .step-content { position: absolute; top: 68px; bottom: 0; width: 100%; } .step-content .swiper-container { height: 100%; } .step-content .swiper-slide { overflow-y: auto; width: 66.66666667%; transition: .25s opacity; opacity: 0; } .step-content .swiper-slide.swiper-slide-active { opacity: 1; } /* #endregion */ /* #region 通用卡片 */ .card { margin-bottom: 16px; border-radius: 12px; background-color: rgba(255, 255, 255, .9); box-shadow: 0 2px 12px rgba(17, 92, 176, .16); backdrop-filter: blur(5px); } .card.card-bg { background: rgba(255, 255, 255, .9) url(../img/card-bg.png) no-repeat bottom center; background-size: 100% auto; } .card.card-border { border-left: 3px solid #4184fa; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .card-noshadow { box-shadow: none; } .card-header { font-size: 14px; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-radius: 12px 12px 0 0; } .card.card-bg .card-header { color: #fff; background: linear-gradient(to right, #7d47f3, #369dfd); } .card-header__action { font-size: 13px; color: #aaa; } .card-body { font-size: 13px; position: relative; padding: 16px; } .card-body-nopadding { padding: 0; } .card-body .van-cell-group { background-color: transparent; } .card-body .van-cell { background-color: transparent; } .card-group { margin-bottom: 16px; } .card-group .card { margin-bottom: 8px; } .card-group .card:last-child { margin-bottom: 0; } /* #endregion */ /* #region 工具卡片 */ .card-bar { position: fixed; top: 92px; bottom: 50px; width: 157px; } @media (max-width: 768px) { .card-bar { width: 115px; } } .card-bar .card-body { display: flex; align-items: center; flex-direction: column; justify-content: space-around; height: 100%; } .card-nav { position: relative; display: flex; align-items: center; flex-direction: column; } .card-nav.active::before { position: absolute; top: 50%; width: 3px; height: 30px; content: ''; transform: translate(-48px, -50%); border-radius: 3px; background-color: #3172ff; } .card-nav__icon { font-size: 32px; margin-bottom: 8px; } .card-nav__text { font-size: 14px; } /* #endregion */ /* #region 通用标题 */ .public-title { font-size: 14px; position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 8px 16px 8px 32px; color: rgba(0, 0, 0, .5); border-radius: 10px; background-color: rgba(255, 255, 255, .85); backdrop-filter: blur(5px); } .public-title::before { position: absolute; left: 16px; width: 3px; height: 10px; content: ''; background-color: #3172ff; } .public-title.no-border::before { display: none; } .public-title span, .public-title .van-icon { vertical-align: middle; } .public-title a { font-size: 13px; color: #3172ff; } /* #endregion */ /* #region 调查表/协议入口 */ .enter-links { display: flex; overflow: hidden; margin-bottom: 8px; border-radius: 4px; background-color: #f5f8fa; } .enter-links:last-child { margin-bottom: 0; } .enter-title { line-height: 30px; width: 180px; height: 30px; text-align: center; color: #fff; } .enter-link { line-height: 30px; position: relative; display: block; flex: 100%; text-align: center; } .enter-link .van-icon { vertical-align: middle; } .enter-link::after { position: absolute; top: 8px; right: 0; bottom: 8px; content: ''; border-right: .5px solid #ddd; } .enter-link:last-child::after { display: none; } /* #endregion */ /* #region 被征收人列表 */ .info-card { font-size: 13px; display: flex; align-items: center; flex-wrap: wrap; padding: 16px; border-bottom: .5px solid #ddd; } .info-card:last-child { border-bottom: 0; } .info-card__icon { font-size: 24px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 16px; border-radius: 50%; background: linear-gradient(to bottom, #5a9ff2, #569af3, #5296f5, #4e91f6, #4a8df7, #4689f9, #4184fa, #3d7ffb, #397bfc, #3576fe, #3172ff); } .info-card__info { display: flex; flex: 1; flex-wrap: wrap; } .info-card__section { line-height: 24px; display: flex; align-items: center; word-break: break-all; } .info-card__section .van-row { width: 100%; } .info-card__label { font-weight: bold; margin-right: 8px; } .info-card__value { color: #4579f6; } .info-card__desc { line-height: 20px; color: #666; } /* #endregion */ /* #region 标签页 */ .tabs-no-bar .van-tabs__wrap { display: none; } /* #endregion */ /* #region 时间轴 */ .time-axis-item { position: relative; display: flex; margin-bottom: 16px; } .time-axis-date { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; width: 100px; } .time-axis-date::before { font-size: 13px; line-height: 30px; height: 30px; margin-right: 8px; content: attr(date); color: #aaa; } .time-axis-date::after { font-size: 13px; font-weight: 700; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; content: attr(day); color: #fff; border-radius: 50%; background: linear-gradient(to bottom, #5a9ff2, #569af3, #5296f5, #4e91f6, #4a8df7, #4689f9, #4184fa, #3d7ffb, #397bfc, #3576fe, #3172ff); box-shadow: 0 6px 12px rgba(17, 92, 176, .16); } .time-axis-line { position: absolute; top: 30px; left: 70px; bottom: -16px; width: 3px; background-color: #4184fa; } .time-axis-item:last-child .time-axis-line { display: none; } .time-axis-content { flex: 1; } .time-axis-content>.card { margin-bottom: 0; } .time-axis__subtitle { font-size: 80%; color: #aaa; } .time-axis__content { font-size: 13px; color: #333; } .time-axis__attrs { margin-top: 16px; } .time-axis__files { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; } .time-axis__file { margin-right: 8px; margin-bottom: 8px; } .audios-player { width: 200px; height: 30px; border-radius: 2px; background: linear-gradient(165deg, #62de9e, #07c160); } .time-axis__sign { margin-top: 16px; } .time-axis__sign p { font-size: 12px; margin: 0; } .time-axis__control { width: 24px; height: 24px; vertical-align: middle; box-shadow: none; } /* #endregion */ /* #region Swiper */ .thumb-swiper.swiper-container { height: 416px; padding: 0 16px; } .thumb-swiper .swiper-slide { display: inline-block; width: auto; width: 200px; height: 200px; } .thumb-swiper .van-image { display: block; } .thumb-video::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0, 0, 0, .35); } .thumb-video::after { position: absolute; top: 50%; left: 50%; margin-left: 5px; content: ''; transition: .5s; transition-property: opacity, transform; transform: translate(-50%, -50%) scale(1); opacity: 1; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 26px solid #fff; } .thumb-video.thumb-video__sm::after { margin-left: 2px; border-top-width: 8px; border-bottom-width: 8px; border-left-width: 14px; } .thumb-video.playing::after { transform: translate(-50%, -50%) scale(5); opacity: 0; } .thumb-info { line-height: 20px; } .thumb-info h3 { font-size: 13px; margin: 5px 0; } .thumb-info p { margin: 0; color: #aaa; } /* #endregion */ /* #region 静态信息展示 */ .static-info { margin-bottom: 16px; } .static-info .row { line-height: 24px; display: flex; align-items: flex-start; padding: 8px 16px; } .static-info__lg, .static-info__md, .static-info__sm { margin-right: 16px; } .static-info__lg:last-child, .static-info__md:last-child, .static-info__sm:last-child { margin-right: 0; } .static-info__lg { font-size: 16px; font-weight: bold; } .static-info__md { font-size: 15px; } .static-info__sm { font-size: 13px; color: #666; } /* #endregion */ /* #region 双层标签页 */ .tabs-parent, .tabs-child { height: 100%; } .tabs-parent .van-tabs__nav { background-color: #f7f7f7; } .tabs-parent .van-tab { font-size: 13px; color: #999; } .tabs-parent .van-tab__pane { overflow-y: auto; height: 100%; } .tabs-parent .van-tab--active { color: #3172ff; background-color: #fff; } .tabs-parent .van-tabs__line { display: none; } .tabs-parent__action { position: sticky; right: -8px; display: flex; align-items: center; padding: 0 8px; background-color: #fff; box-shadow: -3px 0 13px rgba(0, 0, 0, .15); } .tabs-parent__action .van-button { white-space: nowrap; } .tabs-parent .van-tabs__content { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; } .tabs-child .van-tabs__wrap { border-bottom: 4px solid #f7f7f7; } .tabs-child .van-tabs__nav { background-color: #fff; } .tabs-child .van-tab--active { font-size: 15px; font-weight: bold; color: #222; } .tabs-child__action { position: sticky; right: -8px; display: flex; align-items: center; padding: 0 8px; background-color: #fff; } .tabs-child__action .van-button { padding: 0 5px; } .swiper__16x9 .swiper-slide { height: auto; padding-bottom: 56.25%; } .swiper__16x9 .swiper-slide>.van-image, .swiper__16x9 .swiper-slide>.van-empty { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .swiper__16x9 .swiper-slide>.van-image>img { object-fit: cover; } .swiper-container-horizontal>.swiper-pagination-progressbar { top: auto; bottom: 0; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #4a8df7; } /* #endregion */ /* #region 个人中心 */ .user-container { height: 212px; margin-bottom: 16px; background: url(../img/user-bg.jpg); } .user-info { width: 100%; } .user-info__base { display: flex; align-items: center; margin: 0 32px; color: #fff; } .user-info__base h1 { font-size: 24px; margin: 0 0 16px; } .user-info__base h4 { font-size: 14px; font-weight: normal; margin: 0; } .user-info__avatar { margin-right: 32px; padding: 3px; border-radius: 50%; background-color: #fff; } .user-info__avatar .van-image { display: block; } .user-info__columns { display: flex; justify-content: space-around; margin-top: 24px; } .user-info__card { padding: 8px; text-align: center; border-radius: 12px; background: rgba(0, 0, 0, .3); backdrop-filter: blur(5px); } .user-info__card .statistic-content>span { color: #fff; } .user-info__card .statistic-content>small, .user-info__card .statistic-title { color: rgba(255, 255, 255, .75); } /* #endregion */ /* #region 上传组件 */ .uploader-container { margin-bottom: 16px; } .uploader-thumb { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0 8px 8px 16px; } .uploader-thumb__preview { position: relative; margin-right: 8px; margin-bottom: 8px; } .uploader-thumb__preview .van-image { display: block; } .uploader-list { margin-bottom: 16px; } .uploader-list__item { overflow: hidden; margin-bottom: -1px; border: .5px solid #ddd; } .uploader-list__item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .uploader-list__item:last-child { margin-bottom: 16px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .uploader-list__item .info-card { border-bottom: 0; } /* #endregion */ /* #region 录音播放器 */ .audio-container { display: flex; align-items: center; flex-direction: column; } .audio-nowrap { flex-direction: row; } .audio-nowrap .audio-timer { margin-right: 8px; } .audio-wave { display: flex; align-items: center; justify-content: center; height: 50px; } .audio-nowrap .audio-wave { display: none; } .audio-wave span { display: block; width: 5px; height: 0; margin: 0 5px; background: #4184fa; } .audio-container.recording .audio-wave span { animation: audio-wave .5s infinite ease; } @keyframes audio-wave { 0% { height: 5px; } 30% { height: 15px; } 60% { height: 20px; } 80% { height: 15px; } 100% { height: 5px; } } .audio-wave span:nth-of-type(2n) { animation-delay: 0 !important; } .audio-wave span:nth-of-type(2n + 1) { animation-delay: .25s !important; } .audio-button { position: relative; overflow: hidden; width: 40px; height: 40px; border: .5px solid #ddd; border-radius: 50%; } .audio-button::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; pointer-events: none; opacity: 0; border-radius: inherit; background-color: #000; } .audio-button:active::before { opacity: .1; } .audio-button__icon::before { position: absolute; top: 50%; left: 50%; display: block; margin-left: 3px; content: ''; transition: .2s all; transform: translate(-50%, -50%) scale(1); opacity: 1; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #999; } .audio-button__icon::after { position: absolute; top: 50%; left: 50%; display: block; width: 15px; height: 15px; content: ''; transition: .2s all; transform: translate(-50%, -50%) scale(5); opacity: 0; background-color: #ee0a24; } .audio-container.recording .audio-button__icon::before { transform: translate(-50%, -50%) scale(5); opacity: 0; } .audio-container.recording .audio-button__icon::after { transform: translate(-50%, -50%) scale(1); opacity: 1; } .audio__sm { position: relative; display: inline-block; } .audio__sm .audio-timer { font-size: 10px; line-height: 1; position: absolute; top: 15px; width: 100%; text-align: center; opacity: 0; } .audio__sm .audio-wave { display: none; } .audio__sm.recording .audio-timer { opacity: 1; } .audio__sm.recording .audio-button__icon { opacity: 0; } /* #endregion */ /* #region 统计信息 */ .statistic-item { text-align: center; } .statistic-item.card-body { padding: 16px 8px; } .statistic-title { font-size: 13px; color: #aaa; } .statistic-content { font-size: 0; } .statistic-title+.statistic-content, .statistic-content+.statistic-title { margin-top: 8px; } .statistic-content>span { font-size: 24px; font-weight: bold; color: #222; } .statistic-content>small { font-size: 14px; color: #666; } .statistic-group { display: flex; align-items: flex-end; justify-content: space-around; } .statistic-item+.statistic-group { margin-top: 16px; padding-top: 16px; border-top: .5px solid #ddd; } .statistic-group .statistic-title { font-size: 12px; } .statistic-group .statistic-content>span { font-size: 18px; } .statistic-group .statistic-content>small { font-size: 11px; } /* #endregion */ /* #region 邮件卡片 */ .mail-card { position: relative; background: none; } .mail-card__unread::before { position: absolute; width: 6px; height: 6px; content: ''; border-radius: 50%; background-color: #ed8249; } .mail-card .van-card__header { align-items: center; } .mail-card .van-card__thumb { width: 40px; height: 40px; } .mail-card .van-card__thumb .van-icon { color: #fff; } .mail-card .van-card__content { height: 60px; min-height: 0; } .mail-card .van-card__title { font-size: 14px; line-height: 20px; max-height: 40px; } .mail-card .van-card__desc { font-size: 13px; } /* #endregion */ .table { width: 100%; border-collapse: collapse; } .table-layout-fixed { table-layout: fixed; } .table>thead>tr>th, .table>tbody>tr>td { line-height: 1.5; padding: 8px; text-align: left; } .table>tbody>tr>td { border-bottom: .5px solid #eee; } .table>tbody>tr:last-child>td { border-bottom: 0; } .version-container { margin: 50px auto; text-align: center; }