一块股票目标面板``` 一块股票目标面板一块股票目标面板一块股票目标面板一块股票目标面板一块股票目标面板 ```

一块股票目标面板
一块股票目标面板
一块股票目标面板
一块股票目标面板
一块股票目标面板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stock</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    td:has(.cell>.target) {
        background-color: red;
    }


    td:has(.cell>.target10) {
        background-color: #FFCCCC;
    }

    td:has(.cell>.target20) {
        background-color: #FFB2B2;
    }

    td:has(.cell>.target30) {
        background-color: #FF9999;
    }

    td:has(.cell>.target40) {
        background-color: #FF7F7F;
    }

    td:has(.cell>.target50) {
        background-color: #FF6666;
    }

    td:has(.cell>.target60) {
        background-color: #FF4C4C;
    }

    td:has(.cell>.target70) {
        background-color: #FF3333;
    }

    td:has(.cell>.target80) {
        background-color: #FF1919;
    }

    td:has(.cell>.target90) {
        background-color: #FF0000;
    }

    td:has(.cell>.target100) {
        background-color: #E60000;
    }

    td:has(.cell>.target110) {
        background-color: #CC0000;
    }

    td:has(.cell>.target120) {
        background-color: #B20000;
        color: blue;
    }



    body {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        background-color: #f9f9f9;
    }

    .warp {
        display: flex;
        flex-wrap: wrap;
    }

    .el-card {
        margin: 4px;
        cursor: pointer;
    }

    .el-card__body {
        padding: 5px;
    }

    .cell {
        font-size: 12px;
    }
</style>

<body>
    <div id="app">
        <el-row>
            <el-col :span="9">
                <el-table :data="list" style="width: 100%">
                    <el-table-column v-for="(item, index) in Object.keys(list[0])" :key="index" :label="`${index}00`"
                        width="50">
                        <template slot-scope="scope">
                            <!-- <div :class="{ target: scope.row[item] > 9 &&  scope.row[item] <= 120}">{{ scope.row[item] }}</div> -->
                            <div :class=`target${scope.row[item]}`> {{ scope.row[item] }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="15">
                <el-input type="textarea" :rows="4" placeholder="" v-model.trim="calc" @input="handleInput"> </el-input>
                <div class="warp">
                    <el-card class="box-card" v-for="(card, index) in all" :key="index" style="width: 200px;">
                        {{ card.line }}
                        <div v-for="(line, j) in card.arr" :key="j + '-' + index">
                            {{ line }}
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>

    <script src="https://unpkg.com/vue@2.7.8"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var mul = (a, b) => parseFloat((a * b).toFixed(2))
        new Vue({
            data() {
                return {
                    calc: '11-10',
                    cur: {},
                    list: [],
                    all: [],
                }
            },
            created() {
                this.calc = localStorage.value || ''
                const arr1 = Array.from({ length: 10 }, (_, index) => (index + 1) / 10);
                this.list = arr1.map(e => [e].concat(Array.from({ length: 10 }, (_, index) => (index + 1) * 100).map(value => mul(value, e))))
                this.list = this.list.map(e => {
                    return e.reduce((acc, cur, index) => {
                        acc['c' + (index + 1)] = cur;
                        return acc;
                    }, {});
                });
                console.log(this.list)
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    console.log(column)
                    //return 'color:red'
                    return { color: 'red' }
                },
                handleInput(value) {
                    localStorage.value = value
                    var ls = value.split("\n")
                    const arr2 = Array.from({ length: 9 }, (_, index) => (index + 1) * 100);
                    ls = ls.map(e => {
                        var diff = eval(e)
                        return { line: e, arr: [['差值 数量 金额']].concat(arr2.map(e => { return [parseFloat((diff).toFixed(2)), e, parseFloat((diff * e).toFixed(2))] })) }
                    })
                    this.all = ls
                },
            },
        }).$mount('#app')
    </script>
</body>

</html>