From 2555f19ed19ce4b3224f85a2fdd91e36583006b3 Mon Sep 17 00:00:00 2001
From: Haitao Wu <sparrowwht7@gmail.com>
Date: Fri, 5 Feb 2021 20:33:47 +0800
Subject: [PATCH] fix

---
 .../src/components/CssPanel/CssItem.vue       |   1 +
 .../src/components/CssPanel/Font/index.vue    |  80 ++++++
 .../src/components/CssPanel/Layout/index.vue  |  32 +++
 .../components/CssPanel/Location/index.vue    | 118 ++++++++
 .../CssPanel/PositionModel/index.vue          | 259 ++++++++++++++++++
 .../src/components/CssPanel/index.vue         |  12 +-
 packages/sparrow-view/src/views/index.vue     |   6 +-
 7 files changed, 505 insertions(+), 3 deletions(-)
 create mode 100644 packages/sparrow-client/src/components/CssPanel/Font/index.vue
 create mode 100644 packages/sparrow-client/src/components/CssPanel/Location/index.vue
 create mode 100644 packages/sparrow-client/src/components/CssPanel/PositionModel/index.vue

diff --git a/packages/sparrow-client/src/components/CssPanel/CssItem.vue b/packages/sparrow-client/src/components/CssPanel/CssItem.vue
index 2405a8a4..558aac4a 100644
--- 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
new file mode 100644
index 00000000..8f32fac5
--- /dev/null
+++ 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
index 9785e097..1d548c7e 100644
--- 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
new file mode 100644
index 00000000..e9be0e10
--- /dev/null
+++ 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>
diff --git a/packages/sparrow-client/src/components/CssPanel/PositionModel/index.vue b/packages/sparrow-client/src/components/CssPanel/PositionModel/index.vue
new file mode 100644
index 00000000..a7d4f917
--- /dev/null
+++ b/packages/sparrow-client/src/components/CssPanel/PositionModel/index.vue
@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <div class="quick-list">
+      <el-tooltip
+        v-for="item in quickList"
+        :key="item.value"
+        class="item"
+        effect="dark"
+        :content="item.label"
+        placement="top"
+      >
+        <div class="quick-item"></div>
+      </el-tooltip>
+    </div>
+    <div class="luna-comp luna-position-space luna-position-space" id="space">
+      <div style="position: relative; height: 100px;">
+        <div class="top-div">
+          <span class="next-input next-medium next-noborder top-input"
+            ><input
+              placeholder="auto"
+              maxlength="6"
+              height="100%"
+              autocomplete="off"
+              value=""
+              data-spm-anchor-id="0.appIde.0.i86.484f6a5b2Jh4KW"
+          /></span>
+        </div>
+        <div class="right-div">
+          <span class="next-input next-medium next-noborder right-input"
+            ><input
+              placeholder="auto"
+              maxlength="6"
+              height="100%"
+              autocomplete="off"
+              value=""
+          /></span>
+        </div>
+        <div class="bottom-div">
+          <span class="next-input next-medium next-noborder bottom-input"
+            ><input
+              placeholder="auto"
+              maxlength="6"
+              height="100%"
+              autocomplete="off"
+              value=""
+          /></span>
+        </div>
+        <div class="left-div">
+          <span class="next-input next-medium next-noborder left-input"
+            ><input
+              placeholder="auto"
+              maxlength="6"
+              height="100%"
+              autocomplete="off"
+              value=""
+          /></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      quickList: [
+        {
+          label: '左上',
+          value: 'left-top'
+        },
+        {
+          label: '右上',
+          value: 'right-top'
+        },
+        {
+          label: '左下',
+          value: 'left-bottom'
+        },
+        {
+          label: '右下',
+          value: 'right-bottom'
+        },
+        {
+          label: '靠左',
+          value: 'left'
+        },
+        {
+          label: '靠右',
+          value: 'right'
+        },
+        {
+          label: '靠上',
+          value: 'top'
+        },
+        {
+          label: '靠下',
+          value: 'bottom'
+        },
+        {
+          label: '居中',
+          value: 'center'
+        }
+      ]
+    };
+  }
+};
+</script>
+<style lang="scss" scoped>
+.quick-list {
+  .quick-item {
+  }
+}
+
+.luna-position-space .top-div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-top: 30px solid #d6e4ff;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.luna-position-space .top-div:hover {
+  border-top: 30px solid #bfd4fb;
+}
+
+.luna-position-space .top-div .next-input.next-medium {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -30px;
+  height: 30px !important;
+  background: transparent;
+}
+
+.luna-position-space .top-div .next-input.next-medium input {
+  text-align: center;
+  line-height: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+.luna-position-space .bottom-div {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-bottom: 30px solid #d6e4ff;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.luna-position-space .bottom-div:hover {
+  border-bottom: 30px solid #bfd4fb;
+}
+
+.luna-position-space .bottom-div .next-input.next-medium {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -30px;
+  height: 30px !important;
+  background: transparent;
+}
+
+.luna-position-space .bottom-div .next-input.next-medium input {
+  text-align: center;
+  line-height: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+.luna-position-space .left-div {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 0;
+  width: 0;
+  border-top: 30px solid transparent;
+  border-bottom: 30px solid transparent;
+  border-left: 30px solid #d6e4ff;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.luna-position-space .left-div:hover {
+  border-left: 30px solid #bfd4fb;
+}
+
+.luna-position-space .left-div .next-input.next-medium {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -30px;
+  width: 30px;
+  margin: auto;
+  background: transparent;
+}
+
+.luna-position-space .left-div .next-input.next-medium input {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -15px;
+  margin: auto;
+  width: 60px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  padding: 0 13px;
+}
+
+.luna-position-space .right-div {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  right: 0;
+  width: 0;
+  border-top: 30px solid transparent;
+  border-bottom: 30px solid transparent;
+  border-right: 30px solid #d6e4ff;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.luna-position-space .right-div:hover {
+  border-right: 30px solid #bfd4fb;
+}
+
+.luna-position-space .right-div .next-input.next-medium {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -30px;
+  width: 30px;
+  margin: auto;
+  background: transparent;
+}
+
+.luna-position-space .right-div .next-input.next-medium input {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -15px;
+  margin: auto;
+  width: 60px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  padding: 0 13px;
+}
+</style>
diff --git a/packages/sparrow-client/src/components/CssPanel/index.vue b/packages/sparrow-client/src/components/CssPanel/index.vue
index eebabc81..75cda957 100644
--- a/packages/sparrow-client/src/components/CssPanel/index.vue
+++ b/packages/sparrow-client/src/components/CssPanel/index.vue
@@ -1,13 +1,23 @@
 <template>
   <div>
     <layout />
+    <div>
+      <font />
+    </div>
+    <div>
+      <location />
+    </div>
   </div>
 </template>
 <script>
 import Layout from './Layout';
+import Font from './Font';
+import Location from './Location';
 export default {
   components: {
-    Layout
+    Layout,
+    Font,
+    Location
   }
 };
 </script>
diff --git a/packages/sparrow-view/src/views/index.vue b/packages/sparrow-view/src/views/index.vue
index 4162e313..974a7dcd 100644
--- a/packages/sparrow-view/src/views/index.vue
+++ b/packages/sparrow-view/src/views/index.vue
@@ -1,9 +1,11 @@
 <template>
   <div
     class="home drag-box"
-    data-id="53e29c9b"
+    data-id="ebd8a088"
     style="backgroundImage: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dded9db02e3f4052bbf451f04d3d9b5b~tplv-k3u1fbpfcp-zoom-1.image);"
-  />
+  >
+    <div />
+  </div>
 </template>
 
 <script>