Files
wxapp_escort/pages/mine/business.wxss
T

166 lines
3.6 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* pages/mine/business.wxss
配色令牌来自 app.wxss(全站唯一来源),本页不留副本;
卡片、卡头标识、圆点清单与陪诊指南页同一套语言,保证内页风格一致 */
page {
background-color: var(--paper);
}
.page-bg {
min-height: 100vh;
background: var(--paper);
}
.container {
padding: 32rpx 32rpx 0;
}
/* ===== 头部:小色带 + 深墨标题 ===== */
.page-header {
padding: 24rpx 0 8rpx;
}
.header-accent {
width: 64rpx;
height: 8rpx;
border-radius: 4rpx;
background: var(--brand-strong);
}
.header-title {
display: block;
margin-top: 20rpx;
font-size: 46rpx;
font-weight: 700;
color: var(--ink);
letter-spacing: 1rpx;
}
.header-subtitle {
display: block;
margin-top: 12rpx;
font-size: 26rpx;
color: var(--muted);
letter-spacing: 1rpx;
}
/* ===== 方向卡:白面走发丝边 + 中性紧阴影 ===== */
.card {
margin-top: 32rpx;
padding: 28rpx 26rpx;
border-radius: 28rpx;
background: var(--white);
border: 2rpx solid var(--line);
box-shadow: var(--shadow-card);
}
.card-head {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
/* 卡头标识:浅橙衬底 + 2rpx 描边托形,不用实心橙(全页无实心大色块) */
.card-mark {
width: 44rpx;
height: 44rpx;
border-radius: 12rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.card-title {
margin-left: 14rpx;
font-size: 32rpx;
font-weight: 700;
color: var(--ink);
letter-spacing: 1rpx;
}
/* ===== 规则条目:与陪诊指南页同一套圆点语言 ===== */
.dot-item {
display: flex;
padding: 12rpx 0;
}
.dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: var(--brand-strong);
margin: 16rpx 18rpx 0 4rpx;
flex-shrink: 0;
}
.dot-text {
flex: 1;
font-size: 28rpx;
color: var(--ink-2);
line-height: 1.7;
}
/* 尾注:与条目用发丝线切开,读到的是口径说明而非又一条规则 */
.card-note {
display: block;
margin-top: 8rpx;
padding-top: 20rpx;
border-top: 2rpx solid var(--line);
font-size: 24rpx;
color: var(--muted);
line-height: 1.7;
}
/* ===== 底部出口:浅橙入口卡(同 about 页「联系我们」配方)=====
靠 2rpx --brand-line 描边托形,不加阴影 */
.contact-entry {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 48rpx;
padding: 28rpx 26rpx;
border-radius: 28rpx;
background: var(--brand-soft);
border: 2rpx solid var(--brand-line);
transition: transform 0.15s ease;
}
.contact-entry:active,
.contact-entry-hover {
transform: scale(0.99);
}
/* chevron 绝对定位贴右缘:只作点击暗示,不参与居中计算,
否则会把文字往左挤偏半个箭头宽 */
.entry-arrow {
position: absolute;
right: 26rpx;
top: 50%;
transform: translateY(-50%);
}
/* 说明句:比主色文字小一号(26rpx)并转灰,退到背景层;
--muted 在浅橙底上 5.24:1,过 AA;26rpx 高于中文最小字号 24rpx */
.entry-prefix {
font-size: 26rpx;
color: var(--muted);
}
/* 落在"联系我们"上,保留暖橙主色与字重,成为这行文字的指向;
--brand-ink 就是为「浅橙底上的文字」定义的令牌(浅橙底 5.96:1,过 AA)。
margin-left 是两段之间的唯一间隙来源(不靠空白字符),
8rpx 约半个汉字宽,够断开语气又不至于把一句话读散 */
.entry-title {
margin-left: 8rpx;
font-size: 30rpx;
font-weight: 700;
color: var(--brand-ink);
}
.footer-space {
height: 60rpx;
}