标题组件

src/components/HeadlineTag/index.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="box_tag">
+        <span class="text_disable" style="color: #fff;">{{ value }}</span>
+        <div class="tag_line"></div>
+        <div class="cube-box48">
+            <div class="cube48">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    /* 标题 */
+    value: {
+        type: String,
+    },
+});
+</script>
+
+<style lang='scss' scoped>
+.box_tag {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: calc(100% - 30px);
+    height: 40px;
+    border: 1px solid;
+    border-image: linear-gradient(to right, #3d4076, #1a1c20) 1;
+    background: linear-gradient(to right, #10285c, #000107);
+    margin-left: 30px;
+
+    span {
+        padding-left: 10px;
+        z-index: 1;
+        font-size: 18px;
+    }
+}
+
+.tag_line {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 10px;
+    background: linear-gradient(to right, #3644a6, #0b1627, rgba(0, 0, 0, 0));
+}
+
+.cube-box48 {
+    position: absolute;
+    left: -26px;
+    transform-style: preserve-3d;
+    animation: cube48-eff 3s linear infinite;
+}
+
+.cube48 {
+    width: 16px;
+    height: 16px;
+    transform-style: preserve-3d;
+    transform: rotateX(35deg) rotateY(0deg) rotateZ(45deg);
+}
+
+.cube48>div {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+}
+
+.cube48 div:nth-of-type(1) {
+    background-color: rgba(40, 68, 177, 0.4);
+    transform: translateZ(-8px) rotateY(180deg);
+}
+
+.cube48 div:nth-of-type(2) {
+    background-color: rgba(40, 94, 177, 0.4);
+    transform: rotateY(-270deg) translateX(50%);
+    transform-origin: top right;
+}
+
+.cube48 div:nth-of-type(3) {
+    background-color: rgba(40, 56, 177, 0.4);
+    transform: rotateY(270deg) translateX(-50%);
+    transform-origin: center left;
+}
+
+.cube48 div:nth-of-type(4) {
+    background-color: rgba(36, 88, 187, 0.4);
+    transform: rotateX(90deg) translateY(-50%);
+    transform-origin: top center;
+}
+
+.cube48 div:nth-of-type(5) {
+    background-color: rgba(36, 116, 187, 0.4);
+    transform: rotateX(-90deg) translateY(50%);
+    transform-origin: bottom center;
+}
+
+.cube48 div:nth-of-type(6) {
+    background-color: rgba(55, 175, 202, 0.4);
+    transform: translateZ(8px);
+}
+
+@keyframes cube48-eff {
+    100% {
+        transform: rotateY(360deg);
+    }
+}
+</style>

src/views/system/receptiondesk/index.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="app-container home">
-    会议系统
+  <div>
+    <div style="width: 400px;">
+      <HeadlineTag value="会议系统"></HeadlineTag>
+    </div>
   </div>
 </template>
 
 <script setup>
+import HeadlineTag from '@/components/HeadlineTag'
+
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>