init

src/components/detail/NavDetail.vue

@@ -0,0 +1,156 @@
+<template>
+  <div style="display:flex; flex-direction: column;width: 100%;">
+    <div class="content-wrapper" style="display:flex; flex-direction: row; flex-wrap: nowrap">
+      <div class="card" style=" width: 150px;height:150px;margin-top:50px">
+        戳戳跳转
+      </div>
+      <div class="NavInfo" style="margin-top:45px;margin-left:50px;">
+        <span style="font-size:30px;">91视频网站</span><br/>
+        <el-icon><Star /></el-icon>
+        <div class="NavInfo">
+          <span>所属标签：</span><br/>
+          <span>创建时间：</span><br/>
+          <div style="width:40px;height:40px;border-radius:40px;background-color: white;"></div>
+        </div>
+      </div>
+      <div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+export default {
+  name:"NavDetail",
+  data() {
+    return {
+
+    }},
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+
+}
+</script>
+<style scoped>
+.NavInfo{
+  font-weight:550;
+  display: flex;
+  flex-direction:column;
+}
+
+
+@property --rotate {
+  syntax: "<angle>";
+  initial-value: 132deg;
+  inherits: false;
+}
+
+:root {
+  --card-height: 65vh;
+  --card-width: calc(var(--card-height) / 1.5);
+}
+
+
+body {
+  min-height: 100vh;
+  background: #212534;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  box-sizing: border-box;
+}
+
+
+.card {
+  background: #191c29;
+  width: var(--card-width);
+  height: var(--card-height);
+  padding: 3px;
+  position: relative;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  font-size: 1.5em;
+  color: rgb(88 199 250 / 0%);
+  font-weight: 700;
+  cursor: pointer;
+  font-family: fantasy;
+}
+
+.card:hover {
+  color: rgb(88 199 250 / 100%);
+  transition: color 1s;
+}
+.card:hover:before, .card:hover:after {
+  animation: none;
+  opacity: 0;
+}
+
+
+.card::before {
+  content: "";
+  width: 104%;
+  height: 102%;
+  border-radius: 8px;
+  background-image: linear-gradient(
+      var(--rotate)
+      , #5ddcff, #3c67e3 43%, #4e00c2);
+  position: absolute;
+  z-index: -1;
+  top: -1%;
+  left: -2%;
+  animation: spin 2.5s linear infinite;
+}
+
+.card::after {
+  position: absolute;
+  content: "";
+  top: calc(var(--card-height) / 6);
+  left: 0;
+  right: 0;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  transform: scale(0.8);
+  filter: blur(calc(var(--card-height) / 6));
+  background-image: linear-gradient(
+      var(--rotate)
+      , #5ddcff, #3c67e3 43%, #4e00c2);
+  opacity: 1;
+  transition: opacity .5s;
+  animation: spin 2.5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    --rotate: 0deg;
+  }
+  100% {
+    --rotate: 360deg;
+  }
+}
+
+a {
+  color: #212534;
+  text-decoration: none;
+  font-family: sans-serif;
+  font-weight: bold;
+  margin-top: 2rem;
+}
+</style>