add featured artists in playlist view

2026-06-04 04:23:01 +00:00 · 2021-12-08 16:39:26 +03:00
parent 1c5ae836ea
commit e1e0df44c4
6 changed files with 153 additions and 6 deletions
@@ -0,0 +1,136 @@
+<template>
+  <div class="f-artists">
+    <div class="artists">
+      <div class="artist c1">
+        <div class="blur"></div>
+        <div class="s2"></div>
+        <p>Featured Artists</p>
+      </div>
+      <div class="artist" v-for="artist in artists" :key="artist">
+        <div>
+          <div class="artist-image image"></div>
+          <p class="artist-name">{{ artist }}</p>
+          <div class="a-circle"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    const artists = ["Eminem", "Drake", "Kendrick Lamar"];
+
+    return {
+      artists,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.f-artists {
+  height: 10em;
+  width: calc(100% - 1em);
+  background-color: #1f1e1d;
+  padding: $small;
+  border-radius: $small;
+}
+
+.f-artists .heading {
+  color: #fff;
+  margin: 0 0 1em 1em;
+}
+
+.f-artists .artists {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.f-artists .artist {
+  overflow: hidden;
+  position: relative;
+  margin-left: $smaller;
+  margin-right: $smaller;
+  width: 9em;
+  height: 9em;
+  border-radius: $small;
+  background-color: #565066;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.5s ease-in-out;
+}
+
+.f-artists .artist:hover {
+  transform: translateY(-1.5em);
+  transition: all 0.5s ease-in-out;
+}
+
+.f-artists .artist-image {
+  width: 7em;
+  height: 7em;
+  border-radius: 50%;
+  margin-bottom: $small;
+  background: url(../../assets/images/girl1.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.f-artists .c1 {
+  position: relative;
+  background: rgb(145, 42, 56);
+  width: 15em;
+  background-image: url(../../assets/images/gradient1.gif);
+  overflow: hidden;
+  margin-left: -0.1rem;
+}
+
+.f-artists .c1:hover > .s2 {
+  background: rgba(53, 53, 146, 0.8);
+  transition: all 0.5s ease;
+  width: 12em;
+  height: 12em;
+}
+
+.f-artists .c1 p {
+  position: absolute;
+  bottom: -2rem;
+  margin-left: 0.5rem;
+  z-index: 1;
+  font-size: 2rem;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.f-artists .artist-name {
+  margin: 0;
+  text-align: center;
+  font-size: small;
+}
+
+.f-artists .blur {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  backdrop-filter: blur(100px);
+  -webkit-backdrop-filter: blur(100px);
+  -moz-backdrop-filter: blur(100px);
+  border-radius: $small;
+}
+
+.f-artists .s2 {
+  position: absolute;
+  left: -2em;
+  bottom: -4em;
+  width: 10em;
+  height: 10em;
+  background: rgba(53, 53, 146, 0.445);
+  border-radius: 50%;
+  transition: all 0.5s ease;
+}
+
+</style>