744 lines
22 KiB
Vue
744 lines
22 KiB
Vue
<template>
|
|
<div class="leftBottom">
|
|
<div class="header">
|
|
<div class="hLeft">项目人员考勤</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="contentTop">
|
|
<div class="line1">
|
|
<span>出勤人员总数:</span>
|
|
<!-- <div class="numberCard" v-for="(item,i) in '0234'" :key="i">{{item}}</div> -->
|
|
<div class="numberCard" v-for="(item, i) in totalPerson" :key="i">{{ item }}</div>
|
|
<span style="margin-left: 15px">考勤日环比</span>
|
|
<div style="display: flex" v-if="typeof totalPersonRhbRatio == 'undefined'">
|
|
<div class="dayRadio">0%</div>
|
|
</div>
|
|
<!-- <div style="display:flex" v-if="!totalPersonRhbRatio">
|
|
<div class="dayRadio">0%</div>
|
|
</div> -->
|
|
<div style="display: flex" v-if="totalPersonRhbRatio > 0">
|
|
<div class="dayRadio">{{ totalPersonRhbRatio }}%</div>
|
|
<div class="iconCenter">
|
|
<el-icon size="20" color="#1E90FF"><Top /></el-icon>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex" v-if="totalPersonRhbRatio == 0">
|
|
<!-- <div class="dayRadio">{{totalPersonRhbRatio}}%</div> -->
|
|
<div class="dayRadio">0%</div>
|
|
</div>
|
|
<div style="display: flex" v-if="totalPersonRhbRatio < 0">
|
|
<div class="dayRadio">{{ Math.abs(totalPersonRhbRatio) }}%</div>
|
|
<div class="iconCenter">
|
|
<el-icon size="20" color="#8B0000"><Bottom /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="line2">
|
|
<div :class="['line2Item', activeIndex === '0' ? 'activeTab' : '']" @click="handleTab('0')">总包出勤情况分析</div>
|
|
<div :class="['line2Item', activeIndex === '1' ? 'activeTab' : '']" @click="handleTab('1')">人员风险趋势分析</div>
|
|
</div>
|
|
<div class="barContent" v-if="isFlag">
|
|
<div id="bar" style="width: 98%; height: 100%" ref="bar"></div>
|
|
</div>
|
|
<div class="cbProcess" v-if="!isFlag">
|
|
<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
|
|
<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="centerBottom">
|
|
<div class="cbTop">
|
|
<div class="header"><div class="hLeft">进度情况分析</div></div>
|
|
<div class="content" style="backgound: black">
|
|
<div class="cbLine1">
|
|
<div style="display: flex">
|
|
<span>项目总进度:</span>
|
|
<div class="numberCard" v-for="(item, i) in projectTotalProgress" :key="i">{{ item }}</div>
|
|
<span style="margin-left: 5px">%</span>
|
|
</div>
|
|
<div style="display: flex">
|
|
<span style="margin-left: 15px">项目剩余天数</span>
|
|
<div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">{{ item }}</div>
|
|
<span style="margin-left: 5px">天</span>
|
|
</div>
|
|
</div>
|
|
<div class="cbProcess" v-if="processList.length >= 5">
|
|
<!-- v-if="listData.length>0" :list="listData" -->
|
|
<vue3-seamless-scroll
|
|
v-if="processList.length > 0"
|
|
:list="processList"
|
|
:speed="1"
|
|
:limitScrollNum="5"
|
|
:step="0.3"
|
|
:hover="true"
|
|
class="scroll"
|
|
>
|
|
<div class="pItem" v-for="(item, i) in processList" :key="i">
|
|
<div class="pLeft">
|
|
<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
|
|
<span style="margin-left: 10px">Top{{ i + 1 }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="pRight">
|
|
<div class="prTop">
|
|
<div class="prtLeft">{{ item.enterpriseName }}</div>
|
|
<div class="prtRight">{{ item.changeAfter }}%</div>
|
|
</div>
|
|
<div class="prBottom">
|
|
<div class="processLineBg">
|
|
<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
|
|
<div class="processLineBtn"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue3-seamless-scroll>
|
|
</div>
|
|
<div class="cbProcess" v-else-if="processList.length == 0">
|
|
<div class="notoDta" v-if="processList.length == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
<div class="cbProcess" v-else>
|
|
<!-- v-if="listData.length>0" :list="listData" -->
|
|
<!-- <vue3-seamless-scroll
|
|
v-if="processList.length>0" :list="processList"
|
|
:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll"> -->
|
|
<div class="pItem" v-for="(item, i) in processList" :key="i">
|
|
<div class="pLeft">
|
|
<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
|
|
<span style="margin-left: 10px">Top{{ i + 1 }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="pRight">
|
|
<div class="prTop">
|
|
<div class="prtLeft">{{ item.enterpriseName }}</div>
|
|
<div class="prtRight">{{ item.changeAfter }}%</div>
|
|
</div>
|
|
<div class="prBottom">
|
|
<div class="processLineBg">
|
|
<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
|
|
<div class="processLineBtn"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </vue3-seamless-scroll> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import * as echarts from "echarts";
|
|
// import ECharts from "vue-echarts";
|
|
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
|
|
import {
|
|
getPersonTypeAndEduStatisticsApi,
|
|
queryAttendanceOfEachCompanyApi,
|
|
getCountTaskProgressApi,
|
|
queryCountEnterpriseApi
|
|
} from "@/api/modules/agjtCommandApi";
|
|
import type { TabsPaneContext, ElMessageBox } from "element-plus";
|
|
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
|
|
import { GlobalStore } from "@/stores";
|
|
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
|
const store = GlobalStore();
|
|
const activeName = ref("总包出勤情况分析");
|
|
const activeIndex = ref("0" as any);
|
|
//出勤人员数据
|
|
let totalPerson = ref("" as any);
|
|
//考勤日环比
|
|
let totalPersonRhbRatio = ref("" as any);
|
|
//获取出勤人员数据/考勤日环比
|
|
const getPersonTypeAndEduStatistics = async () => {
|
|
const res: any = await getPersonTypeAndEduStatisticsApi({
|
|
projectSn: store.sn
|
|
});
|
|
if (res.result) {
|
|
console.log("出勤人员数据/考勤日环比", res);
|
|
totalPerson.value = res.result.personType.attendancePerson.totalPerson;
|
|
// if(totalPerson.value.length < 4){
|
|
// let temp = 4-totalPerson.value.length
|
|
// for(let i = 0;i<temp;i++){
|
|
// totalPerson.value = "0" + totalPerson.value
|
|
// }
|
|
// }
|
|
totalPersonRhbRatio.value = res.result.personType.attendancePerson.totalPersonRhbRatio;
|
|
}
|
|
};
|
|
|
|
//总包出勤情况分析数据列表
|
|
let projectCompanyWorkTotalList = ref([] as any);
|
|
let xData = ref([] as any);
|
|
let yData = ref([] as any);
|
|
//获取总包出勤情况分析数据
|
|
let isFlag = ref(true as any);
|
|
const queryAttendanceOfEachCompany = async () => {
|
|
const res: any = await queryAttendanceOfEachCompanyApi({
|
|
projectSn: store.sn,
|
|
isCountMainEnterprise: 1
|
|
});
|
|
if (res.result) {
|
|
console.log("获取总包出勤情况分析数据", res);
|
|
projectCompanyWorkTotalList.value = res.result.projectCompanyWorkTotalList;
|
|
xData.value = projectCompanyWorkTotalList.value.map(item => item.enterpriseName.substring(0, 4));
|
|
yData.value = projectCompanyWorkTotalList.value.map(item => item.attendancePersonNum);
|
|
if (projectCompanyWorkTotalList.value.length > 0) {
|
|
isFlag = true;
|
|
drawBar();
|
|
} else {
|
|
isFlag = false;
|
|
}
|
|
}
|
|
};
|
|
|
|
//切换tab
|
|
const handleTab = (val: string) => {
|
|
activeIndex.value = val;
|
|
};
|
|
|
|
//绘画柱状图
|
|
function drawBar() {
|
|
console.log("---------------------bar--------");
|
|
type EChartsOption = echarts.EChartsOption;
|
|
var chartDom = document.getElementById("bar")!;
|
|
var myChart = echarts.init(chartDom);
|
|
var option: EChartsOption;
|
|
|
|
option = {
|
|
xAxis: {
|
|
type: "category",
|
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
data: xData.value,
|
|
axisLabel: {
|
|
fontSize: 12, // 设置字体大小为12px
|
|
// rotate: 45,
|
|
interval: 0 // 显示所有标签
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
// color: 'white' // 设置X轴刻度线的颜色为白色
|
|
color: "rgba(200,200,200,1)"
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLabel: {
|
|
fontSize: 12 // 设置字体大小为12px
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
// color: 'white' // 设置Y轴刻度线的颜色为白色
|
|
color: "rgba(200,200,200,1)"
|
|
}
|
|
},
|
|
// show:false
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// type: 'dashed', //y轴分割线类型
|
|
type: "solid", //y轴实线类型
|
|
color: "rgba(102,102,102,0.25)",
|
|
width: 2.5
|
|
}
|
|
}
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
start: 0,
|
|
end: 40,
|
|
width: "98%",
|
|
height: 5,
|
|
left: "center",
|
|
bottom: 3
|
|
}
|
|
],
|
|
grid: {
|
|
top: "8%",
|
|
right: "0",
|
|
left: "8%",
|
|
bottom: "10%"
|
|
},
|
|
series: [
|
|
{
|
|
// data: [120, 200, 150, 80, 70, 110, 130],
|
|
data: yData.value,
|
|
type: "bar",
|
|
barWidth: 20,
|
|
itemStyle: {
|
|
color: "#3398DB" // 设置柱状图颜色为蓝色
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
// color: '#8B0000' // 设置鼠标悬浮时的颜色为深红色
|
|
// color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
|
|
color: "#00008B" // 设置鼠标悬浮时的颜色为深蓝色
|
|
}
|
|
}
|
|
}
|
|
],
|
|
tooltip: {
|
|
borderColor: "rgba(50,50,50, 0.5)",
|
|
backgroundColor: "rgba(50,50,50, 0.5)",
|
|
textStyle: { color: "#fff", fontSize: "15" },
|
|
formatter: function (params) {
|
|
// 出勤率
|
|
let attendanceRate = projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRate;
|
|
if (!attendanceRate) {
|
|
attendanceRate = "--";
|
|
} else {
|
|
attendanceRate = attendanceRate + "%";
|
|
}
|
|
// 出勤率日环比
|
|
let attendanceRhbRate = projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRhbRate;
|
|
if (!attendanceRhbRate) {
|
|
attendanceRhbRate = "--";
|
|
} else {
|
|
attendanceRhbRate = attendanceRhbRate + "%";
|
|
}
|
|
console.log(params);
|
|
console.log(123123, projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRate);
|
|
return (
|
|
'<div style="font-weight:bold">' +
|
|
params.name +
|
|
"</div>" +
|
|
'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#1E90FF">●</span>在册人员：' +
|
|
projectCompanyWorkTotalList.value[params.dataIndex].totalPersonNum +
|
|
"</div>" +
|
|
'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#4682B4">●</span>出勤人员总数：' +
|
|
projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonNum +
|
|
"</div>" +
|
|
'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#87CEFA">●</span>出勤率：' +
|
|
attendanceRate +
|
|
"</div>" +
|
|
'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#00BFFF">●</span>出勤率日环比：' +
|
|
attendanceRhbRate +
|
|
"</div>"
|
|
);
|
|
|
|
// '<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#87CEFA">●</span>出勤率：'+projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRate+'%</div>' +
|
|
}
|
|
}
|
|
};
|
|
// window.addEventListener('resize',function(){
|
|
// myChart.resize()
|
|
// })
|
|
|
|
option && myChart.setOption(option);
|
|
}
|
|
|
|
//进度数据
|
|
let listData = ref([
|
|
{ a: "新地能源工程技术有限公司", b: "54" },
|
|
{ a: "中冶沈勘秦皇岛工程设计研究总院有限公司", b: "23" },
|
|
{ a: "鞍山电力实业有限公司", b: "49" },
|
|
{ a: "鞍钢矿业资源利用（鞍山）有限公司", b: "35" },
|
|
{ a: "上海建工五建集团有限公司", b: "34" },
|
|
{ a: "辽宁普凡建设有限公司", b: "67" },
|
|
{ a: "沈阳隆基电磁科技股份有限公司", b: "56" },
|
|
{ a: "中国科学院过程工程研究所", b: "78" },
|
|
{ a: "宏大爆破工程集团有限责任公司", b: "45" },
|
|
{ a: "鞍钢集团矿业设计研究院有限公司", b: "23" },
|
|
{ a: "辽宁电力能源发展集团监理有限公司鞍山分公司", b: "69" },
|
|
{ a: "辽宁五寰特种材料与智能装备产业技术研究院有限公司", b: "27" },
|
|
{ a: "中铝山东工程技术有限公司", b: "59" },
|
|
{ a: "中国华冶科工集团有限公司", b: "14" },
|
|
{ a: "沈阳岩土工程技术测试开发有限公司", b: "38" },
|
|
{ a: "永明项目管理有限公司", b: "41" }
|
|
] as any);
|
|
|
|
// 进度情况分析
|
|
// 项目总进度
|
|
let projectTotalProgress = ref("" as any);
|
|
// 项目剩余天数
|
|
let projectSurplusDayNum = ref({} as any);
|
|
// 获取项目总进度/项目剩余天数
|
|
const getCountTaskProgress = async () => {
|
|
const res: any = await getCountTaskProgressApi({
|
|
projectSn: store.sn
|
|
});
|
|
if (res.result) {
|
|
console.log("项目总进度/项目剩余天数", res);
|
|
projectTotalProgress.value = res.result.projectTotalProgress + "";
|
|
projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
|
|
}
|
|
};
|
|
// 总包进度列表
|
|
let processList = ref([] as any);
|
|
// 获取总包进度列表
|
|
const queryCountEnterprise = async () => {
|
|
const res: any = await queryCountEnterpriseApi({
|
|
projectSn: store.sn,
|
|
isCountMainEnterprise: 1
|
|
});
|
|
if (res.result) {
|
|
console.log("总包进度列表", res);
|
|
processList.value = res.result;
|
|
}
|
|
};
|
|
const setIntervalFn = () => {
|
|
// drawBar()
|
|
getPersonTypeAndEduStatistics();
|
|
queryAttendanceOfEachCompany();
|
|
getCountTaskProgress();
|
|
queryCountEnterprise();
|
|
};
|
|
onMounted(async () => {
|
|
setIntervalFn();
|
|
// 定时三十秒刷新
|
|
setInterval(() => {
|
|
setIntervalFn();
|
|
}, 30000);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftBottom {
|
|
background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 100%;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 20px;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: 1px solid #0059ff;
|
|
.hLeft {
|
|
width: 50%;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
// background-color: darkred;
|
|
height: 92.5%;
|
|
.contentTop {
|
|
padding: 0 10px;
|
|
height: 50%;
|
|
// background-color: #fff;
|
|
font-size: 13px;
|
|
.line1 {
|
|
color: #fff;
|
|
padding-top: 5px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
font-size: 15px;
|
|
.numberCard {
|
|
font-size: 15px;
|
|
padding: 0 8px;
|
|
margin-left: 3px;
|
|
font-weight: bold;
|
|
color: #47bcec;
|
|
background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.dayRadio {
|
|
font-size: 15px;
|
|
margin-left: 15px;
|
|
font-weight: bold;
|
|
color: #47bcec;
|
|
}
|
|
.iconCenter {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.line2 {
|
|
padding-top: 5px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
line-height: 25px;
|
|
height: 25px;
|
|
.line2Item {
|
|
color: #fff;
|
|
width: 140px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
// background-color: #fff;
|
|
background: rgb(0, 33, 116);
|
|
background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
|
|
}
|
|
.activeTab {
|
|
background: rgb(0, 33, 116);
|
|
background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
|
|
}
|
|
}
|
|
.barContent {
|
|
height: calc(100% - 65px);
|
|
}
|
|
}
|
|
|
|
.centerBottom {
|
|
height: 50%;
|
|
position: relative;
|
|
|
|
.cbTop {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// padding: 20px 20px;
|
|
border-bottom: 1px solid #0059ff;
|
|
|
|
.hLeft {
|
|
width: 50%;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 0 10px;
|
|
height: 90%;
|
|
// background-color: rgba($color: #fff, $alpha: 0.1);
|
|
.cbLine1 {
|
|
color: #fff;
|
|
padding-top: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
font-size: 15px;
|
|
.numberCard {
|
|
font-size: 15px;
|
|
padding: 0 8px;
|
|
margin-left: 3px;
|
|
font-weight: bold;
|
|
color: #47bcec;
|
|
background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.cbProcess {
|
|
padding-top: 5px;
|
|
height: calc(100% - 55px);
|
|
overflow: hidden;
|
|
// background-color: #fff;
|
|
.pItem {
|
|
width: 100%;
|
|
height: 55px;
|
|
display: flex;
|
|
// background-color: #fff;
|
|
font-size: 13px;
|
|
color: #fff;
|
|
.pLeft {
|
|
width: 20%;
|
|
height: 55px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.plInner {
|
|
width: 80px;
|
|
// text-align: center;
|
|
line-height: 30px;
|
|
// background-color: darkred;
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
.pRight {
|
|
width: 80%;
|
|
height: 55px;
|
|
.prTop {
|
|
// background-color: darkblue;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 30px;
|
|
.prtLeft {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
.prtRight {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
.prBottom {
|
|
// background-color: purple;
|
|
height: 15px;
|
|
.processLineBg {
|
|
background-color: rgba(50, 50, 50, 0.5);
|
|
// transform: scaleX(-1);
|
|
.processLine {
|
|
margin-top: 10px;
|
|
// padding-top: 10px;
|
|
height: 5px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.processLineBtn {
|
|
width: 3px;
|
|
height: 9px;
|
|
background: #fff;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
// .plBgc1{
|
|
// background: rgb(150,0,0);
|
|
// background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scroll {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.notoDta {
|
|
top: 35%;
|
|
width: 50%;
|
|
// left: 40%;
|
|
position: absolute;
|
|
text-align: center;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
|
|
p {
|
|
color: #fff;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
margin: -6% 30%;
|
|
}
|
|
}
|
|
.plBgc1 {
|
|
background: rgb(139, 0, 0);
|
|
background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc1 {
|
|
background: rgb(139, 0, 0);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
|
|
}
|
|
.plBgc2 {
|
|
background: rgb(155, 155, 0);
|
|
background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc2 {
|
|
background: rgb(155, 155, 0);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
|
|
}
|
|
.plBgc3 {
|
|
background: rgb(0, 0, 139);
|
|
background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc3 {
|
|
background: rgb(0, 0, 139);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
|
|
}
|
|
.plBgc4 {
|
|
background: rgb(139, 0, 139);
|
|
background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc4 {
|
|
background: rgb(139, 0, 139);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
|
|
}
|
|
.plBgc5 {
|
|
background: rgb(72, 61, 139);
|
|
background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc5 {
|
|
background: rgb(72, 61, 139);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
|
|
}
|
|
.plBgc6 {
|
|
background: rgb(0, 206, 209);
|
|
background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc6 {
|
|
background: rgb(0, 206, 209);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
|
|
}
|
|
.plBgc7 {
|
|
background: rgb(47, 79, 79);
|
|
background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc7 {
|
|
background: rgb(47, 79, 79);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
|
|
}
|
|
.plBgc8 {
|
|
background: rgb(0, 100, 0);
|
|
background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc8 {
|
|
background: rgb(0, 100, 0);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
|
|
}
|
|
.plBgc9 {
|
|
background: rgb(189, 183, 107);
|
|
background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc9 {
|
|
background: rgb(189, 183, 107);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
|
|
}
|
|
.plBgc10 {
|
|
background: rgb(255, 140, 0);
|
|
background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc10 {
|
|
background: rgb(255, 140, 0);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
|
|
}
|
|
.plBgc11 {
|
|
background: rgb(233, 150, 122);
|
|
background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc11 {
|
|
background: rgb(233, 150, 122);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
|
|
}
|
|
.plBgc0 {
|
|
background: rgb(0, 139, 139);
|
|
background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
|
|
}
|
|
.plBtnBgc0 {
|
|
background: rgb(0, 139, 139);
|
|
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
|
|
}
|
|
</style>
|