ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update upload

Browse Source
qianlishi 3 years ago
parent 10c33036d6
commit 3a7e22ce71
6 changed files with 372 additions and 249 deletions
Show Stats Download Patch File Download Diff File

100
report-ui/src/assets/styles/index.scss
Unescape Escape View File

@ -1,15 +1,16 @@
@import './variables.scss'; @import "./variables.scss";
@import './mixin.scss'; @import "./mixin.scss";
@import './transition.scss'; @import "./transition.scss";
@import './element-ui.scss'; @import "./element-ui.scss";
@import './sidebar.scss'; @import "./sidebar.scss";
body { body {
height: 100%; height: 100%;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
} }
label { label {
@ -70,7 +71,7 @@ a:hover {
//main-container全局样式 //main-container全局样式
.app-main { .app-main {
min-height: 100% min-height: 100%;
} }
.app-container { .app-container {
@ -101,11 +102,11 @@ a:hover {
line-height: 40px; line-height: 40px;
cursor: pointer; cursor: pointer;
border: 1px solid #fff; border: 1px solid #fff;
background:rgba(145,163,177,.15); background: rgba(145, 163, 177, 0.15);
font-size: 14px; font-size: 14px;
color: #666; color: #666;
-webkit-transition: border-bottom-color .3s; -webkit-transition: border-bottom-color 0.3s;
transition: border-bottom-color .3s; transition: border-bottom-color 0.3s;
outline: 0; outline: 0;
padding: 0 20px; padding: 0 20px;
} }
@ -115,12 +116,11 @@ a:hover {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
background: #263C7C; background: #263c7c;
} }
.log .el-collapse-item__content { .log .el-collapse-item__content {
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #ffffff;
padding: 20px; padding: 20px;
} }
.log .el-collapse-item__arrow { .log .el-collapse-item__arrow {
@ -128,7 +128,8 @@ a:hover {
float: right; float: right;
margin-right: -77px; margin-right: -77px;
} }
.log .icon-btn_style, .log .icon-btn_style:hover { .log .icon-btn_style,
.log .icon-btn_style:hover {
background: none; background: none;
border: 0; border: 0;
padding: 0; padding: 0;
@ -136,58 +137,60 @@ a:hover {
//大屏展示的一些样式 //大屏展示的一些样式
.my-dialog { .my-dialog {
.el-dialog { .el-dialog {
background: #062B69; background: #062b69;
border:1px solid #5DDAF6 border: 1px solid #5ddaf6;
} }
.el-dialog__header { .el-dialog__header {
border-bottom:1px solid #5DDAF6; border-bottom: 1px solid #5ddaf6;
text-align: center; text-align: center;
} }
.el-dialog__title { .el-dialog__title {
color: #5CDCF9; color: #5cdcf9;
} }
.el-input__inner { .el-input__inner {
background:#091E43; background: #091e43;
border-color: #254E97; border-color: #254e97;
} }
.el-date-editor .el-range__icon { .el-date-editor .el-range__icon {
color: #5CDCF9; color: #5cdcf9;
} }
input { input {
background:#091E43; background: #091e43;
} }
.el-date-editor .el-range-input { .el-date-editor .el-range-input {
color: #5CDCF9; color: #5cdcf9;
} }
.form-handle { .form-handle {
.el-form-item__label { .el-form-item__label {
color: #5CDCF9; color: #5cdcf9;
font-weight: 500; font-weight: 500;
} }
} }
.el-form-item { .el-form-item {
margin-bottom: 10px; margin-bottom: 10px;
} }
.el-textarea__inner,.el-select:hover .el-input__inner{ .el-textarea__inner,
background-color: #091E43; .el-select:hover .el-input__inner {
border-color: #254E97; background-color: #091e43;
border-bottom:1px solid #254E97; border-color: #254e97;
border-bottom: 1px solid #254e97;
} }
.el-button--blue { .el-button--blue {
color: #FFF; color: #fff;
background-color: #224788; background-color: #224788;
border-color: #224788; border-color: #224788;
} }
.el-button--green { .el-button--green {
color: #FFF; color: #fff;
background-color: #2092AD; background-color: #2092ad;
border-color: #2092AD; border-color: #2092ad;
} }
} }
.el-input--prefix .el-input__inner { .el-input--prefix .el-input__inner {
padding-left: 45px; padding-left: 45px;
} }
.el-input-group__append, .el-input-group__prepend{ .el-input-group__append,
.el-input-group__prepend {
color: #333; color: #333;
} }
//avue //avue
@ -212,7 +215,7 @@ a:hover {
height: 100%; height: 100%;
} }
.printSet { .printSet {
background-image: url('../images/bianzu.png') !important; background-image: url("../images/bianzu.png") !important;
background-size: 19px; background-size: 19px;
background-position: left top; background-position: left top;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -220,7 +223,7 @@ a:hover {
opacity: 1 !important; opacity: 1 !important;
} }
.qrCodes { .qrCodes {
background-image: url('../images/qrcode.png') !important; background-image: url("../images/qrcode.png") !important;
background-size: 19px; background-size: 19px;
background-position: left top; background-position: left top;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -228,7 +231,7 @@ a:hover {
opacity: 1 !important; opacity: 1 !important;
} }
.barCodes { .barCodes {
background-image: url('../images/tiaoxingma.png') !important; background-image: url("../images/tiaoxingma.png") !important;
background-size: 19px; background-size: 19px;
background-position: left top; background-position: left top;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -236,14 +239,15 @@ a:hover {
opacity: 1 !important; opacity: 1 !important;
} }
.collapse-input-style { .collapse-input-style {
.el-input__inner ,.el-textarea__inner{ .el-input__inner,
.el-textarea__inner {
background: #263445 !important; background: #263445 !important;
border: 1px solid #3f5673; border: 1px solid #3f5673;
color:#a8e3ff color: #a8e3ff;
} }
.el-slider__runway { .el-slider__runway {
height: 2px; height: 2px;
background-color:#5e6b82 background-color: #5e6b82;
} }
.el-slider__bar { .el-slider__bar {
height: 2px; height: 2px;
@ -259,15 +263,17 @@ a:hover {
background-color: #5e6b82; background-color: #5e6b82;
border: 1px solid #3f5673; border: 1px solid #3f5673;
} }
.el-input-group__append, .el-input-group__prepend{ .el-input-group__append,
.el-input-group__prepend {
background: #5e6b82 !important; background: #5e6b82 !important;
border: 1px solid #3f5673; border: 1px solid #3f5673;
color:#a8e3ff color: #a8e3ff;
} }
.el-input-number__increase, .el-input-number__decrease{ .el-input-number__increase,
.el-input-number__decrease {
background: #5e6b82 !important; background: #5e6b82 !important;
border: 1px solid #3f5673; border: 1px solid #3f5673;
color:#a8e3ff color: #a8e3ff;
} }
.el-input-number.is-controls-right .el-input-number__increase { .el-input-number.is-controls-right .el-input-number__increase {
height: 15px; height: 15px;
@ -286,7 +292,7 @@ a:hover {
line-height: 30px !important; line-height: 30px !important;
height: 30px; height: 30px;
} }
.el-form-item__content { // .el-form-item__content {
line-height: 30px !important; // line-height: 30px !important;
height: 30px; // height: 30px;
} // }

60
report-ui/src/views/report/bigscreen/designer/form/customUpload.vue
Unescape Escape View File

@ -0,0 +1,60 @@
<template>
<el-upload
class="upload-demo"
:action="requestUrl"
:on-success="handleSucess"
:on-remove="handleRemove"
:file-list="fileList"
:headers="headers"
:limit="1"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
model: {
prop: "value",
event: "input"
},
props: {
value: {
type: Array,
default: []
}
},
data() {
return {
requestUrl: process.env.BASE_API + "/file/upload",
headers: {
Authorization: getToken()
},
fileList: []
};
},
watch: {
value(val) {
console.log(val);
}
},
created() {
this.fileList = this.value;
},
methods: {
handleSucess(file) {
console.log(file);
this.fileList = [{ name: file.data.fileType, url: file.data.urlPath }];
this.$emit("input", this.fileList);
this.$emit("change", this.fileList);
},
handleRemove(file) {
this.fileList = [];
this.$emit("input", []);
this.$emit("change", []);
}
}
};
</script>
<style lang="scss" scoped></style>

14
report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
Unescape Escape View File

@ -61,12 +61,10 @@
v-model="formData[item.name]" v-model="formData[item.name]"
@change="val => changed(val, item.name)" @change="val => changed(val, item.name)"
/> />
<customUpload
<el-upload v-if="item.type == 'custom-upload'"
v-if="item.type == 'el-upload-picture'" v-model="formData[item.name]"
size="mini" @change="changed($event, item.name)"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
/> />
<el-radio-group <el-radio-group
@ -284,6 +282,7 @@ import "codemirror/mode/shell/shell.js";
import dynamicComponents from "./dynamicComponents.vue"; import dynamicComponents from "./dynamicComponents.vue";
import customColorComponents from "./customColorComponents"; import customColorComponents from "./customColorComponents";
import dynamicAddTable from "./dynamicAddTable.vue"; import dynamicAddTable from "./dynamicAddTable.vue";
import customUpload from "./customUpload.vue";
export default { export default {
name: "DynamicForm", name: "DynamicForm",
components: { components: {
@ -291,7 +290,8 @@ export default {
vueJsonEditor, vueJsonEditor,
dynamicComponents, dynamicComponents,
customColorComponents, customColorComponents,
dynamicAddTable dynamicAddTable,
customUpload
}, },
model: { model: {
prop: "value", prop: "value",

148
report-ui/src/views/report/bigscreen/designer/index.vue
Unescape Escape View File

@ -6,21 +6,23 @@
!--> !-->
<template> <template>
<div class="layout"> <div class="layout">
<div v-if="toolIsShow" <div
v-if="toolIsShow"
class="layout-left" class="layout-left"
:style="{ width: widthLeftForTools + 'px' }"> :style="{ width: widthLeftForTools + 'px' }"
<el-tabs type="border-card" >
:stretch="true"> <el-tabs type="border-card" :stretch="true">
<!-- 左侧组件栏--> <!-- 左侧组件栏-->
<el-tab-pane label="工具栏"> <el-tab-pane label="工具栏">
<!-- <el-divider content-position="center">html</el-divider>--> <!-- <el-divider content-position="center">html</el-divider>-->
<draggable v-for="widget in widgetTools" <draggable
v-for="widget in widgetTools"
:key="widget.code" :key="widget.code"
@end="evt => widgetOnDragged(evt, widget.code)"> @end="evt => widgetOnDragged(evt, widget.code)"
>
<div class="tools-item"> <div class="tools-item">
<span class="tools-item-icon"> <span class="tools-item-icon">
<i class="iconfont" <i class="iconfont" :class="widget.icon"></i>
:class="widget.icon"></i>
</span> </span>
<span class="tools-item-text">{{ widget.label }}</span> <span class="tools-item-text">{{ widget.label }}</span>
</div> </div>
@ -28,14 +30,15 @@
</el-tab-pane> </el-tab-pane>
<!-- 左侧图层--> <!-- 左侧图层-->
<el-tab-pane label="图层"> <el-tab-pane label="图层">
<div v-for="(item, index) in layerWidget" <div
v-for="(item, index) in layerWidget"
:key="index" :key="index"
class="tools-item" class="tools-item"
:class="widgetIndex == index ? 'is-active' : ''" :class="widgetIndex == index ? 'is-active' : ''"
@click="layerClick(index)"> @click="layerClick(index)"
>
<span class="tools-item-icon"> <span class="tools-item-icon">
<i class="iconfont" <i class="iconfont" :class="item.icon"></i>
:class="item.icon"></i>
</span> </span>
<span class="tools-item-text">{{ item.label }}</span> <span class="tools-item-text">{{ item.label }}</span>
</div> </div>
@ -43,40 +46,49 @@
</el-tabs> </el-tabs>
</div> </div>
<div class="layout-left-fold" <div
class="layout-left-fold"
:style="{ width: widthLeftForToolsHideButton + 'px' }" :style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow"> @click="toolIsShow = !toolIsShow"
>
<i class="el-icon-arrow-right" /> <i class="el-icon-arrow-right" />
</div> </div>
<div class="layout-middle" <div
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"> class="layout-middle"
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"
>
<div class="top-button"> <div class="top-button">
<span class="btn"> <span class="btn">
<el-tooltip class="item" <el-tooltip
class="item"
effect="dark" effect="dark"
content="保存" content="保存"
placement="bottom"> placement="bottom"
<i class="iconfont iconsave" >
@click="saveData"></i> <i class="iconfont iconsave" @click="saveData"></i>
</el-tooltip> </el-tooltip>
</span> </span>
<span class="btn"> <span class="btn">
<el-tooltip class="item" <el-tooltip
class="item"
effect="dark" effect="dark"
content="预览" content="预览"
placement="bottom"> placement="bottom"
<i class="iconfont iconyulan" >
@click="viewScreen"></i> <i class="iconfont iconyulan" @click="viewScreen"></i>
</el-tooltip> </el-tooltip>
</span> </span>
<span class="btn border-left"> <span class="btn border-left">
<ul class="nav"> <ul class="nav">
<li><i class="el-icon-brush"></i><i class="el-icon-arrow-down"></i> <li>
<i class="el-icon-brush"></i><i class="el-icon-arrow-down"></i>
<ul> <ul>
<li> <li>
<div><i class="el-icon-full-screen mr10"></i>边框 <i class="el-icon-arrow-right ml20"></i></div> <div>
<i class="el-icon-full-screen mr10"></i>边框
<i class="el-icon-arrow-right ml20"></i>
</div>
<ul class="three-level"> <ul class="three-level">
<li><a href="#">边框1</a></li> <li><a href="#">边框1</a></li>
<li><a href="#">边框2</a></li> <li><a href="#">边框2</a></li>
@ -84,7 +96,11 @@
</ul> </ul>
</li> </li>
<li> <li>
<div><i class="el-icon-magic-stick mr10"></i>装饰<i class="el-icon-arrow-right ml20"></i></div> <div>
<i class="el-icon-magic-stick mr10"></i>装饰<i
class="el-icon-arrow-right ml20"
></i>
</div>
<ul class="three-level"> <ul class="three-level">
<li><a href="#">装饰1</a></li> <li><a href="#">装饰1</a></li>
</ul> </ul>
@ -94,20 +110,25 @@
</ul> </ul>
</span> </span>
</div> </div>
<div class="workbench-container" <div
class="workbench-container"
:style="{ :style="{
width: bigscreenWidthInWorkbench + 'px', width: bigscreenWidthInWorkbench + 'px',
height: bigscreenHeightInWorkbench + 'px' height: bigscreenHeightInWorkbench + 'px'
}" }"
@mousedown="handleMouseDown"> @mousedown="handleMouseDown"
<vue-ruler-tool v-model="dashboard.presetLine" >
<vue-ruler-tool
v-model="dashboard.presetLine"
class="vueRuler" class="vueRuler"
:step-length="50" :step-length="50"
:parent="true" :parent="true"
:position="'relative'" :position="'relative'"
:is-scale-revise="true" :is-scale-revise="true"
:visible.sync="dashboard.presetLineVisible"> :visible.sync="dashboard.presetLineVisible"
<div id="workbench" >
<div
id="workbench"
class="workbench" class="workbench"
:style="{ :style="{
transform: workbenchTransform, transform: workbenchTransform,
@ -122,8 +143,10 @@
'background-origin': 'initial', 'background-origin': 'initial',
'background-clip': 'initial' 'background-clip': 'initial'
}" }"
@click.self="setOptionsOnClickScreen"> @click.self="setOptionsOnClickScreen"
<widget ref="widgets" >
<widget
ref="widgets"
v-for="(widget, index) in widgets" v-for="(widget, index) in widgets"
:key="index" :key="index"
v-model="widget.value" v-model="widget.value"
@ -132,46 +155,58 @@
:bigscreen="{ bigscreenWidth, bigscreenHeight }" :bigscreen="{ bigscreenWidth, bigscreenHeight }"
@onActivated="setOptionsOnClickWidget" @onActivated="setOptionsOnClickWidget"
@contextmenu.prevent.native="rightClick($event, index)" @contextmenu.prevent.native="rightClick($event, index)"
@mousedown.prevent.native="widgetsClick(index)" /> @mousedown.prevent.native="widgetsClick(index)"
/>
</div> </div>
</vue-ruler-tool> </vue-ruler-tool>
</div> </div>
</div> </div>
<div class="layout-right" <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
:style="{ width: widthLeftForOptions + 'px' }"> <el-tabs v-model="activeName" type="border-card" :stretch="true">
<el-tabs v-model="activeName" <el-tab-pane
type="border-card" v-if="
:stretch="true">
<el-tab-pane v-if="
isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse) isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
" "
name="first" name="first"
label="配置"> label="配置"
<dynamicForm ref="formData" >
<dynamicForm
ref="formData"
:options="widgetOptions.setup" :options="widgetOptions.setup"
@onChanged="val => widgetValueChanged('setup', val)" /> @onChanged="val => widgetValueChanged('setup', val)"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.data)" <el-tab-pane
v-if="isNotNull(widgetOptions.data)"
name="second" name="second"
label="数据"> label="数据"
<dynamicForm ref="formData" >
<dynamicForm
ref="formData"
:options="widgetOptions.data" :options="widgetOptions.data"
@onChanged="val => widgetValueChanged('data', val)" /> @onChanged="val => widgetValueChanged('data', val)"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.position)" <el-tab-pane
v-if="isNotNull(widgetOptions.position)"
name="third" name="third"
label="坐标"> label="坐标"
<dynamicForm ref="formData" >
<dynamicForm
ref="formData"
:options="widgetOptions.position" :options="widgetOptions.position"
@onChanged="val => widgetValueChanged('position', val)" /> @onChanged="val => widgetValueChanged('position', val)"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<content-menu :visible.sync="visibleContentMenu" <content-menu
:visible.sync="visibleContentMenu"
:style-obj="styleObj" :style-obj="styleObj"
@deletelayer="deletelayer" /> @deletelayer="deletelayer"
/>
</div> </div>
</template> </template>
@ -280,7 +315,8 @@ export default {
return Math.min(widthScale, heightScale); return Math.min(widthScale, heightScale);
}, },
workbenchTransform() { workbenchTransform() {
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench return `scale(${this.bigscreenScaleInWorkbench}, ${
this.bigscreenScaleInWorkbench
})`; })`;
}, },
// 大屏在设计模式的大小 // 大屏在设计模式的大小

4
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -666,12 +666,12 @@ const widgetTools = [
value: '0' value: '0'
}, },
{ {
type: 'el-input-text', type: 'custom-upload',
label: '图片地址', label: '图片地址',
name: 'imageAdress', name: 'imageAdress',
required: false, required: false,
placeholder: '', placeholder: '',
value: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg', value: [{url: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg'}],
}, },
{ {
type: 'vue-color', type: 'vue-color',

83
report-ui/src/views/report/bigscreen/designer/widget/widgetImage.vue
Unescape Escape View File

@ -1,5 +1,12 @@
<template> <template>
<div class="imagebox" :style="styleColor"><img :class="transStyle.startRotate?'startImg':''" :style="imgStyle" :src="imgStyle.imageAdress" alt=""></div> <div class="imagebox" :style="styleColor">
<img
:class="transStyle.startRotate ? 'startImg' : ''"
:style="imgStyle"
:src="imgStyle.imageAdress"
alt=""
/>
</div>
</template> </template>
<script> <script>
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg // http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg
@ -9,55 +16,59 @@
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095504.jpg // http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095504.jpg
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095506.jpg // http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095506.jpg
export default { export default {
name: 'WidgetImage', name: "WidgetImage",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean
}, },
data() { data() {
return { return {
options: {}, options: {}
} };
}, },
computed: { computed: {
transStyle() { transStyle() {
return this.objToOne(this.options) return this.objToOne(this.options);
}, },
styleColor() { styleColor() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? "absolute" : "static",
background: this.transStyle.background, background: this.transStyle.background,
'text-align': this.transStyle.textAlign, "text-align": this.transStyle.textAlign,
width: this.transStyle.width + 'px', width: this.transStyle.width + "px",
height: this.transStyle.height + 'px', height: this.transStyle.height + "px",
left: this.transStyle.left + 'px', left: this.transStyle.left + "px",
top: this.transStyle.top + 'px', top: this.transStyle.top + "px",
right: this.transStyle.right + 'px', right: this.transStyle.right + "px"
};
}
}, },
imgStyle() { imgStyle() {
return { return {
imageAdress: this.transStyle.imageAdress, imageAdress:
'border-radius': this.transStyle.borderRadius + 'px', this.options.setup.imageAdress.length > 0
opacity: this.transStyle.transparency / 100, ? this.options.setup.imageAdress[0].url
} : "",
"border-radius": this.transStyle.borderRadius + "px",
opacity: this.transStyle.transparency / 100
};
} }
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
this.options = val console.log(val);
}, this.options = val;
deep: true,
}, },
deep: true
}
}, },
mounted() { created() {
this.options = this.value this.options = this.value;
}, },
methods: {}, mounted() {},
} methods: {}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -74,10 +85,20 @@ export default {
animation: turn 1s linear infinite; animation: turn 1s linear infinite;
} }
@keyframes turn { @keyframes turn {
0%{-webkit-transform:rotate(0deg);} 0% {
25%{-webkit-transform:rotate(90deg);} -webkit-transform: rotate(0deg);
50%{-webkit-transform:rotate(180deg);} }
75%{-webkit-transform:rotate(270deg);} 25% {
100%{-webkit-transform:rotate(360deg);} -webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save