Добавил фоновые изображения (обои)

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -14,13 +14,35 @@
                             <div class="partHeader">Цвет</div>
 
                             <el-form-item label="Текст">
-                                <el-color-picker v-model="textColor" color-format="hex" :predefine="predefineTextColors"></el-color-picker>
-                                <span class="color-picked"><b>{{ textColor }}</b></span>
+                                <el-col :span="12">
+                                    <el-color-picker v-model="textColor" color-format="hex" :predefine="predefineTextColors"></el-color-picker>
+                                    <span class="color-picked"><b>{{ textColor }}</b></span>
+                                </el-col>
+                                <el-col :span="5">
+                                    <span style="position: relative; top: 20px;">Обои:</span>
+                                </el-col>
                             </el-form-item>
 
                             <el-form-item label="Фон">
-                                <el-color-picker v-model="backgroundColor" color-format="hex" :predefine="predefineBackgroundColors"></el-color-picker>
-                                <span class="color-picked"><b>{{ backgroundColor }}</b></span>
+                                <el-col :span="12">
+                                    <el-color-picker v-model="backgroundColor" color-format="hex" :predefine="predefineBackgroundColors" :disabled="wallpaper != ''"></el-color-picker>
+                                    <span v-show="wallpaper == ''" class="color-picked"><b>{{ backgroundColor }}</b></span>
+                                </el-col>
+
+                                <el-col :span="11">
+                                    <el-select v-model="wallpaper">
+                                        <el-option label="Нет" value=""></el-option>
+                                        <el-option label="1" value="paper1"></el-option>
+                                        <el-option label="2" value="paper2"></el-option>
+                                        <el-option label="3" value="paper3"></el-option>
+                                        <el-option label="4" value="paper4"></el-option>
+                                        <el-option label="5" value="paper5"></el-option>
+                                        <el-option label="6" value="paper6"></el-option>
+                                        <el-option label="7" value="paper7"></el-option>
+                                        <el-option label="8" value="paper8"></el-option>
+                                        <el-option label="9" value="paper9"></el-option>
+                                    </el-select>
+                                </el-col>
                             </el-form-item>
                         </el-form>
 

client/components/Reader/TextPage/TextPage.vue

@@ -375,7 +375,7 @@ class TextPage extends Vue {
     }
 
     setBackground() {
-        this.background = `<div class="layout" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` + 
+        this.background = `<div class="layout ${this.wallpaper}" style="width: ${this.realWidth}px; height: ${this.realHeight}px;` + 
             ` background-color: ${this.backgroundColor}"></div>`;
     }
 
@@ -1002,8 +1002,57 @@ class TextPage extends Vue {
 .back {
     z-index: 5;
 }
+
 .events {
     z-index: 20;
     background-color: rgba(0,0,0,0);
 }
+
+</style>
+
+<style>
+.paper1 {
+    background: url("images/paper1.jpg") center;
+    background-size: cover;
+}
+
+.paper2 {
+    background: url("images/paper2.jpg") center;
+    background-size: cover;
+}
+
+.paper3 {
+    background: url("images/paper3.jpg") center;
+    background-size: cover;
+}
+
+.paper4 {
+    background: url("images/paper4.jpg") center;
+    background-size: cover;
+}
+
+.paper5 {
+    background: url("images/paper5.jpg") center;
+    background-size: cover;
+}
+
+.paper6 {
+    background: url("images/paper6.jpg") center;
+    background-size: cover;
+}
+
+.paper7 {
+    background: url("images/paper7.jpg") center;
+    background-size: cover;
+}
+
+.paper8 {
+    background: url("images/paper8.jpg") center;
+    background-size: cover;
+}
+
+.paper9 {
+    background: url("images/paper9.jpg");
+}
+
 </style>

client/store/modules/reader.js

@@ -127,6 +127,7 @@ const webFonts = [
 const settingDefaults = {
         textColor: '#000000',
         backgroundColor: '#EBE2C9',
+        wallpaper: '',
         fontStyle: '',// 'italic'
         fontWeight: '',// 'bold'
         fontSize: 20,// px