Ai助手完成

components/layout/AiDvSvg/AiDvSvg.vue

@@ -0,0 +1,143 @@
+<script>
+const w = 12, h = 10, r = 200
+export default {
+  name: "AiDvSvg",
+  data() {
+    return {
+      border: "",
+      box: {},
+      height: 0,
+      width: 0
+    }
+  },
+  methods: {
+    init() {
+      let {width, height} = this.$el.getBoundingClientRect()
+      width -= 13 * 2
+      height -= 13 * 2
+      this.width = width
+      this.height = height
+      this.getBorder(width, height)
+      const vv = width - w, hh = height - h
+      this.box = {
+        top: `m${vv - r + 33},${13 + h}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
+        leftBottom: `m46.5,${height + 10}l7,0l-2.5,-3l-7,0l2.5,3zm-1.5,0l-4.5,-5.5l-7,0l4.5,5.5l7,0zm-21,-7l6,7l7,0l-6,-7l-7,0z`,
+        rightBottom: `m${vv - 8},${height + 8}l-2.5,3l7,0l2.5,-3l-7,0zm17.5,-2.5l-7,0l-4.5,5.5l7,0l4.5,-5.5zm-3.5,5.5l7,0l6,-7l-7,0l-6,7z`,
+      }
+    },
+    getBorder(cw, ch) {
+      const vv = cw - w, hh = ch - h
+      this.border = `${w} 0,${cw - w * 2 - r} 0,${cw - w - r} ${h}, ${vv} ${h},${cw} ${h * 2},${cw} ${hh}, ${vv} ${ch},${w} ${ch},0 ${hh},0 ${h}`
+    },
+  },
+  mounted() {
+    this.$nextTick(() => this.init())
+  }
+}
+</script>
+
+<template>
+  <section class="AiDvSvg">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+      <defs>
+        <polygon :points="border" id="path-1"/>
+        <filter id="filter-2" filterUnits="objectBoundingBox" height="105.6%" width="108.5%" y="-3.3%" x="-4.2%">
+          <feGaussianBlur result="shadowBlurOuter1" in="shadowOffsetOuter1" stdDeviation="6"/>
+        </filter>
+        <linearGradient id="linearGradient-3" y2="50.1547687%" x2="23.733%" y1="49.6234888%" x1="23.7333333%">
+          <stop offset="0%" stop-color="#0D5B8C"/>
+          <stop offset="61.81%" stop-opacity="0.18" stop-color="#1275B3"/>
+          <stop offset="100%" stop-opacity="0.01" stop-color="#137ABA"/>
+        </linearGradient>
+        <linearGradient id="linearGradient-4" y2="50%" x2="100%" y1="50%" x1="0%">
+          <stop offset="0%" stop-opacity="0" stop-color="#4ACCED"/>
+          <stop offset="48.88%" stop-color="#4ACCED"/>
+          <stop offset="100%" stop-opacity="0" stop-color="#49CDEE"/>
+        </linearGradient>
+        <linearGradient id="linearGradient-5" y2="50%" x2="100%" y1="50%" x1="0%">
+          <stop offset="0%" stop-opacity="0" stop-color="#A4EEEF"/>
+          <stop offset="48.88%" stop-color="#A4EEEF"/>
+          <stop offset="100%" stop-opacity="0" stop-color="#A4EEEF"/>
+        </linearGradient>
+        <linearGradient id="linearGradient-6" y2="50%" x2="100%" y1="50%" x1="0%">
+          <stop offset="0%" stop-color="#21EDED"/>
+          <stop offset="100%" stop-color="#276269"/>
+        </linearGradient>
+        <linearGradient id="linearGradient-7" y2="50%" x2="0%" y1="50%" x1="100%">
+          <stop offset="0%" stop-color="#21EDED"/>
+          <stop offset="100%" stop-color="#276269"/>
+        </linearGradient>
+        <linearGradient id="linearGradient-8" y2="50%" x2="100%" y1="50%" x1="0%">
+          <stop offset="0%" stop-opacity="0" stop-color="#0061AB"/>
+          <stop offset="51.39%" stop-color="#0061AB"/>
+          <stop offset="100%" stop-opacity="0" stop-color="#0062AB"/>
+        </linearGradient>
+      </defs>
+      <g>
+        <g fill-rule="evenodd" fill="none" id="未央区">
+          <g id="弹窗6备份">
+            <g id="编组-11">
+              <g stroke-dasharray="0,0" id="路径">
+                <use id="svg_1" x="13" y="17" xlink:href="#path-1" filter="url(#filter-2)" fill="black"/>
+                <use id="svg_2" x="13" y="17" xlink:href="#path-1" fill-rule="evenodd" fill="#0A2234" fill-opacity="0.88" stroke="#22D3D4"/>
+              </g>
+              <!--              <path fill="url(#linearGradient-3)" id="路径" d="m497,46.5l-15,-14l-250.5,0l-16.5,-15.5l-188.5,0l-13.5,15.5l0,26.5l484,0l0,-12.5z"/>-->
+              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-4)" id="路径-3" y2="17.5" x2="175" y1="17.5" x1="26.5"/>
+              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-5)" id="路径-3" y2="17.5" x2="149.5" y1="17.5" x1="58"/>
+              <path fill="url(#linearGradient-6)" id="上部拼合图形" :d="box.top"/>
+              <path fill="url(#linearGradient-6)" id="左下拼合图形" :d="box.leftBottom"/>
+              <path fill="url(#linearGradient-7)" id="右下拼合图形" :d="box.rightBottom"/>
+              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="底部亮线" :y2="height+10" :x2="width/2+110" :y1="height+10" :x1="width/2-110+26"/>
+              <line stroke-dasharray="0,0" stroke-width="2" stroke="url(#linearGradient-8)" id="标题下划线" y2="65" x2="248" y1="65" x1="23"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+    <div class="close" @click="$emit('close')"/>
+    <div class="content">
+      <div class="header">慧智会言</div>
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.AiDvSvg {
+  position: relative;
+  width: max(400px, 100%);
+  height: auto;
+
+  & > svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    padding: 14px 33px;
+
+    .header {
+      padding: 16px 0;
+      font-weight: bold;
+    }
+  }
+
+  .close {
+    background-image: url("./assets/close.png");
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    right: 20px;
+    top: 35px;
+    z-index: 6;
+  }
+}
+</style>