init

src/components/Base/Container.vue

@@ -0,0 +1,114 @@
+<script setup>
+import Icon from './Icon.vue';
+import Corner from './Corner.vue';
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Default title',
+  },
+  icon: {
+    type: String,
+    default: 'icon',
+  },
+  corner: {
+    type: Array,
+    default: ['tl', 'tr', 'bl', 'br'], //'trbl', // top right bottom left
+  },
+  cubeCorner: {
+    type: String,
+    default: 'bl',
+    validator: (value, props) => {
+      return ['bl', 'br'].includes(value);
+    },
+  },
+});
+</script>
+
+<template>
+  <div class="container-border">
+    <Corner
+      v-if="corner.indexOf('tl') !== -1"
+      position="top-left"
+      key="top-left"
+    />
+    <Corner
+      v-if="corner.indexOf('tr') !== -1"
+      position="top-right"
+      key="top-right"
+    />
+    <Corner
+      v-if="corner.indexOf('bl') !== -1"
+      position="bottom-left"
+      key="bottom-left"
+    />
+    <Corner
+      v-if="corner.indexOf('br') !== -1"
+      position="bottom-right"
+      key="bottom-right"
+    />
+
+    <div class="container">
+      <div class="cube" :class="[`cube-${cubeCorner}`]"></div>
+      <div class="container-header">
+        <Icon :name="icon" />
+        <span>{{ title }}</span>
+      </div>
+      <div class="container-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container-border {
+  position: relative;
+  display: flex;
+}
+
+.cube {
+  width: 26px;
+  height: 26px;
+  background: #1f8fff;
+  position: absolute;
+  z-index: 1;
+}
+
+.cube-bl {
+  transform: rotate(45deg);
+  bottom: -13px;
+  left: -13px;
+}
+
+.cube-br {
+  transform: rotate(45deg);
+  bottom: -13px;
+  right: -13px;
+}
+
+.container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  color: #fff;
+}
+
+.container-header {
+  background: #006acd66;
+  backdrop-filter: blur(2px);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+}
+
+.container-body {
+  background: #ffffff33;
+  backdrop-filter: blur(1px);
+  flex: 1;
+  padding: 20px;
+}
+</style>

src/components/Base/Corner.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  position: {
+    type: String,
+    default: 'bottom-left',
+  },
+});
+
+const styles = computed(() => {
+  switch (props.position) {
+    case 'top-left':
+      return {
+        transform: 'rotate(90deg)',
+        top: 0,
+        left: 0,
+        bottom: 'unset',
+        right: 'unset',
+      };
+    case 'top-right':
+      return {
+        transform: 'rotate(180deg)',
+        top: 0,
+        left: 'unset',
+        bottom: 'unset',
+        right: 0,
+      };
+    case 'bottom-left':
+      return {
+        transform: 'rotate(0deg)',
+        bottom: 0,
+        left: 0,
+        right: 'unset',
+        top: 'unset',
+      };
+    case 'bottom-right':
+      return {
+        transform: 'rotate(-90deg)',
+        top: 'unset',
+        left: 'unset',
+        bottom: 0,
+        right: 0,
+      };
+  }
+});
+</script>
+
+<template>
+  <div class="corner" :style="styles"></div>
+</template>
+
+<style scoped>
+.corner {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-left: 2px solid #0078e4;
+  border-bottom: 2px solid #0078e4;
+  z-index: 2;
+}
+</style>

src/components/Base/Header.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ref, computed } from 'vue';
+</script>
+
+<template>
+  <header class="header">
+    <div>
+      <Icon htmlRole="logo" icon="logo" />
+      <h1 class="header__title">郴州旗滨光伏光电玻璃有限公司</h1>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.header {
+  position: relative;
+  height: 90px;
+  background: url(../../assets/header-bg@2x.png) 100% / 100% no-repeat;
+}
+
+.header > div {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  /** width: 520px; **/
+  width: 480px;
+  top: 20px;
+}
+
+.header__title {
+  font-weight: 400;
+  letter-spacing: 2px;
+  color: #fff;
+  user-select: none;
+}
+</style>

src/components/Base/Icon.vue

@@ -0,0 +1,51 @@
+<script setup>
+// import icons
+import checkIcon from '../../assets/svg/check.svg';
+import cubeIcon from '../../assets/svg/cube.svg';
+import cube2Icon from '../../assets/svg/cube-twice.svg';
+import stackIcon from '../../assets/svg/stack.svg';
+
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'icon',
+  },
+  htmlRole: {
+    type: String,
+    default: 'icon', // 'icon' | 'logo'
+  },
+});
+
+const icon = computed(() => {
+  switch (props.name) {
+    case 'icon':
+    case 'cube':
+      return cubeIcon;
+    case 'cube-2':
+      return cube2Icon;
+    case 'stack':
+      return stackIcon;
+    case 'check':
+      return checkIcon;
+  }
+});
+</script>
+
+<template>
+  <div class="icon">
+    <img :src="icon" :class="icon" />
+  </div>
+</template>
+
+<style scoped>
+.icon {
+  height: 16px;
+  width: 16px;
+  background: #fff3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>