docs: fix the problem of missing container component style (#453)

* docs(container): fix container composition demos fix #425 (#441) * docs: remove :::warning
opentiny · Aug 31, 2023 · bdbb188 · bdbb188
1 parent f4c5973
commit bdbb188
Show file tree

Hide file tree

Showing 9 changed files with 259 additions and 16 deletions.
diff --git a/examples/sites/demos/app/container/basic-usage-composition-api.vue b/examples/sites/demos/app/container/basic-usage-composition-api.vue
@@ -15,3 +15,38 @@
 <script setup lang="jsx">
 import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
 </script>
+
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>
diff --git a/examples/sites/demos/app/container/classic-composition-api.vue b/examples/sites/demos/app/container/classic-composition-api.vue
@@ -21,3 +21,45 @@ import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
 
 const pattern = ref('classic')
 </script>
+
+
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+
+.demo-container .tiny-container .main .changePattern .tiny-radio {
+  color: #a3a355;
+  font-size: 16px;
+  margin: 0 7px;
+}
+</style>
diff --git a/examples/sites/demos/app/container/custom-container-composition-api.vue b/examples/sites/demos/app/container/custom-container-composition-api.vue
@@ -51,3 +51,43 @@ const patternData = ref([
   }
 ])
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+
+.demo-container .tiny-container .main .changePattern .tiny-radio {
+  color: #a3a355;
+  font-size: 16px;
+  margin: 0 7px;
+}
+</style>
diff --git a/examples/sites/demos/app/container/custom-with-height-composition-api.vue b/examples/sites/demos/app/container/custom-with-height-composition-api.vue
@@ -29,3 +29,43 @@ const asideWidth = ref(200)
 const footerHeight = ref(80)
 const headerHeight = ref(80)
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+
+.demo-container .tiny-container .main .changePattern .tiny-radio {
+  color: #a3a355;
+  font-size: 16px;
+  margin: 0 7px;
+}
+</style>
diff --git a/examples/sites/demos/app/container/fashion-composition-api.vue b/examples/sites/demos/app/container/fashion-composition-api.vue
@@ -15,3 +15,37 @@
 <script setup lang="jsx">
 import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>
diff --git a/examples/sites/demos/app/container/legend-composition-api.vue b/examples/sites/demos/app/container/legend-composition-api.vue
@@ -18,3 +18,37 @@
 <script setup lang="jsx">
 import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>
diff --git a/examples/sites/demos/app/container/simple-composition-api.vue b/examples/sites/demos/app/container/simple-composition-api.vue
@@ -12,3 +12,37 @@
 <script setup lang="jsx">
 import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>
diff --git a/examples/sites/demos/webdoc/envpreparation-open-en.md b/examples/sites/demos/webdoc/envpreparation-open-en.md
@@ -2,12 +2,8 @@
 
 TinyVue is a`Vue`UI component library, which can also support`Vue 2.0`and`Vue 3.0`.
 
-:::warning
-
 Browser compatibility`TinyVue`The latest versions of mainstream browsers are supported: Chrome, Edge, Firefox, Opera, and Safari. No longer supported`Internet Explorer`.
 
-:::
-
 ### Installing Node.js
 
 Recommended Installation`v16.13.0`version, if the local`Node.js`, run the following command to check whether the version is correct:
@@ -24,8 +20,4 @@ management`npm`There are two main tools for the package. One is the installation
 npm install -g yarn
 ```
 
-:::warning
-
 Selection of Package Manager`yarn`and`npm`You are advised to use only one package manager to avoid problems such as upgrade failure during installation.
-
-:::
diff --git a/examples/sites/demos/webdoc/envpreparation-open.md b/examples/sites/demos/webdoc/envpreparation-open.md
@@ -2,12 +2,8 @@
 
 TinyVue 是一个基于 `Vue` 的 UI 组件库，可以同时支持 `Vue 2.0` 和 `Vue 3.0`。
 
-:::warning
-
 浏览器兼容性 `TinyVue` 支持主流浏览器的最新版本：Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器
 
-:::
-
 ### 安装 Node.js
 
 推荐安装 `v16.13.0` 及以上版本，如果本地已经安装了 `Node.js`，可以通过以下命令检查版本是否正确：
@@ -24,8 +20,4 @@ node -v
 npm install -g yarn
 ```
 
-:::warning
-
 包管理器的选择 `yarn` 和 `npm` 建议只选择使用一种包管理器，以免在安装过程中出现无法升级依赖包等问题。
-
-:::