陈嘉濠 / cezi · Commits

Go to a project

Authored by 陈嘉濠
Commit d1f792401f1fa3bc11032806f341bb613d2d26eb 1 parent fae9072e

测字

Inline Side-by-side
Showing 57 changed files with 2466 additions and 1 deletions
  1 +> 1%
  2 +last 2 versions
  3 +not dead
  1 +module.exports = {
  2 + root: true,
  3 + env: {
  4 + node: true
  5 + },
  6 + 'extends': [
  7 + 'plugin:vue/essential',
  8 + 'eslint:recommended'
  9 + ],
  10 + parserOptions: {
  11 + parser: '@babel/eslint-parser'
  12 + },
  13 + rules: {
  14 + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  15 + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  16 + }
  17 +}
  1 +.DS_Store
  2 +node_modules
  3 +/dist
  4 +
  5 +
  6 +# local env files
  7 +.env.local
  8 +.env.*.local
  9 +
  10 +# Log files
  11 +npm-debug.log*
  12 +yarn-debug.log*
  13 +yarn-error.log*
  14 +pnpm-debug.log*
  15 +
  16 +# Editor directories and files
  17 +.idea
  18 +.vscode
  19 +*.suo
  20 +*.ntvs*
  21 +*.njsproj
  22 +*.sln
  23 +*.sw?
  1 +# detection
  2 +
  3 +## Project setup
  4 +```
  5 +npm install
  6 +```
  7 +
  8 +### Compiles and hot-reloads for development
  9 +```
  10 +npm run serve
  11 +```
  12 +
  13 +### Compiles and minifies for production
  14 +```
  15 +npm run build
  16 +```
  17 +
  18 +### Lints and fixes files
  19 +```
  20 +npm run lint
  21 +```
  22 +
  23 +### Customize configuration
  24 +See [Configuration Reference](https://cli.vuejs.org/config/).
  1 +module.exports = {
  2 + presets: [
  3 + '@vue/cli-plugin-babel/preset'
  4 + ],
  5 + "plugins": [
  6 + ["import", {
  7 + "libraryName": "vant",
  8 + "libraryDirectory": "es",
  9 + "style": true
  10 + }]
  11 + ]
  12 +}
  1 +{
  2 + "compilerOptions": {
  3 + "target": "es5",
  4 + "module": "esnext",
  5 + "baseUrl": "./",
  6 + "moduleResolution": "node",
  7 + "paths": {
  8 + "@/*": [
  9 + "src/*"
  10 + ]
  11 + },
  12 + "lib": [
  13 + "esnext",
  14 + "dom",
  15 + "dom.iterable",
  16 + "scripthost"
  17 + ]
  18 + }
  19 +}
This diff could not be displayed because it is too large.
  1 +{
  2 + "name": "detection",
  3 + "version": "0.1.0",
  4 + "private": true,
  5 + "scripts": {
  6 + "serve": "vue-cli-service serve",
  7 + "build": "vue-cli-service build",
  8 + "lint": "vue-cli-service lint"
  9 + },
  10 + "dependencies": {
  11 + "axios": "^0.27.2",
  12 + "clipboard": "^2.0.11",
  13 + "core-js": "^3.8.3",
  14 + "js-md5": "^0.7.3",
  15 + "register-service-worker": "^1.7.2",
  16 + "vant": "^2.12.49",
  17 + "vconsole": "^3.14.6",
  18 + "vue": "^2.6.14",
  19 + "vue-router": "^3.5.1",
  20 + "vuex": "^3.6.2"
  21 + },
  22 + "devDependencies": {
  23 + "@babel/core": "^7.12.16",
  24 + "@babel/eslint-parser": "^7.12.16",
  25 + "@vue/cli-plugin-babel": "~5.0.0",
  26 + "@vue/cli-plugin-eslint": "~5.0.0",
  27 + "@vue/cli-plugin-pwa": "^5.0.8",
  28 + "@vue/cli-plugin-router": "~5.0.0",
  29 + "@vue/cli-plugin-vuex": "~5.0.0",
  30 + "@vue/cli-service": "~5.0.0",
  31 + "babel-plugin-import": "^1.13.5",
  32 + "eslint": "^7.32.0",
  33 + "eslint-plugin-vue": "^8.0.3",
  34 + "sass": "^1.32.7",
  35 + "sass-loader": "^12.0.0",
  36 + "vue-template-compiler": "^2.6.14"
  37 + }
  38 +}
No preview for this file type
  1 +<!DOCTYPE html>
  2 +<html lang="">
  3 + <head>
  4 + <meta charset="utf-8">
  5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 + <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7 + <link rel="icon" href="./favicon.ico" rel="external nofollow" type="image/x-icon" />
  8 + <link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" type="image/x-icon" />
  9 + <title>微宝配对</title>
  10 + </head>
  11 + <body>
  12 + <noscript>
  13 + <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  14 + </noscript>
  15 + <div id="app"></div>
  16 + <!-- built files will be auto injected -->
  17 + </body>
  18 +</html>
  1 +User-agent: *
  2 +Disallow:
  1 +<template>
  2 + <div id="app">
  3 + <keep-alive include>
  4 + <router-view></router-view>
  5 + </keep-alive>
  6 + </div>
  7 +</template>
  8 +
  9 +<style lang="scss">
  10 + * {
  11 + padding: 0px;
  12 + margin: 0px;
  13 +}
  14 +#app{
  15 + position: absolute;
  16 + top: 0;
  17 + left: 0;
  18 +}
  19 +</style>
  1 +//引入配置好的axios
  2 +//@/就是当前的src/, vue默认配置的
  3 +import axios from "@/utils/_axios.js";
  4 +
  5 +
  6 +//首页
  7 +// 项目列表
  8 +export function homeList(){
  9 + return axios({
  10 + url:"promotes/",
  11 + method:"GET",
  12 + header:{isToken:false}
  13 + })
  14 +}
  15 +
  16 +// 项目列表详细
  17 +export function detailed(data){
  18 + return axios({
  19 + url:"promote_detail/?id="+data,
  20 + method:"GET",
  21 + header:{isToken:false}
  22 + })
  23 +}
  1 +//引入配置好的axios
  2 +//@/就是当前的src/, vue默认配置的
  3 +import axios from "@/utils/_axios.js";
  4 +
  5 +
  6 +//调起支付
  7 +// 支付宝
  8 +export function ZFBpay(data){
  9 + return axios({
  10 + url:"",
  11 + method:"POST",
  12 + data:{
  13 +
  14 + }
  15 + })
  16 +}
  17 +// 配对成功数据
  18 +export function pair(data){
  19 + return axios({
  20 + url:"namelove/",
  21 + method:"POST",
  22 + data:{
  23 + boy:data.boy,
  24 + girl:data.girl,
  25 + key:data.key
  26 + }
  27 + })
  28 +}
  29 +
  30 +// 付款人列表
  31 +export function payList(data){
  32 + return axios({
  33 + url:"get_name_by_pay/?id="+data,
  34 + method:"GET",
  35 + header:{isToken:false}
  36 + })
  37 +}
  38 +
  39 +
  40 +// 微信支付
  41 +export function payWX(data){
  42 + return axios({
  43 + url:"addorderh5/",
  44 + method:"POST",
  45 + data:{
  46 + order_no:data.order_no,
  47 + amount:"0.01"
  48 + },
  49 + header:{isToken:false}
  50 + })
  51 +}
  52 +
  53 +//支付后结果
  54 +export function payResult(data){
  55 + return axios({
  56 + url:"get_name_love/?order_no="+data,
  57 + method:"GET",
  58 + header:{isToken:false}
  59 + })
  60 +}
  61 +
  1 +<template>
  2 + <div class="hello">
  3 + <h1>{{ msg }}</h1>
  4 + <p>
  5 + For a guide and recipes on how to configure / customize this project,<br>
  6 + check out the
  7 + <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
  8 + </p>
  9 + <h3>Installed CLI Plugins</h3>
  10 + <ul>
  11 + <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
  12 + <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
  13 + <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
  14 + <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
  15 + <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
  16 + </ul>
  17 + <h3>Essential Links</h3>
  18 + <ul>
  19 + <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
  20 + <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
  21 + <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
  22 + <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
  23 + <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
  24 + </ul>
  25 + <h3>Ecosystem</h3>
  26 + <ul>
  27 + <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
  28 + <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
  29 + <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
  30 + <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
  31 + <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
  32 + </ul>
  33 + </div>
  34 +</template>
  35 +
  36 +<script>
  37 +export default {
  38 + name: 'HelloWorld',
  39 + props: {
  40 + msg: String
  41 + }
  42 +}
  43 +</script>
  44 +
  45 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  46 +<style scoped lang="scss">
  47 +h3 {
  48 + margin: 40px 0 0;
  49 +}
  50 +ul {
  51 + list-style-type: none;
  52 + padding: 0;
  53 +}
  54 +li {
  55 + display: inline-block;
  56 + margin: 0 10px;
  57 +}
  58 +a {
  59 + color: #42b983;
  60 +}
  61 +</style>
  1 +import Vue from 'vue'
  2 +import App from './App.vue'
  3 +import './registerServiceWorker'
  4 +import router from './router'
  5 +import store from './store'
  6 +// Vant UI
  7 +import "./utils/Vant/index"
  8 +Vue.config.productionTip = false
  9 +
  10 +
  11 +
  12 +
  13 +
  14 +
  15 +// 手机端调试
  16 +// import Vconsole from 'vconsole'
  17 +
  18 +// let vConsole = new Vconsole()
  19 +
  20 +// Vue.use(vConsole);
  21 +
  22 +// Vue.config.productionTip = false
  23 +
  24 +
  25 +// md5加密
  26 +import md5 from "js-md5"
  27 +// 复制
  28 +import clipboard from 'clipboard'
  29 +
  30 +new Vue({
  31 + router,
  32 + store,
  33 + render: h => h(App)
  34 +}).$mount('#app')
  35 +
  36 +Vue.prototype.$md5 = md5
  37 +
  38 +Vue.prototype.ClipboardJS = clipboard;
  1 +/* eslint-disable no-console */
  2 +
  3 +import { register } from 'register-service-worker'
  4 +
  5 +if (process.env.NODE_ENV === 'production') {
  6 + register(`${process.env.BASE_URL}service-worker.js`, {
  7 + ready () {
  8 + console.log(
  9 + 'App is being served from cache by a service worker.\n' +
  10 + 'For more details, visit https://goo.gl/AFskqB'
  11 + )
  12 + },
  13 + registered () {
  14 + console.log('Service worker has been registered.')
  15 + },
  16 + cached () {
  17 + console.log('Content has been cached for offline use.')
  18 + },
  19 + updatefound () {
  20 + console.log('New content is downloading.')
  21 + },
  22 + updated () {
  23 + console.log('New content is available; please refresh.')
  24 + },
  25 + offline () {
  26 + console.log('No internet connection found. App is running in offline mode.')
  27 + },
  28 + error (error) {
  29 + console.error('Error during service worker registration:', error)
  30 + }
  31 + })
  32 +}
  1 +import Vue from 'vue'
  2 +import VueRouter from 'vue-router'
  3 +
  4 +Vue.use(VueRouter)
  5 +
  6 +const routes = [
  7 + // 首页
  8 + {
  9 + path: '/home',
  10 + name: 'Home',
  11 + component: () => import('../views/home/home')
  12 + },
  13 + // 第二页
  14 + {
  15 + path: '/homeTwo',
  16 + name: 'HomeTwo',
  17 + component: () => import('../views/homeTwo/homeTwo')
  18 + },
  19 + // 第三页
  20 + {
  21 + path: '/pay',
  22 + name: 'Pay',
  23 + component: () => import('../views/pay/pay')
  24 + },
  25 + // 结果页
  26 + {
  27 + path: '/result',
  28 + name: 'Result',
  29 + component: () => import('../views/result/result')
  30 + },
  31 + {
  32 + path: '*',
  33 + // 首页
  34 + redirect: { path: "/home" }
  35 + // redirect: { path: "/home",query:{id:1} }
  36 +
  37 + },
  38 +]
  39 +
  40 +const router = new VueRouter({
  41 + mode: 'hash',
  42 + base: process.env.BASE_URL,
  43 + routes
  44 +})
  45 +// //重写VueRouter.prototype身上的push方法
  46 +const originPush = VueRouter.prototype.push;
  47 +// // const originReplace = VueRouter.prototype.replace;
  48 +VueRouter.prototype.push = function push(location) {
  49 + return originPush.call(this, location).catch(err => err)
  50 +}
  51 +
  52 +//全局守卫:前置守卫(在路由跳转之间进行判断)
  53 +router.beforeEach(async (to, from, next) => {
  54 + next()
  55 +});
  56 +
  57 +export default router
  1 +
  2 +import { homeList,detailed } from "@/api/home/index"
  3 +// 首页列表
  4 +
  5 +
  6 +// 状态
  7 +const state = {
  8 + // 首页内容
  9 + homeList:[],
  10 + // 首页内容详情
  11 + detailed:[]
  12 +}
  13 +
  14 +// 改变
  15 +const mutations = {
  16 + // 保存首页信息
  17 + GAINHOMELIST(state,data){
  18 + state.homeList = data
  19 + },
  20 + //保存首页详细信息
  21 + GAINHOMEDETAILED(state,data){
  22 + state.detailed = data
  23 + }
  24 +
  25 +}
  26 +
  27 +// 行动
  28 +const actions = {
  29 + // 首页信息
  30 + async gainHomeList({ commit }, data) {
  31 + let result = await homeList(data)
  32 + console.log(result);
  33 + if(result.code==200){
  34 + commit("GAINHOMELIST",result.data)
  35 + }
  36 + },
  37 + // 首页详细信息
  38 + async gainHomeDetailed({ commit }, data) {
  39 + let result = await detailed(data)
  40 + console.log(result);
  41 + if(result.code==200){
  42 + commit("GAINHOMEDETAILED",result.data)
  43 + }
  44 + }
  45 +}
  46 +
  47 +// 简化
  48 +const getters = {
  49 +
  50 +}
  51 +
  52 +// 导出
  53 +export default {
  54 + state,
  55 + mutations,
  56 + actions,
  57 + getters
  58 +}
  1 +import Vue from 'vue'
  2 +import Vuex from 'vuex'
  3 +
  4 +Vue.use(Vuex)
  5 +
  6 +// 引入模块
  7 +
  8 +// 支付
  9 +import pay from "./pay"
  10 +
  11 +// 支付
  12 +import home from "./home"
  13 +
  14 +export default new Vuex.Store({
  15 +
  16 + modules: {
  17 + pay,
  18 + home
  19 + }
  20 +})
  1 +import { pair, payList, payWX, payResult } from "../api/pay/index"
  2 +// 支付
  3 +
  4 +
  5 +// 状态
  6 +const state = {
  7 + // 配对信息
  8 + pairData: {},
  9 + // 付款人列表
  10 + paylist: [],
  11 + // 微信跳转链接
  12 + WXurl: "",
  13 + // 结果数据
  14 + resultDate:"",
  15 +}
  16 +
  17 +// 改变
  18 +const mutations = {
  19 + // 配对信息
  20 + GAINPAIR(state, data) {
  21 + state.pairData = data
  22 + },
  23 + // 付款人列表
  24 + GAINPAYLIST(state, data) {
  25 + state.paylist = data
  26 + },
  27 + // 微信支付
  28 + GAINPAYWX(state, data) {
  29 + state.WXurl = data
  30 + },
  31 + // 支付后结果
  32 + GAINPAYRESULT(state, data) {
  33 + state.resultDate = data
  34 +
  35 + }
  36 +}
  37 +
  38 +// 行动
  39 +const actions = {
  40 + // 配对成功获取数据
  41 + async gainPair({ commit }, data) {
  42 + let result = await pair(data)
  43 + console.log(result);
  44 + if (result.code == 200) {
  45 + commit("GAINPAIR", result.data)
  46 + } else {
  47 + return Promise.reject(result.message)
  48 + }
  49 + },
  50 + // 付款人列表
  51 + async gainPayList({ commit }, data) {
  52 + let result = await payList(data)
  53 + console.log(result);
  54 + if (result.code == 200) {
  55 + commit("GAINPAYLIST", result.data)
  56 + console.log(result.data);
  57 + }
  58 + },
  59 + // 微信支付
  60 + async gainPayWX({ commit }, data) {
  61 + let result = await payWX(data)
  62 + console.log(result);
  63 + if (result.code == 200) {
  64 + commit("GAINPAYWX", result.data)
  65 + }
  66 + },
  67 + // 支付后结果
  68 + async gainPayResult({ commit }, data) {
  69 + let result = await payResult(data)
  70 + console.log(result);
  71 + if (result.code == 200) {
  72 + commit("GAINPAYRESULT", result.data)
  73 + }
  74 + },
  75 +
  76 +}
  77 +
  78 +// 简化
  79 +const getters = {
  80 +
  81 +}
  82 +
  83 +// 导出
  84 +export default {
  85 + state,
  86 + mutations,
  87 + actions,
  88 + getters
  89 +}
  1 +import Vue from 'vue';
  2 +// 单选框
  3 +import { Checkbox, CheckboxGroup } from 'vant';
  4 +
  5 +import { RadioGroup, Radio } from 'vant';
  6 +
  7 +// 轻提示
  8 +import { Toast } from 'vant';
  9 +
  10 +// 弹出框提示
  11 +import { Dialog } from 'vant';
  12 +
  13 +// 弹出层
  14 +import { Popup } from 'vant';
  15 +
  16 +// 倒计时
  17 +import { CountDown } from 'vant';
  18 +
  19 +
  20 +
  21 +// 单选框
  22 +Vue.use(Checkbox);
  23 +Vue.use(CheckboxGroup);
  24 +
  25 +Vue.use(Radio);
  26 +Vue.use(RadioGroup);
  27 +
  28 +// 轻提示
  29 +Vue.use(Toast);
  30 +
  31 +// 弹出框提示
  32 +Vue.use(Dialog);
  33 +
  34 +// 弹出层
  35 +Vue.use(Popup);
  36 +
  37 +// 倒计时
  38 +Vue.use(CountDown);
  1 +//axios二次封装
  2 +//引入axios包
  3 +import axios from "axios";
  4 +//重新定义一个axios新实例
  5 +// create方法，创建一个
  6 +const request = axios.create({
  7 +
  8 + // 内网穿透测试环境
  9 + // baseURL: "http://egg.free.idcfengye.com/api",
  10 +
  11 + // 正式环境
  12 + baseURL: "http://czapi.gzrkkj.cn/v1/",
  13 + // baseURL: "http://czapi.gzrkkj.com/v1/",
  14 +
  15 + header: { isToken: true }
  16 +})
  17 +//请求拦截器
  18 +request.interceptors.request.use((config) => {
  19 + const token = localStorage.getItem("isToken")
  20 + if (token && config.header.isToken) {
  21 + // 设置请求头
  22 + config.headers.Authorization = token;
  23 + }
  24 + return config;
  25 +});
  26 +//响应拦截器
  27 +request.interceptors.response.use((res) => {
  28 + //成功的回调函数
  29 + return res.data;
  30 +}, (error) => {
  31 + //响应失败的回调函数
  32 +});
  33 +
  34 +//导出自定义的新axios实例
  35 +export default request;
  1 +<template>
  2 + <!-- 首页 -->
  3 + <div class="home">
  4 + <!-- 首页盒子内容 -->
  5 + <div class="homebox" :style="dynamic">
  6 + <!-- 活动规则 -->
  7 + <div class="activityRule" @click="ruleTips"></div>
  8 + <!-- 左边男方字体 -->
  9 + <img src="../image/nanfont.png" alt="" class="leftFont" />
  10 + <!-- 右边女方字体 -->
  11 + <img src="../image/nvfont.png" alt="" class="rightFont" />
  12 +
  13 + <!-- 输入内容-->
  14 + <div class="homeContent">
  15 + <!-- 输入框 -->
  16 + <div class="nameIptOne">
  17 + <input
  18 + v-model="boy"
  19 + class="nameIpt"
  20 + type="text"
  21 + placeholder="男孩姓名"
  22 + />
  23 + </div>
  24 + <div class="nameIptTwo">
  25 + <input
  26 + v-model="girl"
  27 + class="nameIpt"
  28 + type="text"
  29 + placeholder="女孩姓名"
  30 + />
  31 + </div>
  32 + <!-- 按钮 -->
  33 + <div class="btnMatching" @click="navPay"></div>
  34 + <!-- 字体 -->
  35 + <p class="footerFont" v-if="homeData">
  36 + 已有<span class="fontRed">{{ homeData.total_num }}</span
  37 + >人完成配对,并参与了领<span class="fontRed">{{ homeData.gift }}</span
  38 + >活动提交视为您已同意《隐私协议》
  39 + </p>
  40 + </div>
  41 + </div>
  42 + <!-- 玩法规则提示 -->
  43 + <van-dialog v-model="showTips" title="规则说明" show-cancel-button>
  44 + <!--每一个 -->
  45 + <div class="every">
  46 + 1.用户在本平台使用幸运星球，应遵守本规则。
  47 + 用户开始使用及/或继续使用本服务，即视为用户同意并已经接受本规则中全部内容。
  48 + 此后用户不得以未阅读/未同意本规则内容或类似理由提出任何形式的抗辩。
  49 + </div>
  50 + <div class="every">
  51 + 2.点击“立即抽奖”即可进行抽奖，抽中的结果为盲盒的购买资格，结果显示的商品为该盲盒里有概率中奖的商品；
  52 + </div>
  53 + <div class="every">
  54 + 3.转盘页面展示的商品均为有概率中奖的商品，除此外还有其它可抽中的商品，
  55 + 具体可抽中商品清单及中奖概率请在支付页面点击“全部商品”进行查看；
  56 + </div>
  57 + <div class="every">
  58 + 4.付费前，请您务必了解，付款获得的是抽奖资格（盲盒），并非页面显示的当前商品；
  59 + </div>
  60 + <div class="every">
  61 + 5.“100%中奖”意为不设空盒，付费成功后您将获得可抽中商品清单里的任一商品；
  62 + </div>
  63 + <div class="every">
  64 + 6.该盲盒内商品类型概率:传说款:0.168%、史诗款:0.342%、尊贵款:8.723%、普通款:90.767%;
  65 + </div>
  66 + <div class="every">7.风险提示：商品抽奖存在概率性，付费请谨慎；</div>
  67 + <div class="every">8.未成年人须在家长监督下进行购买；</div>
  68 + <div class="every">
  69 + 9.本渠道抽中的所有商品包邮，以下偏远地区（内蒙古、宁夏、海南）
  70 + 需补邮费差价25元，受疫情天气及物流公司安排等影响，以下偏远地区
  71 + (新疆、西藏、甘肃、青海) 暂不支持配送；
  72 + </div>
  73 + <div class="every">
  74 + 10.付费成功后，您需回到本页面，或下载“幸运星球”查看您的中奖商品，
  75 + 填写您的收货地址，等待宝贝发出；
  76 + </div>
  77 + <div class="every">
  78 + 11.当您收到盲盒商品后，出现以下质量问题的，您可提供开箱图片或视频，
  79 + 由本公司进行确认及受理：商品错发或者数量不符、商品在运输过程造成严重破损，商品做工存在明显瑕疵；
  80 + </div>
  81 + <div class="every">
  82 + 12.因工艺原因存在微瑕的商品，轻微盒损的商品，商品漆味重，均不属于质量问题；
  83 + </div>
  84 + <div class="every">
  85 + 13.如有疑问，可下载“幸运星球”APP，联系在线客服进行咨询。
  86 + </div>
  87 + </van-dialog>
  88 + </div>
  89 +</template>
  90 +
  91 +<script>
  92 +// 轻提示
  93 +import { Toast } from "vant";
  94 +export default {
  95 + name: "Home",
  96 + data() {
  97 + return {
  98 + // 输入框姓名
  99 + boy: "",
  100 + girl: "",
  101 + // 规则提示弹窗
  102 + showTips: false,
  103 + // 动态背景颜色
  104 + dynamic: "",
  105 + };
  106 + },
  107 + methods: {
  108 + // 活动规则
  109 + ruleTips() {
  110 + this.showTips = !this.showTips;
  111 + },
  112 + // 跳转支付页
  113 + async navPay() {
  114 + // 配对信息
  115 + try {
  116 + await this.$store.dispatch("gainPair", {
  117 + boy: this.boy,
  118 + girl: this.girl,
  119 + key: this.$md5(this.boy + this.girl + "cz321456").toUpperCase(),
  120 + });
  121 + this.$router.push({
  122 + path: "/pay",
  123 + query:{
  124 + boy: this.boy,
  125 + girl: this.girl,
  126 + },
  127 + });
  128 + } catch (error) {
  129 + Toast(error);
  130 + }
  131 + },
  132 + },
  133 + async mounted() {
  134 + // 首页信息列表
  135 + // await this.$store.dispatch("gainHomeList");
  136 + // 首页详细信息
  137 + await this.$store.dispatch("gainHomeDetailed", 1);
  138 +
  139 + // 背景图
  140 + this.dynamic = {
  141 + background: `url('${this.homeData.photo}') 0 0 /100% no-repeat`,
  142 + };
  143 + },
  144 + computed: {
  145 + // 首页内容
  146 + homeData() {
  147 + return this.$store.state.home.detailed;
  148 + },
  149 + },
  150 +};
  151 +</script>
  152 +
  153 +<style lang="scss" scoped>
  154 +// 适配函数计算
  155 +@function vw($px) {
  156 + @return 100 * $px/720 + vw;
  157 +}
  158 +* {
  159 + margin: 0;
  160 + padding: 0;
  161 +}
  162 +// 动画
  163 +
  164 +// 左边字体动画
  165 +@keyframes leftTop {
  166 + 0% {
  167 + top: vw(400);
  168 + }
  169 + 50% {
  170 + top: vw(362);
  171 + }
  172 + 100% {
  173 + top: vw(400);
  174 + }
  175 +}
  176 +// 右边字体动画
  177 +@keyframes rightTop {
  178 + 0% {
  179 + top: vw(372);
  180 + }
  181 + 50% {
  182 + top: vw(410);
  183 + }
  184 + 100% {
  185 + top: vw(372);
  186 + }
  187 +}
  188 +// 按钮动画
  189 +@keyframes bigSmall {
  190 + 0% {
  191 + transform: scale(1);
  192 + }
  193 + 50% {
  194 + transform: scale(1.1);
  195 + }
  196 + 100% {
  197 + transform: scale(1);
  198 + }
  199 +}
  200 +
  201 +// 首页
  202 +.home {
  203 + width: vw(720);
  204 + display: flex;
  205 + flex-direction: column;
  206 + align-items: center;
  207 + // 首页盒子内容
  208 + .homebox {
  209 + width: vw(720);
  210 + height: vw(1392);
  211 + display: flex;
  212 + position: relative;
  213 + flex-direction: column;
  214 + align-items: center;
  215 +
  216 + // 活动规则
  217 + .activityRule {
  218 + width: vw(40);
  219 + height: vw(137);
  220 + position: absolute;
  221 + top: vw(68);
  222 + right: vw(0);
  223 + background: url("../image/rulePic.png") 0 0 /100% no-repeat;
  224 + }
  225 + // 左边男方字体
  226 + .leftFont {
  227 + width: vw(207);
  228 + height: vw(94);
  229 + position: absolute;
  230 + top: vw(400);
  231 + left: vw(15);
  232 + animation: leftTop 2.5s linear infinite;
  233 + }
  234 + // 右边女方字体
  235 + .rightFont {
  236 + width: vw(207);
  237 + height: vw(94);
  238 + position: absolute;
  239 + top: vw(372);
  240 + right: vw(37);
  241 + animation: rightTop 2.5s linear infinite;
  242 + }
  243 + // 输入内容
  244 + .homeContent {
  245 + width: vw(720);
  246 + height: vw(671);
  247 + position: absolute;
  248 + background: url("../image/homeBR.png") 0 0 /100% no-repeat;
  249 + top: vw(680);
  250 + display: flex;
  251 + flex-direction: column;
  252 + align-items: center;
  253 + // 输入框
  254 + .nameIptOne {
  255 + width: vw(620);
  256 + height: vw(90);
  257 + position: absolute;
  258 + top: vw(177);
  259 + display: flex;
  260 + align-items: center;
  261 + justify-content: flex-end;
  262 + background: url("../image/nameIptO.png") 0 0 /100% no-repeat;
  263 + ::placeholder {
  264 + color: #808080;
  265 + }
  266 + }
  267 +
  268 + .nameIptTwo {
  269 + width: vw(620);
  270 + height: vw(90);
  271 + position: absolute;
  272 + top: vw(297);
  273 + display: flex;
  274 + align-items: center;
  275 + justify-content: flex-end;
  276 + background: url("../image/nameIptY.png") 0 0 /100% no-repeat;
  277 + ::placeholder {
  278 + color: #808080;
  279 + }
  280 + }
  281 + .nameIpt {
  282 + width: vw(520);
  283 + height: vw(90);
  284 + outline: none;
  285 + border: none;
  286 + font-size: vw(32);
  287 + }
  288 + // 按钮
  289 + .btnMatching {
  290 + width: vw(620);
  291 + height: vw(103);
  292 + position: absolute;
  293 + top: vw(417);
  294 + animation: bigSmall 2.5s linear infinite;
  295 + background: url("../image/btnMatching.png") 0 0 / 100% no-repeat;
  296 + }
  297 + // 字体
  298 + .footerFont {
  299 + width: vw(558);
  300 + font-size: vw(24);
  301 + position: absolute;
  302 + top: vw(530);
  303 + color: #976773;
  304 + text-align: center;
  305 + line-height: vw(48);
  306 + .fontRed {
  307 + color: red;
  308 + }
  309 + }
  310 + }
  311 + }
  312 + // 规则玩法提示
  313 + .van-dialog {
  314 + width: vw(620);
  315 + height: vw(800);
  316 + display: flex;
  317 + align-items: center;
  318 + flex-direction: column;
  319 + // 标题头
  320 + :deep(.van-dialog__header) {
  321 + font-size: vw(38);
  322 + font-weight: 700;
  323 + }
  324 + // 内容
  325 + :deep(.van-dialog__content) {
  326 + width: vw(550);
  327 + height: vw(600);
  328 + overflow: scroll;
  329 + margin-top: vw(20);
  330 + // 每一条信息
  331 + .every {
  332 + margin-bottom: vw(15);
  333 + }
  334 + }
  335 + //底部按钮
  336 + :deep(.van-dialog__footer) {
  337 + width: vw(550);
  338 + display: flex;
  339 + align-items: center;
  340 + justify-content: space-between;
  341 + }
  342 + }
  343 +}
  344 +</style>
  1 +<template>
  2 + <!-- 第二页 -->
  3 + <div class="homeTwo">
  4 + <!-- 第二页盒子内容 -->
  5 + <div class="homeTwobox">
  6 + <!-- 情侣 -->
  7 + <div class="lovers">
  8 + <span>{{ name[0] }}</span>
  9 + <img class="love" src="../image/love.png" alt="" />
  10 + <span>{{ name[1] }}</span>
  11 + </div>
  12 + <!-- 高分 -->
  13 + <div class="score">恋爱指数有机会99分</div>
  14 + <!-- 免费 -->
  15 + <div class="free" @click="popshowFn"></div>
  16 + <!-- 价格 -->
  17 + <div class="price">恋爱好运价：<span>9.9元</span></div>
  18 + <!-- 有机会获得 -->
  19 + <div class="opportunity">
  20 + 您将获得：恋爱指数报告&<span>免费领iphone</span>
  21 + </div>
  22 + <!-- 解锁按钮 -->
  23 + <div class="btnUnlock" @click="payWXorZFB"></div>
  24 + <!-- 微信支付 -->
  25 + <div class="WXpay">
  26 + <div class="WXpayleft">
  27 + <div class="wxfont">
  28 + <img class="wxicon" src="../image/WXicon.png" alt="" />
  29 + <p>微信安全支付</p>
  30 + </div>
  31 + <div class="line"></div>
  32 + <div class="zfbfont">
  33 + <img class="wxicon" src="../image/ZFBicon.png" alt="" />
  34 + <p>支付宝安全支付</p>
  35 + </div>
  36 + </div>
  37 + <van-radio-group v-model="radio" class="btnright">
  38 + <van-radio name="1" checked-color="green"></van-radio>
  39 + <van-radio name="2" checked-color="green"></van-radio>
  40 + </van-radio-group>
  41 + </div>
  42 + </div>
  43 + <!-- 弹窗 -->
  44 + <van-popup class="popcontent" v-model="popshow">
  45 + <!-- 标题 -->
  46 + <p class="title">离双方配对报告只差1步</p>
  47 + <p class="titletwo">支付后查看契合度报告</p>
  48 + <!-- 进度 -->
  49 + <div class="progress">
  50 + <div class="progressTop">
  51 + <img class="tick tickbor" src="../image/true.png" alt="" />
  52 + <img class="tick" src="../image/true.png" alt="" />
  53 + <p>仅剩0.7%</p>
  54 + </div>
  55 + <img src="../image/line.png" alt="" />
  56 + <div class="bottomFont">
  57 + <p>信息提交</p>
  58 + <p>生成报告</p>
  59 + <p>查看契合度</p>
  60 + </div>
  61 + </div>
  62 + <!-- 支付按钮 -->
  63 + <div class="paybtn">立即支付</div>
  64 + <!-- 优惠按钮 -->
  65 + <div class="discount">领取优惠红包</div>
  66 + <!-- 领取报告 -->
  67 + <div class="report">已支付点击领取报告</div>
  68 + <!-- 已有人数 -->
  69 + <p class="footerFont">已有1386706人解锁姓名测试</p>
  70 + <p class="footerFont bottomLine">姓名错误，需要重新填写></p>
  71 + </van-popup>
  72 + <!-- 付款人列表 -->
  73 + <div class="payList" v-if="payListshow">{{ listdata }}</div>
  74 + </div>
  75 +</template>
  76 +
  77 +<script>
  78 +export default {
  79 + name: "homeTwo",
  80 + data() {
  81 + return {
  82 + //支付单选框
  83 + radio: "1",
  84 + // 情侣姓名
  85 + name: [],
  86 + // 弹出层
  87 + popshow: false,
  88 + // 付款人列表显示隐藏
  89 + payListshow: false,
  90 + // 付款人信息
  91 + listdata: "",
  92 + // 定时器
  93 + timer: "",
  94 + };
  95 + },
  96 + methods: {
  97 + // 支付宝，微信
  98 + payWXorZFB() {
  99 + if (this.radio == "1") {
  100 + console.log("微信支付");
  101 + this.$router.push("/result");
  102 + } else if (this.radio == "2") {
  103 + this.$router.push("/result");
  104 + }
  105 + },
  106 + popshowFn() {
  107 + this.popshow = !this.popshow;
  108 + },
  109 + },
  110 + async activated() {
  111 + this.name = await JSON.parse(localStorage.getItem("name"));
  112 + // 付款人列表
  113 + await this.$store.dispatch("gainPayList", 1);
  114 + this.timer = setInterval(() => {
  115 + if (!this.payListshow) {
  116 + var num = Math.floor(
  117 + Math.random() * (this.payListData.length - 1 - 0 + 1) + 0
  118 + );
  119 + console.log(num);
  120 + this.listdata = this.payListData[num];
  121 + this.payListshow = !this.payListshow;
  122 + } else if (this.payListshow) {
  123 + this.payListshow = !this.payListshow;
  124 + num += 1;
  125 + }
  126 + }, 4000);
  127 + },
  128 + deactivated() {
  129 + clearInterval(this.timer);
  130 + this.payListshow = false;
  131 + },
  132 + computed: {
  133 + // 付款人列表
  134 + payListData() {
  135 + return this.$store.state.pay.paylist;
  136 + },
  137 + },
  138 +};
  139 +</script>
  140 +
  141 +<style lang="scss" scoped>
  142 +// 适配函数计算
  143 +@function vw($px) {
  144 + @return 100 * $px/720 + vw;
  145 +}
  146 +* {
  147 + margin: 0;
  148 + padding: 0;
  149 +}
  150 +
  151 +// 动画
  152 +// 右边字体动画
  153 +@keyframes rightTop {
  154 + 0% {
  155 + top: vw(523);
  156 + }
  157 + 50% {
  158 + top: vw(490);
  159 + }
  160 + 100% {
  161 + top: vw(523);
  162 + }
  163 +}
  164 +
  165 +// 按钮动画
  166 +@keyframes bigSmall {
  167 + 0% {
  168 + transform: scale(1);
  169 + }
  170 + 50% {
  171 + transform: scale(1.1);
  172 + }
  173 + 100% {
  174 + transform: scale(1);
  175 + }
  176 +}
  177 +// 第二页
  178 +.homeTwo {
  179 + width: vw(720);
  180 + display: flex;
  181 + flex-direction: column;
  182 + align-items: center;
  183 + // 第二页盒子内容
  184 + .homeTwobox {
  185 + width: vw(720);
  186 + height: vw(1437);
  187 + display: flex;
  188 + position: relative;
  189 + flex-direction: column;
  190 + align-items: center;
  191 + background: url("../image/homeTwoBG.png") 0 0 /100% no-repeat;
  192 + // 情侣
  193 + .lovers {
  194 + position: absolute;
  195 + top: vw(180);
  196 + left: vw(100);
  197 + display: flex;
  198 + align-items: center;
  199 + justify-content: space-between;
  200 + .love {
  201 + width: vw(29);
  202 + height: vw(24);
  203 + display: block;
  204 + margin: 0 vw(8);
  205 + }
  206 + span {
  207 + display: block;
  208 + font-size: vw(32);
  209 + font-weight: 400;
  210 + color: #333333;
  211 + }
  212 + }
  213 + // 高分
  214 + .score {
  215 + font-size: vw(32);
  216 + font-weight: 600;
  217 + color: #f23e79;
  218 + position: absolute;
  219 + top: vw(236);
  220 + right: vw(80);
  221 + }
  222 + // 免费
  223 + .free {
  224 + width: vw(197);
  225 + height: vw(196);
  226 + position: absolute;
  227 + top: vw(523);
  228 + left: vw(443);
  229 + animation: rightTop 2.5s linear infinite;
  230 + background: url("../image/freePic.png") 0 0 /100% no-repeat;
  231 + }
  232 + // 价格
  233 + .price {
  234 + position: absolute;
  235 + top: vw(855);
  236 + left: vw(102);
  237 + font-weight: 400;
  238 + color: #333333;
  239 + font-size: vw(28);
  240 + span {
  241 + color: #e55e8a;
  242 + font-size: vw(30);
  243 + }
  244 + }
  245 + // 有机会获得
  246 + .opportunity {
  247 + position: absolute;
  248 + top: vw(915);
  249 + left: vw(102);
  250 + font-weight: 400;
  251 + color: #333333;
  252 + font-size: vw(28);
  253 + span {
  254 + color: #e55e8a;
  255 + font-size: vw(30);
  256 + }
  257 + }
  258 + // 解锁按钮
  259 + .btnUnlock {
  260 + width: vw(600);
  261 + height: vw(148);
  262 + position: absolute;
  263 + top: vw(975);
  264 + animation: bigSmall 2.5s linear infinite;
  265 + background: url("../image/btnUnlock.png") 0 0 /100% no-repeat;
  266 + }
  267 + // 微信支付
  268 + .WXpay {
  269 + width: vw(560);
  270 + height: vw(139);
  271 + position: absolute;
  272 + top: vw(1127);
  273 + display: flex;
  274 + align-items: center;
  275 + justify-content: space-between;
  276 + .WXpayleft {
  277 + width: vw(254);
  278 + height: vw(139);
  279 + font-weight: 400;
  280 + color: #333333;
  281 + font-size: vw(28);
  282 + display: flex;
  283 + flex-direction: column;
  284 + justify-content: space-between;
  285 + .wxfont {
  286 + width: vw(226);
  287 + height: vw(48);
  288 + display: flex;
  289 + align-items: center;
  290 + justify-content: space-between;
  291 + // border-bottom: vw(1) solid gainsboro;
  292 + }
  293 + .line {
  294 + width: vw(560);
  295 + height: vw(1);
  296 + background: gainsboro;
  297 + }
  298 + .zfbfont {
  299 + width: vw(254);
  300 + height: vw(48);
  301 + display: flex;
  302 + align-items: center;
  303 + justify-content: space-between;
  304 + }
  305 + .wxicon {
  306 + width: vw(48);
  307 + height: vw(48);
  308 + }
  309 + }
  310 + .btnright {
  311 + height: vw(127);
  312 + display: flex;
  313 + flex-direction: column;
  314 + justify-content: space-between;
  315 + }
  316 + // 确认按钮
  317 + .affirm {
  318 + width: vw(38);
  319 + height: vw(38);
  320 + }
  321 + }
  322 + }
  323 + // 弹窗
  324 + .popcontent {
  325 + width: vw(540);
  326 + height: vw(868);
  327 + background: #ffffff;
  328 + border-radius: vw(20);
  329 + display: flex;
  330 + align-items: center;
  331 + flex-direction: column;
  332 + // 标题
  333 + .title {
  334 + font-size: vw(40);
  335 + font-weight: 600;
  336 + color: #be061a;
  337 + margin: vw(50) 0 vw(20) 0;
  338 + }
  339 + .titletwo {
  340 + font-size: vw(40);
  341 + font-weight: 600;
  342 + color: #be061a;
  343 + }
  344 + // 进度
  345 + .progress {
  346 + width: vw(403);
  347 + height: vw(104);
  348 + margin-top: vw(52);
  349 + display: flex;
  350 + flex-direction: column;
  351 + justify-content: space-between;
  352 + // background-color: red;
  353 + .progressTop {
  354 + width: vw(403);
  355 + display: flex;
  356 + align-items: center;
  357 + justify-content: space-between;
  358 + .tick {
  359 + width: vw(35);
  360 + height: vw(30);
  361 + }
  362 + .tickbor {
  363 + padding: vw(5);
  364 + border: vw(1) dashed gainsboro;
  365 + }
  366 + p {
  367 + font-size: vw(22);
  368 + font-weight: 500;
  369 + color: #f4a525;
  370 + }
  371 + }
  372 + img {
  373 + width: vw(403);
  374 + height: vw(22);
  375 + }
  376 + .bottomFont {
  377 + width: vw(403);
  378 + height: vw(30);
  379 + display: flex;
  380 + align-items: center;
  381 + justify-content: space-between;
  382 + p {
  383 + font-size: vw(22);
  384 + font-weight: 400;
  385 + color: #333333;
  386 + }
  387 + }
  388 + }
  389 + %btnfont {
  390 + width: vw(443);
  391 + height: vw(90);
  392 + border-radius: vw(50);
  393 + display: flex;
  394 + align-items: center;
  395 + justify-content: center;
  396 + font-size: vw(36);
  397 + font-weight: 400;
  398 + color: #ffffff;
  399 + }
  400 + // 支付按钮
  401 + .paybtn {
  402 + background-color: #cf0316;
  403 + margin: vw(46) 0 vw(30) 0;
  404 + @extend %btnfont;
  405 + }
  406 + // 优惠按钮
  407 + .discount {
  408 + background-color: #f4a525;
  409 + @extend %btnfont;
  410 + }
  411 + // 领取报告
  412 + .report {
  413 + border: vw(2) solid #e9ca8f;
  414 + @extend %btnfont;
  415 + color: black;
  416 + margin: vw(30) 0 vw(30) 0;
  417 + }
  418 + // 已有人数
  419 + .footerFont {
  420 + font-size: vw(30);
  421 + font-weight: 400;
  422 + color: #c75c5c;
  423 + }
  424 + .bottomLine {
  425 + margin-top: vw(18);
  426 + text-decoration: underline;
  427 + }
  428 + }
  429 + // 付款人列表
  430 + .payList {
  431 + width: vw(510);
  432 + height: vw(72);
  433 + background: #000000;
  434 + border-radius: vw(14);
  435 + opacity: 0.7;
  436 + position: absolute;
  437 + bottom: vw(90);
  438 + font-size: vw(28);
  439 + font-weight: 400;
  440 + color: white;
  441 + display: flex;
  442 + align-items: center;
  443 + justify-content: center;
  444 + }
  445 +}
  446 +</style>
  1 +<template>
  2 + <!-- 第三页 -->
  3 + <div class="pay">
  4 + <!-- 第三页盒子 -->
  5 + <div class="paybox">
  6 + <!-- 横幅 -->
  7 + <div class="banner"></div>
  8 + <!-- 订单编号 -->
  9 + <div class="orderId">订单编号：{{ pairResult.order_no }}</div>
  10 + <!-- 支付 -->
  11 + <div class="paycontent">
  12 + <!-- 人物 -->
  13 + <div class="character">
  14 + <div class="leftcharacter">
  15 + <p class="nameTop">{{ $route.query.boy }}</p>
  16 + <img src="../image/leftpic.png" alt="" />
  17 + <p class="timeFooter"></p>
  18 + </div>
  19 + <img class="loveline" src="../image//loveline.png" alt="" />
  20 + <div class="rightcharacter">
  21 + <p class="nameTop">{{ $route.query.girl }}</p>
  22 + <img src="../image/rightpic.png" alt="" />
  23 + <p class="timeFooter"></p>
  24 + </div>
  25 + </div>
  26 + <!-- 特价 -->
  27 + <div class="special">
  28 + <p class="original">原价：¥168</p>
  29 + <p class="luck">吉时特价：</p>
  30 + <p class="nowpri">¥ 9.9</p>
  31 + </div>
  32 + <!-- 倒计时 -->
  33 + <p class="count">
  34 + <span>倒计时：</span>
  35 + <van-count-down
  36 + class="timeCountDownmiao"
  37 + :time="time"
  38 + format="HH 小时 mm 分 ss 秒"
  39 + />
  40 + </p>
  41 + <!-- 微信支付 -->
  42 + <div class="wxpaybtn" @click="payWX">
  43 + <img src="../image/wxfont.png" alt="" />
  44 + </div>
  45 + <!-- 支付宝支付 -->
  46 + <!-- <div class="zfbpaybtn">
  47 + <img src="../image/zfbfont.png" alt="" />
  48 + </div> -->
  49 + </div>
  50 + <!-- 支付完成 -->
  51 + <div class="complete">支付完成后，将为您解锁其余八项重要内容：</div>
  52 + <!-- 结果 -->
  53 + <div class="result">
  54 + <div class="each">
  55 + <div class="eachtitle">
  56 + <img class="rotate" src="../image/edge.png" alt="" />
  57 + <p>第一：{{ $route.query.girl }}小姐的性格解析</p>
  58 + <img src="../image/edge.png" alt="" />
  59 + </div>
  60 + </div>
  61 + <div class="each">
  62 + <div class="eachtitle">
  63 + <img class="rotate" src="../image/edge.png" alt="" />
  64 + <p>第二：{{ $route.query.boy }}先生的性格解析</p>
  65 + <img src="../image/edge.png" alt="" />
  66 + </div>
  67 + </div>
  68 + <div class="each">
  69 + <div class="eachtitle">
  70 + <img class="rotate" src="../image/edge.png" alt="" />
  71 + <p>第三：配对分析</p>
  72 + <img src="../image/edge.png" alt="" />
  73 + </div>
  74 + <div class="resultcontent">
  75 + <div class="leftFont">
  76 + <p>你们一生的婚姻究竟会是怎样呢?</p>
  77 + <p>相比于其他人来说，是好是坏?</p>
  78 + <p>哪些因素会干扰你们的爱情?</p>
  79 + </div>
  80 + <div class="rightImg">
  81 + <img src="../image/lockUp.png" alt="" />
  82 + <p>解锁查看</p>
  83 + </div>
  84 + </div>
  85 + </div>
  86 + <div class="each">
  87 + <div class="eachtitle">
  88 + <img class="rotate" src="../image/edge.png" alt="" />
  89 + <p>第四：你们的爱情危机</p>
  90 + <img src="../image/edge.png" alt="" />
  91 + </div>
  92 + <div class="resultcontent">
  93 + <div class="leftFont">
  94 + <p>两人相处时会出现哪些危机?</p>
  95 + <p>你们的幸福指数是多少?</p>
  96 + <p>如何破解危机，守护爱情?</p>
  97 + </div>
  98 + <div class="rightImg">
  99 + <img src="../image/lockUp.png" alt="" />
  100 + <p>解锁查看</p>
  101 + </div>
  102 + </div>
  103 + </div>
  104 + <div class="each">
  105 + <div class="eachtitle">
  106 + <img class="rotate" src="../image/edge.png" alt="" />
  107 + <p>第五：婚前婚后变化</p>
  108 + <img src="../image/edge.png" alt="" />
  109 + </div>
  110 + <div class="resultcontent">
  111 + <div class="leftFont">
  112 + <p>你们是否是天生一对?</p>
  113 + <p>在别人眼中你们的婚姻是怎样的?</p>
  114 + <p>生活中你们是怎样和谐相处?</p>
  115 + </div>
  116 + <div class="rightImg">
  117 + <img src="../image/lockUp.png" alt="" />
  118 + <p>解锁查看</p>
  119 + </div>
  120 + </div>
  121 + </div>
  122 + <div class="each">
  123 + <div class="eachtitle">
  124 + <img class="rotate" src="../image/edge.png" alt="" />
  125 + <p>第六：（婚配指数）心有灵犀</p>
  126 + <img src="../image/edge.png" alt="" />
  127 + </div>
  128 + <div class="resultcontent">
  129 + <div class="leftFont">
  130 + <p>对方会是个温柔体贴的人吗?</p>
  131 + <p>会屈就于你还是你只有听从的份?</p>
  132 + <p>相处之中你们是否更具默契?</p>
  133 + </div>
  134 + <div class="rightImg">
  135 + <img src="../image/lockUp.png" alt="" />
  136 + <p>解锁查看</p>
  137 + </div>
  138 + </div>
  139 + </div>
  140 + <div class="each">
  141 + <div class="eachtitle">
  142 + <img class="rotate" src="../image/edge.png" alt="" />
  143 + <p>第七：（感情质量）相扶相旺</p>
  144 + <img src="../image/edge.png" alt="" />
  145 + </div>
  146 + <div class="resultcontent">
  147 + <div class="leftFont">
  148 + <p>配偶是得力助手还是对方的累赘?</p>
  149 + <p>你对配偶是助旺还是助衰呢?</p>
  150 + <p>你们能互相助旺、优势互补吗?</p>
  151 + </div>
  152 + <div class="rightImg">
  153 + <img src="../image/lockUp.png" alt="" />
  154 + <p>解锁查看</p>
  155 + </div>
  156 + </div>
  157 + </div>
  158 + <div class="each">
  159 + <div class="eachtitle">
  160 + <img class="rotate" src="../image/edge.png" alt="" />
  161 + <p>第八：爱情保卫</p>
  162 + <img src="../image/edge.png" alt="" />
  163 + </div>
  164 + <div class="resultcontent">
  165 + <div class="leftFont">
  166 + <p>你们的婚后生活稳定吗？</p>
  167 + <p>婚姻生活中会遇到哪些危机?</p>
  168 + <p>维系二人感情稳定的方法?</p>
  169 + </div>
  170 + <div class="rightImg">
  171 + <img src="../image/lockUp.png" alt="" />
  172 + <p>解锁查看</p>
  173 + </div>
  174 + </div>
  175 + </div>
  176 + <div class="each">
  177 + <div class="eachtitle">
  178 + <img class="rotate" src="../image/edge.png" alt="" />
  179 + <p>第九：（双方优点）魅力相吸</p>
  180 + <img src="../image/edge.png" alt="" />
  181 + </div>
  182 + <div class="resultcontent">
  183 + <div class="leftFont">
  184 + <p>你们的婚姻保质期有多久？</p>
  185 + <p>另一半是否有出轨倾向?</p>
  186 + <p>针对你们的爱情保鲜秘籍是什么?</p>
  187 + </div>
  188 + <div class="rightImg">
  189 + <img src="../image/lockUp.png" alt="" />
  190 + <p>解锁查看</p>
  191 + </div>
  192 + </div>
  193 + </div>
  194 + <div class="each">
  195 + <div class="eachtitle">
  196 + <img class="rotate" src="../image/edge.png" alt="" />
  197 + <p>第十：（婚后生活）子女同步</p>
  198 + <img src="../image/edge.png" alt="" />
  199 + </div>
  200 + <div class="resultcontent">
  201 + <div class="leftFont">
  202 + <p>孩子能让你们开心还是疲惫?</p>
  203 + <p>孩子的到来会让婚姻变得更加稳固?</p>
  204 + </div>
  205 + <div class="rightImg">
  206 + <img src="../image/lockUp.png" alt="" />
  207 + <p>解锁查看</p>
  208 + </div>
  209 + </div>
  210 + </div>
  211 + </div>
  212 + </div>
  213 + <!-- 回到顶部 -->
  214 + <div
  215 + class="returnTop"
  216 + :class="showTop ? 'showx' : ''"
  217 + id="retTop"
  218 + @click="returnTop"
  219 + ></div>
  220 + </div>
  221 +</template>
  222 +
  223 +<script>
  224 +export default {
  225 + name: "pay",
  226 + data() {
  227 + return {
  228 + // 返回顶部
  229 + showTop: true,
  230 + // 倒计时
  231 + time: 1 * 60 * 60 * 1000,
  232 + };
  233 + },
  234 + methods: {
  235 + // 回到顶部
  236 + async returnTop() {
  237 + //滚动条总路程
  238 + var gdt = document.documentElement.scrollTop;
  239 + //滚动条速度
  240 + var gdtsudu = gdt / 20;
  241 + var timer = setInterval(() => {
  242 + document.documentElement.scrollTop -= gdtsudu;
  243 + if (document.documentElement.scrollTop <= 0) {
  244 + clearInterval(timer);
  245 + this.showTop = true;
  246 + }
  247 + }, 10);
  248 + },
  249 + // 微信支付
  250 + async payWX() {
  251 + // this.$router.push({
  252 + // path: "/result",
  253 + // query: {
  254 + // order_no: this.pairResult.order_no,
  255 + // },
  256 + // });
  257 + await this.$store.dispatch("gainPayWX", {
  258 + order_no: this.pairResult.order_no,
  259 + });
  260 + location.href =
  261 + this.$store.state.pay.WXurl +
  262 + "&redirect_url=" +
  263 + encodeURIComponent(
  264 + "http://estimate.gzrkkj.cn/#/result?order_no=" +
  265 + this.pairResult.order_no
  266 + );
  267 + },
  268 + },
  269 + mounted() {
  270 + // 返回顶部显示
  271 + document.addEventListener("scroll", () => {
  272 + if (document.documentElement.scrollTop > 350) {
  273 + this.showTop = false;
  274 + }
  275 + });
  276 + },
  277 + computed: {
  278 + // 配对信息
  279 + pairResult() {
  280 + return this.$store.state.pay.pairData;
  281 + },
  282 + },
  283 +};
  284 +</script>
  285 +
  286 +<style lang="scss" scoped>
  287 +// 适配函数计算
  288 +@function vw($px) {
  289 + @return 100 * $px/720 + vw;
  290 +}
  291 +* {
  292 + margin: 0;
  293 + padding: 0;
  294 +}
  295 +// 第三页
  296 +.pay {
  297 + width: vw(720);
  298 + display: flex;
  299 + flex-direction: column;
  300 + align-items: center;
  301 + // 第三页盒子
  302 + .paybox {
  303 + width: vw(720);
  304 + display: flex;
  305 + flex-direction: column;
  306 + align-items: center;
  307 + // 横幅
  308 + .banner {
  309 + width: vw(720);
  310 + height: vw(494);
  311 + background: url("../image/bannerThree.png") 0 0 /100% no-repeat;
  312 + }
  313 + // 订单编号
  314 + .orderId {
  315 + width: vw(720);
  316 + height: vw(88);
  317 + background: #ffffff;
  318 + font-size: vw(28);
  319 + font-weight: 400;
  320 + color: #333333;
  321 + line-height: vw(88);
  322 + padding-left: vw(20);
  323 + box-sizing: border-box;
  324 + }
  325 + // 支付
  326 + .paycontent {
  327 + width: vw(720);
  328 + height: vw(790);
  329 + display: flex;
  330 + flex-direction: column;
  331 + align-items: center;
  332 + border-bottom: vw(2) solid #e7d1c1;
  333 + border-top: vw(2) solid #e7d1c1;
  334 +
  335 + // 人物
  336 + .character {
  337 + width: vw(680);
  338 + height: vw(456);
  339 + display: flex;
  340 + align-items: center;
  341 + justify-content: space-between;
  342 + margin: vw(20) 0 vw(26) 0;
  343 +
  344 + .leftcharacter {
  345 + @extend %LorRpic;
  346 + }
  347 + .rightcharacter {
  348 + @extend %LorRpic;
  349 + }
  350 + %LorRpic {
  351 + width: vw(290);
  352 + height: vw(456);
  353 + border-radius: vw(16);
  354 + display: flex;
  355 + align-items: center;
  356 + flex-direction: column;
  357 + justify-content: space-between;
  358 + background-color: #f0e6c2;
  359 + img {
  360 + width: vw(290);
  361 + height: vw(320);
  362 + }
  363 + .nameTop {
  364 + @extend %fontTorB;
  365 + font-size: vw(32);
  366 + }
  367 + .timeFooter {
  368 + @extend %fontTorB;
  369 + font-size: vw(28);
  370 + }
  371 + %fontTorB {
  372 + width: vw(290);
  373 + height: vw(68);
  374 + font-weight: 400;
  375 + color: #333333;
  376 + display: flex;
  377 + justify-content: center;
  378 + align-items: center;
  379 + }
  380 + }
  381 + .loveline {
  382 + width: vw(89);
  383 + height: vw(55);
  384 + }
  385 + }
  386 + // 特价
  387 + .special {
  388 + width: vw(533);
  389 + height: vw(62);
  390 + display: flex;
  391 + align-items: center;
  392 + justify-content: space-between;
  393 +
  394 + .original {
  395 + font-size: vw(32);
  396 + font-weight: 500;
  397 + color: #333333;
  398 + text-decoration: line-through;
  399 + }
  400 + .luck {
  401 + font-size: vw(44);
  402 + font-weight: 600;
  403 + color: #333333;
  404 + }
  405 + .nowpri {
  406 + font-size: vw(44);
  407 + font-weight: 500;
  408 + color: #fe0000;
  409 + }
  410 + }
  411 + // 倒计时
  412 + .count {
  413 + height: vw(42);
  414 + font-size: vw(30);
  415 + font-weight: 400;
  416 + color: #333333;
  417 + margin: vw(9) 0 vw(23) 0;
  418 + display: flex;
  419 + align-items: center;
  420 + .timeCountDownmiao {
  421 + font-size: vw(30);
  422 + display: flex;
  423 + height: vw(42);
  424 + align-items: center;
  425 + }
  426 + span {
  427 + font-size: vw(32);
  428 + display: flex;
  429 + height: vw(42);
  430 + align-items: center;
  431 + }
  432 + }
  433 + // 微信支付
  434 + .wxpaybtn {
  435 + width: vw(598);
  436 + height: vw(88);
  437 + background-color: #63ab35;
  438 + border-radius: vw(44);
  439 + display: flex;
  440 + align-items: center;
  441 + justify-content: center;
  442 + img {
  443 + width: vw(230);
  444 + height: vw(50);
  445 + }
  446 + }
  447 + // 支付宝支付
  448 + .zfbpaybtn {
  449 + width: vw(598);
  450 + height: vw(88);
  451 + background-color: #198df4;
  452 + border-radius: vw(44);
  453 + margin: vw(20) 0 vw(61) 0;
  454 + display: flex;
  455 + align-items: center;
  456 + justify-content: center;
  457 + img {
  458 + width: vw(270);
  459 + height: vw(50);
  460 + }
  461 + }
  462 + }
  463 + // 完成
  464 + .complete {
  465 + width: vw(720);
  466 + height: vw(100);
  467 + display: flex;
  468 + justify-content: center;
  469 + align-items: center;
  470 + border-bottom: vw(2) solid #e7d1c1;
  471 + border-top: vw(2) solid #e7d1c1;
  472 + font-size: vw(32);
  473 + font-weight: 500;
  474 + color: #333333;
  475 + margin: vw(10) 0 vw(30) 0;
  476 + }
  477 + // 结果
  478 + .result {
  479 + width: vw(720);
  480 + display: flex;
  481 + flex-direction: column;
  482 + align-items: center;
  483 + margin-bottom: vw(50);
  484 + .each {
  485 + width: vw(720);
  486 + display: flex;
  487 + flex-direction: column;
  488 + align-items: center;
  489 + margin-bottom: vw(30);
  490 + .eachtitle {
  491 + width: vw(720);
  492 + height: vw(76);
  493 + display: flex;
  494 + align-items: center;
  495 + justify-content: space-between;
  496 + p {
  497 + width: vw(636);
  498 + height: vw(76);
  499 + line-height: vw(76);
  500 + font-size: vw(30);
  501 + font-weight: 400;
  502 + color: #ffffff;
  503 + background-color: #d23037;
  504 + }
  505 + img {
  506 + width: vw(42);
  507 + height: vw(76);
  508 + }
  509 + .rotate {
  510 + transform: rotateZ(180deg);
  511 + }
  512 + }
  513 + .resultcontent {
  514 + width: vw(680);
  515 + height: vw(194);
  516 + display: flex;
  517 + align-items: center;
  518 + justify-content: space-between;
  519 + .leftFont {
  520 + width: vw(500);
  521 + height: vw(154);
  522 + display: flex;
  523 + flex-direction: column;
  524 + justify-content: flex-start;
  525 + font-size: vw(30);
  526 + font-weight: 400;
  527 + color: #333333;
  528 + p{
  529 + margin-bottom: vw(15);
  530 + }
  531 + }
  532 + .rightImg {
  533 + width: vw(128);
  534 + height: vw(182);
  535 + display: flex;
  536 + flex-direction: column;
  537 + align-items: center;
  538 + justify-content: space-between;
  539 + p {
  540 + font-size: vw(30);
  541 + font-weight: 500;
  542 + color: #a9a9a9;
  543 + }
  544 + img {
  545 + width: vw(128);
  546 + height: vw(140);
  547 + }
  548 + }
  549 + }
  550 + }
  551 + }
  552 + }
  553 + // 回到顶部
  554 + .returnTop {
  555 + width: vw(70);
  556 + height: vw(70);
  557 + background: url("../image/returnTop.png") 0 0 /100% no-repeat;
  558 + position: fixed;
  559 + right: vw(20);
  560 + top: vw(800);
  561 + }
  562 + .showx {
  563 + display: none !important;
  564 + }
  565 +}
  566 +</style>
  1 +<template>
  2 + <!-- 结果页 -->
  3 + <div class="result">
  4 + <!-- 结果页盒子 -->
  5 + <div class="resultbox" v-if="pairData">
  6 + <!-- 配对指数 -->
  7 + <p class="num">{{ pairData.score }}</p>
  8 + <!-- 情侣 -->
  9 + <div class="lovers">{{pairData.title}}</div>
  10 + <!-- 测试结果 -->
  11 + <template v-if="pairData.detail_list">
  12 + <div
  13 + class="testresult"
  14 + v-for="(el, idx) in pairData.detail_list"
  15 + :key="idx"
  16 + >
  17 + <!-- 标题 -->
  18 + <div class="restitle">{{ el.title }}</div>
  19 + <!-- 内容 -->
  20 + <div class="rescontent" v-html="el.content"></div>
  21 + </div>
  22 + </template>
  23 + </div>
  24 + <!-- 跳转链接 -->
  25 + <div class="navurl" @click="copyURL"></div>
  26 + <!-- 底部提示 -->
  27 + <div class="footerTips">
  28 + 复制链接后，可打开微信发送或保存链接，便于后期反复查阅
  29 + </div>
  30 + <!-- 回到顶部 -->
  31 + <div
  32 + class="returnTop"
  33 + :class="showTop ? 'showx' : ''"
  34 + id="retTop"
  35 + @click="returnTop"
  36 + ></div>
  37 + <!-- 弹窗重新支付 -->
  38 + <div class="popcontentbox" v-if="notpay">
  39 + <div class="popcontent">
  40 + <!-- 标题 -->
  41 + <p class="title">离双方配对报告只差1步</p>
  42 + <p class="titletwo">支付后查看契合度报告</p>
  43 + <!-- 进度 -->
  44 + <div class="progress">
  45 + <div class="progressTop">
  46 + <img class="tick tickbor" src="../image/true.png" alt="" />
  47 + <img class="tick" src="../image/true.png" alt="" />
  48 + <p>仅剩0.7%</p>
  49 + </div>
  50 + <img src="../image/line.png" alt="" />
  51 + <div class="bottomFont">
  52 + <p>信息提交</p>
  53 + <p>生成报告</p>
  54 + <p>查看契合度</p>
  55 + </div>
  56 + </div>
  57 + <!-- 支付按钮 -->
  58 + <div class="paybtn" @click="againpay">重新支付</div>
  59 + <!-- 优惠按钮 -->
  60 + <!-- <div class="discount">领取优惠红包</div> -->
  61 + <!-- 领取报告 -->
  62 + <!-- <div class="report">已支付点击领取报告</div> -->
  63 + <!-- 已有人数 -->
  64 + <!-- <p class="footerFont">已有1386706人解锁姓名测试</p> -->
  65 + <p class="footerFont bottomLine" @click="navhome">
  66 + 姓名错误，需要重新填写>
  67 + </p>
  68 + </div>
  69 + </div>
  70 + </div>
  71 +</template>
  72 +
  73 +<script>
  74 +import { Toast } from "vant";
  75 +export default {
  76 + name: "Result",
  77 + data() {
  78 + return {
  79 + // 返回顶部
  80 + showTop: true,
  81 + // 情侣姓名
  82 + name: [],
  83 + // 未支付
  84 + notpay: false,
  85 + };
  86 + },
  87 + methods: {
  88 + // 回到顶部
  89 + async returnTop() {
  90 + //滚动条总路程
  91 + var gdt = document.documentElement.scrollTop;
  92 + //滚动条速度
  93 + var gdtsudu = gdt / 20;
  94 + var timer = setInterval(() => {
  95 + document.documentElement.scrollTop -= gdtsudu;
  96 + if (document.documentElement.scrollTop <= 0) {
  97 + clearInterval(timer);
  98 + this.showTop = true;
  99 + }
  100 + }, 10);
  101 + },
  102 + // 复制链接
  103 + copyURL() {
  104 + var _val = window.location.href;
  105 + new this.ClipboardJS(".navurl", {
  106 + text: () => {
  107 + Toast("复制成功");
  108 + return _val;
  109 + },
  110 + });
  111 + },
  112 + //返回首页
  113 + navhome() {
  114 + this.$router.push("/home");
  115 + },
  116 + // 重新支付
  117 + async againpay() {
  118 + await this.$store.dispatch("gainPayWX", {
  119 + order_no: this.$route.query.order_no,
  120 + });
  121 + location.href =
  122 + this.$store.state.pay.WXurl +
  123 + "&redirect_url=" +
  124 + encodeURIComponent(
  125 + "http://estimate.gzrkkj.cn/#/result?order_no=" +
  126 + this.$route.query.order_no
  127 + );
  128 + },
  129 + },
  130 + async activated() {
  131 + // 姓名
  132 + // this.name = await JSON.parse(localStorage.getItem("name"));
  133 + // 配对信息
  134 + // try {
  135 + // await this.$store.dispatch("gainPair", {
  136 + // boy: this.name[0],
  137 + // girl: this.name[1],
  138 + // key: this.$md5(this.name[0] + this.name[1] + "cz321456").toUpperCase(),
  139 + // });
  140 + // } catch (error) {
  141 + // console.log(error);
  142 + // Toast(error);
  143 + // }
  144 + },
  145 + async mounted() {
  146 + // 支付后数据
  147 + await this.$store.dispatch("gainPayResult", this.$route.query.order_no);
  148 + // 未支付弹出重新支付框
  149 + if (this.$store.state.pay.resultDate.need_pay == 1) {
  150 + this.notpay = true;
  151 + }
  152 + // 返回顶部显示
  153 + document.addEventListener("scroll", () => {
  154 + if (document.documentElement.scrollTop > 350) {
  155 + this.showTop = false;
  156 + }
  157 + });
  158 + },
  159 + computed: {
  160 + // 支付结果数据
  161 + pairData() {
  162 + return this.$store.state.pay.resultDate;
  163 + },
  164 + },
  165 +};
  166 +</script>
  167 +
  168 +<style lang="scss" scoped>
  169 +// 适配函数计算
  170 +@function vw($px) {
  171 + @return 100 * $px/720 + vw;
  172 +}
  173 +* {
  174 + margin: 0;
  175 + padding: 0;
  176 +}
  177 +// 动画
  178 +// 按钮动画
  179 +@keyframes bigSmall {
  180 + 0% {
  181 + transform: scale(1);
  182 + }
  183 + 50% {
  184 + transform: scale(1.1);
  185 + }
  186 + 100% {
  187 + transform: scale(1);
  188 + }
  189 +}
  190 +// 结果页
  191 +.result {
  192 + width: vw(720);
  193 + display: flex;
  194 + flex-direction: column;
  195 + align-items: center;
  196 + // 结果页盒子
  197 + .resultbox {
  198 + width: vw(720);
  199 + display: flex;
  200 + position: relative;
  201 + flex-direction: column;
  202 + align-items: center;
  203 + background: url("../image/resultBC.png") 0 0 /100% no-repeat;
  204 + background-color: #ffaaaf;
  205 + padding-bottom: vw(29);
  206 + box-sizing: border-box;
  207 + // 配对指数
  208 + .num {
  209 + position: absolute;
  210 + top: vw(235);
  211 + font-size: vw(44);
  212 + color: white;
  213 + }
  214 + // 情侣
  215 + .lovers {
  216 + font-size: vw(44);
  217 + font-weight: 500;
  218 + color: #ffffff;
  219 + margin-top: vw(540);
  220 + }
  221 + // 测试结果
  222 + .testresult {
  223 + margin-top: vw(40);
  224 + width: vw(720);
  225 + display: flex;
  226 + flex-direction: column;
  227 + align-items: center;
  228 + // 标题
  229 + .restitle {
  230 + width: vw(720);
  231 + height: vw(76);
  232 + display: flex;
  233 + align-items: center;
  234 + padding-left: vw(80);
  235 + box-sizing: border-box;
  236 + background: url("../image/restitle.png") 0 0 /100% no-repeat;
  237 + }
  238 + .rescontent {
  239 + width: vw(680);
  240 + font-size: vw(28);
  241 + font-weight: 400;
  242 + color: #222222;
  243 + margin-top: vw(31);
  244 + line-height: vw(48);
  245 + }
  246 + }
  247 + }
  248 + //跳转链接
  249 + .navurl {
  250 + width: vw(429);
  251 + height: vw(93);
  252 + margin-top: vw(64);
  253 + animation: bigSmall 2.5s linear infinite;
  254 + background: url("../image/navurl.png") 0 0 /100% no-repeat;
  255 + }
  256 + // 底部提示
  257 + .footerTips {
  258 + width: vw(720);
  259 + height: vw(76);
  260 + background-color: #f9ddda;
  261 + margin-top: vw(15);
  262 + display: flex;
  263 + align-items: center;
  264 + justify-content: center;
  265 + font-weight: 600;
  266 + color: #df454b;
  267 + font-size: vw(24);
  268 + }
  269 + // 回到顶部
  270 + .returnTop {
  271 + width: vw(70);
  272 + height: vw(70);
  273 + background: url("../image/returnTop.png") 0 0 /100% no-repeat;
  274 + position: fixed;
  275 + right: vw(20);
  276 + top: vw(800);
  277 + }
  278 + // 弹窗
  279 + .popcontentbox {
  280 + width: 100vw;
  281 + height: 100vh;
  282 + position: fixed;
  283 + z-index: 1;
  284 + top: 0;
  285 + left: 0;
  286 + background-color: rgba(85, 85, 85, 0.355);
  287 + display: flex;
  288 + align-items: center;
  289 + justify-content: center;
  290 + .popcontent {
  291 + // height: vw(268);
  292 + // justify-content: space-around;
  293 +
  294 + height: vw(628);
  295 +
  296 + width: vw(540);
  297 + // height: vw(868);
  298 + background: #ffffff;
  299 + border-radius: vw(20);
  300 + display: flex;
  301 + align-items: center;
  302 + flex-direction: column;
  303 +
  304 + // 标题
  305 + .title {
  306 + font-size: vw(40);
  307 + font-weight: 600;
  308 + color: #be061a;
  309 + margin: vw(50) 0 vw(20) 0;
  310 + }
  311 + .titletwo {
  312 + font-size: vw(40);
  313 + font-weight: 600;
  314 + color: #be061a;
  315 + }
  316 + // 进度
  317 + .progress {
  318 + width: vw(403);
  319 + height: vw(104);
  320 + margin-top: vw(52);
  321 + display: flex;
  322 + flex-direction: column;
  323 + justify-content: space-between;
  324 + // background-color: red;
  325 + .progressTop {
  326 + width: vw(403);
  327 + display: flex;
  328 + align-items: center;
  329 + justify-content: space-between;
  330 + .tick {
  331 + width: vw(35);
  332 + height: vw(30);
  333 + }
  334 + .tickbor {
  335 + padding: vw(5);
  336 + border: vw(1) dashed gainsboro;
  337 + }
  338 + p {
  339 + font-size: vw(22);
  340 + font-weight: 500;
  341 + color: #f4a525;
  342 + }
  343 + }
  344 + img {
  345 + width: vw(403);
  346 + height: vw(22);
  347 + }
  348 + .bottomFont {
  349 + width: vw(403);
  350 + height: vw(30);
  351 + display: flex;
  352 + align-items: center;
  353 + justify-content: space-between;
  354 + p {
  355 + font-size: vw(22);
  356 + font-weight: 400;
  357 + color: #333333;
  358 + }
  359 + }
  360 + }
  361 + %btnfont {
  362 + width: vw(443);
  363 + height: vw(90);
  364 + border-radius: vw(50);
  365 + display: flex;
  366 + align-items: center;
  367 + justify-content: center;
  368 + font-size: vw(36);
  369 + font-weight: 400;
  370 + color: #ffffff;
  371 + }
  372 + // 支付按钮
  373 + .paybtn {
  374 + background-color: #cf0316;
  375 + margin: vw(46) 0 vw(30) 0;
  376 + @extend %btnfont;
  377 + }
  378 + // 优惠按钮
  379 + .discount {
  380 + background-color: #f4a525;
  381 + @extend %btnfont;
  382 + }
  383 + // 领取报告
  384 + .report {
  385 + border: vw(2) solid #e9ca8f;
  386 + @extend %btnfont;
  387 + color: black;
  388 + margin: vw(30) 0 vw(30) 0;
  389 + }
  390 + // 已有人数
  391 + .footerFont {
  392 + font-size: vw(30);
  393 + font-weight: 400;
  394 + color: #c75c5c;
  395 + }
  396 + .bottomLine {
  397 + margin-top: vw(18);
  398 + text-decoration: underline;
  399 + }
  400 + }
  401 + }
  402 +
  403 + // 回到顶部隐藏
  404 + .showx {
  405 + display: none !important;
  406 + }
  407 +}
  408 +</style>
  1 +const { defineConfig } = require('@vue/cli-service')
  2 +module.exports = defineConfig({
  3 + transpileDependencies: true,
  4 + lintOnSave: false,
  5 + publicPath: "./",
  6 + pwa:{
  7 + iconpaths:{
  8 + favicon32:'favicon.ico',
  9 + favicon16:'favicon.ico',
  10 + appleToucIcon:'favicon.ico',
  11 + maskIcon:'favicon.ico',
  12 + msTileImage:'favicon.ico'
  13 + }
  14 + }
  15 +})