mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-06 03:58:00 +08:00
821 lines
22 KiB
Vue
821 lines
22 KiB
Vue
<template>
|
||
<div class="index-container">
|
||
<el-row :gutter="20">
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||
<el-alert v-if="noticeList[0]" :closable="noticeList[0].closable">
|
||
<div
|
||
style="display: flex; align-items: center; justify-content: center"
|
||
>
|
||
<a
|
||
target="_blank"
|
||
href="https://github.com/chuzhixin/vue-admin-beautiful"
|
||
>
|
||
<img
|
||
style="margin-right: 10px"
|
||
src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=flat-square&label=Stars&logo=github"
|
||
/>
|
||
</a>
|
||
{{ noticeList[0].title }}
|
||
</div>
|
||
</el-alert>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
||
<el-card shadow="never">
|
||
<div slot="header">
|
||
<span>访问量</span>
|
||
</div>
|
||
<vab-chart
|
||
:autoresize="true"
|
||
theme="vab-echarts-theme"
|
||
:options="fwl"
|
||
/>
|
||
<div class="bottom">
|
||
<span>
|
||
日均访问量:
|
||
|
||
<vab-count
|
||
:start-val="config1.startVal"
|
||
:end-val="config1.endVal"
|
||
:duration="config1.duration"
|
||
:separator="config1.separator"
|
||
:prefix="config1.prefix"
|
||
:suffix="config1.suffix"
|
||
:decimals="config1.decimals"
|
||
/>
|
||
</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
||
<el-card shadow="never">
|
||
<div slot="header">
|
||
<span>授权数</span>
|
||
</div>
|
||
<vab-chart
|
||
:autoresize="true"
|
||
theme="vab-echarts-theme"
|
||
:options="sqs"
|
||
/>
|
||
<div class="bottom">
|
||
<span>
|
||
总授权数:
|
||
<vab-count
|
||
:start-val="config2.startVal"
|
||
:end-val="config2.endVal"
|
||
:duration="config2.duration"
|
||
:separator="config2.separator"
|
||
:prefix="config2.prefix"
|
||
:suffix="config2.suffix"
|
||
:decimals="config2.decimals"
|
||
/>
|
||
</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<el-card shadow="never">
|
||
<div slot="header">
|
||
<span>词云</span>
|
||
</div>
|
||
<vab-chart
|
||
:autoresize="true"
|
||
theme="vab-echarts-theme"
|
||
:options="cy"
|
||
@zr:click="handleZrClick"
|
||
@click="handleClick"
|
||
/>
|
||
<div class="bottom">
|
||
<span>
|
||
词云数量:
|
||
<vab-count
|
||
:start-val="config3.startVal"
|
||
:end-val="config3.endVal"
|
||
:duration="config3.duration"
|
||
:separator="config3.separator"
|
||
:prefix="config3.prefix"
|
||
:suffix="config3.suffix"
|
||
:decimals="config3.decimals"
|
||
/>
|
||
</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col
|
||
v-for="(item, index) in iconList"
|
||
:key="index"
|
||
:xs="12"
|
||
:sm="6"
|
||
:md="3"
|
||
:lg="3"
|
||
:xl="3"
|
||
>
|
||
<router-link :to="item.link" target="_blank">
|
||
<el-card class="icon-panel" shadow="never">
|
||
<vab-icon
|
||
:style="{ color: item.color }"
|
||
:icon="['fas', item.icon]"
|
||
></vab-icon>
|
||
<p>{{ item.title }}</p>
|
||
</el-card>
|
||
</router-link>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="13" :xl="13">
|
||
<el-card class="card" shadow="never">
|
||
<div slot="header">
|
||
<span>GDP分布图</span>
|
||
</div>
|
||
<vab-chart
|
||
:autoresize="true"
|
||
theme="vab-echarts-theme"
|
||
:options="zgdt"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
|
||
<el-card class="card" shadow="never">
|
||
<div slot="header">
|
||
<span>依赖信息</span>
|
||
<div style="float: right">部署时间:{{ updateTime }}</div>
|
||
</div>
|
||
<div class="bottom-btn">
|
||
<el-popover placement="top" width="250" trigger="hover">
|
||
<p>
|
||
这是一个付费群，谢谢您愿意支持开源，加群获取详细文档，群内提供vue-admin-beautiful-template基础模板
|
||
</p>
|
||
<el-image :src="require('@/assets/ewm.png')"></el-image>
|
||
<a slot="reference" target="_blank">
|
||
<el-button type="primary">QQ讨论群</el-button>
|
||
</a>
|
||
</el-popover>
|
||
<a @click="handleChangeTheme">
|
||
<el-button type="danger">修改主题和布局</el-button>
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
href="https://github.com/chuzhixin/vue-admin-beautiful"
|
||
>
|
||
<el-button type="warning">
|
||
github下载源码点star（实时更新）
|
||
</el-button>
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
href="https://gitee.com/chu1204505056/vue-admin-beautiful"
|
||
>
|
||
<el-button type="warning">码云下载源码点star</el-button>
|
||
</a>
|
||
<el-popover placement="top" width="250" trigger="hover">
|
||
<p>
|
||
谢谢您愿意支持开源，加群获取详细教程，群内提供vue-admin-beautiful-template基础模板
|
||
</p>
|
||
<el-image :src="require('@/assets/ewm.png')"></el-image>
|
||
<a slot="reference" target="_blank">
|
||
<el-button type="warning">文档</el-button>
|
||
</a>
|
||
</el-popover>
|
||
</div>
|
||
<table class="table">
|
||
<tr>
|
||
<td>@vue/cli版本</td>
|
||
<td>{{ devDependencies['@vue/cli-service'] }}</td>
|
||
<td>vue版本</td>
|
||
<td>{{ dependencies['vue'] }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>vuex版本</td>
|
||
<td>{{ dependencies['vuex'] }}</td>
|
||
<td>vue-router版本</td>
|
||
<td>{{ dependencies['vue-router'] }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>element-ui版本</td>
|
||
<td>{{ dependencies['element-ui'] }}</td>
|
||
<td>axios版本</td>
|
||
<td>{{ dependencies['axios'] }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>eslint版本</td>
|
||
<td>{{ devDependencies['eslint'] }}</td>
|
||
<td>prettier版本</td>
|
||
<td>{{ devDependencies['prettier'] }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>sass版本</td>
|
||
<td>{{ devDependencies['sass'] }}</td>
|
||
<td>mockjs版本</td>
|
||
<td>{{ dependencies['mockjs'] }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>zx-layouts版本</td>
|
||
<td>{{ dependencies['zx-layouts'] }}</td>
|
||
<td>lodash版本</td>
|
||
<td>{{ dependencies['lodash'] }}</td>
|
||
</tr>
|
||
</table>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||
<el-card class="card" shadow="never">
|
||
<div slot="header">
|
||
<span>更新日志</span>
|
||
</div>
|
||
<el-timeline :reverse="reverse">
|
||
<el-timeline-item
|
||
v-for="(activity, index) in activities"
|
||
:key="index"
|
||
:timestamp="activity.timestamp"
|
||
:color="activity.color"
|
||
>
|
||
{{ activity.content }}
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||
<el-card shadow="never">
|
||
<div slot="header">
|
||
<span>其他信息</span>
|
||
</div>
|
||
<div style="text-align: center">
|
||
<vab-colorful-icon style="font-size: 140px" icon-class="vab" />
|
||
<h1 style="font-size: 30px">vue-admin-beautiful</h1>
|
||
</div>
|
||
<div v-for="(item, index) in noticeList" :key="index">
|
||
<el-alert
|
||
v-if="index !== 0"
|
||
:title="item.title"
|
||
:type="item.type"
|
||
:closable="item.closable"
|
||
></el-alert>
|
||
<br />
|
||
</div>
|
||
<el-alert :closable="false" :title="userAgent" type="info"></el-alert>
|
||
<br />
|
||
</el-card>
|
||
<el-card shadow="never">
|
||
<div slot="header">
|
||
<span>关于开发者</span>
|
||
</div>
|
||
<img
|
||
src="https://github-readme-stats.vercel.app/api?username=chuzhixin"
|
||
alt=""
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import VabChart from '@/plugins/echarts'
|
||
import { dependencies, devDependencies } from '../../../package.json'
|
||
import { getList } from '@/api/changeLog'
|
||
import { getNoticeList } from '@/api/notice'
|
||
import { getRepos, getStargazers } from '@/api/github'
|
||
export default {
|
||
name: 'Index',
|
||
components: {
|
||
VabChart,
|
||
},
|
||
data() {
|
||
return {
|
||
timer: 0,
|
||
updateTime: process.env.VUE_APP_UPDATE_TIME,
|
||
nodeEnv: process.env.NODE_ENV,
|
||
dependencies: dependencies,
|
||
devDependencies: devDependencies,
|
||
config1: {
|
||
startVal: 0,
|
||
endVal: this.$baseLodash.random(20000, 60000),
|
||
decimals: 0,
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 8000,
|
||
},
|
||
config2: {
|
||
startVal: 0,
|
||
endVal: this.$baseLodash.random(1000, 20000),
|
||
decimals: 0,
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 8000,
|
||
},
|
||
config3: {
|
||
startVal: 0,
|
||
endVal: this.$baseLodash.random(1000, 20000),
|
||
decimals: 0,
|
||
prefix: '',
|
||
suffix: '',
|
||
separator: ',',
|
||
duration: 8000,
|
||
},
|
||
|
||
//访问量
|
||
fwl: {
|
||
grid: {
|
||
top: '4%',
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '0%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [],
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '访问量',
|
||
type: 'line',
|
||
data: [],
|
||
smooth: true,
|
||
areaStyle: {},
|
||
},
|
||
],
|
||
},
|
||
//授权数
|
||
sqs: {
|
||
grid: {
|
||
top: '4%',
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '0%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
/*boundaryGap: false,*/
|
||
data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '授权数',
|
||
type: 'bar',
|
||
barWidth: '60%',
|
||
data: [10, 52, 20, 33, 39, 33, 22],
|
||
},
|
||
],
|
||
},
|
||
//词云
|
||
cy: {
|
||
grid: {
|
||
top: '4%',
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '0%',
|
||
},
|
||
series: [
|
||
{
|
||
type: 'wordCloud',
|
||
gridSize: 15,
|
||
sizeRange: [12, 40],
|
||
rotationRange: [0, 0],
|
||
width: '100%',
|
||
height: '100%',
|
||
textStyle: {
|
||
normal: {
|
||
color() {
|
||
const arr = [
|
||
'#1890FF',
|
||
'#36CBCB',
|
||
'#4ECB73',
|
||
'#FBD437',
|
||
'#F2637B',
|
||
'#975FE5',
|
||
]
|
||
let index = Math.floor(Math.random() * arr.length)
|
||
return arr[index]
|
||
},
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
name: 'vue-admin-beautiful',
|
||
value: 15000,
|
||
},
|
||
{
|
||
name: 'element',
|
||
value: 10081,
|
||
},
|
||
{
|
||
name: 'beautiful',
|
||
value: 9386,
|
||
},
|
||
|
||
{
|
||
name: 'vue',
|
||
value: 6500,
|
||
},
|
||
{
|
||
name: 'chuzhixin',
|
||
value: 6000,
|
||
},
|
||
{
|
||
name: 'good',
|
||
value: 4500,
|
||
},
|
||
{
|
||
name: 'success',
|
||
value: 3800,
|
||
},
|
||
{
|
||
name: 'never',
|
||
value: 3000,
|
||
},
|
||
{
|
||
name: 'boy',
|
||
value: 2500,
|
||
},
|
||
{
|
||
name: 'girl',
|
||
value: 2300,
|
||
},
|
||
{
|
||
name: 'github',
|
||
value: 2000,
|
||
},
|
||
{
|
||
name: 'hbuilder',
|
||
value: 1900,
|
||
},
|
||
{
|
||
name: 'dcloud',
|
||
value: 1800,
|
||
},
|
||
{
|
||
name: 'china',
|
||
value: 1700,
|
||
},
|
||
{
|
||
name: '1204505056',
|
||
value: 1600,
|
||
},
|
||
{
|
||
name: '972435319',
|
||
value: 1500,
|
||
},
|
||
{
|
||
name: 'young',
|
||
value: 1200,
|
||
},
|
||
{
|
||
name: 'old',
|
||
value: 1100,
|
||
},
|
||
{
|
||
name: 'vuex',
|
||
value: 900,
|
||
},
|
||
{
|
||
name: 'router',
|
||
value: 800,
|
||
},
|
||
{
|
||
name: 'money',
|
||
value: 700,
|
||
},
|
||
{
|
||
name: 'qingdao',
|
||
value: 800,
|
||
},
|
||
{
|
||
name: 'yantai',
|
||
value: 9000,
|
||
},
|
||
{
|
||
name: 'author is very cool',
|
||
value: 9200,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
//中国地图
|
||
zgdt: {
|
||
title: {
|
||
text: '2099年全国GDP分布',
|
||
subtext: '数据来自vue-admin-beautiful杜撰',
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
dataRange: {
|
||
orient: 'horizontal',
|
||
min: 0,
|
||
max: 55000,
|
||
text: ['高', '低'],
|
||
splitNumber: 0,
|
||
},
|
||
series: [
|
||
{
|
||
name: '2099年全国GDP分布',
|
||
type: 'map',
|
||
roam: false,
|
||
zoom: 1.25,
|
||
mapType: 'china',
|
||
mapLocation: {
|
||
x: 'center',
|
||
},
|
||
selectedMode: 'multiple',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
},
|
||
data: [
|
||
{ name: '西藏', value: 605.83 },
|
||
{ name: '青海', value: 1670.44 },
|
||
{ name: '宁夏', value: 2102.21 },
|
||
{ name: '海南', value: 2522.66 },
|
||
{ name: '甘肃', value: 5020.37 },
|
||
{ name: '贵州', value: 5701.84 },
|
||
{ name: '新疆', value: 6610.05 },
|
||
{ name: '云南', value: 8893.12 },
|
||
{ name: '重庆', value: 10011.37 },
|
||
{ name: '吉林', value: 10568.83 },
|
||
{ name: '山西', value: 11237.55 },
|
||
{ name: '天津', value: 11307.28 },
|
||
{ name: '江西', value: 11702.82 },
|
||
{ name: '广西', value: 11720.87 },
|
||
{ name: '陕西', value: 12512.3 },
|
||
{ name: '黑龙江', value: 12582 },
|
||
{ name: '内蒙古', value: 14359.88 },
|
||
{ name: '安徽', value: 15300.65 },
|
||
{ name: '北京', value: 16251.93 },
|
||
{ name: '福建', value: 17560.18 },
|
||
{ name: '上海', value: 19195.69 },
|
||
{ name: '湖北', value: 19632.26 },
|
||
{ name: '湖南', value: 19669.56 },
|
||
{ name: '四川', value: 21026.68 },
|
||
{ name: '辽宁', value: 22226.7 },
|
||
{ name: '河北', value: 24515.76 },
|
||
{ name: '河南', value: 26931.03 },
|
||
{ name: '浙江', value: 32318.85 },
|
||
{ name: '山东', value: 45361.85, selected: true },
|
||
{ name: '江苏', value: 49110.27 },
|
||
{ name: '广东', value: 53210.28 },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
|
||
//更新日志
|
||
reverse: true,
|
||
activities: [],
|
||
noticeList: [],
|
||
//其他信息
|
||
userAgent: navigator.userAgent,
|
||
//卡片图标
|
||
iconList: [
|
||
{
|
||
icon: 'video',
|
||
title: '视频播放器',
|
||
link: '/vab/player',
|
||
color: '#ffc069',
|
||
},
|
||
{
|
||
icon: 'table',
|
||
title: '表格',
|
||
link: '/vab/table/comprehensiveTable',
|
||
color: '#5cdbd3',
|
||
},
|
||
{
|
||
icon: 'laptop-code',
|
||
title: '源码',
|
||
link: 'https://github.com/chuzhixin/vue-admin-beautiful',
|
||
color: '#b37feb',
|
||
},
|
||
{
|
||
icon: 'book',
|
||
title: '书籍',
|
||
link: '',
|
||
color: '#69c0ff',
|
||
},
|
||
{
|
||
icon: 'bullhorn',
|
||
title: '公告',
|
||
link: '',
|
||
color: '#ff85c0',
|
||
},
|
||
{
|
||
icon: 'gift',
|
||
title: '礼物',
|
||
link: '',
|
||
color: '#ffd666',
|
||
},
|
||
|
||
{
|
||
icon: 'balance-scale-left',
|
||
title: '公平的世界',
|
||
link: '',
|
||
color: '#ff9c6e',
|
||
},
|
||
{
|
||
icon: 'coffee',
|
||
title: '休息一下',
|
||
link: '',
|
||
color: '#95de64',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
created() {
|
||
this.fetchData()
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timer)
|
||
},
|
||
mounted() {
|
||
let base = +new Date(2020, 1, 1)
|
||
let oneDay = 24 * 3600 * 1000
|
||
let date = []
|
||
|
||
let data = [Math.random() * 1500]
|
||
let now = new Date(base)
|
||
|
||
const addData = (shift) => {
|
||
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
|
||
date.push(now)
|
||
data.push(this.$baseLodash.random(20000, 60000))
|
||
|
||
if (shift) {
|
||
date.shift()
|
||
data.shift()
|
||
}
|
||
|
||
now = new Date(+new Date(now) + oneDay)
|
||
}
|
||
|
||
for (let i = 1; i < 6; i++) {
|
||
addData()
|
||
}
|
||
addData(true)
|
||
this.fwl.xAxis[0].data = date
|
||
this.fwl.series[0].data = data
|
||
this.timer = setInterval(() => {
|
||
addData(true)
|
||
this.fwl.xAxis[0].data = date
|
||
this.fwl.series[0].data = data
|
||
}, 3000)
|
||
},
|
||
methods: {
|
||
handleClick(e) {
|
||
this.$baseMessage(`点击了${e.name},这里可以写跳转`)
|
||
},
|
||
handleZrClick(e) {},
|
||
handleChangeTheme() {
|
||
this.$baseEventBus.$emit('theme')
|
||
},
|
||
async fetchData() {
|
||
const { data } = await getList()
|
||
data.map((item, index) => {
|
||
if (index === data.length - 1) {
|
||
item.color = '#0bbd87'
|
||
}
|
||
})
|
||
this.activities = data
|
||
const res = await getNoticeList()
|
||
this.noticeList = res.data
|
||
/* getRepos({
|
||
token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
|
||
}).then((res) => {
|
||
const per_page = Math.ceil(res.data.stargazers_count / 100);
|
||
alert(per_page);
|
||
getStargazers({
|
||
token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
|
||
page: 1,
|
||
per_page: res.per_page,
|
||
}).then((res) => {
|
||
alert(JSON.stringify(res));
|
||
});
|
||
}); */
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.index-container {
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
background: #f5f7f8 !important;
|
||
|
||
::v-deep {
|
||
.el-alert {
|
||
padding: $base-padding;
|
||
|
||
&--info.is-light {
|
||
min-height: 82px;
|
||
padding: $base-padding;
|
||
margin-bottom: 15px;
|
||
color: #909399;
|
||
background-color: $base-color-white;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
}
|
||
|
||
.el-card__body {
|
||
.echarts {
|
||
width: 100%;
|
||
height: 125px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card {
|
||
min-height: 400px;
|
||
|
||
::v-deep {
|
||
.el-card__body {
|
||
.echarts {
|
||
width: 100%;
|
||
height: 305px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
padding-top: 20px;
|
||
margin-top: 5px;
|
||
color: #595959;
|
||
text-align: left;
|
||
border-top: 1px solid $base-border-color;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
color: #666;
|
||
border-collapse: collapse;
|
||
background-color: #fff;
|
||
|
||
td {
|
||
position: relative;
|
||
min-height: 20px;
|
||
padding: 9px 15px;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
border: 1px solid #e6e6e6;
|
||
|
||
&:nth-child(odd) {
|
||
width: 20%;
|
||
text-align: right;
|
||
background-color: #f7f7f7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon-panel {
|
||
height: 100px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
|
||
svg {
|
||
font-size: 40px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.bottom-btn {
|
||
button {
|
||
margin: 5px 10px 15px 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|