具有不同颜色背景的帐户数组

Array of accounts with diffrent color backgrounds

我有一个 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 类。然后,我可以制作一个 CSS 样式表,其中包含所有 4 种颜色的着色。我希望所有 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 的帮助,我只需要对您的代码稍作修改即可使其与我的主题一起使用!

这是一个想法。 您应该计算您的颜色并根据您的密钥获得提醒,并且通过提醒您可以从 $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) ?>">
...