From d3322ffc8cfbef45122784037eea48900f02f469 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期一, 10 七月 2023 14:19:42 +0800
Subject: [PATCH] perf: 升级依赖

---
 src/components/item-wrap/item-wrap.vue |   80 ++++++++++++++++++++++++++++++++++++---
 1 files changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
index d8c1dd3..b1e37f7 100644
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -1,15 +1,81 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    // 鏍囬
+    title: number | string;
+  }>(),
+  {
+    title: "",
+  }
+);
 
 </script>
 
 <template>
-  <div class='item-wrap'>
-
+  <div class="item-wrap">
+    <div class="item_title" v-if="title !== ''">
+      <div class="zuo"></div>
+      <span class="title-inner"> &nbsp;&nbsp;{{title}}&nbsp;&nbsp; </span>
+      <div class="you"></div>
+    </div>
+    <div
+      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
+    >
+      <slot></slot>
+    </div>
   </div>
 </template>
 
-<style scoped lang='scss'>
-.item-wrap{
-    border: red dashed 1px;
+<style scoped lang="scss">
+.item-wrap {
+  // border: red dashed 1px;
+  box-sizing: border-box;
 }
-</style>
\ No newline at end of file
+$item-title-height: 38px;
+$item_title_content-height: calc(100% - 38px);
+
+.item_title {
+  height: $item-title-height;
+  line-height: $item-title-height;
+  width: 100%;
+  color: #31abe3;
+  text-align: center;
+  // background: linear-gradient(to right, transparent, #0f0756, transparent);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .zuo,
+  .you {
+    width: 58px;
+    height: 14px;
+    background-image: url("@/assets/img/titles/zuo.png");
+  }
+
+  .you {
+    transform: rotate(180deg);
+  }
+  .title-inner {
+    font-weight: 900;
+    letter-spacing: 2px;
+    background: linear-gradient(
+      92deg,
+      #0072ff 0%,
+      #00eaff 48.8525390625%,
+      #01aaff 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.item_title_content {
+  height: $item_title_content-height;
+}
+
+.item_title_content_def {
+  width: 100%;
+  height: 100%;
+}
+</style>

--
Gitblit v1.8.0