志愿测评

package-lock.json

@@ -8,8 +8,10 @@
       "name": "zycp-demo",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.26.0",
         "core-js": "^3.6.5",
         "vue": "^2.6.11",
+        "vue-axios": "^3.4.1",
         "vue-router": "^3.2.0"
       },
       "devDependencies": {
@@ -3121,6 +3123,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -6717,7 +6727,6 @@
       "version": "1.14.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -13609,6 +13618,15 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "node_modules/vue-axios": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/vue-axios/-/vue-axios-3.4.1.tgz",
+      "integrity": "sha512-8YZYUOQrBEJktxoQtrM4rr2LfVcDaWfJqv8MqtLlgLlkuBvCYKFSZSo6AXQ4YcCzdgccDqstmuaEh68lcH9xWA==",
+      "peerDependencies": {
+        "axios": ">= 0.20.0",
+        "vue": "^3.0.0 || ^2.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -16635,7 +16653,8 @@
       "version": "4.5.15",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
       "integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.15",
@@ -16772,7 +16791,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -16987,7 +17007,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -17017,13 +17038,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -17283,6 +17306,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -20293,8 +20324,7 @@
     "follow-redirects": {
       "version": "1.14.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
-      "dev": true
     },
     "for-in": {
       "version": "1.0.2",
@@ -26036,6 +26066,12 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-axios": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/vue-axios/-/vue-axios-3.4.1.tgz",
+      "integrity": "sha512-8YZYUOQrBEJktxoQtrM4rr2LfVcDaWfJqv8MqtLlgLlkuBvCYKFSZSo6AXQ4YcCzdgccDqstmuaEh68lcH9xWA==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",

package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.26.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
+    "vue-axios": "^3.4.1",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

public/index.html

@@ -6,6 +6,20 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+         .load{
+        width:0.6rem;
+        height:0.6rem;
+        background-image:url("<%= BASE_URL %>images/load.gif");
+        background-size:100%;
+        position: fixed;
+        z-index:10000;
+        left:50%;
+        top:50%;
+        transform: translate(-50%,-50%);
+        display:none;
+      }
+    </style>
   </head>
   <body>
     <noscript>
@@ -13,5 +27,6 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="<%= BASE_URL %>js/flexible.js"></script>
   </body>
 </html>

public/js/flexible.js

@@ -0,0 +1,49 @@
+//designWidth:设计稿的实际宽度值，需要根据实际设置
+//maxWidth:制作稿的最大宽度值，需要根据实际设置
+//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
+;(function(designWidth, maxWidth) {
+    var doc = document,
+        win = window,
+        docEl = doc.documentElement,
+        remStyle = document.createElement("style"),
+        tid;
+    //浏览器竖屏与横屏转换的BUG。
+    function refreshRem() {
+        var width = docEl.getBoundingClientRect().width;
+        maxWidth = maxWidth || 540;
+        width>maxWidth && (width=maxWidth);
+        var rem = width * 100 / designWidth;
+        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
+    }
+
+    if (docEl.firstElementChild) {
+        docEl.firstElementChild.appendChild(remStyle);
+    } else {
+        var wrap = doc.createElement("div");
+        wrap.appendChild(remStyle);
+        doc.write(wrap.innerHTML);
+        wrap = null;
+    }
+    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
+    refreshRem();
+
+    win.addEventListener("resize", function() {
+        clearTimeout(tid); //防止执行两次
+        tid = setTimeout(refreshRem, 300);
+    }, false);
+
+    win.addEventListener("pageshow", function(e) {
+        if (e.persisted) { // 浏览器后退的时候重新计算
+            clearTimeout(tid);
+            tid = setTimeout(refreshRem, 300);
+        }
+    }, false);
+
+    if (doc.readyState === "complete") {
+        doc.body.style.fontSize = "16px";
+    } else {
+        doc.addEventListener("DOMContentLoaded", function(e) {
+            doc.body.style.fontSize = "16px";
+        }, false);
+    }
+})(750, 1024);

src/App.vue

@@ -5,9 +5,86 @@
 </template>
 
 <style>
+/* 引入字体 */
+
+*{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+html,
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
+	background-color: #FFFFFF;
+	margin: 0px;
+	padding: 0px;
+	color: #333333;
+}
+
+ul,
+li {
+	list-style: none;
+}
+
+img {
+	border: 0;
+	vertical-align: middle;
+	display: block;
+	object-fit: cover;
+}
+
+a{
+	display: block;
+	color: #333333;
+	text-decoration: none;
+	/* 手机端去除a标签点击时的背景样式 */
+	-webkit-tap-highlight-color: transparent;
+}
+
+em,
+ins{
+	font-style: normal;
+}
+
+img,
+a {
+	-webkit-touch-callout: none;
+}
+
+input,
+button,
+textarea{
+	/* 取消轮廓 */
+	outline: none;
+	/* 去掉默认外观 */
+	-webkit-appearance: none;
+	/* 去掉点击时的默认外观 */
+	outline-style: none;
+	border: 0 none;
+	border-radius: 0;
+}
+
+textarea {
+	/* 禁止自定义拉伸 */
+	resize: none;
+}
+
+/* 公共css */
+.content{
+	width: 100%;
+	min-height: 100%;
+}
+.main-content{
+	margin-bottom: 1.5rem;
+}
+.main{
+	margin-top: 1rem;
+}
 /* 登录页面 */
 .login-txt{
-	padding: 0 .4rem;
+	padding: 0.4rem;
 	min-height: 6.6rem;
 }
 .login-txt .logo{

src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
 import App from './App.vue'
 import router from './router'
 Vue.config.productionTip = false
-
+Vue.use(VueAxios, axios)
 new Vue({
   router,
   render: h => h(App)