<template>
|
<div class="Startjob">
|
<div class="rect" style="position: relative">
|
<div class="rect-top">
|
<img src="@/assets/TheCurrentJob/left.png" alt="" />
|
<img
|
style="margin-left: -1.5rem; margin-right: 4rem"
|
src="@/assets/TheCurrentJob/left1.png"
|
alt=""
|
/>
|
<span>开始作业（{{ title }}）</span>
|
<img
|
style="margin-right: -1.5rem; margin-left: 4rem"
|
src="@/assets/TheCurrentJob/right1.png"
|
alt=""
|
/>
|
<img src="@/assets/TheCurrentJob/right.png" alt="" />
|
</div>
|
<div class="rect-center">
|
<div class="rect-item1">
|
<div style="margin-top: 0.5rem">
|
<img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
|
<span style="color: rgba(26, 201, 255, 1); font-size: 1.5rem"
|
>任务作业信息</span
|
>
|
</div>
|
<div style="height: 100%; width: 100%">
|
<div style="width: 100%; padding-left: 1rem">
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.5rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>任务名称：</span
|
><span>{{ info.takename }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>技术员：</span
|
><span>{{ info.jishuyuan }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>检修工厂：</span
|
><span>{{ info.gonzhang }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>质检员：</span
|
><span>{{ info.zhijianyuan }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>力矩作业员：</span
|
><span>{{ info.lijuzouyeyuan }}</span>
|
</div>
|
<div
|
style="
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>辅助员：</span
|
><span>{{ info.fuzyuan }}</span>
|
</div>
|
<div
|
style="
|
position: absolute;
|
color: #1ac2f7;
|
font-size: 1rem;
|
display: flex;
|
margin-top: 0.4rem;
|
"
|
>
|
<span style="width: 6rem; text-align: right; display: block"
|
>任务详情：</span
|
>
|
<span
|
ref="spanHide1"
|
@click="showDetail(!contentShow1)"
|
style="color: #1ac2f7; font-size: 0.88rem; cursor: pointer"
|
>查看</span
|
>
|
<div
|
v-if="contentShow1"
|
style="
|
position: relative;
|
top: 1.5rem;
|
left: -3rem;
|
width: 49rem;
|
"
|
>
|
<el-table
|
:data="taskData"
|
width="100%"
|
:header-cell-style="{
|
color: '#fff',
|
background: '#1AC2F7',
|
}"
|
:cell-style="{
|
height: '3.38rem',
|
color: '#fff',
|
background: '#1373A8',
|
}"
|
>
|
<el-table-column property="trainKind" label="车型" />
|
<el-table-column property="trainNum" label="车组" />
|
<el-table-column property="track" label="股道" />
|
<el-table-column property="coachNum" label="车厢号位置" />
|
<el-table-column property="bogie" label="转向架位置" />
|
<el-table-column property="processDept" label="检修班组" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="rect-item2">
|
<div>
|
<span style="color: rgba(26, 200, 254, 1); font-size: 1.2rem"
|
>工艺项点/步骤共<span
|
style="font-size: 1.5rem; font-weight: bold"
|
>{{ sunNUm }}</span
|
>
|
</span>
|
<span
|
style="
|
margin-left: 1rem;
|
color: rgba(26, 200, 254, 1);
|
font-size: 1.2rem;
|
"
|
>当前作业项点/步骤<span
|
style="font-size: 1.5rem; font-weight: bold"
|
>{{ obj.setpNum }}</span
|
>
|
</span>
|
</div>
|
<div style="position: absolute; width: 47rem; height: 2.5rem">
|
<el-table
|
style="margin-top: 0.88rem"
|
:data="gridData"
|
width="100%"
|
:header-cell-style="{
|
height: '1.61rem',
|
color: '#1AC8FE',
|
background: '#0A5B91',
|
fontSize: '0.88rem',
|
}"
|
:cell-style="{
|
color: '#fff',
|
background: '#147BAF',
|
}"
|
>
|
<el-table-column
|
property="craftsStep"
|
label="工艺项点/步骤"
|
min-width="30%"
|
>
|
<template #default="scope">
|
<span
|
ref="spanHide"
|
@click="showDetail1(!contentShow)"
|
style="
|
color: #1ac2f7;
|
font-size: 0.88rem;
|
cursor: pointer;
|
text-decoration: underline;
|
"
|
>{{ scope.row.craftsStep }}
|
</span></template
|
></el-table-column
|
>
|
<el-table-column
|
property="craftContent"
|
label="工艺内容"
|
min-width="70%"
|
>
|
<template #default="scope">
|
<span
|
@click="true"
|
style="
|
color: #ffffff;
|
font-size: 0.88rem;
|
display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
|
-webkit-box-orient: vertical; /* 垂直排列 */
|
-webkit-line-clamp: 2; /* 限制显示两行 */
|
overflow: hidden; /* 隐藏超出范围的内容 */
|
text-overflow: ellipsis; /* 使用省略号 */
|
"
|
>{{ scope.row.craftContent }}</span
|
></template
|
></el-table-column
|
>
|
</el-table>
|
<div class="consten" v-if="contentShow">
|
<el-table
|
:data="gridData"
|
width="100%"
|
:header-cell-style="{
|
height: '1.61rem',
|
color: '#fff',
|
background: '#0A5B91',
|
fontSize: '0.88rem',
|
}"
|
:cell-style="{
|
color: '#fff',
|
background: '#147BAF',
|
}"
|
>
|
<el-table-column
|
property="craftsStep"
|
label="工艺内容"
|
min-width="30%"
|
>
|
<template #default="scope">
|
<span @click="true" style="color: #fff; font-size: 0.88rem"
|
>{{ scope.row.craftContent }}
|
</span></template
|
></el-table-column
|
>
|
<el-table-column
|
property="craftsStep"
|
label="工具"
|
min-width="10%"
|
>
|
<template #default="scope">
|
<span style="color: #ffffff">{{
|
scope.row.tools
|
}}</span></template
|
></el-table-column
|
>
|
<el-table-column
|
property="craftsStep"
|
label="物料"
|
min-width="10%"
|
>
|
<template #default="scope">
|
<span style="color: #ffffff">{{
|
scope.row.material
|
}}</span></template
|
></el-table-column
|
>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="rect-item3" style="position: relative">
|
<div style="overflow: hidden; padding-bottom: 1rem">
|
<img src="@/assets/TheCurrentJob/icon/icon.png" alt="" />
|
<span style="color: rgba(26, 201, 255, 1); font-size: 0.88rem"
|
>力矩值显示</span
|
>
|
<el-scrollbar ref="scrollbarRef" height="130rpx">
|
<div
|
ref="innerRef"
|
style="
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
padding-left: 1.5rem;
|
padding-top: 0.5rem;
|
padding-bottom: 1rem;
|
box-sizing: border-box;
|
"
|
>
|
<span
|
style="color: #ffffff; font-size: 1rem; margin: 0.4rem 0"
|
v-for="(item, index) in Torque"
|
:key="item.id"
|
>{{
|
index + 1 + "、" + item.torqueSize + " " + "N*m"
|
}}</span
|
>
|
</div>
|
<el-input
|
v-if="isTorque"
|
v-model.number="torqueFrom.torqueSize"
|
style="font-size: 0.75rem; height: 2rem"
|
placeholder="请输入扭力值"
|
/>
|
<!-- @blur="addTorque" -->
|
</el-scrollbar>
|
</div>
|
<div
|
style="
|
position: absolute;
|
bottom: -2.3rem;
|
left: -0.1rem;
|
width: 100%;
|
"
|
>
|
<el-button
|
v-if="!isTorque"
|
type="primary"
|
style="font-size: 0.75rem; width: 100%; height: 2rem"
|
@click="showTorque"
|
>手动模拟扭力值</el-button
|
>
|
<div v-else style="display: flex; justify-content: space-between">
|
<el-button
|
type="primary"
|
style="font-size: 0.75rem; width: 100%; height: 2rem"
|
@click="addTorque"
|
>确认</el-button
|
>
|
<el-button
|
type="primary"
|
style="font-size: 0.75rem; width: 100%; height: 2rem"
|
@click="isTorque = false"
|
>取消</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
ref="screenDom"
|
style="
|
margin: 0 auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: absolute;
|
top: 33%;
|
left: 50%;
|
transform: translateX(-50%);
|
"
|
>
|
<div ref="container" style="width: 100%; height: 100%"></div>
|
<!-- <model-gltf
|
:width="400"
|
:height="400"
|
:backgroundAlpha="0"
|
:backgroundColor="'#000000'"
|
src="ThreeModel/test.gltf"
|
:controlsOptions="{
|
enableZoom,
|
}"
|
/> -->
|
</div>
|
<div
|
style="
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: absolute;
|
bottom: 5%;
|
left: 50%;
|
transform: translateX(-50%);
|
"
|
>
|
<el-button
|
:disabled="obj.setpNum == 1"
|
@click="Previous(false)"
|
type="primary"
|
:style="{
|
width: '5rem',
|
height: '1.88rem',
|
background:
|
obj.setpNum == 1
|
? 'rgba(164, 173, 179, 1)'
|
: 'rgba(26, 194, 247, 1)',
|
color: 'rgba(255, 255, 255, 1)',
|
fontSize: '0.88rem;',
|
}"
|
>上一步</el-button
|
>
|
<el-button
|
:disabled="obj.setpNum == sunNUm"
|
@click="Next(false)"
|
type="primary"
|
:style="{
|
width: '5rem',
|
height: '1.88rem',
|
background:
|
obj.setpNum != sunNUm
|
? 'rgba(26, 194, 247, 1)'
|
: 'rgba(164, 173, 179, 1)',
|
color: ' rgba(255, 255, 255, 1)',
|
fontSize: '0.88rem',
|
}"
|
>下一步</el-button
|
>
|
<el-button
|
:disabled="obj.setpNum != sunNUm"
|
@click="Completee"
|
type="primary"
|
:style="{
|
height: '1.88rem',
|
width: '5rem',
|
background:
|
obj.setpNum == sunNUm
|
? 'rgba(26, 194, 247, 1)'
|
: 'rgba(164, 173, 179, 1)',
|
color: 'rgba(255, 255, 255, 1)',
|
fontSize: '0.88rem',
|
}"
|
>完成作业</el-button
|
>
|
</div>
|
</div>
|
|
<!-- 强制跳转确认框 -->
|
<el-dialog v-model="centerDialogVisible" title="确认" width="300" center>
|
<span> 当前任务未完成，是否强制跳转到下一步？ </span>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button style="width: 5rem" @click="centerDialogVisible = false"
|
>取消</el-button
|
>
|
<el-button style="width: 5rem" type="primary" @click="Next(true)">
|
确认
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import { ref, onMounted, nextTick } from "vue";
|
import {
|
GetScreenData,
|
GetPre,
|
GetNext,
|
Complete,
|
GetTorque,
|
ChangeStatus,
|
AddTorque, //添加扭力值接口
|
} from "@/api/newapi/Thecurrentjob";
|
import { GetPageData } from "@/api/newapi/NjTask";
|
import { useRouter } from "vue-router";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import { ModelCollada, ModelGltf } from "vue-3d-model";
|
import { formatTime } from "@/utils/index.js";
|
import * as THREE from "three";
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //gltf
|
|
const container = ref(null);
|
|
let scene, camera, renderer, controls;
|
|
const router = useRouter();
|
const gridData = ref([]);
|
const contentShow = ref(false);
|
const contentShow1 = ref(false);
|
const info = ref({});
|
info.value = history.state?.info ? JSON.parse(history.state?.info) : {};
|
const title = ref("");
|
title.value = history.state?.title ? history.state?.title : "机械";
|
const enableZoom = ref(false);
|
const obj = ref({});
|
const sunNUm = ref(0);
|
const Torque = ref("");
|
const showDetail1 = (va1) => {
|
contentShow1.value = false;
|
contentShow.value = va1;
|
};
|
const showDetail = (va1) => {
|
contentShow1.value = va1;
|
contentShow.value = false;
|
checko();
|
};
|
const taskData = ref([]);
|
const centerDialogVisible = ref(false);
|
const from = ref({
|
group: "",
|
takeid: "",
|
setnum: 0,
|
});
|
|
//扭力值
|
const torqueFrom = ref({
|
creater: JSON.parse(localStorage.getItem("user")).userName, //当前登陆人
|
createDate: formatTime(new Date()), //当前时间
|
modifier: JSON.parse(localStorage.getItem("user")).userName,
|
modifyDate: formatTime(new Date()),
|
id: 0,
|
deviceCode: "", //设备编号
|
takeId: "", //任务id
|
groupOp: "", //班组
|
processSte: 0, //当前步骤
|
torqueSize: null, //输入的扭力值
|
});
|
|
const isTorque = ref(false);
|
const flag = ref(false);
|
|
const innerRef = ref();
|
const scrollbarRef = ref();
|
//上一步
|
const Previous = (val) => {
|
from.value.group = info.value.grouptype;
|
from.value.takeid = info.value.njtakeid;
|
from.value.setnum = obj.value.setpNum;
|
flag.value = val;
|
console.log(from.value, info.value);
|
GetPre(from.value, flag.value).then((res) => {
|
gridData.value = [res.data.nex];
|
obj.value = res.data.nex;
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
});
|
};
|
//下一步
|
const Next = (val) => {
|
console.log(obj.value);
|
from.value.group = info.value.grouptype;
|
from.value.takeid = info.value.njtakeid;
|
from.value.setnum = obj.value.setpNum;
|
flag.value = val;
|
|
GetNext(from.value, flag.value).then((res) => {
|
if (res.message == "没有完成当前步骤") {
|
gridData.value = res.data.nowdate;
|
obj.value = res.data.nowdate[0];
|
if (res.data.nowdate[0].setpNum == obj.value.setpNum) {
|
centerDialogVisible.value = true;
|
return;
|
}
|
return;
|
}
|
centerDialogVisible.value = false;
|
gridData.value = [res.data.nex];
|
obj.value = res.data.nex;
|
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
});
|
};
|
//完成
|
const Completee = () => {
|
from.value.gruops = info.value.grouptype;
|
from.value.id = info.value.njtakeid;
|
from.value.creater = info.value.creater;
|
console.log(from.value, info.value);
|
|
ChangeStatus(from.value).then((res) => {
|
ElMessage({
|
message: "操作完成",
|
type: "success",
|
});
|
router.push("/Thecurrentjob");
|
});
|
};
|
//查看数据
|
const checko = () => {
|
GetPageData({
|
page: 1,
|
rows: 10,
|
total: 100,
|
tableName: "",
|
sort: "",
|
order: "",
|
wheres: "",
|
export: true,
|
value: "",
|
filter: [
|
{
|
name: "njtaskid",
|
value: info.value.njtakeid,
|
displayType: "String",
|
},
|
],
|
}).then((res) => {
|
taskData.value = res.rows;
|
});
|
};
|
const queryData = ref({
|
grop: info.value.grouptype,
|
takeid: info.value.njtakeid,
|
setnum: "",
|
});
|
const initData = () => {
|
console.log(obj.value);
|
GetScreenData({
|
group: info.value.grouptype,
|
takeid: info.value.njtakeid,
|
}).then((res) => {
|
if (res.message == "返回工艺表中的第一条") {
|
gridData.value = res.data.proNoe;
|
obj.value = res.data.proNoe[0];
|
sunNUm.value = res.data.maxproce;
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
return;
|
}
|
gridData.value = res.data.maxpro;
|
sunNUm.value = res.data.maxproce;
|
obj.value = res.data.maxpro[0];
|
queryData.value.setnum = obj.value.setpNum;
|
GetTorque(queryData.value).then((res) => {
|
Torque.value = res.data;
|
});
|
});
|
};
|
|
const showModel = () => {
|
scene = new THREE.Scene();
|
console.log("model", window.innerWidth, window.innerHeight);
|
|
// 创建相机 (视角，宽高比，近裁剪面，远裁剪面)
|
camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
|
|
// 创建渲染器
|
renderer = new THREE.WebGLRenderer({
|
antialias: true,
|
alpha: true,
|
});
|
renderer.setSize(400, 400); // 设置渲染器的大小
|
container.value.appendChild(renderer.domElement);
|
scene.background = null;
|
// 加载GLTF模型
|
const loader = new GLTFLoader();
|
loader.load(
|
"ThreeModel/test.gltf",
|
(gltf) => {
|
const model = gltf.scene;
|
|
// 计算模型的边界框并获取中心点
|
const box = new THREE.Box3().setFromObject(model);
|
const center = box.getCenter(new THREE.Vector3());
|
|
// 创建一个空对象作为父节点，将坐标轴和模型添加到这个父节点
|
const parent = new THREE.Object3D();
|
scene.add(parent);
|
|
// 将模型的位置设置为模型的边界框的中心，确保它居中
|
model.position.sub(center); // 让模型的中心与父节点对齐
|
|
// 将坐标轴助手添加到父节点
|
// const axesHelper = new THREE.AxesHelper(100); // 轴的长度为100 x,y,z的颜色分别为（红色，绿色，蓝色）
|
// parent.add(axesHelper); // 将坐标轴添加到父节点
|
|
// 将模型添加到父节点
|
parent.add(model);
|
|
// 确保模型的大小适当，可以调整模型的大小
|
model.scale.set(1, 1, 1); // 如果需要的话可以缩放模型
|
},
|
undefined,
|
(error) => {
|
console.error("模型加载失败", error);
|
}
|
);
|
|
const metalMaterial = new THREE.MeshStandardMaterial({
|
color: 0xaaaaaa,
|
metalness: 1,
|
roughness: 0.2,
|
});
|
|
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
|
const metalSphere = new THREE.Mesh(sphereGeometry, metalMaterial);
|
scene.add(metalSphere);
|
|
// 创建灯光
|
const light = new THREE.AmbientLight(0xffffff); // 环境光是一种全局性的光源，均匀地照亮整个场景，并且不会有阴影效果
|
scene.add(light);
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 3); //这段代码创建了一个白色、强度为 1 的平行光源
|
directionalLight.position.set(300, 300, 300).normalize(); //并将其位置设置在 (300, 300, 300)。然后，通过 normalize() 方法，确保平行光源的光线以一个标准的方向照射
|
scene.add(directionalLight);
|
|
// 设置相机初始位置（x,y,z）
|
camera.position.set(100, 100, 50); // 设置相机位置，确保可以看到模型
|
|
// 创建 OrbitControls 实例
|
controls = new OrbitControls(camera, renderer.domElement);
|
controls.enableZoom = false;
|
controls.enablePan = false;
|
controls.enableDamping = true; // 启用阻尼效果
|
controls.dampingFactor = 0.25; // 阻尼系数
|
controls.screenSpacePanning = false; // 禁用屏幕空间平移
|
controls.maxPolarAngle = Math.PI / 2; // 限制相机垂直旋转的角度，防止翻转
|
controls.target.set(0, 0, 0); // 确保相机始终围绕场景中心（模型位置）
|
controls.minDistance = 2; // 最小距离，防止缩得太近
|
controls.maxDistance = 500; // 最大距离，防止缩得太远
|
|
// 渲染循环
|
function animate() {
|
requestAnimationFrame(animate);
|
|
// 更新控制器
|
controls.update(); // 只有在启用阻尼的时候需要调用此函数
|
|
// 渲染场景
|
renderer.render(scene, camera);
|
}
|
|
animate();
|
|
// 响应窗口大小变化;
|
window.addEventListener("resize", onWindowResize, false);
|
|
function onWindowResize() {
|
console.log(window.innerWidth, window.innerHeight);
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
camera.updateProjectionMatrix();
|
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
|
}
|
};
|
const spanHide = ref();
|
const spanHide1 = ref();
|
const handleClickOutside = () => {
|
if (spanHide.value && !spanHide.value.contains(event.target)) {
|
contentShow.value = false;
|
}
|
if (spanHide1.value && !spanHide1.value.contains(event.target)) {
|
contentShow1.value = false;
|
}
|
};
|
const showTorque = () => {
|
isTorque.value = true;
|
nextTick(() => {
|
if (innerRef.value.clientHeight > 150) {
|
scrollbarRef.value.setScrollTop(innerRef.value.clientHeight);
|
}
|
});
|
};
|
//添加扭力值
|
const addTorque = () => {
|
torqueFrom.value.processSte = Torque.value[0].processSte;
|
torqueFrom.value.takeId = Torque.value[0].takeId;
|
torqueFrom.value.groupOp = Torque.value[0].groupOp;
|
if (
|
torqueFrom.value.torqueSize == null ||
|
torqueFrom.value.torqueSize == "" ||
|
torqueFrom.value.torqueSize == 0
|
) {
|
ElMessage({
|
message: "请输入力矩值",
|
type: "warning",
|
});
|
return;
|
}
|
|
AddTorque(torqueFrom.value)
|
.then((res) => {
|
console.log("添加成功", res);
|
ElMessage({
|
message: "添加成功",
|
type: "success",
|
});
|
isTorque.value = false;
|
initData();
|
})
|
.catch((error) => {
|
console.error("添加失败", error);
|
});
|
};
|
onMounted(() => {
|
document.addEventListener("click", handleClickOutside);
|
initData();
|
showModel();
|
});
|
</script>
|
<style lang="scss" scoped>
|
* {
|
padding: 0;
|
margin: 0;
|
box-sizing: border-box;
|
}
|
|
.Startjob {
|
width: 100%;
|
height: 100%;
|
background: linear-gradient(to left, #02cde6, #02cde6) left top no-repeat,
|
linear-gradient(to bottom, #02cde6, #02cde6) left top no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) right top no-repeat,
|
linear-gradient(to bottom, #02cde6, #02cde6) right top no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) left bottom no-repeat,
|
linear-gradient(to bottom, #02cde6, #02cde6) left bottom no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) right bottom no-repeat,
|
linear-gradient(to left, #02cde6, #02cde6) right bottom no-repeat;
|
background-size: 0.3rem 2rem, 2rem 0.3rem, 0.3rem 2rem, 2rem 0.3rem;
|
padding: 0.2rem;
|
box-sizing: border-box;
|
background-color: rgba(0, 0, 0, 0.3);
|
overflow: hidden;
|
|
.rect {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
border: 0.1rem solid #02cde6;
|
box-shadow: 0rem 0rem 0.3rem #02cde6;
|
|
.rect-top {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 3rem;
|
background: #051d3f;
|
text-align: center;
|
|
img {
|
width: 3.75rem;
|
height: 2.81rem;
|
}
|
|
span {
|
color: rgba(26, 194, 247, 1);
|
font-size: 1.25rem;
|
}
|
}
|
|
.rect-center {
|
display: flex;
|
justify-content: space-between;
|
width: 80%;
|
margin: 0 auto;
|
padding: 0.8rem 2.15rem;
|
box-sizing: border-box;
|
|
.rect-item1 {
|
display: flex;
|
flex-direction: column;
|
width: 14.31rem;
|
height: 15.38rem;
|
background-image: url("../../../assets/TheCurrentJob/bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 0.28rem 0.28rem;
|
box-sizing: border-box;
|
}
|
|
.rect-item2 {
|
width: 49.88rem;
|
height: 15.38rem;
|
border: 0.1rem solid #02cde6;
|
padding: 0.69rem 1.44rem;
|
|
.el-table :deep(.el-table__header th) {
|
border: solid 1px #1ac0f6;
|
color: white;
|
}
|
|
.consten {
|
position: relative;
|
top: 0;
|
z-index: 999;
|
}
|
}
|
|
.rect-item3 {
|
display: flex;
|
flex-direction: column;
|
width: 11.31rem;
|
height: 15.38rem;
|
background-image: url("../../../assets/TheCurrentJob/bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding: 0.28rem 0.28rem;
|
box-sizing: border-box;
|
}
|
}
|
|
.rect-content {
|
display: flex;
|
justify-content: space-between;
|
width: 100%;
|
padding: 0.8rem 2.15rem;
|
box-sizing: border-box;
|
}
|
}
|
}
|
|
// .el-table :deep(.el-table__header th) {
|
// border-bottom: solid 1px #1ac2f7;
|
// color: white;
|
// }
|
.el-table :deep(.el-table__row td) {
|
border: solid 1px #1ac2f7;
|
color: white;
|
}
|
|
.el-table :deep(.el-table__empty-block) {
|
background-color: #137aaf;
|
color: #1ac2f7;
|
}
|
|
.el-table :deep(.el-table__body-wrapper) {
|
background-color: #1ac2f7;
|
}
|
|
:deep(.el-popper) {
|
background-color: #ad2525;
|
}
|
</style>
|
