Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema03.c [2025/11/10 11:48] – [Ejercicios] Lorenzo
+++ clase:daw:diw:1eval:tema03.c [2025/11/10 11:52] (actual) – [Ejercicios] Lorenzo
@@ Línea 244: / Línea 244: @@
 [numeroOpiniones]="1472"
 [fechaEntrega]="fechaEntrega"
-[precioEnvio]="5.99"
+[precioEnvio]="0.00"
 [otrosEnvios]="true"
 />
@@ Línea 269: / Línea 269: @@
   @Input() fechaEntrega:Date=new Date();
   @Input() precioEnvio:number=0;
-  @Input() otrosEnvios:string="";
+  @Input() otrosEnvios:boolean=false;
 }
 </sxh>
+<sxh ts;title:c-articulo.html>
+<div class="c-articulo">
+  <img class="c-articulo__image" src="{{urlImagen}}" >
+  <h3 class="c-articulo__title">{{nombre}}</h3>
+  <p class="g--margin-vertical-2">
+    <span class="c-articulo__precio c-articulo__precio--actual">{{precioActual | currency}}</span>
+    &nbsp;
+    <span class="c-articulo__precio c-articulo__precio--anterior">{{precioAnterior | currency}}</span>
+  </p>
+  <p>
+    <span class="c-articulo__valoracion">{{valoracion}}/5</span>&nbsp;
+    <span class="g--font-size-4">⭐</span>&nbsp;
+    <span class="c-articulo__opiniones">{{numeroOpiniones}} opiniones</span>
+  </p>
+  <p class="">
+    🚚&nbsp;
+    <span class="c-articulo__entrega c-articulo__entrega--positivo">{{precioEnvio | currency}}</span>&nbsp;
+    <span class="c-articulo__entrega c-articulo__entrega--negativo">{{fechaEntrega| date:'shortDate'}}</span>
+  </p>
+  <p class="c-articulo__otras-opciones g--margin-top-2">
+    Otras opciones disponibles
+  </p>
+</div>
+</sxh>
+<sxh sass;title:c-articulo.scss>
+.c-articulo {
+  font-family: "Open Sans", Arial, sans-serif;
+  width: 197px;
+  color: #333;
+  &__title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+  &__precio {
+    &--actual {
+      font-size: 17px;
+      font-weight: 700;
+      color: #bf0019;
+    }
+    &--anterior {
+      font-size: 14px;
+      color: #6e6e6e;
+      text-decoration: line-through;
+    }
+    &-envio {
+      color: #ff7a00;
+      font-weight: 600;
+    }
+  }
+  &__valoracion {
+    font-size: 13px;
+    font-weight: 600;
+    color: #333;
+  }
+  &__opiniones {
+    color: #333333;
+    font-size: 13px;
+  }
+  &__entrega {
+    font-size: 13px;
+    font-weight: 700;
+    &--positivo {
+      color: #008000;
+    }
+    &--negativo {
+      color: #333333;
+    }
+  }
+  &__otras-opciones {
+    font-size: 13px;
+    color: #777;
+    font-weight: 600;
+  }
+}
+</sxh>