dev：css panel

Youngdo1996 · Feb 8, 2021 · 36ba274 · 36ba274
1 parent 33e9422
commit 36ba274
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 44 deletions.
diff --git a/packages/sparrow-client/src/App.vue b/packages/sparrow-client/src/App.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <css-panel />
     <el-container class="container">
       <el-header height="45px">
         <top-toolbar></top-toolbar>
@@ -48,7 +47,6 @@ import { SettingModule } from '@/store/modules/setting';
 import CompBox from '@/components/materiel/CompBox/index.vue';
 import JsonEditor from '@/components/JsonEditor/index.vue';
 import _ from 'lodash';
-import CssPanel from '@/components/CssPanel/index.vue';
 @Component({
   components: {
     Logo,
@@ -57,7 +55,6 @@ import CssPanel from '@/components/CssPanel/index.vue';
     Setting,
     CompBox,
     JsonEditor,
-    CssPanel
   }
 })
 export default class App extends Vue {

diff --git a/packages/sparrow-client/src/components/CssPanel/Background/index.vue b/packages/sparrow-client/src/components/CssPanel/Background/index.vue
@@ -4,7 +4,7 @@
       <s-radio-group :list="backgroundTypeList"></s-radio-group>
     </css-item>
     <css-item>
-      <el-input placeholder="请输入内容" v-model="input2">
+      <el-input size="mini" placeholder="请输入内容" v-model="input2">
         <template slot="append">
           <el-popover placement="bottom" width="225" trigger="click">
             <chrome-picker
@@ -17,6 +17,7 @@
     </css-item>
     <css-item>
       <el-input
+        size="mini" 
         placeholder="请输入URL"
         v-model="backgroundForm.backgroundImage"
       ></el-input>

diff --git a/packages/sparrow-client/src/components/CssPanel/Border/index.vue b/packages/sparrow-client/src/components/CssPanel/Border/index.vue
@@ -12,23 +12,23 @@
     <css-item class="边框">
       <border-model />
     </css-item>
-    <css-item class="阴影">
-      <s-radio-group :list="shadowList" />
-    </css-item>
+    <shadow />
   </div>
 </template>
 <script>
 import SRadioGroup from '../RadioGroup';
 import CssItem from '../CssItem';
 import BorderModel from '../BorderModel';
 import BorderRadius from '../BorderRadius';
+import Shadow from '../Shadow';
 
 export default {
   components: {
     SRadioGroup,
     BorderModel,
     CssItem,
-    BorderRadius
+    BorderRadius,
+    Shadow
   },
   data() {
     return {
@@ -53,18 +53,6 @@ export default {
           value: ''
         }
       ],
-      shadowList: [
-        {
-          label: '外阴影',
-          icon: '',
-          value: ''
-        },
-        {
-          label: '内阴影',
-          icon: '',
-          value: 'inset'
-        }
-      ]
     };
   }
 };

diff --git a/packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue b/packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue
@@ -36,10 +36,10 @@
       </el-col>
       <el-col :span="12">
         <div>
-          <el-input-number controls-position="right"></el-input-number>
+          <el-input-number size="mini" controls-position="right"></el-input-number>
         </div>
         <div>
-          <el-input placeholder="请输入内容" v-model="input2">
+          <el-input size="mini" placeholder="请输入内容" v-model="input2">
             <template slot="append">
               <el-popover placement="bottom" width="225" trigger="click">
                 <chrome-picker

diff --git a/packages/sparrow-client/src/components/CssPanel/Font/index.vue b/packages/sparrow-client/src/components/CssPanel/Font/index.vue
@@ -3,7 +3,7 @@
     <css-item label="字符">
       <div>
         <div>
-          <el-select v-model="value" placeholder="请选择">
+          <el-select size="mini" v-model="value" placeholder="请选择">
             <el-option
               v-for="item in fontWeightOptions"
               :key="item.value"
@@ -13,28 +13,29 @@
             </el-option>
           </el-select>
           <el-input-number
+            size="mini"
             v-model="num"
             controls-position="right"
             :min="0"
             :max="1000"
           ></el-input-number>
         </div>
         <div>
-          <el-input placeholder="请输入内容" v-model="input2">
+          <el-input size="mini" placeholder="请输入内容" v-model="input2">
             <template slot="append">
               <el-popover placement="bottom" width="225" trigger="click">
                 <chrome-picker v-model="fontForm.color"></chrome-picker>
                 <span slot="reference">color</span>
               </el-popover>
             </template>
           </el-input>
-          <el-input v-model="fontForm.lineHeight" placeholder="行距"></el-input>
+          <el-input size="mini" v-model="fontForm.lineHeight" placeholder="行距"></el-input>
         </div>
       </div>
     </css-item>
     <css-item label="透明度">
       <div>
-        <el-slider min="0" max="100" v-model="fontForm.opacity" show-input> </el-slider>
+        <el-slider size="mini" min="0" max="100" v-model="fontForm.opacity" show-input> </el-slider>
       </div>
     </css-item>
   </div>

diff --git a/packages/sparrow-client/src/components/CssPanel/Location/index.vue b/packages/sparrow-client/src/components/CssPanel/Location/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <css-item label="定位类型">
-      <el-select v-model="locationForm.position" clearable placeholder="请选择">
+      <el-select size="mini" v-model="locationForm.position" clearable placeholder="请选择">
         <el-option
           v-for="item in positionOptions"
           :key="item.value"
@@ -16,6 +16,7 @@
     </css-item>
     <css-item label="清除位置">
       <el-input-number
+        size="mini"
         v-model="locationForm.zIndex"
         controls-position="right"
       ></el-input-number>

diff --git a/packages/sparrow-client/src/components/CssPanel/RadioGroup/index.vue b/packages/sparrow-client/src/components/CssPanel/RadioGroup/index.vue
@@ -46,7 +46,7 @@ export default {
   flex-direction: row;
   .radio-item{
     border: 1px solid #dcdfe6;
-    min-width: 36px;
+    flex: 1;
     height: 28px;
     margin: 0 0 0 -1px;
     display: flex;

diff --git a/packages/sparrow-client/src/components/CssPanel/Shadow/index.vue b/packages/sparrow-client/src/components/CssPanel/Shadow/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <css-item label="阴影">
+      <div>
+        <s-radio-group :list="shadowList" />
+      </div>
+      <div>
+        <el-input placeholder="请输入内容" v-model="input2">
+          <template slot="append">
+            <el-popover placement="bottom" width="225" trigger="click">
+              <chrome-picker
+                v-model="borderForm.backgroundColor"
+              ></chrome-picker>
+              <span slot="reference">color</span>
+            </el-popover>
+          </template>
+        </el-input>
+      </div>
+      <div>
+        <div>
+          <css-item label="X">
+            <el-input-number controls-position="right"></el-input-number>
+          </css-item>
+        </div>
+        <div>
+          <css-item label="Y">
+            <el-input-number controls-position="right"></el-input-number>
+          </css-item>
+        </div>
+        <div>
+          <css-item label="模糊">
+            <el-input-number controls-position="right"></el-input-number>
+          </css-item>
+        </div>
+        <div>
+          <css-item label="扩展">
+            <el-input-number controls-position="right"></el-input-number>
+          </css-item>
+        </div>
+      </div>
+    </css-item>
+  </div>
+</template>
+<script>
+import SRadioGroup from '../RadioGroup';
+import { Chrome } from 'vue-color';
+
+export default {
+  components: {
+    SRadioGroup,
+    ChromePicker: Chrome
+  },
+  data() {
+    return {
+      shadowList: [
+        {
+          label: '外阴影',
+          icon: '',
+          value: ''
+        },
+        {
+          label: '内阴影',
+          icon: '',
+          value: 'inset'
+        }
+      ]
+    };
+  }
+};
+</script>
diff --git a/packages/sparrow-client/src/components/CssPanel/index.vue b/packages/sparrow-client/src/components/CssPanel/index.vue
@@ -1,18 +1,22 @@
 <template>
   <div class="css-panel">
-    <layout />
-    <div>
-      <font />
-    </div>
-    <div>
-      <location />
-    </div>
-    <div>
-      <background />
-    </div>
-    <div>
-      <border />
-    </div>
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <el-collapse-item title="布局" name="1">
+        <layout />
+      </el-collapse-item>
+      <el-collapse-item title="文字" name="2">
+        <font />
+      </el-collapse-item>
+      <el-collapse-item title="定位" name="3">
+        <location />
+      </el-collapse-item>
+      <el-collapse-item title="背景" name="4">
+        <background />
+      </el-collapse-item>
+      <el-collapse-item title="边框" name="5">
+        <border />
+      </el-collapse-item>
+    </el-collapse>
   </div>
 </template>
 <script>
@@ -28,11 +32,17 @@ export default {
     Location,
     Background,
     Border
+  },
+  data() {
+    return {
+      activeNames: ['1', '2', '3', '4', '5', '6']
+    };
   }
 };
 </script>
 <style lang="scss" scoped>
 .css-panel{
-  width: 300px;
+  overflow: scroll;
+  height: 100%;
 }
 </style>
diff --git a/packages/sparrow-client/src/components/setting/Toolbox.vue b/packages/sparrow-client/src/components/setting/Toolbox.vue
@@ -119,6 +119,10 @@
           删除
         </div>
       </el-tab-pane>
+      <el-tab-pane label="样式" class="widget-collapse" name="style">
+        <css-panel />
+      </el-tab-pane>
+
     </el-tabs>
 
     <div>
@@ -197,10 +201,12 @@ import { AppModule } from '@/store/modules/app';
 import FormSetting from './FormSetting';
 import Sortable from 'sortablejs';
 import html2canvas from 'html2canvas';
+import CssPanel from '@/components/CssPanel/index.vue';
 
 export default {
   components: {
-    FormSetting
+    FormSetting,
+    CssPanel
   },
   data() {
     return {
@@ -596,7 +602,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .toolbox {
-  width: 280px;
+  width: 320px;
   padding-right: 10px;
   height: 100%;
 }