cneicy
e3ad73d397
前端验证 / verify (push) Successful in 2m7s
- 云产品选择器新增地区标签页、分组数量及全部选项，自动跟随当前线路所属地区 - 将线路和型号改为紧凑选择按钮，精简型号名称的公共前缀并保留完整名称提示 - 物理服务器目录改为规格列表，支持行内展开、收起线路详情及进入定制页 - 新增商品起价升降序排序，将无有效价格的商品置于末尾 - 将规格筛选改为下拉选项，移动端支持展开更多筛选并显示已选条件数量 - 统一云服务器与物理服务器的横向配置表单，优化磁盘、带宽、镜像选择及移动端布局 - 限制桌面端配置汇总栏高度，使清单内部滚动并保持价格和购买按钮可见 - 统一产品分类标签页与胶囊按钮样式，补充查看全部产品入口 - 将产品选择器和物理服务器目录重构为 script setup、声明式模板及 scoped 样式，删除旧样式文件与相关引用
239 lines
6.6 KiB
CSS
239 lines
6.6 KiB
CSS
/* 弹性云产品配置：系统/数据磁盘与流量套餐展示。 */
|
|
/* 导入方：app/components/config/KkyEcsConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
|
|
.cycle-warn[data-v-e8ce6418] {
|
|
flex-shrink: 0;
|
|
}
|
|
.hint[data-v-e8ce6418] {
|
|
color: var(--p-text-muted-color);
|
|
font-size: 0.875rem;
|
|
}
|
|
.storage-system[data-v-e8ce6418] {
|
|
width: calc(50% - 8px);
|
|
}
|
|
.storage-disks[data-v-e8ce6418] {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
min-width: 0;
|
|
display: grid;
|
|
}
|
|
.traffic-package-value[data-v-e8ce6418] {
|
|
border: 1px solid var(--p-content-border-color);
|
|
background: var(--p-content-background);
|
|
width: 196px;
|
|
min-height: 44px;
|
|
color: var(--p-text-color);
|
|
border-radius: var(--radius-md);
|
|
align-items: center;
|
|
padding: 8px 14px;
|
|
display: flex;
|
|
}
|
|
.traffic-package-value strong[data-v-e8ce6418] {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
/* 视口条件 (width<640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
|
|
@media (width<640px) {
|
|
.storage-system[data-v-e8ce6418] {
|
|
width: 100%;
|
|
}
|
|
.storage-disks[data-v-e8ce6418] {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.traffic-package-value[data-v-e8ce6418] {
|
|
width: 100%;
|
|
max-width: 470px;
|
|
}
|
|
}
|
|
/* 横向表单：左列标签、右列控件，所有控件左缘对齐；字段分组容器不参与布局。 */
|
|
.form-inline[data-v-e8ce6418] {
|
|
display: contents;
|
|
}
|
|
.config-page .config-options .form-row[data-v-e8ce6418] {
|
|
grid-template-columns: 88px minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: 8px 16px;
|
|
margin-bottom: 0;
|
|
display: grid;
|
|
}
|
|
.config-page .config-options .form-row > label[data-v-e8ce6418],
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-label,
|
|
.config-page .bandwidth-field[data-v-e8ce6418] .bandwidth-label {
|
|
color: var(--p-text-muted-color);
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
font-weight: 400;
|
|
line-height: 36px;
|
|
}
|
|
.config-page .config-options .form-row[data-v-e8ce6418] > :not(label) {
|
|
grid-column: 2;
|
|
}
|
|
.config-page .config-options .form-row > .storage-field[data-v-e8ce6418],
|
|
.config-page .config-options .form-row > .bandwidth-field[data-v-e8ce6418] {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.config-options > .panel[data-v-e8ce6418] {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
display: flex;
|
|
}
|
|
.config-options > .panel > .section-title[data-v-e8ce6418] {
|
|
margin-bottom: 6px;
|
|
}
|
|
.config-page .config-options .image-groups[data-v-e8ce6418] {
|
|
margin-bottom: 0;
|
|
}
|
|
.config-page .storage-panel .form-row > label[data-v-e8ce6418],
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-label {
|
|
line-height: 46px;
|
|
}
|
|
.config-page .storage-system[data-v-e8ce6418] {
|
|
width: auto;
|
|
}
|
|
.config-page .traffic-package-value[data-v-e8ce6418] {
|
|
min-height: 36px;
|
|
width: auto;
|
|
justify-self: start;
|
|
padding: 6px 14px;
|
|
}
|
|
|
|
/* 磁盘：系统盘与各数据盘统一为单行卡片，列宽一致便于对齐。 */
|
|
.config-page .storage-field[data-v-e8ce6418] {
|
|
grid-template-columns: 88px minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: 16px;
|
|
display: grid;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-card {
|
|
grid-template-columns: 48px 150px minmax(80px, 1fr) auto 30px;
|
|
grid-template-areas: "type cap slider desc remove";
|
|
grid-column: 2;
|
|
align-items: center;
|
|
gap: 16px;
|
|
min-height: 46px;
|
|
padding: 4px 12px;
|
|
border: 1px solid var(--p-content-border-color);
|
|
background: var(--p-content-background);
|
|
box-shadow: none;
|
|
display: grid;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-card-header {
|
|
display: contents;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-card-header strong {
|
|
grid-area: type;
|
|
color: var(--p-text-color);
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-remove {
|
|
grid-area: remove;
|
|
margin: 0;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-capacity {
|
|
grid-area: cap;
|
|
}
|
|
.config-page
|
|
.storage-field[data-v-e8ce6418]
|
|
.storage-capacity
|
|
.p-inputnumber-input {
|
|
min-height: 34px;
|
|
padding: 6px 10px;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-slider {
|
|
grid-area: slider;
|
|
margin: 0;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-description {
|
|
grid-area: desc;
|
|
color: var(--p-text-muted-color);
|
|
white-space: nowrap;
|
|
font-size: 0.8125rem;
|
|
}
|
|
.config-page .config-options .storage-disks[data-v-e8ce6418] {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.storage-disks[data-v-e8ce6418] > .storage-field {
|
|
display: block;
|
|
}
|
|
.storage-disks > .storage-add[data-v-e8ce6418] {
|
|
min-height: 40px;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
padding: 8px 14px;
|
|
border-width: 1px;
|
|
font-size: 0.9375rem;
|
|
}
|
|
.config-page .config-options .form-row > .hint[data-v-e8ce6418] {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* 带宽：标签、数值输入和滑块同一行。 */
|
|
.config-page .bandwidth-field[data-v-e8ce6418] {
|
|
grid-template-columns: 88px 150px minmax(80px, 1fr);
|
|
align-items: center;
|
|
gap: 16px;
|
|
max-width: none;
|
|
display: grid;
|
|
}
|
|
.config-page
|
|
.bandwidth-field[data-v-e8ce6418]
|
|
.bandwidth-capacity
|
|
.p-inputnumber-input {
|
|
min-height: 34px;
|
|
padding: 6px 10px;
|
|
}
|
|
.config-page .bandwidth-field[data-v-e8ce6418] > .bandwidth-slider {
|
|
width: auto;
|
|
max-width: 360px;
|
|
margin: 0 8px 0 0;
|
|
}
|
|
|
|
.config-page .image-groups[data-v-e8ce6418] {
|
|
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.config-page .image-groups[data-v-e8ce6418] .image-group {
|
|
min-height: 48px;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
font-size: 0.9375rem;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@media (width<640px) {
|
|
.config-page .config-options .form-row[data-v-e8ce6418],
|
|
.config-page .storage-field[data-v-e8ce6418] {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 6px;
|
|
}
|
|
.config-page .config-options .form-row[data-v-e8ce6418] > :not(label),
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-card {
|
|
grid-column: 1;
|
|
}
|
|
.config-page .config-options .form-row > label[data-v-e8ce6418],
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-label,
|
|
.config-page .bandwidth-field[data-v-e8ce6418] .bandwidth-label {
|
|
line-height: 1.5;
|
|
}
|
|
.config-page .storage-field[data-v-e8ce6418] .storage-card {
|
|
grid-template-columns: 40px minmax(0, 1fr) 30px;
|
|
grid-template-areas:
|
|
"type cap remove"
|
|
"slider slider slider"
|
|
"desc desc desc";
|
|
gap: 10px 12px;
|
|
padding: 10px 12px;
|
|
}
|
|
.config-page .bandwidth-field[data-v-e8ce6418] {
|
|
grid-template-columns: 120px minmax(0, 1fr);
|
|
gap: 6px 16px;
|
|
}
|
|
.config-page .bandwidth-field[data-v-e8ce6418] .bandwidth-label {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.config-page .image-groups[data-v-e8ce6418] {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|