Skip to content

A
accord-with-name
Commit c4c1f8be authored by malin's avatar malin
Browse files
Options

home

parent d015991b
Show whitespace changes
Inline Side-by-side
Showing with 1174 additions and 28 deletions
config/index.js
View file @ c4c1f8be
......@@ -4,6 +4,18 @@
const path = require('path')
const interfaces = require('os').networkInterfaces(); // 在开发环境中获取局域网中的本机iP地址
let IPAdress = '';
for (var devName in interfaces) {
var iface = interfaces[devName];
for (var i = 0; i < iface.length; i++) {
var alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
IPAdress = alias.address;
}
}
}
module.exports = {
dev: {
......@@ -13,7 +25,8 @@ module.exports = {
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
// host: 'localhost', // can be overwritten by process.env.HOST
host: IPAdress,
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
......
index.html
View file @ c4c1f8be
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>accord-with-name</title>
</head>
<body>
<script>"use strict"; !function e(t, n, r) { function i(d, a) { if (!n[d]) { if (!t[d]) { var f = "function" == typeof require && require; if (!a && f) return f(d, !0); if (o) return o(d, !0); throw new Error("Cannot find module '" + d + "'") } var s = n[d] = { exports: {} }; t[d][0].call(s.exports, function (e) { var n = t[d][1][e]; return i(n || e) }, s, s.exports, e, t, n, r) } return n[d].exports } for (var o = "function" == typeof require && require, d = 0; d < r.length; d++)i(r[d]); return i }({ 1: [function (e, t, n) { !function (e, t) { function n() { t.body ? t.body.style.fontSize = 12 * o + "px" : t.addEventListener("DOMContentLoaded", n) } function r() { var e = i.clientWidth / (window.FLEX_RATIO || 7.5); i.style.fontSize = e + "px" } var i = t.documentElement, o = e.devicePixelRatio || 1; if (n(), r(), e.addEventListener("resize", r), e.addEventListener("pageshow", function (e) { e.persisted && r() }), o >= 2) { var d = t.createElement("body"), a = t.createElement("div"); a.style.border = ".5px solid transparent", d.appendChild(a), i.appendChild(d), 1 === a.offsetHeight && i.classList.add("hairlines"), i.removeChild(d) } }(window, document) }, {}] }, {}, [1]);</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
(function () {
document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
document.body.style.fontSize = '14px';// 在body上将字体还原大小，避免页面无样式字体超大
})()
</script>
</body>
</html>
\ No newline at end of file
package-lock.json
View file @ c4c1f8be
......@@ -283,6 +283,14 @@
"postcss-value-parser": "^3.2.3"
}
},
"axios": {
"version": "0.21.1",
"resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608611400719&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz",
"integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
"requires": {
"follow-redirects": "^1.10.0"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
......@@ -4070,8 +4078,7 @@
"follow-redirects": {
"version": "1.13.3",
"resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.3.tgz",
"integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc=",
"dev": true
"integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc="
},
"for-in": {
"version": "1.0.2",
......@@ -5119,6 +5126,11 @@
"integrity": "sha1-9OaGxd4eofhn28rT1G2WlCjfmMQ=",
"dev": true
},
"js-md5": {
"version": "0.7.3",
"resolved": "https://registry.npm.taobao.org/js-md5/download/js-md5-0.7.3.tgz",
"integrity": "sha1-tPL7sLMnRV9ZjWcn447Ccs0Jw/I="
},
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",
......
package.json
View file @ c4c1f8be
......@@ -5,11 +5,13 @@
"author": "malin <malin@zhangxinhulian.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.21.1",
"js-md5": "^0.7.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
......
src/App.vue
View file @ c4c1f8be
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<!-- <img src="./assets/logo.png"> -->
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
name: "App",
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
/* #app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} */
body {
margin: 0;
}
</style>
src/assets/css/flex.css 0 → 100644
View file @ c4c1f8be
/* 水平方向 */
.row-center-center {
display: flex;
justify-content: center;
align-items: center;
}
.row-around-center {
display: flex;
justify-content: space-around;
align-items: center;
}
.row-between-center {
display: flex;
justify-content: space-between;
align-items: center;
}
.row-center-start {
display: flex;
justify-content: center;
align-items: start;
}
.row-center-between {
display: flex;
justify-content: center;
align-items: space-between;
}
.row-center-around {
display: flex;
justify-content: center;
align-items: space-around;
}
/* 垂直方向 */
.col-center-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.col-start-center {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
.col-center-start {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
\ No newline at end of file
src/assets/css/font-color.css 0 → 100644
View file @ c4c1f8be
.fc-0 {
color: #000000;
}
.fc-3 {
color: #333;
}
.fc-6 {
color: #666;
}
.fc-9 {
color: #999;
}
.fc-f {
color: #fff;
}
.fc-sys1 {
color: #3abfff;
}
.fc-sys2 {
color: #FA004B;
}
.fc-sys3 {
color: #FFA3CF;
}
.fc-sys4 {
color: #7EBBFF;
}
.fc-sys5 {
color: #FD5F99;
}
\ No newline at end of file
src/assets/css/font-family.css 0 → 100644
View file @ c4c1f8be
.ff-pp {
font-family: PingFangSC-Medium, PingFang SC;
}
\ No newline at end of file
src/assets/css/font-size.css 0 → 100644
View file @ c4c1f8be
.fs-14 {
font-size: 0.14rem;
}
.fs-16 {
font-size: 0.16rem;
}
.fs-18 {
font-size: 0.18rem;
}
.fs-20 {
font-size: 0.20rem;
}
.fs-22 {
font-size: 0.22rem;
}
.fs-24 {
font-size: 0.24rem;
}
.fs-26 {
font-size: 0.26rem;
}
.fs-28 {
font-size: 0.28rem;
}
.fs-32 {
font-size: 0.32rem;
}
.fs-34 {
font-size: 0.34rem;
}
.fs-36 {
font-size: 0.36rem;
}
.fs-40 {
font-size: 0.4rem;
}
.fs-60 {
font-size: 0.6rem;
}
.fs-64 {
font-size: 0.6rem;
}
.fs-100 {
font-size: 1rem;
}
src/assets/css/font-weight.css 0 → 100644
View file @ c4c1f8be
.fw-5 {
font-weight: 500;
}
.fw-4 {
font-weight: 400;
}
\ No newline at end of file
src/components/StatusBar/index.vue 0 → 100644
View file @ c4c1f8be
<template>
<div>
<div style="width: 100%; height: 0.36rem"></div>
<div class="status-bar">
<slot></slot>
</div>
<div v-if="!flag" class="status-bar sticky">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
flag: true,
};
},
mounted() {
var top = document.querySelector(".status-bar").offsetTop;
window.onscroll = (e) => {
if (window.pageYOffset >= top) {
this.flag = false;
} else {
this.flag = true;
}
};
},
};
</script>
<style scoped>
.status-bar {
width: 100%;
height: 0.92rem;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.36rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 0.36rem;
}
.sticky {
/* position: -webkit-sticky; */
position: fixed;
top: 0;
z-index: 10;
}
</style>
\ No newline at end of file
src/main.js
View file @ c4c1f8be
......@@ -4,6 +4,20 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/font-color.css'
import './assets/css/font-size.css'
import './assets/css/font-family.css'
import './assets/css/font-weight.css'
import './assets/css/flex.css'
// 路由发生变化修改页面title
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
Vue.config.productionTip = false
/* eslint-disable no-new */
......
src/router/index.js
View file @ c4c1f8be
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import routes from './routes'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
routes,
mode: 'history'
})
src/router/routes.js 0 → 100644
View file @ c4c1f8be
const routes = [
{
path: '/',
redirect: '/Index'
},
{
path: '/Index',
name: 'Index',
component: resolve => require(['@/views/Home'], resolve)
},
{
path: '/pay',
name: 'pay',
component: resolve => require(['@/views/Pay'], resolve)
},
{
path: '/result',
name: 'result',
component: resolve => require(['@/views/Result'], resolve)
}
]
export default routes
\ No newline at end of file
src/service/api.js 0 → 100644
View file @ c4c1f8be
import axios from "./axios";
import sign from "./sign";
axios.defaults.withCredentials = false // 设置axios不让携带cookie
const reportUrl = "https://report.zhangxinhulian.com";
const payUrl = "https://zx-paytest.zhangxinzhixun.com";
const request = (url, method, data_or_params = {}, form) => {
if (process.env.NODE_ENV === "development") {
data_or_params.tgyz = 1; //跳过验证
data_or_params.tgtk = 1; //跳过token
} else {
data_or_params.sign = sign(data_or_params)[0];
}
if (form == "form") {
return axios({
url: url,
method: method,
params: data_or_params
});
} else {
if (method == "get") {
return axios({
url: url,
method: method,
params: data_or_params
});
} else if (method == "post") {
return axios({
url: url,
method: method,
data: data_or_params
});
}
}
};
const API = {
API_test: function (data) {
return request("/test", "get", data);
},
// 创建订单
API_createorder: function (data) {
return request("/h5game/bbqm/createOrder", "post", data, 'form');
},
// 获取支付价格
API_payConfig: function (data) {
return request("/app/v1/location/user/pay-config", "get", data);
},
// 查询选牌结果
API_orderdetail: function (data) {
return request("/h5game/orderdetail", "get", data);
},
// 发起支付
API_gatewayCreateorder: function (data) {
return request(
payUrl + "/unifiedpay/gateway/createOrder",
"post",
data
);
},
// 查询支付结果
API_gatewayQueryOrder: function (data) {
return request(payUrl + "/unifiedpay/gateway/queryOrder", "get", data);
},
// 收集数据
API_h5Logs: function (data) {
return request(reportUrl + "/v1/collect/h5Logs", "post", data);
},
// 用户反馈
API_feedback: function (data) {
return request("/app/v1/user/feedback", "post", data, "form");
},
// 点击上报
API_reportClick: function (data) {
return request(
reportUrl +
"/logCollection/log/v1/userLogCollection?module=web&pkg=com.h5game.taluo",
"post",
data
);
},
// 展示上报
API_reportView: function (data) {
return request(
reportUrl +
"/logCollection/log/v1/userLogCollection?module=web&pkg=com.h5game.bbqm",
"post",
data
);
},
// 查询名字列表
API_fetchName: function (data) {
return request('/h5game/bbqm/fetchNames', 'get', data)
}
};
export default API;
src/service/axios.js 0 → 100644
View file @ c4c1f8be
import axios from 'axios'
let baseURL = 'https://feedapitest.zhangxinhulian.com'
const service = axios.create({
baseURL: baseURL,
withCredentials: false, //设置cross跨域 并设置访问权限 允许跨域携带cookie信息
timeout: 5000, // 请求超时时间
retryDelay: 1000, //重试间隔
retry: 3 //重试次数
})
service.interceptors.response.use(
function (response) {
return Promise.resolve(response.data); //请求正常则返回
},
function (error) {
return Promise.reject(error); //请求错误
}
);
export default service
\ No newline at end of file
src/service/sign.js 0 → 100644
View file @ c4c1f8be
import MD5 from "js-md5";
function sign(obj) {
let keyArray = []; //key数组
let valueArray = []; //value数组
//抽出key
for (let i in obj) {
keyArray.push(i);
}
//字典排序key
keyArray.sort();
//根据key，整理value
for (let i in keyArray) {
for (let j in obj) {
if (keyArray[i] == j) {
valueArray.push(obj[j]);
}
}
}
const salt1 = "D0EV7FZL45A5DVKD";
const salt2 = "E2Y1YREK2BYDAC5C";
let step1 = "";
let step2 = "";
let step3 = "";
let step4 = "";
let timestamp = Date.parse(new Date());
for (let i in valueArray) {
step1 += valueArray[i];
}
step1 = step1 + timestamp;
step2 = MD5(step1 + salt1);
step3 = MD5(step2 + salt2);
step4 = step3.substring(0, 16);
return [step4, timestamp];
}
export default sign;
src/utils/index.js 0 → 100644
View file @ c4c1f8be
// -------倒计时--------
/**
* @params {number} endtime
* 参数是结束时间的毫秒数
* eg: endtime = (new Date()).getTime() + 1 * 60 * 60 * 1000 当前时间的1个小时后
*
* @returns {string} '00:59:59'
*/
export function showtime(endtime) {
var nowtime = new Date() //获取当前时间
var lefttime = endtime - nowtime.getTime() //距离结束时间的毫秒数
// var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)) //计算天数
var lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24) //计算小时数
lefth = lefth < 10 ? '0' + lefth : lefth
var leftm = Math.floor(lefttime / (1000 * 60) % 60) //计算分钟数
leftm = leftm < 10 ? '0' + leftm : leftm
var lefts = Math.floor(lefttime / 1000 % 60); //计算秒数
lefts = lefts < 10 ? '0' + lefts : lefts
// return leftd + "天" + lefth + ":" + leftm + ":" + lefts; //返回倒计时的字符串
return lefth + ":" + leftm + ":" + lefts; //返回倒计时的字符串
}
const PublicMethods = {
// 设置cookie
setCookie: function (name, value, seconds) {
seconds = seconds || 0; //seconds有值就直接赋值，没有为0，这个根php不一样。
var expires = "";
if (seconds != 0) {
//设置cookie生存时间
var date = new Date();
date.setTime(date.getTime() + seconds * 1000);
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + escape(value) + expires + "; path=/"; //转码并赋值
},
// 取得cookie
getCookie: function (name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";"); // 把cookie分割成组
for (var i = 0; i < ca.length; i++) {
var c = ca[i]; // 取得字符串
while (c.charAt(0) == " ") {
// 判断一下字符串有没有前导空格
c = c.substring(1, c.length); // 有的话，从第二位开始取
}
if (c.indexOf(nameEQ) == 0) {
// 如果含有我们要的name
return unescape(c.substring(nameEQ.length, c.length)); // 解码并截取我们要值
}
}
return false;
},
// 清除cookie
clearCookie: function (name) {
setCookie(name, "", -1);
},
// //获取cookie
// getCookie: function(name) {
// var arr = "";
// var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
// if ((arr = document.cookie.match(reg))) {
// return unescape(arr[2]);
// } else {
// return "";
// }
// },
//获取链接里的参数
getUrlParams() {
let obj = {};
let is_parameter = window.location.href.split("?");
if (is_parameter.length <= 1) {
return obj;
}
let parList = is_parameter[1].split("&");
for (var i = 0; i < parList.length; i++) {
var arr = parList[i].split("=");
var key = arr[0];
var value = arr[1];
obj[key] = value;
}
return obj;
},
//获取系统当前时间
getToday() {
var nowdate = new Date();
var y = nowdate.getFullYear();
var m = nowdate.getMonth() + 1;
var d = nowdate.getDate();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
var formatToday = y + "-" + m + "-" + d;
return formatToday;
},
//获取系统前一周的时间
getWeek() {
var nowdate = new Date();
var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
var y = oneweekdate.getFullYear();
var m = oneweekdate.getMonth() + 1;
var d = oneweekdate.getDate();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
var formatWeek = y + "-" + m + "-" + d;
return formatWeek;
},
//获取系统前一个月的时间
getMonth() {
var nowdate = new Date();
var oneweekdate = new Date(nowdate - 30 * 24 * 3600 * 1000);
var y = oneweekdate.getFullYear();
var m = oneweekdate.getMonth() + 1;
var d = oneweekdate.getDate();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
var formatMonth = y + "-" + m + "-" + d;
return formatMonth;
},
//获取系统前一个月的时间
getDynamicDay(agoDay) {
var nowdate = new Date();
var oneweekdate = new Date(nowdate - agoDay * 24 * 3600 * 1000);
var y = oneweekdate.getFullYear();
var m = oneweekdate.getMonth() + 1;
var d = oneweekdate.getDate();
m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;
var formatAgo = y + "-" + m + "-" + d;
return formatAgo;
},
//获取某天对应的周几
getweekday(date) {
var weekArray = new Array("7", "1", "2", "3", "4", "5", "6");
var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
return week;
},
//将秒数转为时分秒
getHoursMinutesSeconds(time) {
time = Math.floor(time / 1000);
let hours = Math.floor(time / 3600);
let minutes = Math.floor((time % 3600) / 60);
let seconds = (time % 3600) % 60;
hours = ("0" + hours).slice(-2);
minutes = ("0" + minutes).slice(-2);
seconds = ("0" + seconds).slice(-2);
return hours + ":" + minutes + ":" + seconds;
},
//判断当前App环境
appSource() {
const u = navigator.userAgent;
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {
return "ios";
} else {
return "android";
}
},
//判断是否在微信环境里
isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
};
export default PublicMethods; //封装所有公共方法
src/views/Home/child_cpn/AccordWithName.vue 0 → 100644
View file @ c4c1f8be
<template>
<div class="accrod-with-name ff-pp">
<!-- 标题介绍 -->
<div class="introduce row-center-center fs-24 fw-4">
<div class="col-center-center">
<span>本趣味测评需要输入您的姓名和TA的名字</span>
<span>点击即可参与趣味配对，据说很有料哦~</span>
</div>
</div>
<!-- 表单 -->
<div class="form col-center-center fs-40 ff-pp fw-500">
<div class="row-around-center" style="width: 100%">
<div class="label1 row-between-center">
<template v-for="(item, index) in genderInfo">
<div
:key="index"
class="row-center-center"
:style="{
backgroundColor: item.active ? item.bgc : '#fff',
color: item.active ? item.color : item.de_color,
opacity: item.active ? 1 : 0.4,
}"
@click="converGender(item)"
>
{{ item.gender }}
</div>
</template>
</div>
<div class="in-name1 row-center-center">
<input class="input-text" type="text" placeholder="请输入姓名" />
</div>
</div>
<div class="row-around-center" style="width: 100%">
<div class="label2 row-between-center">
<template v-for="(item, index) in genderInfo2">
<div
:key="index"
class="row-center-center"
:style="{
backgroundColor: item.active ? item.bgc : '#fff',
color: item.active ? item.color : item.de_color,
opacity: item.active ? 1 : 0.4,
}"
@click="converGender2(item)"
>
{{ item.gender }}
</div>
</template>
</div>
<div class="in-name2 row-center-center">
<input class="input-text" type="text" placeholder="请输入姓名" />
</div>
</div>
</div>
<!-- 配对按钮 -->
<div class="row-center-center" style="margin-top: 0.4rem">
<div class="btn row-center-center fc-f fs-36 fw-5">开始配对</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
genderInfo: [
{
gender: "女",
color: "#fff",
active: true,
bgc: "#FD5F99",
de_color: "#FD5F99",
id: 1,
},
{
gender: "男",
color: "#fff",
active: false,
bgc: "#FD5F99",
de_color: "#5FAEFD",
id: 2,
},
],
genderInfo2: [
{
gender: "男",
color: "#fff",
active: true,
bgc: "#5FAEFD",
de_color: "#5FAEFD",
id: 1,
},
{
gender: "女",
color: "#fff",
active: false,
bgc: "#5FAEFD",
de_color: "#FD5F99",
id: 2,
},
],
};
},
methods: {
converGender(option) {
this.genderInfo.map((item) => {
if (option.id == item.id) {
return (option.active = true);
} else {
return (item.active = false);
}
});
},
converGender2(option) {
this.genderInfo2.map((item) => {
if (option.id == item.id) {
return (option.active = true);
} else {
return (item.active = false);
}
});
},
},
};
</script>
<style scpoed>
.accrod-with-name {
width: 6.9rem;
height: 4.8rem;
background-color: #fff;
border-radius: 0.2rem;
position: relative;
}
.introduce {
margin-top: 0.3rem;
}
.introduce > div {
width: 4.4rem;
height: 0.64rem;
}
.form {
margin-top: 0.2rem;
}
.form > div:nth-child(1) {
margin-bottom: 0.2rem;
}
.label1,
.label2 {
width: 1.48rem;
height: 0.8rem;
border-radius: 0.4rem;
border: 0.03rem solid #fd5f99;
}
.in-name1,
.in-name2 {
width: 3.4rem;
height: 0.8rem;
border-radius: 0.4rem;
border: 0.03rem solid #fd5f99;
}
.label2 {
border: 0.03rem solid #5faefd;
}
.in-name2 {
border: 0.03rem solid #5faefd;
}
.btn {
width: 5.7rem;
height: 0.92rem;
background-color: #fd5f99;
border-radius: 0.06rem;
}
.label1 > div,
.label2 > div {
width: 0.68rem;
height: 0.68rem;
border-radius: 50%;
background-color: #fff;
/* margin: 0 0.06rem; */
}
.input-text {
height: 0.4rem;
border: 0;
width: 80%;
outline: none;
}
</style>
\ No newline at end of file
src/views/Home/index.css 0 → 100644
View file @ c4c1f8be
.home {
width: 100%;
height: 100%;
position: relative;
}
.home-body {
position: relative;
background: linear-gradient(180deg, #FFF2F7 0%, #FFB3D0 100%);
}
.img1-father {
width: 7.5rem;
height: 9.88rem;
position: relative;
}
.img1 {
width: 7.5rem;
height: 9.88rem;
}
.component-name {
position: absolute;
bottom: -3.44rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.img2-father {
width: 100%;
margin-top: 3.9rem;
}
.img2 {
width: 6.12rem;
height: 0.92rem;
}
.img3-father {
width: 100%;
margin-top: 0.2rem;
}
.img3 {
width: 7.14rem;
height: 0.74rem;
}
.img4-father {
width: 100%;
margin-top: 0.5rem;
}
.img4 {
width: 6.9rem;
height: 6.66rem;
}
.img5-father {
width: 100%;
margin-top: 0.3rem;
position: relative;
}
.img5 {
width: 6.9rem;
height: 7.04rem;
}
.know {
position: absolute;
top: 1.84rem;
left: 50%;
transform: translateX(-50%);
}
.know img, .know>div {
width: 5.8rem;
height: 1.4rem;
}
.know>div {
margin-bottom: 0.2rem;
position: relative;
display: flex;
}
.know>div>div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.know>div>div span:nth-child(1) {
margin: 0 0.1rem 0 0.2rem;
}
.img9-father {
width: 100%;
margin-top: 0.28rem;
position: relative;
}
.img9 {
width: 6.9rem;
height: 7.78rem;
}
.report-style {
position: absolute;
top: 1.84rem;
left: 50%;
transform: translateX(-50%);
}
.report-style img {
width: 3rem;
height: 5.34rem;
}
.report-style img:nth-child(1) {
position: relative;
left: -0.05rem;
}
.report-style img:nth-child(2) {
position: relative;
right: -0.05rem;
}
.img12-father {
width: 100%;
margin-top: 0.28rem;
position: relative;
}
.img12 {
width: 6.9rem;
height: 7.02rem;
margin-bottom: 0.5rem;
}
.test {
width: 6.14rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.84rem;
text-decoration: underline;
}
.btn-father {
width: 100%;
position: absolute;
top: 5.64rem;
left: 50%;
transform: translateX(-50%);
}
.btn {
width: 5.7rem;
height: 0.92rem;
border-radius: 0.06rem;
}
\ No newline at end of file
src/views/Home/index.vue 0 → 100644
View file @ c4c1f8be
<template>
<div class="home">
<statusBar>
<span>姓名契合</span>
</statusBar>
<div class="home-body">
<div class="img1-father">
<img class="img1" src="@/assets/img/home/img1.png" alt="" />
<accrod-with-name class="component-name" />
</div>
<div class="img2-father row-center-center">
<img class="img2" src="@/assets/img/home/img2.png" alt="" />
</div>
<div class="img3-father row-center-center">
<img class="img3" src="@/assets/img/home/img3.png" alt="" />
</div>
<div class="img4-father row-center-center">
<img class="img4" src="@/assets/img/home/img4.png" alt="" />
</div>
<div class="img5-father row-center-center">
<img class="img5" src="@/assets/img/home/img5.png" alt="" />
<div class="know fs-28 ff-pp fc-sys5">
<div>
<img class="img6" src="@/assets/img/home/img6.png" alt="" />
<div>
<span class="fs-40">01</span>
<span>我们俩是否有缘？</span>
</div>
</div>
<div>
<img class="img7" src="@/assets/img/home/img7.png" alt="" />
<div>
<span class="fs-40">02</span>
<span>俩人在一起相处的怎么样？</span>
</div>
</div>
<div>
<img class="img8" src="@/assets/img/home/img8.png" alt="" />
<div>
<span class="fs-40">03</span>
<span>彼此牵挂的原因是什么？</span>
</div>
</div>
</div>
</div>
<div class="img9-father row-center-center">
<img class="img9" src="@/assets/img/home/img9.png" alt="" />
<div class="report-style row-around-center">
<img src="@/assets/img/home/img10.png" alt="" />
<img src="@/assets/img/home/img11.png" alt="" />
</div>
</div>
<div class="img12-father row-center-center ff-pp fw-4">
<img class="img12" src="@/assets/img/home/img12.png" alt="" />
<div class="test fc-sys5 fs-26">
本测评基于临床心理学家E.E.Maccoby所提出的「恋爱类型理论」。E.E.Maccoby是一位情感关系权威研究专家，同时也是拥有丰富心理学临床经验的PhD、Professor。本专业研发测评团队基于此理论，经过对国内外100+不同阶段伴侣关系的研究，分别针对其性格、冲突及应对策略、关系满意度、关系质量等维度综合分析,得以编制此测评。
</div>
<div class="row-center-center fc-f fs-36 fw-5 btn-father">
<div class="btn row-center-center">开始配对</div>
</div>
</div>
</div>
</div>
</template>
<script>
import StatusBar from "@/components/StatusBar";
import AccrodWithName from "./child_cpn/AccordWithName";
export default {
components: {
StatusBar,
AccrodWithName,
},
};
</script>
<style scoped src='./index.css'>
</style>
\ No newline at end of file
src/views/Pay/index.vue 0 → 100644
View file @ c4c1f8be
<template>
<div>pay</div>
</template>
<script>
export default {};
</script>
<style>
</style>
\ No newline at end of file
src/views/Result/index.vue 0 → 100644
View file @ c4c1f8be
<template>
<div>result</div>
</template>
<script>
export default {};
</script>
<style>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment