vue 中简单的使用css变量 --color

<div class="list">
        <div class="list-item" draggable="true" style="--color:#e63e31">
            <span class="list-item-title">双鱼座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#70d265">
            <span class="list-item-title">水平座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#f0e941">
            <span class="list-item-title">摩羯座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#da8218">
            <span class="list-item-title">处女座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#7ff0ec">
            <span class="list-item-title">狮子座</span>
        </div>
    </div>

.list-item {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0 16px;
            border-radius: 10px;
            /* margin-bottom: 20px; */
            /* background-color: var(--color); */
            color: var(--color);
        }