Skip to content

A
antaile-web
Commit 00610067 by wangyalan-git
Options

bug修改

parent 14b238d9
Showing with 1324 additions and 1047 deletions
public/favicon.ico
No preview for this file type
public/index.html
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<title>安泰乐生命纪念馆</title>
<style>
body::-webkit-scrollbar {
display: none;
......@@ -13,13 +13,6 @@
</style>
</head>
<body class="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>
......
src/api/index.js
......@@ -64,6 +64,33 @@ export function getUserInfo(params) {
params,
});
}
// 微信二维码地址
export function wechatLogin(params) {
return request({
url: "/wx/getQrcodeUrl",
method: "get",
params,
});
}
// 微信二维码回调地址
export function getQrcodeAndState(params) {
return request({
url: "/wx/getQrcodeAndState",
method: "get",
params,
});
}
// 新用户微信扫码登录，绑定手机号密码
export function wechatBindPhone(data) {
return request({
url: "/wx/insertAtlUserByWxLogin",
method: "POST",
data,
});
}
// 退出登录
export function loginOut(params) {
return request({
......
src/assets/images/198A5253.png deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/images/appBg.png
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/images/denglu.png
src/assets/images/denglu.png

1.65 MB | W: | H:

src/assets/images/denglu.png

79.3 KB | W: | H:

src/assets/images/denglu.png
src/assets/images/denglu.png
src/assets/images/denglu.png
src/assets/images/denglu.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/hallw.png
src/assets/images/hallw.png

1.76 KB | W: | H:

src/assets/images/hallw.png

1.77 KB | W: | H:

src/assets/images/hallw.png
src/assets/images/hallw.png
src/assets/images/hallw.png
src/assets/images/hallw.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/logo.png
src/assets/images/logo.png

6.06 KB | W: | H:

src/assets/images/logo.png

4.17 KB | W: | H:

src/assets/images/logo.png
src/assets/images/logo.png
src/assets/images/logo.png
src/assets/images/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/spot.png
src/assets/images/spot.png

14.6 KB | W: | H:

src/assets/images/spot.png

14.6 KB | W: | H:

src/assets/images/spot.png
src/assets/images/spot.png
src/assets/images/spot.png
src/assets/images/spot.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/图片/IMG_2622.JPG deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/images/图片/appBg.png deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/styles/element-variables.scss
......@@ -237,7 +237,7 @@ dl {
width: 200px;
height: 60px;
color: #fff;
font-size: 22px;
font-size:18px;
border-radius: 37px;
}
button + button {
......@@ -251,10 +251,11 @@ dl {
}
}
}
// 登录页
.login-container {
.el-input {
display: inline-block;
height: 66px;
height: 50px;
border-radius: 7px;
// width: 85%;
......@@ -265,7 +266,7 @@ dl {
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 66px;
height: 50px;
&:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important;
......@@ -325,3 +326,22 @@ dl {
color: #B57631;
}
}
.special-color {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
color: linear-gradient(to right, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
position: relative;
}
\ No newline at end of file
src/components/AgreeModal/index.vue 0 → 100644
<template>
<el-dialog :visible.sync="visible" :title="title" center width="50%">
<div class="my-form">
<div class="show-content" v-html="detail.description"></div>
<div class="small-btn">
<el-button type="primary" @click.native.prevent="handleFinishCommit"
>已阅读
</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import { getProtocol } from "@/api/index";
// 添加类型分类
export default {
name: "agreeModal",
data() {
return {
type: null,
visible: false,
title: null,
loading: false,
detail: {
description: null,
},
};
},
created() {},
methods: {
show(data, name) {
this.type = data;
this.visible = true;
this.loading = false;
this.title = name;
this.getDetail();
},
getDetail() {
getProtocol({ type: this.type }).then((res) => {
console.log(res);
this.detail = res.data;
});
},
submit() {
// 提交保存
this.$refs.refuseForm.validate((valid) => {
if (valid) {
// 验证通过
this.loading = true;
// updateMemberPhone(this.model).then(res => {
// this.loading = false
// this.$emit('ok')
// this.close()
// }).catch(err => {
// this.loading = false
// })
}
});
},
close() {
this.$emit("close");
this.visible = false;
},
},
};
</script>
<style scoped>
.show-content {
height: 25vw;
overflow: auto;
border: 2px solid #e0e0e0;
padding: 30px;
}
.show-content::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.show-content::-webkit-scrollbar-track {
background: #f4f4f4;
border-radius: 0;
border-left: 2px solid #e0e0e0;
}
.show-content::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
.show-content::-webkit-scrollbar-thumb:hover {
background: #c8c8c8;
}
.show-content::-webkit-scrollbar-corner {
background: #179a16;
}
.my-form .small-btn{
margin-top: 20px;
}
</style>
\ No newline at end of file
src/components/CustomFooter.vue
<template>
<div class="footer">
<el-row :gutter="20" type="flex" justify="space-between">
<el-row :gutter="30" type="flex" justify="space-between">
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-company">
<div class="flex">
<img src="@/assets/images/antail.png" alt="" />
<p class="show-name">安泰乐（厦门）集团有限公司</p>
</div>
<p class="show-intro">
安泰乐集团成立于2012年，中国总部位于厦门是
一家专注于中国生命关怀产业，为生命纪念馆提
供设计、装修、管理、服务，一站式解决方案的 专业化管理服务公司。
安泰乐集团成立于2012年，中国总部位于厦门是一家专注于中国生命关怀产业，为生命纪念馆提供设计、装修、管理、服务，一站式解决方案的专业化管理服务公司。
</p>
<p class="show-tip">©️2021ATL Group.All rights reserved</p>
<p class="show-tip">闽ICP备16020886号-3</p>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-memorials">
<p class="show-name">安泰乐生命纪念馆</p>
<el-row :gutter="10">
<el-row :gutter="10" class="show-list">
<el-col :span="12" v-for="(item, index) in memorials" :key="index">
<div class="show-item">
<img src="@/assets/images/hallw.png" alt="" />
......@@ -26,14 +27,14 @@
</el-col>
</el-row>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4" class="show-app">
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-app">
<div>
<img
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/whcbqhn.png"
alt=""
/>
<p>
<img src="@/assets/images/WeChat (2).png" alt="" />
<img src="@/assets/images/WeChatIcon.png" alt="" />
关注公众号
</p>
</div>
......@@ -52,16 +53,16 @@
<div class="address">
<img src="@/assets/images/clouds.png" alt="" />
<div>
<p class="show-name">云中祠信息科技</p>
<p>地址：中国福建省厦门市湖里区同安 商务大厦1号楼9层</p>
<p>电话：0592-5539618</p>
<p>邮件：mail@atlgroup-asia.com</p>
<p>技术支持：云中祠信息科技</p>
</div>
</div>
<div class="show-num">
<img src="@/assets/images/embassy.png" alt="" />
<div>
<p>{{toThousands(totalNum || 0)}}</p>
<p>{{ toThousands(totalNum || 0) }}</p>
<p class="show-tip">已建馆人数</p>
</div>
</div>
......@@ -76,7 +77,7 @@ export default {
props: {},
data() {
return {
totalNum:0,
totalNum: 0,
memorials: [
{ name: "天竺生命纪念馆", address: "福建晋江" },
{ name: "南宝生命纪念馆", address: "江西南昌" },
......@@ -87,44 +88,45 @@ export default {
],
};
},
mounted(){
mounted() {
this.$store
.dispatch("selectOfficialWebsiteAtlTime", {
// isCommend: 1,
page: { pageNum: 1, pageSize: 15 },
})
.then((res) => {
this.totalNum = res.data.total + 10000
this.totalNum = res.data.total + 10000;
})
.catch(() => {
});
.catch(() => {});
},
methods:{
methods: {
toThousands(num) {
num = (num || 0).toString();
let number = 0,
floatNum = '',
intNum = '';
floatNum = "",
intNum = "";
// 判断是否有小数位，有则截取小数点后的数字
if (num.indexOf('.') > 0) {
number = num.indexOf('.'); // 获取小数点出现的位置
if (num.indexOf(".") > 0) {
number = num.indexOf("."); // 获取小数点出现的位置
floatNum = num.substr(number); // 截取arr.substr(form, length)
intNum = num.substring(0,number); // 截取arr.substring(start, end)
intNum = num.substring(0, number); // 截取arr.substring(start, end)
} else {
intNum = num;
}
let result = [],
counter = 0;
intNum = intNum.split('');
intNum = intNum.split("");
// 利用3的倍数，向数组插入','
for (let i = intNum.length - 1; i >= 0; i--) {
counter++;
result.unshift(intNum[i]);
if (!(counter % 3) && i != 0) { result.unshift(','); }
}
return result.join('') + floatNum || '';
if (!(counter % 3) && i != 0) {
result.unshift(",");
}
}
return result.join("") + floatNum || "";
},
},
};
</script>
......@@ -132,10 +134,17 @@ export default {
.footer {
background: #fff;
text-align: left;
padding: 40px 50px 90px;
padding: 20px 30px 20px;
color: #999;
font-size: 16px;
>div{
font-size: 14px;
.flex {
justify-content: flex-start;
align-items: flex-end;
img {
margin-right: 15px;
}
}
> div {
flex-wrap: wrap;
}
}
......@@ -146,48 +155,58 @@ export default {
}
.show-intro {
color: #999;
font-size: 16px;
margin-bottom: 20px;
font-size: 14px;
margin-top: 10px;
margin-bottom: 90px;
line-height: 24px;
letter-spacing: 2px;
}
}
.show-memorials {
margin-top: 68px;
margin-top: 28px;
flex: 1;
.show-list {
margin-top: 17px;
}
.show-item {
display: flex;
align-items: center;
margin-bottom: 5px;
margin-bottom: 10px;
p:last-child {
color: #caa774;
font-size: 16px;
font-size: 14px;
}
img {
width: 55px;
height: 55px;
width: 40px;
height: 40px;
object-fit: contain;
margin-right: 10px;
}
}
}
.show-app {
margin-top: 60px;
margin-top: 20px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
// justify-content: space-between;
> div {
margin-right: 40px;
}
img {
width: 106px;
height: 106px;
width: 150px;
height: 150px;
}
p {
color: #020202;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 23px;
height: 27px;
width: 20px;
height: 23px;
margin-right: 5px;
object-fit: contain;
}
......@@ -197,6 +216,7 @@ export default {
.address {
display: flex;
line-height: 30px;
padding-top: 15px;
img {
width: 134px;
height: 102px;
......@@ -204,27 +224,31 @@ export default {
}
}
.show-num {
margin-top: 30px;
// margin-top: 30px;
display: flex;
justify-content: center;
// justify-content: center;
align-items: center;
color: #333;
font-size: 20px;
font-size: 18px;
padding-left: 35px;
padding-top: 70px;
img {
width: 80px;
height: 58px;
margin-right: 20px;
margin-right: 35px;
}
}
}
.show-name {
color: #333;
font-size: 20px;
font-size: 18px;
margin: 5px 0 10px 0;
// font-weight: bold;
}
.show-tip {
font-size: 16px;
font-size: 14px;
color: #999;
line-height: 30px;
letter-spacing: 2px;
}
</style>
src/components/CustomHeader.vue
<template>
<div class="header">
<div style="display: flex; flex: 1" v-if="deviceType == 2">
<router-link :to="{ name: 'index' }"
><img src="@/assets/images/logo.png" alt="" class="logo"
/></router-link>
<router-link :to="{ name: 'index' }" class="show-logo">
<img src="@/assets/images/logo.png" alt="" class="logo" />
<span class="show-title">安泰乐生命纪念馆</span>
</router-link>
<ul class="right-ul">
<li>
<router-link :to="{ name: 'timePeriod' }">纪念馆列表</router-link>
......@@ -23,10 +24,11 @@
{{ $store.state.username }}
</li>
<li v-else>
<img src="@/assets/images/Signin.png" alt="" class="avatar" /><router-link
:to="{ name: 'login' }"
>登录</router-link
>
<img
src="@/assets/images/Signin.png"
alt=""
class="avatar"
/><router-link :to="{ name: 'login' }">登录</router-link>
</li>
<li v-if="deviceType == 2">
<router-link :to="{ path: '/agreement', query: { type: 3 } }"
......@@ -94,11 +96,22 @@ export default {
> .logo {
margin-left: 38px;
}
.show-logo{
display: flex;
align-items: center;
}
.logo {
width: 200px;
margin-right: 30px;
width: 50px;
height: 50px;
margin-right: 5px;
object-fit: contain;
}
.show-title{
color:#B9782D;
font-size: 18px;
margin-right: 50px;
font-weight: bold;
}
}
.header .right-ul {
display: flex;
......
src/components/PreviewModal/index.vue 0 → 100644
<template>
<el-dialog :visible.sync="visible" :title="title" center width="80%">
<div class="container">
<div class="show-flex">
<div class="show-preview">
<viw-modal :content="webUrl"></viw-modal>
<!-- <div class="show-tab">
<p>上一位</p>
<p>下一位</p>
</div> -->
</div>
<div class="right">
<div class="show-right">
<div class="show-erwei">
<div class="qrcode" id="qrcode" ref="qrcode"></div>
手机扫码观看
</div>
<div style="flex: 1">
<p class="show-title">{{ detail.aboutName || "" }}</p>
<p class="show-subtitle">
{{ detail.name || "" }}
</p>
</div>
</div>
<div class="show-recommend">
<p>推荐浏览</p>
<div class="show-list">
<router-link
:to="{ path: '/preview', query: { id: item.id } }"
v-for="(item, index) in list"
:key="index"
>
<img :src="item.coverUrl" alt="" />
</router-link>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import viwModal from "@/components/viwModal";
import QRCode from "qrcodejs2"; // 引入插件
import {
selectRandomAtlTime,
timeDetails,
isMyself,
addReadCount,
} from "@/api/index";
// 添加类型分类
export default {
name: "PreviewModal",
components: {
viwModal,
},
data() {
return {
list: [],
detail: {
aboutName: "",
name: "",
},
webUrl: "",
type: null,
visible: false,
title: null,
loading: false,
};
},
created() {},
methods: {
show(data) {
this.type = data;
this.visible = true;
this.loading = false;
this.init(data);
},
init(id) {
console.log("id", id);
if (id) {
this.id = id;
this.timeDetails();
this.addReadCount();
this.getWebUrl();
this.selectRandomAtlTime();
} else {
this.$router.go(-1);
}
},
qrcode() {
new QRCode("qrcode", {
width: 100, // 设置宽度，单位像素
height: 100, // 设置高度，单位像素
colorLight: "#fff",
text: this.webUrl, // 设置二维码内容或跳转地址
});
},
addReadCount() {
addReadCount({ id: this.id, type: 1 }).then(() => {});
},
timeDetails() {
timeDetails({ timeId: this.id }).then((res) => {
this.detail = res.data;
});
},
getWebUrl() {
isMyself({ id: this.id, type: 0 }).then((res) => {
if (res.data == true) {
this.webUrl =
"https://go.yunzhongci.com/?timerid=" +
this.id +
"&token=" +
this.$store.state.token +
"&isMy=true";
} else {
this.webUrl =
"https://go.yunzhongci.com/?timerid=" +
this.id +
"&token=" +
this.$store.state.token;
}
console.log("webUrl", this.webUrl);
if (document.getElementById("qrcode").innerHTML) {
document.getElementById("qrcode").innerHTML = "";
}
this.qrcode();
});
},
selectRandomAtlTime() {
selectRandomAtlTime().then((res) => {
console.log(res);
this.list = res.data;
});
},
submit() {
// 提交保存
this.$refs.refuseForm.validate((valid) => {
if (valid) {
// 验证通过
this.loading = true;
// updateMemberPhone(this.model).then(res => {
// this.loading = false
// this.$emit('ok')
// this.close()
// }).catch(err => {
// this.loading = false
// })
}
});
},
close() {
this.$emit("close");
this.visible = false;
},
},
};
</script>
<style lang="scss" scoped>
.show-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
width: 100%;
margin: 0 auto;
padding: 5%;
background: url("~@/assets/images/Exhibitionbg.png") no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
}
.show-preview {
width: 40%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
.show-tab {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 20px;
p {
writing-mode: tb-rl;
background: #e9e9e9;
font-size: 16px;
color: #999;
padding: 10px 5px;
}
p:first-child {
margin-bottom: 50px;
}
}
}
.right {
width: 50%;
}
.show-right {
display: flex;
.show-erwei {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 3%;
color: #666;
font-size: 14px;
.qrcode {
width: 100px;
height: 100px;
padding: 10px;
background: #fff;
margin-bottom: 10px;
}
}
.show-title {
color: #5d6063;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.show-subtitle {
width: 70%;
color: #666666;
line-height: 36px;
letter-spacing: 2px;
font-size: 14px;
}
}
.show-recommend {
p {
color: #333;
font-size: 20px;
font-weight: bold;
margin: 50px 0 20px;
}
.show-list {
display: flex;
> a {
width: 150px;
margin: 10px;
border-radius: 10px;
img {
width: 100%;
}
}
}
}
</style>
\ No newline at end of file
src/components/viwModal.vue
......@@ -6,17 +6,8 @@
position="bottom"
:zIndex="3000"
> -->
<div
class="announcement-mobile"
>
<div v-if="content" class="ql-editor">
<iframe
style="border:none"
:width="375"
:height="711"
v-bind:src="content"
></iframe>
</div>
<div class="announcement-mobile">
<iframe v-if="content" style="border: none" :width="300" height="500" v-bind:src="content"></iframe>
</div>
<!-- </Drawer> -->
</template>
......@@ -27,25 +18,24 @@ export default {
props: {
content: String,
formRef: {
type: Object
type: Object,
},
visible: {
type: Boolean,
default: false
default: false,
},
isMobilePreview: {
type: Boolean,
default: false
}
default: false,
},
},
components: {
// Drawer
},
data(){
return {
}
}
}
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.announcement-preview {
......@@ -53,11 +43,11 @@ export default {
margin: 0 auto;
}
.announcement-mobile {
width: 375px;
height: 800px;
width: 300px;
height: 500px;
// padding: 80px 20px;
background: url('~@/assets/images/Mobilephonebox.png') no-repeat;
background-size: 100%;
background: url("~@/assets/images/Mobilephonebox.png") no-repeat;
background-size: 100% 100%;
padding: 20px;
}
</style>
......
src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from './store';
import store from "./store";
import ElementUI from "element-ui";
import VueLazyload from 'vue-lazyload'
import VueLazyload from "vue-lazyload";
import "lib-flexible";
import "@/assets/styles/element-variables.scss";
import animated from "animate.css"; // npm install animate.css --save安装，在引入
......@@ -14,12 +14,44 @@ Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueLazyload, {
preLoad: 1.2,
error: require('@/assets/images/antail.png'),
loading: require('@/assets/images/antail.png'),
attempt: 1
})
Vue.component('CustomHeader',CustomHeader)
Vue.component('CustomFooter',CustomFooter)
error: require("@/assets/images/antail.png"),
loading: require("@/assets/images/antail.png"),
attempt: 1,
});
Vue.directive("class", {
inserted: function(el, binding) {
console.log("el", binding);
// 聚焦元素
binding.addClass = () => {
const { top } = el.getBoundingClientRect();
const h =
document.documentElement.clientHeight || document.body.clientHeight;
if (top < h - 200) {
el.className = binding.value;
if (binding.addClass) {
window.removeEventListener("scroll", binding.addClass);
}
} else {
if (binding.addClass) {
window.removeEventListener("scroll", binding.addClass);
}
}
};
window.addEventListener("scroll", binding.addClass, true);
binding.addClass();
},
unbind: function(el, binding) {
if (binding.addClass) {
window.removeEventListener("scroll", binding.addClass);
console.log("取消事件绑定");
}
},
});
Vue.component("CustomHeader", CustomHeader);
Vue.component("CustomFooter", CustomFooter);
import common from "@/utils/commonFunctions";
Vue.prototype.common = common; // 公共函数
......
src/router/index.js
......@@ -22,17 +22,22 @@ const routes = [
{
path: '/register',
name: 'register',
component: () => import('@/views/Login/Register/register')
component: () => import('@/views/Login/Register/index')
},
{
path: '/findPassword',
name: 'findPassword',
component: () => import('@/views/Login/findPassword')
component: () => import('@/views/Login/FindPassword/index')
},
{
path: '/bindPage',
name: 'bindPage',
component: () => import('@/views/Login/BindPage/index')
},
{
path: '/agreement',
name: 'agreement',
component: () => import('@/views/Login/agreement')
component: () => import('@/views/Agreement/index')
},
{
path: '/appPage',
......@@ -62,7 +67,7 @@ const routes = [
const router = new VueRouter({
mode: 'history',
// mode: 'history',
routes
})
......
src/utils/request.js
......@@ -6,7 +6,7 @@ import { Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
// baseURL: process.env.NODE_ENV === 'development'?'/api':'http://appapi.antaile.net',
baseURL: 'http://appapi.antaile.net',
baseURL: 'https://appapi.antaile.net',
// baseURL: 'http://192.168.31.28:8088',
timeout: 60000 // 请求超时时间
})
......
src/views/AppPage/index.vue
......@@ -4,7 +4,11 @@
<div class="container">
<div class="show-bg" :style="'height:' + screenHeight + 'px'">
<div class="bg-mask"></div>
<img class="show-word" src="@/assets/images/writtenwords.png" alt="" />
<div class="show-title">
<p>每一个生命</p>
<p>都值得被<span class="special-color">纪念</span></p>
<p>安泰乐<span class="circle"></span>网上纪念馆</p>
</div>
<div class="show-click">
<div>
<img class="app-icon" src="@/assets/images/ios.png" alt="" />
......@@ -54,6 +58,7 @@ export default {
margin: 0 auto;
padding: 70px 0 0 0;
}
.show-bg {
width: 100%;
position: relative;
......@@ -65,9 +70,35 @@ export default {
justify-content: center;
padding: 8% 0 10%;
box-sizing: border-box;
.show-word {
width: 25%;
.show-title {
// font-weight: bold;
z-index: 1;
text-align: center;
padding: 15% 0 50px;
font-size: 50px;
color: #fff;
box-sizing: border-box;
letter-spacing: 10px;
line-height: 75px;
> p {
display: flex;
align-items: center;
justify-content: center;
}
p:last-child {
font-size: 16px;
color: #cccccc;
letter-spacing: 3px;
// margin-top: 10px;
}
.circle {
width: 5px;
height: 5px;
background-color: #ccc;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
}
.show-click {
display: flex;
......@@ -133,7 +164,7 @@ export default {
linear-gradient(#000, #000);
background-blend-mode: lighten;
align-items: center;
.app-word{
.app-word {
color: #fff;
font-size: 30px;
margin-top: 17vw;
......
src/views/Home/index.vue
......@@ -3,19 +3,20 @@
<custom-header></custom-header>
<!-- 第一屏 -->
<div
class="page bg-image"
class="page bg-star"
id="page1"
@mousewheel="scrollFun"
:style="'height:' + screenHeight + 'px'"
>
<div class="mask-left"></div>
<div class="mask-right"></div>
<!-- 首屏文字 -->
<transition leave-active-class="titleHidden">
<img
class="show-title"
src="@/assets/images/writtenwords.png"
alt=""
v-if="screenIndex == 1"
/>
<div class="show-title" v-if="screenIndex == 1">
<p>每一个生命</p>
<p>都值得被<span class="special-color">纪念</span></p>
<p>安泰乐<span class="circle"></span>网上纪念馆</p>
</div>
</transition>
<!-- 视频 -->
<transition
......@@ -33,6 +34,7 @@
>
<div class="video-mask"></div>
<video
:controls="screenIndex == 3"
autoplay
loop
:class="[
......@@ -51,23 +53,6 @@
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<!-- <transition
:enter-active-class="screenIndex == 4 ? 'scaleLeftShow' : ''"
leave-active-class="scaleLeftHidden"
>
<div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
<img src="@/assets/images/1605239923175.png" alt="" />
</div>
</transition>
<transition
:enter-active-class="screenIndex == 4 ? 'scaleRightShow' : ''"
leave-active-class=" scaleRightHidden"
>
<div
class="show-border"
v-if="screenIndex == 4 || screenIndex == 5"
></div>
</transition> -->
</div>
</transition>
<!-- 视频过渡第二屏 -->
......@@ -151,17 +136,29 @@
</p>
</div>
<div class="scroll-table">
<p class="title" @click="goTimePeriod">部分纪念馆案例</p>
<div class="show-scrollTitle" @click="goTimePeriod">
<p class="title">部分纪念馆案例</p>
<div class="scroll-more">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="show-more">
<span>更多</span>
</div>
</div>
</div>
<vue-seamless-scroll
:data="hallList1"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList1" :key="index">
<router-link :to="{ path: '/preview', query: { id: item.id } }">
<li
v-for="(item, index) in hallList1"
:key="index"
@click="showPreviewModal(item)"
>
<img :src="item.coverUrl" alt="" />
</router-link>
</li>
</ul>
</vue-seamless-scroll>
......@@ -171,10 +168,12 @@
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList2" :key="index">
<router-link :to="{ path: '/preview', query: { id: item.id } }">
<li
v-for="(item, index) in hallList2"
:key="index"
@click="showPreviewModal(item)"
>
<img :src="item.coverUrl" alt="" />
</router-link>
</li>
</ul>
</vue-seamless-scroll>
......@@ -184,10 +183,12 @@
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList3" :key="index">
<router-link :to="{ path: '/preview', query: { id: item.id } }">
<li
v-for="(item, index) in hallList3"
:key="index"
@click="showPreviewModal(item)"
>
<img :src="item.coverUrl" alt="" />
</router-link>
</li>
</ul>
</vue-seamless-scroll>
......@@ -199,47 +200,44 @@
<p class="special-color">安全、便捷、极致体验</p>
</div>
<div class="show-more">
<transition enter-active-class="animated bounce">
<div>
<div v-class="'wordShow'">
<img src="@/assets/images/application.png" alt="" />
<p class="show-subtitle">云应用</p>
<p>应用商店，不断扩展应用库</p>
<p>根据需要可自行安装，满足</p>
<p>不同用户需求</p>
</div>
</transition>
<transition enter-active-class="animated bounce">
<div>
<div v-class="'wordShow'">
<img src="@/assets/images/Deposit.png" alt="" />
<p class="show-subtitle">私有云存储</p>
<p>可将数据存入个人的云存储</p>
<p>空间，保证用户数据安全。</p>
</div>
</transition>
<transition enter-active-class="animated bounce">
<div>
<div v-class="'wordShow'">
<img src="@/assets/images/Exhibition.png" alt="" />
<p class="show-subtitle">多端展示</p>
<p>线上生命纪念馆可以展示在</p>
<p>手机、电脑、TV上,不同的</p>
<p>应用场景可以随时可切换</p>
</div>
</transition>
</div>
<div class="show-btn">
<p>立即创建</p>
<p>安泰乐·网上生命记念馆</p>
<!-- <p>安泰乐·网上生命记念馆</p> -->
</div>
</div>
<custom-footer></custom-footer>
<preview-modal ref="previewModal"></preview-modal>
</div>
</template>
<script>
import PreviewModal from "@/components/PreviewModal";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "index",
components: {
vueSeamlessScroll,
PreviewModal,
},
props: {},
......@@ -276,8 +274,6 @@ export default {
} else {
this.deviceType = 2;
}
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div");
// for (let i = 0; i < this.obj.length; i++) {
......@@ -286,8 +282,28 @@ export default {
// }
// }
this.getData();
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
const that = this;
window.onresize = () => {
return (() => {
that.screenWeight = document.documentElement.clientWidth;
that.screenHeight = document.documentElement.clientHeight;
})();
};
},
methods: {
showPreviewModal(item) {
this.$refs.previewModal.show(item.id);
// if (item.device == 1) {
// this.$refs.previewModal.show(item.id);
// } else {
// this.$router.push({
// path: "/preview",
// query: { id: item.id },
// });
// }
},
getData() {
this.$store
.dispatch("selectOfficialWebsiteAtlTime", {
......@@ -296,7 +312,6 @@ export default {
})
.then((res) => {
this.hallList1 = res.data.list;
console.log("hallList", this.hallList);
})
.catch(() => {});
this.$store
......@@ -306,7 +321,6 @@ export default {
})
.then((res) => {
this.hallList2 = res.data.list;
console.log("hallList", this.hallList);
})
.catch(() => {});
this.$store
......@@ -316,7 +330,6 @@ export default {
})
.then((res) => {
this.hallList3 = res.data.list;
console.log("hallList", this.hallList);
})
.catch(() => {});
},
......@@ -328,15 +341,12 @@ export default {
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 500) {
if (delta > 0 && this.screenIndex < 4) {
console.log(1, this.screenIndex);
this.screenIndex++;
}
if (delta < 0 && this.screenIndex > 1) {
console.log(2, this.screenIndex);
this.screenIndex--;
}
if (this.screenIndex <= 4) {
console.log(3, this.screenIndex);
event.preventDefault();
}
// 本次翻页结束，记录结束时间，用于下次判断
......@@ -349,13 +359,12 @@ export default {
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
goTimePeriod(){
goTimePeriod() {
this.$router.push({
name: 'timePeriod'
})
}
name: "timePeriod",
});
},
},
computed: {
optionLeft() {
......@@ -391,6 +400,11 @@ export default {
width: 100%;
background: #070d1d;
}
.bg-star {
background: url("~@/assets/images/spot.png") no-repeat;
// background-size: 100% 100%;
position: relative;
}
.bg-image {
background: url("~@/assets/images/BG.png") no-repeat;
background-size: 100% 100%;
......@@ -461,9 +475,33 @@ export default {
}
.show-title {
width: 35%;
// font-weight: bold;
text-align: center;
padding: 15% 0 50px;
font-size: 40px;
color: #fff;
box-sizing: border-box;
letter-spacing: 10px;
line-height: 75px;
> p {
display: flex;
align-items: center;
justify-content: center;
}
p:last-child {
font-size: 16px;
color: #cccccc;
letter-spacing: 3px;
// margin-top: 10px;
}
}
.circle {
width: 5px;
height: 5px;
background-color: #ccc;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.show-mask {
width: 100%;
......@@ -488,22 +526,26 @@ export default {
margin-left: -25%;
margin-top: -150px;
z-index: 2;
font-size: 24px;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
letter-spacing: 3px;
.gray-color {
padding: 5px 0;
}
p:first-child {
font-size: 44px;
font-size: 40px;
color: #ccc;
letter-spacing: 5px;
line-height: 70px;
}
p:nth-child(2) {
font-size: 44px;
font-size: 30px;
letter-spacing: 5px;
color: #ccc;
margin-bottom: 30px;
margin-bottom: 35px;
}
}
.show-scrollword {
......@@ -511,17 +553,17 @@ export default {
margin: 100px auto 120px;
text-align: center;
color: #cccccc;
font-size: 24px;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: center;
p:first-child {
margin-bottom: 10px;
color: #fff;
font-size: 50px;
font-size: 40px;
}
p:nth-child(2) {
font-size: 50px;
font-size: 40px;
}
p:last-child {
text-align: left;
......@@ -535,12 +577,45 @@ export default {
padding: 20px 0;
background: #202020;
border-radius: 20px;
.show-scrollTitle {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.title {
color: #ffffff;
padding: 0 30px 10px;
font-size: 30px;
font-size: 18px;
text-align: left;
}
.scroll-more {
position: relative;
padding-right: 10px;
.circle {
width: 5px;
height: 5px;
border-radius: 50%;
margin-right: 20px;
background: #f6c943;
}
.show-more {
position: absolute;
bottom: 15px;
right: 0px;
z-index: 1;
width: 60px;
height: 50px;
color: #ffffff;
font-size: 14px;
background: url("~@/assets/images/more.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
line-height: 42px;
letter-spacing: 2px;
}
}
// 动画效果
.seamless-warp2 {
overflow: hidden;
......@@ -562,7 +637,7 @@ export default {
}
.tab-mask {
position: absolute;
bottom: 0;
bottom: -2px;
left: 0;
right: 0;
width: 100%;
......@@ -575,6 +650,34 @@ export default {
rgba(11, 11, 20, 0)
);
}
.mask-left {
position: absolute;
bottom: 0;
left: 0;
width: 30%;
height: 100%;
background-image: linear-gradient(
to top,
#070d1d,
rgba(11, 11, 20, 0.85) 25%,
rgba(11, 11, 20, 0.45) 50%,
rgba(11, 11, 20, 0)
);
}
.mask-right {
position: absolute;
bottom: 0;
right: 0;
width: 30%;
height: 100%;
background-image: linear-gradient(
to top,
#070d1d,
rgba(11, 11, 20, 0.85) 25%,
rgba(11, 11, 20, 0.45) 50%,
rgba(11, 11, 20, 0)
);
}
.video-mask {
position: absolute;
bottom: 0;
......@@ -613,6 +716,7 @@ export default {
bottom: 0;
right: 0;
width: 100%;
object-fit: cover;
}
.my-tab {
......@@ -633,7 +737,7 @@ export default {
li {
padding: 20px 10px;
color: #fff;
font-size: 26px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
&.special-color::after {
......@@ -660,7 +764,7 @@ export default {
}
}
.show-tip {
font-size: 16px;
font-size: 14px;
color: #ffffff;
margin: 20px;
text-align: left;
......@@ -733,6 +837,28 @@ export default {
-webkit-animation-name: fallVideo;
animation-name: fallVideo;
}
.wordShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: wordShow;
animation-name: wordShow;
}
@keyframes wordShow {
from {
opacity: 0;
-webkit-transform: translate(0px, 52px);
transform: translate(0px, 52px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, 0px);
opacity: 1;
transform: translate(0px, 0px);
}
}
@keyframes fallVideo {
from {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
......@@ -898,12 +1024,12 @@ export default {
}
.show-moretitle {
padding: 50px 0;
padding: 8% 0 70px;
display: flex;
flex-direction: column;
align-items: center;
p:first-child {
font-size: 50px;
font-size: 40px;
color: #fff;
margin-bottom: 15px;
}
......@@ -923,17 +1049,17 @@ export default {
align-items: center;
justify-content: flex-start;
img {
width: 131px;
height: 131px;
margin-bottom: 34px;
width: 76px;
height: 76px;
margin-bottom: 20px;
}
p {
color: #ccc;
font-size: 22px;
font-size: 18px;
}
.show-subtitle {
font-size: 30px;
margin-bottom: 30px;
margin-bottom: 20px;
color: #ffffff;
}
}
......@@ -942,8 +1068,7 @@ export default {
.show-btn {
background: #bb862e;
border-radius: 51px;
width: 390px;
padding: 10px 0;
padding: 15px 70px;
margin: 80px auto;
color: #ffff;
display: flex;
......@@ -951,31 +1076,14 @@ export default {
align-items: center;
justify-content: center;
p:first-child {
font-size: 38px;
font-size: 30px;
margin-bottom: 5px;
}
p:last-child {
font-size: 14px;
}
}
.special-color {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
color: linear-gradient(to right, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
position: relative;
// p:last-child {
// font-size: 14px;
// }
}
.gray-color {
-webkit-background-clip: text;
background-clip: text;
......
src/views/Home/mindex.vue
<template>
<div class="root">
<custom-header></custom-header>
<!-- 第一屏 -->
<div class="page bg-image" id="page1" @mousewheel="scrollFun">
<transition leave-active-class="titleHidden">
<img
class="show-title"
src="@/assets/images/writtenwords.png"
alt=""
v-if="screenIndex == 1"
/>
</transition>
<transition
:enter-active-class="screenIndex == 2 ? 'fallVideo' : ''"
leave-active-class="screenIndex == 1"
>
<div
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
'show-video',
]"
>
<video
autoplay
loop
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
'video',
]"
v-on:canplay="canplay"
muted
ref="video"
>
<source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<transition
:enter-active-class="screenIndex == 4 ? 'scaleLeftShow' : ''"
leave-active-class="scaleLeftHidden"
>
<div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
<img src="@/assets/images/1605239923175.png" alt="" />
</div>
</transition>
<transition
:enter-active-class="screenIndex == 4 ? 'scaleRightShow' : ''"
leave-active-class=" scaleRightHidden"
>
<div
class="show-border"
v-if="screenIndex == 4 || screenIndex == 5"
></div>
</transition>
</div>
</transition>
<transition leave-active-class="animated bounceOutDown">
<div
class="show-mask"
v-if="screenIndex == 3 || screenIndex == 5"
></div>
</transition>
<transition
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutDown"
>
<img
class="mask-img"
src="@/assets/images/writtenwordsone.png"
alt=""
v-if="screenIndex == 3"
/>
</transition>
<transition
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutDown"
>
<img
src="@/assets/images/writtenwordstwo.png"
v-if="screenIndex == 5"
class="mask-img"
alt=""
/>
</transition>
</div>
<div class="page" id="page2">
<div class="show-tab">
<img src="@/assets/images/Map.png" alt="" class="small" />
<div class="tab-mask"></div>
<div class="my-tab">
<ul>
<li
@click="changeTab(item.id)"
:class="checkedTab == item.id ? 'special-color' : ''"
v-for="(item, index) in tabs"
:key="index"
>
{{ item.name }}
</li>
</ul>
<div class="show-tip">我们提供了丰富模版，根据自己喜欢可自由选择</div>
</div>
</div>
</div>
<div class="page" id="page3">
<div class="show-scrollword">
<p>尊重生命</p>
<p class="special-color">传承文化</p>
<p>
无限的数据空间，可以承载无数的文化传承，我们尊重生命，感恩世界，那些曾经的过往，也是我们及子孙后代无价的宝藏！
</p>
</div>
<div class="scroll-table">
<p class="title">部分纪念馆案例</p>
<vue-seamless-scroll
:data="hallList"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
</li>
</ul>
</vue-seamless-scroll>
<vue-seamless-scroll
:data="hallList"
:class-option="optionRight"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
</li>
</ul>
</vue-seamless-scroll>
<vue-seamless-scroll
:data="hallList"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<div class="page bg-image" id="page4">
<div class="show-moretitle">
<p>突破技术壁垒</p>
<p class="special-color">安全、便捷、极致体验</p>
</div>
<div class="show-more">
<transition enter-active-class="animated bounce">
<div>
<img src="@/assets/images/application.png" alt="" />
<p class="show-subtitle">云应用</p>
<p>应用商店，不断扩展应用库</p>
<p>根据需要可自行安装，满足</p>
<p>不同用户需求</p>
</div>
</transition>
<transition enter-active-class="animated bounce">
<div>
<img src="@/assets/images/Deposit.png" alt="" />
<p class="show-subtitle">私有云存储</p>
<p>可将数据存入个人的云存储</p>
<p>空间，保证用户数据安全。</p>
</div>
</transition>
<transition enter-active-class="animated bounce">
<div>
<img src="@/assets/images/Exhibition.png" alt="" />
<p class="show-subtitle">多端展示</p>
<p>线上生命纪念馆可以展示在</p>
<p>手机、电脑、TV上,不同的</p>
<p>应用场景可以随时可切换</p>
</div>
</transition>
</div>
<div class="show-btn">
<p>立即创建</p>
<p>安泰乐·网上生命记念馆</p>
</div>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "index",
components: {
vueSeamlessScroll,
},
props: {},
data() {
return {
vedioCanPlay: false,
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
screenIndex: 1, //用于记录第一页面内部的顺序
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
pageNum: 0, // 一共有多少页
main: Object,
obj: Object,
hallList: new Array(60).fill({
icon:
"https://thirdwx.qlogo.cn/mmopen/vi_32/exXiaSqNfYBXic1ibB6Ugfg5OPWBDZibM46VibhlRdSovAIic8uYrgmkQD7HgRrQGuKxhTW56T9NMy28KlwkfkdMvxLg/132",
}),
checkedTab: 1,
tabs: [
{ id: 1, name: "风格多样化" },
{ id: 2, name: "在线纪念功能" },
{ id: 3, name: "多端展示" },
],
};
},
mounted() {
if (this.common.isMobile()) {
this.deviceType = 1;
} else {
this.deviceType = 2;
}
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className.indexOf("page") != -1) {
this.obj[i].style.height = this.screenHeight + "px";
}
}
},
methods: {
scrollFun(event) {
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 500) {
if (delta > 0 && this.screenIndex < 5) {
console.log(1, this.screenIndex);
this.screenIndex++;
}
if (delta < 0 && this.screenIndex > 1) {
console.log(2, this.screenIndex);
this.screenIndex--;
}
if (this.screenIndex <= 5) {
console.log(3, this.screenIndex);
event.preventDefault();
}
// 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
}
},
changeTab(id) {
this.checkedTab = id;
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
},
computed: {
optionLeft() {
return {
direction: 2,
limitMoveNum: 1,
};
},
optionRight() {
return {
direction: 3,
limitMoveNum: 1,
};
},
},
};
</script>
<style lang="scss" scoped>
.root {
width: 100%;
background: #070d1d;
}
.bg-image {
background: url("~@/assets/images/BG.png") no-repeat;
background-size: 100% 100%;
}
.page {
width: 100%;
padding-top: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
overflow: scroll;
}
::-webkit-scrollbar {
display: none; /*ChromeSafari*/
}
.show-video {
width: 70%;
height: 60%;
max-width: 800px;
max-height: 600px;
border-radius: 30px;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
.video {
object-fit: fill;
border-radius: 10px;
width: 100%;
height: 100%;
transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
&.animate-video {
transform: translate(0px, 0px);
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: fallVideo;
animation-name: fallVideo;
}
}
.show-url {
width: 35%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
border: 10px solid #000;
img {
width: 100%;
height: 100%;
}
}
.show-border {
width: 62%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
border: 10px solid #000;
}
}
.show-title {
width: 30%;
padding: 15% 0 140px;
box-sizing: border-box;
}
.show-mask {
width: 100%;
height: 100%;
background: rgba(11, 11, 20, 0.85);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
&.animate-hidden {
opacity: 0;
}
}
.mask-img {
width: 40%;
position: absolute;
left: 50%;
top: 50%;
// transform: translate(-50%, -50%);
margin-left: -20%;
z-index: 2;
}
.show-scrollword {
width: 80%;
margin: 50px auto 80px;
text-align: center;
color: #cccccc;
font-size: 24px;
display: flex;
flex-direction: column;
align-items: center;
p:first-child {
margin-bottom: 10px;
color: #fff;
font-size: 60px;
}
p:nth-child(2) {
font-size: 60px;
}
p:last-child {
text-align: left;
margin-top: 40px;
width: 76%;
}
}
.scroll-table {
width: 70%;
// height: 650px;
padding: 20px 0;
background: #202020;
border-radius: 20px;
.title {
color: #ffffff;
padding: 0 30px 10px;
font-size: 30px;
text-align: left;
}
// 动画效果
.seamless-warp2 {
overflow: hidden;
width: 100%;
ul.item {
display: flex;
align-items: center;
margin-top: 10px;
li {
img {
width: 160px;
height: 160px;
border-radius: 25px;
margin-right: 10px;
}
}
}
}
}
.tab-mask {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50%;
background-image: linear-gradient(
to top,
#070d1d,
rgba(11, 11, 20, 0.85) 25%,
rgba(11, 11, 20, 0.45) 50%,
rgba(11, 11, 20, 0)
);
}
.show-tab {
width: 100%;
height: 100%;
position: relative;
// background: no-repeat center bottom / 100% 100%;
background-image: url("~@/assets/images/ptfdjk.png");
.small {
width: 100%;
z-index: 2;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%);
width: 80%;
}
.my-tab {
width: 40%;
position: absolute;
left: 50%;
left: 50%;
transform: translate(-50%, -50%);
bottom: 30px;
z-index: 1;
ul {
display: flex;
justify-content: space-between;
font-size: 20px;
border-bottom: 2px solid #fff;
}
li {
padding: 20px 10px;
color: #fff;
font-size: 26px;
font-weight: bold;
cursor: pointer;
&.special-color::after {
content: "";
// width: 20%;
height: 2px;
position: absolute;
left: 0;
right: 0;
bottom: -2px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(top, #b8832d, #f6c943);
background-image: -moz-linear-gradient(top, #b8832d, #f6c943);
background-image: linear-gradient(to bottom, #b8832d, #f6c943);
color: linear-gradient(to bottom, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to bottom, #b8832d, #f6c943);
}
}
.show-tip {
font-size: 16px;
color: #ffffff;
margin: 20px;
text-align: left;
}
}
}
.titleShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: titleShow;
animation-name: titleShow;
}
.titleHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: titleHidden;
animation-name: titleHidden;
}
.scaleLeftShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleLeftShow;
animation-name: scaleLeftShow;
}
.scaleRightShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleRightShow;
animation-name: scaleRightShow;
}
.scaleLeftHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleLeftHidden;
animation-name: scaleLeftHidden;
}
.scaleRightHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleRightHidden;
animation-name: scaleRightHidden;
}
.fallVideo {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: fallVideo;
animation-name: fallVideo;
}
@keyframes fallVideo {
from {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes titleShow {
from {
-webkit-transform: translate(0px, -208.333px);
transform: translate(0px, -208.333px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate3d(0px, 93.7356px, 0px);
transform: translate3d(0px, 93.7356px, 0px);
}
}
@keyframes titleHidden {
from {
-webkit-transform: translate3d(0px, 93.7356px, 0px);
transform: translate3d(0px, 93.7356px, 0px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, -208.333px);
transform: translate(0px, -208.333px);
}
}
@keyframes scaleLeftShow {
from {
-webkit-transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes scaleRightShow {
from {
-webkit-transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes scaleLeftHidden {
from {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
-webkit-transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
}
}
@keyframes scaleRightHidden {
from {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
-webkit-transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
}
}
// @-webkit-keyframes flipInX {
// from {
// -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
// transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
// -webkit-animation-timing-function: linear;
// animation-timing-function: linear;
// }
// 50% {
// -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 30deg);
// transform: perspective(1200px) rotate3d(1, 0, 0, 30deg) ;
// }
// to {
// -webkit-transform: perspective(1200px) ;
// transform: perspective(1200px) ;
// }
// }
@keyframes flipInX {
from {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 50deg) scale(1);
transform: perspective(1200px) rotate3d(1, 0, 0, 50deg) scale(1);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: perspective(1200px) scale(1.2);
transform: perspective(1200px) scale(1.2);
}
}
.show-moretitle {
padding-bottom: 50px;
p:first-child {
font-size: 60px;
color: #fff;
}
p:last-child {
font-size: 40px;
}
}
.show-more {
display: flex;
align-items: center;
width: 80%;
> div {
width: calc(33.3% - 30px);
margin: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
img {
width: 131px;
height: 131px;
margin-bottom: 34px;
}
p {
color: #ccc;
font-size: 24px;
}
.show-subtitle {
font-size: 40px;
margin-bottom: 30px;
color: #ffffff;
}
}
}
.show-btn {
background: #bb862e;
border-radius: 51px;
width: 390px;
padding: 10px 0;
margin: 80px auto;
color: #ffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p:first-child {
font-size: 38px;
margin-bottom: 5px;
}
p:last-child {
font-size: 14px;
}
}
.special-color {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
color: linear-gradient(to right, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
position: relative;
}
</style>
src/views/Login/BindPage/index.vue 0 → 100644
<template>
<div class="container">
<custom-header></custom-header>
<div class="login-container">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="new-password"
label-position="left"
>
<div class="title-container">
<h3 class="title checked">绑定已有账号</h3>
</div>
<el-form-item prop="mobilePhone">
<div class="form-item">
<div class="svg-container svg-container_login">
<img src="@/assets/images/user.png" alt="" />
</div>
<el-input
v-model="loginForm.mobilePhone"
name="mobilePhone"
type="text"
maxlength="11"
auto-complete="new-password"
placeholder="请输入手机号"
/>
</div>
</el-form-item>
<el-form-item prop="verifyCode">
<div class="form-item">
<span class="svg-container">
<img src="@/assets/images/Password.png" alt="" />
</span>
<el-input
v-model="loginForm.verifyCode"
name="verifyCode"
auto-complete="new-password"
placeholder="请输入验证码"
@keyup.enter.native="handleLogin"
/>
<!-- <span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span> -->
<el-button
@click="sendCode"
:disabled="smsFlag"
:style="{
fontSize: '16px',
backgroundColor: sendColor,
borderColor: sendColor,
color: '#26201e',
marginRight: '10px',
}"
>
{{ sendTime }}
</el-button>
</div>
</el-form-item>
<el-form-item prop="loginPassword">
<div class="form-item">
<span class="svg-container">
<img src="@/assets/images/Password.png" alt="" />
</span>
<el-input
:type="passwordType"
v-model="loginForm.loginPassword"
name="loginPassword"
auto-complete="new-password"
placeholder="请输入密码"
@keyup.enter.native="handleLogin"
/>
<!-- <span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span> -->
</div>
</el-form-item>
<el-form-item prop="passwdCheck">
<div class="form-item">
<span class="svg-container">
<img src="@/assets/images/Password.png" alt="" />
</span>
<el-input
:type="passwordType"
v-model="loginForm.passwdCheck"
name="passwdCheck"
auto-complete="new-password"
placeholder="请输入确认密码"
@keyup.enter.native="handleLogin"
/>
<!-- <span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span> -->
</div>
</el-form-item>
<div class="my-btn">
<el-button
:loading="loading"
type="primary"
@click.native.prevent="handleLogin"
>登录
</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import { getQrcodeAndState, sendSms, wechatBindPhone } from "@/api/index";
// import { wechatBind, getBindingInformation } from '@/api/index'
export default {
name: "bindPage",
data() {
const validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("手机号不能为空"));
} else if (!/^1[0-9]{10}$/.test(value)) {
callback("请填写正确的手机号");
} else {
callback();
}
};
const validatePass = (rule, value, callback) => {
let reg = /^[^\s]{6,10}$/;
if (value === "") {
callback(new Error("请输入密码"));
} else if (!reg.test(value)) {
callback(new Error("密码6-10位，不包含空格"));
} else {
callback();
}
};
const validatePassCheck = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.loginForm.loginPassword) {
callback(new Error("两次输入密码不一致"));
} else {
callback();
}
};
return {
loading: false,
sendTime: "获取验证码",
sendColor: "#FDB64F",
snsMsgWait: 60,
smsFlag: false,
passwordType: "password",
loginForm: {
accessToken: "",
loginPassword: "",
mobilePhone: "",
openid: "",
verifyCode: "",
},
loginRules: {
mobilePhone: [
{
required: true,
validator: validatePhone,
trigger: "blur",
},
],
verifyCode: [
{ required: true, message: "验证码不允许为空", trigger: "blur" },
],
loginPassword: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
{
validator: validatePass,
trigger: "blur",
},
],
passwdCheck: [
{
required: true,
validator: validatePassCheck,
trigger: "blur",
},
],
},
};
},
mounted() {
this.init();
},
methods: {
init() {
this.getQrcodeAndState();
// let vm = this
// if (this.$route.query.token) {
// this.$store.commit("SET_TOKEN", this.$route.query.token);
// this.getUserInfo();
// } else {
// }
},
getQrcodeAndState() {
getQrcodeAndState({
code: this.$route.query.code,
state: this.$route.query.state,
})
.then((res) => {
console.log("res", res);
this.$store.commit("SET_TOKEN", res.data.token);
this.getUserInfo();
})
.catch((err) => {
console.log("err", err);
if (err.message == "未查询到网站应用openId相关数据，需要绑定手机号") {
this.loginForm.accessToken = err.data.access_token;
this.loginForm.openid = err.data.openid;
} else {
this.$message.error(err.message);
}
});
},
getUserInfo() {
this.$store.dispatch("GetUserInfo", this.loginForm).then(() => {
this.$router.replace({ name: "index" });
});
},
// 账号登录
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
wechatBindPhone(this.loginForm).then((res) => {
if (res.status == 200) {
this.$store.commit("SET_TOKEN", res.data.token);
this.$store.dispatch("GetUserInfo", this.loginForm).then(() => {
this.$router.replace({ name: "index" });
});
} else {
this.$message.error(res.message);
}
});
}
});
},
// 获取验证码
sendCode() {
if (!/^1\d{10}$/.test(this.loginForm.mobilePhone)) {
this.$message.info("请填写正确的手机号");
return;
}
var params = {
mobile: this.loginForm.mobilePhone,
type: 5,
};
sendSms(params).then(() => {
this.$message.success("短信发送成功");
this.countDown();
});
},
countDown() {
// 60秒后重新获取验证码
var inter = setInterval(
function () {
this.smsFlag = true;
this.sendColor = "#E0E0E0";
this.sendTime = this.snsMsgWait + "s后可重发";
this.snsMsgWait = this.snsMsgWait - 1;
if (this.snsMsgWait < 0) {
clearInterval(inter);
this.smsFlag = false;
this.sendColor = "#FDB64F";
this.sendTime = "获取验证码";
this.snsMsgWait = 60;
}
}.bind(this),
1000
);
},
},
};
</script>
<style lang="scss" scoped>
$bg: #fdb64f;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
position: absolute;
height: 100%;
width: 100%;
min-width: 1000px;
background: url("~@/assets/images/denglu.png") no-repeat;
background-size: 100% 100%;
.login-form {
position: absolute;
top: 20%;
right: 13%;
width: 30%;
}
.form-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
&_login {
font-size: 20px;
}
}
.title-container {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 22px;
font-weight: 400;
color: #888585;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
position: relative;
cursor: pointer;
&.checked {
color: $bg;
}
&.checked::after {
width: 40px;
height: 3px;
content: "";
position: absolute;
left: 50%;
bottom: -12px;
transform: translateX(-50%);
z-index: 1;
background: $bg;
}
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
.forget {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
margin-bottom: 15px;
a {
font-size: 16px;
color: #fff;
}
}
.my-btn {
margin: 30px auto;
text-align: center;
button {
width: 100%;
height: 52px;
background: $bg;
border-radius: 33px;
color: #26201e;
font-size: 22px;
}
img {
margin-top: 30px;
width: 45px;
height: 45px;
}
}
.homepage-hero-module {
position: relative;
height: 100vh;
overflow: hidden;
}
</style>
src/views/Login/findPassword.vue → src/views/Login/FindPassword/index.vue
......@@ -54,7 +54,7 @@
@click="sendCode"
:disabled="smsFlag"
:style="{
fontSize: '16px',
fontSize: '14px',
backgroundColor: sendColor,
borderColor: sendColor,
color: '#fff',
......
src/views/Login/Register/modules/ValiatePhone.vue
......@@ -59,11 +59,8 @@
/>
<p @click="changeDefault">
默认同意
<router-link
:to="{ path: '/agreement', query: { type: 1 } }"
class="color-primary"
>《生命纪念馆协议》</router-link
>
<span class="color-primary" @click="showAgreement(3,'用户协议')">《用户协议》</span>
<span class="color-primary" @click="showAgreement(1,'隐私协议')">《隐私协议》</span>
</p>
</div>
</el-form-item>
......@@ -77,14 +74,19 @@
</div>
</el-form>
</div>
<!-- 弹窗 -->
<agree-modal ref="agreeModal"></agree-modal>
</div>
</template>
<script>
import { sendSms } from "@/api/index";
import AgreeModal from '@/components/AgreeModal'
export default {
name: "ValidatePhone",
components: {},
components: {
AgreeModal
},
props: {
value: Object,
},
......@@ -120,6 +122,9 @@ export default {
};
},
methods: {
showAgreement(type,name){
this.$refs.agreeModal.show(type,name)
},
changeDefault() {
this.value.isDefault = this.value.isDefault ? 0 : 1;
},
......@@ -182,7 +187,7 @@ export default {
p {
color: #c6ced4;
font-size: 16px;
font-size: 14px;
cursor: pointer;
}
img {
......
src/views/Login/index.vue
......@@ -2,6 +2,15 @@
<div class="homepage-hero-module">
<custom-header></custom-header>
<div class="login-container">
<div class="left-show">
<p class="show-name">快速管理生命纪念馆</p>
<div class="show-list">
<div class="show-item" v-for="(item, index) in list" :key="index">
<img :src="item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
</div>
<el-form
ref="loginForm"
:model="loginForm"
......@@ -16,7 +25,7 @@
:class="checkedTab == 1 ? 'checked' : ''"
@click="changeTab(1)"
>
账号管理
账号登录
</h3>
<h3
class="title"
......@@ -79,7 +88,7 @@
@click="sendCode"
:disabled="smsFlag"
:style="{
fontSize: '16px',
fontSize: '14px',
backgroundColor: sendColor,
borderColor: sendColor,
color: '#26201e',
......@@ -103,7 +112,7 @@
@click.native.prevent="handleLogin"
>登录
</el-button>
<img src="@/assets/images/WeChatr.png" alt="" />
<img src="@/assets/images/WeChatr.png" alt="" @click="wechatLogin" />
</div>
</el-form>
</div>
......@@ -112,7 +121,7 @@
</template>
<script>
import { sendSms } from "@/api/index";
import { sendSms, wechatLogin } from "@/api/index";
export default {
name: "login",
components: {},
......@@ -185,6 +194,13 @@ export default {
},
passwordType: "password",
loading: false,
list: [
{ icon: require("@/assets/images/video.png"), name: "视频" },
{ icon: require("@/assets/images/frequency.png"), name: "音频" },
{ icon: require("@/assets/images/Photo.png"), name: "照片" },
{ icon: require("@/assets/images/story.png"), name: "故事" },
{ icon: require("@/assets/images/annivers.png"), name: "纪念" },
],
};
},
methods: {
......@@ -299,6 +315,12 @@ export default {
1000
);
},
// 微信登录
wechatLogin() {
wechatLogin().then((res) => {
window.location.href = res.data;
});
},
},
};
</script>
......@@ -308,17 +330,68 @@ $dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
position: absolute;
height: 100%;
width: 100%;
min-width: 1000px;
background: url("~@/assets/images/denglu.png") no-repeat;
background-size: 100% 100%;
.login-form {
background-size: 100%;
display: flex;
justify-content: space-between;
align-content: center;
box-sizing: border-box;
padding: 10%;
.left-show {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.show-name {
color: $bg;
font-size: 50px;
font-weight: bold;
letter-spacing: 15px;
text-shadow: 3px 5px 18px 14px rgba(51, 36, 22, 0.55);
margin-bottom: 12%;
position: relative;
&:after {
content: "";
position: absolute;
top: 24%;
right: 13%;
width: 30%;
bottom: -30px;
right: 14%;
background: url("~@/assets/images/Beckoning.png") no-repeat;
background-size: 100%;
z-index: 1;
width: 45%;
height: 30px;
}
}
.show-list {
width: 96%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.show-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #e9e5e5;
font-size: 18px;
img {
width: 70px;
height: 70px;
margin-bottom: 10px;
}
}
}
}
.login-form {
width: 40%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
padding: 40px 40px 60px;
box-sizing: border-box;
}
.form-item {
......@@ -347,12 +420,11 @@ $light_gray: #eee;
align-items: center;
justify-content: space-between;
.title {
font-size: 22px;
font-size: 20px;
font-weight: 400;
color: #888585;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
position: relative;
cursor: pointer;
&.checked {
......@@ -389,7 +461,7 @@ $light_gray: #eee;
padding: 0 10px;
margin-bottom: 15px;
a {
font-size: 16px;
font-size: 14px;
color: #fff;
}
}
......@@ -399,11 +471,11 @@ $light_gray: #eee;
button {
width: 100%;
height: 52px;
height: 50px;
background: $bg;
border-radius: 33px;
color: #26201e;
font-size: 22px;
font-size: 20px;
}
img {
margin-top: 30px;
......
src/vue.config.js
module.exports = {
outputDir: "antaileWeb",
chainWebpack: config =>{
config.plugin('html')
.tap(args => {
args[0].title = "安泰乐官网";
return args;
})
},
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75 //根据设计图
require("postcss-px2rem")({
remUnit: 75, //根据设计图
//375的图就给37.5，也就是1rem=37.5px
})
]
}
}
}),
],
},
},
},
devServer: {
proxy: { //配置跨域
'/api': {
target: 'http://appapi.antaile.net', //真实的后台接口
proxy: {
//配置跨域
"/api": {
target: "https://appapi.antaile.net", //真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
'^/api': ''
}
"^/api": "",
},
},
},
}
},
}
};
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