Las categorías cambian de color dinámicamente al mismo tiempo que el background

_nuxt/utils.js

@@ -129,7 +129,7 @@ export async function setContext(app, context) {
       payload: context.payload,
       error: context.error,
       base: '/',
-      env: {"baseUrl":"http://localhost:4000","wpApi":"http://localhost/wordpress/index.php?rest_route=/wp/v2/","foro":{"url":"http://localhost/wordpress/index.php?rest_route="},"entidad":{"nombre":"Bolivia Digital 2025"}}
+      env: {"baseUrl":"http://localhost:4000","wpApi":"http://localhost/wordpress/index.php?rest_route=/wp/v2/","foro":{"url":"http://localhost/wordpress/index.php?rest_route="},"entidad":{"nombre":"Bolivia Digital"}}
     }
     // Only set once
     if (context.req) app.context.req = context.req

nuxt.config.js

@@ -34,7 +34,7 @@ module.exports = {
       url: 'http://localhost/wordpress/index.php?rest_route='
     },  
     entidad: {
-      nombre: 'Bolivia Digital 2025'
+      nombre: 'Bolivia Digital'
     },
     
   },

src/components/bservicio/BServicio.vue

@@ -3,7 +3,7 @@
     <span class="b-servicio-titulo">
       <span class="b-services-short">BOLIVIA S.</span>
       <!--<span class="b-services-long">{{ $t('bServices.title') }}</span>-->
-      <span class="b-service-two-points">:</span>
+      <!--<span class="b-service-two-points">:</span>-->
       <i class="b-icon-arrow-down el-icon-arrow-down"></i>
     </span>
     <ul class="b-servicio-opciones">

src/components/layout/AppHeader.vue

@@ -67,18 +67,30 @@
                     type="text"
                     class="app-menu__btn-open app-btn__link"
                     icon="el-icon-arrow-down"
-                    @click="item.open = !item.open">
+                    @click="pestaña_participa = !pestaña_participa">
                   </el-button>
                   <ul
-                    class="app-menu__sublist fadeInUp">
+                    class="app-menu__sublist fadeInUp foros"
+                    :class="{ 'open-menu': pestaña_participa }">
+
                     <li
+                      v-for="forum in forums"
+                      :key="forum.id_forum"
+                      class="app-menu__subitem">
+                      <nuxt-link :to="$i18n.path('participa/'+forum.id_forum+'/'+forum.slug)">
+                        {{ forum.name }}
+                      </nuxt-link>
+                    </li>
+
+                    <!--<li
                       class="app-menu__subitem">
                       <a href="/participa/1/agenda-digital">Agenda Digital</a>
                     </li>
                     <li
                       class="app-menu__subitem">
                       <a href="/participa/2/inclusion-digital">Inclusión Digital</a>
-                    </li>
+                    </li>-->
+
                   </ul>
                 </li>
               </ul>
@@ -145,6 +157,7 @@
 import AppLang from './AppLang';
 import AppLogo from './AppLogo';
 import BServicio from '~/components/bservicio/BServicio';
+import axios from 'axios';
 
 const Cookie = process.client ? require('js-cookie') : undefined;
 let nuxtContainer = null;
@@ -159,7 +172,9 @@ export default {
     return {
       menu: [],
       stick: false,
-      maxStick: 180
+      maxStick: 180,
+      pestaña_participa: false,
+      forums: []
     };
   },
   asyncData() {
@@ -173,6 +188,7 @@ export default {
   },
   mounted () {
     nuxtContainer = document.getElementById('__nuxt');
+    this.getListadoForos();
   },
   destroyed () {
     if (process.browser) {
@@ -213,6 +229,13 @@ export default {
           });
         }
       });
+    },
+    getListadoForos() {
+     axios.get(this.$foro.url+'/fm/v1/')
+      .then(response => {
+        this.forums = response.data;
+        console.log(response.data);
+     });
     }
   }
 };

src/components/layout/app-header.scss

@@ -169,4 +169,7 @@ $colorLink: #333333;
   display: inline-block;
 }
 
+.foros {
+  left: -120px !important;
+}
 @import './responsive.scss';
\ No newline at end of file

src/pages/participa/_id_forum/_name_forum/_id_topic/_name_topic/_id_post/_name_post/index.vue

@@ -29,7 +29,9 @@
     <div
       class="page-content">
       <p>{{ post_body }}</p>
-      <h3 class="subtitle">
+      <h3 
+        :style="myStyle"  
+        class="subtitle">
         Respuestas
       </h3>
       <div
@@ -51,7 +53,9 @@
           </div>
         </div>
       </div>
-      <h3 class="subtitle">
+      <h3
+        :style="myStyle"   
+        class="subtitle">
         Respuesta a: {{ post_title }}
       </h3>
       <p class="tu_info">Tu Información:</p>
@@ -120,7 +124,13 @@ export default {
       total: 0,
       pregunta: '',
       respuesta: '',
-      msg: ''
+      msg: '',
+      myStyle:{
+        backgroundColor:''
+      },
+      adorno:{
+        borderTopColor:''
+      }
     };
   },
   mounted () {
@@ -128,6 +138,8 @@ export default {
     this.$util.setBackgroundImage();
     this.getTopic();
     this.crearSuma();
+    this.myStyle.backgroundColor = this.$util.colorpro;
+    this.adorno.borderTopColor = this.$util.coloradorno;
   },
   methods: {
     getTopic() {

src/pages/participa/_id_forum/_name_forum/_id_topic/_name_topic/index.vue

@@ -32,7 +32,9 @@
         :key="topic.id_topic"
         class="page-content">
         <p v-html="topic.desc"></p>
-        <h3 class="subtitle">
+        <h3
+          :style="myStyle"  
+          class="subtitle">
           Debates
         </h3>
         <div
@@ -60,7 +62,9 @@
           </el-pagination>
         </el-row>
         
-        <h3 class="subtitle">
+        <h3 
+          :style="myStyle"  
+          class="subtitle">
           Inicia un nuevo Debate:
         </h3>
         <p class="tu_info">Tu Información:</p>
@@ -130,7 +134,13 @@ export default {
       total: 0,
       pregunta: '',
       respuesta: '',
-      msg: ''
+      msg: '',
+      myStyle:{
+        backgroundColor:''
+      },
+      adorno:{
+        borderTopColor:''
+      }
     };
   },
   mounted () {
@@ -138,6 +148,8 @@ export default {
     this.$util.setBackgroundImage();
     this.pagina(1);
     this.crearSuma();
+    this.myStyle.backgroundColor = this.$util.colorpro;
+    this.adorno.borderTopColor = this.$util.coloradorno;
   },
   methods: {
     sendPublicacion() {

src/pages/participa/_id_forum/_name_forum/index.vue

@@ -31,11 +31,17 @@
 
         <nuxt-link
           :to="$i18n.path(`participa/`+$route.params.id_forum+`/`+$route.params.name_forum+`/`+topic.id_topic+`/`+topic.slug)">
-          <h3 class="categoria">{{ topic.name }}</h3>
+          <h3 
+            :style="myStyle" 
+            class="categoria">{{ topic.name }}</h3>
           <div 
             class="adorno">
-            <div class="adorno_izq"></div>
-            <div class="adorno_der"></div>
+            <div
+              :style="adorno"  
+              class="adorno_izq"></div>
+            <div 
+              :style="adorno"  
+              class="adorno_der"></div>
           </div>
           <hr class="separador_post">
         </nuxt-link>
@@ -164,7 +170,13 @@ export default {
       total: 0,
       pregunta: '',
       respuesta: '',
-      msg: ''
+      msg: '',
+      myStyle:{
+        backgroundColor:''
+      },
+      adorno:{
+        borderTopColor:''
+      }
     };
   },
   mounted () {
@@ -172,6 +184,8 @@ export default {
     this.$util.setBackgroundImage();
     this.getTopics();
     this.crearSuma();
+    this.myStyle.backgroundColor = this.$util.colorpro;
+    this.adorno.borderTopColor = this.$util.coloradorno;
   },
   methods: {
     mostrarDialog() {

src/pages/participa/index.vue

@@ -61,7 +61,7 @@ export default {
         //console.log(response.data); // ex.: { user: 'Your User'}
         console.log(response.status); // ex.: 200
      }); 
-    },
+    }
   }
 };
 </script>

src/plugins/util.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 
 export default ({ app, store }) => {
   const Util = {
+    colorpro: '',
+    coloradorno: '',
     getRandomInt (min, max) {
       min = Math.ceil(min);
       max = Math.floor(max);
@@ -17,8 +19,14 @@ export default ({ app, store }) => {
     },
     setBackgroundImage () {
       const colors = ['blue', 'yellow', 'green', 'red'];
+      const colorescat = ['#024f9b', '#f9c100', '#449935', '#d31419'];
+      const coloresadorno = ['#012d59', '#806300', '#0e5901', '#7a0306'];
       document.body.className = '';
-      document.body.classList.add(`portal-bg-${colors[this.getRandomInt(0, colors.length - 1)]}`);
+      //document.body.classList.add(`portal-bg-${colors[this.getRandomInt(0, colors.length - 1)]}`);
+      const aleatorio = this.getRandomInt(0, colors.length - 1);
+      this.colorpro = colorescat[aleatorio];
+      this.coloradorno = coloresadorno[aleatorio];
+      document.body.classList.add(`portal-bg-${colors[aleatorio]}`);
     }
   };