mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
83 lines
2.7 KiB
Vue
83 lines
2.7 KiB
Vue
<script setup>
|
||
import { onMounted } from "vue";
|
||
|
||
//Vue Material Kit 2 components
|
||
import MaterialAvatar from "@/components/MaterialAvatar.vue";
|
||
import MaterialButton from "@/components/MaterialButton.vue";
|
||
|
||
// image
|
||
import profilePic from "@/assets/img/bruce-mars.jpg";
|
||
|
||
// material-input
|
||
import setMaterialInput from "@/assets/js/material-input";
|
||
onMounted(() => {
|
||
setMaterialInput();
|
||
});
|
||
</script>
|
||
<template>
|
||
<section class="py-sm-7 py-5 position-relative">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 mx-auto">
|
||
<div class="mt-n8 mt-md-n9 text-center">
|
||
<div class="blur-shadow-avatar">
|
||
<MaterialAvatar
|
||
size="xxl"
|
||
class="shadow-xl position-relative z-index-2"
|
||
:image="profilePic"
|
||
alt="Avatar"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="row py-7">
|
||
<div
|
||
class="col-lg-7 col-md-7 z-index-2 position-relative px-md-2 px-sm-5 mx-auto"
|
||
>
|
||
<div
|
||
class="d-flex justify-content-between align-items-center mb-2"
|
||
>
|
||
<h3 class="mb-0">Michael Roven</h3>
|
||
<div class="d-block">
|
||
<MaterialButton
|
||
class="text-nowrap mb-0"
|
||
variant="outline"
|
||
color="success"
|
||
size="sm"
|
||
>Follow</MaterialButton
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-4">
|
||
<div class="col-auto">
|
||
<span class="h6 me-1">323</span>
|
||
<span>Posts</span>
|
||
</div>
|
||
<div class="col-auto">
|
||
<span class="h6 me-1">3.5k</span>
|
||
<span>Followers</span>
|
||
</div>
|
||
<div class="col-auto">
|
||
<span class="h6 me-1">260</span>
|
||
<span>Following</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-lg mb-0">
|
||
Decisions: If you can’t decide, the answer is no. If two equally
|
||
difficult paths, choose the one more painful in the short term
|
||
(pain avoidance is creating an illusion of equality). Choose the
|
||
path that leaves you more equanimous.
|
||
<br /><a
|
||
href="javascript:;"
|
||
class="text-success icon-move-right"
|
||
>More about me
|
||
<i class="fas fa-arrow-right text-sm ms-1"></i>
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|