徒步大会提交1

.postcssrc.js

@@ -5,9 +5,9 @@ module.exports = {
       overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
     },
     'postcss-pxtorem': {
-      rootValue: 37.5,
+      rootValue: 75,
       propList: ['*'],
-      //selectorBlackList: ['van-']
+      selectorBlackList: ['van-toast']
     }
   }
 }

package-lock.json

@@ -1906,9 +1906,9 @@
           }
         },
         "chalk": {
-          "version": "4.1.0",
+          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995297666&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -1965,8 +1965,8 @@
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
           "dev": true,
           "optional": true
         },
@@ -1978,8 +1978,8 @@
         },
         "loader-utils": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2083,8 +2083,8 @@
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618561027869&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2109,9 +2109,9 @@
           }
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.8",
+          "version": "npm:vue-loader@16.2.0",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+          "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz",
-          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+          "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -4517,58 +4517,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "cross-env": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
-      "integrity": "sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^7.0.1"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",

src/api/home.js

@@ -1,5 +1,10 @@
 // import qs from 'qs'
 // axios
 // import request from '@/utils/request'
-// home api
+// home homeApi
 
+const homeApi = {
+  registerForWalkingFestival: '/ebapi/public_api/register_for_walking_festival'
+}
+
+export default homeApi

src/api/user.js

@@ -1,32 +1,14 @@
-import api from './index'
+import homeApi from './home'
 // axios
 import request from '@/utils/request'
 
-// 登录
+// 用户提交图片 & 手机号
-export function login(data) {
+export function registerForWalkingFestival(data) {
   return request({
-    url: api.Login,
+    headers: { 'Content-Type': 'multipart/form-data' },
+    url: homeApi.registerForWalkingFestival,
     method: 'post',
     data
-  })
+    // hideloading: true
-}
-
-// 用户信息 post 方法
-export function getUserInfo(data) {
-  return request({
-    url: api.UserInfo,
-    method: 'post',
-    data,
-    hideloading: true
-  })
-}
-
-// 用户名称 get 方法
-export function getUserName(params) {
-  return request({
-    url: api.UserName,
-    method: 'get',
-    params,
-    hideloading: true
   })
 }

src/assets/css/index.scss

@@ -8,6 +8,13 @@ body .app {
   background-color: $background-color;
 }
 
-.app-container {
+// .app-container {
-  padding-bottom: 50px;
+//   padding-bottom: 50px;
+// }
+
+img {
+  max-width: 100%;
+}
+* {
+  box-sizing: border-box;
 }

src/config/env.development.js

@@ -1,8 +1,8 @@
 // 本地环境配置
 module.exports = {
-  title: 'vue-h5-template',
+  title: '徒步大会活动',
   baseUrl: 'http://localhost:9018', // 项目地址
-  baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
+  baseApi: '/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
   APPID: 'xxx',
   APPSECRET: 'xxx',
   $cdn: 'https://www.sunniejs.cn/static'

src/config/env.production.js

@@ -1,8 +1,8 @@
 // 正式
 module.exports = {
-  title: 'vue-h5-template',
+  title: '徒步大会活动',
-  baseUrl: 'https://www.xxx.com/', // 正式项目地址
+  baseUrl: 'https://mall.xiangleba.com.cn', // 正式项目地址
-  baseApi: 'https://www.xxx.com/api', // 正式api请求地址
+  baseApi: 'https://mall.xiangleba.com.cn', // 正式api请求地址
   APPID: 'xxx',
   APPSECRET: 'xxx',
   $cdn: 'https://www.sunniejs.cn/static'

src/config/env.staging.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'vue-h5-template',
+  title: '徒步大会活动',
   baseUrl: 'https://test.xxx.com', // 测试项目地址
   baseApi: 'https://test.xxx.com/api', // 测试api请求地址
   APPID: 'xxx',

src/plugins/vant.js

@@ -1,7 +1,9 @@
 // 按需全局引入 vant组件
 import Vue from 'vue'
-import { Button, List, Cell, Tabbar, TabbarItem } from 'vant'
+import { Button, List, Cell, ImagePreview, Toast, Tabbar, TabbarItem } from 'vant'
 Vue.use(Button)
 Vue.use(Cell)
 Vue.use(List)
+Vue.use(ImagePreview)
+Vue.use(Toast)
 Vue.use(Tabbar).use(TabbarItem)

src/router/router.config.js

@@ -17,12 +17,6 @@ export const constantRouterMap = [
         name: 'Home',
         component: () => import('@/views/home/index'),
         meta: { title: '首页', keepAlive: false }
-      },
-      {
-        path: '/about',
-        name: 'About',
-        component: () => import('@/views/home/about'),
-        meta: { title: '关于我', keepAlive: false }
       }
     ]
   }

src/views/home/about.vue

@@ -1,113 +0,0 @@
-<!-- home -->
-<template>
-  <div class="about-container">
-    <div class="warpper">
-      <div class="list">
-        <div class="logo"></div>
-        <div class="demo-home__title">VUE H5开发模板</div>
-        <div class="item">
-          项目地址:
-          <a href="https://github.com/sunniejs/vue-h5-template">https://github.com/sunniejs/vue-h5-template</a>
-        </div>
-        <div class="item">项目作者: sunnie</div>
-        <div class="item"></div>
-        <div class="wechat">
-          <img :src="this.wechat" alt="" />
-        </div>
-        <div class="item">关注公众号：回复“加群”即可加 前端仙女群</div>
-        <div class="item">
-          {{ userName }}
-          <van-button v-if="userName == ''" type="warning" size="small" @click="doDispatch">快点我~</van-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-// 请求接口
-import { getUserInfo } from '@/api/user.js'
-import { mapGetters } from 'vuex'
-export default {
-  data() {
-    return {
-      wechat: `${this.$cdn}/wx/640.gif`
-    }
-  },
-  computed: {
-    ...mapGetters(['userName'])
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    // 请求数据案例
-    initData() {
-      // 请求接口数据，仅作为展示，需要配置src->config下环境文件
-      const params = { user: 'sunnie' }
-      getUserInfo(params)
-        .then(() => { })
-        .catch(() => { })
-    },
-    // Action 通过 store.dispatch 方法触发
-    doDispatch() {
-      this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
-    },
-    goGithub(index) {
-      window.location.href = 'https://github.com/sunniejs/vue-h5-template'
-    }
-  }
-}
-</script>
-<style lang="scss">
-.about-container {
-  /* 你的命名空间 */
-  background: #fff;
-  height: 100vh;
-  box-sizing: border-box;
-  .warpper {
-    padding: 50px 12px 12px 12px;
-    .list {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: #666;
-      font-size: 14px;
-      .demo-home__title {
-        margin: 0 0 6px;
-        font-size: 32px;
-        .demo-home__title img,
-        .demo-home__title span {
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
-      .item {
-        font-size: 14px;
-        line-height: 34px;
-        a {
-          text-decoration: underline;
-        }
-        .van-button {
-          /* vant-ui 元素*/
-          background: #ff5500;
-        }
-      }
-
-      .logo {
-        width: 120px;
-        height: 120px;
-        background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
-      }
-      .wechat {
-        width: 200px;
-        height: 200px;
-        img {
-          width: 100%;
-          height: auto;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/home/index.vue

@@ -2,74 +2,361 @@
 <template>
   <div class="index-container">
     <div class="warpper">
-      <h1 class="demo-home__title"><img src="https://www.sunniejs.cn/static/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
+      <img class="warpper-bg" src="@/assets/images/home/zhutu.png" alt="" />
-      <h2 class="demo-home__desc">
+      <div class="warpper-form" v-if="!isFinished">
-        A vue h5 template with Vant UI
+        <input type="text" name="phone" v-model="submitInfo.phone" placeholder="请输入手机号" />
-      </h2>
+        <div class="warpper-form__file" v-if="!submitInfo.image">
+          <img class="warpper-form__emptyImage" src="@/assets/images/home/img_tianjia.png" alt="" />
+          <input type="file" name="image" accept="image/jpeg,image/jpg,image/png" @change="fileChange($event)" />
+          <div class="warpper-form__note">请上传徒步报名凭证</div>
+        </div>
+        <div class="warpper-form__upLoadImage" v-else>
+          <img :src="upLoadImage" alt="上传图片" />
+        </div>
+        <button class="warpper-form__submit" :disabled="!isVerification" @click="submit">立即上传</button>
+      </div>
+      <div class="warpper-finished" v-else>
+        <div class="warpper-finished__note--1">徒步大会报名费已返还</div>
+        <div class="warpper-finished__note--2">请下载享乐吧APP，<br />到“购物商城 - 我的余额”中查看</div>
+        <a href="https://h5.game8808.cn/themes/simplebootx/Appapi/Video/txjunp.php" class="warpper-finished__download">
+          <img src="@/assets/images/home/xiazai_button.png" alt="" />
+        </a>
+      </div>
+      <div class="warpper-rules">
+        <div class="title">活动规则</div>
+        <div class="warpper-rules__item">
+          <div class="item-title"><span>活动对象</span></div>
+          <div class="item-text">活动期间注册并登录享乐吧APP的新用户，老用户</div>
+        </div>
+        <div class="warpper-rules__item">
+          <div class="item-title"><span>活动时间</span></div>
+          <div class="item-text">5月4日 - 5月14日</div>
+        </div>
+        <div class="warpper-rules__item">
+          <div class="item-title"><span>活动流程及规则</span></div>
+          <div class="item-text">
+            <span class="count">1.</span>
+            <span class="content">上传徒步大会有效报名证明图片；</span>
+          </div>
+          <div class="item-text">
+            <span class="content">报名证明： </span>
+          </div>
+          <div class="item-text">
+            <span class="content">（1）公众号报名成功订单 </span>
+          </div>
+          <div class="item-text">
+            <span class="content">
+              <img :src="ActiveImage" alt="" @click="showImge" />
+            </span>
+          </div>
+          <div class="item-text">
+            <span class="content">（2）线下报名凭证 </span>
+          </div>
+          <div class="item-text">
+            <span class="count">2.</span>
+            <span class="content">平台审核通过后，享乐吧APP发放10元商城余额，请到“购物商城-我的余额”中查看;</span>
+          </div>
+          <div class="item-text">
+            <span class="count">3.</span>
+            <span class="content">活动注意事项：</span>
+          </div>
+          <div class="item-text">
+            <span class="content">· 若发现用户违规行为，享乐吧APP有权立即终止其活动； </span>
+          </div>
+          <div class="item-text">
+            <span class="content">· 本活动最终解释权归享乐吧APP平台所有。</span>
+          </div>
+        </div>
+      </div>
+      <div class="warpper-download">
+        <a href="https://h5.game8808.cn/themes/simplebootx/Appapi/Video/txjunp.php">
+          <img src="@/assets/images/home/xiazai.png" alt="" />
+        </a>
+      </div>
     </div>
-    <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
   </div>
 </template>
 
 <script>
+import { ImagePreview, Toast } from 'vant'
+import { registerForWalkingFestival } from '@/api/user'
+import ActiveImage from '@/assets/images/home/img.png'
 export default {
   data() {
     return {
-      list: [
+      submitInfo: {
-        'Vue-cli4',
+        phone: '',
-        '配置多环境变量',
+        image: ''
-        'VantUI 组件按需加载',
+      }, // 要上传的字段
-        'Sass 全局样式',
+      upLoadImage: '', // 是否已经上传了图片
-        'Webpack 4',
+      isFinished: false, // 是否完成提交
-        'Vuex 状态管理',
+      ActiveImage // 点击可浏览的
-        'Axios 封装及接口管理',
-        'Vue-router',
-        'Webpack 4 vue.config.js 基础配置',
-        '配置 proxy 跨域',
-        '配置 alias 别名',
-        '配置 打包分析',
-        '配置 externals 引入 cdn 资源',
-        '去掉 console.log',
-        'splitChunks 单独打包第三方模块',
-        '添加 IE 兼容',
-        'Eslint+Pettier 统一开发规范'
-      ]
     }
   },
+  computed: {
+    isVerification() {
+      const emptyEnum = Object.values(this.submitInfo).filter(v => !v)
+      // 如果存在空值不可提交
+      if (emptyEnum.length > 0) {
+        return false
+      }
+      return true
+    }
+  },
+  mounted() {},
+  methods: {
+    // 上传图片响应
+    fileChange(event) {
+      const files = event.target.files
+      if (files.length) {
+        this.submitInfo.image = files[0]
+        const reader = new FileReader()
+        reader.readAsDataURL(files[0])
+        reader.onload = data => {
+          const result = data.target.result
+          this.upLoadImage = result
+        }
+      }
+    },
+    // 点击图片浏览
+    showImge() {
+      ImagePreview([ActiveImage])
+    },
+    // 提交信息
+    submit() {
+      const { phone, image } = this.submitInfo
+      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)) {
+        return Toast('手机号码格式有误!')
+      }
+      if (!image) {
+        return Toast('没有上传图片嗷!')
+      }
 
-  computed: {},
+      var formData = new FormData()
-
+      formData.append('phone', phone)
-  mounted() { },
+      formData.append('image', image)
-
+      registerForWalkingFestival(formData)
-  methods: {}
+        .then(res => {
+          Toast('提交成功!')
+          this.isFinished = true
+        })
+        .catch(error => {
+          console.log('registerForWalkingFestival-error', error)
+        })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
 .index-container {
-  .warpper {
+  background-color: #008a78;
-    padding: 12px;
+  background-image: url('../../assets/images/home/shumu.png');
-    background: #fff;
+  background-position: bottom center;
-    .demo-home__title {
+  background-size: 100%;
-      margin: 0 0 6px;
+  background-repeat: no-repeat;
+  padding-bottom: 56px;
+  min-height: 100vh;
+  .warpper-bg {
+    width: 100%;
+  }
+  .warpper-form {
+    position: relative;
+    width: 710px;
+    margin: 0 auto;
+    margin-top: -147px;
+    border-radius: 10px;
+    padding: 64px;
+    background-color: #fff;
+    border: 3px solid #3ea699;
+    margin-bottom: 66px;
+    .warpper-form__file {
+      position: relative;
+    }
+    input[type='text'] {
+      width: 582px;
+      height: 90px;
       font-size: 32px;
-      .demo-home__title img,
+      font-family: 'PingFang-SC-Bold';
-      .demo-home__title span {
+      font-weight: bold;
-        display: inline-block;
+      border: 0;
-        vertical-align: middle;
+      -webkit-appearance: none;
+      box-shadow: 0 0 0 3px #4fada2;
+      -webkit-box-shadow: 0 0 0 3px #4fada2;
+      border-radius: 10px;
+      margin: 0 auto;
+      margin-bottom: 40px;
+      padding: 0 22px;
+      color: #167264;
+      &::placeholder {
+        color: #167264;
+        opacity: 0.5;
       }
+    }
+    input[type='file'] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      opacity: 0;
+    }
+    .warpper-form__emptyImage {
+      margin-bottom: 40px;
+    }
+    .warpper-form__upLoadImage {
+      margin-bottom: 40px;
       img {
-        width: 32px;
+        width: 100%;
       }
-      span {
+    }
-        margin-left: 16px;
+    .warpper-form__note {
+      line-height: 1;
+      margin-bottom: 40px;
+      font-size: 36px;
+      font-family: PingFang SC;
       font-weight: 500;
+      color: #008a78;
+      text-align: center;
+    }
+    .warpper-form__submit {
+      width: 582px;
+      height: 86px;
+      line-height: 86px;
+      margin: 0 auto;
+      border-radius: 43px;
+      border: 0;
+      color: #fff;
+      font-size: 36px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      background: linear-gradient(to bottom, #2ec2af, #3ea79a);
+      box-shadow: 0 3px 0px 3px #2c9386;
+      text-align: center;
+      &:disabled {
+        background: linear-gradient(to bottom, #e5e5e5, #cccdcc);
+        box-shadow: 0 3px 0px 3px #b3b3b3;
       }
     }
-    .demo-home__desc {
-      margin: 0 0 20px;
-      color: rgba(69, 90, 100, 0.6);
-      font-size: 14px;
   }
+  .warpper-finished {
+    position: relative;
+    width: 710px;
+    margin: 0 auto;
+    margin-top: -147px;
+    border-radius: 10px;
+    padding: 64px;
+    background-color: #fff;
+    border: 3px solid #3ea699;
+    margin-bottom: 66px;
+  }
+  .warpper-finished__note--1 {
+    width: 582px;
+    height: 156px;
+    line-height: 156px;
+    font-size: 44px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #008a78;
+    text-align: center;
+    background-color: #e1fffb;
+    margin-bottom: 24px;
+  }
+  .warpper-finished__note--2 {
+    height: 69px;
+    font-size: 30px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #008a78;
+    line-height: 40px;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  .warpper-finished__download {
+    display: block;
+    margin: 0 auto;
+    width: 582px;
+  }
+  .warpper-rules {
+    width: 710px;
+    margin: 0 auto;
+    border-radius: 10px;
+    padding: 64px 34px;
+    padding-top: 0;
+    background-color: #fff;
+    border: 3px solid #3ea699;
+    margin-bottom: 24px;
+    .title {
+      text-align: center;
+      width: 320px;
+      height: 80px;
+      line-height: 80px;
+      margin: 0 auto;
+      margin-top: -41px;
+      border-radius: 43px;
+      border: 0;
+      color: #fff;
+      font-size: 36px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      background: linear-gradient(to bottom, #2ec2af, #3ea79a);
+      box-shadow: 0 3px 0px 3px #2c9386;
+      margin-bottom: 30px;
+    }
+  }
+  .warpper-rules__item {
+    padding-bottom: 30px;
+    font-size: 30px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #008a78;
+    line-height: 1.8;
+    .item-title {
+      display: flex;
+      justify-content: flex-start;
+      height: 56px;
+      line-height: 56px;
+      color: #fff;
+      font-size: 30px;
+      font-family: PingFang SC;
+      font-weight: 500;
+      margin-bottom: 24px;
+      span {
+        padding-left: 16px;
+        padding-right: 34px;
+        background-color: #008a78;
+        border-top-right-radius: 26px;
+        border-bottom-right-radius: 26px;
+      }
+    }
+    .item-text {
+      display: flex;
+      .count {
+        position: absolute;
+      }
+      .content {
+        padding-left: 33px;
+      }
+    }
+  }
+  @keyframes moves {
+    form {
+      transform: translateY(-5%);
+    }
+    to {
+      transform: translateY(5%);
+    }
+  }
+  .warpper-download {
+    // position: fixed;
+    // bottom: 56px;
+    // left: 50%;
+    // margin-left: -340px;
+    margin: 0 auto;
+    width: 680px;
+    display: flex;
+    justify-content: center;
+    z-index: 10;
+    animation: moves 1s infinite alternate;
   }
 }
 </style>

src/views/layouts/index.vue

@@ -6,14 +6,14 @@
       </keep-alive>
       <router-view v-else></router-view>
     </div>
-    <div class="layout-footer">
+    <!-- <div class="layout-footer">
       <TabBar :data="tabbars" @change="handleChange" />
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import TabBar from '@/components/TabBar'
+// import TabBar from '@/components/TabBar'
 export default {
   name: 'AppLayout',
   data() {
@@ -37,7 +37,7 @@ export default {
     }
   },
   components: {
-    TabBar
+    // TabBar
   },
   methods: {
     handleChange(v) {

vue.config.js

@@ -44,24 +44,25 @@ module.exports = {
   lintOnSave: !IS_PROD,
   productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   devServer: {
+    public: '0.0.0.0',
     port: 9020, // 端口
     open: false, // 启动后打开浏览器
     overlay: {
       //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
       warnings: false,
       errors: true
+    },
+    proxy: {
+      // 配置跨域
+      '/api': {
+        target: 'https://vall.xiangleba.com.cn',
+        // ws:true,
+        changOrigin: true,
+        pathRewrite: {
+          '^/api': '/'
+        }
+      }
     }
-    // proxy: {
-    //   //配置跨域
-    //   '/api': {
-    //       target: "https://test.xxx.com",
-    //       // ws:true,
-    //       changOrigin:true,
-    //       pathRewrite:{
-    //           '^/api':'/'
-    //       }
-    //   }
-    // }
   },
   css: {
     extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。