Skip to content

A
antaile-web
Commit 00610067 by wangyalan-git
Options

bug修改

parent 14b238d9
Showing with 606 additions and 119 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/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">
<img src="@/assets/images/antail.png" alt="" />
<p class="show-name">安泰乐（厦门）集团有限公司</p>
<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
})
.catch(() => {
});
.dispatch("selectOfficialWebsiteAtlTime", {
// isCommend: 1,
page: { pageNum: 1, pageSize: 15 },
})
.then((res) => {
this.totalNum = res.data.total + 10000;
})
.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('');
counter = 0;
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(','); }
if (!(counter % 3) && i != 0) {
result.unshift(",");
}
}
return result.join('') + floatNum || '';
}
}
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,18 +6,9 @@
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>
<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;
......@@ -132,8 +163,8 @@ export default {
background-image: url("~@/assets/images/Spectrumbg.png"),
linear-gradient(#000, #000);
background-blend-mode: lighten;
align-items: center;
.app-word{
align-items: center;
.app-word {
color: #fff;
font-size: 30px;
margin-top: 17vw;
......
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