update

init

iweb/src/components/Header.vue

@@ -0,0 +1,58 @@
+<template>
+  <header class="header">
+    <aside class="left">
+      <slot name="left" />
+    </aside>
+    <main class="content">
+      <slot name="content" />
+    </main>
+    <aside class="right">
+      <slot name="right" />
+    </aside>
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props:any, ctx:any) {
+    const obj = reactive({
+      data: {},
+    });
+
+    watchEffect(() => {
+      obj.data = props.data;
+    });
+
+    const handleListItem = (item: any) => {
+      ctx.emit('handleItem', item);
+    };
+
+
+    return {
+      ...toRefs(obj),
+      handleListItem,
+    };
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 20px 34px;
+}
+</style>

iweb/src/components/Menu.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="menu">
+    <slot name="header" />
+    <slot name="main" />
+    <slot name="footer" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props:any, ctx:any) {
+    const obj = reactive({
+      data: {},
+    });
+
+    watchEffect(() => {
+      obj.data = props.data;
+    });
+
+    return {
+      ...toRefs(obj),
+    };
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.menu {
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  box-shadow: 10px 20px 30px 0 rgba(56,73,90,0.09);
+}
+</style>

iweb/src/components/advList.vue

@@ -0,0 +1,48 @@
+<template>
+  <ul class="adv-list">
+    <li v-for="(item, index) of list" :key="index" :item="item" >
+      <slot name="item" :data="item" />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
+
+export default defineComponent({
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props:any, ctx:any) {
+    const obj = reactive({
+      data: {},
+    });
+
+    watchEffect(() => {
+      obj.data = props.data;
+    });
+
+    return {
+      ...toRefs(obj),
+    };
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.adv-list {
+  justify-content: center;
+  flex: 1;
+  display: flex;
+    li {
+      padding: 0 5rem;
+      width: 90px;
+      height: 82px;
+    }
+}
+</style>

iweb/src/components/advListItem.vue

@@ -0,0 +1,96 @@
+<template>
+  <li class="adv-list-item">
+    <div class="show-box" @click="showEvent">
+      <label class="img-box">
+        <img :src="item?.icon" alt="">
+      </label>
+      <span class="name">{{item?.name && $t(`Login.${item?.name}`)}}</span>
+    </div>
+    <div class="show-box hover-box" @click="hoverEvent">
+      <label class="img-box">
+        <img :src="item?.link" alt="">
+      </label>
+      <span class="name">{{item?.detail && $t(`Login.${item?.name}`)}}</span>
+      <span class="name">{{item?.detail && $t(`Login.${item?.detail}`)}}</span>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup(props:any, ctx:any) {
+    const showEvent = () => {
+      ctx.emit('showEvent', props.item);
+    };
+
+    const hoverEvent = () => {
+      ctx.emit('hoverEvent', props.item);
+    };
+
+    return {
+      showEvent,
+      hoverEvent,
+    };
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.adv-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &:hover {
+    .show-box{
+      display: none;
+    }
+    .hover-box {
+      display: flex;
+    }
+  }
+  .show-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .img-box {
+      width: 82px;
+      height: 82px;
+      border-radius: 8px;
+      background: rgba(255,255,255,1);
+      box-shadow: 0 8px 12px 0 rgba(223,235,253,0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+    .name {
+      color: rgba(0,0,0,1);
+      font-size: 12px;
+      font-weight: 400;
+      font-family: "PingFang SC";
+      text-align: left;
+      line-height: 16px;
+      height: 16px;
+      padding-top: 8px;
+    }
+  }
+  .hover-box {
+    display: none;
+    position: relative;
+    top: -15px;
+  }
+}
+</style>