dos

Public/static/js/common.js

@@ -87,6 +87,7 @@ let first = true;
 let startX;
 let timer;
 let mainColor = 'red';
+let colorIndex = 4;
 let colorList = {
     'red': [
         '#854337',
@@ -95,6 +96,46 @@ let colorList = {
         '#e5382a',
         '#fa675c',
         '#ffbaaf'
+    ],
+    'yellow': [
+        '#cf9b0d',
+        '#e4a701',
+        '#ffc411',
+        '#f8d35c',
+        '#fae28e',
+        '#f4d895'
+    ],
+    'lightgreen': [
+        '#6a7c42',
+        '#86995c',
+        '#9fcd63',
+        '#b5d986',
+        '#92be71',
+        '#bacaa8'
+    ],
+    'darkgreen': [
+        '#3d6743',
+        '#368a41',
+        '#4eac5b',
+        '#6cba77',
+        '#8ecc97',
+        '#a6c6ab'
+    ],
+    'blue': [
+        '#295a9c',
+        '#458baa',
+        '#2fa7de',
+        '#6fb0da',
+        '#88b7db',
+        '#b1dce3'
+    ],
+    'purple': [
+        '#543c64',
+        '#6d3f82',
+        '#986cb2',
+        '#856cb9',
+        '#9c87c6',
+        '#b3a5ce'
     ]
 }
 const fontSize = parseFloat($('html').css('fontSize'));
@@ -137,11 +178,28 @@ $(document).ready(function () {
     $('.personal-page .btn-yellow').on('click', {
         color: 'yellow'
     }, changeMainColor);
+    //青绿
+    $('.personal-page .btn-lightgreen').on('click', {
+        color: 'lightgreen'
+    }, changeMainColor);
+    //深绿
+    $('.personal-page .btn-drakgreen').on('click', {
+        color: 'drakgreen'
+    }, changeMainColor);
+    //蓝色
+    $('.personal-page .btn-blue').on('click', {
+        color: 'blue'
+    }, changeMainColor);
+    //紫色
+    $('.personal-page .btn-purple').on('click', {
+        color: 'purple'
+    }, changeMainColor);
 });
 
 function changeMainColor(event) {
-    console.log(event.data.color);
-
+    mainColor = event.data.color;
+    $('.personal-page').css('background', colorList[mainColor][colorIndex - 1]);
+    $('.personal-page .colorbar').css('background', 'url(../image2/colorbar-' + mainColor + '.png) left top no-repeat');
 }
 
 function chooseColorStart(e) {
@@ -167,22 +225,22 @@ function chooseColorMove(e) {
         } else if (left > 26.62) {
             left = 26.62;
         }
-        let index = 4;
+
         if (left < 6.59) {
-            index = 1;
+            colorIndex = 1;
         } else if (left > 6.59 && left < 11) {
-            index = 2;
+            colorIndex = 2;
         } else if (left > 11 && left < 15.46) {
-            index = 3;
+            colorIndex = 3;
         } else if (left > 15.46 && left < 19.91) {
-            index = 4;
+            colorIndex = 4;
         } else if (left > 19.91 && left < 24.38) {
-            index = 5;
+            colorIndex = 5;
         } else if (left > 24.38) {
-            index = 6;
+            colorIndex = 6;
         }
 
-        $('.personal-page').css('background', colorList[mainColor][index - 1]);
+        $('.personal-page').css('background', colorList[mainColor][colorIndex - 1]);
 
         $('.personal-page .btn-choose-color').css('left', left + 'rem');
         startX = moveX;