新增部分資源

package-lock.json

@@ -306,6 +306,11 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://r2.cnpmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://r2.cnpmjs.org/atob/-/atob-2.1.2.tgz",
@@ -345,6 +350,16 @@
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
       "dev": true
     },
+    "axios": {
+      "version": "1.4.0",
+      "resolved": "https://r.cnpmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://r2.cnpmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -1905,6 +1920,14 @@
       "integrity": "sha512-ENwblkFQpqqia6b++zLD/KUWafYlVY/UNnAp7oz7LY7E924wmpye416wBOmvv/HMWzl8gL1kJlfvId/1Dg176w==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://r2.cnpmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "2.17.1",
       "resolved": "https://r2.cnpmjs.org/commander/-/commander-2.17.1.tgz",
@@ -3323,6 +3346,11 @@
         }
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://r2.cnpmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://r2.cnpmjs.org/depd/-/depd-2.0.0.tgz",
@@ -4245,8 +4273,7 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://r.cnpmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "for-each": {
       "version": "0.3.3",
@@ -4263,6 +4290,16 @@
       "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
       "dev": true
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://r2.cnpmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://r2.cnpmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6059,14 +6096,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://r.cnpmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://r.cnpmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -9316,6 +9351,11 @@
         "ipaddr.js": "1.9.1"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://r2.cnpmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://r2.cnpmjs.org/prr/-/prr-1.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@qiun/vue-ucharts": "^2.5.0-20230101",
+    "axios": "^1.4.0",
     "echarts": "^5.4.2",
     "less": "^4.1.3",
     "less-loader": "^4.1.0",

src/components/index/index.vue

@@ -5,13 +5,18 @@
         <div class="topCard">
           <div class="item">
             <div style="margin-left: 2%;" class="topTitle">累计进馆人数：3,435,123万人</div>
-            <img class="topImg" src="../../assets/index/顶部文字.png"/>
+            <img class="topImg" src="../../assets/index/top_title.png"/>
             <div style="margin-right: 2%;" class="topTitle">星期四 16:33:33 天气：晴</div>
           </div>
 
+          <!-- 功能区 -->
+          <div class="sel_zone">
+
+          </div>
+
           <div class="selectItem">
             <div @click="clickItme(1)" class="tiyuchang guan" :class="selectVal == 1 ? 'tiyuchangBackS' : 'tiyuguanBackD'">
-              <div class="txt">体育场</div>
+              <div class="txt">体育</div>
             </div>
             <div @click="clickItme(2)" class="tiyuguan guan" :class="selectVal == 2 ? 'tiyuguanBackS' : 'tiyuguanBackD'">
               <div class="txt">体育馆</div>
@@ -20,7 +25,7 @@
               <div class="txt">总览</div>
             </div>
             <div @click="clickItme(4)" class="youyong guan" :class="selectVal == 4 ? 'youyongBackS' : 'youyongBackD'">
-              <div class="txt">游泳场馆</div>
+              <div class="txt">文化</div>
             </div>
             <div @click="clickItme(5)" class="bowu guan" :class="selectVal == 5 ? 'bowuS' : 'bowuD'">
               <div class="txt">图书馆</div>
@@ -31,11 +36,8 @@
          
         <router-view></router-view>
         
-        
-
-        <div class="botCard">
-
-        </div>
+        <!-- 底部 -->
+        <div class="bottom"></div>
       </div>
     </div>
   </template>
@@ -44,7 +46,6 @@
   export default {
     data () {
       return {
-        msg: 'Welcome to Your Vue.js App',
         selectVal: 3,
         keliuList: [
           {
@@ -223,10 +224,10 @@
         }
       }
 
-      .botCard{
+      .bottom{
         width: 100%;
         height: 12%;
-        background-image: url('../../assets/index/底部.png');
+        background-image: url('../../assets/g_footbg.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         position: absolute;

src/utils/request.js

@@ -0,0 +1,47 @@
+import axios from 'axios'
+// 创建一个 axios 实例
+const service = axios.create({
+	baseURL: '/api', // 所有的请求地址前缀部分
+	timeout: 60000, // 请求超时时间毫秒
+	withCredentials: true, // 异步请求携带cookie
+	headers: {
+		// 设置后端需要的传参类型
+		'Content-Type': 'application/json',
+		'token': 'your token',
+		'X-Requested-With': 'XMLHttpRequest',
+	},
+})
+
+// 添加请求拦截器
+service.interceptors.request.use(
+	function (config) {
+		// 在发送请求之前做些什么
+		return config
+	},
+	function (error) {
+		// 对请求错误做些什么
+		console.log(error)
+		return Promise.reject(error)
+	}
+)
+
+// 添加响应拦截器
+service.interceptors.response.use(
+	function (response) {
+		console.log(response)
+		// 2xx 范围内的状态码都会触发该函数。
+		// 对响应数据做点什么
+		// dataAxios 是 axios 返回数据中的 data
+		const dataAxios = response.data
+		// 这个状态码是和后端约定的
+		const code = dataAxios.reset
+		return dataAxios
+	},
+	function (error) {
+		// 超出 2xx 范围的状态码都会触发该函数。
+		// 对响应错误做点什么
+		console.log(error)
+		return Promise.reject(error)
+	}
+)
+export default service