* { font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial, roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif; } .category-page { display: flex; align-items: start; } .category-page-menu { min-width: calc(100% / 5 + 2.02666666vw); width: calc(100% / 5 + 2.02666666vw); min-height: calc(100VH - 15.666VW - 60px); height: 100%; display: block; background-color: #f0f0f0; } .category-menu-item { width: 100%; height: calc(10VH - 1.5666VW - 6px); line-height: calc(10VH - 1.5666VW - 6px); text-align: center; } .category-menu-item-select { background-color: white; } .category-page-body { display: grid; grid-template-columns: repeat(3, 24VW ); gap: 10px; } .category-page-body .category-page-item { padding: 10px; display: flex; flex-direction: column; justify-content: start; } .category-page-body .category-page-item .category-page-item-image { width: calc(24VW - 20px); height: calc(24VW - 20px); border-radius: calc(5VW - 4px); } .category-page-body .category-page-item .category-page-item-image img { border-radius: inherit; width: 100%; height: 100%; } .category-page-body .category-page-item .category-page-item-name { margin-top: calc(1.6VW); font-weight: bold; line-height: 1.5; display: -webkit-box; /* 创建弹性盒子模型 */ -webkit-box-orient: vertical; /* 垂直排列子元素 */ overflow: hidden; /* 隐藏溢出的内容 */ text-overflow: ellipsis; /* 溢出的部分显示省略号 */ -webkit-line-clamp: 3; /* 限制显示的行数,这里限制为3行 */ max-height: calc(1.5em * 3); /* 计算出元素的最大高度(行高乘以行数) */ } .category-page-goods-detail { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100VW; height: 100VH; display: block; background-color: white; z-index: 12; } .category-page-goods-detail .category-goods-detail-header { width: 100VW; height: 13VW; background-color: #dddddd; position: fixed; top: 0; left: 0; right: 0; } .category-page-goods-detail .category-goods-detail-header-interval { height: 13VW; } .category-page-goods-detail .category-goods-detail-header .header-return { width: 6VW; height: 6VW; position: fixed; font-size: 24px; line-height: 6VW; text-align: center; color: #666666; padding: 2VW; margin: 1.5VW; border-radius: 50%; user-select: none; } .category-page-goods-detail .category-goods-detail-header .header-return::after { content: "<"; } .category-page-goods-detail .category-goods-detail-header .header-title { height: 6VW; font-size: 1.6em; line-height: 6VW; text-align: center; color: #666666; padding: 0 15VW; margin: 3.5VW 1.5VW; border-radius: 50%; user-select: none; display: -webkit-box; /* 创建弹性盒子模型 */ -webkit-box-orient: vertical; /* 垂直排列子元素 */ overflow: hidden; /* 隐藏溢出的内容 */ text-overflow: ellipsis; /* 溢出的部分显示省略号 */ -webkit-line-clamp: 1; /* 限制显示的行数,这里限制为3行 */ max-height: calc(1.5em * 3); /* 计算出元素的最大高度(行高乘以行数) */ } .category-page-goods-detail .category-goods-detail-handler { margin: 3VW 0 6VW; height: 7VW; line-height: 7VW; width: calc(100% - 8VW); display: flex; padding: 0 4VW; justify-content: space-evenly; } .category-page-goods-detail .category-goods-detail-handler .cgdh-tab-item { background-color: #f0f0f0; padding: 0 2.6VW; font-size: 3.4VW; color: #444444; border-radius: 1.1VW; } .category-page-goods-detail .category-goods-detail-handler .cgdh-tab-item-selected { /*反色*/ /*filter: invert(0.9);*/ background-color: #444444; color: #f0f0f0; } .category-page-goods-detail .category-goods-detail-skus { display: flex; flex-direction: column; align-items: start; } .category-page-goods-detail .category-goods-detail-skus .category-goods-detail-sku { margin: 0 auto 5.2VW; display: flex; width: 92VW; } .category-page-goods-detail .category-goods-detail-skus .cgds-left-img { display: flex; width: 22VW; height: 29.5VW; border-radius: 1.1VW; background-color: #444444; flex-direction: column; align-items: start; margin-right: 3.2VW; } .category-page-goods-detail .category-goods-detail-skus .cgds-left-img img { width: 100%; height: 100%; border-radius: inherit; box-shadow: #444444 0 0 5px; } .category-page-goods-detail .category-goods-detail-skus .cgds-right-detail { display: flex; flex-direction: column; justify-content: space-between; } .category-goods-detail-sku .cgds-right-detail .cgds-right-detail-name { color: #1a1a1a; font-size: 4VW; font-weight: bold; line-height: 5.05VW; } .category-goods-detail-sku .cgds-right-detail .cgds-right-detail-salesnum { font-size: 3.5VW; color: #aaaaaa; font-weight: bold; height: 14.4VW; } .category-goods-detail-sku .cgds-right-detail .cgds-right-detail-price { height: 6.4VW; line-height: 6.4VW; display: flex; font-size: 4.3VW; font-weight: bold; } .category-goods-detail-sku .cgds-right-detail .cgds-right-detail-price .cgds-right-detail-price-now { color: #ea0000; font-size: 4.3VW; font-weight: bold; } .category-goods-detail-sku .cgds-right-detail .cgds-right-detail-price .cgds-right-detail-price-now::before { content: "¥"; } .category-goods-detail-sku .cgds-right-detail .cgds-right-detail-price .cgds-right-detail-price-history { display: flex; color: #aaaaaa; font-size: 3.2VW; font-weight: bold; /* 删除线*/ text-decoration: line-through; padding: 0 10px; } .category-goods-detail-sku .cgds-right-detail .cgds-right-detail-price .cgds-right-detail-price-history::before { content: "¥"; }