前言

主包在逛某家平台的时候发现他家的商品介绍挺别致的，感觉还不错，所以就弄了下来，下面是演示截图和操作教程，有需要的可以自行研究获取

界面预览

20251127172952919-image

修改教程

首先我们进入到后台，进入到商品管理界面，找到你需要编辑的商品，点击进入
随后我们找到商品描述，找到编辑器的工具，点击它，然后找到HTML源码

随后我们将以下样式代码放到<head></head>标签里

<style>
.shopping-item .goods-description * {
    all: revert;
}
    .shopping-item .goods-description .cpu-plate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 7px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    color: #444a60;
    font-family: "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 8px;
    right: 12px;
}

.shopping-item .goods-description .cpu-hz {
    padding: 1px 6px;
    background: linear-gradient(135deg, rgba(255, 201, 228, 0.92), /* 淡粉 */ rgba(186, 214, 255, 0.95), /* 浅蓝 */ rgba(211, 197, 255, 0.95) /* 淡紫 */);
    color: #39405a;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.2px;
}
</style>

最后我们将以下代码放到<body>标签下即可

<div class="cpu-plate"><span class="cpu-model">这里可以填写CPU名称</span> <span class="cpu-hz">这里填写CPU频率</span></div>

20251127174228555-image

教程到这里就结束了，赶紧动手试试吧

版权声明与转载规范

保护知识产权，规范内容传播，维护合法权益

本网站（以下简称"本站"）部分内容来自互联网，若涉及版权问题，请版权方及时与我们联系，我们将在第一时间处理。

本站所有原创内容，包括但不限于文字、图片、音频、视频、图表、设计作品、程序代码等，未经本站书面许可，任何单位或个人不得擅自使用（包括但不限于通过任何机器人、蜘蛛等程序或设备监视、复制、传播、展示、镜像、上载、下载本站内容）。

如需将本站内容用于商业用途（包括但不限于出版物、网站盈利内容、企业宣传等），请提前与我们取得联系，获得授权后方可使用。

对于未经授权的任何使用，本站将依法追究其法律责任。

THE END

技术教程

智简魔方业务V10系统 – 商品描述栏目美化

前言

界面预览

修改教程

版权声明与转载规范

请登录后发表评论