diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/index.html" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..19d69c39473fded44f2e6f93a1b75f4c231bb46e
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/index.html"
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="https://gd-hbimg.huaban.com/7dbc1c205de7398786b3dc1a829eed714d0d7a043447-IqrXXX">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your shopping cart</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+<!-- 作业：用脚手架去写个购物车列表,一条条数据要使用组件的形式,数据由外层的组件传递（有能力的,结合之前学的,在购物中数量+1 -1时，对应的购买总价也要变更） -->
+
+<!-- 　  　▃▆█▇▄▖
+　 　 　 ▟◤▖　　　◥█▎
+   　 ◢◤　 ▐　　　 　▐▉
+　 ▗◤　　　▂　▗▖　　▕█▎
+　◤　▗▅▖◥▄　▀◣　　█▊
+▐　▕▎◥▖◣◤　　　　◢██
+█◣　◥▅█▀　　　　▐██◤
+▐█▙▂　　     　◢██◤
+◥██◣　　　　◢▄◤
+ 　　▀██▅▇▀ -->
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/App.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..bd59b5c5894ccec79971b7bf0eb02118d2a4e527
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/App.vue"
@@ -0,0 +1,49 @@
+<template>
+    <div class="main">
+        <div class="bigBox">
+            <top></top>
+            <goods></goods>
+            <bottom></bottom>
+        </div>
+    </div>
+</template>
+
+<script>
+import top from './components/gwc/top.vue';
+import goods from './components/gwc/goods.vue';
+import bottom from './components/gwc/bottom.vue';
+
+export default {
+    components: {
+        top,
+        goods,
+        bottom
+    }
+}
+</script>
+
+<style>
+* {
+    list-style: none;
+    text-decoration: none;
+}
+
+body {
+    background-color: rgb(238, 235, 241);
+}
+
+.main {
+    width: 800px;
+    height: 680px;
+    margin: auto;
+    background-color: white;
+    border: 1px solid rgb(238, 235, 241);
+    box-shadow: lightgray 5px 5px 10px 5px;
+}
+
+.bigBox {
+    width: 800px;
+    display: flex;
+    flex-direction: column;
+}
+</style>
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/assets/base.css" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/assets/base.css"
new file mode 100644
index 0000000000000000000000000000000000000000..71dc55a3cb5a72589496743a327c738ead3e1c83
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/assets/base.css"
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/assets/main.css" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/assets/main.css"
new file mode 100644
index 0000000000000000000000000000000000000000..e8667cd4508b6163e44e675ff899de1896544c84
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/assets/main.css"
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/bottom.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/bottom.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ba102d31968f131aeb8407853321732dc0dfea98
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/bottom.vue"
@@ -0,0 +1,41 @@
+<template>
+    <div class="bottom">
+        <button class="checkout">{{ checkout }}</button>
+    </div>
+</template>
+<script>
+export default {
+    data:()=>{
+        return{
+            checkout:"Proceed to checkout"
+        }
+    }
+}
+</script>
+<style scoped>
+    .bottom{
+        
+        width: 600px;
+        height: 100px;
+        margin: auto;
+        display: flex;
+        justify-content: right;
+        align-items: center;
+    }
+
+    .checkout{
+        width: 130px;
+        height: 30px;
+        border: none;
+        background-color: black;
+        text-align: center;
+        line-height: 30px;
+        color: white;
+        font-size: 10px;
+        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+        font-weight: 500;
+    }
+    .checkout:hover{
+        background-color: rgb(61, 61, 61);
+    }
+</style>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/goods.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/goods.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..b48aa1bf3daabb0f986df94d6e22486fd0b7d32f
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/goods.vue"
@@ -0,0 +1,183 @@
+<template>
+    <div class="bigBox" v-for="item, index in goodsList">
+        <div class="goodsList" v-if="item.quantity > 0">
+            <!-- 左边内容----图片 -->
+            <div class="left">
+                <div class="image">
+                    <img :src="item.image" alt="">
+                </div>
+            </div>
+            <!-- 右边内容分----上下两部分 display改变方向为左右布局-->
+            <div class="right">
+                <!-- 上半部分 display改变方向为上下布局-->
+                <div class="top">
+                    <div class="goods">
+                        <span class="goodsName">{{ item.name }}</span>
+                        <span class="brand">{{ item.brand }}</span>
+                    </div>
+                    <div class="operate">
+                        <div class="quantity">Quantity <span>{{ item.quantity }}</span> </div>
+                        <div class="btn">
+                            <button @click="item.quantity += 1; add(index)"><a href="#"> + </a></button>
+                            <button @click="item.quantity -= 1; sub(index)"><a href="#"> - </a></button>
+                        </div>
+
+                    </div>
+                    <div class="price"> {{ Number(item.price).toLocaleString() }} <span id="price">$</span></div>
+                </div>
+
+                <!-- 下半部分 -->
+                <div class="bottom">
+                    <div class="product">{{ item.product }}</div>
+                    <span class="cancel" @click="cancel(index)"><a href="#">×</a></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data: function () {
+        return {
+            goodsList: [
+                { id: 1, image: "https://gd-hbimg.huaban.com/c7733255043597651952a16a041b7d8bc716aaaa4f3e-NdFZiH", name: "Product Name", brand: "Brand", quantity: 1, price: 2699, product: "Short description of product written here", total: 0 },
+                { id: 2, image: "https://gd-hbimg.huaban.com/7b932fe033f1767e3089f400563fc172a232945e78ff-ybXgEi", name: "Product Name", brand: "Brand", quantity: 1, price: 2799, product: "Short description of product written here", total: 0 },
+                { id: 3, image: "https://gd-hbimg.huaban.com/b153874516c43054d2efa15e19b9fc6711ca2ab4ab99-qGFwPs", name: "Product Name", brand: "Brand", quantity: 1, price: 2999, product: "Short description of product written here", total: 0 }
+            ],
+        }
+    },
+    methods: {
+        // 点击 × 后删除对应的数据
+        cancel: function (index) {
+            this.goodsList[index].quantity = 0
+        },
+        add(index) {
+           
+        },
+        sub(index) {
+            //this.goodsList[index].price = this.goodsList[index].price - this.goodsList[index].price
+            
+        }
+    },
+    watch:{
+        goodsList: {
+                handler(newValue, oldValue) {
+                    
+                },
+                deep: true,
+            },
+    }
+}
+</script>
+
+<style scoped>
+.goodsList {
+    width: 600px;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.left {
+    width: 100px;
+    height: 120px;
+}
+
+.image img {
+    width: 100px;
+    height: 100px;
+}
+
+.right {
+    width: 480px;
+    height: 120px;
+    border-bottom: 1px lightgray solid;
+    display: flex;
+    flex-direction: column;
+}
+
+.top {
+    width: 480px;
+    height: 90px;
+    display: flex;
+    flex-direction: row;
+}
+
+.goods {
+    width: 160px;
+    display: flex;
+    flex-direction: column;
+}
+
+.goodsName {
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-weight: 1000;
+}
+
+.brand {
+    font-size: 10px;
+    color: gray;
+    margin-top: 10px;
+}
+
+.operate {
+    width: 160px;
+    height: 25px;
+    border: 1px solid black;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.quantity {
+    font-size: 14px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    color: gray;
+}
+
+.quantity span {
+    color: black;
+    font-weight: 500;
+    font-size: 8px;
+}
+
+.btn button {
+    width: 40px;
+    height: 25px;
+    background-color: white;
+    border: none;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.price {
+    width: 160px;
+    text-align: right;
+    font-weight: 600;
+}
+
+#price {
+    font-size: 6px;
+}
+
+.bottom {
+    width: 480px;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.product {
+    font-size: 8px;
+    line-height: 30px;
+    font-weight: 500;
+}
+
+.cancel a {
+    color: black;
+    font-size: 20px;
+}
+</style>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/top.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/top.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..92c5e301c4af539bc188be3d402649c036bc0b90
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/gwc/top.vue"
@@ -0,0 +1,54 @@
+<template>
+    <div class="top">
+        <div class="title">{{ title }}</div>
+        <div v-for="item in total2" class="total"><span id="totalName">Total &nbsp&nbsp&nbsp&nbsp</span> <span  id="totalValue"> {{ item.total }} </span> <span id="symbol">$</span> </div>
+    </div>
+</template>
+<script>
+
+import goods from './goods.vue';
+
+export default {
+    data: () => {
+        return {
+            title: "Your Cart",
+            total2:goods.data()
+        }
+    },
+}
+</script>
+<style scoped>
+.top {
+    width: 600px;
+    height: 80px;
+    margin: auto;
+    margin-top: 40px;
+    border-bottom: 1px lightgray solid;
+    display: flex;
+    line-height: 80px;
+    justify-content: space-between;
+}
+
+.title {
+    font-size: 18px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-weight: 1000;
+}
+
+#totalName {
+    font-size: 6px;
+}
+
+#totalValue {
+    font-weight: 600;
+}
+
+#symbol{
+    font-size: 6px;
+    font-weight: 600;
+}
+
+</style>
+
+
+
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconCommunity.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconDocumentation.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconEcosystem.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconSupport.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconTooling.vue" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/main.js" "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..8461739fd10b7654f14c4c09e32e50fce3c9dbab
--- /dev/null
+++ "b/\344\275\234\344\270\232/Vue\345\272\224\347\224\250/src/main.js"
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+
+createApp(App).mount('#app')
diff --git "a/\344\275\234\344\270\232/setup/p/index.html" "b/\344\275\234\344\270\232/setup/p/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c2bcd7735418066b9821c198c86af6543f10c291
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/index.html"
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="https://gd-hbimg.huaban.com/7c705aa69989f646a7fc7fb960ff1da3d807a93a4ee8-u22RGa">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>setup</title>
+
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/setup/p/src/App.vue" "b/\344\275\234\344\270\232/setup/p/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..84a4405e3a0d93e14427e086b1c30dbbed6e7d17
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/App.vue"
@@ -0,0 +1,127 @@
+<script setup>
+
+import right from './components/chacao/right.vue';
+import { ref } from 'vue';
+
+let html = ref("")
+
+function change(index) {
+    switch (index) {
+        case 0:
+            html.value = "<div class='text' style='width: 600px;height: 590px;background-color: #fff;border-radius: 10px;'></div>"
+            break;
+        case 1:
+            html.value = "<div class='text' style='width: 600px;height: 590px;background-color: blue;border-radius: 10px;'></div>"
+            break;
+        case 2:
+            html.value = "<div class='text' style='width: 600px;height: 590px;background-color: green;border-radius: 10px;'></div>"
+            break;
+        case 3:
+            html.value = "<div class='text' style='width: 600px;height: 590px;background-color: yellow;border-radius: 10px;'></div>"
+            break;
+    }
+}
+
+</script>
+
+<template>
+    <div class="main">
+        <div class="bigBox">
+            <div class="left">
+                <div class="title">...</div>
+                <div class="tab">
+                    <a href="#">
+                        <div class="btn" @click="change(0)">首页</div>
+                    </a>
+                    <a href="#">
+                        <div class="btn" @click="change(1)">菜单一</div>
+                    </a>
+                    <a href="#">
+                        <div class="btn" @click="change(2)">菜单二</div>
+                    </a>
+                    <a href="#">
+                        <div class="btn" @click="change(3)">菜单三</div>
+                    </a>
+                </div>
+            </div>
+            <div class="right">
+                <right v-html="html"></right>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+* {
+    list-style: none;
+    text-decoration: none;
+}
+
+.main {
+    width: 840px;
+    height: 620px;
+    margin: auto;
+    background-color: rgb(216, 231, 233);
+    box-shadow: lightgray 10px 10px 5px;
+}
+
+.bigBox {
+    width: 840px;
+    height: 620px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.left {
+    width: 180px;
+    height: 590px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: lightgray 3px 3px 3px;
+}
+
+.title {
+    width: 160px;
+    height: 80px;
+    border-bottom: 1px solid lightgray;
+    margin: auto;
+    line-height: 80px;
+    font-size: 30px;
+}
+
+.tab {
+    width: 180px;
+    height: 510px;
+    margin-top: 20px;
+}
+
+.btn {
+    width: 160px;
+    height: 40px;
+    line-height: 40px;
+    margin: auto;
+    margin-top: 10px;
+    color: black;
+}
+
+.btn:hover {
+    width: 160px;
+    height: 40px;
+    background-color: lightgray;
+    border-radius: 10px;
+    box-shadow: 0px 5px 5px lightgray;
+}
+
+.right {
+    width: 600px;
+    height: 590px;
+    margin: auto;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: lightgray 3px 3px 3px;
+}
+</style>
diff --git "a/\344\275\234\344\270\232/setup/p/src/assets/base.css" "b/\344\275\234\344\270\232/setup/p/src/assets/base.css"
new file mode 100644
index 0000000000000000000000000000000000000000..71dc55a3cb5a72589496743a327c738ead3e1c83
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/assets/base.css"
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git "a/\344\275\234\344\270\232/setup/p/src/assets/main.css" "b/\344\275\234\344\270\232/setup/p/src/assets/main.css"
new file mode 100644
index 0000000000000000000000000000000000000000..e8667cd4508b6163e44e675ff899de1896544c84
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/assets/main.css"
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git "a/\344\275\234\344\270\232/setup/p/src/components/chacao/home.vue" "b/\344\275\234\344\270\232/setup/p/src/components/chacao/home.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2eb0d58655530fc135b70371fbb2f8db1321533e
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/components/chacao/home.vue"
@@ -0,0 +1,24 @@
+<template>
+    <div class="index">
+        <h3>home</h3>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function () {
+        return {
+            
+        }
+    }
+}
+</script>
+
+<style>
+.home {
+    width: 600px;
+    height: 590px;
+    background-color: aqua;
+    border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/setup/p/src/components/chacao/right.vue" "b/\344\275\234\344\270\232/setup/p/src/components/chacao/right.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..f9ee9c4cfee2bcbfdc193129d47509ae2230d872
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/components/chacao/right.vue"
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <solt></solt>
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style>
+    
+</style>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/setup/p/src/components/icons/IconCommunity.vue" "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/setup/p/src/components/icons/IconDocumentation.vue" "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/setup/p/src/components/icons/IconEcosystem.vue" "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/setup/p/src/components/icons/IconSupport.vue" "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/setup/p/src/components/icons/IconTooling.vue" "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/setup/p/src/main.js" "b/\344\275\234\344\270\232/setup/p/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..8461739fd10b7654f14c4c09e32e50fce3c9dbab
--- /dev/null
+++ "b/\344\275\234\344\270\232/setup/p/src/main.js"
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+
+createApp(App).mount('#app')
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/index.html" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ded2fb2bdadffd12c0e473ea3db8ec9833326421
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/index.html"
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="https://gd-hbimg.huaban.com/7dbc1c205de7398786b3dc1a829eed714d0d7a043447-IqrXXX">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your shopping cart</title>
+    <link rel="stylesheet" href="./src/components/gwc/goods.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+<!-- 把购物用组件重写下。每个商品是一个个item(子组件),点击item的商品数量时候，总的购买数和总价要随之变更 -->
+
+<!-- 　  　▃▆█▇▄▖
+　 　 　 ▟◤▖　　　◥█▎
+   　 ◢◤　 ▐　　　 　▐▉
+　 ▗◤　　　▂　▗▖　　▕█▎
+　◤　▗▅▖◥▄　▀◣　　█▊
+▐　▕▎◥▖◣◤　　　　◢██
+█◣　◥▅█▀　　　　▐██◤
+▐█▙▂　　     　◢██◤
+◥██◣　　　　◢▄◤
+ 　　▀██▅▇▀ -->
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/App.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..d819ebce6c89781dd8c95a5b3d9d261ba76e14fc
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/App.vue"
@@ -0,0 +1,46 @@
+<template>
+    <div class="main">
+        <div class="bigBox">
+            <top></top>
+            <goods></goods>
+        </div>
+    </div>
+</template>
+
+<script>
+import top from './components/gwc/top.vue';
+import goods from './components/gwc/goods.vue';
+
+export default {
+    components: {
+        top,
+        goods,
+    }
+}
+</script>
+
+<style>
+* {
+    list-style: none;
+    text-decoration: none;
+}
+
+body {
+    background-color: rgb(238, 235, 241);
+}
+
+.main {
+    width: 800px;
+    height: 680px;
+    margin: auto;
+    background-color: white;
+    border: 1px solid rgb(238, 235, 241);
+    box-shadow: lightgray 5px 5px 10px 5px;
+}
+
+.bigBox {
+    width: 800px;
+    display: flex;
+    flex-direction: column;
+}
+</style>
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/assets/base.css" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/assets/base.css"
new file mode 100644
index 0000000000000000000000000000000000000000..71dc55a3cb5a72589496743a327c738ead3e1c83
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/assets/base.css"
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/assets/main.css" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/assets/main.css"
new file mode 100644
index 0000000000000000000000000000000000000000..e8667cd4508b6163e44e675ff899de1896544c84
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/assets/main.css"
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/evenBus.js" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/evenBus.js"
new file mode 100644
index 0000000000000000000000000000000000000000..6ac55e4b0492c2bcaabc50fb4649c81f087a5603
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/evenBus.js"
@@ -0,0 +1,5 @@
+import mitt from 'mitt';
+ 
+const emitter = mitt();
+ 
+export default emitter;
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/goods.css" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/goods.css"
new file mode 100644
index 0000000000000000000000000000000000000000..b0195d62b24c1779e58965fdb78aaf8d4468a8d9
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/goods.css"
@@ -0,0 +1,136 @@
+.goodsList {
+    width: 600px;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.goodsLeft {
+    width: 100px;
+    height: 120px;
+}
+
+.image img {
+    width: 100px;
+    height: 100px;
+}
+
+.goodsRight {
+    width: 480px;
+    height: 120px;
+    border-bottom: 1px lightgray solid;
+    display: flex;
+    flex-direction: column;
+}
+
+.goodsTop {
+    width: 480px;
+    height: 90px;
+    display: flex;
+    flex-direction: row;
+}
+
+.goods {
+    width: 160px;
+    display: flex;
+    flex-direction: column;
+}
+
+.goodsName {
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-weight: 1000;
+}
+
+.brand {
+    font-size: 10px;
+    color: gray;
+    margin-top: 10px;
+}
+
+.operate {
+    width: 160px;
+    height: 25px;
+    border: 1px solid black;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.quantity {
+    font-size: 14px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    color: gray;
+}
+
+.quantity span {
+    color: black;
+    font-weight: 500;
+    font-size: 8px;
+}
+
+.btn button {
+    width: 40px;
+    height: 25px;
+    background-color: white;
+    border: none;
+    font-size: 20px;
+}
+
+.btn a{
+    color: black;
+}
+
+.price {
+    width: 160px;
+    text-align: right;
+    font-weight: 600;
+}
+
+#price {
+    font-size: 6px;
+}
+
+.goodsBottom {
+    width: 480px;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.product {
+    font-size: 8px;
+    line-height: 30px;
+    font-weight: 500;
+}
+
+.cancel a {
+    color: black;
+    font-size: 20px;
+}
+
+.bottom {
+    width: 600px;
+    height: 100px;
+    margin: auto;
+    display: flex;
+    justify-content: right;
+    align-items: center;
+}
+
+.checkout {
+    width: 130px;
+    height: 30px;
+    border: none;
+    background-color: black;
+    text-align: center;
+    line-height: 30px;
+    color: white;
+    font-size: 10px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-weight: 500;
+}
+
+.checkout:hover {
+    background-color: rgb(61, 61, 61);
+}
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/goods.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/goods.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a1cd744cefe91644824b0cd98667010ef97de6ea
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/goods.vue"
@@ -0,0 +1,111 @@
+<template>
+    <div class="goodsBox" v-for="item, index in goodsList">
+        <div class="goodsList" v-if="item.quantity > 0">
+            <!-- 左边内容----图片 -->
+            <div class="goodsLeft">
+                <div class="image">
+                    <img :src="item.image" alt="">
+                </div>
+            </div>
+            <!-- 右边内容分----上下两部分 display改变方向为左右布局-->
+            <div class="goodsRight">
+                <!-- 上半部分 display改变方向为上下布局-->
+                <div class="goodsTop">
+                    <div class="goods">
+                        <span class="goodsName">{{ item.name }}</span>
+                        <span class="brand">{{ item.brand }}</span>
+                    </div>
+                    <div class="operate">
+                        <div class="quantity">Quantity <span>{{ item.quantity }}</span> </div>
+                        <div class="btn">
+                            <button @click="item.quantity += 1; add(index)"><a href="#"> + </a></button>
+                            <button @click="item.quantity -= 1; sub(index)"><a href="#"> - </a></button>
+                        </div>
+
+                    </div>
+                    <div class="price"> {{ Number(item.total).toLocaleString() }} <span id="price">$</span></div>
+                </div>
+
+                <!-- 下半部分 -->
+                <div class="goodsBottom">
+                    <div class="product">{{ item.product }}</div>
+                    <span class="cancel" @click="cancel(index)"><a href="#">×</a></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="bottom">
+        <button class="checkout" @click="buy">{{ checkout }}</button>
+    </div>
+</template>
+
+<script>
+
+import emitter from './evenBus';
+
+export default {
+    data: function () {
+        return {
+            goodsList: [
+                { id: 1, image: "https://gd-hbimg.huaban.com/c7733255043597651952a16a041b7d8bc716aaaa4f3e-NdFZiH", name: "Product Name", brand: "Brand", quantity: 1, price: 2699, product: "Short description of product written here", total: 2699 },
+                { id: 2, image: "https://gd-hbimg.huaban.com/7b932fe033f1767e3089f400563fc172a232945e78ff-ybXgEi", name: "Product Name", brand: "Brand", quantity: 1, price: 2799, product: "Short description of product written here", total: 2799 },
+                { id: 3, image: "https://gd-hbimg.huaban.com/b153874516c43054d2efa15e19b9fc6711ca2ab4ab99-qGFwPs", name: "Product Name", brand: "Brand", quantity: 1, price: 2999, product: "Short description of product written here", total: 2999 }
+            ],
+            checkout: "Proceed to checkout",
+            totalArr: [],
+            idArr: [1,2,3]
+        }
+    },
+    methods: {
+        add: function (index) {
+            this.totalArr = []
+            for (const i of this.goodsList) {
+                i.total = i.quantity * i.price
+                this.totalArr.push(i.total)
+            }
+            console.log(this.totalArr);
+            emitter.emit("add", this.totalArr)
+        },
+        sub: function (index) {
+            this.totalArr = []
+            for (const i of this.goodsList) {
+                i.total = i.quantity * i.price
+                this.totalArr.push(i.total)
+            }
+            emitter.emit("sub", this.totalArr)
+        },
+        // 点击 × 后删除对应的数据
+        cancel: function (index) {
+            this.totalArr = []
+            //this.goodsList[index].quantity = 0
+
+            for (const key in this.goodsList) {
+
+                if (index == key) {
+                    this.goodsList.splice(key, 1)
+                    this.idArr.splice(key, 1)
+                }
+            }
+
+            console.log(this.totalArr);
+            console.log(this.idArr);
+            for (let idd of this.idArr) {
+                console.log(idd);
+                for (let val of this.goodsList) {
+                    if(val.id==idd){
+                    val.total = val.quantity * val.price
+                    this.totalArr.push(val.total)
+                    }
+                }
+            }
+            emitter.emit("cancel", this.totalArr)
+        },
+        //购买
+        buy: function () {
+            alert("good!")
+        }
+    },
+}
+
+</script>
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/top.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/top.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9f932408178646014f71927e0aab2a0701c1d362
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/gwc/top.vue"
@@ -0,0 +1,82 @@
+<template>
+    <div class="top">
+        <div class="title">{{ title }}</div>
+        <div class="total"><span id="totalName">Total &nbsp&nbsp&nbsp&nbsp</span> <span id="totalValue"> {{
+            Number(topTotal).toLocaleString() }}
+            </span> <span id="symbol">$</span> </div>
+    </div>
+</template>
+<script>
+import emitter from './evenBus';
+export default {
+    data: () => {
+        return {
+            title: "Your Cart",
+            topTotal: 0
+        }
+    },
+    mounted() {
+        let _this = this
+        _this.topTotal = 8497
+
+        emitter.on("add", function (value) {
+            console.log(value);
+            _this.topTotal = 0
+            value.forEach(element => {
+                _this.topTotal += element
+            });
+        })
+
+        emitter.on("sub", function (value) {
+            console.log(value);
+            _this.topTotal = 0
+            value.forEach(element => {
+                _this.topTotal += element
+            });
+        })
+        
+        emitter.on("cancel", function (value) {
+            console.log(value);
+            _this.topTotal = 0
+            value.forEach(element => {
+                _this.topTotal += element
+            });
+        })
+    },
+}
+</script>
+
+<style>
+.top {
+    width: 600px;
+    height: 80px;
+    margin: auto;
+    margin-top: 40px;
+    border-bottom: 1px lightgray solid;
+    display: flex;
+    line-height: 80px;
+    justify-content: space-between;
+}
+
+.title {
+    font-size: 18px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-weight: 1000;
+}
+
+#totalName {
+    font-size: 6px;
+}
+
+#totalValue {
+    font-weight: 600;
+}
+
+#symbol {
+    font-size: 6px;
+    font-weight: 600;
+}
+</style>
+
+
+
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconCommunity.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconDocumentation.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconEcosystem.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconSupport.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconTooling.vue" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/main.js" "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..01433bca2ac76590c48fabfee8d69d7b223f48bb
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\205\250\345\261\200\344\272\213\344\273\266\346\200\273\347\272\277/p/src/main.js"
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/index.html" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3431dc8e14c4f55c94e95144ceb046c1249dd20f
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/index.html"
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="https://gd-hbimg.huaban.com/7c705aa69989f646a7fc7fb960ff1da3d807a93a4ee8-u22RGa">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>插槽</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/App.vue" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3fe7bdc5d2082157da4f9e3659b0e7be5b070026
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/App.vue"
@@ -0,0 +1,130 @@
+<script>
+import right from './components/chacao/right.vue';
+
+export default {
+    components: {
+        right,
+    },
+    data: function () {
+        return {
+            html: ""
+        }
+    },
+    methods: {
+        change: function (index) {
+            switch (index) {
+                case 0:
+                    this.html = "<div class='text' style='width: 600px;height: 590px;background-color: #fff;border-radius: 10px;'></div>"
+                    break;
+                case 1:
+                    this.html = "<div class='text' style='width: 600px;height: 590px;background-color: blue;border-radius: 10px;'></div>"
+                    break;
+                case 2:
+                    this.html = "<div class='text' style='width: 600px;height: 590px;background-color: green;border-radius: 10px;'></div>"
+                    break;
+                case 3:
+                    this.html = "<div class='text' style='width: 600px;height: 590px;background-color: yellow;border-radius: 10px;'></div>"
+                    break;
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="main">
+        <div class="bigBox">
+            <div class="left">
+                <div class="title">...</div>
+                <div class="tab">
+
+                    <a href="#"><div class="btn" @click="change(0)">首页</div></a>
+                    <a href="#"><div class="btn" @click="change(1)">菜单一</div></a>
+                    <a href="#"><div class="btn" @click="change(2)">菜单二</div></a>
+                    <a href="#"><div class="btn" @click="change(3)">菜单三</div></a>
+
+                </div>
+            </div>
+            <div class="right">
+                <right v-html="html"></right>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+*{
+    list-style: none;
+    text-decoration: none;
+}
+.main {
+    width: 840px;
+    height: 620px;
+    margin: auto;
+    background-color: rgb(216, 231, 233);
+    box-shadow: lightgray 10px 10px 5px;
+}
+
+.bigBox {
+    width: 840px;
+    height: 620px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.left {
+    width: 180px;
+    height: 590px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: lightgray 3px 3px 3px;
+}
+
+.title {
+    width: 160px;
+    height: 80px;
+    border-bottom: 1px solid lightgray;
+    margin: auto;
+    line-height: 80px;
+    font-size: 30px;
+}
+
+.tab {
+    width: 180px;
+    height: 510px;
+    margin-top: 20px;
+}
+
+.btn {
+    width: 160px;
+    height: 40px;
+    line-height: 40px;
+    margin: auto;
+    margin-top: 10px;
+    color: black;
+}
+
+.btn:hover {
+    width: 160px;
+    height: 40px;
+    background-color: lightgray;
+    border-radius: 10px;
+    position: relative;
+    top: -3px;
+    left: 0;
+    box-shadow: 0px 5px 5px lightgray;
+}
+
+.right {
+    width: 600px;
+    height: 590px;
+    margin: auto;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: lightgray 3px 3px 3px;
+}
+</style>
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/assets/base.css" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/assets/base.css"
new file mode 100644
index 0000000000000000000000000000000000000000..71dc55a3cb5a72589496743a327c738ead3e1c83
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/assets/base.css"
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/assets/main.css" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/assets/main.css"
new file mode 100644
index 0000000000000000000000000000000000000000..e8667cd4508b6163e44e675ff899de1896544c84
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/assets/main.css"
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/chacao/right.vue" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/chacao/right.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..f9ee9c4cfee2bcbfdc193129d47509ae2230d872
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/chacao/right.vue"
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <solt></solt>
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style>
+    
+</style>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconCommunity.vue" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconDocumentation.vue" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconEcosystem.vue" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconSupport.vue" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconTooling.vue" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/main.js" "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..8461739fd10b7654f14c4c09e32e50fce3c9dbab
--- /dev/null
+++ "b/\344\275\234\344\270\232/\346\217\222\346\247\275/p/src/main.js"
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+
+createApp(App).mount('#app')
