拟态试卷--test

src/assets/filp/style/chunk-cac90f3e.4cffd0b2.css

@@ -0,0 +1,611 @@
+.footer-skin-btn,
+.nav-left,
+.nav-right,
+.share-btn {
+    background: url(../img/skin.77f95317.png) no-repeat
+}
+
+.nav {
+    height: 50px
+}
+
+.nav .nav-left {
+    width: 9px;
+    left: 0;
+    background-position: -5px -247px
+}
+
+.nav .nav-left,
+.nav .nav-mid {
+    height: 100%;
+    position: absolute;
+    top: 0
+}
+
+.nav .nav-mid {
+    left: 9px;
+    right: 9px;
+    background-position: 0 -2px;
+    background: url(../img/red-nav.cb9c538f.png)
+}
+
+.nav .nav-right {
+    width: 9px;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-position: -19px -247px
+}
+
+.top {
+    height: 50px;
+    width: 100%;
+    position: relative;
+    z-index: 2
+}
+
+.top .logo {
+    position: absolute;
+    top: 20%;
+    left: 10px;
+    height: 60%
+}
+
+.top .title {
+    margin: 0;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    font-size: 1.3em;
+    font-weight: 700;
+    color: #4d2f2f;
+    width: 100%;
+    text-align: center;
+    text-shadow: 1px 1px 0 #f3bb9b
+}
+
+.top .share-btn {
+    position: absolute;
+    top: 9px;
+    right: 10px;
+    width: 40px;
+    height: 31px;
+    cursor: pointer
+}
+
+@media (max-width:1000px) {
+    .logo {
+        display: none
+    }
+}
+
+.center {
+    top: 50px;
+    bottom: 40px;
+    overflow-y: auto
+}
+
+.center,
+.center-bg {
+    position: absolute;
+    width: 100%
+}
+
+.center-bg {
+    background: #955f57
+}
+
+.center-bg .center-bg-item {
+    height: 172px;
+    overflow: hidden
+}
+
+.center-bg .center-bg-item .bg-left,
+.center-bg .center-bg-item .bg-right {
+    height: 172px;
+    background: url(../img/skin-2.a185da03.png) no-repeat;
+    background-color: #83524e
+}
+
+.center-bg .center-bg-item .bg-left {
+    width: 165px;
+    float: left;
+    background-position: 0 -192px
+}
+
+.center-bg .center-bg-item .bg-center {
+    height: 172px;
+    margin: 0 164px;
+    background-color: #83524e;
+    background: url(../img/red-2.b907f8da.jpg)
+}
+
+.center-bg .center-bg-item .bg-right {
+    width: 165px;
+    float: right;
+    background-position: -171px -192px
+}
+
+.center-content {
+    position: absolute;
+    left: 30px;
+    right: 30px
+}
+
+.center-content .center-content-row {
+    margin: 0 auto
+}
+
+.center-content .center-content-item {
+    cursor: pointer;
+    text-align: center;
+    display: inline-block;
+    height: 172px;
+    padding-top: 18px;
+    padding-bottom: 10px;
+    position: relative;
+    margin: 0 30px
+}
+
+.center-content .center-content-item .el-image {
+    width: 100px;
+    height: 100%;
+    -webkit-box-shadow: 1px 1px 0 0 #dad8d8, 2px 2px 0 0 #afadad, 3px 4px 0 0 #fbfafa;
+    box-shadow: 1px 1px 0 0 #dad8d8, 2px 2px 0 0 #afadad, 3px 4px 0 0 #fbfafa
+}
+
+.center-content .center-content-item .content-text {
+    position: absolute;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    bottom: 4px;
+    background-color: #fff;
+    border: 1px solid #8c8484;
+    width: 155px;
+    font-size: 12px;
+    padding: 0 3px;
+    margin-left: 2px;
+    word-break: break-all
+}
+
+.bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: url(../img/red-footer.dafb51ee.png);
+    height: 40px
+}
+
+.bottom .footer-num {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    padding: 0 18px;
+    background: #4d2f2f;
+    font-size: 1.3em;
+    border-radius: 30px;
+    color: #f3bb9b;
+    border-color: #f3bb9b;
+    -webkit-box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #f3bb9b;
+    box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #f3bb9b
+}
+
+.bottom .footer-skin-btn {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    width: 41px;
+    height: 31px;
+    margin-top: -16px;
+    cursor: pointer;
+    background-position: -457px -222px
+}
+
+.bottom .footer-skin-btn:hover {
+    background-position: -457px -257px
+}
+
+.bottom .footer-skin {
+    position: relative;
+    left: 50%;
+    margin-left: -30px;
+    bottom: 5px;
+    width: 60px;
+    height: 180px;
+    bottom: 185px;
+    opacity: 1;
+    cursor: default;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 4px 2px rgba(0, 0, 0, .5);
+    box-shadow: 0 4px 2px rgba(0, 0, 0, .5);
+    overflow: hidden
+}
+
+.bottom .footer-skin div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: #000;
+    opacity: .7
+}
+
+.bottom .footer-skin>li {
+    position: relative;
+    z-index: 2;
+    width: 36px;
+    height: 24px;
+    border: 2px solid #fff;
+    margin-top: 10px;
+    margin-left: 10px;
+    float: left;
+    cursor: pointer;
+    border-radius: 2px;
+    background-repeat: no-repeat;
+    background-position: -70px -30px
+}
+
+.bottom .footer-skin>li.active,
+.bottom .footer-skin>li:hover {
+    border-color: #0c7cc5 !important
+}
+
+/*.bottom .footer-skin>li.red {*/
+/*    background: url(../img/red-1.800309ec.png)*/
+/*}*/
+
+/*.bottom .footer-skin>li.gold {*/
+/*    background: url(../img/gold-1.d620ad6c.png)*/
+/*}*/
+
+/*.bottom .footer-skin>li.silver {*/
+/*    background: url(../img/silver-1.56936785.png)*/
+/*}*/
+
+/*.bottom .footer-skin>li.green {*/
+/*    background: url(../img/green-1.34b71944.png)*/
+/*}*/
+
+/*.bottom .footer-skin>li.yellow {*/
+/*    background: url(../img/yellow-1.1a4b3c7e.png)*/
+/*}*/
+
+.red .nav-left {
+    background-position: -5px -247px
+}
+
+.red .nav-mid {
+    background: url(../img/red-nav.cb9c538f.png)
+}
+
+.red .nav-right {
+    background-position: -19px -247px
+}
+
+.red .title {
+    color: #4d2f2f;
+    text-shadow: 1px 1px 0 #f3bb9b
+}
+
+.red .share-btn {
+    background-position: -898px -222px
+}
+
+.red .share-btn:hover {
+    background-position: -898px -257px
+}
+
+.red .bottom {
+    background: url(../img/red-footer.dafb51ee.png)
+}
+
+.red .footer-num {
+    color: #f3bb9b;
+    border-color: #f3bb9b;
+    background: #4d2f2f;
+    -webkit-box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #f3bb9b;
+    box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #f3bb9b
+}
+
+.red .footer-skin-btn {
+    background-position: -457px -222px
+}
+
+.red .footer-skin-btn:hover {
+    background-position: -457px -257px
+}
+
+.red .center-bg {
+    background: #955f57
+}
+
+.red .center-bg-item .bg-center,
+.red .center-bg-item .bg-left,
+.red .center-bg-item .bg-right {
+    background-color: #83524e
+}
+
+.red .center-bg-item .bg-left {
+    background-position: 0 -192px
+}
+
+.red .center-bg-item .bg-center {
+    background: url(../img/red-2.b907f8da.jpg)
+}
+
+.red .center-bg-item .bg-right {
+    background-position: -171px -192px
+}
+
+.gold .nav-left {
+    background-position: -5px -78px
+}
+
+/*.gold .nav-mid {*/
+/*    background: url(../img/gold-nav.2a54050a.png)*/
+/*}*/
+
+.gold .nav-right {
+    background-position: -19px -78px
+}
+
+.gold .title {
+    color: #6d3102;
+    text-shadow: 1px 1px 0 #ffcd88
+}
+
+.gold .share-btn {
+    background-position: -898px -53px
+}
+
+.gold .share-btn:hover {
+    background-position: -898px -88px
+}
+
+/*.gold .bottom {*/
+/*    background: url(../img/gold-footer.6ccea1b5.png)*/
+/*}*/
+
+.gold .footer-num {
+    background: #6d3102;
+    border-color: #ffcd88;
+    color: #ffcd88;
+    -webkit-box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #ffcd88;
+    box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #ffcd88
+}
+
+.gold .footer-skin-btn {
+    background-position: -457px -53px
+}
+
+.gold .footer-skin-btn:hover {
+    background-position: -457px -88px
+}
+
+.gold .center-bg {
+    background: #c36d01
+}
+
+.gold .center-bg-item .bg-center,
+.gold .center-bg-item .bg-left,
+.gold .center-bg-item .bg-right {
+    background-color: #b86900
+}
+
+.gold .center-bg-item .bg-left {
+    background-position: 0 0
+}
+
+/*.gold .center-bg-item .bg-center {*/
+/*    background: url(../img/gold-2.ccd3de7e.jpg)*/
+/*}*/
+
+.gold .center-bg-item .bg-right {
+    background-position: -171px 0
+}
+
+.silver .nav-left {
+    background-position: -5px -416px
+}
+
+/*.silver .nav-mid {*/
+/*    background: url(../img/silver-nav.3a416678.png)*/
+/*}*/
+
+.silver .nav-right {
+    background-position: -19px -416px
+}
+
+.silver .title {
+    color: #4c4c4c;
+    text-shadow: 1px 1px 0 #dadada
+}
+
+.silver .share-btn,
+.silver .share-btn:hover {
+    background-position: -898px -426px
+}
+
+/*.silver .bottom {*/
+/*    background: url(../img/silver-footer.6d45ff73.png)*/
+/*}*/
+
+.silver .footer-num {
+    background: #4c4c4c;
+    border-color: #dadada;
+    color: #dadada;
+    -webkit-box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #dadada;
+    box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #dadada
+}
+
+.silver .footer-skin-btn {
+    background-position: -457px -391px
+}
+
+.silver .footer-skin-btn:hover {
+    background-position: -457px -426px
+}
+
+.silver .center-bg {
+    background: #838383
+}
+
+.silver .center-bg-item .bg-center,
+.silver .center-bg-item .bg-left,
+.silver .center-bg-item .bg-right {
+    background-color: #7b7b7b
+}
+
+.silver .center-bg-item .bg-left {
+    background-position: 0 -384px
+}
+
+/*.silver .center-bg-item .bg-center {*/
+/*    background: url(../img/silver-2.c0e38cd9.jpg)*/
+/*}*/
+
+.silver .center-bg-item .bg-right {
+    background-position: -171px -384px
+}
+
+.green .nav-left {
+    background-position: -5px -584px
+}
+
+/*.green .nav-mid {*/
+/*    background: url(../img/green-nav.cd593b64.png)*/
+/*}*/
+
+.green .nav-right {
+    background-position: -19px -584px
+}
+
+.green .title {
+    color: #64542f;
+    text-shadow: 1px 1px 0 #ebe1cd
+}
+
+.green .share-btn {
+    background-position: -898px -559px
+}
+
+.green .share-btn:hover {
+    background-position: -898px -594px
+}
+
+/*.green .bottom {*/
+/*    background: url(../img/green-footer.52dd9540.png)*/
+/*}*/
+
+.green .footer-num {
+    background: #64542f;
+    border-color: #ebe1cd;
+    color: #ebe1cd;
+    -webkit-box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #ebe1cd;
+    box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #ebe1cd
+}
+
+.green .footer-skin-btn {
+    background-position: -457px -559px
+}
+
+.green .footer-skin-btn:hover {
+    background-position: -457px -594px
+}
+
+.green .center-bg {
+    background: #b29f61
+}
+
+.green .center-bg-item .bg-center,
+.green .center-bg-item .bg-left,
+.green .center-bg-item .bg-right {
+    background-color: #7b7b7b
+}
+
+.green .center-bg-item .bg-left {
+    background-position: 0 -576px
+}
+
+/*.green .center-bg-item .bg-center {*/
+/*    background: url(../img/green-2.fe545958.jpg)*/
+/*}*/
+
+.green .center-bg-item .bg-right {
+    background-position: -171px -576px
+}
+
+.yellow .nav-left {
+    background-position: -5px -752px
+}
+
+/*.yellow .nav-mid {*/
+/*    background: url(../img/yellow-nav.ce3081a8.png)*/
+/*}*/
+
+.yellow .nav-right {
+    background-position: -19px -752px
+}
+
+.yellow .title {
+    color: #6f4d17;
+    text-shadow: 1px 1px 0 #fac475
+}
+
+.yellow .share-btn {
+    background-position: -898px -727px
+}
+
+.yellow .share-btn:hover {
+    background-position: -898px -762px
+}
+
+/*.yellow .bottom {*/
+/*    background: url(../img/yellow-footer.c4d261ed.png)*/
+/*}*/
+
+.yellow .footer-num {
+    background: #6f4d17;
+    border-color: #fac475;
+    color: #fac475;
+    -webkit-box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #fac475;
+    box-shadow: inset 1px 2px 3px #1a1a1a, 0 1px 3px #fac475
+}
+
+.yellow .footer-skin-btn {
+    background-position: -457px -727px
+}
+
+.yellow .footer-skin-btn:hover {
+    background-position: -457px -762px
+}
+
+.yellow .center-bg {
+    background: #be8923
+}
+
+.yellow .center-bg-item .bg-center,
+.yellow .center-bg-item .bg-left,
+.yellow .center-bg-item .bg-right {
+    background-color: #7b7b7b
+}
+
+.yellow .center-bg-item .bg-left {
+    background-position: 0 -768px
+}
+
+/*.yellow .center-bg-item .bg-center {*/
+/*    background: url(../img/yellow-2.862cdb85.jpg)*/
+/*}*/
+
+.yellow .center-bg-item .bg-right {
+    background-position: -171px -768px
+}

src/layout/index.vue

@@ -45,12 +45,12 @@
 </template>
 
 <script>
-import RightPanel from "@/components/RightPanel";
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
-import ResizeMixin from "./mixin/ResizeHandler";
-import { mapState, mapGetters } from "vuex";
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapGetters, mapState } from 'vuex'
 
-import variables from "@/assets/styles/variables.scss";
+import variables from '@/assets/styles/variables.scss'
 
 export default {
   name: "Layout",

src/router/index.js

@@ -792,6 +792,14 @@ export const constantRoutes = [{
         meta: {
           title: '选科报告'
         }
+      },
+      {
+        path: '/elective/report/paperWrap/test',
+        component: (resolve) => require(['@/views/elective/test/elective-paper-wrap'], resolve),
+        name: 'PaperWrap',
+        meta: {
+          title: '选科试卷测试'
+        }
       }
     ]
   }

src/views/elective/test/elective-paper-wrap.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div id="app" class="theme1">
+      <div>
+        <div class="red"><img id="firstImg" src="@/assets/filp/img/wKgCHmBAUiKAB8fDAAbCzSqoUDE455.png"
+                              style="position: absolute; width: 0px; height: 0px; top: 0px; left: 0px; overflow: hidden;"
+        >
+          <div class="top">
+            <div class="nav">
+              <div class="nav-left"></div>
+              <div class="nav-mid"></div>
+              <div class="nav-right"></div>
+            </div>
+<!--            <img src="@/assets/images/login_logo.png" class="logo">-->
+            <h3 class="title">高三第一轮复习周测卷（新高考版）</h3></div>
+          <div class="center">
+            <div class="center-bg">
+              <div class="center-bg-item">
+                <div class="bg-left"></div>
+                <div class="bg-right"></div>
+                <div class="bg-center"></div>
+              </div>
+              <div class="center-bg-item">
+                <div class="bg-left"></div>
+                <div class="bg-right"></div>
+                <div class="bg-center"></div>
+              </div>
+              <div class="center-bg-item">
+                <div class="bg-left"></div>
+                <div class="bg-right"></div>
+                <div class="bg-center"></div>
+              </div>
+              <div class="center-bg-item">
+                <div class="bg-left"></div>
+                <div class="bg-right"></div>
+                <div class="bg-center"></div>
+              </div>
+            </div>
+            <div class="center-content">
+              <div class="center-content-row" style="width: 810px;">
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATfWARB1_ABR5HUuOgjc055.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">产品说明书（新高考）</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATgaARm_yAAbCzSqoUDE090.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">语文</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBAThGAY7a0AAbXI4s64s0156.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">数学</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBAThuAJtOPAAbB3yEwvUE153.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">英语</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATiyAKlBNAAbQ_6p9UPA825.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">物理</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATkKACxsZAAa__dNf5V8677.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">化学</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATkyAAfX4AAbCuaEOd-Y936.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">生物</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATliARvLSAAbOtdnQ3GA561.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">政治</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATmWAfgP6AAa9JkHaJSE114.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">历史</div>
+                </div>
+                <div class="center-content-item">
+                  <div class="el-image"><img src="@/assets/filp/img/wKgCHmBATnCAQqkHAAa1pkCK5CQ757.png"
+                                             class="el-image__inner"
+                  ><!----></div>
+                  <div class="content-text">地理</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bottom"><span class="footer-num">10</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ivu-loading-bar" style="height: 2px; display: none;">
+      <div class="ivu-loading-bar-inner ivu-loading-bar-inner-color-primary" style="width: 0%; height: 2px;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import '@/assets/filp/style/chunk-cac90f3e.4cffd0b2.css'
+export default {
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/user/profile/round-select.vue

@@ -36,6 +36,7 @@
       <el-button v-if="false" @click="goReportDemo">选科报告1</el-button>
       <el-button @click="goReportDemoOnline">选科报告</el-button>
       <el-button @click="goStudyReportDemoOnline">学情报告</el-button>
+      <el-button @click="goDemo">试卷</el-button>
     </el-card>
 
     <el-dialog :visible.sync="helpVideo.visible">
@@ -206,6 +207,9 @@ export default {
     goStudyReportDemoOnline() {
       const path = 'https://online.fliphtml5.com/jkrou/hjig/'
       window.open(path)
+    },
+    goDemo() {
+      this.$router.push('/elective/report/paperWrap/test')
     }
   }
 }