|
|
@@ -14,7 +14,7 @@
|
|
|
ref="myChart"
|
|
|
></div>
|
|
|
<p style="font-size: 28px;">后台项目进度</p></div> -->
|
|
|
-<div class="post">
|
|
|
+ <!-- <div class="post">
|
|
|
<div class="bg1"></div>
|
|
|
<div class="bg2"></div>
|
|
|
<div class="bg3"></div>
|
|
|
@@ -23,8 +23,8 @@
|
|
|
</div>
|
|
|
<div style="text-align: center;">
|
|
|
<button id="actives">融合</button>
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div> -->
|
|
|
+ 工作台
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -34,77 +34,77 @@ export default {
|
|
|
return {};
|
|
|
},
|
|
|
mounted() {
|
|
|
- var ast = document.getElementById('actives')
|
|
|
- ast.addEventListener('click', function () {
|
|
|
- var lis = ['bg1', 'bg2', 'bg4', 'bg5']
|
|
|
- var lisClass = ['anmins1', 'anmins2', 'anmins4', 'anmins5']
|
|
|
- for (let i = 0; i < lis.length; i++) {
|
|
|
- document.getElementsByClassName(lis[i])[0].classList.add(lisClass[i])
|
|
|
- setTimeout(()=>{
|
|
|
- document.getElementsByClassName(lis[i])[0].classList.add('ans')
|
|
|
- },900)
|
|
|
- }
|
|
|
- })
|
|
|
+ // var ast = document.getElementById("actives");
|
|
|
+ // ast.addEventListener("click", function () {
|
|
|
+ // var lis = ["bg1", "bg2", "bg4", "bg5"];
|
|
|
+ // var lisClass = ["anmins1", "anmins2", "anmins4", "anmins5"];
|
|
|
+ // for (let i = 0; i < lis.length; i++) {
|
|
|
+ // document.getElementsByClassName(lis[i])[0].classList.add(lisClass[i]);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // document.getElementsByClassName(lis[i])[0].classList.add("ans");
|
|
|
+ // }, 900);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
// this.drawLine();
|
|
|
},
|
|
|
methods: {
|
|
|
drawLine() {
|
|
|
- // var self = this
|
|
|
- // // 基于准备好的dom,初始化echarts实例
|
|
|
- // let myChart = this.$echarts.init(this.$refs.myChart);
|
|
|
- // // 绘制图表
|
|
|
- // myChart.setOption({
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // type: "gauge",
|
|
|
- // progress: {
|
|
|
- // show: true,
|
|
|
- // width: 14,
|
|
|
- // },
|
|
|
- // axisLine: {
|
|
|
- // lineStyle: {
|
|
|
- // width: 14,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // splitLine: {
|
|
|
- // length: 15,
|
|
|
- // lineStyle: {
|
|
|
- // width: 2,
|
|
|
- // color: "#999",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // distance: 25,
|
|
|
- // color: "#999",
|
|
|
- // fontSize: 20,
|
|
|
- // },
|
|
|
- // anchor: {
|
|
|
- // show: true,
|
|
|
- // showAbove: true,
|
|
|
- // size: 21,
|
|
|
- // itemStyle: {
|
|
|
- // borderWidth: 10,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // title: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // detail: {
|
|
|
- // valueAnimation: true,
|
|
|
- // fontSize: 50,
|
|
|
- // offsetCenter: [0, "70%"],
|
|
|
- // },
|
|
|
- // data: [
|
|
|
- // {
|
|
|
- // value: 70,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // });
|
|
|
+ // var self = this
|
|
|
+ // // 基于准备好的dom,初始化echarts实例
|
|
|
+ // let myChart = this.$echarts.init(this.$refs.myChart);
|
|
|
+ // // 绘制图表
|
|
|
+ // myChart.setOption({
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // type: "gauge",
|
|
|
+ // progress: {
|
|
|
+ // show: true,
|
|
|
+ // width: 14,
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 14,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // length: 15,
|
|
|
+ // lineStyle: {
|
|
|
+ // width: 2,
|
|
|
+ // color: "#999",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // distance: 25,
|
|
|
+ // color: "#999",
|
|
|
+ // fontSize: 20,
|
|
|
+ // },
|
|
|
+ // anchor: {
|
|
|
+ // show: true,
|
|
|
+ // showAbove: true,
|
|
|
+ // size: 21,
|
|
|
+ // itemStyle: {
|
|
|
+ // borderWidth: 10,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // title: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // detail: {
|
|
|
+ // valueAnimation: true,
|
|
|
+ // fontSize: 50,
|
|
|
+ // offsetCenter: [0, "70%"],
|
|
|
+ // },
|
|
|
+ // data: [
|
|
|
+ // {
|
|
|
+ // value: 70,
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // });
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -116,116 +116,130 @@ export default {
|
|
|
// flex-wrap: wrap;
|
|
|
// }
|
|
|
|
|
|
-.post{
|
|
|
- margin: 40px auto;
|
|
|
- width: 600px;
|
|
|
- height: 600px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .bg1 {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- background: linear-gradient(238deg,
|
|
|
- rgb(130, 255, 0) 0%,
|
|
|
- rgb(0, 84, 166) 100%);
|
|
|
- mix-blend-mode: overlay;
|
|
|
- transition: all 1s;
|
|
|
- }
|
|
|
+.post {
|
|
|
+ margin: 40px auto;
|
|
|
+ width: 600px;
|
|
|
+ height: 600px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.bg1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 238deg,
|
|
|
+ rgb(130, 255, 0) 0%,
|
|
|
+ rgb(0, 84, 166) 100%
|
|
|
+ );
|
|
|
+ mix-blend-mode: overlay;
|
|
|
+ transition: all 1s;
|
|
|
+}
|
|
|
|
|
|
- .bg2 {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 400px;
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- background: linear-gradient(238deg, rgb(33, 200, 69) 0%, rgb(0, 0, 100) 100%);
|
|
|
- mix-blend-mode: multiply;
|
|
|
- transition: all 1s;
|
|
|
- }
|
|
|
+.bg2 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 400px;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: linear-gradient(238deg, rgb(33, 200, 69) 0%, rgb(0, 0, 100) 100%);
|
|
|
+ mix-blend-mode: multiply;
|
|
|
+ transition: all 1s;
|
|
|
+}
|
|
|
|
|
|
- .bg3 {
|
|
|
- position: absolute;
|
|
|
- top: 200px;
|
|
|
- left: 200px;
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- background: linear-gradient(238deg, rgb(200, 255, 255) 48%, rgb(3, 0, 151) 100%);
|
|
|
- mix-blend-mode: difference;
|
|
|
- transition: all 1s;
|
|
|
- }
|
|
|
+.bg3 {
|
|
|
+ position: absolute;
|
|
|
+ top: 200px;
|
|
|
+ left: 200px;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 238deg,
|
|
|
+ rgb(200, 255, 255) 48%,
|
|
|
+ rgb(3, 0, 151) 100%
|
|
|
+ );
|
|
|
+ mix-blend-mode: difference;
|
|
|
+ transition: all 1s;
|
|
|
+}
|
|
|
|
|
|
- .bg4 {
|
|
|
- position: absolute;
|
|
|
- top: 400px;
|
|
|
- left: 0;
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- background: radial-gradient(100% 85% at 0% 100%,
|
|
|
- rgb(0, 0, 0) 0%,
|
|
|
- rgb(0, 131, 255) 50%,
|
|
|
- rgb(255, 0, 0) 100%);
|
|
|
- mix-blend-mode: difference;
|
|
|
- transition: all 1s;
|
|
|
- }
|
|
|
+.bg4 {
|
|
|
+ position: absolute;
|
|
|
+ top: 400px;
|
|
|
+ left: 0;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: radial-gradient(
|
|
|
+ 100% 85% at 0% 100%,
|
|
|
+ rgb(0, 0, 0) 0%,
|
|
|
+ rgb(0, 131, 255) 50%,
|
|
|
+ rgb(255, 0, 0) 100%
|
|
|
+ );
|
|
|
+ mix-blend-mode: difference;
|
|
|
+ transition: all 1s;
|
|
|
+}
|
|
|
|
|
|
- .bg5 {
|
|
|
- position: absolute;
|
|
|
- top: 400px;
|
|
|
- left: 400px;
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- mix-blend-mode: overlay;
|
|
|
- background: radial-gradient(100% 225% at 0% 100%,
|
|
|
- rgb(255, 0, 0) 0%,
|
|
|
- rgb(66, 255, 0) 100%);
|
|
|
- transition: all 1s;
|
|
|
- }
|
|
|
- .ans{
|
|
|
- animation: name1 5s infinite linear;
|
|
|
- box-shadow: 1px 1px 12px 3px rgba(0,0,100,.5);
|
|
|
- }
|
|
|
- @keyframes name1 {
|
|
|
- 0%{
|
|
|
- filter: hue-rotate(0deg);
|
|
|
- }
|
|
|
- 100%{
|
|
|
- filter: hue-rotate(360deg);
|
|
|
- }
|
|
|
- }
|
|
|
- .anmins1 {
|
|
|
- transform: translateX(200px) translateY(200px);
|
|
|
- }
|
|
|
+.bg5 {
|
|
|
+ position: absolute;
|
|
|
+ top: 400px;
|
|
|
+ left: 400px;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ mix-blend-mode: overlay;
|
|
|
+ background: radial-gradient(
|
|
|
+ 100% 225% at 0% 100%,
|
|
|
+ rgb(255, 0, 0) 0%,
|
|
|
+ rgb(66, 255, 0) 100%
|
|
|
+ );
|
|
|
+ transition: all 1s;
|
|
|
+}
|
|
|
+.ans {
|
|
|
+ animation: name1 5s infinite linear;
|
|
|
+ box-shadow: 1px 1px 12px 3px rgba(0, 0, 100, 0.5);
|
|
|
+}
|
|
|
+@keyframes name1 {
|
|
|
+ 0% {
|
|
|
+ filter: hue-rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ filter: hue-rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+.anmins1 {
|
|
|
+ transform: translateX(200px) translateY(200px);
|
|
|
+}
|
|
|
|
|
|
- .anmins2 {
|
|
|
- transform: translateX(-200px) translateY(200px);
|
|
|
- }
|
|
|
+.anmins2 {
|
|
|
+ transform: translateX(-200px) translateY(200px);
|
|
|
+}
|
|
|
|
|
|
- .anmins4 {
|
|
|
- transform: translateX(200px) translateY(-200px);
|
|
|
- }
|
|
|
+.anmins4 {
|
|
|
+ transform: translateX(200px) translateY(-200px);
|
|
|
+}
|
|
|
|
|
|
- .anmins5 {
|
|
|
- transform: translateX(-200px) translateY(-200px);
|
|
|
- }
|
|
|
- #actives{
|
|
|
- padding: 0px 20px;
|
|
|
- line-height: 40px;
|
|
|
- text-align: center;
|
|
|
- font-size: 20px;
|
|
|
- border-radius: 8px;
|
|
|
- color: #eee;
|
|
|
- background: linear-gradient(238deg, rgb(102, 175, 172) 0%, rgb(0, 0, 100) 100%);
|
|
|
- height: 40px;
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.4s;
|
|
|
- }
|
|
|
- #actives:hover{
|
|
|
- box-shadow: 1px 1px 12px 3px rgba(0,0,100,.5);
|
|
|
- color: antiquewhite;
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
+.anmins5 {
|
|
|
+ transform: translateX(-200px) translateY(-200px);
|
|
|
+}
|
|
|
+#actives {
|
|
|
+ padding: 0px 20px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #eee;
|
|
|
+ background: linear-gradient(
|
|
|
+ 238deg,
|
|
|
+ rgb(102, 175, 172) 0%,
|
|
|
+ rgb(0, 0, 100) 100%
|
|
|
+ );
|
|
|
+ height: 40px;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.4s;
|
|
|
+}
|
|
|
+#actives:hover {
|
|
|
+ box-shadow: 1px 1px 12px 3px rgba(0, 0, 100, 0.5);
|
|
|
+ color: antiquewhite;
|
|
|
+ transform: scale(1.05);
|
|
|
+}
|
|
|
</style>
|