@zhsz/cool-design-dv
Version:
679 lines (678 loc) • 25.1 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 = {
id: "my-dv-header5-SVGID_1_",
cx: "960.2",
cy: "-6297.3101",
r: "431.0873",
gradientTransform: "matrix(1 0 0 -8.416572e-02 0 -445.3614)",
gradientUnits: "userSpaceOnUse"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("ellipse", {
class: "st0",
cx: "960.2",
cy: "84.7",
rx: "439.9",
ry: "5.3"
}, null, -1);
const _hoisted_3 = { class: "st1" };
const _hoisted_4 = {
id: "my-dv-header5-SVGID_2_",
gradientUnits: "userSpaceOnUse",
x1: "960.2",
y1: "2965.6001",
x2: "960.2",
y2: "2901.5688",
gradientTransform: "matrix(1 0 0 1 0 -2893)"
};
const _hoisted_5 = /* @__PURE__ */ createElementVNode("stop", {
offset: "0",
style: { "stop-color": "#1de2ff", "stop-opacity": "0.4" }
}, null, -1);
const _hoisted_6 = ["stroke"];
const _hoisted_7 = ["stroke"];
const _hoisted_8 = ["stroke"];
const _hoisted_9 = /* @__PURE__ */ createElementVNode("animate", {
accumulate: "none",
additive: "replace",
attributeName: "stroke-dasharray",
attributeType: "XML",
begin: "0s",
calcMode: "spline",
dur: "10s",
fill: "remove",
from: "0, 1000, 0, 10",
keySplines: "0.1,0.5,0.2,1",
keyTimes: "0;1",
repeatCount: "indefinite",
restart: "always",
to: "0, 0, 1000, 0"
}, null, -1);
const _hoisted_10 = ["fill"];
const _hoisted_11 = /* @__PURE__ */ createElementVNode("animate", {
accumulate: "none",
additive: "replace",
attributeName: "opacity",
begin: "0s",
calcMode: "linear",
dur: "1.5s",
fill: "remove",
repeatCount: "indefinite",
restart: "always",
values: "0.8;0.6;0.2"
}, null, -1);
const _hoisted_12 = ["fill"];
const _hoisted_13 = { class: "st5" };
const _hoisted_14 = ["fill"];
const _hoisted_15 = ["fill"];
const _hoisted_16 = { class: "st6" };
const _hoisted_17 = ["fill"];
const _hoisted_18 = { class: "st5" };
const _hoisted_19 = ["fill"];
const _hoisted_20 = ["fill"];
const _hoisted_21 = /* @__PURE__ */ createElementVNode("animate", {
accumulate: "none",
additive: "replace",
attributeName: "opacity",
begin: "0s",
calcMode: "linear",
dur: "1.5s",
fill: "remove",
repeatCount: "indefinite",
restart: "always",
values: "0.8;0.6;0.2"
}, null, -1);
const _hoisted_22 = ["fill"];
const _hoisted_23 = ["fill"];
const _hoisted_24 = ["stroke"];
const _hoisted_25 = ["fill"];
const _hoisted_26 = {
id: "my-dv-header5-SVGID_3_",
gradientUnits: "userSpaceOnUse",
x1: "732.7",
y1: "56.3",
x2: "732.7",
y2: "87.9",
gradientTransform: "matrix(1 0 0 -1 0 92)"
};
const _hoisted_27 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st7",
points: "764.4,35.7 732.6,35.7 701,4.1 732.9,4.1"
}, null, -1);
const _hoisted_28 = { class: "st1" };
const _hoisted_29 = {
id: "my-dv-header5-SVGID_4_",
gradientUnits: "userSpaceOnUse",
x1: "692.8",
y1: "56.3",
x2: "692.8",
y2: "87.9",
gradientTransform: "matrix(1 0 0 -1 0 92)"
};
const _hoisted_30 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st8",
points: "724.5,35.7 692.7,35.7 661.1,4.1 692.9,4.1"
}, null, -1);
const _hoisted_31 = { class: "st6" };
const _hoisted_32 = {
id: "my-dv-header5-SVGID_5_",
gradientUnits: "userSpaceOnUse",
x1: "652.85",
y1: "56.3",
x2: "652.85",
y2: "87.9",
gradientTransform: "matrix(1 0 0 -1 0 92)"
};
const _hoisted_33 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st9",
points: "684.5,35.7 652.7,35.7 621.2,4.1 653,4.1"
}, null, -1);
const _hoisted_34 = ["fill"];
const _hoisted_35 = ["values"];
const _hoisted_36 = { class: "st10" };
const _hoisted_37 = ["fill"];
const _hoisted_38 = ["values"];
const _hoisted_39 = { class: "st1" };
const _hoisted_40 = ["fill"];
const _hoisted_41 = ["values"];
const _hoisted_42 = { class: "st11" };
const _hoisted_43 = ["fill"];
const _hoisted_44 = ["values"];
const _hoisted_45 = { class: "st6" };
const _hoisted_46 = ["fill"];
const _hoisted_47 = ["values"];
const _hoisted_48 = { class: "st12" };
const _hoisted_49 = ["fill"];
const _hoisted_50 = ["values"];
const _hoisted_51 = { class: "st12" };
const _hoisted_52 = ["fill"];
const _hoisted_53 = ["values"];
const _hoisted_54 = ["stroke"];
const _hoisted_55 = ["fill"];
const _hoisted_56 = {
id: "my-dv-header5-SVGID_6_",
gradientUnits: "userSpaceOnUse",
x1: "85.325",
y1: "56.3",
x2: "85.325",
y2: "87.9",
gradientTransform: "matrix(-1 0 0 -1 1272.625 92)"
};
const _hoisted_57 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st13",
points: "1155.6,35.7 1187.4,35.7 1219,4.1 1187.1,4.1"
}, null, -1);
const _hoisted_58 = { class: "st1" };
const _hoisted_59 = {
id: "my-dv-header5-SVGID_7_",
gradientUnits: "userSpaceOnUse",
x1: "45.425",
y1: "56.3",
x2: "45.425",
y2: "87.9",
gradientTransform: "matrix(-1 0 0 -1 1272.625 92)"
};
const _hoisted_60 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st14",
points: "1195.5,35.7 1227.3,35.7 1258.9,4.1 1227.1,4.1"
}, null, -1);
const _hoisted_61 = { class: "st6" };
const _hoisted_62 = {
id: "my-dv-header5-SVGID_8_",
gradientUnits: "userSpaceOnUse",
x1: "5.475",
y1: "56.3",
x2: "5.475",
y2: "87.9",
gradientTransform: "matrix(-1 0 0 -1 1272.625 92)"
};
const _hoisted_63 = /* @__PURE__ */ createElementVNode("polygon", {
class: "st15",
points: "1235.5,35.7 1267.3,35.7 1298.8,4.1 1267,4.1"
}, null, -1);
const _hoisted_64 = ["fill"];
const _hoisted_65 = ["values"];
const _hoisted_66 = { class: "st10" };
const _hoisted_67 = ["fill"];
const _hoisted_68 = ["values"];
const _hoisted_69 = { class: "st1" };
const _hoisted_70 = ["fill"];
const _hoisted_71 = ["values"];
const _hoisted_72 = { class: "st11" };
const _hoisted_73 = ["fill"];
const _hoisted_74 = ["values"];
const _hoisted_75 = { class: "st6" };
const _hoisted_76 = ["fill"];
const _hoisted_77 = ["values"];
const _hoisted_78 = { class: "st12" };
const _hoisted_79 = ["fill"];
const _hoisted_80 = ["values"];
const _hoisted_81 = { class: "st12" };
const _hoisted_82 = ["fill"];
const _hoisted_83 = ["values"];
const __default__ = defineComponent({
name: "DvHeader5",
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-header5",
"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("radialGradient", _hoisted_1, [
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_2,
createElementVNode("g", _hoisted_3, [
createElementVNode("linearGradient", _hoisted_4, [
_hoisted_5,
createElementVNode("stop", {
offset: "1",
style: normalizeStyle(`stop-color:${unref(color)};stop-opacity:0`)
}, null, 4)
]),
createElementVNode("polygon", {
class: "st2",
stroke: unref(color),
points: "1283.8,8.5 636.6,8.5 701.6,72.6 1218.9,72.6"
}, null, 8, _hoisted_6)
]),
createElementVNode("g", null, [
createElementVNode("g", null, [
createElementVNode("polyline", {
class: "st3",
stroke: unref(color),
points: "0.2,52.8 27.4,80.1 805,80.1"
}, null, 8, _hoisted_7),
createElementVNode("polyline", {
class: "st3",
stroke: unref(color),
points: "1919.9,53.2 1894.9,78.1 1117.3,78.1"
}, null, 8, _hoisted_8),
_hoisted_9
]),
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "788.5,85.8 754.5,85.8 747.1,78.3 781,78.3"
}, null, 8, _hoisted_10),
_hoisted_11
]),
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "815.9,88 789.3,88 779.6,78.3 806.2,78.3"
}, null, 8, _hoisted_12)
]),
createElementVNode("g", _hoisted_13, [
createElementVNode("polygon", {
fill: unref(color),
points: "860.7,84.3 828.8,84.3 817.1,72.6 849,72.6"
}, null, 8, _hoisted_14)
]),
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "1054.2,90 866.7,90 855,78.3 1066.6,78.3"
}, null, 8, _hoisted_15)
]),
createElementVNode("g", _hoisted_16, [
createElementVNode("polygon", {
fill: unref(color),
points: "803.3,72.6 1120.6,72.6 1126.6,78.6 797,78.6"
}, null, 8, _hoisted_17)
]),
createElementVNode("g", _hoisted_18, [
createElementVNode("polygon", {
fill: unref(color),
points: "1060,84.3 1091.9,84.3 1103.6,72.6 1071.7,72.6"
}, null, 8, _hoisted_19)
]),
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "1134.2,85.8 1168.1,85.8 1175.6,78.3 1141.6,78.3"
}, null, 8, _hoisted_20),
_hoisted_21
]),
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "1106.8,88 1133.3,88 1143,78.3 1116.5,78.3"
}, null, 8, _hoisted_22)
])
]),
createElementVNode("g", null, [
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "1001.6,9.7 918.7,9.7 916.4,7.4 1004,7.4"
}, null, 8, _hoisted_23)
])
]),
createElementVNode("g", null, [
createElementVNode("g", null, [
createElementVNode("polyline", {
class: "st3",
stroke: unref(color),
points: "-0.2,9.6 604.2,9.6 635.1,40.5"
}, null, 8, _hoisted_24),
createElementVNode("g", null, [
createElementVNode("ellipse", {
transform: "matrix(0.8507 -0.5257 0.5257 0.8507 73.5829 339.8563)",
fill: unref(color),
cx: "635",
cy: "40.4",
rx: "3.8",
ry: "3.8"
}, null, 8, _hoisted_25)
])
])
]),
createElementVNode("g", null, [
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("g", _hoisted_31, [
createElementVNode("linearGradient", _hoisted_32, [
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_33
]),
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "607.7,17.5 591.9,17.5 586.8,12.3 602.5,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.05",
repeatCount: "indefinite"
}, null, 8, _hoisted_35)
], 8, _hoisted_34)
]),
createElementVNode("g", _hoisted_36, [
createElementVNode("polygon", {
fill: unref(color),
points: "588.9,17.5 573.2,17.5 568,12.3 583.8,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.1",
repeatCount: "indefinite"
}, null, 8, _hoisted_38)
], 8, _hoisted_37)
]),
createElementVNode("g", _hoisted_39, [
createElementVNode("polygon", {
fill: unref(color),
points: "570.2,17.5 554.5,17.5 549.3,12.3 565,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.2",
repeatCount: "indefinite"
}, null, 8, _hoisted_41)
], 8, _hoisted_40)
]),
createElementVNode("g", _hoisted_42, [
createElementVNode("polygon", {
fill: unref(color),
points: "551.5,17.5 535.7,17.5 530.6,12.3 546.3,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.4",
repeatCount: "indefinite"
}, null, 8, _hoisted_44)
], 8, _hoisted_43)
]),
createElementVNode("g", _hoisted_45, [
createElementVNode("polygon", {
fill: unref(color),
points: "532.8,17.5 517,17.5 511.8,12.3 527.6,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.6",
repeatCount: "indefinite"
}, null, 8, _hoisted_47)
], 8, _hoisted_46)
]),
createElementVNode("g", _hoisted_48, [
createElementVNode("polygon", {
fill: unref(color),
points: "514,17.5 498.3,17.5 493.1,12.3 508.8,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.8",
repeatCount: "indefinite"
}, null, 8, _hoisted_50)
], 8, _hoisted_49)
]),
createElementVNode("g", _hoisted_51, [
createElementVNode("polygon", {
fill: unref(color),
points: "495.3,17.5 327.7,17.5 322.5,12.3 490.1,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "1.1",
repeatCount: "indefinite"
}, null, 8, _hoisted_53)
], 8, _hoisted_52)
]),
createElementVNode("g", null, [
createElementVNode("g", null, [
createElementVNode("polyline", {
class: "st3",
stroke: unref(color),
points: "1920.2,9.6 1315.8,9.6 1284.9,40.5"
}, null, 8, _hoisted_54),
createElementVNode("g", null, [
createElementVNode("path", {
fill: unref(color),
d: "M1282.4,37.7c-1.5,1.5-1.5,3.8,0,5.3s3.8,1.5,5.3,0s1.5-3.8,0-5.3C1286.2,36.3,1283.8,36.3,1282.4,37.7z"
}, null, 8, _hoisted_55)
])
])
]),
createElementVNode("g", null, [
createElementVNode("linearGradient", _hoisted_56, [
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_57
]),
createElementVNode("g", _hoisted_58, [
createElementVNode("linearGradient", _hoisted_59, [
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_60
]),
createElementVNode("g", _hoisted_61, [
createElementVNode("linearGradient", _hoisted_62, [
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_63
]),
createElementVNode("g", null, [
createElementVNode("polygon", {
fill: unref(color),
points: "1312.3,17.5 1328.1,17.5 1333.2,12.3 1317.5,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.05",
repeatCount: "indefinite"
}, null, 8, _hoisted_65)
], 8, _hoisted_64)
]),
createElementVNode("g", _hoisted_66, [
createElementVNode("polygon", {
fill: unref(color),
points: "1331.1,17.5 1346.8,17.5 1352,12.3 1336.2,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.1",
repeatCount: "indefinite"
}, null, 8, _hoisted_68)
], 8, _hoisted_67)
]),
createElementVNode("g", _hoisted_69, [
createElementVNode("polygon", {
fill: unref(color),
points: "1349.8,17.5 1365.5,17.5 1370.7,12.3 1355,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.2",
repeatCount: "indefinite"
}, null, 8, _hoisted_71)
], 8, _hoisted_70)
]),
createElementVNode("g", _hoisted_72, [
createElementVNode("polygon", {
fill: unref(color),
points: "1368.5,17.5 1384.3,17.5 1389.4,12.3 1373.7,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.4",
repeatCount: "indefinite"
}, null, 8, _hoisted_74)
], 8, _hoisted_73)
]),
createElementVNode("g", _hoisted_75, [
createElementVNode("polygon", {
fill: unref(color),
points: "1387.2,17.5 1403,17.5 1408.2,12.3 1392.4,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.6",
repeatCount: "indefinite"
}, null, 8, _hoisted_77)
], 8, _hoisted_76)
]),
createElementVNode("g", _hoisted_78, [
createElementVNode("polygon", {
fill: unref(color),
points: "1406,17.5 1421.7,17.5 1426.9,12.3 1411.2,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "0.8",
repeatCount: "indefinite"
}, null, 8, _hoisted_80)
], 8, _hoisted_79)
]),
createElementVNode("g", _hoisted_81, [
createElementVNode("polygon", {
fill: unref(color),
points: "1424.7,17.5 1592.3,17.5 1597.5,12.3 1429.9,12.3"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `transparent;${unref(color)}`,
dur: "1.1",
begin: "1.1",
repeatCount: "indefinite"
}, null, 8, _hoisted_83)
], 8, _hoisted_82)
])
], 4)),
createElementVNode("div", {
class: "my-dv-header5__content",
style: normalizeStyle(unref(svgStyle))
}, [
renderSlot(_ctx.$slots, "default")
], 4)
]),
_: 3
}, 16);
};
}
});
export {
_sfc_main as default
};