替换首页相关样式

2021-02-23 00:24:41 +08:00 · 2021-02-23 00:24:41 +08:00 · 6ab3dcb472
parent 1d22d74c1c
commit 6ab3dcb472
18 changed files with 83 additions and 416 deletions
--- a/hoj-springboot/DataBackup/src/main/java/top/hcode/hoj/shiro/JwtFilter.java
+++ b/hoj-springboot/DataBackup/src/main/java/top/hcode/hoj/shiro/JwtFilter.java
@ -44,39 +44,41 @@ public class JwtFilter extends AuthenticatingFilter {

    @Autowired
    private RedisUtils redisUtils;
+
    @Override
    protected AuthenticationToken createToken(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {
        // 获取 token
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        String jwt = request.getHeader("Authorization");
-        if(StringUtils.isEmpty(jwt)){
+        if (StringUtils.isEmpty(jwt)) {
            return null;
        }
        return new JwtToken(jwt);
    }
+
    @Override
    protected boolean onAccessDenied(ServletRequest servletRequest, ServletResponse servletResponse) throws Exception {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        String token = request.getHeader("Authorization");
-        if(StringUtils.isEmpty(token)) {
+        if (StringUtils.isEmpty(token)) {
            return true;
        } else {
            // 判断是否已过期
            Claims claim = jwtUtils.getClaimByToken(token);
            HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
            HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
-            if(claim == null || jwtUtils.isTokenExpired(claim.getExpiration())) {
+            if (claim == null || jwtUtils.isTokenExpired(claim.getExpiration())) {
                httpResponse.setContentType("application/json;charset=utf-8");
                httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
                httpResponse.setHeader("Url-Type", httpRequest.getHeader("Url-Type")); // 为了前端能区别请求来源
                httpResponse.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
-                CommonResult result = CommonResult.errorResponse("登录身份已失效，请重新登录！",CommonResult.STATUS_ACCESS_DENIED);
+                CommonResult result = CommonResult.errorResponse("登录身份已失效，请重新登录！", CommonResult.STATUS_ACCESS_DENIED);
                String json = JSONUtil.toJsonStr(result);
                httpResponse.getWriter().print(json);
                return false;
            }
            String userId = claim.getSubject();
-            if (!redisUtils.hasKey(TOKEN_REFRESH+userId) && redisUtils.hasKey(TOKEN_KEY+userId)){
+            if (!redisUtils.hasKey(TOKEN_REFRESH + userId) && redisUtils.hasKey(TOKEN_KEY + userId)) {
                //过了需更新token时间，但是还未过期，则进行token刷新
                this.refreshToken(httpRequest, httpResponse, userId);
            }
@ -87,22 +89,23 @@ public class JwtFilter extends AuthenticatingFilter {

    /**
     * 刷新Token，并更新token到前端
+     *
     * @param request
     * @param userId
     * @param response
     * @return
     */
-    private void refreshToken(HttpServletRequest request,HttpServletResponse response,String userId) throws IOException {
-            boolean lock = redisUtils.getLock(TOKEN_LOCK + userId, 20);// 获取锁20s
-            if (lock) {
-                String newToken = jwtUtils.generateToken(userId);
-                response.setHeader("Access-Control-Allow-Credentials", "true");
-                response.setHeader("Authorization", newToken); //放到信息头部
-                response.setHeader("Access-Control-Expose-Headers", "Refresh-Token,Authorization,Url-Type"); //让前端可用访问
-                response.setHeader("Url-Type", request.getHeader("Url-Type")); // 为了前端能区别请求来源
-                response.setHeader("Refresh-Token", "true"); //告知前端需要刷新token
-            }
-            redisUtils.releaseLock(TOKEN_LOCK+userId);
+    private void refreshToken(HttpServletRequest request, HttpServletResponse response, String userId) throws IOException {
+        boolean lock = redisUtils.getLock(TOKEN_LOCK + userId, 20);// 获取锁20s
+        if (lock) {
+            String newToken = jwtUtils.generateToken(userId);
+            response.setHeader("Access-Control-Allow-Credentials", "true");
+            response.setHeader("Authorization", newToken); //放到信息头部
+            response.setHeader("Access-Control-Expose-Headers", "Refresh-Token,Authorization,Url-Type"); //让前端可用访问
+            response.setHeader("Url-Type", request.getHeader("Url-Type")); // 为了前端能区别请求来源
+            response.setHeader("Refresh-Token", "true"); //告知前端需要刷新token
+        }
+        redisUtils.releaseLock(TOKEN_LOCK + userId);
    }


@ -113,7 +116,7 @@ public class JwtFilter extends AuthenticatingFilter {
        try {
            //处理登录失败的异常
            Throwable throwable = e.getCause() == null ? e : e.getCause();
-            CommonResult result = CommonResult.errorResponse(throwable.getMessage(),CommonResult.STATUS_ACCESS_DENIED);
+            CommonResult result = CommonResult.errorResponse(throwable.getMessage(), CommonResult.STATUS_ACCESS_DENIED);
            String json = JSONUtil.toJsonStr(result);
            httpResponse.setContentType("application/json;charset=utf-8");
            httpResponse.setHeader("Access-Control-Expose-Headers", "Refresh-Token,Authorization,Url-Type"); //让前端可用访问
@ -127,7 +130,6 @@ public class JwtFilter extends AuthenticatingFilter {
    }


-
    /**
     * 对跨域提供支持
     */
--- a/hoj-springboot/DataBackup/src/main/resources/application.yml
+++ b/hoj-springboot/DataBackup/src/main/resources/application.yml
@ -13,8 +13,8 @@ spring:
  # 配置文件上传限制
  servlet:
    multipart:
-      max-file-size: 3MB
-      max-request-size: 3MB
+      max-file-size: 50MB
+      max-request-size: 50MB
  mail:
    properties.mail.smtp.ssl.enable: ${hoj.mail.ssl}
    username: ${hoj.mail.username}
--- a/hoj-springboot/DataBackup/target/classes/application.yml
+++ b/hoj-springboot/DataBackup/target/classes/application.yml
@ -13,8 +13,8 @@ spring:
  # 配置文件上传限制
  servlet:
    multipart:
-      max-file-size: 3MB
-      max-request-size: 3MB
+      max-file-size: 50MB
+      max-request-size: 50MB
  mail:
    properties.mail.smtp.ssl.enable: ${hoj.mail.ssl}
    username: ${hoj.mail.username}
--- a/hoj-springboot/DataBackup/target/classes/top/hcode/hoj/shiro/JwtFilter.class
+++ b/hoj-springboot/DataBackup/target/classes/top/hcode/hoj/shiro/JwtFilter.class
--- a/hoj-vue/package-lock.json
+++ b/hoj-vue/package-lock.json
@ -3492,9 +3492,9 @@
      }
    },
    "codemirror": {
-      "version": "5.58.2",
-      "resolved": "https://registry.npm.taobao.org/codemirror/download/codemirror-5.58.2.tgz?cache=0&sync_timestamp=1603481865446&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcodemirror%2Fdownload%2Fcodemirror-5.58.2.tgz",
-      "integrity": "sha1-7VSheW3hSYaIvqHN1OnusYdWXRs="
+      "version": "5.59.3",
+      "resolved": "https://registry.npm.taobao.org/codemirror/download/codemirror-5.59.3.tgz",
+      "integrity": "sha1-I37DrA45/uUNbxphlsgXKnx8K6E="
    },
    "collection-visit": {
      "version": "1.0.0",
--- a/hoj-vue/src/App.vue
+++ b/hoj-vue/src/App.vue
@ -80,7 +80,8 @@ export default {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
-  touch-action: none;
+  touch-action: none !important;
+  -ms-touch-action: none;
 }
 body {
  background-color: #eee !important;
--- a/hoj-vue/src/assets/css/maize.css
+++ b/hoj-vue/src/assets/css/maize.css
@ -1,364 +0,0 @@
-/* Fira Code */
-@font-face {
-  font-family: 'Fira Code', UbuntuMono, 'PingFang SC', 'Microsoft YaHei',
-    Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
-  font-style: normal;
-  src: local('Fira Code'), url('maize/FiraCode-Regular.ttf') format('ttf');
-}
-
-/* 全局属性 */
-:root {
-  --select-text-bg-color: #e49123;
-  --bg-color: #fafafa; /*change background*/
-  --text-color: #333333; /*change text color*/
-  --md-char-color: #c7c5c5; /*change color of meta characetrs like `*` in markdown */
-  --meta-content-color: #5b808d; /*change color of meta contents like image text or link address in markdown */
-
-  --primary-color: #428bca; /* color of primary buttons */
-  --primary-btn-border-color: #285e8e;
-  --primary-btn-text-color: #fff;
-
-  --window-border: 1px solid #eee; /*border for sidebar, etc*/
-
-  --active-file-bg-color: #eee; /*background color if list item in file tree or file list*/
-  --active-file-text-color: inherit;
-  --active-file-border-color: #777;
-
-  --side-bar-bg-color: var(--bg-color); /*change background of sidebar*/
-  --item-hover-bg-color: rgba(
-    229,
-    229,
-    229,
-    0.59
-  ); /*background of control items when hover, like menu in sidebar*/
-  --item-hover-text-color: inherit;
-  --monospace: monospace; /*monospace font for codes, fences*/
-}
-::selection {
-  background: rgba(33, 150, 243, 0.2);
-}
-::-moz-selection {
-  background: rgba(33, 150, 243, 0.2);
-}
-::-webkit-selection {
-  background: rgba(33, 150, 243, 0.2);
-}
-
-.maize-markdown-body {
-  font-size: 16px;
-  text-align: left;
-  letter-spacing: 0px;
-  font-family: 'Fira Code', '微软雅黑', 'PingFang SC', 'Microsoft YaHei',
-    sans-serif;
-}
-
-/*段落*/
-.maize-markdown-body p {
-  font-size: 16px;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  margin: 0;
-  line-height: 26px;
-  color: black;
-}
-
-/*  todo item 对齐 */
-.maize-markdown-body input[type='checkbox'] {
-  margin-top: calc(1em - 2px);
-  margin-right: 5px;
-  left: -3px;
-}
-
-/*标题*/
-.maize-markdown-body h1,
-.maize-markdown-body h2,
-.maize-markdown-body h3,
-.maize-markdown-body h4,
-.maize-markdown-body h5,
-.maize-markdown-body h6 {
-  margin: 0.72em 0;
-  padding: 0px;
-  font-weight: bold;
-  color: black;
-}
-.maize-markdown-body h1 {
-  margin: 1.2em 0;
-  font-size: 2rem;
-  /* text-align: center; */
-}
-.maize-markdown-body h2::before {
-  content: '✔';
-  font-weight: bold;
-  color: #409eff;
-  margin-right: 4px;
-}
-.maize-markdown-body h2 {
-  font-size: 1.7rem;
-  margin: 1em 0;
-}
-.maize-markdown-body h2 span {
-  font-weight: bold;
-  color: #333;
-  padding: 3px 10px 1px;
-}
-
-.maize-markdown-body h3 {
-  font-size: 1.5rem;
-}
-.maize-markdown-body h4 {
-  font-size: 1.25rem;
-}
-.maize-markdown-body h5 {
-  font-size: 1rem;
-}
-.maize-markdown-body h6 {
-  font-size: 1rem;
-}
-
-/* 列表 */
-.maize-markdown-body ul,
-.maize-markdown-body ol {
-  margin-top: 8px;
-  margin-bottom: 8px;
-  padding-left: 40px;
-  color: black;
-}
-.maize-markdown-body ul {
-  list-style-type: disc;
-}
-.maize-markdown-body ul ul {
-  list-style-type: square;
-}
-.maize-markdown-body ol {
-  list-style-type: decimal;
-}
-/* 列表内容 */
-.maize-markdown-body li section {
-  font-size: 15px;
-}
-
-/* 字体加粗 */
-.maize-markdown-body strong::before {
-  content: '「';
-}
-
-.maize-markdown-body strong {
-  color: #2196f3;
-  font-weight: bold;
-}
-
-.maize-markdown-body strong::after {
-  content: '」';
-}
-
-/*引用*/
-.maize-markdown-body blockquote {
-  margin-bottom: 16px;
-  margin-top: 16px;
-  padding: 10px 10px 10px 20px;
-  font-size: 0.9em;
-  background: #e8f4fd;
-  border-left: 3px solid #2196f3;
-  color: #6a737d;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.maize-markdown-body blockquote p {
-  line-height: 26px;
-}
-
-/* 超链接 */
-.maize-markdown-body a {
-  text-decoration: none;
-  font-weight: bold;
-  color: #2196f3;
-  border-bottom: 1px solid #2196f3;
-}
-.maize-markdown-body a:hover {
-  color: #ff5722 !important;
-}
-
-/* 分割线 */
-.maize-markdown-body hr {
-  height: 1px;
-  padding: 0;
-  border: none;
-  text-align: center;
-  background-image: linear-gradient(
-    to right,
-    rgba(231, 93, 109, 0.3),
-    rgba(255, 159, 150, 0.75),
-    rgba(255, 216, 181, 0.3)
-  );
-}
-
-/* 行内代码 */
-.maize-markdown-body p code,
-.maize-markdown-body span code,
-.maize-markdown-body li code {
-  word-wrap: break-word;
-  padding: 2px 4px;
-  border-radius: 4px;
-  margin: 0 2px;
-  word-break: break-all;
-}
-
-/* 文章插图 */
-.maize-markdown-body img {
-  display: block;
-  margin: 0 auto;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  width: 100%;
-  max-width: 100%;
-  border-radius: 5px;
-  box-shadow: 0px 4px 12px #84a1a8;
-  border: 0px;
-}
-
-.maize-markdown-body table tr {
-  border: 0;
-  border-top: 1px solid #ccc;
-  background-color: white;
-}
-.maize-markdown-body table tr:nth-child(2n) {
-  background-color: #f8f8f8;
-}
-.maize-markdown-body table tr th,
-.maize-markdown-body table tr td {
-  font-size: 16px;
-  line-height: 1.5;
-  border: 1px solid #ccc;
-  padding: 5px 10px;
-  text-align: left;
-}
-.maize-markdown-body table tr th {
-  font-weight: bold;
-  background-color: #f0f0f0;
-}
-
-/* 上角标 */
-.maize-markdown-body .md-footnote {
-  font-weight: bold;
-  color: #e49123;
-}
-.maize-markdown-body .md-footnote > .md-text:before {
-  content: '[';
-}
-.maize-markdown-body .md-footnote > .md-text:after {
-  content: ']';
-}
-
-/* 下角标 */
-.maize-markdown-body .md-def-name {
-  padding-right: 1.8ch;
-}
-.maize-markdown-body .md-def-name:before {
-  content: '[';
-  color: #000;
-}
-.maize-markdown-body .md-def-name:after {
-  color: #000;
-}
-
-/* 代码块主题 */
-code,
-.md-fences {
-  padding: 0.5em;
-  /* border: 1px solid #ccc; */
-  padding: 0.1em;
-  border-radius: 5px;
-  margin-left: 0.2em;
-  margin-right: 0.2em;
-  font-family: 'Fira Code', '微软雅黑', 'PingFang SC', 'Microsoft YaHei',
-    sans-serif;
-}
-.md-fences {
-  margin: 0 0 20px;
-  background-color: #292b35;
-  color: rgb(236, 236, 236);
-  /* font-size: 1em; */
-  padding: 0.3em 1em;
-  padding-top: 0.4em;
-  box-shadow: 0px 4px 9px grey;
-}
-.CodeMirror div.CodeMirror-cursor {
-  margin-left: 4.6px;
-  border-left: 1px solid #7ba0f0;
-  z-index: 5;
-}
-.cm-s-inner div.CodeMirror-selected {
-  background: rgba(113, 124, 180, 0.2);
-}
-.CodeMirror-code {
-  margin-left: 5px;
-}
-.cm-s-inner .cm-keyword {
-  color: #c792ea;
-  font-weight: 450;
-}
-.cm-s-inner .cm-operator {
-  color: #89ddff;
-}
-.cm-s-inner .cm-variable-2 {
-  color: #eeffff;
-}
-.cm-s-inner .cm-variable-3,
-.cm-s-inner .cm-type {
-  color: #f07178;
-}
-.cm-s-inner .cm-builtin {
-  color: #ffcb6b;
-}
-.cm-s-inner .cm-atom {
-  color: #f78c6c;
-}
-.cm-s-inner .cm-number {
-  color: #ff5370;
-}
-.cm-s-inner .cm-def {
-  color: #82aaff;
-}
-.cm-s-inner .cm-string {
-  color: #c3e88d;
-}
-.cm-s-inner .cm-string-2 {
-  color: #f07178;
-}
-.cm-s-inner .cm-comment {
-  color: #676e95;
-}
-.cm-s-inner .cm-variable {
-  color: #f07178;
-}
-.cm-s-inner .cm-tag {
-  color: #ff5370;
-}
-.cm-s-inner .cm-meta {
-  color: #ffcb6b;
-}
-.cm-s-inner .cm-attribute {
-  color: #c792ea;
-}
-.cm-s-inner .cm-property {
-  color: #c792ea;
-}
-.cm-s-inner .cm-qualifier {
-  color: #decb6b;
-}
-.cm-s-inner .cm-variable-3,
-.cm-s-inner .cm-type {
-  color: #decb6b;
-}
-.cm-s-inner .cm-error {
-  color: rgba(255, 255, 255, 1);
-  background-color: #e9405c;
-}
-
-/*流程图样式*/
-pre[lang='sequence'],
-pre[lang='flow'],
-pre[lang='mermaid'] {
-  background: #ffffff;
-  color: #333333;
-}
--- a/hoj-vue/src/assets/css/maize/FiraCode-Bold.ttf
+++ b/hoj-vue/src/assets/css/maize/FiraCode-Bold.ttf
--- a/hoj-vue/src/assets/css/maize/FiraCode-Light.ttf
+++ b/hoj-vue/src/assets/css/maize/FiraCode-Light.ttf
--- a/hoj-vue/src/assets/css/maize/FiraCode-Medium.ttf
+++ b/hoj-vue/src/assets/css/maize/FiraCode-Medium.ttf
--- a/hoj-vue/src/assets/css/maize/FiraCode-Regular.ttf
+++ b/hoj-vue/src/assets/css/maize/FiraCode-Regular.ttf
--- a/hoj-vue/src/assets/css/maize/FiraCode-Retina.ttf
+++ b/hoj-vue/src/assets/css/maize/FiraCode-Retina.ttf
--- a/hoj-vue/src/assets/home1.jfif
+++ b/hoj-vue/src/assets/home1.jfif
--- a/hoj-vue/src/assets/home2.jpeg
+++ b/hoj-vue/src/assets/home2.jpeg
--- a/hoj-vue/src/components/oj/common/CodeMirror.vue
+++ b/hoj-vue/src/components/oj/common/CodeMirror.vue
@ -82,7 +82,6 @@ import 'codemirror/theme/solarized.css';
 import 'codemirror/theme/material.css';

 // mode
-import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/clike/clike.js';
 import 'codemirror/mode/python/python.js';
 import 'codemirror/mode/pascal/pascal.js';
@ -135,8 +134,11 @@ export default {
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        lineWrapping: true,
+        // 选中文本自动高亮，及高亮方式
+        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
-        autofocus: true,
+        autoFocus: true,
+        showCursorWhenSelecting: false,
        styleActiveLine: true,
      },
      mode: {
--- a/hoj-vue/src/main.js
+++ b/hoj-vue/src/main.js
@ -4,10 +4,6 @@ import router from './router'
 import store from './store'
 import Element from 'element-ui'

-import MuseUI from 'muse-ui';
-import 'muse-ui/dist/muse-ui.css';
-
-
 import "element-ui/lib/theme-chalk/index.css"
 import 'font-awesome/css/font-awesome.min.css'
 import 'default-passive-events'
@ -46,10 +42,18 @@ import SlideVerify from 'vue-monoplasty-slide-verify'
 //  markdown编辑器
 import mavonEditor from 'mavon-editor'  //引入markdown编辑器
 import 'mavon-editor/dist/css/index.css'
-// // 前端所用markdown样式
-// import '@/assets/css/maize.css'
 Vue.use(mavonEditor)

+import {Drawer,List,Menu,Icon,AppBar,Button,Divider} from 'muse-ui';
+import 'muse-ui/dist/muse-ui.css';
+Vue.use(Drawer)
+Vue.use(List)
+Vue.use(Menu)
+Vue.use(Icon)
+Vue.use(AppBar)
+Vue.use(Button)
+Vue.use(Divider)
+
 Object.keys(filters).forEach(key => {   // 注册全局过滤器
  Vue.filter(key, filters[key])
 })
@ -59,7 +63,7 @@ Vue.use(VXETable) // 表格组件
 Vue.use(VueClipboard) // 剪贴板
 Vue.use(highlight) // 代码高亮
 Vue.use(Element)
-Vue.use(MuseUI) // 移动端导航栏需要该组件
+
 Vue.use(VueCropper) // 图像剪切
 Vue.use(Message, { name: 'msg' }) // `Vue.prototype.$msg` 全局消息提示

--- a/hoj-vue/src/views/oj/Home.vue
+++ b/hoj-vue/src/views/oj/Home.vue
@ -70,19 +70,20 @@
              >Welcome to HOJ</span
            >
          </div>
-          <div class="content-center">
-            <h2>
-              欢迎大家光临和使用本OJ
-            </h2>
-            <h3>
-              这是一个的前后端分离的分布式在线评测系统。
-            </h3>
-            <h3>基于Vue.js,Springboot和SpringCloud.</h3>
-            <h1>待续....</h1>
-          </div>
+          <el-carousel
+            :interval="4000"
+            :height="srcHight"
+            class="img-carousel"
+            arrow="always"
+            indicator-position="outside"
+          >
+            <el-carousel-item v-for="item in srcList" :key="item">
+              <el-image :src="item" fit="fill"></el-image>
+            </el-carousel-item>
+          </el-carousel>
        </el-card>
      </el-col>
-      <el-col :md="10" :sm="24">
+      <el-col :md="10" :sm="24" class="phone-margin">
        <el-card>
          <div slot="header" class="clearfix">
            <span class="panel-title home-title"
@ -117,14 +118,14 @@
            </vxe-table-column>
            <vxe-table-column field="ac" title="AC" min-width="30">
            </vxe-table-column>
-            <vxe-table-column field="solved" title="Solved" min-width="30">
+            <vxe-table-column field="solved" title="Solved" min-width="50">
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-col>
    </el-row>
-    <el-row :gutter="20" style="margin-top: 25px;">
-      <el-col :md="14" :sm="24">
+    <el-row :gutter="20">
+      <el-col :md="14" :sm="24" style="margin-top: 20px;">
        <el-card>
          <div slot="header" class="clearfix">
            <span class="panel-title home-title"
@ -167,7 +168,7 @@
          </vxe-table>
        </el-card>
      </el-col>
-      <el-col :md="10" :sm="24">
+      <el-col :md="10" :sm="24" style="margin-top: 20px;">
        <Announcements></Announcements>
      </el-col>
    </el-row>
@ -197,9 +198,20 @@ export default {
        recent7ACRankLoading: false,
        recentOtherContestsLoading: false,
      },
+      srcList: [
+        'https://cdn.jsdelivr.net/gh/HimitZH/CDN/images/home1.jfif',
+        'https://cdn.jsdelivr.net/gh/HimitZH/CDN/images/home2.jpeg',
+      ],
+      srcHight: '440px',
    };
  },
  mounted() {
+    let screenWidth = window.screen.width;
+    if (screenWidth < 1080) {
+      this.srcHight = '200px';
+    } else {
+      this.srcHight = '440px';
+    }
    this.CONTEST_STATUS_REVERSE = Object.assign({}, CONTEST_STATUS_REVERSE);
    this.getRecentContests();
    this.getRecent7ACRank();
@ -297,12 +309,22 @@ export default {
 .contest-status {
  float: right;
 }
+.img-carousel {
+  height: 470px;
+}
@media screen and (max-width: 1080px) {
  .contest-status {
    text-align: center;
    float: none;
    margin-top: 5px;
  }
+  .img-carousel {
+    height: 220px;
+    overflow: hidden;
+  }
+  .phone-margin {
+    margin-top: 20px;
+  }
 }
 .title .el-link {
  font-size: 21px;
--- a/hoj-vue/src/views/oj/problem/Problem.vue
+++ b/hoj-vue/src/views/oj/problem/Problem.vue
@ -146,8 +146,8 @@
            <CodeMirror
              :value.sync="code"
              :languages="problemData.languages"
-              :language="language"
-              :theme="theme"
+              :language.sync="language"
+              :theme.sync="theme"
              @resetCode="onResetToTemplate"
              @changeTheme="onChangeTheme"
              @changeLang="onChangeLang"