From d811be02bddb3124d8643d1e3731d85d3ef73f7d Mon Sep 17 00:00:00 2001
From: RainSun <zhaoyingbo@live.cn>
Date: Sun, 18 Oct 2020 15:40:21 +0800
Subject: [PATCH] update persional

---
 package.json                      |   2 +-
 public/index.html                 |   3 +-
 src/components/Drawer.vue         | 180 +++++++++++++++++++-----------
 src/lib/getStore.js               |   8 +-
 src/views/Login/Login.vue         |  75 +++++++++----
 src/views/MyAccount/MyAccount.vue |  89 +++++++++------
 src/views/Personal/Personal.vue   | 123 ++++++++++++++++----
 7 files changed, 325 insertions(+), 155 deletions(-)

diff --git a/package.json b/package.json
index a2c04a9..eb5e392 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "crypto-js": "^4.0.0",
     "element-ui": "^2.13.0",
     "es6-promise": "^4.2.8",
-    "lrz": "^4.9.40",
+    "lrz": "^4.9.41",
     "register-service-worker": "^1.6.2",
     "url-search-params-polyfill": "^8.0.0",
     "vue": "^2.6.10",
diff --git a/public/index.html b/public/index.html
index afd1e8c..7a57f1c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,7 @@
   <!-- 描述 -->
   <meta itemprop="description" content="为长理同学提供课表代理查询服务" />
   <meta name="referrer" content="no-referrer">
-  
+
   <script>
     var _hmt = _hmt || [];
     (function () {
@@ -27,6 +27,7 @@
       s.parentNode.insertBefore(hm, s);
     })();
   </script>
+
   <script>
     try {
       console.log('%cInspire Studio Copyright \xa9 2019-%s',
diff --git a/src/components/Drawer.vue b/src/components/Drawer.vue
index e534cc5..a3b49bb 100644
--- a/src/components/Drawer.vue
+++ b/src/components/Drawer.vue
@@ -1,57 +1,99 @@
 <template>
-	<div class="drawer">
-		<div class="mask" :class="mask_class" @click="closeDrawer()" v-if="drawer_state">
-			<div class="w">
-				<!-- 抽屉主体 -->
-				<div class="main" :class="main_class" @click.stop>
-					<div class="title">
-						<div class="logo-box">
-							<img src="../assets/logo.png" alt />
-						</div>
-						<p class="app-name">Cherry</p>
-						<p class="version">Version 3.5</p>
-					</div>
-					<div class="list">
-						<!-- <div class="list-item">
+  <div class="drawer">
+    <div
+      class="mask"
+      :class="mask_class"
+      @click="closeDrawer()"
+      v-if="drawer_state"
+    >
+      <div class="w">
+        <!-- 抽屉主体 -->
+        <div
+          class="main"
+          :class="main_class"
+          @click.stop
+        >
+          <div class="title">
+            <div class="logo-box">
+              <img
+                src="../assets/logo.png"
+                alt
+              />
+            </div>
+            <p class="app-name">Cherry</p>
+            <p class="version">Version 3.7</p>
+          </div>
+          <div class="list">
+            <!-- <div class="list-item">
               <icon class="info" name="info"></icon>
               <p>账户设置</p>
             </div> -->
-						<div class="list-item" @click="goToGame()">
-							<icon class="game" name="game"></icon>
-							<p>课表小游戏</p>
-						</div>
-						<div class="list-item" @click="goToCanary()">
-							<icon class="game" name="canary"></icon>
-							<p>Canary密码本</p>
-						</div>
-					</div>
-					<div class="bottom-box" v-if="user_info">
-						<div class="logout-dialog to-show" v-if="dialog_state">
-							<p class="label">警告</p>
-							<p class="content">该操作将清除您所有的个人信息，是否继续</p>
-							<div class="confirm-box">
-								<p class="cancel" @click="dialog_state = false">取消</p>
-								<p class="confirm" @click="logout">继续</p>
-							</div>
-						</div>
-						<div class="bottom-button" @click="dialog_state = true">
-							<icon class="logout" name="logout"></icon>
-							<p>退出登录</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+            <div
+              class="list-item"
+              @click="goToGame()"
+            >
+              <icon
+                class="game"
+                name="game"
+              ></icon>
+              <p>课表小游戏</p>
+            </div>
+            <div
+              class="list-item"
+              @click="goToCanary()"
+            >
+              <icon
+                class="game"
+                name="canary"
+              ></icon>
+              <p>Canary密码本</p>
+            </div>
+          </div>
+          <div
+            class="bottom-box"
+            v-if="user_info"
+          >
+            <div
+              class="logout-dialog to-show"
+              v-if="dialog_state"
+            >
+              <p class="label">警告</p>
+              <p class="content">该操作将清除您所有的个人信息，是否继续</p>
+              <div class="confirm-box">
+                <p
+                  class="cancel"
+                  @click="dialog_state = false"
+                >取消</p>
+                <p
+                  class="confirm"
+                  @click="logout"
+                >继续</p>
+              </div>
+            </div>
+            <div
+              class="bottom-button"
+              @click="dialog_state = true"
+            >
+              <icon
+                class="logout"
+                name="logout"
+              ></icon>
+              <p>退出登录</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from "vuex";
 import { getGradeInitData } from '@/lib/utils.js'
 import { replaceState } from '@/lib/getStore.js'
 export default {
   name: "Drawer",
-  data() {
+  data () {
     return {
       mask_class: '',
       main_class: '',
@@ -59,50 +101,50 @@ export default {
     }
   },
   computed: {
-    ...mapState(["drawer_state","user_info"])
+    ...mapState(["drawer_state", "user_info"])
   },
   methods: {
-    ...mapActions(["setDrawerState","setUserInfo",'setGrade','setSchedule']),
-	// 关闭抽屉
-    closeDrawer() {
+    ...mapActions(["setDrawerState", "setUserInfo", 'setGrade', 'setSchedule']),
+    // 关闭抽屉
+    closeDrawer () {
       this.dialog_state = false
       this.mask_class = 'to-shallow'
       this.main_class = 'to-left'
-      setTimeout(()=>{
+      setTimeout(() => {
         this.setDrawerState([false, this])
       }, 300)
     },
-    goToCanary() {
+    goToCanary () {
       window.open('https://canary.lacus.icu')
     },
     // 跳转到游戏
-		goToGame() {
+    goToGame () {
       this.setDrawerState([false, this])
-			this.$router.push('/game')
+      this.$router.push('/game')
     },
     // 退出登录
-    logout() {
+    logout () {
       localStorage.clear();
       replaceState.call(this);
       this.$router.replace('/login')
     },
   },
-  created() {
+  created () {
   },
   watch: {
-    drawer_state: function() {
-	  if(this.drawer_state) {
+    drawer_state: function () {
+      if (this.drawer_state) {
         // 展开
         this.mask_class = 'to-deep'
         this.main_class = 'to-right'
       }
-	},
+    },
   }
 };
 </script>
 
 <style scoped lang="scss" type="text/scss">
-	@import "../style/main";
+@import "../style/main";
 .drawer {
   .mask {
     position: fixed;
@@ -187,28 +229,30 @@ export default {
           bottom: 0;
           left: 0;
           .logout-dialog {
-            margin: .5rem;
-            -moz-box-shadow:3px 4px 11px $home-card-boxshadow-color; -webkit-box-shadow:3px 4px 11px $home-card-boxshadow-color; box-shadow:3px 4px 11px $home-card-boxshadow-color;
-            border-radius: .1rem;
-            padding: .3rem;
+            margin: 0.5rem;
+            -moz-box-shadow: 3px 4px 11px $home-card-boxshadow-color;
+            -webkit-box-shadow: 3px 4px 11px $home-card-boxshadow-color;
+            box-shadow: 3px 4px 11px $home-card-boxshadow-color;
+            border-radius: 0.1rem;
+            padding: 0.3rem;
             box-sizing: border-box;
             border: 1px solid $home-card-border-color;
             .label {
-              font-size: .4rem;
+              font-size: 0.4rem;
             }
             .content {
-              font-size:  .3rem;
-              margin-top: .3rem;
+              font-size: 0.3rem;
+              margin-top: 0.3rem;
             }
             .confirm-box {
               display: flex;
               align-items: center;
               justify-content: flex-end;
-              font-size: .3rem;
-              margin-top: .3rem;
+              font-size: 0.3rem;
+              margin-top: 0.3rem;
               .cancel {
                 color: #989898;
-                margin-right: .3rem;
+                margin-right: 0.3rem;
               }
               .confirm {
                 color: $red;
@@ -300,7 +344,7 @@ export default {
 
 @keyframes toShow {
   0% {
-    opacity: .3;
+    opacity: 0.3;
   }
   100% {
     opacity: 1;
diff --git a/src/lib/getStore.js b/src/lib/getStore.js
index 4bb162e..0d10c46 100644
--- a/src/lib/getStore.js
+++ b/src/lib/getStore.js
@@ -1,5 +1,5 @@
 // 刷新本页vuex
-export function replaceState() {
+export function replaceState () {
   let state = {}
   for (let key of Object.keys(this.$store.state)) {
     let content = JSON.parse(localStorage.getItem("cherry_" + key))
@@ -10,13 +10,13 @@ export function replaceState() {
       // 隐藏周末
       hide_weekend: false,
       // 课表背景链接
-      user_bg_url: '',
+      user_bg_url: 'https://neko.lacus.site/v1/images/2020101722030968.jpg',
       // 是否开启了背景
       user_bg_switch: false,
       // 课程透明度
-      lesson_opacity: 1,
+      lesson_opacity: 0.8,
       // 背景主题
-      user_bg_is_dark: false,
+      user_bg_is_dark: true,
       // 课程以及节数的显示方式 无 衬底 阴影 => 0 1 2
       bar_show_style: 0,
       // 黑暗模式
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index e7161d8..645f6bd 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -7,32 +7,61 @@
     </div>
     <!-- <header><i class="el-icon-back" @click="turnToHome()"></i></header> -->
     <div class="logo-box">
-      <img src="../../assets/logo.png" alt class="logo" />
+      <img
+        src="../../assets/logo.png"
+        alt
+        class="logo"
+      />
     </div>
     <div class="login-box">
       <div class="title">登录</div>
       <div class="label">教务账号*</div>
-      <input type="text" name="cid" v-model.trim="cid" />
-      <div class="tips">由于教务问题20级同学还无法使用，请在此直接输入2020，点击登录即可体验</div>
+      <input
+        type="text"
+        name="cid"
+        v-model.trim="cid"
+      />
+      <!-- <div class="tips">由于教务问题20级同学还无法使用，请在此直接输入2020，点击登录即可体验</div> -->
       <div class="label">教务密码*</div>
-      <input type="password" name="pwd" v-model.trim="pwd" />
+      <input
+        type="password"
+        name="pwd"
+        v-model.trim="pwd"
+      />
       <div class="label">手机号码(非必填，仅在登录失败时更新教务)</div>
-      <input type="password" name="phone" v-model.trim="phone" />
+      <input
+        type="password"
+        name="phone"
+        v-model.trim="phone"
+      />
     </div>
     <div class="submit-box">
-      <div class="submit" @click="submit()">登录</div>
+      <div
+        class="submit"
+        @click="submit()"
+      >登录</div>
     </div>
     <div class="copyRight">
-      <p>Version&nbsp;3.5</p>
-      <p>Inspire Studio</p>
+      <p>Version&nbsp;3.7</p>
+      <p>RainSun & LollipopKit</p>
       <p>&copy;2020 All Rights Reserved.</p>
     </div>
     <FooterSpace></FooterSpace>
-    <el-dialog title="服务器开小差了" :visible.sync="net_error_dialog" width="90%">
+    <el-dialog
+      title="服务器开小差了"
+      :visible.sync="net_error_dialog"
+      width="90%"
+    >
       <span>{{net_error_dialog_content}}</span>
-      <span slot="footer" class="dialog-footer">
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button @click="net_error_dialog = false">狠心拒绝</el-button>
-        <el-button type="primary" @click="openQQ()">欣然接受</el-button>
+        <el-button
+          type="primary"
+          @click="openQQ()"
+        >欣然接受</el-button>
       </span>
     </el-dialog>
   </div>
@@ -51,7 +80,7 @@ import { test_info } from "@/lib/testInfo.js";
 
 export default {
   name: "login",
-  data() {
+  data () {
     return {
       cid: "",
       pwd: "",
@@ -74,7 +103,7 @@ export default {
       "setPersonalClass"
     ]),
     // 初始化
-    init() {
+    init () {
       // 刷新本页vuex
       replaceState.call(this);
       // 设置footerNav
@@ -82,7 +111,7 @@ export default {
     },
 
     // 用户点击rushB
-    submit() {
+    submit () {
       if (this.cid == '2020') {
         let load = Loading.service({
           background: "rgba(236,245,255,.7)",
@@ -135,7 +164,7 @@ export default {
     },
 
     // 处理服务器返回的数据
-    manageRes(data, load) {
+    manageRes (data, load) {
       // 登录成功
       let user_info = {
         login_time: new Date().getTime(),
@@ -165,7 +194,7 @@ export default {
     },
 
     // 刷新课表
-    refreshSchedule() {
+    refreshSchedule () {
       // 获取源课表
       let row_lesson_info = JSON.parse(JSON.stringify(this.row_lesson_info));
       if (!row_lesson_info) {
@@ -204,20 +233,20 @@ export default {
     },
 
     // 强制跳转回主页
-    turnToHome() {
+    turnToHome () {
       this.$router.replace({ path: "/", query: { from_login: true } });
     },
 
     // 打开qq群链接
-    openQQ() {
+    openQQ () {
       window.open("https://jq.qq.com/?_wv=1027&k=5Jeoz9R");
     }
   },
-  created() {
+  created () {
     this.init();
   },
-  mounted() {},
-  activated() {},
+  mounted () { },
+  activated () { },
   components: {
     FooterSpace
   }
@@ -295,7 +324,7 @@ export default {
   }
   .login-box {
     width: 85%;
-    height: 9.5rem;
+    height: 8.5rem;
     background: #fff;
     margin: 0 auto;
     margin-top: -1rem;
@@ -319,7 +348,7 @@ export default {
     }
     .tips {
       font-size: 0.3rem;
-      margin: .2rem 0;
+      margin: 0.2rem 0;
       color: #f86b55;
     }
     input {
diff --git a/src/views/MyAccount/MyAccount.vue b/src/views/MyAccount/MyAccount.vue
index 9a6c07d..8c366c8 100644
--- a/src/views/MyAccount/MyAccount.vue
+++ b/src/views/MyAccount/MyAccount.vue
@@ -1,15 +1,25 @@
 <template>
   <div class="myaccount">
     <header>
-      <img src="../../assets/logo_nobg.png" alt="logo" />
+      <img
+        src="../../assets/logo_nobg.png"
+        alt="logo"
+      />
       <p>
         Cherry
-        <span>v3.5</span>
+        <span>v3.7</span>
       </p>
       <div class="auth">By:Inspire Studio</div>
-      <img src="../../assets/wave.gif" mode="scaleToFill" class="gif-wave"/>
+      <img
+        src="../../assets/wave.gif"
+        mode="scaleToFill"
+        class="gif-wave"
+      />
     </header>
-    <div class="user-box shadow-warp" v-if="Object.keys(this.user_info).length != 0">
+    <div
+      class="user-box shadow-warp"
+      v-if="Object.keys(this.user_info).length != 0"
+    >
       <div class="cid-box">
         <div class="cid">{{user_info.id}}</div>
         <div class="label">
@@ -25,14 +35,25 @@
       </div>
     </div>
     <div class="functions-box">
-      <div class="item" @click="goTo('/personal')">
+      <div
+        class="item"
+        @click="goTo('/personal')"
+      >
         <i class="el-icon-s-operation first-function-icon"></i>
         <p>个性化</p>
         <i class="el-icon-arrow-right arrow-right"></i>
       </div>
     </div>
-    <div class="logout" @click="logout()" v-if="Object.keys(this.user_info).length != 0">退出登录</div>
-    <div class="logout" @click="goTo('/login')" v-else>立即登录</div>
+    <div
+      class="logout"
+      @click="logout()"
+      v-if="Object.keys(this.user_info).length != 0"
+    >退出登录</div>
+    <div
+      class="logout"
+      @click="goTo('/login')"
+      v-else
+    >立即登录</div>
     <div class="qq">
       反馈及获取最新功能=>
       <span @click="openQQ()">1030523678</span>
@@ -60,7 +81,7 @@ import { loginInterceptor } from "@/lib/utils.js";
 import { replaceState } from '@/lib/getStore.js'
 export default {
   name: "myaccount",
-  data() {
+  data () {
     return {
       web_addr: "https://cherry.lacus.site"
     };
@@ -70,13 +91,13 @@ export default {
   },
   methods: {
     ...mapActions(["setCurrentPage"]),
-    init() {
+    init () {
       // 刷新本页vuex
       replaceState.call(this)
       this.setCurrentPage(["myaccount", this]);
     },
     // 登出
-    logout() {
+    logout () {
       localStorage.clear();
       replaceState.call(this);
       this.$message({
@@ -86,24 +107,24 @@ export default {
       this.$router.replace("/login");
     },
     // 打开qq群链接
-    openQQ() {
+    openQQ () {
       window.open("https://jq.qq.com/?_wv=1027&k=5Jeoz9R");
     },
-    goTo(url) {
+    goTo (url) {
       this.$router.push(url);
     },
-    onCopyUrl(e) {
+    onCopyUrl (e) {
       this.$message.success("复制成功！");
     },
-    onErrorUrl(e) {
+    onErrorUrl (e) {
       this.$message.success("复制失败！");
     }
   },
-  created() {},
-  mounted() {
+  created () { },
+  mounted () {
     this.init();
   },
-  activated() {
+  activated () {
     this.init();
   },
   components: {
@@ -150,15 +171,15 @@ export default {
       font-size: 0.5rem;
       margin-top: 0.3rem;
       font-weight: 300;
-	  margin-bottom: 1rem;
+      margin-bottom: 1rem;
+    }
+    .gif-wave {
+      position: absolute;
+      bottom: 0;
+      mix-blend-mode: screen;
+      height: 2rem;
+      width: 100%;
     }
-	.gif-wave {
-		position: absolute;
-		bottom: 0;
-		mix-blend-mode: screen;
-		height: 2rem;
-		width: 100%;
-	}
   }
 
   .user-box {
@@ -206,9 +227,9 @@ export default {
   }
   .functions-box {
     width: 80%;
-    margin: .5rem auto;
+    margin: 0.5rem auto;
     background: #fff;
-    border-radius: .2rem;
+    border-radius: 0.2rem;
     color: #999;
     .item {
       display: flex;
@@ -216,19 +237,19 @@ export default {
       align-items: center;
       height: 1rem;
       .first-function-icon {
-        font-size:.5rem;
-        margin-left: .3rem;
+        font-size: 0.5rem;
+        margin-left: 0.3rem;
       }
       p {
-        font-size: .35rem;
-        margin-left: .3rem;
+        font-size: 0.35rem;
+        margin-left: 0.3rem;
       }
       .arrow-right {
         position: absolute;
-        right: .3rem;
-        font-size: .5rem;
+        right: 0.3rem;
+        font-size: 0.5rem;
       }
-    } 
+    }
   }
   .logout {
     background-image: $gradualGreen;
diff --git a/src/views/Personal/Personal.vue b/src/views/Personal/Personal.vue
index 25aa2c6..38aa32c 100644
--- a/src/views/Personal/Personal.vue
+++ b/src/views/Personal/Personal.vue
@@ -3,7 +3,10 @@
     <header>
       <div class="w">
         <div class="icon-box">
-          <i class="el-icon-back title-icon" @click="back()"></i>
+          <i
+            class="el-icon-back title-icon"
+            @click="back()"
+          ></i>
         </div>
         <div class="title-box">个性化</div>
       </div>
@@ -12,35 +15,50 @@
     <div class="main">
       <div class="topic">课表设置</div>
       <div class="option">
-        <icon name="firstPrize" class="option-icon"></icon>
+        <!-- <icon name="firstPrize" class="option-icon"></icon> -->
         <div class="label">隐藏周末</div>
         <div class="handle-space">
-          <el-switch v-model="hide_weekend" active-color="#39b54a" @change="modifyConfig()"></el-switch>
+          <el-switch
+            v-model="hide_weekend"
+            active-color="#39b54a"
+            @change="modifyConfig()"
+          ></el-switch>
         </div>
       </div>
       <div class="option">
-        <icon name="firstPrize" class="option-icon"></icon>
+        <!-- <icon name="firstPrize" class="option-icon"></icon> -->
         <div class="label">开启背景图</div>
         <div class="handle-space">
-          <el-switch v-model="user_bg_switch" active-color="#39b54a" @change="modifyConfig()"></el-switch>
+          <el-switch
+            v-model="user_bg_switch"
+            active-color="#39b54a"
+            @change="modifyConfig()"
+          ></el-switch>
         </div>
       </div>
       <div class="option">
-        <icon name="firstPrize" class="option-icon"></icon>
+        <!-- <icon name="firstPrize" class="option-icon"></icon> -->
         <div class="label">深色背景适配</div>
         <div class="handle-space">
-          <el-switch v-model="user_bg_is_dark" active-color="#39b54a" @change="modifyConfig()"></el-switch>
+          <el-switch
+            v-model="user_bg_is_dark"
+            active-color="#39b54a"
+            @change="modifyConfig()"
+          ></el-switch>
         </div>
       </div>
       <div class="option">
-        <icon name="firstPrize" class="option-icon"></icon>
+        <!-- <icon name="firstPrize" class="option-icon"></icon> -->
         <div class="label">课表透明度</div>
         <div class="handle-space">
-          <Slider :value="settings.lesson_opacity" @change="modifyOpacity"></Slider>
+          <Slider
+            :value="settings.lesson_opacity"
+            @change="modifyOpacity"
+          ></Slider>
         </div>
       </div>
       <div class="option">
-        <icon name="firstPrize" class="option-icon"></icon>
+        <!-- <icon name="firstPrize" class="option-icon"></icon> -->
         <Select
           label="时间显示类型"
           :options="bar_show_style_list"
@@ -50,17 +68,43 @@
       </div>
 
       <div class="option">
-        <icon name="firstPrize" class="option-icon"></icon>
-        <Input label="图片网络地址" :value="settings.user_bg_url" @change="modifyUserBgUrl" />
+        <!-- <icon name="firstPrize" class="option-icon"></icon> -->
+        <Input
+          label="图片网络地址"
+          :value="settings.user_bg_url"
+          @change="modifyUserBgUrl"
+        />
       </div>
+      <!-- <div
+        class="option"
+        @click="clickFile"
+      >
+        <div class="img-box">
+          <icon
+            name='camera_green'
+            class="img-box-icon"
+          />
+        </div>
+        <input
+          type="file"
+          style="display: none;"
+          accept="image/*"
+          @change="processFile"
+          id="file"
+        >
+      </div> -->
 
       <div class="topic">应用设置</div>
 
       <div class="option">
-        <icon name="firstPrize" class="option-icon"></icon>
+        <!-- <icon name="firstPrize" class="option-icon"></icon> -->
         <div class="label">关闭TAB文字</div>
         <div class="handle-space">
-          <el-switch v-model="hide_tab_text" active-color="#39b54a" @change="modifyConfig()"></el-switch>
+          <el-switch
+            v-model="hide_tab_text"
+            active-color="#39b54a"
+            @change="modifyConfig()"
+          ></el-switch>
         </div>
       </div>
     </div>
@@ -79,10 +123,11 @@ import { mapState, mapActions } from "vuex";
 import { replaceState } from "@/lib/getStore.js";
 import { Loading } from "element-ui";
 import { interceptTime } from "@/lib/utils.js";
+import lrz from "lrz";
 
 export default {
   name: "personal",
-  data() {
+  data () {
     return {
       // 隐藏周末
       hide_weekend: false,
@@ -110,6 +155,7 @@ export default {
       ],
       // 黑暗模式
       dark_mode: false,
+      lrz_file: null,
     };
   },
   computed: {
@@ -118,7 +164,7 @@ export default {
   methods: {
     ...mapActions(["setUserInfo", "setCurrentPage", "setSettings"]),
     // 初始化课表
-    init() {
+    init () {
       // 刷新本页vuex
       replaceState.call(this);
       // 设置footerNav
@@ -146,7 +192,7 @@ export default {
       this.$router.replace("/login");
     },
 
-    initData() {
+    initData () {
       this.hide_weekend = this.settings.hide_weekend;
       this.user_bg_switch = this.settings.user_bg_switch;
       this.user_bg_is_dark = this.settings.user_bg_is_dark;
@@ -154,11 +200,11 @@ export default {
       this.hide_tab_text = this.settings.hide_tab_text;
     },
 
-    back() {
+    back () {
       this.$router.go(-1);
     },
 
-    modifyConfig() {
+    modifyConfig () {
       let new_settings = {
         ...this.settings,
         hide_weekend: this.hide_weekend,
@@ -171,7 +217,7 @@ export default {
       this.$snakebar('个性化设置成功')
     },
 
-    modifyOpacity(e) {
+    modifyOpacity (e) {
       let new_settings = {
         ...this.settings,
         lesson_opacity: Number(e),
@@ -181,7 +227,7 @@ export default {
       this.$snakebar('个性化设置成功')
     },
 
-    modifyBarShowStyle(e) {
+    modifyBarShowStyle (e) {
       let new_settings = {
         ...this.settings,
         bar_show_style: Number(e),
@@ -191,7 +237,7 @@ export default {
       this.$snakebar('个性化设置成功')
     },
 
-    modifyUserBgUrl(e) {
+    modifyUserBgUrl (e) {
       let new_settings = {
         ...this.settings,
         user_bg_url: e,
@@ -200,8 +246,24 @@ export default {
       console.log("设置信息写入完成");
       this.$snakebar('个性化设置成功')
     },
+
+    clickFile () {
+      document.getElementById("file").click();
+    },
+    // 处理图片文件
+    processFile: async function (e) {
+      let file = e.target.files[0];
+      if (!file) return;
+      let name = file.name;
+      console.log("文件压缩开始");
+      file = await lrz(file);
+      file = file.file;
+      file = new File([file], name);
+      this.lrz_file = file
+      console.log("文件压缩完成", file);
+    },
   },
-  created() {
+  created () {
     this.init();
   },
   components: {
@@ -264,7 +326,7 @@ export default {
     max-width: 425px;
     margin: 0 0.7rem;
     .topic {
-      margin-top: .5rem;
+      margin-top: 0.5rem;
       font-size: 0.35rem;
       color: $green;
       margin-bottom: 0.5rem;
@@ -289,6 +351,19 @@ export default {
         align-items: center;
         justify-content: flex-end;
       }
+      .img-box {
+        margin-top: 0.5rem;
+        height: 1.5rem;
+        width: 1.5rem;
+        border: 2px #67c23a solid;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .img-box-icon {
+          height: 0.7rem;
+          width: 0.7rem;
+        }
+      }
     }
   }
 }