>>> ax-custom-title { z-index: 9999 !important; } .page-background{ display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .body{ width: 100%; height: 100%; overflow: auto; padding-bottom: 130px; position: relative; z-index: 1; } .body::-webkit-scrollbar{ display: none; } .body.visit{ padding-bottom: 0px; } .block{ padding: 0 10px; } .block + .block{ margin-top: 10px; } /* 主图 */ .host-graph{ margin: 20px 0 10px; } .host-graph .image{ width: 60vw; } /* 主参数 */ .parameter{ display: flex; align-items: center; justify-content: space-between; padding: 0 10px; margin: 0 20px; margin-top: 10px; margin-bottom: 20px; } .parameter .param{ display: flex; align-items: center; justify-content: center; flex-direction: column; } .parameter .param .value{ font-size: 20px; font-weight: bold; } .parameter .param .name{ font-size: 14px; color: #aaa; margin-top: 7px; } /* 卡片 */ .card{ background-color: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.05); } .card .title{ display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: bold; padding-bottom: 10px; padding-left: 10px; border-bottom: 1px solid #ddd; } .card .title .more{ font-size: 14px; color: #aaa; font-weight: normal; } .card .title .more .icon{ margin-left: 5px; } .card .cell{ display: flex; align-items: center; justify-content: space-between; font-size: 14px; height: 32px; padding: 0 10px; } .cell .contet{ color: #aaa; } .cell .obsolete{ font-size: 12px; text-decoration: line-through; color: #aaa; margin-right: 5px; } .cell .obsolete .money{ font-size: inherit; color: inherit; font-weight: normal; } .cell .money{ font-size: 16px; font-weight: bold; color: #f44033; } /* 开关 */ .switch{ display: flex; align-items: center; justify-content: space-between; width: 110px; height: 30px; font-size: 14px; border-radius: 100pc; background-color: #fff; position: relative; color: #333; } .switch > text{ flex: 1; display: flex; justify-content: center; transform: translateY(-1px); transition: all 300ms ease; position: relative; z-index: 2; } .switch.personal > text:first-child, .switch > text:last-child{ color: #fff; } .switch.personal > text:last-child{ color: inherit; } .switch::after{ content: ''; display: block; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 100pc; background-color: #3eb6f8; position: absolute; top: 3px; right: 3px; transition: all 200ms ease; } .switch.personal::after{ transform: translateX(-100%); } /* 提示 */ .tips{ font-size: 14px; margin-top: 10px; padding: 0 10px; } /* 优惠券 */ .coupon{ --coupon-height: 80px; --coupon-cut-size: 16px; display: flex; align-items: center; width: 100%; height: var(--coupon-height); padding: 5px; border-radius: 8px; background-color: #3eb6f8; margin-top: 10px; } .coupon .name{ padding: 0 10px; } .coupon .info{ flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; } .coupon .info .value{ font-size: 30px; font-weight: bold; } .coupon .info .describe{ font-size: 12px; } .coupon .feature{ display: block; position: relative; width: var(--coupon-cut-size); height: var(--coupon-height); overflow: hidden; } .coupon .feature .line{ display: block; width: 1px; position: absolute; left: 50%; top: var(--coupon-cut-size); bottom: var(--coupon-cut-size); border-left: 1px dashed #fff; } .coupon .feature::after, .coupon .feature::before{ content: ''; display: block; width: var(--coupon-cut-size); height: var(--coupon-cut-size); border-radius: 100pc; background-color: #fff; position: absolute; } .coupon .feature::before{ top: 0; transform: translateY(-50%); } .coupon .feature::after{ bottom: 0; transform: translateY(50%); } .coupon.personal{ background-color: #ff7043; color: #fff; } /* 主信息 */ .footer{ display: flex; flex-direction: column; background-color: #fff; border-radius: 16px 16px 0 0; height: 120px; padding: 10px; position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 0 10px rgba(0,0,0,0.1); z-index: 99999; } .footer .tips{ flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #aaa; margin-bottom: 10px; } .footer .startup{ display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 8px; height: 50px; background: linear-gradient(to right,#8FF8FB,#47AEFF); }