fix

gouzil · Feb 5, 2021 · 2555f19 · 2555f19
1 parent be3fc94
commit 2555f19
Show file tree

Hide file tree

Showing 7 changed files with 505 additions and 3 deletions.
diff --git a/packages/sparrow-client/src/components/CssPanel/CssItem.vue b/packages/sparrow-client/src/components/CssPanel/CssItem.vue
@@ -27,6 +27,7 @@ export default {
     width: 80px;
   }
   &__body {
+    flex: 1;
   }
 }
 </style>
diff --git a/packages/sparrow-client/src/components/CssPanel/Font/index.vue b/packages/sparrow-client/src/components/CssPanel/Font/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <css-item label="字符">
+      <div>
+        <div>
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in fontWeightOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <el-input-number
+            v-model="num"
+            controls-position="right"
+            :min="0"
+            :max="1000"
+          ></el-input-number>
+        </div>
+        <div>
+          <el-input 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>
+        </div>
+      </div>
+    </css-item>
+    <css-item label="透明度">
+      <div>
+        <el-slider min="0" max="100" v-model="fontForm.opacity" show-input> </el-slider>
+      </div>
+    </css-item>
+  </div>
+</template>
+<script>
+import CssItem from '../CssItem';
+import { Chrome } from 'vue-color';
+
+export default {
+  components: {
+    CssItem,
+    ChromePicker: Chrome
+  },
+  data() {
+    return {
+      fontForm: {
+        fontWeight: '',
+        fontSize: '',
+        color: '#000000',
+        lineHeight: '',
+        textAlign: '',
+        verticalAlign: '',
+        opacity: 1
+      },
+      fontWeightOptions: [
+        {
+          value: 'normal',
+          label: '正常'
+        },
+        {
+          value: 'bold',
+          label: '粗体'
+        },
+        {
+          value: 'lighter',
+          label: '细体'
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="scss" scoped></style>
diff --git a/packages/sparrow-client/src/components/CssPanel/Layout/index.vue b/packages/sparrow-client/src/components/CssPanel/Layout/index.vue
@@ -12,6 +12,38 @@
     <css-item>
       <box-model :boxModelForm="boxModelForm" @change="boxModelChange"/>
     </css-item>
+    <css-item label="主轴方向">
+      <s-radio-group
+        :value="cssForm.display"
+        :list="flexDirectionList"
+        @change="layoutStyleChange('display', $event)"
+      />
+    </css-item>
+
+    <css-item label="主轴对齐">
+       <s-radio-group
+        :value="cssForm.display"
+        :list="justifyContentList"
+        @change="layoutStyleChange('display', $event)"
+      />
+    </css-item>
+
+    <css-item label="辅轴对齐">
+      <s-radio-group
+        :value="cssForm.display"
+        :list="alignItemsList"
+        @change="layoutStyleChange('display', $event)"
+      />
+    </css-item>
+
+    <css-item label="换行">
+      <s-radio-group
+        :value="cssForm.display"
+        :list="flexWrapList"
+        @change="layoutStyleChange('display', $event)"
+      />
+    </css-item>
+
     <css-item>
       <size />
     </css-item>

diff --git a/packages/sparrow-client/src/components/CssPanel/Location/index.vue b/packages/sparrow-client/src/components/CssPanel/Location/index.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <css-item label="定位类型">
+      <el-select v-model="locationForm.position" clearable placeholder="请选择">
+        <el-option
+          v-for="item in positionOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </css-item>
+    <css-item>
+      <position-model></position-model>
+    </css-item>
+    <css-item label="清除位置">
+      <el-input-number
+        v-model="locationForm.zIndex"
+        controls-position="right"
+      ></el-input-number>
+    </css-item>
+    <css-item label="浮动">
+      <s-radio-group :list="floatList"></s-radio-group>
+    </css-item>
+    <css-item label="清除浮动">
+      <s-radio-group :list="clearList"></s-radio-group>
+    </css-item>
+  </div>
+</template>
+<script>
+import CssItem from '../CssItem';
+import SRadioGroup from '../RadioGroup';
+import PositionModel from '../PositionModel';
+import CssItem from '../CssItem.vue';
+import CssItem from '../CssItem.vue';
+
+export default {
+  components: {
+    CssItem,
+    SRadioGroup,
+    PositionModel
+    CssItem
+    CssItem
+  },
+  data() {
+    return {
+      locationForm: {
+        position: '',
+        zIndex: '',
+        float: '',
+        clear: ''
+      },
+      positionOptions: [
+        {
+          label: '无定位 Static',
+          value: 'static'
+        },
+        {
+          label: '相对定位 Relative',
+          value: 'relative'
+        },
+        {
+          label: '绝对定位 Absolute',
+          value: 'absolute'
+        },
+        {
+          label: '固定定位 Fixed',
+          value: 'fixed'
+        },
+        {
+          label: '粘性定位 sticky',
+          value: 'sticky'
+        }
+      ],
+      floatList: [
+        {
+          label: 'none',
+          icon: '',
+          value: 'none',
+        },
+        {
+          label: 'left',
+          icon: '',
+          value: 'left',
+        },
+        {
+          label: 'right',
+          icon: '',
+          value: 'right',
+        }
+      ],
+      clearList: [
+        {
+          label: 'none',
+          icon: '',
+          value: 'none',
+        },
+        {
+          label: 'left',
+          icon: '',
+          value: 'left',
+        },
+        {
+          label: 'right',
+          icon: '',
+          value: 'right',
+        },
+        {
+          label: 'both',
+          icon: '',
+          value: 'both',
+        },
+      ]
+    };
+  }
+};
+</script>