JSFiddle - React, Tailwind, and code Playground

by rluuan

HTML

<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>
<script src="https://cdn.rawgit.com/openexchangerates/accounting.js/master/accounting.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div class="MiniCart_Wrapper"> 
    <div class="MiniCart2" v-bind:class="[isVisible ? 'visible' : 'notVisible']">
        <div class="ItensLabel">Meus Itens ({{ totalItens() }})</div>
        <div class="MiniCart">
            <div class="MiniCart_Itens" v-for="item in items">

                <div class="MiniCart_Item" :click="showProductDetail(item)">
                    <div class="Detail_Item"><img width="40" height="40" :src="item.url" /></div>

                    <div class="Detail_Item">
                        <div class="Item_ProductName">{{ item.name }}</div>
                        <div class="Item_Amount">{{ item.price | currency('R$', 2, { decimalSeparator: ',', thousandsSeparator: '.' }) }} </div>
                    </div>qqqqq seu cu

                    <div class="Detail_Item">
                        <div class="Item_ProductName">{{ item.price * item.amount | currency('R$', 2, { decimalSeparator: ',', thousandsSeparator: '.' }) }}</div>
                        <div class="Item_Amount">
                          {{ item.amount }} unid.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="MiniCart_Summary">
            <div class="MiniCart_SummaryItem">
                 Total:<span style="font-size: 16px; font-weight: bold"> {{ totalPrice() | currencyFormat }}</span>
            </div>
            <div class="MiniCart_SummaryItem">
            </div>

            <div class="MiniCart_SummaryItem">
            </div>
        </div>
    </div>

 <div class="DetailMiniCart" v-bind:class="[isVisible ? 'notVisible' : 'visible']">
    <div class="MiniCart_Item" v-on:click="showProductDetail(itemDetail)">
  ...

CSS

body {
		background-color: #dfdfdf; font-family: Arial; color: #666; 
	}

	.MiniCart_Wrapper {

		width: 360px; height: 280px;
		border-radius: 5px; padding: 10px;
		background-color: #fff;     
		font-size: 14px; margin-top: 10px;


	}

	.MiniCart {

		max-height: 180px;
		overflow-y: auto;
		padding-right: 10px;

	}

	.ItensLabel {
		margin-bottom: 10px; 
	}

	.MiniCart_Item {

		height: 60px;
		display: flex; justify-content: center; align-items: center;   
		
	}

	.MiniCart_Item:hover {
		cursor: pointer; background-color: #dfdfdf;
	}

	.MiniCart_Item + .MiniCart_Item {
		border-top: 1px solid #e5e5e5; 
	}

	.Detail_Item {
		display: flex; flex-direction: column; 
	}
	.Detail_Item + .Detail_Item {
		margin-left: 10px; 
	}
	.Detail_Item:nth-child(1) {
		display: flex; flex: 2; justify-content: center; align-items: center; 
	}
	.Detail_Item:nth-child(2) {
		display: flex; flex: 7; justify-content: flex-start;
	}
	.Detail_Item:nth-child(3) {
		display: flex; flex: 3; justify-content: flex-start;
	}
	.Detail_Item .Item_ProductName {
		font-size: 14px;overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		max-width: 180px; 
	}
	.Detail_Item .Item_Amount {
		font-size: 12px; color: #999; 
	}
	.MiniCart_Summary {

		padding-top: 10px;
		margin-top: 10px;
		border-top: 1px solid #e5e5e5;
		text-align: right;

	}

	.MiniCart_SummaryItem + .MiniCart_SummaryItem {

		margin-top: 10px;

	}


	.MiniCart::-webkit-scrollbar-thumb {

		-webkit-box-shadow: inset 0 0 0 3px rgba(0,0,0,0.5);

	}

	.MiniCart::-webkit-scrollbar-track {

		-webkit-box-shadow: inset 0 0 0 3px rgba(0,0,0,0.3);

	}

	.MiniCart::-webkit-scrollbar {

		width: 6px;

	}

	.visible {
		display: block; 
	}
	.notVisible {
		display: none; 
	}


	.nemfudendi {
		position: absolute; width: 344px;
		height: 180px;
		background-color: #fff;

	}
  
  .container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
 ...

Vue

const products = [
	{
		id: '1', 
		amount:'2', 
		price: '3889.99', 
		name:'Ultrabook Dell i7 5GB RAM', 
		url: 'https://images-americanas.b2w.io/produtos/01/00/sku/133280/7/133280755G1.jpg' 
	},
	{
		id: '2', 
		amount:'1', 
		price: '5559.99', 
		name:'Smart Tv 65" Lg Oled Ultra Hd (2160p)', 
		url: 'https://images-americanas.b2w.io/produtos/01/02/sku/133332/8/133332893G1.jpg' 
	},
	{
		id: '3', 
		amount:'1', 
		price: '349.99', 
		name:'Teclado Bluetooth sem Fio', 
		url: 'https://images-americanas.b2w.io/produtos/01/00/sku/14993/6/14993697G1.jpg' 
	},
	{
		id: '4', 
		amount:'1', 
		price: '3500.00', 
		name:'Lava & Seca Top Gun Branca 14Kg 220v', 
		url: 'https://images-americanas.b2w.io/produtos/01/00/sku/125403/4/125403444G1.jpg' 
	}
	];

	const product = null;


	Vue.filter('currencyFormat', function (value) {
		return accounting.formatMoney(value, "R$", 2, ".", ","); 
	});

	var cartItens = new Vue({

		el: '.MiniCart_Wrapper',
		data: {
			items: products, isVisible: true, itemDetail: {id: 123423, amount: 937439327, url: "rodrigo", price: 34874398}
		},
		methods: {

			totalPrice: function() {
				var total = 0; 
				this.items.forEach(function(p){
					total += (p.price * p.amount); 
				}); 
				return total; 
			},
			totalItens: function() {
				var totalItens = 0; 
				this.items.forEach(function(p){
					totalItens += (1 * p.amount); 
				}); 
				return totalItens; 
			},
			showProductList: function() {
				this.isVisible = true; 
			},
			showProductDetail: function(item) {
				this.isVisible = false;
        this.itemDetail = {
		id: item.id,
		amount: item.amount, 
		price: item.price, 
		name: item.name,
		url: item.url
	}
			},
			productRemove: function (item) {

			}
		}
})