Luis Suarez / autoservicio-axion

1

1

2

2

3

<app-header-publicidad></app-header-publicidad>

3

<app-header-publicidad></app-header-publicidad>

4

5

5

6

6

7

7

8

8

9

9

10

<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>

10

<p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>

11

</div>

11

</div>

12

</div>

12

</div>

13

</div>

13

</div>

14

14

15

<<<<<<< HEAD

16

17

18

=======

19

15

20

16

21

>>>>>>> 6877b1afabb0331da524a83d12700a7030e991eb

22

17

23

18

24

19

25

<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>

20

<p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>

26

21

27

22

28

<img

23

<img

29

draggable="false"

24

draggable="false"

30

ondragstart="return false;"

25

ondragstart="return false;"

31

(contextmenu)="false"

26

(contextmenu)="false"

32

class="h-100 d-block mx-auto rotate-90-neg"

27

class="h-100 d-block mx-auto rotate-90-neg"

33

src="assets/img/ir-color.svg"

28

src="assets/img/ir-color.svg"

34

(mousedown)="scrollY(templateCategorias, -100)"

29

(mousedown)="scrollY(templateCategorias, -100)"

35

(mouseup)="mouseup()"

30

(mouseup)="mouseup()"

36

(mouseleave)="mouseup()">

31

(mouseleave)="mouseup()">

37

</div>

32

</div>

38

33

39

<div

34

<div

40

#templateCategorias

35

#templateCategorias

41

class="col-12 px-0 box-categorias border border-primary

36

class="col-12 px-0 box-categorias border border-primary

42

border-left-0 rounded-right scroll-y cat-box"

37

border-left-0 rounded-right scroll-y cat-box"

43

(scroll)="scrollEvent($event)">

38

(scroll)="scrollEvent($event)">

44

<div

39

<div

45

class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"

40

class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"

46

[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive,

41

[ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive,

47

'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"

42

'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"

48

(click)="selectCategoria(-1, 0)">

43

(click)="selectCategoria(-1, 0)">

49

<img

44

<img

50

draggable="false"

45

draggable="false"

51

ondragstart="return false;"

46

ondragstart="return false;"

52

(contextmenu)="false"

47

(contextmenu)="false"

53

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"

48

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"

54

src="assets/img/logo-spot.svg">

49

src="assets/img/logo-spot.svg">

55

<small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>

50

<small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>

56

</div>

51

</div>

57

<div

52

<div

58

class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"

53

class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"

59

[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,

54

[ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,

60

'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"

55

'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"

61

(click)="selectCategoria(i, categoria.id)"

56

(click)="selectCategoria(i, categoria.id)"

62

*ngFor="let categoria of categorias; let i = index;">

57

*ngFor="let categoria of categorias; let i = index;">

63

<img

58

<img

64

draggable="false"

59

draggable="false"

65

ondragstart="return false;"

60

ondragstart="return false;"

66

(contextmenu)="false"

61

(contextmenu)="false"

67

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"

62

class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"

68

[ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"

63

[ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"

69

src="{{urlImagenes}}{{categoria.path_imagen}}"

64

src="{{urlImagenes}}{{categoria.path_imagen}}"

70

onerror="this.src='assets/img/image-not-found.jpg'">

65

onerror="this.src='assets/img/image-not-found.jpg'">

71

<small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>

66

<small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>

72

</div>

67

</div>

73

</div>

68

</div>

74

69

75

<img

70

<img

76

draggable="false"

71

draggable="false"

77

ondragstart="return false;"

72

ondragstart="return false;"

78

(contextmenu)="false"

73

(contextmenu)="false"

79

class="h-100 d-block mx-auto rotate-90"

74

class="h-100 d-block mx-auto rotate-90"

80

src="assets/img/ir-color.svg"

75

src="assets/img/ir-color.svg"

81

(mousedown)="scrollY(templateCategorias, 100)"

76

(mousedown)="scrollY(templateCategorias, 100)"

82

(mouseup)="mouseup()"

77

(mouseup)="mouseup()"

83

(mouseleave)="mouseup()">

78

(mouseleave)="mouseup()">

84

</div>

79

</div>

85

</div>

80

</div>

86

</div>

81

</div>

87

82

88

<div

83

<div

89

class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"

84

class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"

90

(scroll)="scrollEvent($event)">

85

(scroll)="scrollEvent($event)">

91

86

92

87

93

<div

88

<div

94

class="col px-2 my-1 my-md-3 h-auto"

89

class="col px-2 my-1 my-md-3 h-auto"

95

*ngFor="let articulo of auxArticulos | slice:0:showQuantity;">

90

*ngFor="let articulo of auxArticulos | slice:0:showQuantity;">

96

<div

91

<div

97

class="swing-in-top-fwd btn-effect card h-auto"

92

class="swing-in-top-fwd btn-effect card h-auto"

98

(click)="selectArticulo(articulo)">

93

(click)="selectArticulo(articulo)">

99

<img

94

<img

100

draggable="false"

95

draggable="false"

101

ondragstart="return false;"

96

ondragstart="return false;"

102

(contextmenu)="false"

97

(contextmenu)="false"

103

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

98

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

104

onerror="this.src='assets/img/image-not-found.jpg'"

99

onerror="this.src='assets/img/image-not-found.jpg'"

105

class="card-img-top h-30 h-md-55 rounded-sm">

100

class="card-img-top h-30 h-md-55 rounded-sm">

106

101

107

<p

102

<p

108

[ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"

103

[ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"

109

class="col-12 px-1 h6 h-auto text-center min-h-60">

104

class="col-12 px-1 h6 h-auto text-center min-h-60">

110

105

111

</p>

106

</p>

112

107

113

<div

108

<div

114

[ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"

109

[ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"

115

class="row mx-0 justify-content-between badge-pill">

110

class="row mx-0 justify-content-between badge-pill">

116

111

117

112

118

</div>

113

</div>

119

114

120

<img

115

<img

121

draggable="false"

116

draggable="false"

122

ondragstart="return false;"

117

ondragstart="return false;"

123

(contextmenu)="false"

118

(contextmenu)="false"

124

class="d-block ml-auto py-1 icon-30"

119

class="d-block ml-auto py-1 icon-30"

125

src="assets/img/ir.svg">

120

src="assets/img/ir.svg">

126

</div>

121

</div>

127

</div>

122

</div>

128

</div>

123

</div>

129

</div>

124

</div>

130

</div>

125

</div>

131

</div>

126

</div>

132

</div>

127

</div>

133

128

134

129

135

<div

130

<div

136

*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"

131

*ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"

137

class="col-12 px-0 mb-2">

132

class="col-12 px-0 mb-2">

138

<button

133

<button

139

(click)="increaseShow()"

134

(click)="increaseShow()"

140

class="btn btn-block btn-outline-primary">

135

class="btn btn-block btn-outline-primary">

141

136

142

</button>

137

</button>

143

</div>

138

</div>

144

</div>

139

</div>

145

</div>

140

</div>

146

</div>

141

</div>

147

</div>

142

</div>

148

</div>

143

</div>

149

144

150

145

151

<div class="h-75 px-0 border border-primary rounded" #boxCarrito

146

<div class="h-75 px-0 border border-primary rounded" #boxCarrito

152

[ngClass]="boxCarrito.classList.contains('media-pantalla')

147

[ngClass]="boxCarrito.classList.contains('media-pantalla')

153

? 'col-8' : 'col-12'" id="boxCarrito">

148

? 'col-8' : 'col-12'" id="boxCarrito">

154

149

155

150

156

<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>

151

<p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>

157

</div>

152

</div>

158

153

159

154

160

155

161

156

162

<img

157

<img

163

draggable="false"

158

draggable="false"

164

ondragstart="return false;"

159

ondragstart="return false;"

165

(contextmenu)="false"

160

(contextmenu)="false"

166

class="icon-30 rotate-180-neg"

161

class="icon-30 rotate-180-neg"

167

src="assets/img/ir-fondo-color.svg"

162

src="assets/img/ir-fondo-color.svg"

168

(mousedown)="scrollX(templateCarrito, -100)"

163

(mousedown)="scrollX(templateCarrito, -100)"

169

(mouseup)="mouseup()"

164

(mouseup)="mouseup()"

170

(mouseleave)="mouseup()">

165

(mouseleave)="mouseup()">

171

</div>

166

</div>

172

167

173

168

174

<div

169

<div

175

#templateCarrito

170

#templateCarrito

176

class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"

171

class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"

177

(scroll)="scrollEvent($event)">

172

(scroll)="scrollEvent($event)">

178

173

179

174

180

<p class="text-center py-5">No hay articulos en el carrito</p>

175

<p class="text-center py-5">No hay articulos en el carrito</p>

181

</div>

176

</div>

182

177

183

<div

178

<div

184

class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"

179

class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"

185

*ngFor="let articulo of articuloService.carrito; let i = index;">

180

*ngFor="let articulo of articuloService.carrito; let i = index;">

186

181

187

<img

182

<img

188

class="btn-effect icon-20 position-absolute right-0"

183

class="btn-effect icon-20 position-absolute right-0"

189

src="assets/img/icono-cancelar-color.svg"

184

src="assets/img/icono-cancelar-color.svg"

190

(click)="deleteArticulo(i)">

185

(click)="deleteArticulo(i)">

191

<img

186

<img

192

draggable="false"

187

draggable="false"

193

ondragstart="return false;"

188

ondragstart="return false;"

194

(contextmenu)="false"

189

(contextmenu)="false"

195

class="d-block img-fluid p-2 mx-auto rounded"

190

class="d-block img-fluid p-2 mx-auto rounded"

196

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

191

src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"

197

onerror="this.src='assets/img/image-not-found.jpg'">

192

onerror="this.src='assets/img/image-not-found.jpg'">

198

193

199

<small>{{articulo.DetArt}}</small>

194

<small>{{articulo.DetArt}}</small>

200

</p>

195

</p>

201

</div>

196

</div>

202

</div>

197

</div>

203

</div>

198

</div>

204

</div>

199

</div>

205

200

206

201

207

<img

202

<img

208

draggable="false"

203

draggable="false"

209

ondragstart="return false;"

204

ondragstart="return false;"

210

(contextmenu)="false"

205

(contextmenu)="false"

211

class="icon-30"

206

class="icon-30"

212

src="assets/img/ir-fondo-color.svg"

207

src="assets/img/ir-fondo-color.svg"

213

(mousedown)="scrollX(templateCarrito, 100)"

208

(mousedown)="scrollX(templateCarrito, 100)"

214

(mouseup)="mouseup()"

209

(mouseup)="mouseup()"

215

(mouseleave)="mouseup()">

210

(mouseleave)="mouseup()">

216

</div>

211

</div>

217

</div>

212

</div>

218

</div>

213

</div>

219

214

220

<div

215

<div

221

class="col-auto mt-2 ml-auto h-20">

216

class="col-auto mt-2 ml-auto h-20">

222

217

223

<div class="col-auto align-self-center text-primary">TOTAL</div>

218

<div class="col-auto align-self-center text-primary">TOTAL</div>

224

219

225

<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>

220

<p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>

226

</div>

221

</div>

227

</div>

222

</div>

228

</div>

223

</div>

229

224

230

225

231

<div

226

<div

232

class="col-auto px-0 mt-2 h-20"

227

class="col-auto px-0 mt-2 h-20"

233

*ngIf="articuloService.carrito.length"

228

*ngIf="articuloService.carrito.length"

234

[ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">

229

[ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">

235

<div

230

<div

236

class="btn-effect col-auto px-0 align-self-center bg-white"

231

class="btn-effect col-auto px-0 align-self-center bg-white"

237

[routerLink]="['/carrito']">

232

[routerLink]="['/carrito']">

238

233

239

234

240

<img

235

<img

241

draggable="false"

236

draggable="false"

242

ondragstart="return false;"

237

ondragstart="return false;"

243

(contextmenu)="false"

238

(contextmenu)="false"

244

class="p-2 icon-40"

239

class="p-2 icon-40"

245

src="assets/img/carrito.svg">

240

src="assets/img/carrito.svg">

246

</div>

241

</div>

247

<div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>

242

<div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>

248

</div>

243

</div>

249

</div>

244

</div>

250

</div>

245

</div>

251

246

252

</div>

247

</div>

253

</div>

248

</div>

254

249

255

</div>

250

</div>

256

251

GITLAB

Luis Suarez / autoservicio-axion

arreglo de commit

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
-<<<<<<< HEAD
-    <div class="row w-100 mr-4 h-50 h-md-70">
-      <div class="col-12 h-100 px-0 py-2">
-=======
     <div class="row w-100 mr-4 h-50 h-md-70" id="content">
       <div class="col-12 h-100 px-0 py-3">
->>>>>>> 6877b1afabb0331da524a83d12700a7030e991eb
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary
                       border-left-0 rounded-right scroll-y cat-box"
                 (scroll)="scrollEvent($event)">
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/logo-spot.svg">
                   <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
                     [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
                     src="{{urlImagenes}}{{categoria.path_imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div
             class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
             (scroll)="scrollEvent($event)">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div
                   class="swing-in-top-fwd btn-effect card h-auto"
                   (click)="selectArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-30 h-md-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p
                     [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
                       class="col-12 px-1 h6 h-auto text-center min-h-60">
                       {{articulo.DetArt.toUpperCase()}}
                     </p>
                     <div class="col-12 px-1 align-self-end h-auto">
                       <div
                         [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
                         class="row mx-0 justify-content-between badge-pill">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="h-75 px-0 border border-primary rounded" #boxCarrito
            [ngClass]="boxCarrito.classList.contains('media-pantalla')
                       ? 'col-8' : 'col-12'" id="boxCarrito">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
             <div
               #templateCarrito
               class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
               (scroll)="scrollEvent($event)">
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;">
                 <div class="swing-in-top-fwd">
                   <img
                     class="btn-effect icon-20 position-absolute right-0"
                     src="assets/img/icono-cancelar-color.svg"
                     (click)="deleteArticulo(i)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="d-block img-fluid p-2 mx-auto rounded"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <p class="d-block mt-auto text-center text-primary text-truncate">
                     <small>{{articulo.DetArt}}</small>
                   </p>
                 </div>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- TOTAL-->
       <div
         class="col-auto mt-2 ml-auto h-20">
         <div class="row mx-0">
           <div class="col-auto align-self-center text-primary">TOTAL</div>
           <div class="col-auto bg-primary badge-pill">
             <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
           </div>
         </div>
       </div>
       <!-- VER CARRITO -->
       <div
         class="col-auto px-0 mt-2 h-20"
         *ngIf="articuloService.carrito.length"
         [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
         <div
           class="btn-effect col-auto px-0 align-self-center bg-white"
           [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto p-0 bg-primary">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
             <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>