@zhsz/cool-design-dv
Version:
668 lines (667 loc) • 22.5 kB
JavaScript
import { defineComponent, useAttrs, getCurrentInstance, inject, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeStyle, createElementVNode, renderSlot } from "vue";
import "./style.css";
import Box from "../dv-box/index.mjs";
import { baseConfig } from "../../hooks/useConfig.mjs";
import { useHeader } from "../../hooks/useHeader.mjs";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
const _hoisted_1 = ["stroke"];
const _hoisted_2 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "stroke-dasharray",
attributeType: "XML",
from: "0, 100,0,0 ",
to: "0, 0,330,0",
dur: "5s",
begin: "2s",
calcMode: "spline",
keyTimes: "0;1",
keySplines: "0.4,1,0.49,0.98",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_3 = [
_hoisted_2
];
const _hoisted_4 = ["fill"];
const _hoisted_5 = { class: "st2" };
const _hoisted_6 = {
id: "my_dv_header2_SVGID_1_",
gradientUnits: "userSpaceOnUse",
x1: "403.4567",
y1: "70.3132",
x2: "403.4567",
y2: "34.1094",
gradientTransform: "matrix(-1 0 0 1 924.0071 0)"
};
const _hoisted_7 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st3",
points: "463.2,70.3 541.8,70.3 577.9,34.1 499.3,34.1"
}, null, -1);
const _hoisted_8 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "opacity",
values: "0.7;0.4;0.7",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_9 = { class: "st4" };
const _hoisted_10 = {
id: "my_dv_header2_SVGID_2_",
gradientUnits: "userSpaceOnUse",
x1: "419.6646",
y1: "46.9695",
x2: "419.6646",
y2: "29.9844",
gradientTransform: "matrix(-1 0 0 1 924.0071 0)"
};
const _hoisted_11 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st5",
points: "477.4,47 514.3,47 531.3,30 494.4,30"
}, null, -1);
const _hoisted_12 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "opacity",
values: "1;0.7;1",
dur: "1s",
begin: "0s",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_13 = {
id: "my_dv_header2_SVGID_3_",
gradientUnits: "userSpaceOnUse",
x1: "386.4264",
y1: "75.3132",
x2: "386.4264",
y2: "46.8594",
gradientTransform: "matrix(-1 0 0 1 924.0071 0)"
};
const _hoisted_14 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st6",
points: "492.5,75.3 554.3,75.3 582.7,46.9 520.9,46.9"
}, null, -1);
const _hoisted_15 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "opacity",
values: "1;0.7;1",
dur: "3s",
begin: "0s",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_16 = {
id: "my_dv_header2_SVGID_4_",
cx: "960",
cy: "1012.0313",
r: "431.0692",
gradientTransform: "matrix(1 0 0 8.416572e-02 0 -1.4752)",
gradientUnits: "userSpaceOnUse"
};
const _hoisted_17 = /* @__PURE__ */ createElementVNode("ellipse", {
class: "st7",
cx: "960",
cy: "83.7",
rx: "439.9",
ry: "5.3"
}, null, -1);
const _hoisted_18 = {
id: "my_dv_header2_SVGID_5_",
gradientUnits: "userSpaceOnUse",
x1: "960",
y1: "89.0469",
x2: "960",
y2: "39.5469"
};
const _hoisted_19 = /* @__PURE__ */ createElementVNode("stop", {
offset: "0",
style: { "stop-color": "#1de2ff", "stop-opacity": "0.3" }
}, null, -1);
const _hoisted_20 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st8",
points: "1394.8,89 525.2,89 575.4,39.5 1344.6,39.5"
}, null, -1);
const _hoisted_21 = ["stroke"];
const _hoisted_22 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "stroke-dasharray",
attributeType: "XML",
from: "0, 100,0,0 ",
to: "0, 0,330,0",
dur: "5s",
begin: "2s",
calcMode: "spline",
keyTimes: "0;1",
keySplines: "0.4,1,0.49,0.98",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_23 = [
_hoisted_22
];
const _hoisted_24 = ["fill"];
const _hoisted_25 = { class: "st9" };
const _hoisted_26 = {
id: "my_dv_header2_SVGID_6_",
gradientUnits: "userSpaceOnUse",
x1: "375.9098",
y1: "47.5007",
x2: "375.9098",
y2: "11.2969"
};
const _hoisted_27 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st10",
points: "406.3,47.5 381.7,47.5 345.5,11.3 370.1,11.3"
}, [
/* @__PURE__ */ createElementVNode("animate", {
attributeType: "CSS",
attributeName: "opacity",
from: "1",
to: "0",
dur: "3s",
begin: "0.5s",
repeatCount: "indefinite"
})
], -1);
const _hoisted_28 = { class: "st11" };
const _hoisted_29 = {
id: "my_dv_header2_SVGID_7_",
gradientUnits: "userSpaceOnUse",
x1: "408.3473",
y1: "47.5007",
x2: "408.3473",
y2: "11.2969"
};
const _hoisted_30 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st12",
points: "438.7,47.5 414.1,47.5 378,11.3 402.6,11.3"
}, [
/* @__PURE__ */ createElementVNode("animate", {
attributeType: "CSS",
attributeName: "opacity",
from: "1",
to: "0",
dur: "3s",
begin: "1s",
repeatCount: "indefinite"
})
], -1);
const _hoisted_31 = {
id: "my_dv_header2_SVGID_8_",
gradientUnits: "userSpaceOnUse",
x1: "440.7848",
y1: "47.5007",
x2: "440.7848",
y2: "11.2969"
};
const _hoisted_32 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st13",
points: "471.1,47.5 446.6,47.5 410.4,11.3 435,11.3"
}, [
/* @__PURE__ */ createElementVNode("animate", {
attributeType: "CSS",
attributeName: "opacity",
from: "1",
to: "0",
dur: "3s",
begin: "1.5s",
repeatCount: "indefinite"
})
], -1);
const _hoisted_33 = { class: "st9" };
const _hoisted_34 = {
id: "my_dv_header2_SVGID_9_",
gradientUnits: "userSpaceOnUse",
x1: "1436.0841",
y1: "45.5007",
x2: "1436.0841",
y2: "9.2969",
gradientTransform: "matrix(-1 0 0 1 2980.1743 0)"
};
const _hoisted_35 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st14",
points: "1513.7,45.5 1538.3,45.5 1574.5,9.3 1549.9,9.3"
}, [
/* @__PURE__ */ createElementVNode("animate", {
attributeType: "CSS",
attributeName: "opacity",
from: "1",
to: "0",
dur: "3s",
begin: "0.5s",
repeatCount: "indefinite"
})
], -1);
const _hoisted_36 = { class: "st11" };
const _hoisted_37 = {
id: "my_dv_header2_SVGID_10_",
gradientUnits: "userSpaceOnUse",
x1: "1468.5216",
y1: "45.5007",
x2: "1468.5216",
y2: "9.2969",
gradientTransform: "matrix(-1 0 0 1 2980.1743 0)"
};
const _hoisted_38 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st15",
points: "1481.3,45.5 1505.9,45.5 1542,9.3 1517.4,9.3"
}, [
/* @__PURE__ */ createElementVNode("animate", {
attributeType: "CSS",
attributeName: "opacity",
from: "1",
to: "0",
dur: "3s",
begin: "1s",
repeatCount: "indefinite"
})
], -1);
const _hoisted_39 = {
id: "my_dv_header2_SVGID_11_",
gradientUnits: "userSpaceOnUse",
x1: "1500.9591",
y1: "45.5007",
x2: "1500.9591",
y2: "9.2969",
gradientTransform: "matrix(-1 0 0 1 2980.1743 0)"
};
const _hoisted_40 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st16",
points: "1448.9,45.5 1473.4,45.5 1509.6,9.3 1485,9.3"
}, [
/* @__PURE__ */ createElementVNode("animate", {
attributeType: "CSS",
attributeName: "opacity",
from: "1",
to: "0",
dur: "3s",
begin: "1.5s",
repeatCount: "indefinite"
})
], -1);
const _hoisted_41 = { class: "st2" };
const _hoisted_42 = {
id: "my_dv_header2_SVGID_12_",
gradientUnits: "userSpaceOnUse",
x1: "-656.7177",
y1: "68.3132",
x2: "-656.7177",
y2: "32.1094",
gradientTransform: "matrix(1 0 0 1 2056.1672 0)"
};
const _hoisted_43 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st17",
points: "1456.8,68.3 1378.2,68.3 1342.1,32.1 1420.7,32.1"
}, null, -1);
const _hoisted_44 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "opacity",
values: "0.7;0.4;0.7",
dur: "2s",
begin: "0s",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_45 = { class: "st4" };
const _hoisted_46 = {
id: "my_dv_header2_SVGID_13_",
gradientUnits: "userSpaceOnUse",
x1: "-640.5098",
y1: "44.9695",
x2: "-640.5098",
y2: "27.9844",
gradientTransform: "matrix(1 0 0 1 2056.1672 0)"
};
const _hoisted_47 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st18",
points: "1442.6,45 1405.7,45 1388.7,28 1425.6,28"
}, null, -1);
const _hoisted_48 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "opacity",
values: "1;0.7;1",
dur: "1s",
begin: "0s",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_49 = {
id: "my_dv_header2_SVGID_14_",
gradientUnits: "userSpaceOnUse",
x1: "-673.748",
y1: "73.3132",
x2: "-673.748",
y2: "44.8594",
gradientTransform: "matrix(1 0 0 1 2056.1672 0)"
};
const _hoisted_50 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st19",
points: "1427.5,73.3 1365.7,73.3 1337.3,44.9 1399.1,44.9"
}, null, -1);
const _hoisted_51 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "opacity",
values: "1;0.7;1",
dur: "3s",
begin: "0s",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_52 = ["stroke"];
const _hoisted_53 = ["stroke"];
const _hoisted_54 = /* @__PURE__ */ createElementVNode("animate", {
attributeName: "stroke-dasharray",
attributeType: "XML",
from: "0, 157.52079728939617, 0, 157.52079728939617",
to: "0, 0, 315.04159457879234, 0",
dur: "1.2s",
begin: "0s",
calcMode: "spline",
keyTimes: "0;1",
keySplines: "0.4,1,0.49,0.98",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_55 = ["fill"];
const _hoisted_56 = ["fill"];
const _hoisted_57 = { class: "st20" };
const _hoisted_58 = ["fill"];
const _hoisted_59 = ["fill"];
const _hoisted_60 = { class: "st9" };
const _hoisted_61 = ["fill"];
const _hoisted_62 = { class: "st20" };
const _hoisted_63 = ["fill"];
const _hoisted_64 = ["fill"];
const _hoisted_65 = ["fill"];
const __default__ = defineComponent({
name: "DvHeader2",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
emits: ["resize"],
setup(__props, { emit: __emit }) {
var _a, _b, _c;
const $attrs = useAttrs();
const instance = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
const page = inject(dvPageSymbols, null);
const emits = __emit;
const { svgStyle, resize, color } = useHeader(
emits,
((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? baseConfig.color,
page
);
onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
onBeforeUnmount(() => {
removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Box), mergeProps({
class: "my-dv-header2",
"default-width": "100%",
"default-height": "auto",
top: "0px",
left: "0px"
}, unref($attrs)), {
default: withCtx(() => [
(openBlock(), createElementBlock("svg", {
width: "1920px",
height: "90px",
style: normalizeStyle(unref(svgStyle))
}, [
createElementVNode("polyline", {
class: "st0",
stroke: unref(color),
points: "0,3 119.7,3 132.8,16.1 191.8,16.1 196.2,11.6 329.7,11.6 356.8,38.7"
}, _hoisted_3, 8, _hoisted_1),
createElementVNode("rect", {
x: "353.4",
y: "35.3",
transform: "matrix(0.7071 -0.7071 0.7071 0.7071 77.1642 263.5299)",
fill: unref(color),
width: "6.6",
height: "6.6"
}, null, 8, _hoisted_4),
createElementVNode("g", _hoisted_5, [
createElementVNode("linearGradient", _hoisted_6, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_7,
_hoisted_8
]),
createElementVNode("g", _hoisted_9, [
createElementVNode("linearGradient", _hoisted_10, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_11,
_hoisted_12
]),
createElementVNode("linearGradient", _hoisted_13, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_14,
_hoisted_15,
createElementVNode("radialGradient", _hoisted_16, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4)
]),
_hoisted_17,
createElementVNode("linearGradient", _hoisted_18, [
_hoisted_19,
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4)
]),
_hoisted_20,
createElementVNode("polyline", {
class: "st0",
stroke: unref(color),
points: "1920,1 1800.3,1 1787.2,14.1 1728.2,14.1 1723.8,9.6 1590.3,9.6 1563.2,36.7"
}, _hoisted_23, 8, _hoisted_21),
createElementVNode("rect", {
x: "1560",
y: "33.3",
transform: "matrix(0.7071 -0.7071 0.7071 0.7071 431.9886 1116.151)",
fill: unref(color),
width: "6.6",
height: "6.6"
}, null, 8, _hoisted_24),
createElementVNode("g", null, [
createElementVNode("g", _hoisted_25, [
createElementVNode("linearGradient", _hoisted_26, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_27
]),
createElementVNode("g", _hoisted_28, [
createElementVNode("linearGradient", _hoisted_29, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_30
]),
createElementVNode("linearGradient", _hoisted_31, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_32,
createElementVNode("g", _hoisted_33, [
createElementVNode("linearGradient", _hoisted_34, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_35
]),
createElementVNode("g", _hoisted_36, [
createElementVNode("linearGradient", _hoisted_37, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_38
]),
createElementVNode("linearGradient", _hoisted_39, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_40
]),
createElementVNode("g", _hoisted_41, [
createElementVNode("linearGradient", _hoisted_42, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_43,
_hoisted_44
]),
createElementVNode("g", _hoisted_45, [
createElementVNode("linearGradient", _hoisted_46, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_47,
_hoisted_48
]),
createElementVNode("linearGradient", _hoisted_49, [
createElementVNode("stop", {
offset: "0",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4),
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0.9`)
}, null, 4)
]),
_hoisted_50,
_hoisted_51,
createElementVNode("g", null, [
createElementVNode("polyline", {
class: "st0",
stroke: unref(color),
points: "525.2,89 532.5,81.5 804.8,81.5"
}, null, 8, _hoisted_52),
createElementVNode("polyline", {
class: "st0",
stroke: unref(color),
points: "1394.6,88.8 1389.3,83.5 1117.1,83.5"
}, null, 8, _hoisted_53),
_hoisted_54,
createElementVNode("polygon", {
fill: unref(color),
points: "788.3,75.9 754.3,75.9 746.8,83.3 780.8,83.3"
}, null, 8, _hoisted_55),
createElementVNode("polygon", {
fill: unref(color),
points: "815.6,73.6 789.1,73.6 779.4,83.3 806,83.3"
}, null, 8, _hoisted_56),
createElementVNode("g", _hoisted_57, [
createElementVNode("polygon", {
fill: unref(color),
points: "860.5,77.4 828.6,77.4 816.9,89 848.8,89"
}, null, 8, _hoisted_58)
]),
createElementVNode("polygon", {
fill: unref(color),
points: "1054,71.7 866.5,71.7 854.8,83.3 1066.3,83.3"
}, null, 8, _hoisted_59),
createElementVNode("g", _hoisted_60, [
createElementVNode("polygon", {
fill: unref(color),
points: "803.1,89 1120.4,89 1126.3,83 796.7,83"
}, null, 8, _hoisted_61)
]),
createElementVNode("g", _hoisted_62, [
createElementVNode("polygon", {
fill: unref(color),
points: "1059.8,77.4 1091.7,77.4 1103.3,89 1071.5,89"
}, null, 8, _hoisted_63)
]),
createElementVNode("polygon", {
fill: unref(color),
points: "1133.9,75.9 1167.9,75.9 1175.4,83.3 1141.4,83.3"
}, null, 8, _hoisted_64),
createElementVNode("polygon", {
fill: unref(color),
points: "1106.6,73.6 1133.1,73.6 1142.8,83.3 1116.2,83.3"
}, null, 8, _hoisted_65)
])
], 4)),
createElementVNode("div", {
class: "my-dv-header2__content",
style: normalizeStyle(unref(svgStyle))
}, [
renderSlot(_ctx.$slots, "default")
], 4)
]),
_: 3
}, 16);
};
}
});
export {
_sfc_main as default
};