792 lines
20 KiB
Vue
792 lines
20 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-aside width="287px">
|
||
<div class="asideHeader">
|
||
<h2 class="asideTitle">防疫通行数据对比</h2>
|
||
<div class="exportData" @click="exportData">导出所有数据</div>
|
||
</div>
|
||
<div class="searchBox">
|
||
<el-input
|
||
placeholder="请输入关键字搜索"
|
||
prefix-icon="el-icon-search"
|
||
v-model="searchWord"
|
||
class="searchInput"
|
||
clearable
|
||
>
|
||
</el-input>
|
||
<el-button
|
||
class="searchBtn"
|
||
type="primary"
|
||
size="small"
|
||
@click="searchCompany"
|
||
>搜索</el-button
|
||
>
|
||
</div>
|
||
<div class="projectList">
|
||
<vue-scroll style="height: 100%">
|
||
<ul>
|
||
<li
|
||
class="list-item"
|
||
v-for="(item, index) in projectList"
|
||
:key="item.enterpriseId"
|
||
:class="dataIndex === index ? 'active' : ''"
|
||
@click="clickList(index, item)"
|
||
>
|
||
{{ item.name }}
|
||
</li>
|
||
</ul>
|
||
</vue-scroll>
|
||
</div>
|
||
</el-aside>
|
||
<el-main>
|
||
<div class="main-header">
|
||
<div class="header-box">
|
||
<img src="@/assets/images/laborManage/totalNum.png" alt="" />
|
||
<div>
|
||
<p>实名人数</p>
|
||
<h2>{{ statisticalData.workerNum }}</h2>
|
||
</div>
|
||
</div>
|
||
<div class="header-box">
|
||
<img src="@/assets/images/laborManage/greenCode.png" alt="" />
|
||
<div>
|
||
<p>昌通码绿码人数</p>
|
||
<h2>{{ statisticalData.greenCodeNum }}</h2>
|
||
</div>
|
||
</div>
|
||
<div class="header-box">
|
||
<img src="@/assets/images/laborManage/abnormalCode.png" alt="" />
|
||
<div>
|
||
<p>异常码人数</p>
|
||
<h2>{{ statisticalData.abnormalNum }}</h2>
|
||
</div>
|
||
</div>
|
||
<div class="header-box">
|
||
<img src="@/assets/images/laborManage/inNum.png" alt="" />
|
||
<div>
|
||
<p>进入人数</p>
|
||
<h2>{{ statisticalData.inNum }}</h2>
|
||
</div>
|
||
</div>
|
||
<div class="header-box">
|
||
<img src="@/assets/images/laborManage/outNum.png" alt="" />
|
||
<div>
|
||
<p>外出人数</p>
|
||
<h2>{{ statisticalData.outNum }}</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main-middle">
|
||
<div class="abnormalAnalysis" ref="abnormalAnalysis"></div>
|
||
<div class="btnBox">
|
||
<el-button
|
||
size="mini"
|
||
:class="selectType === 1 ? 'activeBtn' : ''"
|
||
@click="selectDate(1)"
|
||
>近7天</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
:class="selectType === 2 ? 'activeBtn' : ''"
|
||
@click="selectDate(2)"
|
||
>近30天</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="main-footer">
|
||
<div class="contrastAnalysis" ref="contrastAnalysis"></div>
|
||
<div class="btnBox">
|
||
<el-button
|
||
size="mini"
|
||
:class="selectType_contrast === 1 ? 'activeBtn' : ''"
|
||
@click="selectDate_contrast(1)"
|
||
>近7天</el-button
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
:class="selectType_contrast === 2 ? 'activeBtn' : ''"
|
||
@click="selectDate_contrast(2)"
|
||
>近30天</el-button
|
||
>
|
||
</div>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
plain
|
||
class="exportForm"
|
||
@click="exportForm"
|
||
>导出表格</el-button
|
||
>
|
||
<el-dialog
|
||
title="请选择下载日期"
|
||
:visible.sync="selectTime"
|
||
width="30%"
|
||
>
|
||
<el-form
|
||
:model="ruleForm"
|
||
:rules="rules"
|
||
ref="ruleForm"
|
||
label-width="100px"
|
||
>
|
||
<el-form-item label="选择时间" prop="time">
|
||
<el-date-picker
|
||
v-model="ruleForm.time"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
style="width: 80%;"
|
||
@change="getTime"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="selectTime = false">取 消</el-button>
|
||
<el-button type="primary" @click="submit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts4";
|
||
import {
|
||
selectProjectAllEnterpriseList,
|
||
getProjectChartData,
|
||
getProjectDetailData,
|
||
} from "@/assets/js/api/laborPerson.js";
|
||
import moment from "moment";
|
||
export default {
|
||
data() {
|
||
return {
|
||
rules: {
|
||
time: [
|
||
{
|
||
required: true,
|
||
message: "请选择需要打印的日期",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
},
|
||
ruleForm: {
|
||
time: "",
|
||
},
|
||
queryTime: "", //时间
|
||
selectTime: false, // 选择时间的弹窗
|
||
moment: moment,
|
||
searchWord: "", // 搜索框输入
|
||
dataIndex: 0,
|
||
projectList: [],
|
||
projectSn: "",
|
||
userEnterpriseId: "",
|
||
enterpriseId: "",
|
||
statisticalData: {
|
||
workerNum: 0, //实名人数
|
||
greenCodeNum: 0, // 绿码人数
|
||
abnormalNum: 0, // 异常码人数
|
||
inNum: 0, // 进入人数
|
||
outNum: 0, // 外出人数
|
||
},
|
||
selectType: 1,
|
||
selectType_contrast: 1,
|
||
isContrast: false,
|
||
enterpriseName: "",
|
||
noData: false,
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId;
|
||
// console.log('-----',this.userEnterpriseId)
|
||
},
|
||
mounted() {
|
||
this.getProjectList();
|
||
// this.abnormalChart(); // 异常码人数图表分析
|
||
// this.contrastChart(); // 对比人数图表分析
|
||
},
|
||
methods: {
|
||
// 初始化数据
|
||
initData() {
|
||
this.statisticalData = {
|
||
workerNum: 0, //实名人数
|
||
greenCodeNum: 0, // 绿码人数
|
||
abnormalNum: 0, // 异常码人数
|
||
inNum: 0, // 进入人数
|
||
outNum: 0, // 外出人数
|
||
};
|
||
},
|
||
// 点击企业列表
|
||
clickList(index, project) {
|
||
this.dataIndex = index;
|
||
this.enterpriseId = project.enterpriseId;
|
||
this.selectType = 1;
|
||
this.selectType_contrast = 1;
|
||
this.enterpriseName = project.name;
|
||
this.getProjectDetail();
|
||
},
|
||
// 搜索
|
||
searchCompany() {
|
||
this.dataIndex = 0;
|
||
this.selectType = 1;
|
||
this.selectType_contrast = 1;
|
||
this.getProjectList();
|
||
},
|
||
// 异常码人数图表
|
||
abnormalChart(xData, notCodeNum, redCodeNum, yellowCodeNum) {
|
||
let abnormalAnalysis = echarts.init(this.$refs.abnormalAnalysis);
|
||
let option = {
|
||
title: {
|
||
text: "异常码人数",
|
||
left: "1%",
|
||
},
|
||
legend: {
|
||
data: ["无码", "黄码", "红码"],
|
||
bottom: "-1%",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "3%",
|
||
bottom: "13%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: xData,
|
||
boundaryGap: 10,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
//y轴
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
//网格线
|
||
show: false,
|
||
},
|
||
boundaryGap: true,
|
||
axisLabel: {
|
||
formatter: function(val) {
|
||
let index = val.indexOf("-");
|
||
val = val.slice(index + 1);
|
||
return val;
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisLine: {
|
||
//y轴
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
//y轴刻度线
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
//网格线
|
||
show: true,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "无码",
|
||
type: "line",
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(43, 219, 157, 0.3)" },
|
||
{ offset: 1, color: "rgba(206, 246, 221, 0)" },
|
||
]),
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(43, 219, 157, 1)", //改变折线点的颜色
|
||
lineStyle: {
|
||
color: "rgba(43, 219, 157, 0.7)", //改变折线颜色
|
||
},
|
||
},
|
||
},
|
||
// emphasis: {
|
||
// focus: "series",
|
||
// },
|
||
data: notCodeNum,
|
||
},
|
||
|
||
{
|
||
name: "黄码",
|
||
type: "line",
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(255, 248, 117, 0.7)" },
|
||
{ offset: 1, color: "rgba(255, 248, 117, 0)" },
|
||
]),
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(255, 248, 117, 1)", //改变折线点的颜色
|
||
lineStyle: {
|
||
color: "rgba(255, 248, 117, 0.7)", //改变折线颜色
|
||
},
|
||
},
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: yellowCodeNum,
|
||
},
|
||
{
|
||
name: "红码",
|
||
type: "line",
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "rgba(252, 173, 147, 0.7)" },
|
||
{ offset: 1, color: "rgba(252, 173, 147, 0)" },
|
||
]),
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(252, 173, 147, 1)", //改变折线点的颜色
|
||
lineStyle: {
|
||
color: "rgba(252, 173, 147, 0.7)", //改变折线颜色
|
||
},
|
||
},
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: redCodeNum,
|
||
},
|
||
],
|
||
};
|
||
|
||
abnormalAnalysis.setOption(option);
|
||
},
|
||
// 通行数据对比图表
|
||
contrastChart(xData, greenCodeNum, abnormalNum, inNum, outNum) {
|
||
let contrastAnalysis = echarts.init(this.$refs.contrastAnalysis);
|
||
let option = {
|
||
title: {
|
||
text: "通行数据对比",
|
||
left: "1%",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(255, 255, 255, 1)",
|
||
showDelay: 0,
|
||
textStyle: {
|
||
color: "rgba(51, 51, 51, 1)", //字体颜色
|
||
fontSize: 14, //字体大小
|
||
lineHeight: 30,
|
||
},
|
||
padding: 10,
|
||
formatter: function(params) {
|
||
var tip = "时间：" + params[0].name + "<br/>";
|
||
for (var i = 0, l = params.length; i < l; i++) {
|
||
tip +=
|
||
params[i].marker +
|
||
params[i].seriesName +
|
||
"：" +
|
||
params[i].value +
|
||
"<br/>";
|
||
}
|
||
return tip;
|
||
},
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
left: "2%",
|
||
right: "3%",
|
||
bottom: "8%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
data: ["昌通码绿码人数", "异常码人数", "进入人数", "外出人数"],
|
||
bottom: "-1%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
axisLabel: {
|
||
formatter: function(val) {
|
||
let index = val.indexOf("-");
|
||
val = val.slice(index + 1);
|
||
return val;
|
||
},
|
||
},
|
||
splitNumber: 10,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "昌通码绿码人数",
|
||
type: "bar",
|
||
barWidth: 30, //柱图宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#6A87FA",
|
||
},
|
||
},
|
||
data: greenCodeNum,
|
||
},
|
||
{
|
||
name: "异常码人数",
|
||
type: "bar",
|
||
barWidth: 30, //柱图宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FF7575",
|
||
},
|
||
},
|
||
data: abnormalNum,
|
||
},
|
||
{
|
||
name: "进入人数",
|
||
type: "line",
|
||
// yAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(255, 165, 60, 1)", //改变折线点的颜色
|
||
lineStyle: {
|
||
color: "rgba(255, 165, 60, 1)", //改变折线颜色
|
||
},
|
||
},
|
||
},
|
||
data: inNum,
|
||
},
|
||
{
|
||
name: "外出人数",
|
||
type: "line",
|
||
// yAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(9, 214, 163, 1)", //改变折线点的颜色
|
||
lineStyle: {
|
||
color: "rgba(9, 214, 163, 1)", //改变折线颜色
|
||
},
|
||
},
|
||
},
|
||
data: outNum,
|
||
},
|
||
],
|
||
};
|
||
contrastAnalysis.setOption(option);
|
||
},
|
||
// 获取企业列表
|
||
getProjectList() {
|
||
selectProjectAllEnterpriseList({
|
||
projectSn: this.projectSn,
|
||
enterpriseName: this.searchWord,
|
||
userEnterpriseId: this.userEnterpriseId,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log("企业列表的信息", res);
|
||
this.projectList = res.result;
|
||
this.enterpriseId = this.projectList[0].enterpriseId;
|
||
this.enterpriseName = this.projectList[0].name;
|
||
this.getProjectDetail();
|
||
}
|
||
});
|
||
},
|
||
|
||
// 获取对应企业的详细数据
|
||
getProjectDetail(chartType) {
|
||
this.initData();
|
||
// 统计数据
|
||
getProjectDetailData({
|
||
projectSn: this.projectSn,
|
||
enterpriseId: this.enterpriseId,
|
||
}).then((res) => {
|
||
console.log(res);
|
||
if (res.result) {
|
||
console.log('外出的信息有吗',res.result)
|
||
this.statisticalData = res.result;
|
||
this.statisticalData.abnormalNum =
|
||
res.result.notCodeNum +
|
||
res.result.redCodeNum +
|
||
res.result.yellowCodeNum;
|
||
}
|
||
});
|
||
|
||
// 图表数据
|
||
getProjectChartData({
|
||
projectSn: this.projectSn,
|
||
selectType: this.isContrast
|
||
? this.selectType_contrast
|
||
: this.selectType,
|
||
enterpriseId: this.enterpriseId,
|
||
}).then((res) => {
|
||
let dateArray = [];
|
||
let notCodeNum = [];
|
||
let redCodeNum = [];
|
||
let yellowCodeNum = [];
|
||
let greenCodeNum = [];
|
||
let abnormalNum = [];
|
||
let inNum = [];
|
||
let outNum = [];
|
||
res.result.forEach((item) => {
|
||
dateArray.push(item.queryTime);
|
||
notCodeNum.push(item.notCodeNum);
|
||
redCodeNum.push(item.redCodeNum);
|
||
yellowCodeNum.push(item.yellowCodeNum);
|
||
greenCodeNum.push(item.greenCodeNum);
|
||
abnormalNum.push(
|
||
item.notCodeNum + item.redCodeNum + item.yellowCodeNum
|
||
);
|
||
inNum.push(item.inNum);
|
||
outNum.push(item.outNum);
|
||
});
|
||
// chartType 1异常人数图表渲染 2通行数据图表渲染 不传时都渲染
|
||
if (chartType == 1) {
|
||
this.abnormalChart(dateArray, notCodeNum, redCodeNum, yellowCodeNum);
|
||
} else if (chartType == 2) {
|
||
this.contrastChart(
|
||
dateArray,
|
||
greenCodeNum,
|
||
abnormalNum,
|
||
inNum,
|
||
outNum
|
||
);
|
||
} else {
|
||
this.abnormalChart(dateArray, notCodeNum, redCodeNum, yellowCodeNum);
|
||
this.contrastChart(
|
||
dateArray,
|
||
greenCodeNum,
|
||
abnormalNum,
|
||
inNum,
|
||
outNum
|
||
);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 异常码切换7天或30天数据
|
||
selectDate(type) {
|
||
// type 1为7天 2为30天
|
||
this.selectType = type;
|
||
this.isContrast = false;
|
||
this.getProjectDetail(1);
|
||
},
|
||
|
||
// 通行数据对比切换7天或30天数据
|
||
selectDate_contrast(type) {
|
||
this.selectType_contrast = type;
|
||
this.isContrast = true;
|
||
this.getProjectDetail(2);
|
||
},
|
||
|
||
// 导出数据
|
||
exportData() {
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
"xmgl/projectEnterpriseWorkerStatistics/exporExcelProjectEnterpriseWorkerStatistics?projectSn=" +
|
||
this.$store.state.projectSn +
|
||
"&enterpriseName=" +
|
||
this.searchWord +
|
||
"&userEnterpriseId=" +
|
||
this.userEnterpriseId;
|
||
},
|
||
exportForm() {
|
||
this.selectTime = true;
|
||
},
|
||
getTime(val) {
|
||
console.log("时间", val);
|
||
this.queryTime = val;
|
||
},
|
||
submit() {
|
||
this.$refs.ruleForm.validate((valid) => {
|
||
if (valid) {
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
"xmgl/projectEnterpriseWorkerStatistics/exporExcelDayEnterpriseWorkerStatisticsDetail?projectSn=" +
|
||
this.$store.state.projectSn +
|
||
"&userEnterpriseId=" +
|
||
this.userEnterpriseId +
|
||
"&queryTime=" +
|
||
this.queryTime +
|
||
"&enterpriseId=" +
|
||
this.enterpriseId;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.el-container {
|
||
height: 100%;
|
||
}
|
||
.el-aside {
|
||
background: #fff;
|
||
color: #333;
|
||
text-align: center;
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
.exportData {
|
||
border: 1px solid #409eff;
|
||
border-radius: 4px 4px 4px 4px;
|
||
width: 92px;
|
||
margin: 0 auto;
|
||
font-size: 12px;
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
}
|
||
.searchBox {
|
||
display: flex;
|
||
height: 30px;
|
||
margin-top: 25px;
|
||
padding: 0;
|
||
justify-content: space-around;
|
||
/deep/ .el-input {
|
||
width: 187px;
|
||
}
|
||
/deep/ .el-input__inner {
|
||
border: 1px solid #dcdfe6;
|
||
height: 30px;
|
||
border-radius: 50px 50px 50px 50px;
|
||
box-sizing: border-box;
|
||
}
|
||
/deep/ .el-input__prefix,
|
||
/deep/ .el-input__icon {
|
||
line-height: 30px !important;
|
||
}
|
||
}
|
||
.searchBtn {
|
||
background: #409eff;
|
||
}
|
||
.list-item {
|
||
padding: 16px 0;
|
||
cursor: pointer;
|
||
}
|
||
.projectList {
|
||
overflow-y: auto;
|
||
height: calc(100% - 153px);
|
||
}
|
||
.el-aside .projectList:hover {
|
||
opacity: 1;
|
||
transition: opacity 0.34s ease-out;
|
||
}
|
||
}
|
||
.active {
|
||
color: #409eff;
|
||
}
|
||
.el-main {
|
||
// background-color: #d3dce6;
|
||
padding: 20px 20px 0 20px;
|
||
text-align: center;
|
||
}
|
||
.main-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
.header-box {
|
||
display: flex;
|
||
width: 16%;
|
||
background: #fff;
|
||
padding: 24px 0 30px 32px;
|
||
border-radius: 24px 24px 24px 24px;
|
||
align-items: center;
|
||
img {
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: 10px 10px 10px 10px;
|
||
margin-right: 21px;
|
||
}
|
||
p {
|
||
font-size: 18px;
|
||
color: #666666;
|
||
}
|
||
h2 {
|
||
font-size: 36px;
|
||
text-align: left;
|
||
line-height: 50px;
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
.main-middle {
|
||
position: relative;
|
||
.abnormalAnalysis {
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
height: 282px;
|
||
background: #fff;
|
||
border-radius: 24px 24px 24px 24px;
|
||
}
|
||
}
|
||
|
||
.btnBox {
|
||
position: absolute;
|
||
top: 8%;
|
||
right: 3%;
|
||
.activeBtn {
|
||
background: rgba(77, 112, 255, 0.1);
|
||
color: rgba(77, 112, 255, 1);
|
||
}
|
||
.el-button {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.main-footer {
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
border-radius: 24px 24px 24px 24px;
|
||
margin-top: 20px;
|
||
position: relative;
|
||
.contrastAnalysis {
|
||
height: 420px;
|
||
}
|
||
.exportForm {
|
||
position: absolute;
|
||
bottom: 5%;
|
||
right: 3%;
|
||
}
|
||
}
|
||
</style>
|