openatc-components 0.0.1 → 0.0.2

package/package/kisscomps/components/compass3D/compass.vue

@@ -1,180 +1,180 @@
-<template>
-   <div class="camera" ref='cubewraper'>
-      <div class="space" ref='cube'
-        @mousedown="onmousedown"
-        @mousemove="onmousemove"
-        @mouseup="onmouseup"
-        @mousewheel="onmousewheel"
-        @dblclick="doubleclick">
-        <div class="box1" >
-          <div class="face1"></div>
-          <div class="face2"></div>
-          <div class="face3"></div>
-          <div class="face4"></div>
-        </div>
-        <div class="box2">
-          <div class="face1"></div>
-          <div class="face2"></div>
-          <div class="face3"></div>
-          <div class="face4"></div>
-        </div>
-      </div>
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'kiss-compass',
-  data () {
-    return {
-      downX: 0,
-      downY: 0,
-      moveX: 0,
-      moveY: 0,
-      tempX: 0,
-      tempY: 0,
-      degX: 0,
-      degY: 0,
-      isMouseDown: false
-    }
-  },
-  methods: {
-    doTrag () {
-      setTimeout(function () {
-      }, 5000)
-    },
-    onmousedown (e) {
-      console.log('onmousedowm')
-      this.isMouseDown = true
-      e = e || event
-      this.downX = e.clientX // 获取鼠标点下去时的坐标
-      this.downY = e.clientY
-      // this.onmousemove(e)
-    },
-    onmousemove (e) {
-      console.log('onmousemove')
-      if (this.isMouseDown) {
-        e = e || event
-        this.moveX = e.clientX - this.downX // 算出鼠标移动的距离
-        this.moveY = e.clientY - this.downY
-        // 根据一定比例将变化反应在盒子上，改变比例5可以调节拖动的速度
-        this.tempX = this.degX + this.moveX * 5
-        this.tempY = this.degY - this.moveY * 5
-        this.$refs.cube.style.transform = 'rotatex(' + this.tempY + 'deg) rotatey(' + this.tempX + 'deg)'
-        this.$emit('rotateAndPitch', this.tempX, this.tempY)
-      }
-    },
-    onmouseup (e) {
-      console.log('onmouseup')
-      this.isMouseDown = false
-      e = e || event
-      this.degX += this.moveX * 5 // 鼠标松开时将拖动期间改变的最终结果保存
-      this.degY += -this.moveY * 5
-    },
-    onmousewheel (e) {
-      console.log('onmousewheel')
-    },
-    doubleclick (e) {
-      console.log('double click')
-      this.$emit('signalClick', e)
-      this.$refs.cube.style.transform = 'rotatex(0deg) rotatey(0deg)'
-    }
-  }
-}
-</script>
-
-<style scoped>
-.camera{
-  width: 30px;
-  height: 30px;
-  perspective-origin: 50% -50%;
-  -webkit-perspective-origin: 50% -50%;
-  perspective:2000px;
-  -webkit-perspective:2000px;
-}
-.space{
-  position:relative;
-  width:100%;
-  height:100%;
-  transform-style:preserve-3d;
-  -moz-transform-style:preserve-3d;
-  -webkit-transform-style:preserve-3d;
-  transform: rotateY(0deg) rotateX(0deg);
-  transform-origin:center center -10px;
-  -moz-transform-origin:center center -10px;
-  -webkit-transform-origin:center center -10px;
-}
-
-.space div{
-  position:absolute;
-}
-.box1, .box2{
-  transform-style:preserve-3d;
-  -moz-transform-style:preserve-3d;
-  -webkit-transform-style:preserve-3d;
-}
-.box1 div,.box2 div{
-  width:0;
-  height:0;
-  border-width:0 10px 20px;
-  border-style:solid;
-  opacity:.4;
-}
-.box2{
-  transform-origin: center 17px -10px;
-  transform: rotateX(180deg) translateY(-25px);
-  -moz-transform-origin: center 17px -10px;
-  -moz-transform: rotateX(180deg) translateY(-25px);
-  -webkit-transform-origin: center 17px -10px;
-  -webkit-transform: rotateX(180deg) translateY(-25px);
-}
-.face1{
-  border-color:transparent transparent #41d3f7;
-  transform-origin:center bottom;
-  transform:translateX(10px) translateY(10px) rotateX(35.36deg);
-  -moz-transform-origin:center bottom;
-  -moz-transform:translateX(10px) translateY(10px) rotateX(35.36deg);
-  -webkit-transform-origin:center bottom;
-  -webkit-transform:translateX(10px) translateY(10px) rotateX(35.36deg);
-}
-.face2{
-  border-color:transparent transparent #173d47;
-  transform-origin:right bottom;
-  transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
-  -moz-transform-origin:right bottom;
-  -moz-transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
-  -webkit-transform-origin:right bottom;
-  -webkit-transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
-}
-.face3{
-  border-color:transparent transparent #1b748a;
-  transform-origin:left bottom;
-  transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
-  -moz-transform-origin:left bottom;
-  -moz-transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
-  -webkit-transform-origin:left bottom;
-  -webkit-transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
-}
-.face4{
-  border-color:transparent transparent #1c96b8;
-  transform-origin:left bottom;
-  transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
-  -moz-transform-origin:left bottom;
-  -moz-transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
-  -webkit-transform-origin:left bottom;
-  -webkit-transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
-}
-.box2 .face1{
-  border-color:transparent transparent #142f36;
-}
-.box2 .face2{
-  border-color:transparent transparent #724e01;
-}
-.box2 .face3{
-  border-color:transparent transparent yellow;
-}
-.box2 .face4{
-  border-color:transparent transparent #154d5c;
-}
-
-</style>
+<template>
+   <div class="camera" ref='cubewraper'>
+      <div class="space" ref='cube'
+        @mousedown="onmousedown"
+        @mousemove="onmousemove"
+        @mouseup="onmouseup"
+        @mousewheel="onmousewheel"
+        @dblclick="doubleclick">
+        <div class="box1" >
+          <div class="face1"></div>
+          <div class="face2"></div>
+          <div class="face3"></div>
+          <div class="face4"></div>
+        </div>
+        <div class="box2">
+          <div class="face1"></div>
+          <div class="face2"></div>
+          <div class="face3"></div>
+          <div class="face4"></div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'kiss-compass',
+  data () {
+    return {
+      downX: 0,
+      downY: 0,
+      moveX: 0,
+      moveY: 0,
+      tempX: 0,
+      tempY: 0,
+      degX: 0,
+      degY: 0,
+      isMouseDown: false
+    }
+  },
+  methods: {
+    doTrag () {
+      setTimeout(function () {
+      }, 5000)
+    },
+    onmousedown (e) {
+      console.log('onmousedowm')
+      this.isMouseDown = true
+      e = e || event
+      this.downX = e.clientX // 获取鼠标点下去时的坐标
+      this.downY = e.clientY
+      // this.onmousemove(e)
+    },
+    onmousemove (e) {
+      console.log('onmousemove')
+      if (this.isMouseDown) {
+        e = e || event
+        this.moveX = e.clientX - this.downX // 算出鼠标移动的距离
+        this.moveY = e.clientY - this.downY
+        // 根据一定比例将变化反应在盒子上，改变比例5可以调节拖动的速度
+        this.tempX = this.degX + this.moveX * 5
+        this.tempY = this.degY - this.moveY * 5
+        this.$refs.cube.style.transform = 'rotatex(' + this.tempY + 'deg) rotatey(' + this.tempX + 'deg)'
+        this.$emit('rotateAndPitch', this.tempX, this.tempY)
+      }
+    },
+    onmouseup (e) {
+      console.log('onmouseup')
+      this.isMouseDown = false
+      e = e || event
+      this.degX += this.moveX * 5 // 鼠标松开时将拖动期间改变的最终结果保存
+      this.degY += -this.moveY * 5
+    },
+    onmousewheel (e) {
+      console.log('onmousewheel')
+    },
+    doubleclick (e) {
+      console.log('double click')
+      this.$emit('signalClick', e)
+      this.$refs.cube.style.transform = 'rotatex(0deg) rotatey(0deg)'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.camera{
+  width: 30px;
+  height: 30px;
+  perspective-origin: 50% -50%;
+  -webkit-perspective-origin: 50% -50%;
+  perspective:2000px;
+  -webkit-perspective:2000px;
+}
+.space{
+  position:relative;
+  width:100%;
+  height:100%;
+  transform-style:preserve-3d;
+  -moz-transform-style:preserve-3d;
+  -webkit-transform-style:preserve-3d;
+  transform: rotateY(0deg) rotateX(0deg);
+  transform-origin:center center -10px;
+  -moz-transform-origin:center center -10px;
+  -webkit-transform-origin:center center -10px;
+}
+
+.space div{
+  position:absolute;
+}
+.box1, .box2{
+  transform-style:preserve-3d;
+  -moz-transform-style:preserve-3d;
+  -webkit-transform-style:preserve-3d;
+}
+.box1 div,.box2 div{
+  width:0;
+  height:0;
+  border-width:0 10px 20px;
+  border-style:solid;
+  opacity:.4;
+}
+.box2{
+  transform-origin: center 17px -10px;
+  transform: rotateX(180deg) translateY(-25px);
+  -moz-transform-origin: center 17px -10px;
+  -moz-transform: rotateX(180deg) translateY(-25px);
+  -webkit-transform-origin: center 17px -10px;
+  -webkit-transform: rotateX(180deg) translateY(-25px);
+}
+.face1{
+  border-color:transparent transparent #41d3f7;
+  transform-origin:center bottom;
+  transform:translateX(10px) translateY(10px) rotateX(35.36deg);
+  -moz-transform-origin:center bottom;
+  -moz-transform:translateX(10px) translateY(10px) rotateX(35.36deg);
+  -webkit-transform-origin:center bottom;
+  -webkit-transform:translateX(10px) translateY(10px) rotateX(35.36deg);
+}
+.face2{
+  border-color:transparent transparent #173d47;
+  transform-origin:right bottom;
+  transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
+  -moz-transform-origin:right bottom;
+  -moz-transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
+  -webkit-transform-origin:right bottom;
+  -webkit-transform:translateX(10px) translateY(10px) rotateY(-90deg) rotateX(-35.36deg);
+}
+.face3{
+  border-color:transparent transparent #1b748a;
+  transform-origin:left bottom;
+  transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
+  -moz-transform-origin:left bottom;
+  -moz-transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
+  -webkit-transform-origin:left bottom;
+  -webkit-transform:translateX(10px) translateY(10px)  translateZ(-20px) rotateX(-35.36deg);
+}
+.face4{
+  border-color:transparent transparent #1c96b8;
+  transform-origin:left bottom;
+  transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
+  -moz-transform-origin:left bottom;
+  -moz-transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
+  -webkit-transform-origin:left bottom;
+  -webkit-transform:translateX(10px) translateY(10px) rotateY(90deg) rotateX(-35.36deg);
+}
+.box2 .face1{
+  border-color:transparent transparent #142f36;
+}
+.box2 .face2{
+  border-color:transparent transparent #724e01;
+}
+.box2 .face3{
+  border-color:transparent transparent yellow;
+}
+.box2 .face4{
+  border-color:transparent transparent #154d5c;
+}
+
+</style>

package/package/kisscomps/components/compass3D/index.js

@@ -1,2 +1,2 @@
-import KissCompass from './compass.vue'
-export default KissCompass
+import KissCompass from './compass.vue'
+export default KissCompass

package/package/kisscomps/components/header/index.js

@@ -1,2 +1,2 @@
-import KissHead from './kissHead.vue'
-export default KissHead
+import KissHead from './kissHead.vue'
+export default KissHead

package/package/kisscomps/components/header/kissHead.vue

@@ -1,83 +1,83 @@
-<template>
-  <div class="headerStyle">
-    <div class="left" :style="{'max-width':sideWidth + 'px'}">
-      <div ref="leftPart">
-        <slot name="left"></slot>
-      </div>
-    </div>
-    <div class="title" v-text="title">
-    </div>
-    <div class="right" ref="rightPart" :style="{'max-width':sideWidth + 'px'}">
-      <slot name="right"></slot>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'kiss-head',
-  props: {
-    title: {
-      type: String,
-      default: null
-    },
-    Width: {
-      type: String,
-      default: '1920'
-    }
-  },
-  data () {
-    return {
-      centerWidth: '640'
-    }
-  },
-  created () {
-    if (this.Width) {
-      this.sideWidth = (Number(this.Width) - Number(this.centerWidth)) / 2
-    }
-  },
-  mounted () {
-    if (this.$refs.leftPart.clientWidth === this.sideWidth) {
-      console.log('头部左侧栏宽度过长，请调整')
-    }
-    if (this.$refs.rightPart.clientWidth === this.sideWidth) {
-      console.log('头部右侧栏宽度过长，请调整')
-    }
-  }
-}
-</script>
-<style scoped>
-.headerStyle {
-  width: 100%;
-  min-height: 74px;
-  background-image: url("../image/KissHead/headbg.png");
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-  color: #42daff;
-}
-.title{
-  position: absolute;
-  left: 50%;
-  top: 0;
-  font-size: 40px;
-  margin: 11px 0;
-  transform: translateX(-50%);
-  color: #ebfbff;
-}
-.left {
-  height: 50px;
-  float: left;
-  margin-left: 18px;
-  overflow: hidden;
-  white-space: nowrap;
-  max-height: 50px;
-}
-.right {
-  height: 50px;
-  float: right;
-  margin-right: 18px;
-  overflow: hidden;
-  white-space: nowrap;
-  max-height: 50px;
-}
-</style>
+<template>
+  <div class="headerStyle">
+    <div class="left" :style="{'max-width':sideWidth + 'px'}">
+      <div ref="leftPart">
+        <slot name="left"></slot>
+      </div>
+    </div>
+    <div class="title" v-text="title">
+    </div>
+    <div class="right" ref="rightPart" :style="{'max-width':sideWidth + 'px'}">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'kiss-head',
+  props: {
+    title: {
+      type: String,
+      default: null
+    },
+    Width: {
+      type: String,
+      default: '1920'
+    }
+  },
+  data () {
+    return {
+      centerWidth: '640'
+    }
+  },
+  created () {
+    if (this.Width) {
+      this.sideWidth = (Number(this.Width) - Number(this.centerWidth)) / 2
+    }
+  },
+  mounted () {
+    if (this.$refs.leftPart.clientWidth === this.sideWidth) {
+      console.log('头部左侧栏宽度过长，请调整')
+    }
+    if (this.$refs.rightPart.clientWidth === this.sideWidth) {
+      console.log('头部右侧栏宽度过长，请调整')
+    }
+  }
+}
+</script>
+<style scoped>
+.headerStyle {
+  width: 100%;
+  min-height: 74px;
+  background-image: url("../image/KissHead/headbg.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  color: #42daff;
+}
+.title{
+  position: absolute;
+  left: 50%;
+  top: 0;
+  font-size: 40px;
+  margin: 11px 0;
+  transform: translateX(-50%);
+  color: #ebfbff;
+}
+.left {
+  height: 50px;
+  float: left;
+  margin-left: 18px;
+  overflow: hidden;
+  white-space: nowrap;
+  max-height: 50px;
+}
+.right {
+  height: 50px;
+  float: right;
+  margin-right: 18px;
+  overflow: hidden;
+  white-space: nowrap;
+  max-height: 50px;
+}
+</style>

package/package/kisscomps/components/horizontalMenu/index.js

@@ -1,2 +1,2 @@
-import KissHorizontalMenu from './kissHorizontalMenu.vue'
-export default KissHorizontalMenu
+import KissHorizontalMenu from './kissHorizontalMenu.vue'
+export default KissHorizontalMenu