example code
https://github.com/pranaysonisoft/vue_with_vuetify/tree/master
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuetify": "^2.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.1.0",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
---------------------------------------------------------
components/HelloWorld.vue
---------------------------------------------------------
<template>
<v-container>
<v-col xs="12" cols="12">
<v-carousel :show-arrows="false" height="550px">
<v-carousel-item :key="i" v-for="i in height">
<v-layout row>
<v-flex xs{{colsize}} :key="j" v-for="j in 5">
<v-card class="mx-auto my-12 rounded-card" max-width="280">
<v-card-text class="pa-0">
<div class="priceTable">
<div class="priceTableContainer">
<div class="module">
<div class="upperpart">
<div class="paylable">You Pay</div>
<div> <span class="price"> AED 125 </span> <span class="color-pink">/month</span></div>
<div class="tax">
For 12 months + 5% VAT <span>/month</span>
</div>
<v-divider light class="custom-card-divider"></v-divider>
<div class="payget">You Get</div>
<div class="planname">Power Plan 125</div>
<v-divider light class="custom-card-divider"></v-divider>
<div class="plandetail">
<div class="planrow">
<p class=" cross">13</p> <b class="font28">26 GB</b>National Data
</div>
<div class="planrow"><b>100</b>Flexi minutes</div>
</div>
<v-divider light class="custom-card-divider"></v-divider>
<div class="planterms">
<div class="term">
<v-icon light>
mdi-check
</v-icon>
No activation fee.Save AED 125
</div>
<div class="term">
<v-icon light>
mdi-check
</v-icon>
4 GB free data on WiFi UAE
</div>
</div>
</div>
<div class="footerpart">
<div class="limitedOfferSection">
<div class="x-small limitedTimeOffer">
Limited time offer
</div>
<div class="limitedTimeOfferText">
<b>The Entertainer</b> on us for 12 months
</div>
</div>
</div>
<v-card-actions class="footer ma-0">
<div class="whatyouget">What you get</div>
<div class="selectButton">
<v-btn class="btnSelect">Select</v-btn>
</div>
</v-card-actions>
</div>
</div>
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-carousel-item>
</v-carousel>
</v-col>
</v-container>
</template>
<script>
export default {
name: 'HelloWorld',
computed: {
height() {
let name = this.$vuetify.breakpoint.name
console.log("name :" + name);
if (name == "xs") {
return 5;
} else {
return 2;
}
},
colsize() {
let name = this.$vuetify.breakpoint.name
console.log("name :" + name);
if (name == "xs") {
return 12;
} else {
return 3;
}
},
heights() {
return 5;
}
}
}
</script>
<style>
.v-carousel {
overflow: visible !important;
}
.v-carousel__controls {
bottom: -45px !important;
background: none !important;
}
.v-carousel__controls__item {
color: #cc1eac !important
}
</style>
<style scoped>
.v-chip.ongoing {
background: #ffaa2c;
}
.custom-card-divider {
margin-bottom: 10px;
margin-top: 10px;
}
.rounded-card {
border-radius: 15px !important;
overflow: hidden;
}
.color-pink {
color: #cc1eac;
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
.priceTable {
background: #f7f7f7;
border-radius: 10px;
}
.module {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5px 15px 15px 15px;
border-radius: 10px;
background: #fff;
color: white;
border-width: 6px;
border-style: solid;
height: 500px;
border-image: linear-gradient(to bottom, #cc1eac, #576abc, #28a9cc) 0 0 1 100%;
}
.paylable {
color: #cc1eac;
font-size: 12px;
}
.payget {
color: #28a8cb;
}
.priceTableContainer {
border-radius: 10px;
overflow: hidden;
height: 500px;
}
.price {
color: #cc1eac;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 5px;
}
.tax {
color: #000;
font-size: 0.8rem;
}
.planname {
color: #28a8cb;
font-weight: bold;
font-size: 1.2rem;
}
.plandetail {
color: #000;
display: flex;
flex-direction: column;
}
.plandetail .planrow {
margin-bottom: 5px;
font-size: 0.8rem;
}
.plandetail .planrow b {
font-size: 1.2rem;
margin-right: 15px;
margin-bottom: 5px;
}
.planterms {
color: #000;
min-height: 100px;
}
.planterms .term {
color: #000;
margin-bottom: 8px;
font-size: 0.8rem;
}
.footer {
border-top: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
margin-bottom: 10px;
}
.footer .whatyouget {
color: #000;
text-decoration: underline;
font-size: 0.8rem;
}
.selectButton .btnSelect {
background: #fff !important;
padding: 10px 40px !important;
border: none;
color: #d134b4;
box-shadow: 0px 0px 3px 0px #ccc;
font-size: 13px;
font-weight: bold;
text-transform: capitalize;
}
.limitedOfferSection {
color: #000;
}
.limitedTimeOffer {
width: 100px;
text-align: center;
color: #000;
font-size: 0.6rem;
color: #fff;
font-weight: bold;
border-radius: 50px;
background: #FF0099;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right,
#493240,
#FF0099);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right,
#5831a0,
#cc0ead);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.limitedOfferSection .limitedTimeOfferText {
color: #000;
font-size: 0.8rem;
}
.cross {
position: relative;
display: inline-block;
color: gray;
font-size: 25px;
}
.cross::before,
.cross::after {
content: '';
width: 100%;
position: absolute;
right: 0;
top: 50%;
}
.cross::before {
border-bottom: 2px solid #9e9494;
transform: skewY(23deg);
-webkit-transform: skewY(23deg);
}
.font28 {
font-size: 1.9rem !important
}
.most-popular {
background:#00205b;
color:white;
position:absolute;
top: -20px;
z-index: 1000;
font-weight: bold;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
margin-left: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
---------------------------------------------------------
plugins/vuetify.js
---------------------------------------------------------
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
});
---------------------------------------------------------
main.js
---------------------------------------------------------
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
---------------------------------------------------------
app.vue
---------------------------------------------------------
<template>
<v-app>
<v-main>
<HelloWorld />
<v-card class="mx-auto my-12 rounded-card" max-width="300">
<v-card-text class="pa-0">
<div class="priceTable">
<div class="most-popular">Most popular</div>
<div class="priceTableContainer">
<div class="module">
<div class="upperpart">
<div class="paylable">You Pay</div>
<div> <span class="price"> AED 125 </span> <span class="color-pink">/month</span></div>
<div class="tax">
For 12 months + 5% VAT <span>/month</span>
</div>
<v-divider class="custom-card-divider"></v-divider>
<div class="payget">You Get</div>
<div class="planname">Power Plan 125</div>
<v-divider class="custom-card-divider"></v-divider>
<div class="plandetail">
<div class="planrow">
<p class=" cross">13</p> <b class="font28">26 GB</b>National Data
</div>
<div class="planrow"><b>100</b>Flexi minutes</div>
</div>
<v-divider class="custom-card-divider"></v-divider>
<div class="planterms">
<div class="term">
<v-icon>
mdi-check
</v-icon>
No activation fee.Save AED 125
</div>
<div class="term">
<v-icon>
mdi-check
</v-icon>
4 GB free data on WiFi UAE
</div>
</div>
</div>
<div class="footerpart">
<div class="limitedOfferSection">
<div class="x-small limitedTimeOffer">
Limited time offer
</div>
<div class="limitedTimeOfferText">
<b>The Entertainer</b> on us for 12 months
</div>
</div>
</div>
<v-card-actions class="footer ma-0">
<div class="whatyouget">What you get</div>
<div class="selectButton">
<v-btn class="btnSelect">Select</v-btn>
</div>
</v-card-actions>
</div>
</div>
</div>
</v-card-text>
</v-card>
</v-main>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
computed: {
createBackgroundString() {
return `linear-gradient(to bottom, #cc1eac, #576abc, #28a9cc) 0 0 1 100%`;
}
},
data() {
return {
items: [{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
},
],
}
},
};
</script>
<style scoped>
.v-chip.ongoing {
background: #ffaa2c;
}
.custom-card-divider {
margin-bottom: 10px;
margin-top: 10px;
}
.rounded-card {
border-radius: 15px !important;
}
.color-pink {
color: #cc1eac;
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
.priceTable {
background: #f7f7f7;
border-radius: 10px;
}
.module {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5px 15px 15px 15px;
border-radius: 10px;
background: #fff;
color: white;
border-width: 6px;
border-style: solid;
height: 500px;
border-image: linear-gradient(to bottom, #cc1eac, #576abc, #28a9cc) 0 0 1 100%;
}
.paylable {
color: #cc1eac;
font-size: 12px;
}
.payget {
color: #28a8cb;
}
.priceTableContainer {
border-radius: 10px;
overflow: hidden;
height: 500px;
}
.price {
color: #cc1eac;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 5px;
}
.tax {
color: #000;
font-size: 0.8rem;
}
.planname {
color: #28a8cb;
font-weight: bold;
font-size: 1.2rem;
}
.plandetail {
color: #000;
display: flex;
flex-direction: column;
}
.plandetail .planrow {
margin-bottom: 5px;
font-size: 0.8rem;
}
.plandetail .planrow b {
font-size: 1.2rem;
margin-right: 15px;
margin-bottom: 5px;
}
.planterms {
color: #000;
min-height: 100px;
}
.planterms .term {
color: #000;
margin-bottom: 8px;
font-size: 0.8rem;
}
.footer {
border-top: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
margin-bottom: 10px;
}
.footer .whatyouget {
color: #000;
text-decoration: underline;
font-size: 0.8rem;
}
.selectButton .btnSelect {
background: #fff !important;
padding: 10px 40px !important;
border: none;
color: #d134b4;
box-shadow: 0px 0px 3px 0px #ccc;
font-size: 13px;
font-weight: bold;
text-transform: capitalize;
}
.limitedOfferSection {
color: #000;
}
.limitedTimeOffer {
width: 100px;
text-align: center;
color: #000;
font-size: 0.6rem;
color: #fff;
font-weight: bold;
border-radius: 50px;
background: #FF0099;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right,
#493240,
#FF0099);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right,
#5831a0,
#cc0ead);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.limitedOfferSection .limitedTimeOfferText {
color: #000;
font-size: 0.8rem;
}
.cross {
position: relative;
display: inline-block;
color: gray;
font-size: 25px;
}
.cross::before,
.cross::after {
content: '';
width: 100%;
position: absolute;
right: 0;
top: 50%;
}
.cross::before {
border-bottom: 2px solid black;
transform: skewY(23deg);
-webkit-transform: skewY(23deg);
}
.font28 {
font-size: 1.9rem !important
}
.most-popular {
background:#00205b;
color:white;
position:absolute;
top: -20px;
z-index: 1000;
font-weight: bold;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
margin-left: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
