|
|
@@ -1,289 +1,736 @@
|
|
|
<template>
|
|
|
- <div class="development_stage">
|
|
|
- <head-component :headinfo=headinfo></head-component>
|
|
|
- <div class="page-content">
|
|
|
- <div style="display: flex;justify-content: center;width: 1890px;height: 912px;margin-top: 13px">
|
|
|
- <div class="page-box">
|
|
|
- <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="development_stage">
|
|
|
+ <head-component :headinfo=headinfo></head-component>
|
|
|
+ <div class="page-content">
|
|
|
+ <div style="display: flex;justify-content: center;width: 1890px;height: 912px;margin-top: 13px">
|
|
|
+ <div class="page-box">
|
|
|
+ <div style="width: 1px;height: 1700px;border: 1px solid red;position: absolute;left:916px;top: 0px"></div>
|
|
|
+ <div style="width: 850px;height: 1px;border: 1px solid green;position: absolute;left: 66px;top: 400px"></div>
|
|
|
+ <div style="width: 1700px;height: 1px;border: 1px solid white;position: absolute;left: 70px;top: 906px"></div>
|
|
|
+ <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
|
|
|
+ <FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>
|
|
|
+ <FollowRingChart id="ring-chart3" class="ring-chart3" :chartProps="chartPrpps3"/>
|
|
|
+ <FollowRingChart id="ring-chart4" class="ring-chart4" :chartProps="chartPrpps4"/>
|
|
|
+ <FollowRingChart id="ring-chart5" class="ring-chart5" :chartProps="chartPrpps5"/>
|
|
|
+ <FollowRingChart id="ring-chart6" class="ring-chart6" :chartProps="chartPrpps6"/>
|
|
|
+ <FollowRingChart id="ring-chart7" class="ring-chart7" :chartProps="chartPrpps7"/>
|
|
|
+ <FollowRingChart id="ring-chart8" class="ring-chart8" :chartProps="chartPrpps8"/>
|
|
|
+ <FollowRingChart id="ring-chart9" class="ring-chart9" :chartProps="chartPrpps9"/>
|
|
|
+ <FollowRingChart id="ring-chart10" class="ring-chart10" :chartProps="chartPrpps10"/>
|
|
|
+ <FollowRingChart id="ring-chart11" class="ring-chart11" :chartProps="chartPrpps11"/>
|
|
|
+ <FollowRingChart id="ring-chart12" class="ring-chart12" :chartProps="chartPrpps12"/>
|
|
|
+
|
|
|
+ <FollowRingChart id="ring-chart13" class="ring-chart13" :chartProps="chartPrpps13"/>
|
|
|
+ <FollowRingChart id="ring-chart14" class="ring-chart14" :chartProps="chartPrpps14"/>
|
|
|
+ <FollowRingChart id="ring-chart15" class="ring-chart15" :chartProps="chartPrpps15"/>
|
|
|
+ <FollowRingChart id="ring-chart16" class="ring-chart16" :chartProps="chartPrpps16"/>
|
|
|
+
|
|
|
+ <FollowRingChart id="ring-chart17" class="ring-chart17" :chartProps="chartPrpps17"/>
|
|
|
+ <FollowRingChart id="ring-chart18" class="ring-chart18" :chartProps="chartPrpps18"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div id="eraser"
|
|
|
+ @click="edit"
|
|
|
+ :class="[chartPrpps1.status == 'edit'?'bg-color-style':'bg-color-style1']"
|
|
|
+ >
|
|
|
+ 橡皮
|
|
|
+ </div>
|
|
|
+ <div id="save"
|
|
|
+ @click="save"
|
|
|
+ style="position: absolute;top:80px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: green;border-radius: 50%">
|
|
|
+ 保存
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
|
|
|
-import {onMounted, reactive} from "vue";
|
|
|
-// import FollowRingChart from "@/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue";
|
|
|
-import FollowRingChart from './FollowRingChart.vue'
|
|
|
-const headinfo = ref({})
|
|
|
-const router = useRouter()
|
|
|
-function setHeadinfo(){
|
|
|
- headinfo.value = {
|
|
|
- title: '生涯彩虹图',
|
|
|
- user: {
|
|
|
- avatar: '头像路径',
|
|
|
- nickName: '张三'
|
|
|
- },
|
|
|
- backUrl : '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const chartPrpps1 = ref({
|
|
|
- // left : 100,
|
|
|
- top : 106,
|
|
|
- width : 1700,
|
|
|
- height : 1700,
|
|
|
- borderColor : "#998877",
|
|
|
- color :"#ff00ff",
|
|
|
- bncolor : "#ffffff",
|
|
|
- radiusMax : '100%',
|
|
|
- radiusMin : '96%',
|
|
|
- isFinish : false
|
|
|
-})
|
|
|
-const position = reactive({ x: 10, y: 10 });
|
|
|
-let isDragging = false;
|
|
|
-let originX, originY;
|
|
|
-
|
|
|
-
|
|
|
-function jumpTo(path) {
|
|
|
- console.log(path)
|
|
|
- router.push({
|
|
|
- path: path,
|
|
|
- query: {name: 123}
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const startDrag = (e) => {
|
|
|
- console.log("e",e)
|
|
|
- isDragging = true;
|
|
|
- originX = e.clientX - position.x;
|
|
|
- originY = e.clientY - position.y;
|
|
|
- console.log("originX",originX,originY,"originY")
|
|
|
- document.addEventListener('mousemove', onMouseMove);
|
|
|
- document.addEventListener('mouseup', stopDrag);
|
|
|
-};
|
|
|
-
|
|
|
-const onMouseMove = (e) => {
|
|
|
- if (isDragging) {
|
|
|
- position.x = e.clientX - originX;
|
|
|
- position.y = e.clientY - originY;
|
|
|
- console.log("position.x",position.x,"position.y",position.y)
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const stopDrag = () => {
|
|
|
- isDragging = false;
|
|
|
- document.removeEventListener('mousemove', onMouseMove);
|
|
|
- document.removeEventListener('mouseup', stopDrag);
|
|
|
-};
|
|
|
-onMounted(() => {
|
|
|
- setHeadinfo()
|
|
|
-})
|
|
|
+ import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
|
|
|
+ import {onMounted, reactive} from "vue";
|
|
|
+ // import FollowRingChart from "@/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue";
|
|
|
+ import FollowRingChart from './FollowRingChart.vue'
|
|
|
+
|
|
|
+ const headinfo = ref({})
|
|
|
+ const router = useRouter()
|
|
|
+
|
|
|
+ function setHeadinfo() {
|
|
|
+ headinfo.value = {
|
|
|
+ title: '生涯彩虹图',
|
|
|
+ user: {
|
|
|
+ avatar: '头像路径',
|
|
|
+ nickName: '张三'
|
|
|
+ },
|
|
|
+ backUrl: '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const chartPrpps1 = ref({
|
|
|
+ top: 160,
|
|
|
+ left: 90,
|
|
|
+ width: 1700,
|
|
|
+ height: 1700,
|
|
|
+ borderColor: "#FFFF00",
|
|
|
+ color: "#ff00ff",
|
|
|
+ bncolor: "#ffffff",
|
|
|
+ radiusMax: '850px',
|
|
|
+ radiusMin: '816px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps2= ref({
|
|
|
+ top: 228,
|
|
|
+ left: 158,
|
|
|
+ width: 1628,
|
|
|
+ height: 1628,
|
|
|
+ borderColor: "#00af3c",
|
|
|
+ color: "#00af3c",
|
|
|
+ bncolor: "#00af3c",
|
|
|
+ radiusMax: '816px',
|
|
|
+ radiusMin: '782px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps3= ref({
|
|
|
+ top: 296,
|
|
|
+ left: 226,
|
|
|
+ width: 1562,
|
|
|
+ height: 1562,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '782px',
|
|
|
+ radiusMin: '748px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps4= ref({
|
|
|
+ top: 364,
|
|
|
+ left: 294,
|
|
|
+ width: 1465,
|
|
|
+ height: 1465,
|
|
|
+ borderColor: "#ffff00",
|
|
|
+ color: "#ffff00",
|
|
|
+ bncolor: "#ffff00",
|
|
|
+ radiusMax: '731px',
|
|
|
+ radiusMin: '697px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps5= ref({
|
|
|
+ top: 483,
|
|
|
+ left: 413,
|
|
|
+ width: 1391,
|
|
|
+ height: 1391,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '697px',
|
|
|
+ radiusMin: '663px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps6= ref({
|
|
|
+ top: 551,
|
|
|
+ left: 481,
|
|
|
+ width: 1325,
|
|
|
+ height: 1325,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '663px',
|
|
|
+ radiusMin: '629px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ const chartPrpps7= ref({
|
|
|
+ top: 432,
|
|
|
+ left:200,
|
|
|
+ width: 1400,
|
|
|
+ height: 1400,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '612px',
|
|
|
+ radiusMin: '578px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps8= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1271,
|
|
|
+ height: 1271,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '578px',
|
|
|
+ radiusMin: '544px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps9= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1100,
|
|
|
+ height: 1100,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '544px',
|
|
|
+ radiusMin: '510px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps10= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '493px',
|
|
|
+ radiusMin: '459px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps11= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '459px',
|
|
|
+ radiusMin: '425px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps12= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '425px',
|
|
|
+ radiusMin: '391px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+
|
|
|
+ const chartPrpps13= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '374px',
|
|
|
+ radiusMin: '340px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps14= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "blue",
|
|
|
+ color: "blue",
|
|
|
+ bncolor: "blue",
|
|
|
+ radiusMax: '340px',
|
|
|
+ radiusMin: '306px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps15= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '306px',
|
|
|
+ radiusMin: '272px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps16= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '255px',
|
|
|
+ radiusMin: '221px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps17= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "blue",
|
|
|
+ color: "blue",
|
|
|
+ bncolor: "blue",
|
|
|
+ radiusMax: '221px',
|
|
|
+ radiusMin: '187px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ const chartPrpps18= ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '187px',
|
|
|
+ radiusMin: '153px',
|
|
|
+ isFinish: false,
|
|
|
+ status : 'new'
|
|
|
+ })
|
|
|
+ // const chartPrpps19= ref({
|
|
|
+ // top: 612,
|
|
|
+ // left: 531,
|
|
|
+ // width: 1272,
|
|
|
+ // height: 1272,
|
|
|
+ // borderColor: "orange",
|
|
|
+ // color: "orange",
|
|
|
+ // bncolor: "orange",
|
|
|
+ // radiusMax: '306px',
|
|
|
+ // radiusMin: '272px',
|
|
|
+ // isFinish: false,
|
|
|
+ // status : 'new'
|
|
|
+ // })
|
|
|
+ const position = reactive({x: 10, y: 10});
|
|
|
+ let isDragging = false;
|
|
|
+ let originX, originY;
|
|
|
+
|
|
|
+ function jumpTo(path) {
|
|
|
+ console.log(path)
|
|
|
+ router.push({
|
|
|
+ path: path,
|
|
|
+ query: {name: 123}
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const startDrag = (e) => {
|
|
|
+ console.log("e", e)
|
|
|
+ isDragging = true;
|
|
|
+ originX = e.clientX - position.x;
|
|
|
+ originY = e.clientY - position.y;
|
|
|
+ console.log("originX", originX, originY, "originY")
|
|
|
+ document.addEventListener('mousemove', onMouseMove);
|
|
|
+ document.addEventListener('mouseup', stopDrag);
|
|
|
+ };
|
|
|
+
|
|
|
+ const onMouseMove = (e) => {
|
|
|
+ if (isDragging) {
|
|
|
+ position.x = e.clientX - originX;
|
|
|
+ position.y = e.clientY - originY;
|
|
|
+ console.log("position.x", position.x, "position.y", position.y)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const stopDrag = () => {
|
|
|
+ isDragging = false;
|
|
|
+ document.removeEventListener('mousemove', onMouseMove);
|
|
|
+ document.removeEventListener('mouseup', stopDrag);
|
|
|
+ };
|
|
|
+ onMounted(() => {
|
|
|
+ setHeadinfo()
|
|
|
+ })
|
|
|
+ //编辑和保存
|
|
|
+ function save() {
|
|
|
+ status.value = 'save'
|
|
|
+ }
|
|
|
+ function edit() {
|
|
|
+ if(chartPrpps1.value.status == 'edit'){
|
|
|
+ chartPrpps1.value.status = 'new'
|
|
|
+ }else {
|
|
|
+ chartPrpps1.value.status = 'edit'
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-//body,html{
|
|
|
-// overflow: hidden;
|
|
|
-//}
|
|
|
-p{
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-.development_stage{
|
|
|
- background: url('@/assets/images/login/login-home-background.png') no-repeat;
|
|
|
- background-size: 1920px 1080px;
|
|
|
- z-index:10;
|
|
|
- width: 100%;
|
|
|
- height: 1080px;
|
|
|
- .page-content {
|
|
|
- width: 1832px;
|
|
|
- height: 980px;
|
|
|
- position: absolute;
|
|
|
- top: 100px;
|
|
|
- //display: flex;
|
|
|
- //justify-content: ;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- .page-box{
|
|
|
- width: 1832px;
|
|
|
- height: 910px;
|
|
|
- background: black;
|
|
|
- border-radius: 35px 35px 35px 35px;
|
|
|
- //margin: 13px auto 0;
|
|
|
- /*padding-top: 25px;*/
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .text-info{
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28px;
|
|
|
- color: #333333;
|
|
|
- line-height: 46px;
|
|
|
- padding: 0 150px;
|
|
|
- //text-align: center;
|
|
|
- text-indent: 2em;
|
|
|
+ //body,html{
|
|
|
+ // overflow: hidden;
|
|
|
+ //}
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
- .page-main{
|
|
|
- width:1546px;
|
|
|
- height: 681px;
|
|
|
- //border: 1px solid;
|
|
|
- margin: 12px auto;
|
|
|
- background: url('@/assets/images/wakeup/rainbow/backgroud-rainbow.png') no-repeat;
|
|
|
- background-size: 1546px 681px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .page-left{
|
|
|
- width: 1273px;
|
|
|
- height: 571px;
|
|
|
- background: #000000;
|
|
|
- border-radius: 10px 10px 10px 10px;
|
|
|
- margin-left: 26px;
|
|
|
- //border: #FFFFFF 1px solid;
|
|
|
- margin-top: 95px;
|
|
|
- background: url('@/assets/images/wakeup/rainbow/rainbow-border.png') no-repeat;
|
|
|
- background-size:1200px 500px;
|
|
|
- //border: 1px solid #FFFFFF;
|
|
|
|
|
|
+ .development_stage {
|
|
|
+ background: url('@/assets/images/login/login-home-background.png') no-repeat;
|
|
|
+ background-size: 1920px 1080px;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+ height: 1080px;
|
|
|
|
|
|
- }
|
|
|
- .page-right{
|
|
|
- width: 250px;
|
|
|
- height: 681px;
|
|
|
- //border: 1px solid #FFFFFF;
|
|
|
- margin-right: 26px;
|
|
|
- .page-right-top{
|
|
|
- width: 250px;
|
|
|
- height:260px;
|
|
|
- //border: 1px solid white;
|
|
|
- .color-box:nth-child(1){
|
|
|
- margin-top: 24px;
|
|
|
- }
|
|
|
- .color-box{
|
|
|
- //border: 1px solid white;
|
|
|
+ .page-content {
|
|
|
+ width: 1832px;
|
|
|
+ height: 980px;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ //display: flex;
|
|
|
+ //justify-content: ;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-box {
|
|
|
+ width: 1832px;
|
|
|
+ height: 910px;
|
|
|
+ background: black;
|
|
|
+ border-radius: 35px 35px 35px 35px;
|
|
|
+ //margin: 13px auto 0;
|
|
|
+ /*padding-top: 25px;*/
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .text-info {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 46px;
|
|
|
+ padding: 0 150px;
|
|
|
+ //text-align: center;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-main {
|
|
|
+ width: 1546px;
|
|
|
+ height: 681px;
|
|
|
+ //border: 1px solid;
|
|
|
+ margin: 12px auto;
|
|
|
+ background: url('@/assets/images/wakeup/rainbow/backgroud-rainbow.png') no-repeat;
|
|
|
+ background-size: 1546px 681px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .page-left {
|
|
|
+ width: 1273px;
|
|
|
+ height: 571px;
|
|
|
+ background: #000000;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ margin-left: 26px;
|
|
|
+ //border: #FFFFFF 1px solid;
|
|
|
+ margin-top: 95px;
|
|
|
+ background: url('@/assets/images/wakeup/rainbow/rainbow-border.png') no-repeat;
|
|
|
+ background-size: 1200px 500px;
|
|
|
+ //border: 1px solid #FFFFFF;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-right {
|
|
|
+ width: 250px;
|
|
|
+ height: 681px;
|
|
|
+ //border: 1px solid #FFFFFF;
|
|
|
+ margin-right: 26px;
|
|
|
+
|
|
|
+ .page-right-top {
|
|
|
+ width: 250px;
|
|
|
+ height: 260px;
|
|
|
+ //border: 1px solid white;
|
|
|
+ .color-box:nth-child(1) {
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-box {
|
|
|
+ //border: 1px solid white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .box-left {
|
|
|
+ width: 53px;
|
|
|
+ height: 25px;
|
|
|
+ //background: #FFC300;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ //border: 1px solid white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-label {
|
|
|
+ width: 122px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-right-btn-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img-btn {
|
|
|
+ width: 170px;
|
|
|
+ height: 54px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .eraser-box {
|
|
|
+ width: 165px;
|
|
|
+ height: 50px;
|
|
|
+ background: url('@/assets/images/wakeup/rainbow/eraser-shadom.png') no-repeat;
|
|
|
+ background-size: 163px 47px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 165px;
|
|
|
+ height: 83px;
|
|
|
+ position: absolute;
|
|
|
+ top: -33px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- margin-top: 10px;
|
|
|
- .box-left{
|
|
|
- width: 53px;
|
|
|
- height: 25px;
|
|
|
- //background: #FFC300;
|
|
|
- border-radius: 10px 10px 10px 10px;
|
|
|
- //border: 1px solid white;
|
|
|
- }
|
|
|
- .box-label{
|
|
|
- width: 122px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 20px;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-left: 10px;
|
|
|
+ margin-top: 6px;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 244px;
|
|
|
+ height: 92px;
|
|
|
+ z-index: 10;
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- .page-right-btn-group{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .img-btn{
|
|
|
- width: 170px;
|
|
|
- height: 54px;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- .eraser-box{
|
|
|
- width: 165px;
|
|
|
- height: 50px;
|
|
|
- background: url('@/assets/images/wakeup/rainbow/eraser-shadom.png') no-repeat;
|
|
|
- background-size: 163px 47px;
|
|
|
+
|
|
|
+ .fixed-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 125px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
position: relative;
|
|
|
- img{
|
|
|
- width: 165px;
|
|
|
- height: 83px;
|
|
|
- position: absolute;
|
|
|
- top: -33px;
|
|
|
- left: 10px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .draw {
|
|
|
+ width: 109px;
|
|
|
+ height: 170px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 109px;
|
|
|
+ height: 170px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-rabit {
|
|
|
+ position: absolute;
|
|
|
+ right: -27px;
|
|
|
+ //top: -271px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ai-rabit-text {
|
|
|
+ width: 345px;
|
|
|
+ height: 89px;
|
|
|
+ background: #E8EEF7;
|
|
|
+ font-weight: 300;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #000000;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 24px 24px 24px 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 178px;
|
|
|
+ height: 270px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
+
|
|
|
+ .draggable-ball {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none; /* 防止拖拽时选中文字 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart1 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ border: 1px pink solid;
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
+ //background: #ffff00;
|
|
|
+ }
|
|
|
+ .ring-chart2{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 36px;
|
|
|
+ top: 36px;
|
|
|
+ }
|
|
|
+ .ring-chart3{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 70px;
|
|
|
+ top: 69px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .img-box{
|
|
|
- width: 100%;
|
|
|
- height: 100px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-top: 6px;
|
|
|
- z-index:10;
|
|
|
- img{
|
|
|
- width: 244px;
|
|
|
- height: 92px;
|
|
|
- z-index:10;
|
|
|
- }
|
|
|
- }
|
|
|
- .fixed-box{
|
|
|
- width: 100%;
|
|
|
- height: 100px;
|
|
|
- position: absolute;
|
|
|
- bottom: 125px;
|
|
|
- }
|
|
|
- .content-bottom{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- position: relative;
|
|
|
- align-items: center;
|
|
|
- .draw{
|
|
|
- width: 109px;
|
|
|
- height: 170px;
|
|
|
- img{
|
|
|
- width: 109px;
|
|
|
- height: 170px;
|
|
|
+ .ring-chart4{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 117px;
|
|
|
+ left: 117px;
|
|
|
}
|
|
|
- }
|
|
|
+ .ring-chart5{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 154px;
|
|
|
+ top: 154px;
|
|
|
+ }
|
|
|
+ .ring-chart6{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 187px;
|
|
|
+ left: 187px;
|
|
|
+ }
|
|
|
+ .ring-chart7{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ left: 150px;
|
|
|
+ }
|
|
|
+ .ring-chart8{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 214px;
|
|
|
+ left: 214px;
|
|
|
+ }
|
|
|
+ .ring-chart9{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 299px;
|
|
|
+ left: 299px;
|
|
|
+ }
|
|
|
+ .ring-chart10{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+ .ring-chart11{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+ .ring-chart12{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
|
|
|
- .ai-rabit{
|
|
|
- position: absolute;
|
|
|
- right: -27px;
|
|
|
- //top: -271px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .ai-rabit-text{
|
|
|
- width: 345px;
|
|
|
- height: 89px;
|
|
|
- background: #E8EEF7;
|
|
|
- font-weight: 300;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-size: 22px;
|
|
|
- color: #000000;
|
|
|
- padding:16px;
|
|
|
- border-radius: 24px 24px 24px 24px;
|
|
|
+ .ring-chart13{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+ .ring-chart14{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+ .ring-chart15{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+ .ring-chart16{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
}
|
|
|
- img{
|
|
|
- width: 178px;
|
|
|
- height: 270px;
|
|
|
+ .ring-chart17{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+ .ring-chart18{
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .draggable-ball {
|
|
|
- position: absolute;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none; /* 防止拖拽时选中文字 */
|
|
|
- }
|
|
|
- .ring-chart1 {
|
|
|
- width: 1832px;
|
|
|
- height: 800px;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top : 0px;
|
|
|
- //background: #ffff00;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
+ .bg-color-style{
|
|
|
+ color:black;
|
|
|
+ background: #ffff00;
|
|
|
+ }
|
|
|
+ #eraser{
|
|
|
+ position: absolute;
|
|
|
+ top:10px;
|
|
|
+ text-align:center;
|
|
|
+ line-height:50px;
|
|
|
+ left:10px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ //background: #FFFFFF;
|
|
|
+ border:1px solid #00afff;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .bg-color-style1{
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
</style>
|
hizhangling