home

RedrockTeam · Sep 21, 2019 · f6c284e · f6c284e
commit f6c284e
Show file tree

Hide file tree

Showing 32 changed files with 10,462 additions and 0 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,2 @@
+> 1%
+last 2 versions
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -0,0 +1,46 @@
+# 中国地图拼拼看
+
+> China-map-puzzle-game
+
+## 项目介绍
+中国地图拼图闯关游戏，点两块交换位置
+一共四个关卡，拼图个数分别为`2*2`、`3*3`、`4*4`、`5*5`，拼好图即闯关成功
+只有通过前一关卡才能选择下一关卡，每一关卡计时，可重复闯关，用时短者排名靠前
+
+**项目截图**
+
+
+## 使用方法
+#### 开发环境
+
+~~~
+$ yarn install
+
+$ yarn run serve
+~~~
+
+
+
+#### 生产环境
+~~~
+$ yarn run build
+~~~
+
+
+
+## 技术栈
+* vue
+* vue-router
+* vuex
+* webpack
+* axios
+
+## 实现情况
+
+- [x] 基本页面切图动效
+- [ ] 
+
+## 目录结构
+
+## 备注
+1. 用FECS统一代码风格
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "my",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "fecs": "^1.6.4",
+    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-retina": "^1.2.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.0.3",
+    "vuex": "^3.0.1",
+    "webpack": "^4.40.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-service": "^3.11.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.6.10"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    "postcss-px-to-viewport": {
+      viewportWidth: 750, // 设计稿宽度
+      // viewportHeight: 1334, // 设计稿高度，可以不指定
+      unitPrecision: 3, // px to vw 无法整除时，保留几位小数
+      viewportUnit: 'vw', // 转换成vw单位
+      selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
+      minPixelValue: 1, // 小于1px不转换
+      mediaQuery: true // 允许媒体查询中转换
+    },
+    "postcss-retina": {},
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>my</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but my doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="main">
+    <div class="btn">
+      <img class="one" v-if="isShow" src="./assets/img/home/home_btn1.png" @click="startJoin" />
+      <img class="two" v-if="!isShow" src="./assets/img/home/home_btn2.png" />
+    </div>
+    <div class="msg">
+      <p>点两块交换位置</p>
+      <p>用最短时间完成拼图</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import request from "./network/request.js";
+export default {
+  data() {
+    return {
+      isShow: true
+    };
+  },
+  created: function() {
+    if (localStorage.getItem("token")) {
+      request({
+        url: "/magicloop/rushb",
+        method: 'POST',
+        headers:{
+          'token': window.localStorage['token']
+        },
+        data: {
+          b: "https%3a%2f%2fwx.idsbllp.cn%2f",
+          scope: "student"
+        }
+      })
+        .then(res => {
+          console.log(res);
+        })
+        .catch(res => {
+          console.log(res);
+        });
+    } else {
+      request({
+        url: "/magicloop/rushb",
+        methods: "post",
+        data: {
+          b: "https%3a%2f%2fwx.idsbllp.cn%2f",
+          scope: "student"
+        }
+      })
+        .then(res => {
+          console.log(res);
+        })
+        .catch(res => {
+          console.log(res);
+        });
+    }
+  },
+  computed: {},
+  methods: {
+    startJoin() {
+      this.isShow = false;
+      this.$router.push("./home/choose");
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.main {
+  width: 750px;
+  height: 1206px;
+  background-image: url("./assets/img/home/home_bg.jpg");
+  background-repeat: no-repeat;
+  background-position: 0% 0%;
+  background-size: contain;
+  .btn {
+    .one {
+      width: 567px;
+      height: 561px;
+      margin: 650px auto auto 210px;
+    }
+    .two {
+      width: 577px;
+      height: 581px;
+      margin: 610px auto auto 172px;
+    }
+  }
+  .msg {
+    font-size: 28px;
+    color: #e87142;
+    font-family: "Tanuki";
+    margin-top: -116px;
+    p {
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/assets/font/Tanuki.ttf b/src/assets/font/Tanuki.ttf
diff --git a/src/assets/font/font.css b/src/assets/font/font.css
@@ -0,0 +1,6 @@
+@font-face {
+    font-family: "Tanuki";
+    font-weight: normal;
+    font-style: normal;
+    src: url('./Tanuki.ttf') format('truetype');
+}
diff --git a/src/assets/img/home/home_bg.jpg b/src/assets/img/home/home_bg.jpg
diff --git a/src/assets/img/home/home_btn1.png b/src/assets/img/home/home_btn1.png
diff --git a/src/assets/img/home/home_btn2.png b/src/assets/img/home/home_btn2.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css
@@ -0,0 +1,37 @@
+/* global */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+}
+
+html,
+body {
+    width: 100%;
+}
+
+a {
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+    color: black;
+    outline: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+.clear {
+    clear: both;
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import axios from 'axios'
+
+import './assets/styles/common.css'
+import './assets/font/font.css'
+
+Vue.prototype.$axios = axios;
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
+// axios的全局配置baseURL、超时时间、header
+axios.defaults.baseURL = 'https://wx.redrock.team'
+axios.defaults.timeout = 5000
+axios.defaults.header.post['Content-type'] = 'application/json'
diff --git a/src/network/request.js b/src/network/request.js
@@ -0,0 +1,31 @@
+// 对第三方库进行封装
+import axios from 'axios'
+
+export default function request(config) {
+    // 1.创建axios实例
+    const instance = axios.create({
+        baseURL:'https://wx.redrock.team',
+        timeout: 5000,
+    })
+
+    // 2.axios的拦截器
+    // 2.1请求拦截
+    instance.interceptors.request.use(config=>{
+        console.log(config)
+        // 处理config/每次请求时显示图标/某些网络请求如登陆必须携带特殊信息
+        return config
+    },err => {
+        console.log(err)
+    })
+    // 2.2响应拦截
+    instance.interceptors.response.use(res=>{
+        console.log(res)
+        // res.data
+        return res.data
+    },err=>{
+        console.log(err)
+    })
+
+    // 3.网络请求，返回的是Promise
+    return instance(config)
+}