Update componen template
This commit is contained in:
meninjar
Executable
+45
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { blogCard } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" sm="4" v-for="card in blogCard" :key="card.title">
|
||||
<v-card elevation="10" rounded="md" class="card-hover">
|
||||
<div>
|
||||
<v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
|
||||
<v-card-item
|
||||
><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
|
||||
></v-card-item>
|
||||
</v-img>
|
||||
<v-avatar size="40" class="mt-n7 mx-6">
|
||||
<img :src="card.avatar" alt="icon" height="40" />
|
||||
</v-avatar>
|
||||
<v-card-item class="pt-4">
|
||||
<v-chip class="text-body-2 font-weight-medium bg-light" size="small" rounded="sm" v-text="card.category"></v-chip>
|
||||
<h5 class="text-h5 text-13 my-6 custom-text-primary">
|
||||
<RouterLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</RouterLink>
|
||||
</h5>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<v-avatar class="" size="18">
|
||||
<EyeIcon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 textSecondary" v-text="card.view"></span>
|
||||
<v-avatar class="ml-4" size="18">
|
||||
<Message2Icon size="18" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-1 ml-2 textSecondary" v-text="card.comments"></span>
|
||||
</div>
|
||||
<div>
|
||||
<v-avatar size="10">
|
||||
<CircleIcon size="10" class="text-textPrimary" />
|
||||
</v-avatar>
|
||||
<span class="text-subtitle-2 ml-2 textSecondary" v-text="card.time"></span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import {followerCard} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row class="pt-3">
|
||||
<v-col cols="12" md="4" v-for="card in followerCard" :key="card.title">
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<div class="d-flex align-center">
|
||||
<v-avatar size="40" >
|
||||
<img :src="card.avatar" :alt="card.avatar" width="40"/>
|
||||
</v-avatar>
|
||||
<div class="pl-4 mt-n1">
|
||||
<h5 class="text-h5" v-text="card.title"></h5>
|
||||
<p class="text-body-1 textSecondary d-flex align-center"><MapPinIcon size="15" class="mr-1"/>{{card.location}}</p>
|
||||
</div>
|
||||
<v-btn class="ml-auto" color="primary" flat>Follow</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Executable
+39
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import img1 from '@/assets/images/products/s1.jpg';
|
||||
import img2 from '@/assets/images/products/s2.jpg';
|
||||
/*import tabler icons*/
|
||||
import { GiftIcon } from 'vue-tabler-icons';
|
||||
const gift = [
|
||||
{
|
||||
title: 'Andrew Grant',
|
||||
avatar: img1
|
||||
},
|
||||
{
|
||||
title: 'Leo Pratt',
|
||||
avatar: img2
|
||||
}
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6" v-for="card in gift" :key="card.title">
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<h5 class="text-h6" v-text="card.title"></h5>
|
||||
<v-btn size="30" icon variant="flat" class="mx-1">
|
||||
<v-avatar size="25" >
|
||||
<GiftIcon class="text-secondary" size="20" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-avatar rounded="lg" class="w-100 mt-2 mb-6" size="160" cla>
|
||||
<img :src="card.avatar" :alt="card.avatar" class="w-100"/>
|
||||
</v-avatar>
|
||||
<v-btn color="primary" block flat>Gift to Friend ($50.00)</v-btn>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Executable
+40
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import {musicCard} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" v-for="card in musicCard" :key="card.title">
|
||||
<v-card elevation="10" class="overflow-visible">
|
||||
<v-row class="mt-md-0 mt-sm-3 mt-3">
|
||||
<v-col cols="6" sm="6">
|
||||
<v-card-item class="pb-3">
|
||||
<h5 class="text-h5" v-text="card.title"></h5>
|
||||
<div class="text-body-1 textSecondary mt-1" v-text="card.subheader"></div>
|
||||
<div class="d-flex align-center justify-center mt-8 ">
|
||||
<v-btn size="20" icon variant="flat" class="grey100">
|
||||
<v-avatar size="20">
|
||||
<PlayerSkipBackIcon size="15" color="grey100" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
<v-btn size="20" icon variant="flat" class="mx-6 text-error">
|
||||
<v-avatar size="20">
|
||||
<PlayerPlayIcon size="15" class="text-error" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
<v-btn size="20" icon variant="flat" class="grey100">
|
||||
<v-avatar size="20">
|
||||
<PlayerSkipForwardIcon size="15" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="py-0 pl-0">
|
||||
<img :src="card.img" class="rounded-e-md w-100 h-100 obj-cover"></img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Executable
+24
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { paymentGateways } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Payment Gateways</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 ">Platform For Income</v-card-subtitle>
|
||||
<div class="mt-sm-10 mt-5">
|
||||
<div class="d-flex gap-3 align-center mt-6" v-for="list in paymentGateways" :key="list.title">
|
||||
<v-avatar :class="'rounded-md bg-light' + list.bgcolor" size="45">
|
||||
<img :src="list.img" :alt="list.img" width="25" />
|
||||
</v-avatar>
|
||||
<div>
|
||||
<h5 class="text-h6 mb-1">{{ list.title }}</h5>
|
||||
<p class="text-subtitle-1 textSecondary">{{ list.subtitle }}</p>
|
||||
</div>
|
||||
<div :class="'ml-auto font-weight-semibold text-subtitle-1 text-medium-' + list.disable">{{ list.rank }}</div>
|
||||
</div>
|
||||
<v-btn class="mt-10" block flat color="primary">View all transactions</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+36
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import { productsCard } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" lg="3" sm="6" v-for="card in productsCard" :key="card.title">
|
||||
<v-card elevation="10" rounded="md" class="card-hover overflow-hidden">
|
||||
<RouterLink :to="card.link" >
|
||||
<v-img :src="card.photo" height="100%" class="rounded-t-md"></v-img>
|
||||
</RouterLink>
|
||||
<div class="d-flex justify-end mr-3 mt-n4">
|
||||
<v-btn size="30" icon variant="flat" class="bg-primary d-flex">
|
||||
<v-avatar size="30" class="text-white">
|
||||
<BasketIcon size="17" />
|
||||
</v-avatar>
|
||||
<v-tooltip
|
||||
activator="parent"
|
||||
location="bottom"
|
||||
>Add To Cart
|
||||
</v-tooltip>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-card-item class="pa-6 pt-1">
|
||||
<h6 class="text-h6" v-text="card.title"></h6>
|
||||
<div class="d-flex align-center justify-space-between mt-1">
|
||||
<div>
|
||||
<span class="text-h6" v-text="'$'+ card.price"></span>
|
||||
<span class="text-body-1 ml-2 text-medium-emphasis text-decoration-line-through" v-text="'$'+ card.salesPrice"></span>
|
||||
</div>
|
||||
<v-rating density="compact" color="warning" size="small" v-model="card.rating" readonly></v-rating>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Executable
+28
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import {profileCards, socialiconCard} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" v-for="card in profileCards" :key="card.title">
|
||||
<v-card elevation="10" class=" text-center" rounded="md">
|
||||
<v-card-item>
|
||||
<v-avatar size="80">
|
||||
<img :src="card.avatar" :alt="card.avatar" width="80"/>
|
||||
</v-avatar>
|
||||
<div class="mt-4">
|
||||
<h5 class="text-h5" v-text="card.title"></h5>
|
||||
<p class="text-body-2 mt-1 textSecondary " v-text="card.subtitle"></p>
|
||||
</div>
|
||||
</v-card-item>
|
||||
<v-divider class="mt-1"></v-divider>
|
||||
<div class="text-center d-flex justify-center pa-3">
|
||||
<v-btn size="30" icon variant="flat" v-for="icon in socialiconCard" :key="icon.name">
|
||||
<v-avatar size="22">
|
||||
<component :is="icon.icon" :class="'text-'+ icon.color" stroke-width="2" size="18" />
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Executable
+46
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
/*import tabler icons*/
|
||||
import { VolumeIcon,MessageIcon } from 'vue-tabler-icons';
|
||||
const slider = ref(50);
|
||||
const model = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<v-card-title class="text-h5">Settings</v-card-title>
|
||||
<div class="d-flex mt-5">
|
||||
<v-avatar class="rounded-md bg-primary" size="48">
|
||||
<VolumeIcon size="22" />
|
||||
</v-avatar>
|
||||
<div class="pl-4 w-100">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<h6 class="text-h6">Sound</h6>
|
||||
<p class="text-subtitle-1 textSecondary">45%</p>
|
||||
</div>
|
||||
<v-slider v-model="slider" hide-details class="ml-0" color="primary"></v-slider>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider class="mt-4"></v-divider>
|
||||
<div class="d-flex mt-4">
|
||||
<v-avatar class="rounded-md bg-secondary" size="48">
|
||||
<MessageIcon size="22" class="text-surface"/>
|
||||
</v-avatar>
|
||||
<div class="pl-4 w-100 d-flex align-center">
|
||||
<div class="">
|
||||
<h6 class="text-h6 mb-1">Chat</h6>
|
||||
<p class="text-subtitle-1 textSecondary">Turn on chat during call</p>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<v-switch v-model="model" hide-details color="primary" inset ></v-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-divider class="mt-4"></v-divider>
|
||||
<div class="d-flex justify-end mt-4 gap-3">
|
||||
<v-btn color="error" variant="tonal">Cancel</v-btn>
|
||||
<v-btn color="primary">save</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import {upcommingCards} from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-card elevation="10" >
|
||||
<v-card-item class="pb-sm-8 pb-6">
|
||||
<v-card-title class="text-h5">Upcoming Activity</v-card-title>
|
||||
<v-card-subtitle class="text-subtitle-1 ">In New year</v-card-subtitle>
|
||||
<div class="">
|
||||
<div class="d-flex align-center mt-6" v-for="list in upcommingCards" :key="list.title">
|
||||
<v-avatar :class="'rounded-md bg-light'+ list.bgcolor" size="45">
|
||||
<component :is="list.icon" :class="'text-'+ list.bgcolor" stroke-width="2" size="20" />
|
||||
</v-avatar>
|
||||
<div class="pl-4 ">
|
||||
<h5 class="text-h6 mb-1" v-text="list.title"></h5>
|
||||
<p class="text-subtitle-1 textSecondary" v-text="list.subtitle"></p>
|
||||
</div>
|
||||
<div class="ml-auto font-weight-medium text-subtitle-1 textSecondary" v-text="list.rank"></div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
Executable
+31
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { userCards } from '@/_mockApis/components/widget/card';
|
||||
</script>
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3" sm="6" v-for="card in userCards" :key="card.title">
|
||||
<v-card elevation="10" rounded="md">
|
||||
<v-card-item>
|
||||
<v-avatar size="80" >
|
||||
<img :src="card.avatar" :alt="card.avatar" width="80"/>
|
||||
</v-avatar>
|
||||
<div class="mt-6">
|
||||
<h5 class="text-h5 mb-2" v-text="card.title"></h5>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div class="ml-2 d-flex ">
|
||||
<v-avatar size="32" class="ml-n2 avtar-border" v-for="user in card.userGroup" :key="user.icon">
|
||||
<img :src="user.icon" alt="avatar" height="32"/>
|
||||
</v-avatar>
|
||||
</div>
|
||||
<p class="text-subtitle-1 textSecondary">{{card.subtitle}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<v-btn color="primary" variant="tonal" block >Add friend</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" class="mt-3" block >Remove</v-btn>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
Reference in New Issue
Block a user