Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
efb0e47e 1 parent 29e18d45

首页访问逻和我的访问样式修改

Inline Side-by-side
Showing 9 changed files with 404 additions and 20 deletions
1 /* 1 /*
2 * @Date: 2023-08-24 09:42:27 2 * @Date: 2023-08-24 09:42:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-27 11:52:54 4 + * @LastEditTime: 2024-01-29 17:26:42
5 * @FilePath: /xysBooking/src/api/index.js 5 * @FilePath: /xysBooking/src/api/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -141,6 +141,7 @@ export const icbcRefundAPI = (params) => fn(fetch.post(Api.ICBC_REFUND, params)) ...@@ -141,6 +141,7 @@ export const icbcRefundAPI = (params) => fn(fetch.post(Api.ICBC_REFUND, params))
141 export const billPersonAPI = (params) => fn(fetch.get(Api.BILL_PREPARE, params)); 141 export const billPersonAPI = (params) => fn(fetch.get(Api.BILL_PREPARE, params));
142 142
143 /** 143 /**
144 + * 接口废弃
144 * @description: 刷新预约单支付状态 145 * @description: 刷新预约单支付状态
145 * @param {String} 146 * @param {String}
146 * @returns {String} 147 * @returns {String}
......
1 /* 1 /*
2 * @Date: 2023-06-13 13:26:46 2 * @Date: 2023-06-13 13:26:46
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-26 13:08:44 4 + * @LastEditTime: 2024-01-29 14:53:27
5 * @FilePath: /xysBooking/src/route.js 5 * @FilePath: /xysBooking/src/route.js
6 * @Description: 路由列表 6 * @Description: 路由列表
7 */ 7 */
...@@ -73,7 +73,7 @@ export default [ ...@@ -73,7 +73,7 @@ export default [
73 path: '/me', 73 path: '/me',
74 component: () => import('@/views/me.vue'), 74 component: () => import('@/views/me.vue'),
75 meta: { 75 meta: {
76 - title: '我的', 76 + title: '参观者',
77 }, 77 },
78 }, 78 },
79 { 79 {
...@@ -94,7 +94,7 @@ export default [ ...@@ -94,7 +94,7 @@ export default [
94 path: '/search', 94 path: '/search',
95 component: () => import('@/views/search.vue'), 95 component: () => import('@/views/search.vue'),
96 meta: { 96 meta: {
97 - title: '寺院录入', 97 + title: '邀请码',
98 }, 98 },
99 }, 99 },
100 { 100 {
...@@ -104,4 +104,18 @@ export default [ ...@@ -104,4 +104,18 @@ export default [
104 title: '授权页面', 104 title: '授权页面',
105 }, 105 },
106 }, 106 },
107 + {
108 + path: '/visitorList',
109 + component: () => import('@/views/visitorList.vue'),
110 + meta: {
111 + title: '参观者列表',
112 + },
113 + },
114 + {
115 + path: '/my',
116 + component: () => import('@/views/my.vue'),
117 + meta: {
118 + title: '我的',
119 + },
120 + },
107 ]; 121 ];
......
1 <!-- 1 <!--
2 * @Date: 2024-01-16 10:06:47 2 * @Date: 2024-01-16 10:06:47
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-25 13:05:10 4 + * @LastEditTime: 2024-01-29 15:54:01
5 * @FilePath: /xysBooking/src/views/bookingCode.vue 5 * @FilePath: /xysBooking/src/views/bookingCode.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -54,7 +54,7 @@ useTitle($route.meta.title); ...@@ -54,7 +54,7 @@ useTitle($route.meta.title);
54 54
55 const toMy = () => { // 跳转到我的 55 const toMy = () => { // 跳转到我的
56 // go('/me'); 56 // go('/me');
57 - window.location.replace(location.origin + location.pathname + '#/me'); 57 + window.location.replace(location.origin + location.pathname + '#/my');
58 } 58 }
59 const toHome = () => { // 跳转到首页 59 const toHome = () => { // 跳转到首页
60 // go('/'); 60 // go('/');
......
1 <!-- 1 <!--
2 * @Date: 2023-06-21 10:23:09 2 * @Date: 2023-06-21 10:23:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-27 11:19:43 4 + * @LastEditTime: 2024-01-29 16:41:51
5 * @FilePath: /xysBooking/src/views/index.vue 5 * @FilePath: /xysBooking/src/views/index.vue
6 * @Description: 预约页首页 6 * @Description: 预约页首页
7 --> 7 -->
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 </van-swipe-item> 15 </van-swipe-item>
16 </van-swipe> 16 </van-swipe>
17 </div> 17 </div>
18 - <div ref="root" class="index-control"> 18 + <!-- <div ref="root" class="index-control">
19 <div class="booking" @click="toBooking"> 19 <div class="booking" @click="toBooking">
20 <van-icon size="1.5rem" color="#FFFFFF" :name="icon_1" /> 20 <van-icon size="1.5rem" color="#FFFFFF" :name="icon_1" />
21 &nbsp;立即预约 21 &nbsp;立即预约
...@@ -26,7 +26,15 @@ ...@@ -26,7 +26,15 @@
26 </div> 26 </div>
27 <div class="search" @click="toSearch"> 27 <div class="search" @click="toSearch">
28 <van-icon size="1.5rem" color="#A67939" :name="icon_6" /> 28 <van-icon size="1.5rem" color="#A67939" :name="icon_6" />
29 - &nbsp;寺院录入 29 + &nbsp;邀请码
30 + </div>
31 + </div> -->
32 + <div class="index-circular">
33 + <div class="booking-wrapper">
34 + <div class="booking" @click="toBooking">
35 + <div><van-icon size="3rem" color="#FFFFFF" :name="icon_1" /></div>
36 + <div style="color: #FFF;">马上预约</div>
37 + </div>
30 </div> 38 </div>
31 </div> 39 </div>
32 <div class="logo"></div> 40 <div class="logo"></div>
...@@ -89,7 +97,7 @@ const toCode = () => { // 跳转到预约码 ...@@ -89,7 +97,7 @@ const toCode = () => { // 跳转到预约码
89 } 97 }
90 const toMy = () => { // 跳转到我的 98 const toMy = () => { // 跳转到我的
91 // go('/me'); 99 // go('/me');
92 - window.location.replace(location.origin + location.pathname + '#/me'); 100 + window.location.replace(location.origin + location.pathname + '#/my');
93 } 101 }
94 102
95 onMounted(async () => { 103 onMounted(async () => {
...@@ -153,6 +161,35 @@ useClickAway(root, () => { ...@@ -153,6 +161,35 @@ useClickAway(root, () => {
153 margin-top: 1.5rem; 161 margin-top: 1.5rem;
154 } 162 }
155 } 163 }
164 + .index-circular {
165 + position: relative;
166 + display: flex;
167 + align-items: center;
168 + justify-content: center;
169 + margin-top: 10vh;
170 + // font-weight: bold;
171 + font-size: 1.1rem;
172 +
173 + .booking-wrapper {
174 + height: 25vh;
175 + width: 25vh;
176 + border-radius: 50%;
177 + background-color: rgba(166, 121, 57, 0.26);
178 + display: flex;
179 + align-items: center;
180 + justify-content: center;
181 + .booking {
182 + height: 21.5vh;
183 + width: 21.5vh;
184 + border-radius: 50%;
185 + background-color: #A67939;
186 + display: flex;
187 + align-items: center;
188 + justify-content: center;
189 + flex-direction: column;
190 + }
191 + }
192 + }
156 .logo { 193 .logo {
157 position: absolute; 194 position: absolute;
158 right: 0; 195 right: 0;
......
1 <!-- 1 <!--
2 * @Date: 2024-01-16 13:33:36 2 * @Date: 2024-01-16 13:33:36
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-25 14:32:00 4 + * @LastEditTime: 2024-01-29 15:54:38
5 * @FilePath: /xysBooking/src/views/me.vue 5 * @FilePath: /xysBooking/src/views/me.vue
6 * @Description: 我的页面 6 * @Description: 我的页面
7 --> 7 -->
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 </div> 31 </div>
32 </div> 32 </div>
33 <div style="height: 8rem;"></div> 33 <div style="height: 8rem;"></div>
34 - <div class="index-nav"> 34 + <!-- <div class="index-nav">
35 <div class="nav-logo" @click="toHome"> 35 <div class="nav-logo" @click="toHome">
36 <van-icon size="1.5rem" :name="icon_3" color="#A67939" /> 36 <van-icon size="1.5rem" :name="icon_3" color="#A67939" />
37 首页 37 首页
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
45 <van-icon size="1.5rem" :name="icon_5" color="#A67939" /> 45 <van-icon size="1.5rem" :name="icon_5" color="#A67939" />
46 我的 46 我的
47 </div> 47 </div>
48 - </div> 48 + </div> -->
49 </div> 49 </div>
50 </template> 50 </template>
51 51
......
1 +<!--
2 + * @Date: 2024-01-29 14:52:46
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-01-29 16:11:15
5 + * @FilePath: /xysBooking/src/views/my.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="my-page">
10 + <div v-for="(item, index) in menu_list" :key="index" class="my-item" @click="go(item.to)">
11 + <div class="left">
12 + <van-icon size="1rem" :name="item.icon" color="#A67939" />&nbsp;
13 + {{ item.name }}
14 + </div>
15 + <div>
16 + <van-icon name="arrow" size="1.2rem" />
17 + </div>
18 + </div>
19 + <div class="index-nav">
20 + <div class="nav-logo" @click="toHome">
21 + <van-icon size="1.5rem" :name="icon_3" color="#A67939" />
22 + 首页
23 + </div>
24 + <div class="nav-logo" @click="toCode">
25 + <van-icon size="5rem" :name="icon_4" color="#A67939" style="position: absolute; top: -4rem;" />
26 + <van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" />
27 + 预约码
28 + </div>
29 + <div class="nav-logo">
30 + <van-icon size="1.5rem" :name="icon_5" color="#A67939" />
31 + 我的
32 + </div>
33 + </div>
34 + </div>
35 +</template>
36 +
37 +<script setup>
38 +import { ref } from 'vue'
39 +import { useRoute, useRouter } from 'vue-router'
40 +import { useGo } from '@/hooks/useGo'
41 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
42 +//import { } from '@/utils/generateModules.js'
43 +//import { } from '@/utils/generateIcons.js'
44 +//import { } from '@/composables'
45 +import icon_1 from '@/assets/images/立即预约@2x.png'
46 +import icon_2 from '@/assets/images/预约记录@2x.png'
47 +import icon_3 from '@/assets/images/首页01@2x.png'
48 +import icon_4 from '@/assets/images/二维码icon.png'
49 +import icon_5 from '@/assets/images/我的02@2x.png'
50 +import icon_6 from '@/assets/images/我的01@2x.png'
51 +import icon_7 from '@/assets/images/二维码@2x2.png'
52 +
53 +const $route = useRoute();
54 +const $router = useRouter();
55 +useTitle($route.meta.title);
56 +
57 +const go = useGo();
58 +
59 +const toCode = () => { // 跳转到预约码
60 + // go('/bookingCode');
61 + window.location.replace(location.origin + location.pathname + '#/bookingCode');
62 +}
63 +const toHome = () => { // 跳转到首页
64 + // go('/');
65 + window.location.replace(location.origin + location.pathname + '#/');
66 +}
67 +
68 +const menu_list = [{
69 + icon: icon_2,
70 + name: '预约记录',
71 + to: '/bookingList'
72 +}, {
73 + icon: icon_6,
74 + name: '参观者',
75 + to: '/me'
76 +}, {
77 + icon: icon_7,
78 + name: '邀请码',
79 + to: '/search'
80 +}]
81 +</script>
82 +
83 +<style lang="less" scoped>
84 +.my-page {
85 + position: relative;
86 + // height: 100vh;
87 + .my-item {
88 + padding: 1rem;
89 + display: flex;
90 + justify-content:space-between;
91 + align-items: center;
92 + margin: 1rem;
93 + background-color: #FFF;
94 + border-radius: 5px;
95 + .left {
96 + color: #A67939; display: flex; align-items: center;
97 + }
98 + }
99 + .index-nav {
100 + position: fixed;
101 + bottom: 0;
102 + left: 0;
103 + width: 100vw;
104 + height: 10vh;
105 + background: #FFFFFF;
106 + box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
107 + display: flex;
108 + align-items: center;
109 + justify-content: space-around;
110 + color: #A67939;
111 + .nav-logo {
112 + position: relative;
113 + display: flex;
114 + flex-direction: column;
115 + align-items: center;
116 + }
117 + }
118 +}
119 +</style>
1 <!-- 1 <!--
2 * @Date: 2024-01-15 11:43:01 2 * @Date: 2024-01-15 11:43:01
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-25 09:15:53 4 + * @LastEditTime: 2024-01-29 06:59:32
5 * @FilePath: /xysBooking/src/views/notice.vue 5 * @FilePath: /xysBooking/src/views/notice.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <p> 12 <p>
13 为了您和他人的健康与安全，维护清净庄严的寺院环境，营造一个喜悦而祥和的节日氛围，请您留意并遵守以下注意事项： 13 为了您和他人的健康与安全，维护清净庄严的寺院环境，营造一个喜悦而祥和的节日氛围，请您留意并遵守以下注意事项：
14 </p> 14 </p>
15 - <p>1、进寺后请全程佩戴口罩。</p> 15 + <!-- <p>1、进寺后请全程佩戴口罩。</p>
16 <p>2、敬香贵在心诚，不在数量多少。请带着虔诚心、恭敬心和清净心敬香礼佛。</p> 16 <p>2、敬香贵在心诚，不在数量多少。请带着虔诚心、恭敬心和清净心敬香礼佛。</p>
17 <p>3、请不要自带香烛进寺院点燃，禁止燃放烟花爆竹。</p> 17 <p>3、请不要自带香烛进寺院点燃，禁止燃放烟花爆竹。</p>
18 <p>4、山门殿两侧设有赠香处，凭香花券可免费领取三支清香。</p> 18 <p>4、山门殿两侧设有赠香处，凭香花券可免费领取三支清香。</p>
...@@ -21,10 +21,9 @@ ...@@ -21,10 +21,9 @@
21 <p>7、点燃后的香烛请放入指定的地点，禁止将香烛带入天王殿内。</p> 21 <p>7、点燃后的香烛请放入指定的地点，禁止将香烛带入天王殿内。</p>
22 <p>8、请照看好身边的家人，以免走散或发生意外。</p> 22 <p>8、请照看好身边的家人，以免走散或发生意外。</p>
23 <p>9、请保管好自己随身携带的钱物，以免丢失给您带来麻烦。</p> 23 <p>9、请保管好自己随身携带的钱物，以免丢失给您带来麻烦。</p>
24 - <p> 24 + <p>10、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话：0512-65349545.</p>
25 - 10、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话：0512-65349545. 25 + <p>11、预约如需退款，请在初七之后，到客堂办理。</p> -->
26 - </p> 26 + <p v-for="(item, index) in note_text" :key="index">{{ item }}</p>
27 - <p>11、预约如需退款，请在初七之后，到客堂办理。</p>
28 <p>谢谢您的支持与配合。祝您新春吉祥、万事如意</p> 27 <p>谢谢您的支持与配合。祝您新春吉祥、万事如意</p>
29 </div> 28 </div>
30 <div style="height: 8rem"></div> 29 <div style="height: 8rem"></div>
...@@ -70,7 +69,17 @@ const $router = useRouter(); ...@@ -70,7 +69,17 @@ const $router = useRouter();
70 useTitle($route.meta.title); 69 useTitle($route.meta.title);
71 70
72 const go = useGo(); 71 const go = useGo();
73 - 72 +const note_text = [
73 + '1、敬香贵在心诚，不在数量多少。三支清香，可表心诚。请带着虔诚心、恭敬心和清净心敬香礼佛。',
74 + '2、请不要自带香烛进寺院。山门殿两侧设有赠香处，凭香花券可免费领取三支清香。',
75 + '3、点燃香烛时请多加小心，以免灼伤自己与他人。',
76 + '4、请在指定燃香处燃香，禁止将香烛带入殿堂。禁止燃放烟花爆竹。',
77 + '5、请爱护公共绿地，请不要踩踏及在草坪上点烛燃香。',
78 + '6、请照看好身边的家人，以免走散。',
79 + '7、请保管好自己随身携带的钱物，以免丢失给您带来麻烦。',
80 + '8、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话:0512-65349545。',
81 + '9、预约如需退款，请在初七之后，到客堂办理。',
82 +];
74 const checked = ref(["0"]); 83 const checked = ref(["0"]);
75 84
76 const confirmBtn = () => { 85 const confirmBtn = () => {
......
1 +<!--
2 + * @Date: 2024-01-16 13:33:36
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-01-29 14:24:56
5 + * @FilePath: /xysBooking/src/views/visitorList.vue
6 + * @Description: 我的页面
7 +-->
8 +<template>
9 + <div class="me-page">
10 + <div class="me-content">
11 + <div class="title">
12 + <div class="text">参观者信息</div>
13 + </div>
14 + <div @click="() => { go('/addVisitor') }" class="add-visitors">
15 + <div><van-icon name="plus" /> 添加参观者</div>
16 + </div>
17 + <div v-if="visitorList.length" class="visitors-list">
18 + <div v-for="(item, index) in visitorList" :key="index" class="visitor-item">
19 + <div>
20 + <p style="color: #A67939;">{{ item.name }}</p>
21 + <p>证件号：{{ formatId(item.id_number) }}</p>
22 + </div>
23 + <div @click="removeItem(item)" style="margin-left: 1rem;">
24 + <van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" />
25 + </div>
26 + </div>
27 + </div>
28 + <div v-else class="no-visitors-list">
29 + <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
30 + <div class="no-visitors-list-title">您还没有添加过参观者</div>
31 + </div>
32 + </div>
33 + </div>
34 +</template>
35 +
36 +<script setup>
37 +import { ref } from 'vue'
38 +import { useRoute, useRouter } from 'vue-router'
39 +import { useGo } from '@/hooks/useGo'
40 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
41 +//import { } from '@/utils/generateModules.js'
42 +//import { } from '@/utils/generateIcons.js'
43 +//import { } from '@/composables'
44 +import { showConfirmDialog } from 'vant';
45 +import { showSuccessToast, showFailToast } from 'vant';
46 +import { personListAPI, delPersonAPI } from '@/api/index'
47 +import icon_1 from '@/assets/images/立即预约@2x.png'
48 +import icon_2 from '@/assets/images/预约记录@2x.png'
49 +import icon_3 from '@/assets/images/首页01@2x.png'
50 +import icon_4 from '@/assets/images/二维码icon.png'
51 +import icon_5 from '@/assets/images/我的02@2x.png'
52 +const go = useGo();
53 +const $route = useRoute();
54 +const $router = useRouter();
55 +useTitle($route.meta.title);
56 +
57 +const toCode = () => { // 跳转到预约码
58 + // go('/bookingCode');
59 + window.location.replace(location.origin + location.pathname + '#/bookingCode');
60 +}
61 +const toHome = () => { // 跳转到首页
62 + // go('/');
63 + window.location.replace(location.origin + location.pathname + '#/');
64 +}
65 +
66 +const visitorList = ref([]);
67 +
68 +/**
69 + * 生成15位身份证号中间8位替换为*号
70 + * @param {*} inputString
71 + */
72 +function replaceMiddleCharacters(inputString) {
73 + if (inputString.length < 15) {
74 + return inputString; // 字符串长度不足，不进行替换
75 + }
76 +
77 + const start = Math.floor((inputString.length - 8) / 2); // 开始替换的索引位置
78 + const end = start + 8; // 结束替换的索引位置
79 +
80 + const replacement = '*'.repeat(8); // 生成包含8个*号的字符串
81 +
82 + const replacedString = inputString.substring(0, start) + replacement + inputString.substring(end);
83 + return replacedString;
84 +}
85 +
86 +const formatId = (id) => {
87 + return replaceMiddleCharacters(id);
88 +};
89 +
90 +const removeItem = (item) => {
91 + showConfirmDialog({
92 + title: '温馨提示',
93 + message: '是否确认删除参观者信息？',
94 + confirmButtonColor: '#A67939',
95 + width: '80vw'
96 + })
97 + .then(async () => {
98 + // on confirm
99 + const { code, data } = await delPersonAPI({ person_id: item.id });
100 + if (code) {
101 + showSuccessToast('删除成功');
102 + visitorList.value = visitorList.value.filter((v) => v.id !== item.id);
103 + }
104 + })
105 + .catch(() => {
106 + // on cancel
107 + });
108 +}
109 +
110 +onMounted(async () => {
111 + const { code, data } = await personListAPI();
112 + if (code) {
113 + visitorList.value = data;
114 + }
115 +})
116 +</script>
117 +
118 +<style lang="less" scoped>
119 +.me-page {
120 + position: relative;
121 + height: 100vh;
122 + .me-content {
123 +
124 + margin: 0 1rem;
125 + .title {
126 + padding: 0.5rem 0.75rem;
127 + padding-top: 1rem;
128 + padding-left: 0;
129 + display: flex;
130 + justify-content: space-between;
131 + align-items: center;
132 + .text {
133 + &::before {
134 + content: '';
135 + border: 2px solid #A67939;
136 + margin-right: 0.5rem;
137 + }
138 + }
139 + .day {
140 + background-color: #FFFBF3;
141 + border-radius: 7px;
142 + border: 1px solid #A67939;
143 + padding: 0.2rem 0.5rem;
144 + color: #A67939;
145 + }
146 + }
147 + .add-visitors {
148 + border: 1px dashed #A67939;
149 + color: #A67939;
150 + border-radius: 5px;
151 + text-align: center;
152 + padding: .65rem 0;
153 + margin: 1rem 0;
154 + font-size: 1.15rem;
155 + }
156 + .visitors-list {
157 + .visitor-item {
158 + background-color: #FFF;
159 + border-radius: 8px;
160 + padding: 1rem;
161 + margin-bottom: 1rem;
162 + display: flex;
163 + align-items: center;
164 + justify-content: space-between;
165 + }
166 + }
167 + .no-visitors-list {
168 + display: flex;
169 + justify-content: center;
170 + align-items: center;
171 + flex-direction: column;
172 + img {
173 + margin-top: 1rem;
174 + margin-bottom: 1rem;
175 + width: 10rem;
176 + }
177 + .no-visitors-list-title {
178 + color: #A67939;
179 + font-size: 1.05rem;
180 + }
181 + }
182 + }
183 +
184 + .index-nav {
185 + position: fixed;
186 + bottom: 0;
187 + left: 0;
188 + width: 100vw;
189 + height: 10vh;
190 + background: #FFFFFF;
191 + box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
192 + display: flex;
193 + align-items: center;
194 + justify-content: space-around;
195 + color: #A67939;
196 + .nav-logo {
197 + position: relative;
198 + display: flex;
199 + flex-direction: column;
200 + align-items: center;
201 + }
202 + }
203 +}
204 +</style>