8.DIY页面中的CSS样式富文本如何修改？

### 1.进入设计装修编辑页面

![](https://web.28.cq.cn/img/2026/10/27/facdf54c70db4a05a41a411749b6ed6b7896.png)

### 2.富文本组件的修改
#### 1.点击富文本组件
![](https://web.28.cq.cn/img/2026/10/27/981402ffa69d4bd8a5bdc7a6be7973d44798.png)
### 2.点击左侧组件内容区域，编辑器右上角的“html"

![](https://web.28.cq.cn/img/2026/10/27/2545c4871a4a4a7cb5e8b27ce6d844729428.png)

==把里面的代码复制出来，复制到本地新建一个txt文本==
代码范例

```
<div style="width: 100%; max-width: 700px; margin: 12px auto; font-family: system-ui, sans-serif; box-sizing: border-box; background: rgb(255, 255, 255); padding: 10px; border-radius: 12px;">
    <div style="display:flex;justify-content:space-around;align-items:center;margin-bottom:12px;">
        <div style="text-align:center;">
            <div style="font-size:34px;font-weight:bold;color:#222;">
                104
            </div>
            <div style="font-size:15px;color:#444;margin-top:2px;">
                完成单数
            </div>
        </div>
        <div style="width:1px;height:44px;background:#ddd;"></div>
        <div style="text-align:center;">
            <div style="font-size:34px;font-weight:bold;color:#222;">
                3000
            </div>
            <div style="font-size:15px;color:#444;margin-top:2px;">
                目标单数
            </div>
        </div>
    </div>
    <div style="width:100%;height:18px;background:#edf2f7;border-radius:12px;overflow:hidden;margin-bottom:12px;">
        <div style="height:100%;width:21.08%;background:#0DA29D;border-radius:12px;"></div>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:15px;color:#0DA29D;font-weight:500;">
            一单旧衣=一顿动物口粮
        </div>
        <div style="font-size:15px;color:#0DA29D;font-weight:500;">
            已完成21.08%
        </div>
    </div>
</div>
<p>
    <br/>
</p>
```
然后来来根据自己的设定的需求来习惯具体数值
比如这里可以修改目标单数和完成单数
![](https://web.28.cq.cn/img/2026/10/27/261099e1a3e4410d8af4d7d8be90511e1563.png)
然后自己计算进度条的进度，自己修改进度条比例

![](https://web.28.cq.cn/img/2026/10/27/e71d65f0a7334f1ba73f062df05be83a9802.png)

修改完以后再本地保存以下，然后在清空原来富文本的内容。再复制到富文本编辑器中。然后点击右上角的保存页面即可

![](https://web.28.cq.cn/img/2026/10/27/85476fb22dc74355bbc2e1c8a082f0a61013.png)