1

我有一个 CakePHP 网络应用程序，页面顶部有以下代码：

<section class="content">

<style>.center {text-align: center;}</style>
  <!-- Small boxes (Stat box) -->

    <div class="row normaluserdash">
    <?php 
    $colors = array('', 'green','aqua','purple','orange');
    foreach( $user->accounts as $account ) {
    ?>

        <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">

                            <!-- Card -->
                            <div class="card text-white bg-info">

                                <!-- Card Header -->
                                <h4 class="card-header text-white"><?=$account->title?></h4>
                                <!-- /card header -->

                                <!-- Card Body -->
                                <div class="card-body">

                                    <!-- Card Title-->
                                    <h2 class="card-title text-white center"><?=$this->Format->currency($account->balance)?></h2>
                                    <!-- Card Title-->

                                </div>
                                <!-- /card body -->

                                <!-- Card Footer -->

                                <!-- /card footer -->

                            </div>
                            <!-- /card -->

        </div>
    <?php } ?>

    </div>

上面的代码为用户显示了 4 个账户余额的账户余额，因为上面的代码重复了 4 次。现在，上述所有 4 个块的颜色都是蓝色的。我想做一些东西，我为每个颜色呼应不同的颜色并将其输入 CSS 类。然后，我可以制作一个包含所有 4 种颜色的 CSS 样式表。我希望颜色与所有 4 个块不同，但我希望它们在刷新后保持不变。在有人建议之前，用 JS 随机生成是行不通的。

提前感谢您提供的任何帮助。如果您想知道，该网站是https://bank.northwatchbank.com，您可以注册查看。长话短说，这是一个骗子的假银行。

编辑修复：

    <?php 
    function getCalorBykey($key, $colors){
         $colors_count = count($colors);
        // get reminder
        $reminder =  ($key)%$colors_count;
        return $colors[$reminder];
    }

    $colors = array('info','warning','danger','success');
    foreach( $user->accounts as $key => $account ) {
    ?>

        <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">

            <!-- Card -->
            <div class="card text-white bg-info card-<?= getCalorBykey($key, $colors) ?>">


                                <!-- Card Header -->
                                <h4 class="card-header text-white"><?=$account->title?></h4>
                                <!-- /card header -->

                                <!-- Card Body -->
                                <div class="card-body">

                                    <!-- Card Title-->
                                    <h2 class="card-title text-white center"><?=$this->Format->currency($account->balance)?></h2>
                                    <!-- Card Title-->

                                </div>
                                <!-- /card body -->

                                <!-- Card Footer -->

                                <!-- /card footer -->

                            </div>
                            <!-- /card -->

        </div>
    <?php } ?>

    </div>

感谢 Jasco 的帮助，我只需要对您的代码进行少量修改即可使其与我的主题一起使用！

4

1 回答 1

1

这是一个想法。您应该计算颜色并根据您的密钥获得提醒，并且通过提醒您可以从 $colors 中获取颜色。如果账户余额多于您的颜色，该功能将重复该序列。

function getCalorBykey($key, $colors){
    $colors_count = count($colors);
    // get reminder
    $reminder =  ($key)%$colors_count;
    return $colors[$reminder];
}

在您的模板上，您可以像下面这样使用它：

 <div class="row normaluserdash">
    <?php 
    function getCalorBykey($key, $colors){
         $colors_count = count($colors);
        // get reminder
        $reminder =  ($key)%$colors_count;
        return $colors[$reminder];
    }

    $colors = array('default', 'green','aqua','purple','orange');
    foreach( $user->accounts as $key => $account ) {
    ?>

        <div class="normaluserdash col-xl-3 col-md-4 col-sm-6 col-12">

            <!-- Card -->
            <div class="card text-white bg-info card-<?= getCalorBykey($key, $colors) ?>">
...
于 2019-10-12T05:24:15.930 回答