陈嘉濠 / 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%
last 2 versions
not dead
... ...
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
... ...
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
... ...
# detection
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
... ...
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
... ...
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
... ...
This diff could not be displayed because it is too large.
{
"name": "detection",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.27.2",
"clipboard": "^2.0.11",
"core-js": "^3.8.3",
"js-md5": "^0.7.3",
"register-service-worker": "^1.7.2",
"vant": "^2.12.49",
"vconsole": "^3.14.6",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-pwa": "^5.0.8",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-import": "^1.13.5",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14"
}
}
... ...
No preview for this file type
<!DOCTYPE html>
<html lang="">
<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="./favicon.ico" rel="external nofollow" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" type="image/x-icon" />
<title>微宝配对</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
... ...
User-agent: *
Disallow:
... ...
<template>
<div id="app">
<keep-alive include>
<router-view></router-view>
</keep-alive>
</div>
</template>
<style lang="scss">
* {
padding: 0px;
margin: 0px;
}
#app{
position: absolute;
top: 0;
left: 0;
}
</style>
... ...
//引入配置好的axios
//@/就是当前的src/, vue默认配置的
import axios from "@/utils/_axios.js";
//首页
// 项目列表
export function homeList(){
return axios({
url:"promotes/",
method:"GET",
header:{isToken:false}
})
}
// 项目列表详细
export function detailed(data){
return axios({
url:"promote_detail/?id="+data,
method:"GET",
header:{isToken:false}
})
}
\ No newline at end of file
... ...
//引入配置好的axios
//@/就是当前的src/, vue默认配置的
import axios from "@/utils/_axios.js";
//调起支付
// 支付宝
export function ZFBpay(data){
return axios({
url:"",
method:"POST",
data:{
}
})
}
// 配对成功数据
export function pair(data){
return axios({
url:"namelove/",
method:"POST",
data:{
boy:data.boy,
girl:data.girl,
key:data.key
}
})
}
// 付款人列表
export function payList(data){
return axios({
url:"get_name_by_pay/?id="+data,
method:"GET",
header:{isToken:false}
})
}
// 微信支付
export function payWX(data){
return axios({
url:"addorderh5/",
method:"POST",
data:{
order_no:data.order_no,
amount:"0.01"
},
header:{isToken:false}
})
}
//支付后结果
export function payResult(data){
return axios({
url:"get_name_love/?order_no="+data,
method:"GET",
header:{isToken:false}
})
}
... ...
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
... ...
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
// Vant UI
import "./utils/Vant/index"
Vue.config.productionTip = false
// 手机端调试
// import Vconsole from 'vconsole'
// let vConsole = new Vconsole()
// Vue.use(vConsole);
// Vue.config.productionTip = false
// md5加密
import md5 from "js-md5"
// 复制
import clipboard from 'clipboard'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Vue.prototype.$md5 = md5
Vue.prototype.ClipboardJS = clipboard;
\ No newline at end of file
... ...
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}
... ...
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
// 首页
{
path: '/home',
name: 'Home',
component: () => import('../views/home/home')
},
// 第二页
{
path: '/homeTwo',
name: 'HomeTwo',
component: () => import('../views/homeTwo/homeTwo')
},
// 第三页
{
path: '/pay',
name: 'Pay',
component: () => import('../views/pay/pay')
},
// 结果页
{
path: '/result',
name: 'Result',
component: () => import('../views/result/result')
},
{
path: '*',
// 首页
redirect: { path: "/home" }
// redirect: { path: "/home",query:{id:1} }
},
]
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
// //重写VueRouter.prototype身上的push方法
const originPush = VueRouter.prototype.push;
// // const originReplace = VueRouter.prototype.replace;
VueRouter.prototype.push = function push(location) {
return originPush.call(this, location).catch(err => err)
}
//全局守卫:前置守卫(在路由跳转之间进行判断)
router.beforeEach(async (to, from, next) => {
next()
});
export default router
... ...
import { homeList,detailed } from "@/api/home/index"
// 首页列表
// 状态
const state = {
// 首页内容
homeList:[],
// 首页内容详情
detailed:[]
}
// 改变
const mutations = {
// 保存首页信息
GAINHOMELIST(state,data){
state.homeList = data
},
//保存首页详细信息
GAINHOMEDETAILED(state,data){
state.detailed = data
}
}
// 行动
const actions = {
// 首页信息
async gainHomeList({ commit }, data) {
let result = await homeList(data)
console.log(result);
if(result.code==200){
commit("GAINHOMELIST",result.data)
}
},
// 首页详细信息
async gainHomeDetailed({ commit }, data) {
let result = await detailed(data)
console.log(result);
if(result.code==200){
commit("GAINHOMEDETAILED",result.data)
}
}
}
// 简化
const getters = {
}
// 导出
export default {
state,
mutations,
actions,
getters
}
\ No newline at end of file
... ...
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入模块
// 支付
import pay from "./pay"
// 支付
import home from "./home"
export default new Vuex.Store({
modules: {
pay,
home
}
})
... ...
import { pair, payList, payWX, payResult } from "../api/pay/index"
// 支付
// 状态
const state = {
// 配对信息
pairData: {},
// 付款人列表
paylist: [],
// 微信跳转链接
WXurl: "",
// 结果数据
resultDate:"",
}
// 改变
const mutations = {
// 配对信息
GAINPAIR(state, data) {
state.pairData = data
},
// 付款人列表
GAINPAYLIST(state, data) {
state.paylist = data
},
// 微信支付
GAINPAYWX(state, data) {
state.WXurl = data
},
// 支付后结果
GAINPAYRESULT(state, data) {
state.resultDate = data
}
}
// 行动
const actions = {
// 配对成功获取数据
async gainPair({ commit }, data) {
let result = await pair(data)
console.log(result);
if (result.code == 200) {
commit("GAINPAIR", result.data)
} else {
return Promise.reject(result.message)
}
},
// 付款人列表
async gainPayList({ commit }, data) {
let result = await payList(data)
console.log(result);
if (result.code == 200) {
commit("GAINPAYLIST", result.data)
console.log(result.data);
}
},
// 微信支付
async gainPayWX({ commit }, data) {
let result = await payWX(data)
console.log(result);
if (result.code == 200) {
commit("GAINPAYWX", result.data)
}
},
// 支付后结果
async gainPayResult({ commit }, data) {
let result = await payResult(data)
console.log(result);
if (result.code == 200) {
commit("GAINPAYRESULT", result.data)
}
},
}
// 简化
const getters = {
}
// 导出
export default {
state,
mutations,
actions,
getters
}
\ No newline at end of file
... ...
import Vue from 'vue';
// 单选框
import { Checkbox, CheckboxGroup } from 'vant';
import { RadioGroup, Radio } from 'vant';
// 轻提示
import { Toast } from 'vant';
// 弹出框提示
import { Dialog } from 'vant';
// 弹出层
import { Popup } from 'vant';
// 倒计时
import { CountDown } from 'vant';
// 单选框
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Radio);
Vue.use(RadioGroup);
// 轻提示
Vue.use(Toast);
// 弹出框提示
Vue.use(Dialog);
// 弹出层
Vue.use(Popup);
// 倒计时
Vue.use(CountDown);
\ No newline at end of file
... ...
//axios二次封装
//引入axios包
import axios from "axios";
//重新定义一个axios新实例
// create方法，创建一个
const request = axios.create({
// 内网穿透测试环境
// baseURL: "http://egg.free.idcfengye.com/api",
// 正式环境
baseURL: "http://czapi.gzrkkj.cn/v1/",
// baseURL: "http://czapi.gzrkkj.com/v1/",
header: { isToken: true }
})
//请求拦截器
request.interceptors.request.use((config) => {
const token = localStorage.getItem("isToken")
if (token && config.header.isToken) {
// 设置请求头
config.headers.Authorization = token;
}
return config;
});
//响应拦截器
request.interceptors.response.use((res) => {
//成功的回调函数
return res.data;
}, (error) => {
//响应失败的回调函数
});
//导出自定义的新axios实例
export default request;
\ No newline at end of file
... ...
<template>
<!-- 首页 -->
<div class="home">
<!-- 首页盒子内容 -->
<div class="homebox" :style="dynamic">
<!-- 活动规则 -->
<div class="activityRule" @click="ruleTips"></div>
<!-- 左边男方字体 -->
<img src="../image/nanfont.png" alt="" class="leftFont" />
<!-- 右边女方字体 -->
<img src="../image/nvfont.png" alt="" class="rightFont" />
<!-- 输入内容-->
<div class="homeContent">
<!-- 输入框 -->
<div class="nameIptOne">
<input
v-model="boy"
class="nameIpt"
type="text"
placeholder="男孩姓名"
/>
</div>
<div class="nameIptTwo">
<input
v-model="girl"
class="nameIpt"
type="text"
placeholder="女孩姓名"
/>
</div>
<!-- 按钮 -->
<div class="btnMatching" @click="navPay"></div>
<!-- 字体 -->
<p class="footerFont" v-if="homeData">
已有<span class="fontRed">{{ homeData.total_num }}</span
>人完成配对,并参与了领<span class="fontRed">{{ homeData.gift }}</span
>活动提交视为您已同意《隐私协议》
</p>
</div>
</div>
<!-- 玩法规则提示 -->
<van-dialog v-model="showTips" title="规则说明" show-cancel-button>
<!--每一个 -->
<div class="every">
1.用户在本平台使用幸运星球，应遵守本规则。
用户开始使用及/或继续使用本服务，即视为用户同意并已经接受本规则中全部内容。
此后用户不得以未阅读/未同意本规则内容或类似理由提出任何形式的抗辩。
</div>
<div class="every">
2.点击“立即抽奖”即可进行抽奖，抽中的结果为盲盒的购买资格，结果显示的商品为该盲盒里有概率中奖的商品；
</div>
<div class="every">
3.转盘页面展示的商品均为有概率中奖的商品，除此外还有其它可抽中的商品，
具体可抽中商品清单及中奖概率请在支付页面点击“全部商品”进行查看；
</div>
<div class="every">
4.付费前，请您务必了解，付款获得的是抽奖资格（盲盒），并非页面显示的当前商品；
</div>
<div class="every">
5.“100%中奖”意为不设空盒，付费成功后您将获得可抽中商品清单里的任一商品；
</div>
<div class="every">
6.该盲盒内商品类型概率:传说款:0.168%、史诗款:0.342%、尊贵款:8.723%、普通款:90.767%;
</div>
<div class="every">7.风险提示：商品抽奖存在概率性，付费请谨慎；</div>
<div class="every">8.未成年人须在家长监督下进行购买；</div>
<div class="every">
9.本渠道抽中的所有商品包邮，以下偏远地区（内蒙古、宁夏、海南）
需补邮费差价25元，受疫情天气及物流公司安排等影响，以下偏远地区
(新疆、西藏、甘肃、青海) 暂不支持配送；
</div>
<div class="every">
10.付费成功后，您需回到本页面，或下载“幸运星球”查看您的中奖商品，
填写您的收货地址，等待宝贝发出；
</div>
<div class="every">
11.当您收到盲盒商品后，出现以下质量问题的，您可提供开箱图片或视频，
由本公司进行确认及受理：商品错发或者数量不符、商品在运输过程造成严重破损，商品做工存在明显瑕疵；
</div>
<div class="every">
12.因工艺原因存在微瑕的商品，轻微盒损的商品，商品漆味重，均不属于质量问题；
</div>
<div class="every">
13.如有疑问，可下载“幸运星球”APP，联系在线客服进行咨询。
</div>
</van-dialog>
</div>
</template>
<script>
// 轻提示
import { Toast } from "vant";
export default {
name: "Home",
data() {
return {
// 输入框姓名
boy: "",
girl: "",
// 规则提示弹窗
showTips: false,
// 动态背景颜色
dynamic: "",
};
},
methods: {
// 活动规则
ruleTips() {
this.showTips = !this.showTips;
},
// 跳转支付页
async navPay() {
// 配对信息
try {
await this.$store.dispatch("gainPair", {
boy: this.boy,
girl: this.girl,
key: this.$md5(this.boy + this.girl + "cz321456").toUpperCase(),
});
this.$router.push({
path: "/pay",
query:{
boy: this.boy,
girl: this.girl,
},
});
} catch (error) {
Toast(error);
}
},
},
async mounted() {
// 首页信息列表
// await this.$store.dispatch("gainHomeList");
// 首页详细信息
await this.$store.dispatch("gainHomeDetailed", 1);
// 背景图
this.dynamic = {
background: `url('${this.homeData.photo}') 0 0 /100% no-repeat`,
};
},
computed: {
// 首页内容
homeData() {
return this.$store.state.home.detailed;
},
},
};
</script>
<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
@return 100 * $px/720 + vw;
}
* {
margin: 0;
padding: 0;
}
// 动画
// 左边字体动画
@keyframes leftTop {
0% {
top: vw(400);
}
50% {
top: vw(362);
}
100% {
top: vw(400);
}
}
// 右边字体动画
@keyframes rightTop {
0% {
top: vw(372);
}
50% {
top: vw(410);
}
100% {
top: vw(372);
}
}
// 按钮动画
@keyframes bigSmall {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
// 首页
.home {
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
// 首页盒子内容
.homebox {
width: vw(720);
height: vw(1392);
display: flex;
position: relative;
flex-direction: column;
align-items: center;
// 活动规则
.activityRule {
width: vw(40);
height: vw(137);
position: absolute;
top: vw(68);
right: vw(0);
background: url("../image/rulePic.png") 0 0 /100% no-repeat;
}
// 左边男方字体
.leftFont {
width: vw(207);
height: vw(94);
position: absolute;
top: vw(400);
left: vw(15);
animation: leftTop 2.5s linear infinite;
}
// 右边女方字体
.rightFont {
width: vw(207);
height: vw(94);
position: absolute;
top: vw(372);
right: vw(37);
animation: rightTop 2.5s linear infinite;
}
// 输入内容
.homeContent {
width: vw(720);
height: vw(671);
position: absolute;
background: url("../image/homeBR.png") 0 0 /100% no-repeat;
top: vw(680);
display: flex;
flex-direction: column;
align-items: center;
// 输入框
.nameIptOne {
width: vw(620);
height: vw(90);
position: absolute;
top: vw(177);
display: flex;
align-items: center;
justify-content: flex-end;
background: url("../image/nameIptO.png") 0 0 /100% no-repeat;
::placeholder {
color: #808080;
}
}
.nameIptTwo {
width: vw(620);
height: vw(90);
position: absolute;
top: vw(297);
display: flex;
align-items: center;
justify-content: flex-end;
background: url("../image/nameIptY.png") 0 0 /100% no-repeat;
::placeholder {
color: #808080;
}
}
.nameIpt {
width: vw(520);
height: vw(90);
outline: none;
border: none;
font-size: vw(32);
}
// 按钮
.btnMatching {
width: vw(620);
height: vw(103);
position: absolute;
top: vw(417);
animation: bigSmall 2.5s linear infinite;
background: url("../image/btnMatching.png") 0 0 / 100% no-repeat;
}
// 字体
.footerFont {
width: vw(558);
font-size: vw(24);
position: absolute;
top: vw(530);
color: #976773;
text-align: center;
line-height: vw(48);
.fontRed {
color: red;
}
}
}
}
// 规则玩法提示
.van-dialog {
width: vw(620);
height: vw(800);
display: flex;
align-items: center;
flex-direction: column;
// 标题头
:deep(.van-dialog__header) {
font-size: vw(38);
font-weight: 700;
}
// 内容
:deep(.van-dialog__content) {
width: vw(550);
height: vw(600);
overflow: scroll;
margin-top: vw(20);
// 每一条信息
.every {
margin-bottom: vw(15);
}
}
//底部按钮
:deep(.van-dialog__footer) {
width: vw(550);
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
</style>
\ No newline at end of file
... ...
<template>
<!-- 第二页 -->
<div class="homeTwo">
<!-- 第二页盒子内容 -->
<div class="homeTwobox">
<!-- 情侣 -->
<div class="lovers">
<span>{{ name[0] }}</span>
<img class="love" src="../image/love.png" alt="" />
<span>{{ name[1] }}</span>
</div>
<!-- 高分 -->
<div class="score">恋爱指数有机会99分</div>
<!-- 免费 -->
<div class="free" @click="popshowFn"></div>
<!-- 价格 -->
<div class="price">恋爱好运价：<span>9.9元</span></div>
<!-- 有机会获得 -->
<div class="opportunity">
您将获得：恋爱指数报告&<span>免费领iphone</span>
</div>
<!-- 解锁按钮 -->
<div class="btnUnlock" @click="payWXorZFB"></div>
<!-- 微信支付 -->
<div class="WXpay">
<div class="WXpayleft">
<div class="wxfont">
<img class="wxicon" src="../image/WXicon.png" alt="" />
<p>微信安全支付</p>
</div>
<div class="line"></div>
<div class="zfbfont">
<img class="wxicon" src="../image/ZFBicon.png" alt="" />
<p>支付宝安全支付</p>
</div>
</div>
<van-radio-group v-model="radio" class="btnright">
<van-radio name="1" checked-color="green"></van-radio>
<van-radio name="2" checked-color="green"></van-radio>
</van-radio-group>
</div>
</div>
<!-- 弹窗 -->
<van-popup class="popcontent" v-model="popshow">
<!-- 标题 -->
<p class="title">离双方配对报告只差1步</p>
<p class="titletwo">支付后查看契合度报告</p>
<!-- 进度 -->
<div class="progress">
<div class="progressTop">
<img class="tick tickbor" src="../image/true.png" alt="" />
<img class="tick" src="../image/true.png" alt="" />
<p>仅剩0.7%</p>
</div>
<img src="../image/line.png" alt="" />
<div class="bottomFont">
<p>信息提交</p>
<p>生成报告</p>
<p>查看契合度</p>
</div>
</div>
<!-- 支付按钮 -->
<div class="paybtn">立即支付</div>
<!-- 优惠按钮 -->
<div class="discount">领取优惠红包</div>
<!-- 领取报告 -->
<div class="report">已支付点击领取报告</div>
<!-- 已有人数 -->
<p class="footerFont">已有1386706人解锁姓名测试</p>
<p class="footerFont bottomLine">姓名错误，需要重新填写></p>
</van-popup>
<!-- 付款人列表 -->
<div class="payList" v-if="payListshow">{{ listdata }}</div>
</div>
</template>
<script>
export default {
name: "homeTwo",
data() {
return {
//支付单选框
radio: "1",
// 情侣姓名
name: [],
// 弹出层
popshow: false,
// 付款人列表显示隐藏
payListshow: false,
// 付款人信息
listdata: "",
// 定时器
timer: "",
};
},
methods: {
// 支付宝，微信
payWXorZFB() {
if (this.radio == "1") {
console.log("微信支付");
this.$router.push("/result");
} else if (this.radio == "2") {
this.$router.push("/result");
}
},
popshowFn() {
this.popshow = !this.popshow;
},
},
async activated() {
this.name = await JSON.parse(localStorage.getItem("name"));
// 付款人列表
await this.$store.dispatch("gainPayList", 1);
this.timer = setInterval(() => {
if (!this.payListshow) {
var num = Math.floor(
Math.random() * (this.payListData.length - 1 - 0 + 1) + 0
);
console.log(num);
this.listdata = this.payListData[num];
this.payListshow = !this.payListshow;
} else if (this.payListshow) {
this.payListshow = !this.payListshow;
num += 1;
}
}, 4000);
},
deactivated() {
clearInterval(this.timer);
this.payListshow = false;
},
computed: {
// 付款人列表
payListData() {
return this.$store.state.pay.paylist;
},
},
};
</script>
<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
@return 100 * $px/720 + vw;
}
* {
margin: 0;
padding: 0;
}
// 动画
// 右边字体动画
@keyframes rightTop {
0% {
top: vw(523);
}
50% {
top: vw(490);
}
100% {
top: vw(523);
}
}
// 按钮动画
@keyframes bigSmall {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
// 第二页
.homeTwo {
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
// 第二页盒子内容
.homeTwobox {
width: vw(720);
height: vw(1437);
display: flex;
position: relative;
flex-direction: column;
align-items: center;
background: url("../image/homeTwoBG.png") 0 0 /100% no-repeat;
// 情侣
.lovers {
position: absolute;
top: vw(180);
left: vw(100);
display: flex;
align-items: center;
justify-content: space-between;
.love {
width: vw(29);
height: vw(24);
display: block;
margin: 0 vw(8);
}
span {
display: block;
font-size: vw(32);
font-weight: 400;
color: #333333;
}
}
// 高分
.score {
font-size: vw(32);
font-weight: 600;
color: #f23e79;
position: absolute;
top: vw(236);
right: vw(80);
}
// 免费
.free {
width: vw(197);
height: vw(196);
position: absolute;
top: vw(523);
left: vw(443);
animation: rightTop 2.5s linear infinite;
background: url("../image/freePic.png") 0 0 /100% no-repeat;
}
// 价格
.price {
position: absolute;
top: vw(855);
left: vw(102);
font-weight: 400;
color: #333333;
font-size: vw(28);
span {
color: #e55e8a;
font-size: vw(30);
}
}
// 有机会获得
.opportunity {
position: absolute;
top: vw(915);
left: vw(102);
font-weight: 400;
color: #333333;
font-size: vw(28);
span {
color: #e55e8a;
font-size: vw(30);
}
}
// 解锁按钮
.btnUnlock {
width: vw(600);
height: vw(148);
position: absolute;
top: vw(975);
animation: bigSmall 2.5s linear infinite;
background: url("../image/btnUnlock.png") 0 0 /100% no-repeat;
}
// 微信支付
.WXpay {
width: vw(560);
height: vw(139);
position: absolute;
top: vw(1127);
display: flex;
align-items: center;
justify-content: space-between;
.WXpayleft {
width: vw(254);
height: vw(139);
font-weight: 400;
color: #333333;
font-size: vw(28);
display: flex;
flex-direction: column;
justify-content: space-between;
.wxfont {
width: vw(226);
height: vw(48);
display: flex;
align-items: center;
justify-content: space-between;
// border-bottom: vw(1) solid gainsboro;
}
.line {
width: vw(560);
height: vw(1);
background: gainsboro;
}
.zfbfont {
width: vw(254);
height: vw(48);
display: flex;
align-items: center;
justify-content: space-between;
}
.wxicon {
width: vw(48);
height: vw(48);
}
}
.btnright {
height: vw(127);
display: flex;
flex-direction: column;
justify-content: space-between;
}
// 确认按钮
.affirm {
width: vw(38);
height: vw(38);
}
}
}
// 弹窗
.popcontent {
width: vw(540);
height: vw(868);
background: #ffffff;
border-radius: vw(20);
display: flex;
align-items: center;
flex-direction: column;
// 标题
.title {
font-size: vw(40);
font-weight: 600;
color: #be061a;
margin: vw(50) 0 vw(20) 0;
}
.titletwo {
font-size: vw(40);
font-weight: 600;
color: #be061a;
}
// 进度
.progress {
width: vw(403);
height: vw(104);
margin-top: vw(52);
display: flex;
flex-direction: column;
justify-content: space-between;
// background-color: red;
.progressTop {
width: vw(403);
display: flex;
align-items: center;
justify-content: space-between;
.tick {
width: vw(35);
height: vw(30);
}
.tickbor {
padding: vw(5);
border: vw(1) dashed gainsboro;
}
p {
font-size: vw(22);
font-weight: 500;
color: #f4a525;
}
}
img {
width: vw(403);
height: vw(22);
}
.bottomFont {
width: vw(403);
height: vw(30);
display: flex;
align-items: center;
justify-content: space-between;
p {
font-size: vw(22);
font-weight: 400;
color: #333333;
}
}
}
%btnfont {
width: vw(443);
height: vw(90);
border-radius: vw(50);
display: flex;
align-items: center;
justify-content: center;
font-size: vw(36);
font-weight: 400;
color: #ffffff;
}
// 支付按钮
.paybtn {
background-color: #cf0316;
margin: vw(46) 0 vw(30) 0;
@extend %btnfont;
}
// 优惠按钮
.discount {
background-color: #f4a525;
@extend %btnfont;
}
// 领取报告
.report {
border: vw(2) solid #e9ca8f;
@extend %btnfont;
color: black;
margin: vw(30) 0 vw(30) 0;
}
// 已有人数
.footerFont {
font-size: vw(30);
font-weight: 400;
color: #c75c5c;
}
.bottomLine {
margin-top: vw(18);
text-decoration: underline;
}
}
// 付款人列表
.payList {
width: vw(510);
height: vw(72);
background: #000000;
border-radius: vw(14);
opacity: 0.7;
position: absolute;
bottom: vw(90);
font-size: vw(28);
font-weight: 400;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
\ No newline at end of file
... ...
<template>
<!-- 第三页 -->
<div class="pay">
<!-- 第三页盒子 -->
<div class="paybox">
<!-- 横幅 -->
<div class="banner"></div>
<!-- 订单编号 -->
<div class="orderId">订单编号：{{ pairResult.order_no }}</div>
<!-- 支付 -->
<div class="paycontent">
<!-- 人物 -->
<div class="character">
<div class="leftcharacter">
<p class="nameTop">{{ $route.query.boy }}</p>
<img src="../image/leftpic.png" alt="" />
<p class="timeFooter"></p>
</div>
<img class="loveline" src="../image//loveline.png" alt="" />
<div class="rightcharacter">
<p class="nameTop">{{ $route.query.girl }}</p>
<img src="../image/rightpic.png" alt="" />
<p class="timeFooter"></p>
</div>
</div>
<!-- 特价 -->
<div class="special">
<p class="original">原价：¥168</p>
<p class="luck">吉时特价：</p>
<p class="nowpri">¥ 9.9</p>
</div>
<!-- 倒计时 -->
<p class="count">
<span>倒计时：</span>
<van-count-down
class="timeCountDownmiao"
:time="time"
format="HH 小时 mm 分 ss 秒"
/>
</p>
<!-- 微信支付 -->
<div class="wxpaybtn" @click="payWX">
<img src="../image/wxfont.png" alt="" />
</div>
<!-- 支付宝支付 -->
<!-- <div class="zfbpaybtn">
<img src="../image/zfbfont.png" alt="" />
</div> -->
</div>
<!-- 支付完成 -->
<div class="complete">支付完成后，将为您解锁其余八项重要内容：</div>
<!-- 结果 -->
<div class="result">
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第一：{{ $route.query.girl }}小姐的性格解析</p>
<img src="../image/edge.png" alt="" />
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第二：{{ $route.query.boy }}先生的性格解析</p>
<img src="../image/edge.png" alt="" />
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第三：配对分析</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>你们一生的婚姻究竟会是怎样呢?</p>
<p>相比于其他人来说，是好是坏?</p>
<p>哪些因素会干扰你们的爱情?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第四：你们的爱情危机</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>两人相处时会出现哪些危机?</p>
<p>你们的幸福指数是多少?</p>
<p>如何破解危机，守护爱情?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第五：婚前婚后变化</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>你们是否是天生一对?</p>
<p>在别人眼中你们的婚姻是怎样的?</p>
<p>生活中你们是怎样和谐相处?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第六：（婚配指数）心有灵犀</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>对方会是个温柔体贴的人吗?</p>
<p>会屈就于你还是你只有听从的份?</p>
<p>相处之中你们是否更具默契?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第七：（感情质量）相扶相旺</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>配偶是得力助手还是对方的累赘?</p>
<p>你对配偶是助旺还是助衰呢?</p>
<p>你们能互相助旺、优势互补吗?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第八：爱情保卫</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>你们的婚后生活稳定吗？</p>
<p>婚姻生活中会遇到哪些危机?</p>
<p>维系二人感情稳定的方法?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第九：（双方优点）魅力相吸</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>你们的婚姻保质期有多久？</p>
<p>另一半是否有出轨倾向?</p>
<p>针对你们的爱情保鲜秘籍是什么?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
<div class="each">
<div class="eachtitle">
<img class="rotate" src="../image/edge.png" alt="" />
<p>第十：（婚后生活）子女同步</p>
<img src="../image/edge.png" alt="" />
</div>
<div class="resultcontent">
<div class="leftFont">
<p>孩子能让你们开心还是疲惫?</p>
<p>孩子的到来会让婚姻变得更加稳固?</p>
</div>
<div class="rightImg">
<img src="../image/lockUp.png" alt="" />
<p>解锁查看</p>
</div>
</div>
</div>
</div>
</div>
<!-- 回到顶部 -->
<div
class="returnTop"
:class="showTop ? 'showx' : ''"
id="retTop"
@click="returnTop"
></div>
</div>
</template>
<script>
export default {
name: "pay",
data() {
return {
// 返回顶部
showTop: true,
// 倒计时
time: 1 * 60 * 60 * 1000,
};
},
methods: {
// 回到顶部
async returnTop() {
//滚动条总路程
var gdt = document.documentElement.scrollTop;
//滚动条速度
var gdtsudu = gdt / 20;
var timer = setInterval(() => {
document.documentElement.scrollTop -= gdtsudu;
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
this.showTop = true;
}
}, 10);
},
// 微信支付
async payWX() {
// this.$router.push({
// path: "/result",
// query: {
// order_no: this.pairResult.order_no,
// },
// });
await this.$store.dispatch("gainPayWX", {
order_no: this.pairResult.order_no,
});
location.href =
this.$store.state.pay.WXurl +
"&redirect_url=" +
encodeURIComponent(
"http://estimate.gzrkkj.cn/#/result?order_no=" +
this.pairResult.order_no
);
},
},
mounted() {
// 返回顶部显示
document.addEventListener("scroll", () => {
if (document.documentElement.scrollTop > 350) {
this.showTop = false;
}
});
},
computed: {
// 配对信息
pairResult() {
return this.$store.state.pay.pairData;
},
},
};
</script>
<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
@return 100 * $px/720 + vw;
}
* {
margin: 0;
padding: 0;
}
// 第三页
.pay {
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
// 第三页盒子
.paybox {
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
// 横幅
.banner {
width: vw(720);
height: vw(494);
background: url("../image/bannerThree.png") 0 0 /100% no-repeat;
}
// 订单编号
.orderId {
width: vw(720);
height: vw(88);
background: #ffffff;
font-size: vw(28);
font-weight: 400;
color: #333333;
line-height: vw(88);
padding-left: vw(20);
box-sizing: border-box;
}
// 支付
.paycontent {
width: vw(720);
height: vw(790);
display: flex;
flex-direction: column;
align-items: center;
border-bottom: vw(2) solid #e7d1c1;
border-top: vw(2) solid #e7d1c1;
// 人物
.character {
width: vw(680);
height: vw(456);
display: flex;
align-items: center;
justify-content: space-between;
margin: vw(20) 0 vw(26) 0;
.leftcharacter {
@extend %LorRpic;
}
.rightcharacter {
@extend %LorRpic;
}
%LorRpic {
width: vw(290);
height: vw(456);
border-radius: vw(16);
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
background-color: #f0e6c2;
img {
width: vw(290);
height: vw(320);
}
.nameTop {
@extend %fontTorB;
font-size: vw(32);
}
.timeFooter {
@extend %fontTorB;
font-size: vw(28);
}
%fontTorB {
width: vw(290);
height: vw(68);
font-weight: 400;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
}
}
.loveline {
width: vw(89);
height: vw(55);
}
}
// 特价
.special {
width: vw(533);
height: vw(62);
display: flex;
align-items: center;
justify-content: space-between;
.original {
font-size: vw(32);
font-weight: 500;
color: #333333;
text-decoration: line-through;
}
.luck {
font-size: vw(44);
font-weight: 600;
color: #333333;
}
.nowpri {
font-size: vw(44);
font-weight: 500;
color: #fe0000;
}
}
// 倒计时
.count {
height: vw(42);
font-size: vw(30);
font-weight: 400;
color: #333333;
margin: vw(9) 0 vw(23) 0;
display: flex;
align-items: center;
.timeCountDownmiao {
font-size: vw(30);
display: flex;
height: vw(42);
align-items: center;
}
span {
font-size: vw(32);
display: flex;
height: vw(42);
align-items: center;
}
}
// 微信支付
.wxpaybtn {
width: vw(598);
height: vw(88);
background-color: #63ab35;
border-radius: vw(44);
display: flex;
align-items: center;
justify-content: center;
img {
width: vw(230);
height: vw(50);
}
}
// 支付宝支付
.zfbpaybtn {
width: vw(598);
height: vw(88);
background-color: #198df4;
border-radius: vw(44);
margin: vw(20) 0 vw(61) 0;
display: flex;
align-items: center;
justify-content: center;
img {
width: vw(270);
height: vw(50);
}
}
}
// 完成
.complete {
width: vw(720);
height: vw(100);
display: flex;
justify-content: center;
align-items: center;
border-bottom: vw(2) solid #e7d1c1;
border-top: vw(2) solid #e7d1c1;
font-size: vw(32);
font-weight: 500;
color: #333333;
margin: vw(10) 0 vw(30) 0;
}
// 结果
.result {
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: vw(50);
.each {
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: vw(30);
.eachtitle {
width: vw(720);
height: vw(76);
display: flex;
align-items: center;
justify-content: space-between;
p {
width: vw(636);
height: vw(76);
line-height: vw(76);
font-size: vw(30);
font-weight: 400;
color: #ffffff;
background-color: #d23037;
}
img {
width: vw(42);
height: vw(76);
}
.rotate {
transform: rotateZ(180deg);
}
}
.resultcontent {
width: vw(680);
height: vw(194);
display: flex;
align-items: center;
justify-content: space-between;
.leftFont {
width: vw(500);
height: vw(154);
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: vw(30);
font-weight: 400;
color: #333333;
p{
margin-bottom: vw(15);
}
}
.rightImg {
width: vw(128);
height: vw(182);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
p {
font-size: vw(30);
font-weight: 500;
color: #a9a9a9;
}
img {
width: vw(128);
height: vw(140);
}
}
}
}
}
}
// 回到顶部
.returnTop {
width: vw(70);
height: vw(70);
background: url("../image/returnTop.png") 0 0 /100% no-repeat;
position: fixed;
right: vw(20);
top: vw(800);
}
.showx {
display: none !important;
}
}
</style>
\ No newline at end of file
... ...
<template>
<!-- 结果页 -->
<div class="result">
<!-- 结果页盒子 -->
<div class="resultbox" v-if="pairData">
<!-- 配对指数 -->
<p class="num">{{ pairData.score }}</p>
<!-- 情侣 -->
<div class="lovers">{{pairData.title}}</div>
<!-- 测试结果 -->
<template v-if="pairData.detail_list">
<div
class="testresult"
v-for="(el, idx) in pairData.detail_list"
:key="idx"
>
<!-- 标题 -->
<div class="restitle">{{ el.title }}</div>
<!-- 内容 -->
<div class="rescontent" v-html="el.content"></div>
</div>
</template>
</div>
<!-- 跳转链接 -->
<div class="navurl" @click="copyURL"></div>
<!-- 底部提示 -->
<div class="footerTips">
复制链接后，可打开微信发送或保存链接，便于后期反复查阅
</div>
<!-- 回到顶部 -->
<div
class="returnTop"
:class="showTop ? 'showx' : ''"
id="retTop"
@click="returnTop"
></div>
<!-- 弹窗重新支付 -->
<div class="popcontentbox" v-if="notpay">
<div class="popcontent">
<!-- 标题 -->
<p class="title">离双方配对报告只差1步</p>
<p class="titletwo">支付后查看契合度报告</p>
<!-- 进度 -->
<div class="progress">
<div class="progressTop">
<img class="tick tickbor" src="../image/true.png" alt="" />
<img class="tick" src="../image/true.png" alt="" />
<p>仅剩0.7%</p>
</div>
<img src="../image/line.png" alt="" />
<div class="bottomFont">
<p>信息提交</p>
<p>生成报告</p>
<p>查看契合度</p>
</div>
</div>
<!-- 支付按钮 -->
<div class="paybtn" @click="againpay">重新支付</div>
<!-- 优惠按钮 -->
<!-- <div class="discount">领取优惠红包</div> -->
<!-- 领取报告 -->
<!-- <div class="report">已支付点击领取报告</div> -->
<!-- 已有人数 -->
<!-- <p class="footerFont">已有1386706人解锁姓名测试</p> -->
<p class="footerFont bottomLine" @click="navhome">
姓名错误，需要重新填写>
</p>
</div>
</div>
</div>
</template>
<script>
import { Toast } from "vant";
export default {
name: "Result",
data() {
return {
// 返回顶部
showTop: true,
// 情侣姓名
name: [],
// 未支付
notpay: false,
};
},
methods: {
// 回到顶部
async returnTop() {
//滚动条总路程
var gdt = document.documentElement.scrollTop;
//滚动条速度
var gdtsudu = gdt / 20;
var timer = setInterval(() => {
document.documentElement.scrollTop -= gdtsudu;
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
this.showTop = true;
}
}, 10);
},
// 复制链接
copyURL() {
var _val = window.location.href;
new this.ClipboardJS(".navurl", {
text: () => {
Toast("复制成功");
return _val;
},
});
},
//返回首页
navhome() {
this.$router.push("/home");
},
// 重新支付
async againpay() {
await this.$store.dispatch("gainPayWX", {
order_no: this.$route.query.order_no,
});
location.href =
this.$store.state.pay.WXurl +
"&redirect_url=" +
encodeURIComponent(
"http://estimate.gzrkkj.cn/#/result?order_no=" +
this.$route.query.order_no
);
},
},
async activated() {
// 姓名
// this.name = await JSON.parse(localStorage.getItem("name"));
// 配对信息
// try {
// await this.$store.dispatch("gainPair", {
// boy: this.name[0],
// girl: this.name[1],
// key: this.$md5(this.name[0] + this.name[1] + "cz321456").toUpperCase(),
// });
// } catch (error) {
// console.log(error);
// Toast(error);
// }
},
async mounted() {
// 支付后数据
await this.$store.dispatch("gainPayResult", this.$route.query.order_no);
// 未支付弹出重新支付框
if (this.$store.state.pay.resultDate.need_pay == 1) {
this.notpay = true;
}
// 返回顶部显示
document.addEventListener("scroll", () => {
if (document.documentElement.scrollTop > 350) {
this.showTop = false;
}
});
},
computed: {
// 支付结果数据
pairData() {
return this.$store.state.pay.resultDate;
},
},
};
</script>
<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
@return 100 * $px/720 + vw;
}
* {
margin: 0;
padding: 0;
}
// 动画
// 按钮动画
@keyframes bigSmall {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
// 结果页
.result {
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
// 结果页盒子
.resultbox {
width: vw(720);
display: flex;
position: relative;
flex-direction: column;
align-items: center;
background: url("../image/resultBC.png") 0 0 /100% no-repeat;
background-color: #ffaaaf;
padding-bottom: vw(29);
box-sizing: border-box;
// 配对指数
.num {
position: absolute;
top: vw(235);
font-size: vw(44);
color: white;
}
// 情侣
.lovers {
font-size: vw(44);
font-weight: 500;
color: #ffffff;
margin-top: vw(540);
}
// 测试结果
.testresult {
margin-top: vw(40);
width: vw(720);
display: flex;
flex-direction: column;
align-items: center;
// 标题
.restitle {
width: vw(720);
height: vw(76);
display: flex;
align-items: center;
padding-left: vw(80);
box-sizing: border-box;
background: url("../image/restitle.png") 0 0 /100% no-repeat;
}
.rescontent {
width: vw(680);
font-size: vw(28);
font-weight: 400;
color: #222222;
margin-top: vw(31);
line-height: vw(48);
}
}
}
//跳转链接
.navurl {
width: vw(429);
height: vw(93);
margin-top: vw(64);
animation: bigSmall 2.5s linear infinite;
background: url("../image/navurl.png") 0 0 /100% no-repeat;
}
// 底部提示
.footerTips {
width: vw(720);
height: vw(76);
background-color: #f9ddda;
margin-top: vw(15);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #df454b;
font-size: vw(24);
}
// 回到顶部
.returnTop {
width: vw(70);
height: vw(70);
background: url("../image/returnTop.png") 0 0 /100% no-repeat;
position: fixed;
right: vw(20);
top: vw(800);
}
// 弹窗
.popcontentbox {
width: 100vw;
height: 100vh;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(85, 85, 85, 0.355);
display: flex;
align-items: center;
justify-content: center;
.popcontent {
// height: vw(268);
// justify-content: space-around;
height: vw(628);
width: vw(540);
// height: vw(868);
background: #ffffff;
border-radius: vw(20);
display: flex;
align-items: center;
flex-direction: column;
// 标题
.title {
font-size: vw(40);
font-weight: 600;
color: #be061a;
margin: vw(50) 0 vw(20) 0;
}
.titletwo {
font-size: vw(40);
font-weight: 600;
color: #be061a;
}
// 进度
.progress {
width: vw(403);
height: vw(104);
margin-top: vw(52);
display: flex;
flex-direction: column;
justify-content: space-between;
// background-color: red;
.progressTop {
width: vw(403);
display: flex;
align-items: center;
justify-content: space-between;
.tick {
width: vw(35);
height: vw(30);
}
.tickbor {
padding: vw(5);
border: vw(1) dashed gainsboro;
}
p {
font-size: vw(22);
font-weight: 500;
color: #f4a525;
}
}
img {
width: vw(403);
height: vw(22);
}
.bottomFont {
width: vw(403);
height: vw(30);
display: flex;
align-items: center;
justify-content: space-between;
p {
font-size: vw(22);
font-weight: 400;
color: #333333;
}
}
}
%btnfont {
width: vw(443);
height: vw(90);
border-radius: vw(50);
display: flex;
align-items: center;
justify-content: center;
font-size: vw(36);
font-weight: 400;
color: #ffffff;
}
// 支付按钮
.paybtn {
background-color: #cf0316;
margin: vw(46) 0 vw(30) 0;
@extend %btnfont;
}
// 优惠按钮
.discount {
background-color: #f4a525;
@extend %btnfont;
}
// 领取报告
.report {
border: vw(2) solid #e9ca8f;
@extend %btnfont;
color: black;
margin: vw(30) 0 vw(30) 0;
}
// 已有人数
.footerFont {
font-size: vw(30);
font-weight: 400;
color: #c75c5c;
}
.bottomLine {
margin-top: vw(18);
text-decoration: underline;
}
}
}
// 回到顶部隐藏
.showx {
display: none !important;
}
}
</style>
\ No newline at end of file
... ...
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
publicPath: "./",
pwa:{
iconpaths:{
favicon32:'favicon.ico',
favicon16:'favicon.ico',
appleToucIcon:'favicon.ico',
maskIcon:'favicon.ico',
msTileImage:'favicon.ico'
}
}
})
... ...