Flask应用无法将变量传入site.css渲染home.html问题求助

问题原因分析 #

1. 静态CSS无法被Jinja2渲染：Flask默认不会处理static目录下的CSS文件，你在site.css里写的{{ empty_fill_line }}这类模板语法，浏览器会直接当作无效字符串解析，根本不会转换成实际的像素高度。
2. 水位计算逻辑倒置：当前代码里，满水时传感器距离水面为0，计算出的fill_line也为0，导致代表水位的.fill-line高度为0，完全看不到水的效果，这是内联CSS不符合预期的核心原因。
3. 容器高度限制：原HTML中#tanktable设置了height=20px，远小于需要的225px，会直接压缩内部div的显示空间，导致高度设置失效。

解决方案 #

步骤1：修正水位计算逻辑 #

修改app.py中的计算代码，让fill_line代表实际水位高度，empty_fill_line代表空的部分：

@app.route("/")
def home() -> str:
    distance = get_water_level()
    tank_height = 0.126  # 水箱内部高度（米）
    # 计算水位占比：(水箱总高度 - 传感器到水面距离) / 总高度
    water_percentage = (tank_height - distance) / tank_height
    # 转换为像素高度（总像素高度225px）
    fill_line = round(water_percentage * 225)
    empty_fill_line = 225 - fill_line
    temp = get_water_temp()
    return render_template(
        "home.html",
        distance=distance,
        temp=temp,
        fill_line=fill_line,
        empty_fill_line=empty_fill_line
    )

步骤2：选择动态样式渲染方式 #

方式一：HTML模板嵌入动态