2021-7-13

config/index.js

@@ -10,7 +10,13 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/': {                       //需要代理的接口
+        target:'http://47.108.130.28:8080', //目标服务器
+        changeOrigin: true,　　　　　　 //是否跨域
+        s额cure:false
+      }
+    },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST

package-lock.json

@@ -2457,6 +2457,15 @@
       "resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npm.taobao.org/cors/download/cors-2.8.5.tgz",
+      "integrity": "sha1-6sEdpRWS3Ya58G9uesKTs9+HXSk=",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "5.2.1",
       "resolved": "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-5.2.1.tgz?cache=0&sync_timestamp=1596312863119&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-5.2.1.tgz",
@@ -12538,8 +12547,7 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-      "dev": true
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
     "vendors": {
       "version": "1.0.4",

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^0.21.0",
+    "cors": "^2.8.5",
     "echarts": "^4.9.0",
     "element-ui": "^2.14.1",
     "fabric": "^4.5.1",

src/components/assembly/common.vue

@@ -1,8 +1,10 @@
 <script>
 const xurl = "";
 const clientHeight = document.documentElement.clientHeight
+const hurl = 'http://47.108.130.28:8000';
 export default {
   xurl,
-  clientHeight
+  clientHeight,
+  hurl
 };
 </script>

src/components/log.vue

@@ -1,139 +1,141 @@
 <template>
   <div class="page">
-    <div class="scroll-x">
-        <div class="item_box">
-      <img src="http://osscache.scxjc.club/static/say365/imgs/bg1.png?versionId=CAEQHRiBgICegrnp1BciIDRlNWI4M2E2OWQ3MTQ0MzVhMzE2NWUyNDZiY2VjYzdi" alt="" />
-      <div class="login_box">
-        <div class="d-f j-s login_head">
-          <span class="title">登录</span>
-          <el-select
-            v-model="value"
-            style="width: 105px; border: none; margin:auto 0"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+    <div class="scroll-x" ref="scrollview">
+      <div class="item_box">
+        <img src="../assets/bg.png" alt="" />
+        <div class="login_box">
+          <div class="d-f j-s login_head">
+            <span class="title">登录</span>
+            <el-select
+              v-model="value"
+              style="width: 105px; border: none; margin: auto 0"
             >
-            </el-option>
-          </el-select>
-        </div>
-        <el-form class="login_form">
-          <el-form-item>
-            <el-input
-              v-model="params.name"
-              placeholder="请输入您的账号"
-            ></el-input>
-          </el-form-item>
-          <el-form-item style="margin-bottom: 17px">
-            <el-input
-              v-model="params.password"
-              placeholder="请输入密码"
-              auto-complete="new-password"
-              show-password
-            ></el-input>
-          </el-form-item>
-          <div class="d-f j-s cipher">
-            <el-checkbox label="记住密码" name="type"></el-checkbox>
-            <span>忘记密码?</span>
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
           </div>
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit">登陆</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-    <div class="item_box">
-      <img src="../assets/bg1.png" alt="" />
-      <div class="intelligence">
-        <div class="intelligence_t">
-          <p>多模板、智能识别、双评阅模式</p>
-          <p>不仅支持各学科作业的日常批阅，而且支持以校为单位的各级考试评阅</p>
-        </div>
-        <div class="d-f j-s intelligence_c">
-          <li>
-            <div>
-              <img src="../assets/1.png" alt="" />
+          <el-form class="login_form">
+            <el-form-item>
+              <el-input
+                v-model="params.username"
+                placeholder="请输入您的账号"
+              ></el-input>
+            </el-form-item>
+            <el-form-item style="margin-bottom: 17px">
+              <el-input
+                v-model="params.password"
+                placeholder="请输入密码"
+                auto-complete="new-password"
+                show-password
+              ></el-input>
+            </el-form-item>
+            <div class="d-f j-s cipher">
+              <el-checkbox label="记住密码" name="type"></el-checkbox>
+              <span>忘记密码?</span>
             </div>
-            <div>模版多样化</div>
-            <p>可根据需求，视学科特点，生成不同的作业模板及答题卡</p>
-          </li>
-          <li>
-            <div>
-              <img src="../assets/4.png" alt="" />
-            </div>
-            <div>智能识别</div>
-            <p>
-              自动评判客观题，老师只需对主观题进行评阅即可，极大地减轻了老师的工作负担
-            </p>
-          </li>
-          <li>
-            <div>
-              <img src="../assets/3.png" alt="" />
-            </div>
-            <div>双评阅</div>
-            <p>多终端评阅，使阅卷更便捷</p>
-          </li>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">登陆</el-button>
+            </el-form-item>
+          </el-form>
         </div>
       </div>
-    </div>
-    <div class="item_box">
-      <img src="../assets/bg2.png" alt="" class="three" />
-      <div class="intelligence">
-        <div class="intelligence_t">
-          <p>多维度、智能化的试卷分析</p>
-          <p>精确定位知识短板，助力教师及时调整教学方案</p>
-        </div>
-        <div class="d-f j-s">
-          <div class="leftcont">
-            <li class="d-f">
-              <img src="../assets/9.png" alt="" />
-              <span
-                >可自动形成分数统计，根据需求自动生成班级乃至学生个人的成绩分析报告</span
-              >
+      <div class="item_box">
+        <img src="../assets/bg1.png" alt="" />
+        <div class="intelligence">
+          <div class="intelligence_t" :class="is_dx == 1 ? 'dx' : ''">
+            <p>多模板、智能识别、双评阅模式</p>
+            <p>
+              不仅支持各学科作业的日常批阅，而且支持以校为单位的各级考试评阅
+            </p>
+          </div>
+          <div class="d-f j-s intelligence_c">
+            <li>
+              <div>
+                <img src="../assets/1.png" alt="" />
+              </div>
+              <div>模版多样化</div>
+              <p>可根据需求，视学科特点，生成不同的作业模板及答题卡</p>
             </li>
-            <li class="d-f">
-              <img src="../assets/9.png" alt="" />
-              <span
-                >精准定位知识的薄弱环节，帮助老师或学生及时发现知识短板</span
-              >
+            <li>
+              <div>
+                <img src="../assets/4.png" alt="" />
+              </div>
+              <div>智能识别</div>
+              <p>
+                自动评判客观题，老师只需对主观题进行评阅即可，极大地减轻了老师的工作负担
+              </p>
+            </li>
+            <li>
+              <div>
+                <img src="../assets/3.png" alt="" />
+              </div>
+              <div>双评阅</div>
+              <p>多终端评阅，使阅卷更便捷</p>
             </li>
-          </div>
-          <div class="dimension">
-            <img src="../assets/5.png" alt="" />
           </div>
         </div>
       </div>
-    </div>
-    <div class="item_box">
-      <img src="../assets/bg3.png" alt="" />
-      <div class="intelligence">
-        <div class="intelligence_t">
-          <p>个性化设置</p>
-          <p>可根据老师的个性化设置，自动生成班级错题库，有效强化知识短板</p>
-        </div>
-        <div class="dimen">
-          <img src="../assets/6.png" alt="" />
+      <div class="item_box">
+        <img src="../assets/bg2.png" alt="" class="three" />
+        <div class="intelligence">
+          <div class="intelligence_t" :class="is_dx == 2 ? 'dx' : ''">
+            <p>多维度、智能化的试卷分析</p>
+            <p>精确定位知识短板，助力教师及时调整教学方案</p>
+          </div>
+          <div class="d-f j-s">
+            <div class="leftcont">
+              <li class="d-f">
+                <img src="../assets/9.png" alt="" />
+                <span
+                  >可自动形成分数统计，根据需求自动生成班级乃至学生个人的成绩分析报告</span
+                >
+              </li>
+              <li class="d-f">
+                <img src="../assets/9.png" alt="" />
+                <span
+                  >精准定位知识的薄弱环节，帮助老师或学生及时发现知识短板</span
+                >
+              </li>
+            </div>
+            <div class="dimension">
+              <img src="../assets/5.png" alt="" />
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="item_box">
-      <!-- <div class="item_bg"></div> -->
-      <img src="../assets/bg4.png" alt="" class="topic" />
-      <div class="intelligence">
-        <div class="intelligence_t">
-          <p>错题强化训练</p>
-          <p>
-            智能推送错题强化训练，形成学生个性化错题本，帮助学生有效巩固知识薄弱环节
-          </p>
+      <div class="item_box">
+        <img src="../assets/bg3.png" alt="" />
+        <div class="intelligence">
+          <div class="intelligence_t" :class="is_dx == 3 ? 'dx' : ''">
+            <p>个性化设置</p>
+            <p>可根据老师的个性化设置，自动生成班级错题库，有效强化知识短板</p>
+          </div>
+          <div class="dimen">
+            <img src="../assets/6.png" alt="" />
+          </div>
         </div>
-        <div class="strengthen">
-          <img src="../assets/7.png" alt="" />
+      </div>
+      <div class="item_box">
+        <!-- <div class="item_bg"></div> -->
+        <img src="../assets/bg4.png" alt="" class="topic" />
+        <div class="intelligence">
+          <div class="intelligence_t" :class="is_dx == 4 ? 'dx' : ''">
+            <p>错题强化训练</p>
+            <p>
+              智能推送错题强化训练，形成学生个性化错题本，帮助学生有效巩固知识薄弱环节
+            </p>
+          </div>
+          <div class="strengthen">
+            <img src="../assets/7.png" alt="" />
+          </div>
         </div>
       </div>
-    </div>
-    <foot></foot>
+      <foot></foot>
     </div>
   </div>
 </template>
@@ -144,9 +146,9 @@ export default {
   data() {
     return {
       params: {
-        name: "",
-        password: "",
+        
       },
+      is_dx: 1,
       options: [
         {
           value: "1",
@@ -161,18 +163,81 @@ export default {
     };
   },
   created() {},
+  mounted() {
+    // 获取指定元素
+    const scrollview = this.$refs["scrollview"];
+    // 添加滚动监听，该滚动监听了拖拽滚动条
+    // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
+    scrollview.addEventListener("scroll", this.scrollChange, true);
+  },
   methods: {
+    // 滚动监听
+    scrollChange(e) {
+      var that = this;
+      if (this.$refs.scrollview.scrollTop == 0) {
+        that.is_dx = 1;
+        return
+      } else if (this.$refs.scrollview.scrollTop >2200 && this.$refs.scrollview.scrollTop <2400) {
+        that.is_dx = 4;
+          return
+      }else if (this.$refs.scrollview.scrollTop >1500 && this.$refs.scrollview.scrollTop < 1700) {
+        that.is_dx = 3;
+          return
+      }else if (this.$refs.scrollview.scrollTop > 600) {
+        that.is_dx = 2;
+          return
+      }
+    },
     onSubmit() {
-      localStorage.setItem("token", "123");
-      localStorage.setItem("navKey", "1");
-      this.$router.push("/");
+      var that = this
+      // if(!this.params.username){
+      //   this.$message.warning('请输入用户名')
+      //   return
+      // }
+      //  if(!this.params.password){
+      //   this.$message.warning('请输入密码')
+      //   return
+      // }
+        var obj = this.$qs.stringify(this.params);
+         this.axios
+      .post(that.Common.hurl + "/v1/admin/login")
+      .then(response => (console.log(response)))
+        // this.axios({
+      //   method: "post",
+      //   url: that.Common.hurl + "/v1/admin/login",
+      //   data: '{"username":"admin","password":"12345678"}'
+      //   })
+      //   .then((res) => {
+      //     console.log(res)
+      //     //  localStorage.setItem("token", "123");
+      //     //   localStorage.setItem("navKey", "1");
+      //     //   this.$router.push("/");
+      //   }).catch((res)=>{
+      //       console.log(res)
+      //   })
+     
     },
   },
-   components: { foot },
+  components: { foot },
 };
 </script>
 
 <style scoped>
+@keyframes fold-out {
+  0% {
+    opacity: 0;
+    transform: scale(0.5) rotate(0deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+.item_box .dx {
+  animation-name: fold-out;
+  animation-duration: 1s;
+}
 .page {
   padding: 0;
   background: #fff;
@@ -248,8 +313,9 @@ export default {
 .item_box {
   position: relative;
   min-width: 1900px;
-    background: #fff;
+  background: #fff;
 }
+
 /* .item_box .item_bg{
   width: 100%;
   height: 720px;
@@ -319,7 +385,7 @@ export default {
   font-size: 17px;
   color: #333;
 }
-.record{
+.record {
   min-width: 1900px;
 }
 </style>
@@ -339,7 +405,7 @@ export default {
 .login_head .el-input__inner {
   color: #2ab8fa;
 }
-.login_box .el-form .el-input__inner{
+.login_box .el-form .el-input__inner {
   line-height: 60px;
   height: 60px;
 }

src/main.js

@@ -14,6 +14,7 @@ import 'viewerjs/dist/viewer.css'
 import echarts from 'echarts'
 import  './assets/icon-font/iconfont.css'
 
+
 Vue.prototype.$echarts = echarts
 Vue.use(Viewer)
 Viewer.setDefaults({
@@ -37,6 +38,9 @@ Viewer.setDefaults({
 
 
 Vue.use(ElementUI);
+axios.defaults.baseURL = 'http://47.108.130.28:8000'
+axios.defaults.headers.post['Contnet-Type'] = 'application/json'
+axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'
 Vue.prototype.axios = axios
 Vue.prototype.Common = Common
 Vue.prototype.$qs = qs