From abdc7313b9e2c5a3e09d42cbaee48c6f131d7173 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 17 八月 2022 09:14:43 +0800
Subject: [PATCH] lct
---
src/assets/newMenu/card-3.png | 0
src/layout/navBars/breadcrumb/user.vue | 2
src/views/intellectInspect/intelligentLine/index.vue | 899 ++++++++++++++++++++++-----------
src/assets/newMenu/card-1.png | 0
src/assets/newMenu/card-6.png | 0
src/views/newHome/index.vue | 423 ++++++++++++---
src/assets/newMenu/card-10.png | 0
src/assets/newMenu/card-8.png | 0
.env.development | 20
src/assets/newMenu/card-4.png | 0
src/views/doublePrevent/dpIndex/index.vue | 161 ++++-
src/assets/newMenu/card-2.png | 0
src/api/intelligentLine/index.ts | 2
src/views/specialWorkSystem/workApplyManage/workTicket/index.vue | 24
src/assets/avator.png | 0
src/assets/newMenu/card-5.png | 0
src/assets/newMenu/card-11.png | 0
src/assets/newMenu/card-7.png | 0
src/assets/newMenu/card-9.png | 0
19 files changed, 1,060 insertions(+), 471 deletions(-)
diff --git a/.env.development b/.env.development
index 60d190e..743a43c 100644
--- a/.env.development
+++ b/.env.development
@@ -28,5 +28,23 @@
#VITE_API_URL_OUT = 'http://121.239.169.27:16006/safeplatform-out'
#线上正式环境外包接口地址
-VITE_API_URL_SOCKET = 'http://192.168.0.29:8018'
+#VITE_API_URL = 'http://192.168.0.52:8011/safeplatform'
+#本地预发接口地址
+
+#VITE_API_URL_OUT = 'http://192.168.0.52:8011/safeplatform-out'
+#本地外包预发接口地址
+
+#VITE_API_URL_SOCKET = 'http://192.168.0.29:8018'
#黄振websocket接口地址
+
+#VITE_API_URL = 'http://192.168.0.52:7021/safeplatform'
+#本地测试接口地址
+
+VITE_API_URL_SOCKET = 'http://192.168.0.52:7021/safeplatform'
+#本地测试websocket接口地址
+
+#VITE_API_URL = 'http://192.168.0.29:7008'
+#黄振接口test地址
+
+#VITE_API_URL_SOCKET = 'http://192.168.0.29:16107'
+#黄振websocket test接口地址
diff --git a/src/api/intelligentLine/index.ts b/src/api/intelligentLine/index.ts
index 9c11ce2..26f2529 100644
--- a/src/api/intelligentLine/index.ts
+++ b/src/api/intelligentLine/index.ts
@@ -15,7 +15,7 @@
getUrl: () => {
// debugger
return request({
- url: import.meta.env.VITE_API_URL_SOCKET + `/ws/namesrv/get/one`,
+ url: import.meta.env.VITE_API_URL_SOCKET + `/ws/namesrv/get/one?srv=safeplatform-websocket`,
method: 'get'
});
}
diff --git a/src/assets/avator.png b/src/assets/avator.png
new file mode 100644
index 0000000..3d7f367
--- /dev/null
+++ b/src/assets/avator.png
Binary files differ
diff --git a/src/assets/newMenu/card1.png b/src/assets/newMenu/card-1.png
similarity index 100%
rename from src/assets/newMenu/card1.png
rename to src/assets/newMenu/card-1.png
Binary files differ
diff --git a/src/assets/newMenu/card10.png b/src/assets/newMenu/card-10.png
similarity index 100%
rename from src/assets/newMenu/card10.png
rename to src/assets/newMenu/card-10.png
Binary files differ
diff --git a/src/assets/newMenu/card11.png b/src/assets/newMenu/card-11.png
similarity index 100%
rename from src/assets/newMenu/card11.png
rename to src/assets/newMenu/card-11.png
Binary files differ
diff --git a/src/assets/newMenu/card2.png b/src/assets/newMenu/card-2.png
similarity index 100%
rename from src/assets/newMenu/card2.png
rename to src/assets/newMenu/card-2.png
Binary files differ
diff --git a/src/assets/newMenu/card3.png b/src/assets/newMenu/card-3.png
similarity index 100%
rename from src/assets/newMenu/card3.png
rename to src/assets/newMenu/card-3.png
Binary files differ
diff --git a/src/assets/newMenu/card4.png b/src/assets/newMenu/card-4.png
similarity index 100%
rename from src/assets/newMenu/card4.png
rename to src/assets/newMenu/card-4.png
Binary files differ
diff --git a/src/assets/newMenu/card5.png b/src/assets/newMenu/card-5.png
similarity index 100%
rename from src/assets/newMenu/card5.png
rename to src/assets/newMenu/card-5.png
Binary files differ
diff --git a/src/assets/newMenu/card6.png b/src/assets/newMenu/card-6.png
similarity index 100%
rename from src/assets/newMenu/card6.png
rename to src/assets/newMenu/card-6.png
Binary files differ
diff --git a/src/assets/newMenu/card7.png b/src/assets/newMenu/card-7.png
similarity index 100%
rename from src/assets/newMenu/card7.png
rename to src/assets/newMenu/card-7.png
Binary files differ
diff --git a/src/assets/newMenu/card8.png b/src/assets/newMenu/card-8.png
similarity index 100%
rename from src/assets/newMenu/card8.png
rename to src/assets/newMenu/card-8.png
Binary files differ
diff --git a/src/assets/newMenu/card9.png b/src/assets/newMenu/card-9.png
similarity index 100%
rename from src/assets/newMenu/card9.png
rename to src/assets/newMenu/card-9.png
Binary files differ
diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue
index 5a46abf..5a26dde 100644
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -57,7 +57,7 @@
</div>
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link">
- <img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+ <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" style="width: 24px;height: 24px"/>
{{ userInfos.userName }}
<el-icon class="el-icon--right">
<ele-ArrowDown />
diff --git a/src/views/doublePrevent/dpIndex/index.vue b/src/views/doublePrevent/dpIndex/index.vue
index c06a0e3..af4b5db 100644
--- a/src/views/doublePrevent/dpIndex/index.vue
+++ b/src/views/doublePrevent/dpIndex/index.vue
@@ -1,12 +1,13 @@
<template>
<div class="home-container">
+ <el-scrollbar height="100%">
<div class="main-cont">
<div class="table-item">
<div class="item-head">
<span>告警风险事件概括</span>
<div @click="toRiskEve">查看更多>></div>
</div>
- <el-table :data="eventData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table :data="eventData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }">
<el-table-column prop="riskEventName" label="风险事件名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="riskUnitName" label="风险分析单元名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
@@ -18,7 +19,7 @@
<span>隐患状态详情</span>
<div @click="toRiskStatus">查看更多>></div>
</div>
- <el-table :data="riskStatusData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table :data="riskStatusData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }">
<el-table-column type="index" label="序号" width="60" />
<!-- <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip width="170px"></el-table-column>-->
<el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column>
@@ -86,6 +87,7 @@
<div id="riskLevel"></div>
</div>
</div>
+ </el-scrollbar>
</div>
</template>
@@ -375,37 +377,106 @@
<style scoped lang="scss">
$homeNavLengh: 8;
+
+ @media screen and (min-width: 1366px) {
+ .item-head{
+ height: 25px;
+ line-height: 25px;
+ span{
+ font-size: 20px;
+ }
+ div{
+ font-size: 16px;
+ }
+ }
+
+ .levelItem{
+ font-size: 16px;
+
+ span{
+ margin-bottom: 10px;
+ font-size: 24px;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @media screen and (min-width: 1024px) and (max-width: 1366px){
+ .item-head{
+ height: 20px;
+ line-height: 20px;
+ span{
+ font-size: 16px;
+ }
+ div{
+ font-size: 14px;
+ }
+ }
+ .levelItem{
+ font-size: 14px;
+
+ span{
+ margin-bottom: 10px;
+ font-size: 20px;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @media screen and (max-width: 1024px) {
+ .item-head{
+ height: 20px;
+ line-height: 20px;
+ span{
+ font-size: 13px;
+ }
+ div{
+ font-size: 12px;
+ }
+ }
+ .levelItem{
+ font-size: 12px;
+
+ span{
+ margin-bottom: 10px;
+ font-size: 16px;
+ font-weight: bolder;
+ }
+ }
+ }
.home-container {
- height: calc(100vh - 144px);
- /*height: 100%;*/
+ height: 100%;
box-sizing: border-box;
overflow: hidden;
+
.main-cont {
width: 100%;
height: 100%;
display: grid;
+ margin-bottom: 40px;
+ box-sizing: border-box;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: row;
justify-content: center;
.table-item{
- height: calc(50vh - 82px);
border-radius: 8px;
background: #fff;
padding: 15px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ box-sizing: border-box;
.item-head{
display: flex;
align-items: center;
justify-content: space-between;
- height: 25px;
margin-bottom: 20px;
- line-height: 25px;
border-left: 4px solid #409eff;
padding-left: 10px;
span{
- font-size: 20px;
color: #333;
font-weight: bolder;
}
@@ -418,52 +489,52 @@
}
}
#riskFix{
- height: calc(50vh - 157px);
+ height: 300px;
}
#riskLevel{
- height: calc(50vh - 157px);
+ height: 300px
}
.deviceTable{
- height: calc((50vh - 167px) / 3 * 2);
+ height: 200px;
}
- .deviceLevel{
- height: calc((50vh - 167px) / 3);
- display: grid;
- grid-gap: 10px;
- grid-template-columns: repeat(4, 1fr);
- align-items: center;
- justify-content: space-between;
-
- .levelItem{
- display: flex;
- margin-top: 20px;
- flex-direction: column;
+ .deviceLevel{
+ width: 100%;
+ height: 100px;
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(4, 1fr);
align-items: center;
- padding: 15px;
- box-sizing: border-box;
- border-radius: 8px;
- color: #fff;
- font-size: 16px;
+ justify-content: space-between;
- span{
- margin-bottom: 10px;
- font-size: 24px;
- font-weight: bolder;
+ .levelItem{
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 15px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ color: #fff;
+
+ span{
+ margin-bottom: 10px;
+ font-weight: bolder;
+ }
+ }
+ .red{
+ background: #F56C6C;
+ }
+ .orange{
+ background: #E6A23C;
+ }
+ .green{
+ background: #67C23A;
+ }
+ .blue{
+ background: #409EFF;
}
}
- .red{
- background: #F56C6C;
- }
- .orange{
- background: #E6A23C;
- }
- .green{
- background: #67C23A;
- }
- .blue{
- background: #409EFF;
- }
- }
}
.table-item2{
grid-column-start: 2;
diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
index 50d8ed4..da39b51 100644
--- a/src/views/intellectInspect/intelligentLine/index.vue
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -142,7 +142,7 @@
const res = await lineApi().getUrl();
if (res.data.code === '200') {
state.path = 'http://' + res.data.data.ip + ':' + res.data.data.port + '/ws/test/'
- if (typeof window.WebSocket === 'undefined') {
+ if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持socket');
} else {
// 实例化socket
@@ -152,7 +152,7 @@
console.log(url,'url',uid,'uid')
url = url.replace('https', 'ws').replace('http', 'ws');
console.log(url, '获取地址');
- state.socket = new window.WebSocket(url);
+ state.socket = new WebSocket(url);
// 监听socket连接
state.socket.onopen = () => {
console.log('socket连接成功');
@@ -231,120 +231,605 @@
};
}
};
-// export default {
-// name: 'NewForm',
-// props: {
-//
-// },
-// data(){
-// return{
-// present: '',
-// isScreenfull: false,
-// path: "http://192.168.0.29:8008/ws/test/",
-// socket: null,
-// socketData: '',
-// data: []
-// }
-// },
-// created() {
-// setInterval(() => {
-// this.present = new Date().toLocaleString()
-// }, 1000)
-// },
-// mounted () {
-// // 初始化
-// this.init()
-// // this.getLine()
-// },
-// methods:{
-// goBack(){
-// window.history.go(-1)
-// },
-//
-// async getLine (){
-// let res = await lineApi().getLine({ id: '80647416891768832' });
-// if (res.data.code === '200') {
-// console.log(res.data.data,'获取巡检点')
-// this.data = res.data.data
-// console.log(this.data,'---')
-// } else {
-// ElMessage({
-// type: 'warning',
-// message: res.data.msg
-// });
-// }
-// },
-//
-// // 全屏点击时
-// onScreenfullClick(){
-// const t = this
-// if (!screenfull.isEnabled) {
-// ElMessage.warning('暂不不支持全屏');
-// return false;
-// }
-// screenfull.toggle();
-// screenfull.on('change', () => {
-// if (screenfull.isFullscreen) {
-// t.isScreenfull = true
-// }
-// else{
-// t.isScreenfull = false
-// }
-// });
-// },
-//
-// // socket获取数据
-// init: function () {
-// if(typeof(window.WebSocket) === "undefined"){
-// alert("您的浏览器不支持socket")
-// }else{
-// // 实例化socket
-// var url = this.path + '80938081556545536'
-// url = url.replace("https","ws").replace("http","ws");
-// console.log(url,'获取地址')
-// this.socket = new window.WebSocket(url)
-// // 监听socket连接
-// this.socket.onopen = this.open
-// // 监听socket错误信息
-// this.socket.onerror = this.error
-// // 监听socket消息
-// this.socket.onmessage = this.getMessage
-// }
-// },
-// open: function () {
-// console.log("socket连接成功")
-// },
-// error: function () {
-// console.log("连接错误")
-// },
-// getMessage: function (msg) {
-// console.log(typeof msg.data,'type')
-// if(msg.data =='连接成功') return
-// this.socketData = msg.data
-// console.log(JSON.parse(this.socketData),'------------------',)
-// if(typeof JSON.parse(this.socketData) == Array){
-// this.data = JSON.parse(this.socketData)
-// console.log(this.data)
-// }
-// // console.log(msg,'msg')
-// // console.log(this.data,'data-------')
-// },
-// send: function () {
-// this.socket.send(params)
-// },
-// close: function () {
-// console.log("socket已经关闭")
-// }
-// },
-// destroyed () {
-// // 销毁监听
-// this.socket.onclose = this.close
-// }
-// }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
+ @media screen and (min-width: 1366px) {
+ .big-title {
+ font-size: 28px;
+ margin: 10px 0 20px;
+ }
+ .btns {
+ position: absolute;
+ z-index: 99999;
+ right: 60px;
+ top: 40px;
+ div {
+ font-size: 16px;
+ color: #00ffff;
+ }
+ }
+ .line-item {
+ width: calc((100vw - 40px) / 6);
+ padding-left: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-right: 20px;
+ flex-wrap: nowrap;
+
+ .picbox {
+ width: 100%;
+ height: 180px;
+ padding: 10px;
+ margin-bottom: 40px;
+ box-sizing: border-box;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 8px;
+ border-radius: 4px;
+ }
+ p {
+ font-size: 14px;
+ white-space: nowrap;
+ color: rgba(255, 255, 255, 0.8);
+ margin-top: 10px;
+ span {
+ color: #fff;
+ }
+ }
+ }
+ }
+ .item {
+ width: calc((100vw - 40px) / 6);
+ height: calc((100vh - 130px) / 5);
+ padding: 0 20px 20px 50px;
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid #36fcfc;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ section {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid rgba(0, 225, 255, 0.6);
+ top: -12px;
+ left: 10px;
+
+ .dot {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: 5px;
+ top: 5px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #0072ff;
+ border-radius: 50%;
+ background-color: #00e1ff;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn 2s ease-out;
+ -moz-animation: warn 2s ease-out;
+ animation: warn 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn1 2s ease-out;
+ -moz-animation: warn1 2s ease-out;
+ animation: warn1 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ }
+ & > div {
+ padding: 10px 0;
+ transform: translateY(-14px);
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+ border: 1px solid rgba(54, 252, 252, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div {
+ margin-bottom: 5px;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ span {
+ display: inline-block;
+ white-space: nowrap;
+ width: 50%;
+ font-size: 13px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type {
+ text-align: right;
+ color: rgba(255, 255, 255, 0.8);
+ }
+ }
+ }
+ }
+ .noBorder{
+ border: 1px solid rgba(54, 252, 252, 0.1);
+ }
+ .redBorder{
+ border: 1px solid #ff0000;
+ }
+ p {
+ width: 140px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 48px;
+ text-align: center;
+ color: #fff;
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+ border: 1px solid rgba(54, 252, 252, 0.6);
+ }
+ }
+ .finish-point {
+ position: absolute;
+ width: 90px;
+ height: 90px;
+ border: 2px solid #0072ff;
+ left: -30px;
+ top: -45px;
+ border-radius: 50%;
+
+ & > div {
+ width: 80px;
+ height: 80px;
+ position: absolute;
+ left: 3px;
+ top: 3px;
+ background: #0072ff;
+ border-radius: 50%;
+ color: #fff;
+ font-size: 16px;
+ line-height: 80px;
+ text-align: center;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @media screen and (min-width: 1200px) and (max-width: 1366px){
+ .big-title {
+ font-size: 28px;
+ margin: 10px 0 20px;
+ }
+ .btns {
+ position: absolute;
+ z-index: 99999;
+ right: 40px;
+ top: 40px;
+ div {
+ font-size: 14px;
+ color: #00ffff;
+ }
+ }
+ .line-item {
+ width: calc((100vw - 40px) / 5);
+ padding-left: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-right: 20px;
+ flex-wrap: nowrap;
+ .picbox {
+ width: 100%;
+ height: 180px;
+ padding: 10px;
+ margin-bottom: 40px;
+ box-sizing: border-box;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 6px;
+ border-radius: 4px;
+ }
+ p {
+ font-size: 14px;
+ white-space: nowrap;
+ color: rgba(255, 255, 255, 0.8);
+ margin-top: 10px;
+ span {
+ color: #fff;
+ }
+ }
+ }
+ }
+ .item {
+ width: calc((100vw - 40px) / 5);
+ height: calc((100vh - 130px) / 5);
+ padding: 0 20px 20px 40px;
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid #36fcfc;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ section {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid rgba(0, 225, 255, 0.6);
+ top: -12px;
+ left: 10px;
+
+ .dot {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: 5px;
+ top: 5px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #0072ff;
+ border-radius: 50%;
+ background-color: #00e1ff;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn 2s ease-out;
+ -moz-animation: warn 2s ease-out;
+ animation: warn 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn1 2s ease-out;
+ -moz-animation: warn1 2s ease-out;
+ animation: warn1 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ }
+ & > div {
+ width: 90%;
+ padding: 10px 0;
+ transform: translateY(-14px);
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+ border: 1px solid rgba(54, 252, 252, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div {
+ width: 100%;
+ margin-bottom: 5px;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ span {
+ display: inline-block;
+ white-space: nowrap;
+ width: 50%;
+ font-size: 13px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type {
+ text-align: right;
+ color: rgba(255, 255, 255, 0.8);
+ }
+ }
+ }
+ }
+ .noBorder{
+ border: 1px solid rgba(54, 252, 252, 0.1);
+ }
+ .redBorder{
+ border: 1px solid #ff0000;
+ }
+ p {
+ width: 140px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 48px;
+ text-align: center;
+ color: #fff;
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+ border: 1px solid rgba(54, 252, 252, 0.6);
+ }
+ }
+ .finish-point {
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ border: 1px solid #0072ff;
+ left: -20px;
+ top: -40px;
+ border-radius: 50%;
+
+ & > div {
+ width: 70px;
+ height: 70px;
+ position: absolute;
+ left: 4px;
+ top: 4px;
+ background: #0072ff;
+ border-radius: 50%;
+ color: #fff;
+ font-size: 14px;
+ line-height: 70px;
+ text-align: center;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @media screen and (max-width: 1200px){
+ .big-title {
+ font-size: 20px;
+ margin: 5px 0 10px;
+ }
+ .btns {
+ position: absolute;
+ z-index: 99999;
+ right: 20px;
+ top: 40px;
+ div {
+ font-size: 12px;
+ color: #00ffff;
+ }
+ }
+ .line-item {
+ width: 20vw;
+ padding-left: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-right: 20px;
+ flex-wrap: nowrap;
+ .picbox {
+ width: 100%;
+ height: 160px;
+ padding: 10px;
+ margin-bottom: 30px;
+ box-sizing: border-box;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 80px;
+ margin-bottom: 10px;
+ border-radius: 4px;
+ }
+ p {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.8);
+ margin-top: 6px;
+ span {
+ color: #fff;
+ }
+ }
+ }
+ }
+ .item {
+ width: 20vw;
+ height: calc((100vh - 130px) / 5);
+ padding: 0 0 20px 30px;
+ position: relative;
+ box-sizing: border-box;
+ border-left: 1px solid #36fcfc;
+
+ &:last-of-type {
+ border: none;
+ }
+
+ section {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ position: absolute;
+ border: 1px solid rgba(0, 225, 255, 0.6);
+ top: -12px;
+ left: 2px;
+
+ .dot {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: 5px;
+ top: 5px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border: 1px solid #0072ff;
+ border-radius: 50%;
+ background-color: #00e1ff;
+ z-index: 2;
+ }
+ .pulse {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn 2s ease-out;
+ -moz-animation: warn 2s ease-out;
+ animation: warn 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ .pulse1 {
+ position: absolute;
+ width: 48px;
+ height: 48px;
+ left: -13px;
+ top: -13px;
+ border: 1px solid #00e1ff;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ z-index: 1;
+ opacity: 0;
+ -webkit-animation: warn1 2s ease-out;
+ -moz-animation: warn1 2s ease-out;
+ animation: warn1 2s ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ box-shadow: 1px 1px 30px #00e1ff;
+ }
+ }
+ & > div {
+ width: 80%;
+ padding: 4px 0;
+ transform: translateY(-14px);
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
+ border: 1px solid rgba(54, 252, 252, 1);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ div {
+ width: 100%;
+ margin-bottom: 2px;
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ span {
+ width: 50%;
+ display: inline-block;
+ white-space: nowrap;
+ font-size: 12px;
+ color: #fff;
+ text-align: left;
+
+ &:first-of-type {
+ text-align: right;
+ color: rgba(255, 255, 255, 0.8);
+ }
+ }
+ }
+ }
+ .noBorder{
+ border: 1px solid rgba(54, 252, 252, 0.1);
+ }
+ .redBorder{
+ border: 1px solid #ff0000;
+ }
+ p {
+ width: 140px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 48px;
+ text-align: center;
+ color: #fff;
+ border-radius: 8px;
+ background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
+ border: 1px solid rgba(54, 252, 252, 0.6);
+ }
+ }
+ .finish-point {
+ position: absolute;
+ width: 70px;
+ height: 70px;
+ border: 1px solid #0072ff;
+ left: -10px;
+ top: -35px;
+ border-radius: 50%;
+
+ & > div {
+ width: 60px;
+ height: 60px;
+ position: absolute;
+ left: 4px;
+ top: 4px;
+ background: #0072ff;
+ border-radius: 50%;
+ color: #fff;
+ font-size: 12px;
+ line-height: 60px;
+ text-align: center;
+ font-weight: bolder;
+ }
+ }
+ }
+
@keyframes warn {
0% {
transform: scale(0.3);
@@ -436,9 +921,7 @@
.big-title {
height: 40px;
line-height: 40px;
- font-size: 28px;
font-weight: bold;
- margin: 10px 0 20px;
text-align: center;
color: #fff;
display: flex;
@@ -446,10 +929,6 @@
justify-content: center;
}
.btns {
- position: absolute;
- z-index: 99999;
- right: 60px;
- top: 40px;
display: flex;
align-items: center;
.fullbtn {
@@ -462,10 +941,6 @@
color: #00ffff;
margin-right: 10px;
}
- div {
- font-size: 16px;
- color: #00ffff;
- }
}
.backBtn {
@@ -476,10 +951,6 @@
width: 14px;
height: 14px;
margin-right: 10px;
- }
- div {
- font-size: 16px;
- color: #00ffff;
}
}
}
@@ -506,37 +977,7 @@
align-items: flex-start;
.line-item {
- width: calc((100vw - 180px) / 6);
- padding-left: 20px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin-right: 20px;
- flex-wrap: nowrap;
- .picbox {
- width: 100%;
- height: calc((100vh - 130px) / 5);
- padding: 10px;
- margin-bottom: 40px;
- box-sizing: border-box;
-
- img {
- display: block;
- width: 100%;
- height: 100px;
- margin-bottom: 10px;
- border-radius: 4px;
- }
- p {
- font-size: 14px;
- color: rgba(255, 255, 255, 0.8);
- margin-top: 10px;
- span {
- color: #fff;
- }
- }
- }
.area-head {
position: relative;
width: 100%;
@@ -677,128 +1118,6 @@
.more-info {
width: 100%;
- .item {
- width: calc((100vw - 120px) / 6);
- height: calc((100vh - 130px) / 5);
- padding: 0 50px 20px;
- position: relative;
- box-sizing: border-box;
- border-left: 1px solid #36fcfc;
-
- &:last-of-type {
- border: none;
- }
-
- section {
- width: 24px;
- height: 24px;
- border-radius: 50%;
- position: absolute;
- border: 1px solid rgba(0, 225, 255, 0.6);
- top: -12px;
- left: 10px;
-
- .dot {
- position: absolute;
- width: 12px;
- height: 12px;
- left: 5px;
- top: 5px;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border: 1px solid #0072ff;
- border-radius: 50%;
- background-color: #00e1ff;
- z-index: 2;
- }
- .pulse {
- position: absolute;
- width: 48px;
- height: 48px;
- left: -13px;
- top: -13px;
- border: 1px solid #00e1ff;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border-radius: 50%;
- z-index: 1;
- opacity: 0;
- -webkit-animation: warn 2s ease-out;
- -moz-animation: warn 2s ease-out;
- animation: warn 2s ease-out;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- box-shadow: 1px 1px 30px #00e1ff;
- }
- .pulse1 {
- position: absolute;
- width: 48px;
- height: 48px;
- left: -13px;
- top: -13px;
- border: 1px solid #00e1ff;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- border-radius: 50%;
- z-index: 1;
- opacity: 0;
- -webkit-animation: warn1 2s ease-out;
- -moz-animation: warn1 2s ease-out;
- animation: warn1 2s ease-out;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- box-shadow: 1px 1px 30px #00e1ff;
- }
- }
- & > div {
- padding: 10px 0;
- transform: translateY(-14px);
- border-radius: 8px;
- background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
- border: 1px solid rgba(54, 252, 252, 1);
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- div {
- margin-bottom: 5px;
- &:last-of-type {
- margin-bottom: none;
- }
- span {
- display: inline-block;
- width: 50%;
- font-size: 13px;
- color: #fff;
- text-align: left;
-
- &:first-of-type {
- text-align: right;
- color: rgba(255, 255, 255, 0.8);
- }
- }
- }
- }
- .noBorder{
- border: 1px solid rgba(54, 252, 252, 0.1);
- }
- .redBorder{
- border: 1px solid #ff0000;
- }
- p {
- width: 140px;
- height: 50px;
- font-size: 18px;
- line-height: 48px;
- text-align: center;
- color: #fff;
- border-radius: 8px;
- background-image: linear-gradient(to right, rgba(11, 255, 255, 0.2), rgba(8, 109, 209, 0.4));
- border: 1px solid rgba(54, 252, 252, 0.6);
- }
- }
.warning {
& > section {
border: 1px solid #ff0000;
@@ -850,30 +1169,6 @@
width: 100%;
height: 80px;
border-left: none;
- .finish-point {
- position: absolute;
- width: 90px;
- height: 90px;
- border: 2px solid #0072ff;
- left: -30px;
- top: -45px;
- border-radius: 50%;
-
- & > div {
- width: 80px;
- height: 80px;
- position: absolute;
- left: 3px;
- top: 3px;
- background: #0072ff;
- border-radius: 50%;
- color: #fff;
- font-size: 16px;
- line-height: 80px;
- text-align: center;
- font-weight: bolder;
- }
- }
}
}
.pic-tit {
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 4e61775..c55f2ed 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -57,7 +57,7 @@
</div>
</div>
</div>
- <img class="bgImg1" src="../../assets/newMenu/card1.png" />
+ <img class="bgImg1" src="../../assets/newMenu/card-1.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('2')">
<div class="toplayer">
@@ -67,7 +67,7 @@
<div class="enTit">Double prevention</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card4.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-4.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('4')">
<div class="toplayer">
@@ -77,7 +77,7 @@
<div class="enTit">Intelligent inspection system</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card8.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-8.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('3')">
<div class="toplayer">
@@ -87,7 +87,7 @@
<div class="enTit">special work</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card7.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-7.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('7')">
<div class="toplayer">
@@ -97,7 +97,7 @@
<div class="enTit">Target Responsibility Management</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card2.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-2.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('10')">
<div class="toplayer">
@@ -107,7 +107,7 @@
<div class="enTit">Security Knowledge Graph</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card3.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-3.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('9')">
<div class="toplayer">
@@ -117,7 +117,7 @@
<div class="enTit">Comprehensive equipment control</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card9.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-9.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('6')">
<div class="toplayer">
@@ -127,17 +127,17 @@
<div class="enTit">Emergency management</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card5.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-5.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('11')">
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon9.png" />
<div>
- <div class="itemTit">危险化学品全生命周期安全<br />管理系统</div>
+ <div class="itemTit">危险化学品全生命周期安全管理系统</div>
<div class="enTit">Full life cycle of hazardous chemicals</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card10.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-10.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('8')">
<div class="toplayer">
@@ -147,7 +147,7 @@
<div class="enTit">Incident Management</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card6.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-6.png" />
</div>
<div class="grid-content cont-bg-2" @click="render('1')">
<div class="toplayer">
@@ -157,7 +157,7 @@
<div class="enTit">Basic data permissions</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card11.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-11.png" />
</div>
</div>
</div>
@@ -400,6 +400,312 @@
</script>
<style scoped lang="scss">
+ @media screen and (min-width: 1400px) {
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 28px;
+ line-height: 34px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ }
+ .enTit{
+ font-size: 18px;
+ line-height: 20px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 88px;
+ height: 88px;
+ margin-right: 20px;
+ }
+ }
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 34px;
+ line-height: 42px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 22px;
+ line-height: 24px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+
+ .bot-rights{
+ font-size: 18px;
+ color: #333;
+ }
+ }
+
+ @media screen and (min-width: 1200px) and (max-width: 1400px){
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 15px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 26px;
+ line-height: 30px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ margin-bottom: 2px;
+ }
+ .enTit{
+ font-size: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 44px;
+ height: 44px;
+ margin-right: 10px;
+ }
+
+ }
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 28px;
+ line-height: 36px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 16px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+ .bot-rights{
+ font-size: 15px;
+ color: #333;
+ }
+ }
+ @media screen and (max-width: 1200px){
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 15px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 18px;
+ line-height: 22px;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ }
+ .enTit{
+ font-size: 12px;
+ line-height: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
+ }
+ }
+ .bgImg {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 24px;
+ line-height: 36px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+ .bot-rights{
+ font-size: 12px;
+ color: #333;
+ }
+ }
.login-container {
width: 100%;
height: 100%;
@@ -499,7 +805,7 @@
height: 100%;
z-index: 99;
background: url('../../assets/newMenu/leftbg.png') no-repeat center;
- background-size: 100% auto;
+ background-size: 100% 100%;
}
.topCont{
position: absolute;
@@ -579,13 +885,6 @@
top: 260px;
left: 240px;
.gridCont {
- width: 100%;
- height: 100%;
- display: grid;
- grid-gap: 20px;
- grid-template-columns: repeat(3, 1fr);
- grid-auto-flow: row;
- justify-content: center;
.grid-content {
border-radius: 16px;
@@ -594,71 +893,10 @@
cursor: pointer;
transition: 0.3s;
border: none;
- .toplayer{
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- display: flex;
- align-items: center;
- padding: 0 20px;
- z-index: 99;
- }
+
&:hover {
background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%);
box-shadow: 8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa;
- }
-
- .itemTit {
- font-size: 29px;
- line-height: 36px;
- height: 40%;
- font-family: 'PingFang SC';
- font-weight: 600;
- color: #072270;
- margin-bottom: 2px;
- }
- .enTit{
- font-size: 18px;
- color: #072270;
- font-family: 'PingFang SC';
- font-weight: 600;
- }
- .enTit1{
- font-size: 22px;
- color: #072270;
- font-family: 'PingFang SC';
- font-weight: 600;
- }
- .itemTit1 {
- font-size: 36px;
- line-height: 48px;
- height: 40%;
- font-family: 'PingFang SC';
- font-weight: 600;
- letter-spacing: 1px;
- color: #072270;
- margin-bottom: 18px;
- }
- .iconImg {
- width: 88px;
- height: 88px;
- margin-right: 20px;
- }
- .bgImg1 {
- position: absolute;
- width: 45%;
- height: auto;
- right: -20px;
- top: 30%;
- }
- .bgImg {
- position: absolute;
- width: 30%;
- height: auto;
- right: -10px;
- top: 15px;
}
}
.cont-bg-1{
@@ -667,26 +905,7 @@
.cont-bg-2{
background: #CDD6FF;
}
- .grid-content-1{
- grid-row-start: 1;
- grid-row-end: 3;
- .toplayer{
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- display: flex;
- align-items: center;
- z-index: 99;
-
- &>div{
- display: flex;
- align-items: flex-start;
- }
- }
- }
/*.grid-content-2{*/
/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
@@ -713,8 +932,6 @@
height: 8px;
}
div{
- font-size: 18px;
- color: #333;
margin: 0 20px;
}
}
diff --git a/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue b/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue
index 466fa00..f73f27d 100644
--- a/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue
+++ b/src/views/specialWorkSystem/workApplyManage/workTicket/index.vue
@@ -219,9 +219,7 @@
</div>
</el-form>
<div class="applyBtn">
- <el-col :span="24" class="submitBtn">
- <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button>
- </el-col>
+ <el-button type="primary" size="large" plain @click="handleApply(ruleFormRef2)">发起申请</el-button>
</div>
<el-dialog v-model="dialogAddWorker" title="添加作业人">
<el-form :model="addWorkerForm" label-width="120px" :rules="addWorkerRules" ref='ruleFormRef3'>
@@ -624,26 +622,20 @@
.homeCard{
width: 100%;
padding: 20px;
+ box-sizing: border-box;
background: #fff;
border-radius: 4px;
margin-bottom: 20px;
-
- &:last-of-type{
- margin-bottom: 100px;
- }
}
.applyBtn{
- position: absolute;
width: 100%;
- padding: 20px;
background: #fff;
- bottom: 0;
- left: 0;
height: 80px;
- z-index: 999;
- margin-bottom: 0;
- border-radius: 0;
+ z-index: 5;
box-shadow: 0 -3px 8px rgba(150,150,150,.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.el-row{
margin-bottom: 20px;
@@ -662,10 +654,6 @@
}
.el-cascader{
width: 100% !important;
- }
- .submitBtn{
- display: flex;
- justify-content: center;
}
}
</style>
--
Gitblit v1.9.2