From 1c38575558b66262198172bc11c9f772faaa22e0 Mon Sep 17 00:00:00 2001
From: pengYYY <pengyue970715@gmail.com>
Date: Tue, 21 Dec 2021 19:36:54 +0800
Subject: [PATCH] fix: codesandbox import style bug

---
 site/src/App.vue                          | 21 ----------
 site/src/components/codesandbox/index.vue | 47 ++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/site/src/App.vue b/site/src/App.vue
index 41466db08..98240aef8 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -1,24 +1,3 @@
 <template>
   <router-view />
 </template>
-
-<style lang="less">
-.action-online {
-  width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  transition: all 0.2s linear;
-  cursor: pointer;
-  border-radius: 3px;
-  color: var(--text-secondary);
-
-  &:hover {
-    color: var(--text-primary);
-    background-color: var(--bg-color-demo-hover, rgb(243, 243, 243));
-  }
-}
-</style>
diff --git a/site/src/components/codesandbox/index.vue b/site/src/components/codesandbox/index.vue
index 2ec079446..491d749f8 100644
--- a/site/src/components/codesandbox/index.vue
+++ b/site/src/components/codesandbox/index.vue
@@ -23,7 +23,29 @@
 import pkg from '@/package.json';
 import packageJSON from './package.json';
 import mainJsContent from './main.js?raw';
-import styleContent from './index.css?raw';
+
+const styleContent = `
+/* 竖排展示 demo 行间距 16px */
+.tdesign-demo-block-column {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+}
+
+/* 竖排展示 demo 行间距 32px */
+.tdesign-demo-block-column-large {
+  display: flex;
+  flex-direction: column;
+  row-gap: 32px;
+}
+
+/* 横排排展示 demo 列间距 16px */
+.tdesign-demo-block-row {
+  display: flex;
+  column-gap: 16px;
+  align-items: center;
+}
+`;
 
 packageJSON.dependencies['tdesign-vue'] = pkg.version;
 packageJSON.dependencies['tdesign-icons-vue'] = pkg.dependencies['tdesign-icons-vue'];
@@ -36,7 +58,7 @@ function getDemoContent(demoContent) {
 }
 
 export default {
-  name: "code-sandbox",
+  name: 'code-sandbox',
   props: {
     code: String,
     demoName: String,
@@ -90,3 +112,24 @@ export default {
   },
 };
 </script>
+
+<style lang="less">
+.action-online {
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  transition: all 0.2s linear;
+  cursor: pointer;
+  border-radius: 3px;
+  color: var(--text-secondary);
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-color-demo-hover, rgb(243, 243, 243));
+  }
+}
+</style>